/*
 * Alberte Hall · Art child-tema 2.0 · Butik
 * Flyttet fra Ekstra CSS (2026-09-22) + swatch-snippet.
 *
 * Designværdier (--ah-*) sættes automatisk fra haandskabt.shop → Design (inc/tokens.php).
 * Badges styles af haandskabt.shop. Denne fil ejer rammen: navigation, produktgrids,
 * produktkort i WooCommerce-lister, swatches og sticky bar.
 *
 * !important er bevaret, hvor Art-temaet ellers vinder. Nye regler bør skrives uden.
 */

/* ============================================================
   1. GENERELT LAYOUT
   ============================================================ */
.home .masonry-list.grid-list { display: none !important; }

.wp-block-button__link:hover { background-color: var(--ah-blue) !important; color: #fff !important; }

nav ul { display: flex; gap: 24px; list-style: none; padding-left: 0; margin-left: 0; }
nav ul li { margin: 0; padding-left: 0; list-style: none; }
@media (max-width: 768px) { nav ul { flex-direction: column; align-items: flex-start; gap: 16px; } }

.widget_product_categories ul,
.widget_product_categories li { list-style: none; margin-left: 0; padding-left: 0; }
.widget_product_categories ul ul li::before { content: "•"; color: var(--ah-muted); margin-right: 6px; font-size: .9em; display: inline-block; }
.widget_product_categories > ul > li > a { font-weight: 700; }
.widget_product_categories ul ul li a { font-weight: 400; }

/* ============================================================
   2. GENERELLE EFFEKTER
   ============================================================ */
@keyframes ahFadeInUp { from { opacity: 0; transform: translate3d(0,12px,0); } to { opacity: 1; transform: none; } }
.fade-in-on-load { opacity: 0; animation: ahFadeInUp .8s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .fade-in-on-load { opacity: 1; animation: none; } }

.sticky-header { position: fixed; top: 0; width: 100%; z-index: 999; transform: translateZ(0); }

/* 2.6.0 – haandskabt.shops header: Smart / Altid synlig / Scroller væk virker
   Art-temaet lægger sideindholdet (#wrap) som en løs blok (position:absolute) 140 px nede – under temaets egen header.
   Så er temaets ramme (.wrap-all) kun én skærm høj, og en sticky header holder kun fast inden for sin ramme: efter
   én skærmhøjde scrollede den væk – uanset indstilling. Med haandskabt.shops header (temaets er fjernet) ligger
   indholdet nu almindeligt i siden lige under headeren, og rammen er lige så lang som siden. */
body.hs-has-hdr #wrap { position: relative !important; top: auto !important; }
body.hs-has-hdr .wrap-all { position: relative; }
.parallax-header { min-height: 400px; background: center / cover no-repeat scroll; }
@media (min-width: 1025px) { .parallax-header { background-attachment: fixed; } }

/* ============================================================
   3. TEMAETS / ANDRE PLUGINS' STANDARD-BADGES
   haandskabt.shop → Badges erstatter dem.
   ============================================================ */
.out-of-stock-label, .sold-out, .badge-out-of-stock, .woocommerce-badge.out-of-stock,
.on-sale-badge, .single-product .woocommerce-badge, .single-product span.onsale,
.single-product .out-of-stock-label { display: none !important; }

/* ============================================================
   4. OVERSKRIFTER TIL VAREBÅND (WooCommerce + snippets)
   ============================================================ */
.related.products > h2, .up-sells.products > h2, section.related > h2,
.related-product-wrap .block-title, .related-product-wrap .title,
.ah-custom-grid-section h2 {
    font-family: var(--ah-body-font) !important;
    font-style: normal !important;
    font-size: clamp(20px, 2.2vw, 28px) !important;
    line-height: 1.25 !important;
    font-weight: 350 !important;
    font-synthesis: none;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    color: var(--ah-blue) !important;
    text-align: left !important;
    margin: 60px 0 30px !important;
    display: block !important;
}
.related.products > h2 *, .up-sells.products > h2 *, section.related > h2 *,
.related-product-wrap .block-title *, .related-product-wrap .title *, .ah-custom-grid-section h2 * {
    font: inherit !important; text-transform: inherit !important; letter-spacing: inherit !important;
}

/* ============================================================
   5. PRODUKTGRIDS  ([smart_grid], relaterede, upsells)
   ============================================================ */
.ah-category-grid,
body.single-product .related.products ul.products,
body.single-product .up-sells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--ah-product-gap) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
body.single-product .related.products ul.products::before, body.single-product .related.products ul.products::after,
body.single-product .up-sells.products ul.products::before, body.single-product .up-sells.products ul.products::after { display: none !important; }
body.single-product .related.products li.product, body.single-product .up-sells.products li.product {
    width: auto !important; max-width: none !important; float: none !important; clear: none !important;
    min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}

