/*
Theme Name:   Hello Elementor Child
Theme URI:    https://poeticartstories.com
Description:  Child theme for Hello Elementor — Poetic Artstories
Author:       Poetic Artstories
Author URI:   https://poeticartstories.com
Template:     hello-elementor
Version:      1.9.0
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  hello-elementor-child
*/

/* ==========================================================================
   Slutsåld Badge
   ========================================================================== */

.pas-sold-out-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #000;
    color: #fff;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    line-height: 1;
}

.woocommerce ul.products li.product {
    position: relative;
}

.woocommerce div.product div.images {
    position: relative;
}

.woocommerce div.product .pas-sold-out-badge {
    top: 15px;
    left: 15px;
    padding: 8px 18px;
    font-size: 13px;
}

/* ==========================================================================
   Kvadratiska produktbilder i butiksvyn (1:1)
   ========================================================================== */

.eael-product-wrap .woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}

/* ==========================================================================
   Checkout - Container & Sidhuvud
   ========================================================================== */

.woocommerce-checkout .entry-title,
.page-template-default .entry-title {
    font-family: "Tenor Sans", sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: #2C3338;
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

/* Centrerad container med max-bredd */
.woocommerce-checkout .entry-content,
.woocommerce-checkout form.woocommerce-checkout {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

/* Fix: dölj order attribution som bryter flex-layout */
.wc-order-attribution-inputs { display: none !important; }


/* ==========================================================================
   Checkout - Tvåkolumnslayout (desktop)
   ========================================================================== */

@media (min-width: 769px) {

    /* CSS Grid ger stabil tvåkolumnslayout */
    .woocommerce-checkout form.woocommerce-checkout {
        display: grid;
        grid-template-columns: 1fr 380px;
        grid-template-rows: auto 1fr;
        gap: 1rem 2.5rem;
        align-items: start;
    }

    /* Adressfält — vänster kolumn, spänner båda raderna */
    .woocommerce-checkout #customer_details {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    /* Orderrubrik — höger kolumn, rad 1 */
    .woocommerce-checkout #order_review_heading {
        grid-column: 2;
        grid-row: 1;
    }

    /* Ordersammanfattning — höger kolumn, rad 2 */
    .woocommerce-checkout #order_review {
        grid-column: 2;
        grid-row: 2;
    }

    /* Billing & shipping sida vid sida inom customer_details */
    .woocommerce-checkout .col2-set {
        display: flex;
        gap: 2rem;
    }

    .woocommerce-checkout .col2-set .col-1,
    .woocommerce-checkout .col2-set .col-2 {
        flex: 1;
        min-width: 0;
    }
}

/* ==========================================================================
   Checkout - Sektionskort (panels)
   ========================================================================== */

.woocommerce-checkout #customer_details {
    background: #fff;
    border: 1px solid #e4e6e0;
    border-radius: 10px;
    padding: 2rem;
    box-sizing: border-box;
}

.woocommerce-checkout #order_review_heading {
    font-family: "Tenor Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #2C3338;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #2C3338;
}

.woocommerce-checkout #order_review {
    background: #f7f8f5;
    border: 1px solid #e4e6e0;
    border-radius: 10px;
    padding: 1.75rem;
    box-sizing: border-box;
}

/* Sektionsrubriker inom formuläret */
.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
    font-family: "Tenor Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: #2C3338;
    margin: 0 0 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e4e6e0;
}

/* ==========================================================================
   Checkout - Formulärfält
   ========================================================================== */

.woocommerce-checkout .form-row label {
    font-family: "Lato", sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    border: 1px solid #d5d7d2;
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    font-family: "Lato", sans-serif;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: #2C3338;
    box-shadow: 0 0 0 3px rgba(44, 51, 56, 0.08);
    outline: none;
}

.woocommerce-checkout .form-row textarea {
    min-height: 80px;
    resize: vertical;
}

/* Checkbox-styling ("Leverera till en annan adress?") */
.woocommerce-checkout #ship-to-different-address label {
    font-family: "Lato", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #2C3338;
    cursor: pointer;
}

/* ==========================================================================
   Checkout - Ordertabell
   ========================================================================== */

.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Lato", sans-serif;
    margin-bottom: 1.5rem;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e4e6e0;
    font-size: 0.9rem;
    color: #333;
    vertical-align: top;
}

.woocommerce-checkout-review-order-table thead th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: #888;
}

