/* ========================================
   🎨 THEME VARIABLER - ÆNDR HER FOR NYT TEMA
   ========================================

   INSTRUKTIONER:
   For at lave et nyt tema, skal du bare ændre farverne i variablerne nedenfor.
   Alle farver i CSS'en bruger disse variabler, så hele temaet opdateres automatisk.

   ======================================== */
:root {
    /* Primære farver */
    --theme-primary: #3CAFC8;
    /* Calm Coastal Aqua */
    --theme-primary-hover: #237F95;
    /* Hover-farve for primær */
    --theme-primary-text: #ffffff;
    /* Tekstfarve på primær baggrund */

    /* Baggrundsfarver */
    --theme-bg-main: #F7EBD8;
    /* Hovedbaggrund (body, wrapper) - Light Sand */
    --theme-bg-secondary: #0F5F65;
    /* Sekundær baggrund (footer, dropdowns) - Deep Coastal Teal */
    --theme-bg-box: #ffffff;
    /* Boksbaggrund (kort, paneler) - White */
    --theme-bg-input: #ffffff;
    /* Input-felter baggrund */
    --theme-bg-overlay: rgba(0, 0, 0, 0.75);
    /* Overlay baggrund */

    /* Tekstfarver */
    --theme-text: #243236;
    /* Hovedtekst - Deep Slate */
    --theme-text-light: #5C6F73;
    /* Lys tekst (priser, sekundær tekst) */
    --theme-text-muted: #809195;
    /* Nedtonet tekst (placeholders) */
    --theme-text-lighter: #D7F4F2;
    /* Ekstra lys tekst (for dark backgrounds like footer) */
    --theme-text-lightest: #ffffff;
    /* Meget lys tekst */

    /* Border og divider farver */
    --theme-border: #BFE7E8;
    /* Standard border - Pale Seafoam */
    --theme-border-light: #E5F6F4;
    /* Lys border */
    --theme-border-lighter: #F7EBD8;
    /* Ekstra lys border */

    /* Special farver */
    --theme-success: #F2B84B;
    /* Success/checkout knapper - Muted Summer Sun */
    --theme-success-hover: #D99A26;
    /* Success hover */
    --theme-focus: #3CAFC8;
    /* Focus state color */
    --theme-link: #237F95;
    /* Link farve (kupon) */
    --theme-link-hover: #0F5F65;
    /* Link hover */
    --theme-link-alt: #0F5F65;
    /* Alternativ link farve */

    /* Ekstra baggrundsfarver */
    --theme-bg-sticky: #F2F7F6;
    /* Sticky header/cart baggrund */
    --theme-bg-mobile: #F2F7F6;
    /* Mobil menu baggrund */
    --theme-bg-mobile-input: #ffffff;
    /* Mobil input baggrund */
    --theme-bg-quantity: #ffffff;
    /* Quantity input baggrund */

    /* Ekstra border farver */
    --theme-border-sticky: #CFE3E3;
    /* Sticky element border */

    /* Shadows og effects */
    --theme-shadow: rgba(0, 0, 0, 0.1);
    /* Standard shadow */
    --theme-shadow-light: rgba(0, 0, 0, 0.1);
    /* Lys shadow (hover) */
    --theme-sand-size: 760px auto;

    /* Header-baggrund (bruges af base.css) */
    --theme-header-bg: linear-gradient(180deg, #F6FBFA 0%, #EAF4F3 100%);
    /* Tekstfarve på købsknappen (bruges af base.css) */
    --theme-success-text: #ffffff;
    /* Brødtekst-links: den dybere kystblå læses bedre på sand (2,2 -> 3,6) */
    --theme-body-link: #237F95;
    --theme-body-link-hover: #0F5F65;
}

/* ========================================
   🎨 CALM COASTAL PRODUKTKORT (BLÅ VARIANTER)
   ======================================== */

/* 1/3 Light Coastal Blue */
.product-small.col:nth-child(3n+1) .col-inner,
.product-small.col:nth-child(3n+1) .product-small {
    background-color: #D8F3F5 !important;
    border: 1px solid #7CCDD5 !important;
    border-radius: 12px;
}

/* 1/3 Soft Sky Blue */
.product-small.col:nth-child(3n+2) .col-inner,
.product-small.col:nth-child(3n+2) .product-small {
    background-color: #E5F7FF !important;
    border: 1px solid #8AD4E8 !important;
    border-radius: 12px;
}

/* 1/3 Pale Aqua Blue */
.product-small.col:nth-child(3n) .col-inner,
.product-small.col:nth-child(3n) .product-small {
    background-color: #DDF8F2 !important;
    border: 1px solid #80D7CB !important;
    border-radius: 12px;
}

.product-small.col .col-inner,
.product-small.col .product-small {
    overflow: hidden !important;
    border-radius: 12px !important;
}

.product-small.col .box-image,
.product-small.col .box-image img {
    overflow: hidden !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.product-small.col .col-inner {
    overflow: hidden;
}

.product-small.col .box-text.box-text-products,
.product-small.col .product-small .box-text,
.product-small.box .box-text.box-text-products {
    background-color: transparent !important;
    color: var(--theme-text) !important;
}

ul.products li.product .box-text-products .woocommerce-loop-product__title,
ul.products li.product .box-text-products .price,
ul.products li.product .box-text-products .product-sku,
ul.products li.product .box-text-products a,
ul.products li.product .box-text-products p,
ul.products li.product .box-text-products span,
.product-small.box .box-text.box-text-products,
.product-small.box .box-text.box-text-products * {
    color: var(--theme-text) !important;
}

/* Sæson-dekorationer på produktkort holdes i baggrund/farver */

/* Calm Coastal strandbus på knappen (Peek-a-boo animation) */
.product-info .single_add_to_cart_button.button::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 150px;
    bottom: -28px;
    left: 82%;
    transform: translateX(-50%) translateY(20px) scale(0.8);
    /* Gemt bagved og lidt mindre */
    background-image: url('../../img/summer/summer-button-bus.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    /* Ligger BAG knappen */
    opacity: 0;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    /* Hurtigere animation */
    pointer-events: none;
}

.product-info .single_add_to_cart_button.button:hover::after {
    transform: translateX(-50%) translateY(-58px) scale(1);
    /* Popper op og vokser til fuld størrelse */
    opacity: 1;
}

/* Sørg for at formen ikke klipper strandbussen af og holder z-index samlet */
.product-info form.cart {
    overflow: visible !important;
    isolation: isolate;
    /* Holder z-index internt, så strandbussen er synlig */
}

/* Real sand texture layer, same logic as previous seasonal image backgrounds */
#content.content-area::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Fylder hele containeren */
    pointer-events: none;
    /* Klik gennem baggrunden */
    z-index: 0;

    background-image: url("../../img/summer/summer-sand-bg.png");
    background-repeat: repeat;
    background-size: var(--theme-sand-size);
    background-position: 0 0;
    mix-blend-mode: multiply;
    opacity: 0.82;
}

/* Calm Coastal footer ledge */
.footer-wrapper::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    width: 100%;
    height: 42px;
    background-image: url('../../img/summer/summer-footer-wave-transition.svg');
    background-repeat: repeat-x;
    background-size: 1200px 42px;
    background-position: bottom center;
    pointer-events: none;
    z-index: 2;
}

