/*
 Theme Name:   Storefront Child
 Theme URI:    https://plakaten.com/
 Description:  Child theme for Storefront
 Author:       Din Navn
 Template:     storefront
 Version:      1.0.0
*/




/* --- 1. HEADER & SØGEFELT --- */
@media (min-width: 768px) {
    .site-header .col-full { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; }
    .site-branding { flex: 0 0 250px !important; order: 1; }
    .header-search-container { flex: 1 !important; max-width: 100% !important; order: 2; margin: 0 auto !important; }
    .main-navigation { flex: 1 0 70% !important; order: 3; }
    .site-header-cart { flex: 0 0 auto !important; order: 4; }
}

/* --- 2. MOBIL LAYOUT (RETTET) --- */
@media (max-width: 767px) {
    .site-header .col-full { display: flex !important; flex-direction: column !important; }
    .site-branding, .header-search-container, .main-navigation { width: 100% !important; text-align: center !important; }
    .header-search-container { order: 2 !important; margin: 10px 0 !important; }
} /* Denne lukker mobil-sektionen korrekt */

/* --- 3. FORSIDE JUSTERING --- */
.home .entry-header, .home .woocommerce-breadcrumb { display: none !important; }
#masthead { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.home .site-content { padding-top: 0 !important; }


/* --- 4. UNIVERSAL PRODUKT GRID (Gammel + Ny struktur) --- */

/* Denne sektion dækker nu ALT på din forside */
.wc-block-product .wp-block-post-title a {
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 16px !important;
}

/* --- 5. TITLER (FONT, FARVE & KOMPAKT LAYOUT) --- */

/* Fjern blå farve og understregning på ALLE produktlinks */
.wc-block-grid__product-title,
.wc-block-product__title,
.wp-block-post-title a,
.woocommerce-loop-product__title a {
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 15px !important; /* Lidt mindre font for et lettere udtryk */
    font-weight: 600 !important;
    line-height: 1.2 !important; /* Strammere linjeafstand */
}

/* Stram op på "spacet" omkring overskrifterne */
.wp-block-post-title,
.wc-block-grid__product-title {
    margin-top: 5px !important;   /* Mindre luft over titlen */
    margin-bottom: 5px !important; /* Mindre luft under titlen */
    min-height: 50px !important;  /* Lavere minimumshøjde for et tættere look */
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fjern ekstra luft i selve blok-containeren */
.wc-block-grid__product,
.wc-block-product {
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* Gør prisen mere kompakt */
.wc-block-grid__product-price,
.wp-block-woocommerce-product-price {
    font-size: 0.9em !important;
    margin-bottom: 8px !important;
    color: #666666 !important;
}

/* --- 6. BILLEDER (Faste rammer) --- */
.woocommerce ul.products li.product a img,
.wc-block-components-product-image img {
    height: 280px !important;
    object-fit: contain !important; /* Vigtigt: Bevarer plakatens proportioner */
    margin-bottom: 15px !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- 7. PRIS OG KNAPPER (Bund-justering) --- */
.price, 
.wp-block-woocommerce-product-price {
    margin-top: auto !important;     /* Skubber prisen ned */
    margin-bottom: 10px !important;
    text-align: center !important;
    display: block !important;
}

.button, 
.wp-block-woocommerce-product-button,
.wp-block-woocommerce-product-button button {
    width: 100% !important;
    text-align: center !important;
    margin-top: 5px !important;
}

/* Specifikt for 6-kolonne layout på desktop */
@media (min-width: 768px) {
    .woocommerce ul.products li.product {
        width: 14.5% !important;
        margin-right: 2.1% !important;
    }
    .woocommerce ul.products li.product:nth-child(6n) {
        margin-right: 0 !important;
    }
}
/* Match Mega Menu med dine produkt-titler */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333333 !important; /* Samme mørkegrå som dine titler */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Fjern blå farve på links inde i selve menu-panelet */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column > ul > li > a {
    color: #444444 !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column > ul > li > a:hover {
    color: #000000 !important;
}




/* --- MEGA MENU OPSTRAMNING --- */

/* Gør menubjælken hvid/gennemsigtig i stedet for sort */
#mega-menu-wrap-primary #mega-menu-primary {
    background: transparent !important;
}

/* Ret hovedpunkterne (Fysisk butik, Kategorier osv.) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    color: #333333 !important; /* Mørkegrå som titlerne */
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 14px !important;
    background: transparent !important;
}

/* Skjul beskrivelser i menuen helt */
span.mega-description {
    display: none !important;
}

/* Gør selve drop-down panelet hvidt med en let skygge */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu {
    background: #ffffff !important;
    border-top: 2px solid #333333 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Ret links inde i drop-down menuen */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column > ul > li > a {
    color: #444444 !important;
    font-size: 13px !important;
    padding: 5px 10px !important;
}

/* Farve ved hover (når musen er over et link) */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-column > ul > li > a:hover {
    color: #000000 !important;
    background: #f5f5f5 !important;
}

#mega-menu-wrap-primary {
    background-color: #f3f3f3;
}


/* FJERN ALT BESKRIVELSE OG EKSTRA TEKST I MENUER */
.mega-menu-description, 
.mega-description, 
#mega-menu-wrap-primary #mega-menu-primary .mega-description,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > a.mega-menu-link > span.mega-description {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}
.mega-menu-description{
    display: none; 
}