@media only screen and (max-width: 768px){
    html,
    body{
    width:100%;
    overflow-x:hidden;
    }
}

/* Force 6 thumbnails in a single row */
.woocommerce-product-gallery--with-images .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
}

.woocommerce-product-gallery--with-images .flex-control-thumbs li {
    width: 15% !important; /* Adjusts width to fit 6 images (100 / 6 is approx 16%) */
    margin-right: 5px !important; /* Small gap between images */
    float: none !important;
}

/* Remove margin from the last thumbnail */
.woocommerce-product-gallery--with-images .flex-control-thumbs li:last-child {
    margin-right: 0 !important;
}

/* Prevent WooCommerce stars from stacking and growing large on load */
.star-rating, 
.woocommerce .star-rating, 
.elementor-widget-wc-rating .star-rating {
    display: block !important;
    margin: 0 auto !important; /* Centers it if needed */
    overflow: hidden !important;
    position: relative !important;
    height: 1.2em !important;
    width: 5.4em !important; /* The exact width of 5 stars */
    line-height: 1 !important;
    font-size: 16px !important; /* Adjust this to your preferred star size */
    float: none !important;
}

.star-rating::before, 
.star-rating span::before {
    content: "\73\73\73\73\73" !important; /* Forces the star characters */
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* 1. Change Post Title Color */
.ast-archive-post .entry-title a {
    color: #ff5733 !important; /* Change to your hex code */
}

/* 2. Change "Read Post" Link Color */
.ast-blog-single-element .ast-read-more a {
    color: #3498db !important; /* Change to your hex code */
}

/* 3. Hover Colors (Optional) */
.ast-archive-post .entry-title a:hover, 
.ast-read-more a:hover {
    color: #000000 !important;
}


/* UNIFIED FIX: Color, Hidden Text, and 5th Star Cutoff */
.review-rating .star-rating {
    overflow: hidden !important;
    position: relative !important;
    height: 1.2em !important;
    line-height: 1 !important;
    font-size: 16px !important;
    width: 6.5em !important;          /* Increased width to stop the 10% cutoff */
    font-family: 'star' !important;
    display: inline-block !important;
    white-space: nowrap !important;   /* Prevents stars from jumping to a new line */
}

/* Background Stars (The "Empty" layer) */
.review-rating .star-rating::before {
    content: 'sssss' !important;
    color: #d3ced2 !important;        /* Light gray for the empty stars */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Foreground Stars (The "Filled" layer) */
.review-rating .star-rating span {
    overflow: hidden !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;           /* Forces 5/5 stars to be full */
    padding-top: 1.5em !important;    /* Pushes the "5 out of 5" text out of view */
}

.review-rating .star-rating span::before {
    content: 'SSSSS' !important;      /* Uppercase 'S' is the SOLID star icon */
    color: #FFD700 !important;        /* Your Gold Color */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    -webkit-text-fill-color: #FFD700 !important;
}


/* Change the color of the reviewer's name */
.woocommerce-review__author {
    color: #000000 !important; /* Replace with your color (e.g., #000000 for black) */
    font-size: 16px !important;  /* Optional: change the size */
    font-weight: 700 !important; /* Ensures it stays bold */
}


/* 1. Target the (verified owner) text */
.woocommerce-review__verified {
    color: #000000 !important;   /* Pure Black */
    font-size: 16px !important;  /* Matches your reviewer name size */
    font-style: normal !important; /* Removes the default italics for a cleaner look */
    margin-left: 5px !important;  /* Adds a tiny bit of breathing room from the name */
}


.my-vertical-divider {
    border-left: 1px solid #09baef; /* Color and thickness */
    height: 100px;               /* Adjust the height as needed */
    margin: 0 20px;              /* Space on the left and right */
    display: inline-block;       /* Keeps it from taking a whole line */
    vertical-align: middle;
}




/* 1. Hide the Gift Card form itself */
#wc_gc_cart_redeem_form {
    display: none !important;
}

/* 2. Hide the "Have a gift card? Click here" notice wrapper */
.woocommerce-info:has(#wc_gc_cart_redeem_form),
.wc-block-checkout__gift-cards,
.wc-gc-checkout-redeem-container {
    display: none !important;
}

/* Removes the entire gift card container, including the header and form */
.add_gift_card_form {
    display: none !important;
}


/* 1. Force the image size and prevent "squishing" */
.checkout-image-container img {
    width: 80px !important;      /* Actual display width */
    height: 80px !important;     /* Actual display height */
    min-width: 80px !important;  /* Prevents browser from shrinking it */
    min-height: 80px !important; /* Prevents browser from shrinking it */
    object-fit: cover !important; 
    border-radius: 6px !important;
    flex-shrink: 0 !important;   /* Critical: tells flexbox not to compress this */
}

/* 2. Align name and image */
.checkout-item-details {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
}

/* 3. Adjust Table Columns to close the "Large Gap" */
/* This gives the product name area more room and pulls the price in */
.woocommerce-checkout-review-order-table .product-name {
    width: 75% !important; 
    text-align: left !important;
}

.woocommerce-checkout-review-order-table .product-total {
    width: 25% !important;
    text-align: right !important;
}

/* 4. Fix vertical alignment for the whole row */
.cart_item td {
    vertical-align: middle !important;
    padding: 15px 0 !important;
}



/* Change "Name" to "First Name" using CSS content replacement */
.comment-form-author label {
    font-size: 0 !important; /* Hide the original "Name" text */
}

.comment-form-author label:before {
    content: "First Name "; /* Add the new text */
    font-size: 16px !important; /* Set back to your theme's font size */
}

.comment-form-author label .required {
    font-size: 16px !important; /* Ensure the red asterisk stays visible */
}


/* 1. Target the parent form to allow buttons to stack */
form.cart, 
.elementor-add-to-cart {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* 2. Force the Apple Pay container to occupy a full new row */
.wc-stripe-product-checkout-container {
    flex: 0 0 100% !important; /* This forces it to take up 100% width of the next 'row' */
    width: 100% !important;
    display: block !important;
    margin-top: 15px !important;
    clear: both !important;
}

/* 3. Keep the button size reasonable */
#wc-stripe-applepay-container {
    max-width: 200px !important; /* Adjust this to make it smaller/larger */
    margin-left: 0 !important;   /* Aligns it to the left */
}

/* 4. Ensure the Add to Cart button doesn't stretch weirdly */
.single_add_to_cart_button {
    flex: 0 1 auto !important;
}

/* Kill the invisible WordPress line breaks on ALL devices */
#gallery-1.gallery br, 
.gallery br {
    display: none !important;
}
/* 1. Remove borders/shadows from the main container */
#gallery-1.gallery {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 -5px !important; /* Adjusts for the 5px padding on items below */
}

/* 2. Strip shadows/borders from individual items and background boxes */
#gallery-1 .gallery-item,
#gallery-1 .gallery-icon,
#gallery-1 .gallery-icon a {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding: 2px !important; /* This creates the 'gap' between images */
    margin: 0 !important;
}

