/*
Theme Name: Hello Elementor Child theme of hello-elementor
Theme URI: 
Description: Child theme of hello-elementor theme for the Hello Elementor theme
Author: <a href="https://elementor.com/?utm_source=wp-themes&#038;utm_campaign=author-uri&#038;utm_medium=wp-dash">Elementor Team</a>
Author URI: 
Template: hello-elementor
Version: 3.4.4
*/

/* Generated by Orbisius Child Theme Creator (https://orbisius.com/products/wordpress-plugins/orbisius-child-theme-creator/) on Tue, 23 Sep 2025 07:09:19 +0000 */ 
/* The plugin now uses the recommended approach for loading the css files.*/



/* ======================
 * CUSTOM CSS
 * ======================*/
 

body{
	font-family: "Open Sans", "sans-serif";

}

.product-box {
  cursor: pointer; 
}

.product-box:hover .elementor-button {
  background-color: #9D1014 !important;
  color: #fff !important;
  border-color: #000 !important;

  transition: all 0.3s ease;
}

.product-box:hover .elementor-image img {
  filter: brightness(0.85);
  transition: all 0.3s ease;
}

/* ==================
 * PRODUKTLISTA
 * ===================*/
.lagerlista {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.8em;
    line-height: 1.4;
}

/* Header */
.lagerlista thead th {
    text-align: left;
    background: #f5f5f5;
    font-weight: 600;
    padding: 10px 12px;
    border-bottom: 2px solid #dcdcdc;
    white-space: nowrap;
}

/* Data cells */
.lagerlista td {
    padding: 8px 12px;
    border-bottom: 1px solid #e6e6e6;
    vertical-align: middle;
}

.lagerlista th {
    cursor: pointer;
    position: relative;
}



/* Hover effect */
.lagerlista tbody tr:hover td {
    background: #fafafa;
}

/* Thumbnail column width controlled by colgroup */
.lagerlista col.col-thumb {
    width: 70px;
    min-width: 70px;
}

.lagerlista .product-thumb {
    text-align: center;
}

.lagerlista .product-thumb img {
    width: 50px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 3px;
}

/* Product name column can flex */
.lagerlista col.col-title {
    width: auto;
}

/* Let long text wrap instead of forcing rows to stretch */
.lagerlista td, .lagerlista th {
    word-wrap: break-word;
    white-space: normal;
}

/* Optional: make numeric columns look aligned */
.lagerlista td:nth-child(n+3):not(.product-thumb) {
    text-align: left; /* Change to right if numeric formatting later */
}

/* Make headers look interactive */
.lagerlista.sortable thead th {
    cursor: pointer;
    position: relative;
    padding-right: 16px; /* make room for arrows */
}

/* Neutral arrows (always visible, subtle) */
.lagerlista.sortable thead th::after {
    content: "▾▴"; /* neutral indicator */
    font-size: 11px;
    color: #bbb;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: color 0.2s ease;
}

/* Hover: highlight arrow */
.lagerlista.sortable thead th:hover::after {
    color: #666;
}

/* Sorted ascending arrow */
.lagerlista.sortable thead th.sort-asc::after {
    content: "▲";
    color: #111;
    font-weight: 600;
}

/* Sorted descending arrow */
.lagerlista.sortable thead th.sort-desc::after {
    content: "▼";
    color: #111;
    font-weight: 600;
}
/* Remove sort caret from the thumbnail column */
.lagerlista.sortable thead th:first-child::after {
    content: "" !important;
}

/* NY */
/* === DESKTOP (unchanged) === */
.lagerlista {
    width: 100%;
    border-collapse: collapse;
}
.lagerlista th, .lagerlista td {
    padding: 8px 12px;
    border-bottom: 1px solid #e6e6e6;
}
.lagerlista th {
    background: #f5f5f5;
    text-align: left;
    font-weight: 600;
}


/* === MOBILE CARD VIEW === */
@media (max-width: 768px) {

    /* Convert table structure into block layout */
    .lagerlista,
    .lagerlista thead,
    .lagerlista tbody,
    .lagerlista tr,
    .lagerlista th {
        display: block;
        width: 100%;
    }

    /* Hide desktop header */
    .lagerlista thead {
        display: none !important;
    }

    /* Hide empty cells (ACF fields with no data) */
    .lagerlista td.is-empty {
        display: none !important;
    }

    /* Card layout for each product row */
    .lagerlista tr {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 12px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    /* Default cell layout (label + value) */
    .lagerlista td {
        display: flex;
        flex-basis: 100%;
        align-items: baseline;
        padding: 6px 0;
        border: none;
        border-bottom: 1px dotted #eee;
        word-break: break-word;
        text-align: left;
    }

    .lagerlista td:last-child {
        border-bottom: none;
    }

    /* Label (left column) */
    .lagerlista td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #333;
        flex-basis: 35%;
        padding-right: 8px;
        text-align: left;
    }

    /* Value (right column) */
    .lagerlista td {
        flex-basis: 65%;
        text-align: left;
    }


    /* ======================================
       SPECIAL HANDLING: IMAGE + TITLE ROW
       ====================================== */

    /* Remove label before thumbnail and title */
    .lagerlista td.product-thumb::before,
    .lagerlista td.title::before {
        display: none !important;
    }

    /* Image + title = inline horizontal row */
    .lagerlista td.product-thumb,
    .lagerlista td.title {
        display: inline-flex !important;
        vertical-align: middle;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Collapse empty image cell completely */
    .lagerlista td.product-thumb:empty,
    .lagerlista td.product-thumb .no-img {
        display: none !important;
    }

    /* Thumbnail style */
    .lagerlista td.product-thumb img {
        width: 70px;
        height: auto;
        border-radius: 4px;
        display: block;
        margin-right: 10px;
        margin-bottom: 8px;
    }

    /* Title styling */
    .lagerlista td.title a,
    .lagerlista td.title {
        font-weight: 600;
        font-size: 16px;
        line-height: 1.25;
        color: #000;
        text-decoration: none;
    }

    /* Add some spacing above full card */
    .lagerlista tr {
        padding-top: 14px;
    }


    /* ======================================
       SPECIAL CASE: ANTECKNING (full width)
       ====================================== */

    .lagerlista td[data-label="Anteckning"] {
        display: block !important;
        flex-basis: 100% !important;
        border-bottom: none !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        text-align: left !important;
        margin-top: 8px;
    }

    /* Remove label entirely */
    .lagerlista td[data-label="Anteckning"]::before {
        display: none !important;
    }

}



/* ==================
 * SLUT PRODUKTLISTA
 * ===================*/


/* ==================
 * PRODUKTSIDA
 * ===================*/

/* PRODUCT PAGE BASE LAYOUT */
.produkt-container {
    max-width: 750px;
    margin: 0 auto;
    padding: 20px;
    font-size: 0.95rem;
}

.produkt-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.produkt-header-image img {
    width: 140px;
    height: auto;
    border-radius: 6px;
}

.produkt-title {
    font-size: 1.8rem;
    margin: 0;
}

/* SPECS LIST */
.produkt-specs {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px 20px;
    border-radius: 10px;
}

.produkt-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px dotted #ddd;
}

.produkt-row:last-child {
    border-bottom: none;
}

.produkt-label {
    flex: 35%;
    font-weight: 600;
}

.produkt-value {
    flex: 65%;
}

/* ANTECKNING (full width) */
.produkt-row-note {
    padding: 12px 0;
}

.produkt-note {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ==================
 * SLUT PRODUKTSIDA
 * ===================*/