.woocommerce-checkout-review-order-table .cart_item td {
    font-size: 0.9rem;
}

.woocommerce-checkout-review-order-table .cart_item .product-name {
    font-weight: 500;
}

.woocommerce-checkout-review-order-table .cart_item .variation {
    display: block;
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.2rem;
}

.woocommerce-checkout-review-order-table tfoot th {
    font-weight: 600;
    color: #2C3338;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2C3338;
    border-bottom: none;
    padding-top: 1rem;
}

/* ==========================================================================
   Checkout - Betalmetoder & betalsektion (full bredd under formuläret)
   ========================================================================== */

/* Betalsektion flyttad via JS till full bredd under grid-layouten */
@media (min-width: 769px) {
    .pas-payment-full-width {
        grid-column: 1 / -1;
        margin-top: 1.5rem;
    }

    .woocommerce-checkout .pas-payment-full-width #payment {
        background: #fff !important;
        border: 1px solid #e4e6e0;
        border-radius: 10px;
        padding: 2rem !important;
    }
}

.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    border: 1px solid #e4e6e0;
    border-radius: 8px;
    overflow: hidden;
}

.woocommerce-checkout #payment ul.payment_methods li {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e4e6e0;
    margin: 0;
    background: #fff;
    transition: background 0.15s;
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
    border-bottom: none;
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
    background: #fafbf9;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    font-family: "Lato", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    text-transform: none;
}

.woocommerce-checkout #payment div.payment_box {
    background: #f7f8f5;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #555;
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none;
}

/* Reset typsnitt i betalrutan — inga uppercase labels */
.woocommerce-checkout #payment label,
.woocommerce-checkout #payment .payment_box label,
.woocommerce-checkout #payment .payment_box p,
.woocommerce-checkout #payment .form-row label {
    text-transform: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0;
}

/* Stripe iframe-container — normal text */
.woocommerce-checkout #payment .wc-stripe-elements-field,
.woocommerce-checkout #payment .stripe-card-group,
.woocommerce-checkout #payment fieldset,
.woocommerce-checkout #payment .wc-stripe-form label,
.woocommerce-checkout .wc-payment-form label {
    text-transform: none;
    font-family: "Lato", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
    color: #333;
}

/* ==========================================================================
   Checkout - Betalknapp
   ========================================================================== */

.woocommerce-checkout #place_order {
    background: #2C3338 !important;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 1rem 2rem;
    font-family: "Tenor Sans", sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: none;
    cursor: pointer;
    transition: background 0.25s, transform 0.15s;
    width: 100%;
    margin-top: 0.5rem;
    display: block !important;
    float: none !important;
    clear: both;
}

.woocommerce-checkout #place_order:hover {
    background: #3c4448;
    transform: translateY(-1px);
}

.woocommerce-checkout #place_order:active {
    transform: translateY(0);
}

/* GDPR-text under knappen */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.75rem;
}

/* ==========================================================================
   Checkout - Trust Badges
   ========================================================================== */

.checkout-trust-badges {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #e4e6e0;
    border-radius: 8px;
}

.checkout-trust-badges .trust-text {
    margin: 0.4rem 0;
    font-family: "Lato", sans-serif;
    font-size: 0.8rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkout-trust-badges .trust-icon {
    color: #59A56D;
    font-weight: bold;
    font-size: 0.9rem;
}

/* ==========================================================================
   Checkout - Kupongrad (begränsad till container-bredd)
   ========================================================================== */

.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
    background: #f7f8f5;
    border: 1px solid #e4e6e0;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    color: #555;
    font-size: 0.9rem;
    border-top: none;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
    display: none;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
    color: #2C3338;
    font-weight: 600;
}

/* ==========================================================================
   Checkout - Responsiv (mobil)
   ========================================================================== */

@media (max-width: 768px) {

    .woocommerce-checkout .entry-title {
        font-size: 1.5rem;
    }

    .poeticartstories-security-info {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }

    .security-badge { justify-content: center; }
    .payment-methods-info { justify-content: center; }

    .woocommerce-checkout #customer_details {
        padding: 1.25rem;
        border-radius: 8px;
    }

    .woocommerce-checkout #order_review {
        padding: 1.25rem;
        border-radius: 8px;
    }

    .woocommerce-checkout .col2-set {
        display: block;
    }

    .woocommerce-checkout .col2-set .col-2 {
        margin-top: 1.5rem;
    }

    .woocommerce-checkout #place_order {
        font-size: 1rem;
        padding: 0.9rem 1.5rem;
    }
}