/* 3. Force 2-Column Grid (Total width 50% per item) */
#gallery-1 .gallery-item {
    max-width: 50% !important;
    display: inline-block !important;
    vertical-align: top;
}

/* 4. Force Perfect Squares and remove image borders */
#gallery-1 .gallery-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* This forces the square crop */
    object-fit: cover !important;   /* Ensures the image fills the square without stretching */
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;    /* Change to 8px if you want rounded corners */
}

/* 5. Hide the caption text if it's creating extra white space */
#gallery-1 .gallery-caption {
    display: none !important;
}


@media (max-width: 767px) {
    /* 1. Container: Flex row with hidden scrollbar */
    #gallery-1.gallery {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important; /* The gap between images */
        padding: 0 20px 20px 20px !important; /* Space on the sides and bottom */
        margin-left: -20px !important; /* Pulls container to screen edges */
        margin-right: -20px !important;
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    }

    /* Hide scrollbar for Chrome/Safari */
    #gallery-1.gallery::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. Items: 80% width to allow 'Peeking' */
    #gallery-1 .gallery-item {
        flex: 0 0 80% !important; /* Each image takes 80% width, leaving 20% for the next image to peek */
        max-width: 80% !important;
        display: block !important;
        scroll-snap-align: start !important; /* Aligns to the left on swipe */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Image Styling */
    #gallery-1 .gallery-item img {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Remove standard WordPress gallery clearing that breaks Flexbox */
    #gallery-1.gallery br {
        display: none !important;
    }
}