/* topbaren */
.header-top {
    padding-top: 58px;
}

/* Default (mobil og små skærme) — ingen ekstra padding */
.header-wrapper.stuck #masthead.header-main {
    padding-top: 68px;
}

/* Kun på skærme over 800px i bredde */
@media (max-width: 801px) {
    .header-wrapper.stuck #masthead.header-main {
        padding-top: 0px;
    }
}

/* Fast Calm Coastal sommerguirlande i toppen */
body::before {
    content: '';
    position: fixed;
    top: -8px;
    left: 0;
    width: 100%;
    height: 78px;

    /* VIGTIGT: ingen baggrundsfarve her! */
    background-color: transparent;

    background-image: url('../../img/summer/summer-top-garland.png');
    background-repeat: repeat-x;
    background-size: 430px auto;
    background-position: center -2px;

    pointer-events: none;
    z-index: 9999;
}

/* På mobil: skjul kun guirlanden og dens ekstra luft når headeren bliver sticky. */
@media (max-width: 849px) {
    body:has(.header-wrapper.stuck)::before {
        display: none !important;
    }

    body:has(.header-wrapper.stuck) .header-top {
        padding-top: 0 !important;
    }

    body:has(.header-wrapper.stuck) .header-wrapper.stuck #masthead.header-main {
        padding-top: 0 !important;
    }
}