/* ============================================================
   6. PRODUKTKORT (samme look som haandskabt.shops varebånd)
   ============================================================ */
.ah-product-viewport { position: relative !important; width: 100% !important; aspect-ratio: 4 / 5 !important; overflow: hidden !important; background: var(--ah-card-bg) !important; contain: paint; }

.ah-product-slide img,
body.single-product .related.products li.product img,
body.single-product .up-sells.products li.product img {
    display: block !important; width: 100% !important; aspect-ratio: 4 / 5 !important;
    object-fit: cover !important; border-radius: var(--ah-product-radius) !important; background: var(--ah-card-bg) !important;
}
.ah-product-slide img { height: 100% !important; }
body.single-product .related.products li.product img, body.single-product .up-sells.products li.product img { height: auto !important; margin: 0 0 15px !important; }

.ah-product-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; min-width: 0; padding-top: 15px; }

.ah-product-name,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title, .wc-block-components-product-name,
.wc-block-product-template .wp-block-post-title, .wc-block-product-template .wp-block-post-title a,
.wp-block-woocommerce-product-collection .wp-block-post-title, .wp-block-woocommerce-product-collection .wp-block-post-title a {
    display: block !important; width: 100%; min-height: 0 !important; margin: 0 0 9px !important; padding: 0 !important;
    font-family: var(--ah-heading-font) !important; font-size: clamp(22px, 2vw, 28px) !important;
    font-style: italic !important; font-weight: 400 !important; font-synthesis: none; line-height: 1.24 !important;
    text-transform: none !important; letter-spacing: 0 !important; text-align: left !important; color: var(--ah-blue) !important;
    overflow-wrap: break-word; text-wrap: balance;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title *, .woocommerce-page ul.products li.product .woocommerce-loop-product__title *,
.wc-block-grid__product-title *, .wc-block-components-product-name *, .wc-block-product-template .wp-block-post-title *,
.wp-block-woocommerce-product-collection .wp-block-post-title *, .ah-product-name * {
    font-family: inherit !important; font-style: inherit !important; font-weight: inherit !important; line-height: inherit !important;
}

.single-product .product_title, .single-product h1.product_title {
    font-family: var(--ah-heading-font) !important; font-style: normal !important; font-weight: 400 !important;
}

.ah-product-price,
body.single-product .related.products li.product .price,
body.single-product .up-sells.products li.product .price {
    display: block !important; width: 100%; margin: 0 0 12px !important;
    font-family: var(--ah-body-font) !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 400 !important;
    text-align: left !important; color: var(--ah-blue) !important;
}
.ah-product-price del, body.single-product .related.products li.product .price del, body.single-product .up-sells.products li.product .price del { opacity: .45; font-weight: 400 !important; }
.ah-product-price ins, body.single-product .related.products li.product .price ins, body.single-product .up-sells.products li.product .price ins { text-decoration: none !important; font-weight: 600 !important; }
body.single-product .related.products li.product a, body.single-product .up-sells.products li.product a { text-decoration: none !important; }

a.ah-select-btn,
body.single-product .related.products li.product a.button,
body.single-product .up-sells.products li.product a.button {
    display: inline-flex !important; width: auto !important; max-width: 100% !important; min-height: 38px !important; height: 38px !important;
    align-items: center !important; justify-content: center !important; align-self: flex-start !important;
    margin: 0 !important; padding: 0 17px !important;
    background: transparent !important; color: var(--ah-blue) !important; border: 1px solid var(--ah-blue) !important; border-radius: 0 !important;
    font-family: var(--ah-body-font) !important; font-size: 9px !important; line-height: 1 !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .11em !important; text-decoration: none !important; box-sizing: border-box !important;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}
a.ah-select-btn:hover,
body.single-product .related.products li.product a.button:hover,
body.single-product .up-sells.products li.product a.button:hover { background: var(--ah-blue) !important; color: #fff !important; border-color: var(--ah-blue) !important; }
a.ah-select-btn.btn-sold-out, .btn-sold-out { opacity: .66 !important; background: transparent !important; color: var(--ah-blue) !important; border-color: var(--ah-blue) !important; }

/* 6b. NATURLIG TITELHØJDE (gendannet fra den gamle sektion 17)
   Titler på to linjer skubber pris og knap ned – de kan aldrig ligge oven i hinanden. */
.ah-product-info > * { position: static !important; float: none !important; clear: both !important; }
.ah-product-info .ah-product-name,
.ah-product-info .ah-product-name h3,
.ah-product-info a > .ah-product-name {
    height: auto !important; max-height: none !important; min-height: 0 !important;
    white-space: normal !important; overflow: visible !important;
    line-height: 1.24 !important; margin: 0 0 9px !important;
}
.ah-product-info > a { display: block !important; width: 100% !important; height: auto !important; text-decoration: none !important; color: inherit !important; }
.ah-product-info .ah-product-price { display: block !important; width: 100% !important; position: static !important; margin: 0 0 12px !important; line-height: 1.4 !important; }
@media (max-width: 600px) { .ah-product-info .ah-product-name { line-height: 1.28 !important; } }

/* Udsolgt: ikke-klikbar status i stedet for "Få besked" */
.ah-select-btn.btn-sold-out, span.ah-select-btn.btn-sold-out { cursor: default !important; pointer-events: none !important; opacity: .55 !important; }

/* ============================================================
   7. [smart_grid] · BILLEDSLIDER
   ============================================================ */
.ah-product-slider { min-width: 0; }
.ah-product-track { display: flex !important; flex-wrap: nowrap !important; transition: transform .6s cubic-bezier(.23,1,.32,1) !important; will-change: transform; }
.ah-product-slide { flex: 0 0 auto !important; }
.ah-product-dots { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 12px !important; z-index: 10 !important; display: flex !important; justify-content: center !important; gap: 8px !important; }
.ah-product-dot { width: 7px !important; height: 7px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.4) !important; cursor: pointer !important; transition: background-color .3s ease, transform .3s ease !important; }
.ah-product-dot[aria-current="true"] { background: #fff !important; transform: scale(1.3) !important; }

/* ============================================================
   8. BADGE-CONTAINER I SNIPPETS ([smart_grid], [fisk_slider], produkt-tragt)
   Badges tegnes nu af haandskabt.shop inde i containeren.
   ============================================================ */
.global-badge-container { position: absolute !important; inset: 0 !important; z-index: 20 !important; pointer-events: none; }

/* ============================================================
   9. MOBIL / TABLET · PRODUKTGRIDS
   ============================================================ */
@media (max-width: 1024px) {
    .ah-category-grid, body.single-product .related.products ul.products, body.single-product .up-sells.products ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 16px !important;
    }
}
@media (max-width: 600px) {
    .ah-category-grid, body.single-product .related.products ul.products, body.single-product .up-sells.products ul.products { gap: 22px 10px !important; }
    .ah-product-info { padding-top: 11px; }
    .ah-product-name, .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce-page ul.products li.product .woocommerce-loop-product__title,
    .wc-block-grid__product-title, .wc-block-components-product-name { font-size: 21px !important; line-height: 1.28 !important; }
    .ah-product-price, body.single-product .related.products li.product .price, body.single-product .up-sells.products li.product .price { font-size: 12px !important; margin-bottom: 10px !important; }
    a.ah-select-btn, body.single-product .related.products li.product a.button, body.single-product .up-sells.products li.product a.button {
        min-height: 35px !important; height: 35px !important; padding: 0 12px !important; font-size: 8px !important; letter-spacing: .09em !important;
    }
}

/* ============================================================
   10. MOBIL STICKY BAR (.ah-mobile-sticky-bar)
   ============================================================ */
@media (max-width: 900px) {
    .ah-mobile-sticky-bar { display: flex !important; position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9999 !important; flex-direction: column !important; gap: 6px !important; box-sizing: border-box !important; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)) !important; background: #fff !important; border-top: 2px solid var(--ah-blue) !important; box-shadow: 0 -5px 20px rgba(0,0,0,.08) !important; }
    .ah-sticky-info-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .ah-sticky-action-row { display: flex !important; justify-content: space-between !important; align-items: center !important; padding-top: 4px !important; border-top: 1px solid var(--ah-line) !important; }
    .ah-sticky-item { display: flex !important; flex-direction: column !important; }
    .ah-sticky-label { margin: 0 !important; font: 700 8px var(--ah-body-font) !important; text-transform: uppercase !important; letter-spacing: .1em !important; color: var(--ah-blue) !important; opacity: .6 !important; }
    .ah-sticky-val { margin-top: 1px !important; font: 600 12px var(--ah-body-font) !important; color: var(--ah-blue) !important; }
    .ah-sticky-price { font: italic 400 20px/1 var(--ah-heading-font) !important; color: var(--ah-blue) !important; }
    .ah-sticky-ex { margin-top: 2px !important; font: 8px var(--ah-body-font) !important; text-transform: uppercase !important; letter-spacing: .05em !important; color: var(--ah-blue) !important; opacity: .7 !important; }
    .ah-sticky-cta { padding: 10px 18px !important; background: var(--ah-blue) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; font: 700 10px var(--ah-body-font) !important; text-transform: uppercase !important; letter-spacing: .1em !important; cursor: pointer !important; }
}