/* Force the button to be 100% wide */
.single_add_to_cart_button.button.alt {
    width: 100% !important;
    display: block !important;
    padding: 15px 0 !important; /* Makes the button taller/thicker */
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* Ensure the container doesn't restrict the button size */
form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
}

.elementor-add-to-cart .quantity {
    display: none !important; /* Optional: hides the 1,2,3 box to give button more room */
}





/* Targets the front and back containers and the image wrapper */
.eael-elements-flip-box-front-container, 
.eael-elements-flip-box-rear-container,
.eael-elements-flip-box-icon-image,
.eael-elements-flip-box-container {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Targets the specific image tag you have in the HTML */
img.eael-flipbox-image-as-icon {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}



/* Hide the review form by default */
#review_form #commentform {
    display: none;
    margin-top: 20px;
}

/* Make the "Add a review" title look clickable */
#review_form #reply-title {
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    background-color: #f9f9f9; /* Optional: light background */
    border: 1px solid #ddd;    /* Optional: border */
    border-radius: 5px;
    transition: all 0.3s ease;
}

#review_form #reply-title:hover {
    background-color: #eeeeee;
}

/* Add a small arrow indicator after the text */
#review_form #reply-title::after {
    content: ' +';
    font-weight: bold;
}

/* When the form is active, change the arrow to a minus */
#review_form #reply-title.form-open::after {
    content: ' −';
}





/* Remove the gap left by the missing reviewer avatar */
.woocommerce #reviews #comments ol.commentlist li .comment-text,
.cr-single-product-review .comment-text {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Ensure the container itself isn't adding weird spacing */
.comment_container {
    padding-left: 0 !important;
}

/* Hide the avatar container if it's still taking up space */
.comment_container img.avatar, 
.comment_container .avatar {
    display: none !important;
}

/* Align stars to the left */
.review-rating {
    display: block;
    float: none !important;
}

/* 1. The Icon Styling */
.custom-tooltip {
    position: relative;
    cursor: help;
    color: #000000; /* Icon color - change this to your brand color if needed */
    font-weight: bold;
    margin-left: 5px;
    display: inline-block;
    font-style: normal;
}

/* 2. The Tooltip Box (The "Popup") */
.custom-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 150%; /* Distance above the icon */
    left: 50%;
    transform: translateX(-50%);
    
    /* Modern Styling */
    background-color: #ffffff;
    color: #000000;
    padding: 10px 15px;
    border-radius: 4px; /* Slight roundness for a modern look */
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    
    /* Depth and Border */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    
    /* Visibility Logic */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 9999;
}

/* 3. The Little Arrow at the Bottom */
.custom-tooltip::before {
    content: "";
    position: absolute;
    top: -10px; /* Aligns the arrow with the box */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent; /* Matches box bg */
    
    /* Shadow for the arrow */
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.05));
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

/* 4. Triggering the Hover Effect */
.custom-tooltip:hover::after,
.custom-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    bottom: 135%; /* Subtle "float up" animation */
}








/* NUCLEAR MOBILE FIX */
@media screen and (max-width: 767px) {
    /* Target the Inner Section Row specifically */
    .swipe-columns .elementor-container,
    .swipe-columns .elementor-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important; /* Changed from auto to scroll */
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 20px !important;
    }

    .swipe-columns .elementor-column {
        flex: 0 0 80% !important;
        width: 80% !important; /* Added width for extra force */
        max-width: 80% !important;
        min-width: 80% !important;
        display: block !important; /* Prevents hidden columns */
        scroll-snap-align: center !important;
    }
}






/* =============================================================
   DEPLASTO — WPC Frequently Bought Together Bundle Box
   Redesign to match the "Frequently Bought Together" card UI.
 
   HOW TO USE:
   In WP Admin → Appearance → Additional CSS, find and DELETE
   every existing rule that targets .woobt-* (there are several
   scattered blocks). Replace them ALL with this single block.
   ============================================================= */
 
