/**
* Theme Name: Naturally Child
* Description: This is a child theme of Naturally, generated by Merlin WP.
* Author: <a href="http://ninetheme.com/about">Ninetheme</a>
* Template: naturally
* Version: 1.4.9
*/


/* =============================================================================
   Navigation — Header Menu
   ============================================================================= */

/* "Mere" and any other dropdown-only parent items use href="#".
   Remove pointer cursor and prevent accidental page-top scroll on click. */
.nt-menu a[href="#"],
.main-nav a[href="#"],
nav a[href="#"] {
    cursor: default;
}

/* Prevent href="#" from jumping to top of page on mobile tap.
   The theme's own JS handles accordion open/close for these items. */
nav a[href="#"]:focus {
    outline: none;
}


/* =============================================================================
   Plant Knowledge Pages — /plant/[slug]/
   ============================================================================= */

.ethnoplanet-plant-page {
    padding: 60px 0 80px;
    background: #fff;
}

.plant-page-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Header */
.plant-title {
    font-size: 2.1rem;
    line-height: 1.25;
    margin-bottom: 0.2rem;
    color: #1a1a1a;
}

.plant-latin-name {
    color: #6b7a5e;
    font-size: 1.05rem;
    margin-top: 0;
    margin-bottom: 2rem;
    letter-spacing: 0.01em;
}

/* Product CTA box */
.plant-product-cta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: #f5f2ec;
    border-left: 4px solid #5a7a45;
    padding: 1.1rem 1.4rem;
    margin-bottom: 2.5rem;
    border-radius: 0 3px 3px 0;
}

.plant-buy-btn {
    display: inline-block;
    background: #5a7a45;
    color: #fff;
    padding: 0.6rem 1.35rem;
    border-radius: 3px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.18s ease;
}

.plant-buy-btn:hover,
.plant-buy-btn:focus {
    background: #456035;
    color: #fff;
    text-decoration: none;
}

.plant-cat-link {
    color: #5a7a45;
    font-size: 0.88rem;
    text-decoration: underline;
}

.plant-cat-link:hover {
    color: #456035;
}

/* Article body */
.plant-content h2 {
    font-size: 1.25rem;
    margin-top: 2.2rem;
    margin-bottom: 0.55rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e5e1db;
    color: #2a2a2a;
}

.plant-content p {
    line-height: 1.75;
    color: #3a3a3a;
    margin-bottom: 1rem;
}

.plant-taxonomy {
    background: #f9f7f4;
    border: 1px solid #e5e1db;
    padding: 0.6rem 1rem;
    border-radius: 3px;
    font-size: 0.88rem;
    color: #555;
    font-family: Georgia, serif;
    line-height: 1.7;
}

/* Related plants */
.plant-related {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e5e1db;
}

.plant-related-heading {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #2a2a2a;
    border: none;
    padding: 0;
}

.plant-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.plant-related-list li {
    background: #f5f2ec;
    border: 1px solid #ddd9d0;
    border-radius: 3px;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
}

.plant-related-list a {
    color: #5a7a45;
    text-decoration: none;
    font-weight: 600;
}

.plant-related-list a:hover {
    text-decoration: underline;
}

.plant-related-latin {
    color: #888;
    font-size: 0.82rem;
    font-style: italic;
    margin-left: 0.2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .plant-title {
        font-size: 1.65rem;
    }

    .plant-product-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }

    .plant-page-inner {
        padding: 0 16px;
    }
}


/* =============================================================================
   Product Pages — Trust Block
   .ethno-trust-block appears at the top of WooCommerce product long descriptions.
   ============================================================================= */

.ethno-trust-block {
    background: #f5f2ec;
    border-left: 4px solid #5a7a45;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    border-radius: 0 3px 3px 0;
}

.ethno-trust-block p {
    margin: 0 0 0.5rem;
    color: #2a2a2a;
    font-size: 0.92rem;
}

.ethno-trust-block ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ethno-trust-block li {
    font-size: 0.88rem;
    color: #3a3a3a;
    line-height: 1.7;
    padding: 0;
}


/* =============================================================================
   Product Pages — Review Request Block
   .ethno-review-request is appended to the product description tab.
   ============================================================================= */

.ethno-review-request {
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    background: #f9f7f4;
    border: 1px solid #e5e1db;
    border-radius: 3px;
}

.ethno-review-request h2 {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 0.6rem;
    color: #2a2a2a;
    border-bottom: none;
    padding-bottom: 0;
}