/* ============================================================
   11. STICKY-ELEMENTER I WOOCOMMERCE-KOLONNEN
   ============================================================ */
.woocommerce div.product div.summary, .woocommerce div.product form.cart, .mkk-ultimate-wrapper { overflow: visible !important; }

/* ============================================================
   12. SÆRLIGE PRODUKTER 10019 · 10009 · 10453
   Overvej at give dem en haandskabt.shop-vareside "direkte på produktet" i stedet.
   ============================================================ */
.post-10019.product .woocommerce-product-gallery, .post-10009.product .woocommerce-product-gallery, .post-10453.product .woocommerce-product-gallery { display: none !important; }
.post-10019.product .summary.entry-summary, .post-10009.product .summary.entry-summary, .post-10453.product .summary.entry-summary { width: 100% !important; max-width: 100% !important; float: none !important; flex: 0 0 100% !important; }
.post-10019.product .summary.entry-summary :is(.product_title, .price, .stock),
.post-10009.product .summary.entry-summary :is(.product_title, .price, .stock),
.post-10453.product .summary.entry-summary :is(.product_title, .price, .stock) { display: none !important; }

/* ============================================================
   13. VARIANT-SWATCHES (flyttet fra snippet "Boutique variation swatches")
   ============================================================ */
.single-product :is(.variations td.label, .variations label, .woo-variation-swatches .variation-label, .variations_form .variable-item-title-wrapper, .variations_form .woo-variation-swatches-attribute-label, .thwcfe-swatch-label) { display: none !important; }
.single-product .variations tr td:first-child { display: none !important; }
.single-product .variable-items-wrapper { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; padding: 4px 0 16px !important; border: none !important; margin: 0 !important; }
.single-product .variable-items-wrapper .variable-item {
    background-color: #fff !important; border: 1px solid color-mix(in srgb, var(--ah-blue) 22%, transparent) !important; color: var(--ah-blue) !important;
    min-width: 80px !important; height: auto !important; min-height: 44px !important; padding: 8px 18px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 2px !important; box-shadow: none !important; cursor: pointer !important; transition: none !important;
    -webkit-tap-highlight-color: transparent !important; user-select: none !important;
}
.single-product .variable-items-wrapper .variable-item, .single-product .variable-items-wrapper .variable-item * {
    color: var(--ah-blue) !important; font-family: var(--ah-body-font) !important; font-size: 13.5px !important; font-weight: 500 !important;
    letter-spacing: .02em !important; line-height: 1 !important; text-decoration: none !important;
}
@media (hover: hover) and (pointer: fine) {
    .single-product .variable-items-wrapper .variable-item:hover:not(.disabled):not(.selected) { background-color: #F8F9FA !important; border-color: var(--ah-blue) !important; }
}
.single-product .variable-items-wrapper .variable-item.selected, .single-product .variable-items-wrapper .variable-item:active {
    background-color: color-mix(in srgb, var(--ah-blue) 8%, #fff) !important; border: 1.5px solid var(--ah-blue) !important; box-shadow: inset 0 0 0 .5px var(--ah-blue) !important;
}
.single-product .variable-items-wrapper .variable-item.selected *, .single-product .variable-items-wrapper .variable-item:active * { color: var(--ah-blue) !important; font-weight: 600 !important; }
.single-product .variable-item-span::before, .single-product .variable-item-span::after { display: none !important; content: none !important; }
.single-product .reset_variations {
    display: inline-block !important; font: 11px var(--ah-body-font) !important; text-transform: uppercase !important; letter-spacing: .08em !important;
    color: var(--ah-blue) !important; opacity: .65; margin-top: 8px; text-decoration: none !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ah-blue) 25%, transparent); padding-bottom: 1px;
}
@media (max-width: 768px) {
    .single-product .variable-items-wrapper { gap: 8px !important; }
    .single-product .variable-items-wrapper .variable-item { min-width: 72px !important; min-height: 42px !important; padding: 6px 14px !important; }
}

