/*
Theme Name:     Tigernu Dark
Theme URI:      n/a
Template:       kadence
Author:         Silicon Alley AS
Author URI:     n/a
Description:    Aegis Industrial dark theme for tigernu.no WooCommerce store. Kadence child theme with dark backgrounds, gold accents, and custom WooCommerce styling.
Version:        1.1
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --ghost-border: rgba(255, 255, 255, 0.08);
    --ghost-border-hover: rgba(212, 175, 55, 0.4);
    --tigernu-cat-card-bg: var(--global-palette7, #1E1E1E);
    --tigernu-cat-card-img-bg: var(--global-palette8, #1C1B1B);
}

/* ============================================================
   PRODUCT-COLLECTION BLOCK — produktgrid på kategori-pages
   Replikerer .woocommerce ul.products li.product fra snippet 19
   for den nye product-collection-blokk-strukturen.
   ============================================================ */

/* Produkt-kort wrapper */
.wp-block-woocommerce-product-template > li.wc-block-product,
.wp-block-woocommerce-product-template > li.product {
    background: var(--tigernu-cat-card-bg) !important;
    border: 1px solid var(--ghost-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    list-style: none;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
}
/* Drop-shadow på hover — kortet "løftes ut fra siden" via skygge,
   ingen translateY. Forsterket shadow + mer grid-gap så effekten
   er synlig også mellom rader, ikke bare på nederste rad. */
.wp-block-woocommerce-product-template > li.wc-block-product:hover,
.wp-block-woocommerce-product-template > li.product:hover {
    border-color: var(--ghost-border-hover);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55),
                0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Grid-gap — mer luft mellom kort så drop-shadow får plass mellom rader.
   Frontend bruker display:grid (ikke flex). WC's auto-fill med
   minmax(max(150px, calc(33% - .83em)),1fr) breaker når gap endres,
   så vi overstyrer med eksplisitt repeat() per breakpoint. */
.wc-block-product-template.wc-block-product-template__responsive {
    grid-gap: 1.75em !important;
    gap: 1.75em !important;
}
@media (min-width: 1024px) {
    .wc-block-product-template.wc-block-product-template__responsive.columns-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 1023px) and (min-width: 600px) {
    .wc-block-product-template.wc-block-product-template__responsive.columns-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 599px) {
    .wc-block-product-template.wc-block-product-template__responsive.columns-3 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Produkt-bilde-wrapper — letterbox-effekt: hele produktet på mørk bg */
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-woocommerce-product-image,
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-woocommerce-product-image a,
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-image {
    background: var(--tigernu-cat-card-img-bg) !important;
    border-bottom: 1px solid var(--ghost-border);
    margin: 0 !important;
    display: block;
}
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-woocommerce-product-image img,
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-image img {
    background: var(--tigernu-cat-card-img-bg) !important;
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1;
}

/* Produkt-detaljer (title + pris under bildet) — pad innholdet */
.wp-block-woocommerce-product-template li.wc-block-product > .wp-block-post-title,
.wp-block-woocommerce-product-template li.wc-block-product > .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-template li.wc-block-product > .wp-block-spacer {
    padding-left: 16px;
    padding-right: 16px;
}

/* Tittel */
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-post-title,
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-post-title a {
    color: var(--global-palette3) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
/* Hover på hele kortet (også bilde) → tittel får gullfarge */
.wp-block-woocommerce-product-template li.wc-block-product:hover .wp-block-post-title,
.wp-block-woocommerce-product-template li.wc-block-product:hover .wp-block-post-title a,
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-post-title a:hover {
    color: var(--global-palette1) !important;
}

/* Samme regel for legacy [products]-shortcode/arkiv på forsiden */
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__link {
    color: var(--global-palette1) !important;
    transition: color 0.2s ease;
}

/* ============================================================
   OVERRIDE Kadence Shop Kit "action-on-hover" på [products]-shortcode
   Theme_mod product_archive_style er satt til "normal", men Shop Kit
   bevarer .woo-archive-action-on-hover-klassen på shortcode-output.
   Vi overstyrer her: drop slide-up-animasjonen, skjul hover-knappen.
   ============================================================ */
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-details,
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .product-details {
    transform: none !important;
    -webkit-transform: none !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    position: static !important;
    bottom: auto !important;
}
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-actions,
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-loop-image-wrap .button,
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .product-action-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .product-actions,
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .button.add_to_cart_button,
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .added_to_cart,
.woocommerce ul.products li.product .product-action-wrap,
.woocommerce ul.products li.product:hover .product-action-wrap {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
/* Cancel any height shift/slide animation Shop Kit applies on image-wrap hover */
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-loop-image-wrap,
.woocommerce ul.products.woo-archive-action-on-hover li.product:hover .product-loop-image-wrap {
    transform: none !important;
}

/* Pris */
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-woocommerce-product-price {
    color: var(--global-palette3) !important;
    font-size: 14px !important;
    font-weight: 700;
    margin: 0 0 14px 0 !important;
}
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-woocommerce-product-price del {
    color: var(--global-palette6) !important;
    opacity: 0.7;
}
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-woocommerce-product-price ins {
    color: var(--global-palette1) !important;
    text-decoration: none;
    font-weight: 700;
}

/* Sale badge */
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-woocommerce-product-sale-badge {
    background: #E74C3C !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-transform: uppercase;
    line-height: 1.4 !important;
    top: 12px !important;
    right: 12px !important;
    position: absolute;
}

/* Pagination — sentrert med gull-aktive */
.wp-block-woocommerce-product-collection .wp-block-query-pagination {
    margin-top: 32px;
    gap: 8px;
}
.wp-block-woocommerce-product-collection .wp-block-query-pagination a,
.wp-block-woocommerce-product-collection .wp-block-query-pagination span {
    color: var(--global-palette4) !important;
    background: var(--global-palette8) !important;
    border: 1px solid var(--ghost-border) !important;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
}
.wp-block-woocommerce-product-collection .wp-block-query-pagination a:hover {
    border-color: var(--ghost-border-hover) !important;
    color: var(--global-palette1) !important;
}
.wp-block-woocommerce-product-collection .wp-block-query-pagination .current,
.wp-block-woocommerce-product-collection .wp-block-query-pagination [aria-current="page"] {
    background: var(--global-palette1) !important;
    color: #000 !important;
    border-color: var(--global-palette1) !important;
}

/* ============================================================
   PRODUCT-FILTERS BLOCK — overstyrer light-theme inline-style
   ============================================================ */

/* Filter-wrapper bakgrunn (overstyrer --wc-product-filters-background-color:#fff) */
.tigernu-cat-filter-col .wp-block-woocommerce-product-filters {
    --wc-product-filters-text-color: var(--global-palette4) !important;
    --wc-product-filters-background-color: transparent !important;
    background: transparent !important;
    color: var(--global-palette4) !important;
    padding: 0;
}

/* Filter-kolonne styling — diskret card-look */
.tigernu-cat-filter-col {
    background: var(--global-palette8);
    border: 1px solid var(--ghost-border);
    border-radius: 12px;
    padding: 20px !important;
}

/* Filter price min/max-input — match gold-tema fra snippet 19 */
.tigernu-cat-filter-col .wp-block-woocommerce-product-filter-price input[type="text"] {
    background: var(--global-palette7) !important;
    color: var(--global-palette4) !important;
    border: 1px solid var(--ghost-border) !important;
    border-radius: 4px;
    padding: 6px 8px;
}

/* ============================================================
   SKJUL Kadence's product-archive-hero-section globalt
   (theme_mod product_archive_title=false påvirker ikke section-rendring,
   så vi hider via CSS. Vår page-content hero er standard på alle sider.)
   ============================================================ */
.entry-hero.product-archive-hero-section {
    display: none !important;
}

/* ============================================================
   SKJUL WC default shop-loop + sortering/grid-toggle på /butikk/
   Page #958 styrer rendering via product-collection inni page-content.
   Default ul.products.product-archive + woocommerce-result-count
   + sortering-dropdown + grid-toggle ville rendret duplikater.
   ============================================================ */
/* :not(.search) lagt til 2026-06-07: søkeresultatsiden får også
   body.woocommerce-shop, men der SKAL den native loopen vises
   (side #958 styrer kun selve butikk-/kategorisidene). */
body.woocommerce-shop:not(.search) ul.products,
body.woocommerce-shop:not(.search) ul.products.product-archive,
body.woocommerce-shop:not(.search) ul.products.woo-archive-loop,
body.woocommerce-shop:not(.search) .woocommerce-result-count,
body.woocommerce-shop:not(.search) .woocommerce-ordering,
body.woocommerce-shop:not(.search) .woocommerce-pagination,
body.woocommerce-shop:not(.search) .gridlist-toggle,
body.woocommerce-shop:not(.search) nav.woocommerce-pagination,
body.woocommerce-shop aside#secondary.primary-sidebar {
    display: none !important;
}
/* Når sidebar er skjult, ekspander main til full bredde og fjern grid-reservasjon */
body.woocommerce-shop.has-sidebar #wrapper,
body.woocommerce-shop.has-sidebar.has-left-sidebar #wrapper,
body.woocommerce-shop.has-sidebar .content-wrap,
body.woocommerce-shop.has-sidebar #content {
    grid-template-columns: 1fr !important;
    display: block !important;
}
body.woocommerce-shop.has-sidebar #primary,
body.woocommerce-shop.has-sidebar main.site-main,
body.woocommerce-shop.has-sidebar main#inner-wrap,
body.woocommerce-shop.has-sidebar #main {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Eksplisitt UNDO for vår product-collection-template (rendres ikke som ul.products) */
body.woocommerce-shop ul.wp-block-woocommerce-product-template {
    display: grid !important;
}

/* ============================================================
   BUTIKK-SIDE — fallback grid 25/75 hvis Kadence's CSS-generator
   ikke kjører blokkstyle på shop-archive-rendering.
   ============================================================ */
body.woocommerce-shop .wp-block-woocommerce-product-collection > .wp-block-kadence-rowlayout > .kt-row-column-wrap {
    display: grid !important;
    grid-template-columns: 1fr 3fr !important;
    gap: 1.75em;
}
@media (max-width: 1023px) {
    body.woocommerce-shop .wp-block-woocommerce-product-collection > .wp-block-kadence-rowlayout > .kt-row-column-wrap {
        grid-template-columns: 1fr !important;
    }
}

/* Butikk-kategorikort — eksplisitt styling siden Kadence's dyn CSS
   hopper over blokk-styles på shop-archive-rendering. Speiler forsidens. */
.tigernu-shop-cat-card {
    background: var(--global-palette7) !important;
    border-radius: 12px !important;
    border: 1px solid var(--ghost-border) !important;
    padding: 0 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.tigernu-shop-cat-card > .kt-inside-inner-col {
    padding: 24px 16px !important;
    cursor: pointer;
}
.tigernu-shop-cat-card:hover {
    border-color: var(--global-palette1) !important;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.15);
}
/* Sirkulær ikon-medaljon */
.tigernu-shop-cat-card .kadence-info-box-icon-container {
    background: #252525;
    border-radius: 50%;
    padding: 14px;
    margin: 0 auto 16px;
    display: inline-block;
}
.tigernu-shop-cat-card .kt-info-svg-icon {
    color: var(--global-palette1) !important;
}
.tigernu-shop-cat-card .kt-blocks-info-box-title {
    color: var(--global-palette3);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}
.tigernu-shop-cat-card .kt-blocks-info-box-text {
    color: var(--global-palette5);
    font-size: 12px;
}

/* ============================================================
   STICKY FALLBACK på Butikk — eksplisitt sticky for filter-col
   siden Kadence's dyn CSS ikke applies på shop-archive-rendering
   ============================================================ */
@media (min-width: 1025px) {
    body.woocommerce-shop .tigernu-cat-filter-col {
        position: sticky !important;
        top: 100px !important;
        align-self: start !important;
    }
}

/* ============================================================
   BUTIKK-SIDE — kategorikort på shop-arkiv
   4 kategori-infobox-kort. Tittel kan være lang (Reise & Håndbagasje,
   Vesker & Tilbehør) — sikrer ordbryting og lesbar font.
   ============================================================ */
.kb-info-box958e_a1b2c3-11 .kt-blocks-info-box-title,
.kb-info-box958e_a1b2c3-13 .kt-blocks-info-box-title,
.kb-info-box958e_a1b2c3-15 .kt-blocks-info-box-title,
.kb-info-box958e_a1b2c3-17 .kt-blocks-info-box-title {
    font-size: 16px !important;
    line-height: 1.25;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    text-align: center;
    margin-top: 0;
    margin-bottom: 8px;
}
.kb-info-box958e_a1b2c3-11 .kt-blocks-info-box-text,
.kb-info-box958e_a1b2c3-13 .kt-blocks-info-box-text,
.kb-info-box958e_a1b2c3-15 .kt-blocks-info-box-text,
.kb-info-box958e_a1b2c3-17 .kt-blocks-info-box-text {
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
}
.kb-info-box958e_a1b2c3-11 .kt-blocks-info-box-link-wrap,
.kb-info-box958e_a1b2c3-13 .kt-blocks-info-box-link-wrap,
.kb-info-box958e_a1b2c3-15 .kt-blocks-info-box-link-wrap,
.kb-info-box958e_a1b2c3-17 .kt-blocks-info-box-link-wrap {
    padding: 24px 16px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ============================================================
   STICKY SIDEBAR for filter-kolonne — pure CSS
   Mekanisme: position:sticky med align-self:start. Filter-elementet
   er bare så høyt som content krever, MEN sticky-context er parent
   kadence/rowlayout som strekkes til grid-høyde av grid-row.
   Når man scroller forbi parent's bunn (= grid-bunn), slutter
   sticky å feste — filter forsvinner over toppen samtidig som
   produkt-griden ender. Ingen JS-klipping av content.
   ============================================================ */
@media (min-width: 1025px) {
    .tigernu-cat-filter-col {
        position: sticky;
        top: 100px;
        align-self: start;
    }
}