.ethno-review-request p {
    font-size: 0.92rem;
    color: #4a4a4a;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.ethno-review-request p:last-child {
    margin-bottom: 0;
}

.ethno-review-request a {
    color: #5a7a45;
    font-weight: 600;
    text-decoration: underline;
}

.ethno-review-request a:hover {
    color: #456035;
}


/* =============================================================================
   Product Pages — Short Description Trust Badges
   .ethno-product-trust appears after the product excerpt, above the
   variation selector. Visible on all screen sizes; compact on mobile.
   ============================================================================= */

.ethno-product-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.ethno-product-trust li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: #4a4a4a;
    line-height: 1.4;
}

.ethno-product-trust li::before {
    content: '✓';
    color: #5a7a45;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}


/* =============================================================================
   Product Category — Hide Quick View button on mobile
   YITH Quick View is not usable on touch devices and clutters the tap area
   on product cards alongside the add-to-cart and wishlist buttons.
   ============================================================================= */

@media (max-width: 768px) {
    .yith-wcqv-button {
        display: none !important;
    }
}


/* =============================================================================
   Logo — Responsive sizing
   The header logo and footer logo are full-resolution images. Constrain them
   to sensible sizes across breakpoints without touching Elementor data.
   ============================================================================= */

/* Header logo */
#nt-logo img,
.header_logo img,
.static-logo img,
.sticky-logo img {
    max-height: 60px;
    width: auto;
    height: auto;
}

@media (max-width: 768px) {
    #nt-logo img,
    .header_logo img,
    .static-logo img,
    .sticky-logo img {
        max-height: 44px;
    }
}

/* =============================================================================
   Footer — Professional layout renovation v2
   Footer template ID 3885.

   Key issues solved:
   - Smush .lazyloading rule: width: var(--smush-placeholder-width) !important
     We override the CSS variable AND clamp the widget container so the logo
     cannot exceed 90px at any phase of lazy-loading.
   - 3-column desktop layout: better proportions, no cramping at medium widths.
   - Nav column: left-aligned, visible on all screen sizes.
   - Mobile: single-column stack with compact horizontal nav pill row.
   ============================================================================= */

/* ─── Logo ──────────────────────────────────────────────────────────────────
   Clip the widget wrapper to 90px. This constrains both the placeholder SVG
   and the final loaded image without fighting Smush's !important width rule
   (which only applies during .lazyloading). Once loaded (.lazyloaded),
   max-width on the img takes over cleanly.                                   */
.elementor-3885 .elementor-element-176f849 .elementor-widget-container {
    max-width: 90px;
    overflow: hidden;
}

.elementor-3885 .elementor-element-176f849 img,
.elementor-3885 .elementor-element-176f849 img.lazyload,
.elementor-3885 .elementor-element-176f849 img.lazyloading,
.elementor-3885 .elementor-element-176f849 img.lazyloaded {
    /* Override the CSS custom property Smush reads for placeholder width.
       A lower-specificity inline value loses to this external rule. */
    --smush-placeholder-width: 90px;
    max-width: 90px !important;
    width: 90px !important;
    height: auto !important;
    display: block;
}

/* ─── Desktop column proportions ──────────────────────────────────────────
   Elementor uses equal 33% columns. Give the contact column (col 1) more
   room and narrow the nav column so the layout breathes on wide screens.    */
@media (min-width: 1025px) {
    .elementor-3885 .elementor-element-7cabc8d7 {
        width: 38% !important;
    }
    .elementor-3885 .elementor-element-7dee467a {
        width: 22% !important;
    }
    .elementor-3885 .elementor-element-3d0873bd {
        width: 40% !important;
    }
}

/* ─── Navigation column ────────────────────────────────────────────────────
   Force visible (Elementor hides it on tablet/phone).
   Override the text-right widget class set in the Elementor editor.         */
.elementor-3885 .elementor-element-7dee467a {
    display: block !important;
}

.elementor-3885 .elementor-element-7dee467a,
.elementor-3885 .elementor-element-7dee467a .elementor-widget-container,
.elementor-3885 .elementor-element-7dee467a .elementor-element-33742517 {
    text-align: left !important;
}

.elementor-3885 .elementor-element-7dee467a .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.elementor-3885 .elementor-element-7dee467a .menu-item a {
    font-size: 0.875rem;
    color: #5a5a5a;
    text-decoration: none;
    display: block;
    padding: 0.3rem 0;
    line-height: 1.6;
    transition: color 0.15s ease;
}

.elementor-3885 .elementor-element-7dee467a .menu-item a:hover {
    color: #5a7a45;
}

/* ─── Tablet 768–1024px ────────────────────────────────────────────────────
   Elementor already stacks all columns to 100% at this range.
   Nav links: horizontal pill row — compact and readable.                    */
@media (max-width: 1024px) {
    .elementor-3885 .elementor-element-7dee467a {
        width: 100% !important;
        margin-top: 2rem !important;
    }

    .elementor-3885 .elementor-element-7dee467a .menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.3rem 1.75rem;
    }
}