/* ========================================
   🏖️ GLOBAL SAND PAGE CANVAS
   ======================================== */
body.woocommerce-page,
body.woocommerce-page #wrapper,
body.woocommerce-page #main,
body.woocommerce-page #content,
body.woocommerce-page .page-wrapper,
body.woocommerce-page .site-content,
body.woocommerce-page .shop-container,
body.single-product,
body.single-product #wrapper,
body.single-product #main,
body.single-product #content,
body.single-product .page-wrapper,
body.single-product .product-main,
body.single-product .product-footer,
body.woocommerce-account,
body.woocommerce-account #wrapper,
body.woocommerce-account #main,
body.woocommerce-account #content,
body.woocommerce-account .page-wrapper,
body.woocommerce-checkout,
body.woocommerce-checkout #wrapper,
body.woocommerce-checkout #main,
body.woocommerce-checkout #content,
body.woocommerce-checkout .page-wrapper,
body.woocommerce-cart,
body.woocommerce-cart #wrapper,
body.woocommerce-cart #main,
body.woocommerce-cart #content,
body.woocommerce-cart .page-wrapper {
    position: relative;
    background-color: var(--theme-bg-main) !important;
    background-image: none !important;
}

body.woocommerce-page #content::before,
body.single-product .product-main::before,
body.single-product .product-footer::before,
body.woocommerce-account .page-wrapper::before,
body.woocommerce-checkout .page-wrapper::before,
body.woocommerce-cart .page-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("../../img/summer/summer-sand-bg.png");
    background-repeat: repeat;
    background-size: var(--theme-sand-size);
    background-position: 0 0;
    mix-blend-mode: multiply;
    opacity: 0.82;
}

body.woocommerce-page #content>*,
body.single-product .product-main>*,
body.single-product .product-footer>*,
body.woocommerce-account .page-wrapper>*,
body.woocommerce-checkout .page-wrapper>*,
body.woocommerce-cart .page-wrapper>* {
    position: relative;
    z-index: 1;
}

body.woocommerce-checkout form.checkout,
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .page-checkout-simple,
body.woocommerce-checkout .page-checkout-simple .container,
body.woocommerce-account .row.vertical-tabs,
body.woocommerce-cart .cart-container,
body.woocommerce-cart .cart-wrapper,
body.single-product .product-container {
    background: transparent !important;
}

/* ========================================
   ☀️ OPTIONAL SUMMER BUTTON ICON
   Tilføj klassen "japebo-theme-button" (eller den gamle
   "japebo-summer-button") til en Flatsome-knap.
   ======================================== */
.japebo-theme-button,
.japebo-summer-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
}

.japebo-theme-button .ux-button-text,
.japebo-theme-button span,
.japebo-summer-button .ux-button-text,
.japebo-summer-button span {
    display: inline-flex;
    align-items: center;
}

.japebo-theme-button::after,
.japebo-summer-button::after {
    content: "";
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    flex: 0 0 1.3em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23FFC83D'%3E%3Ccircle cx='32' cy='32' r='13'/%3E%3Cpath d='M32 3l5 13H27zM32 61l-5-13h10zM61 32l-13 5V27zM3 32l13-5v10zM52.5 11.5l-5.6 12.7-7.1-7.1zM11.5 52.5l5.6-12.7 7.1 7.1zM52.5 52.5l-12.7-5.6 7.1-7.1zM11.5 11.5l12.7 5.6-7.1 7.1z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* ========================================
   📣 DYNAMISK BANNER - SOMMER-ACCENTER
   ======================================== */
:root {
    --theme-banner-bg: linear-gradient(160deg, #0F5F65 0%, #3CAFC8 100%);
    --theme-banner-text: #ffffff;
    --theme-banner-pattern: url("../../img/summer/summer-sand-bg.png");
    --theme-banner-pattern-size: 520px auto;
    --theme-banner-pattern-opacity: 0.12;
    --theme-banner-button-bg: #F2B84B;
    --theme-banner-button-bg-hover: #D99A26;
    --theme-banner-button-text: #243236;
}