/* ============================================================
   14. KNAPPER · ALBERTE HALL
   To typer: primær (fyldt blå) og sekundær (kontur, fyldes ved hover).
   Skarpe hjørner, versaler, luftig spærring – samme stil som varesider og fly cart.
   ============================================================ */
:root { --ah-btn-h: 48px; --ah-btn-ease: cubic-bezier(.2,.7,.2,1); }

/* Primær */
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button, .woocommerce a.checkout-button, .woocommerce #place_order,
.woocommerce-page a.button.alt, .woocommerce-page button.button.alt,
.wc-block-components-button:not(.is-link):not(.wc-block-components-button--text),
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button,
.wp-block-button:not(.is-style-outline) .wp-block-button__link, .wp-element-button,
input.wpcf7-submit {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px;
    min-height: var(--ah-btn-h) !important; padding: 0 30px !important; box-sizing: border-box !important;
    background: var(--ah-blue) !important; color: #fff !important; border: 1px solid var(--ah-blue) !important; border-radius: 0 !important;
    font-family: var(--ah-body-font) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important;
    letter-spacing: .18em !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important;
    cursor: pointer; transition: background-color .3s var(--ah-btn-ease), color .3s var(--ah-btn-ease), border-color .3s var(--ah-btn-ease) !important;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover, .woocommerce a.checkout-button:hover, .woocommerce #place_order:hover,
.woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover,
.wc-block-components-button:not(.is-link):not(.wc-block-components-button--text):hover,
.wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .wp-element-button:hover, input.wpcf7-submit:hover {
    background: transparent !important; color: var(--ah-blue) !important; border-color: var(--ah-blue) !important;
}

/* Sekundær */
.woocommerce a.button:not(.alt):not(.ah-select-btn), .woocommerce button.button:not(.alt), .woocommerce input.button:not(.alt),
.woocommerce-page a.button:not(.alt):not(.ah-select-btn), .woocommerce-page button.button:not(.alt),
.wp-block-button.is-style-outline .wp-block-button__link {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-height: 42px !important; padding: 0 22px !important; box-sizing: border-box !important;
    background: transparent !important; color: var(--ah-blue) !important; border: 1px solid var(--ah-blue) !important; border-radius: 0 !important;
    font-family: var(--ah-body-font) !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1 !important;
    letter-spacing: .16em !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important;
    transition: background-color .3s var(--ah-btn-ease), color .3s var(--ah-btn-ease) !important;
}
.woocommerce a.button:not(.alt):not(.ah-select-btn):hover, .woocommerce button.button:not(.alt):hover, .woocommerce input.button:not(.alt):hover,
.woocommerce-page a.button:not(.alt):not(.ah-select-btn):hover, .woocommerce-page button.button:not(.alt):hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--ah-blue) !important; color: #fff !important; }

/* Deaktiveret */
.woocommerce .button:disabled, .woocommerce .button.disabled, .woocommerce .single_add_to_cart_button.disabled,
.wc-block-components-button:disabled { opacity: .4 !important; cursor: not-allowed !important; background: var(--ah-blue) !important; color: #fff !important; }

.woocommerce .button:focus-visible, .wc-block-components-button:focus-visible, .wp-element-button:focus-visible,
.ah-select-btn:focus-visible { outline: 1px solid var(--ah-blue) !important; outline-offset: 3px !important; }

/* Tekstlinks i butikken (fx "Fortryd", "Fjern", "Glemt adgangskode") */
.woocommerce a.remove { color: var(--ah-muted) !important; font-weight: 300 !important; }
.woocommerce a.remove:hover { background: transparent !important; color: var(--ah-blue) !important; }