/* ── 1. Container ─────────────────────────────────────────── */
.woobt-wrap {
    background: #ffffff !important;
    border: 1.5px solid #E8E8E8 !important;
    border-radius: 16px !important;
    padding: 22px !important;
    margin: 20px 0 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
    width: 100% !important;
}
 
/* ── 2. Header ("FREQUENTLY BOUGHT TOGETHER") ─────────────── */
.woobt-wrap::before {
    content: "FREQUENTLY BOUGHT TOGETHER" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    color: #8B9AA1 !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}
 
/* ── 3. Hide Quantity ─────────────────────────────────────── */
.woobt-qty,
.woobt-qty-num,
.woobt-qty-input {
    display: none !important;
}
 
/* ── 4. Product Rows ──────────────────────────────────────── */
.woobt-product {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 0 !important;
    border: none !important;
    border-bottom: 1px solid #F2F2F2 !important;
}
.woobt-product:last-child {
    border-bottom: none !important;
    padding-bottom: 4px !important;
}
 
/* ── 5. Checkbox ──────────────────────────────────────────── */
.woobt-choose {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
}
.woobt-checkbox {
    width: 22px !important;
    height: 22px !important;
    accent-color: #09baef !important;
    cursor: pointer !important;
    margin: 0 !important;
}
 
/* ── 6. Thumbnail ─────────────────────────────────────────── */
.woobt-thumb {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #F6EFEF !important;
}
.woobt-thumb a {
    display: block !important;
    width: 64px !important;
    height: 64px !important;
}
.woobt-thumb img,
.woobt-thumb .woobt-img {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    display: block !important;
}
 
/* ── 7. Title ─────────────────────────────────────────────── */
.woobt-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.woobt-title a {
    display: block !important;
    color: #1C1F33 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
}
/* Meta / subtitle line (if WPC outputs a description element) */
.woobt-title .woobt-description,
.woobt-description {
    font-size: 12px !important;
    color: #8B9AA1 !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
    line-height: 1.4 !important;
}
 
/* ── 8. Price ─────────────────────────────────────────────── */
.woobt-price {
    flex: 0 0 auto !important;
    text-align: right !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}
/* Strikethrough original price */
.woobt-price del,
.woobt-price del .woocommerce-Price-amount {
    display: block !important;
    color: #B0B8BC !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}
/* Sale / active price */
.woobt-price ins {
    display: block !important;
    text-decoration: none !important;
}
.woobt-price ins .woocommerce-Price-amount,
.woobt-price > .woocommerce-Price-amount {
    color: #1C1F33 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
/* FREE badge — targets items where the price amount is $0.00.
   The plugin may output "Free" text directly; this covers both. */
.woobt-price .woobt-free,
.woobt-price [class*="free"],
.woobt-price ins .woocommerce-Price-amount[data-value="0"],
.woobt-price span.free {
    color: #1FA66B !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}
 
/* ── 9. Bundle Total Row ──────────────────────────────────── */
.woobt-total {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 16px !important;
    margin-top: 8px !important;
    border-top: 1px solid #F2F2F2 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1C1F33 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.woobt-total-text {
    color: #1C1F33 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}
.woobt-total-price {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1C1F33 !important;
    letter-spacing: -0.02em !important;
    margin-left: 0 !important;
}
.woobt-total-price .woocommerce-Price-amount {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}
 
/* ── 10. Add to Cart Button ───────────────────────────────── */
.woobt-wrap .woobt-action .single_add_to_cart_button.button.alt {
    background-color: #09baef !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;          /* Full pill shape */
    padding: 20px 30px !important;
    width: 100% !important;
    display: block !important;
    margin-top: 16px !important;
    text-align: center !important;
 
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
 
    box-shadow: 0 12px 28px -10px rgba(9, 186, 239, 0.5) !important;
    transition: all 220ms ease !important;
    cursor: pointer !important;
    transform: none !important;               /* Reset theme transforms */
}
.woobt-wrap .woobt-action .single_add_to_cart_button.button.alt:hover {
    background-color: #0AA8D6 !important;
    box-shadow: 0 18px 40px -10px rgba(9, 186, 239, 0.65) !important;
    transform: translateY(-1px) !important;
    border-color: transparent !important;
}
 
/* ── 11. Mobile ───────────────────────────────────────────── */
@media (max-width: 767px) {
    .woobt-product {
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    .woobt-thumb,
    .woobt-thumb a {
        flex: 0 0 56px !important;
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
    }
    .woobt-thumb img,
    .woobt-thumb .woobt-img {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
    }
    .woobt-title a {
        font-size: 14px !important;
    }
    .woobt-price ins .woocommerce-Price-amount,
    .woobt-price > .woocommerce-Price-amount {
        font-size: 14px !important;
    }
    .woobt-total-price {
        font-size: 18px !important;
    }
    .woobt-wrap .woobt-action .single_add_to_cart_button.button.alt {
        font-size: 15px !important;
        padding: 17px 20px !important;
        letter-spacing: 0.01em !important;
    }
    /* Remove plugin line breaks inside rows */
    .woobt-product br {
        display: none !important;
    }
}





.deplasto-pdp .ic img,
.deplasto-pdp .icon-frame img,
.deplasto-pdp .effect-card .ic,
.deplasto-pdp .benefit-card .ic,
.deplasto-pdp .stat .icon-frame img {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
}




/* ==========================================================================
   Deplasto — Checkout branding (appearance only)
   --------------------------------------------------------------------------
   SCOPE:        body.woocommerce-checkout only (will not affect other pages).
   WHAT IT DOES: Aligns the checkout to the Deplasto design tokens — colors,
                 type, buttons, inputs, payment cards, order-summary, notices.
   WHAT IT DOES NOT DO: No layout restructuring, no new content/features,
                 no changes to form fields, names/IDs, nonces, AJAX, or the
                 Stripe payment iframe. Purely cosmetic and fully reversible —
                 delete this block to restore the page exactly.
   WHERE TO PASTE: Appearance ▸ Customize ▸ Additional CSS
                 (or Elementor ▸ Site Settings ▸ Custom CSS).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Aldrich&display=swap");

:root {
  --dp-cyan-50:  #E6FAFF;
  --dp-cyan-400: #09E0EF;
  --dp-cyan-500: #09BAEF;
  --dp-cyan-600: #0593C2;
  --dp-cyan-700: #066F94;
  --dp-brand-hover: #0AA8D6;
  --dp-midnight: #1C1F33;
  --dp-linen:    #F6EFEF;
  --dp-success:  #1FA66B;
  --dp-danger:   #D8453E;
  --dp-ink-500:  #5C6E76;
  --dp-ink-400:  #8B9AA1;
  --dp-ink-200:  #DCE3E6;
  --dp-ink-100:  #EEF2F4;
  --dp-ink-50:   #F7F9FA;
  --dp-font: "Gotham", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --dp-shadow-card: 0 8px 24px -8px rgba(0,0,0,0.08);
  --dp-shadow-cta:  0 12px 26px -10px rgba(9,186,239,0.6);
  --dp-focus:       0 0 0 3px rgba(9,186,239,0.35);
  --dp-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- Base type, scoped to the checkout ----- */
body.woocommerce-checkout .woocommerce {
  font-family: var(--dp-font);
  color: var(--dp-midnight);
}

/* ----- Section headings (Billing, Shipping, Your order, Payment) ----- */
body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
  font-family: var(--dp-font);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dp-midnight);
}

/* ----- Inputs, selects, textareas ----- */
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .select2-container .select2-selection {
  border: 1.5px solid var(--dp-ink-200);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
  background: #fff;
  color: var(--dp-midnight);
  transition: border-color var(--dp-ease) 200ms, box-shadow var(--dp-ease) 200ms;
}
body.woocommerce-checkout .woocommerce form .form-row input.input-text::placeholder,
body.woocommerce-checkout .woocommerce form .form-row textarea::placeholder {
  color: var(--dp-ink-400);
}
body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-checkout .select2-container--focus .select2-selection {
  outline: none;
  border-color: var(--dp-cyan-500);
  box-shadow: var(--dp-focus);
}
body.woocommerce-checkout .woocommerce form .form-row label {
  font-weight: 600;
  color: var(--dp-ink-500);
  margin-bottom: 6px;
}
/* validation states keep WooCommerce behavior; only recolor the border */
body.woocommerce-checkout .woocommerce form .woocommerce-invalid input.input-text {
  border-color: var(--dp-danger);
}
body.woocommerce-checkout .woocommerce form .woocommerce-validated input.input-text {
  border-color: var(--dp-success);
}

/* ----- Primary CTA: Place order (appearance only — submit logic untouched) ----- */
body.woocommerce-checkout #place_order {
  background: var(--dp-cyan-500) !important;
  color: #fff !important;
  font-family: var(--dp-font);
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  border: none !important;
  border-radius: 999px !important;
  padding: 16px 28px !important;
  font-size: 16px;
  box-shadow: var(--dp-shadow-cta);
  transition: background var(--dp-ease) 200ms, transform var(--dp-ease) 200ms, box-shadow var(--dp-ease) 200ms;
}
body.woocommerce-checkout #place_order:hover {
  background: var(--dp-brand-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 38px -10px rgba(9,186,239,0.7);
}
body.woocommerce-checkout #place_order:active { transform: scale(0.99); }
body.woocommerce-checkout #place_order:focus-visible { box-shadow: var(--dp-focus); }

/* ----- Secondary buttons (e.g. Apply coupon) -> calm outline, not cyan ----- */
body.woocommerce-checkout .woocommerce button[name="apply_coupon"],
body.woocommerce-checkout .woocommerce .checkout_coupon button.button {
  background: #fff !important;
  color: var(--dp-midnight) !important;
  border: 1.5px solid var(--dp-ink-200) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: border-color var(--dp-ease) 200ms;
}
body.woocommerce-checkout .woocommerce button[name="apply_coupon"]:hover,
body.woocommerce-checkout .woocommerce .checkout_coupon button.button:hover {
  border-color: var(--dp-midnight) !important;
}

/* ----- Links & accents ----- */
body.woocommerce-checkout .woocommerce a,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .showcoupon,
body.woocommerce-checkout .woocommerce-info a {
  color: var(--dp-cyan-600);
}
body.woocommerce-checkout .woocommerce a:hover { color: var(--dp-brand-hover); }

/* ----- Order review table ----- */
body.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--dp-ink-50);
  border: 1px solid var(--dp-ink-100);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--dp-shadow-card);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th {
  border-color: var(--dp-ink-200);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dp-midnight);
}