/* ─── Mobile <768px ────────────────────────────────────────────────────────  */
@media (max-width: 767px) {
    .elementor-3885 .elementor-element-7dee467a {
        margin-top: 1.5rem !important;
    }

    .elementor-3885 .elementor-element-7dee467a .menu {
        gap: 0.25rem 1.25rem;
    }

    .elementor-3885 .elementor-element-7dee467a .menu-item a {
        font-size: 0.82rem;
        padding: 0.2rem 0;
    }
}

/* ─── Copyright bar ────────────────────────────────────────────────────────  */
.elementor-3885 .elementor-element-3d2fd877,
.elementor-3885 .elementor-element-3d2fd877 p {
    font-size: 0.8rem;
    color: #888;
    text-align: center;
}


/* =============================================================================
   Product Pages — Plant knowledge page link
   Appears below the product tabs. Links the commercial product page to the
   corresponding informational /plant/[slug]/ guide page.
   ============================================================================= */

.ethno-plant-knowledge-link {
    max-width: 820px;
    margin: 2rem auto 0;
    padding: 0.9rem 1.25rem;
    background: #f5f2ec;
    border-left: 4px solid #5a7a45;
    border-radius: 0 3px 3px 0;
    font-size: 0.9rem;
}

.ethno-plant-knowledge-link a {
    color: #5a7a45;
    font-weight: 600;
    text-decoration: none;
}

.ethno-plant-knowledge-link a:hover {
    text-decoration: underline;
    color: #456035;
}


/* =============================================================================
   Blog Posts — Related products box
   Appended at the bottom of single blog posts when _related_product_ids
   post meta is set. Links informational content to the relevant product pages.
   ============================================================================= */

.ethno-related-products-box {
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    background: #f5f2ec;
    border-left: 4px solid #5a7a45;
    border-radius: 0 3px 3px 0;
}

.ethno-related-products-box h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #2a2a2a;
    margin: 0 0 0.75rem;
}

.ethno-related-products-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}

.ethno-related-products-box li a {
    color: #5a7a45;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.ethno-related-products-box li a:hover {
    text-decoration: underline;
}


/* =============================================================================
   Plant Library page — /planteleksikon/
   ============================================================================= */

.plant-library-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    columns: 2;
    column-gap: 2rem;
}

.plant-library-list li {
    break-inside: avoid;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f0ece5;
    font-size: 0.95rem;
}

.plant-library-list a {
    color: #5a7a45;
    font-weight: 600;
    text-decoration: none;
}

.plant-library-list a:hover {
    text-decoration: underline;
}

.plant-library-list .plant-latin {
    color: #888;
    font-style: italic;
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .plant-library-list {
        columns: 1;
    }
}


/* =============================================================================
   Product Pages — Hide placeholder product slider heading
   The theme's related/upsell product slider widget ships with the English
   placeholder title "A System You Can Count On". Hide it site-wide on single
   product pages until real section titles are set in Elementor.
   ============================================================================= */

.single-product .slider-products_title {
    display: none;
}


/* =============================================================================
   Shop Loop — Cart icon button (replaces YITH wishlist heart)
   The YITH heart is removed server-side via PHP (ethnoplanet-core plugin).
   The .ethno-atc-btn is injected at priority 20, between the WooCommerce
   native add-to-cart button (priority 10) and the Quick View eye (priority 25).
   Rendered as an empty <a> — the cart icon is provided by the ::before pseudo.
   ============================================================================= */

.shop-product_actions .ethno-atc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 50%;
    background: #5a7a45;
    color: transparent;
    font-size: 0;
    line-height: 0;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    text-decoration: none;
    overflow: hidden;
    vertical-align: middle;
}

/* Cart SVG icon */
.shop-product_actions .ethno-atc-btn::before {
    content: '';
    display: block;
    width: 18px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.shop-product_actions .ethno-atc-btn:hover {
    background: #3d5c2e;
    transform: scale(1.1);
    color: transparent;
    text-decoration: none;
}