/* ==========================================================================
   Thank You Page (order-received)
   ========================================================================== */

/* Container */
.woocommerce-order {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
    box-sizing: border-box;
}

/* Sidans rubrik */
.page-content .woocommerce-order .entry-title,
.woocommerce-order + .entry-title,
.page-header + .page-content .woocommerce .entry-title {
    font-family: "Tenor Sans", sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: #2C3338;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Tack-meddelande */
.woocommerce-order .woocommerce-thankyou-order-received {
    background: #fff;
    border: 1px solid #e4e6e0;
    border-left: 4px solid #59A56D;
    border-radius: 10px;
    padding: 1.5rem 2rem;
    font-family: "Lato", sans-serif;
    font-size: 1.05rem;
    color: #2C3338;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Orderöversikt (ordernr, datum, totalt, betalmetod) */
.woocommerce-order .woocommerce-order-overview {
    list-style: none;
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
    background: #f7f8f5;
    border: 1px solid #e4e6e0;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
}

.woocommerce-order .woocommerce-order-overview li {
    font-family: "Lato", sans-serif;
    font-size: 0.85rem;
    color: #555;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e4e6e0;
}

.woocommerce-order .woocommerce-order-overview li:nth-last-child(-n+2) {
    border-bottom: none;
}

.woocommerce-order .woocommerce-order-overview li strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #2C3338;
    margin-top: 0.25rem;
}

/* Orderdetaljer-sektion */
.woocommerce-order .woocommerce-order-details {
    background: #fff;
    border: 1px solid #e4e6e0;
    border-radius: 10px;
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
    box-sizing: border-box;
}

.woocommerce-order .woocommerce-order-details h2,
.woocommerce-order .woocommerce-order-details__title {
    font-family: "Tenor Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #2C3338;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #2C3338;
}

/* Ordertabell */
.woocommerce-order .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-family: "Lato", sans-serif;
}

.woocommerce-order .woocommerce-table--order-details th,
.woocommerce-order .woocommerce-table--order-details td {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e4e6e0;
    font-size: 0.9rem;
    color: #333;
    vertical-align: top;
}

.woocommerce-order .woocommerce-table--order-details thead th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: #888;
}

.woocommerce-order .woocommerce-table--order-details .product-name {
    font-weight: 500;
}

.woocommerce-order .woocommerce-table--order-details tfoot th {
    font-weight: 600;
    color: #2C3338;
}

.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2C3338;
    border-bottom: none;
    padding-top: 1rem;
}

/* Kundadress-sektion */
.woocommerce-order .woocommerce-customer-details {
    background: #fff;
    border: 1px solid #e4e6e0;
    border-radius: 10px;
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
    box-sizing: border-box;
}

.woocommerce-order .woocommerce-customer-details h2 {
    font-family: "Tenor Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #2C3338;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #2C3338;
}

/* Tvåkolumnslayout för billing/shipping adresser */
.woocommerce-order .woocommerce-columns--addresses {
    display: flex;
    gap: 2rem;
}

.woocommerce-order .woocommerce-columns--addresses .woocommerce-column {
    flex: 1;
    min-width: 0;
}

.woocommerce-order .woocommerce-columns--addresses .woocommerce-column h2 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e4e6e0;
}

.woocommerce-order .woocommerce-columns--addresses address {
    font-family: "Lato", sans-serif;
    font-size: 0.9rem;
    color: #555;
    font-style: normal;
    line-height: 1.7;
}

/* Thank You - Responsiv (mobil) */
@media (max-width: 768px) {

    .woocommerce-order {
        padding: 0 1rem 1.5rem;
    }

    .woocommerce-order .woocommerce-thankyou-order-received {
        padding: 1.25rem 1.25rem;
        font-size: 0.95rem;
    }

    .woocommerce-order .woocommerce-order-overview {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 1rem 1.25rem;
    }

    .woocommerce-order .woocommerce-order-overview li {
        border-bottom: 1px solid #e4e6e0;
    }

    .woocommerce-order .woocommerce-order-overview li:last-child {
        border-bottom: none;
    }

    .woocommerce-order .woocommerce-order-details,
    .woocommerce-order .woocommerce-customer-details {
        padding: 1.25rem;
        border-radius: 8px;
    }

    .woocommerce-order .woocommerce-columns--addresses {
        flex-direction: column;
        gap: 1.5rem;
    }
}