/* ----- Payment method cards (NOT the Stripe iframe inside) ----- */
body.woocommerce-checkout #payment {
  background: transparent;
}
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method {
  border: 1.5px solid var(--dp-ink-200);
  border-radius: 14px;
  padding: 13px 15px;
  margin-bottom: 10px;
  background: #fff;
  transition: border-color var(--dp-ease) 200ms, box-shadow var(--dp-ease) 200ms;
}
body.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--dp-cyan-500);
  background: var(--dp-cyan-50);
  box-shadow: 0 0 0 3px rgba(9,186,239,0.12);
}
body.woocommerce-checkout #payment .payment_box {
  background: var(--dp-ink-50);
  border-radius: 12px;
}

/* ----- Notices (info / success / error) — branded tints only ----- */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
  border-top-color: var(--dp-cyan-500);
  border-radius: 12px;
}
body.woocommerce-checkout .woocommerce-message { border-top-color: var(--dp-success); }
body.woocommerce-checkout .woocommerce-error { border-top-color: var(--dp-danger); border-radius: 12px; }

/* ----- Terms checkbox row: gentle spacing ----- */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 8px 0 16px; }

/* ----- Light, layout-safe spacing polish ----- */
body.woocommerce-checkout .woocommerce form.checkout .col2-set .col-1,
body.woocommerce-checkout .woocommerce form.checkout .col2-set .col-2 { padding: 0; }
body.woocommerce-checkout .woocommerce .form-row { margin-bottom: 14px; }

/* ----- Responsive: keep tap targets comfortable ----- */
@media (max-width: 900px) {
  body.woocommerce-checkout #place_order { width: 100%; }
}



.woobt-wrap-571 .woobt-thumb {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}


.woobt-wrap-571 .woobt-thumb img { box-shadow: none !important; }





.elementor-menu-cart__toggle_button.elementor-button,
.elementor-menu-cart__toggle_button.elementor-button:hover {
    background-color: transparent !important;
}