/*
Theme Name: PrintSpace - Child
Theme URI: https://harutheme.com/printspace
Author: HaruTheme
Author URI: https://harutheme.com/
Description: This is child theme of PrintSpace
Template: printspace
Version: 1.0.0
*/

/*---------------------------------
  	Write your css code from here
------------------------------------*/

/* =========================================================
   Deandag — single product additions
   Append to: wp-content/themes/printspace-child/style.css
   (that file is already enqueued by the child theme at priority 12)

   Scoped entirely to .ddg-* classes. Nothing global, no .button rules,
   no changes to existing theme styles.
   ========================================================= */

/* ---- 1. Dynamic rating ------------------------------------
   The theme already styles .star-rating (gold haruicons stars, hollow at 0%,
   half-star support via the inner span width) and .woocommerce-review-link,
   so all that is needed here is breathing room under the title.        */
.summary .woocommerce-product-rating.ddg-product-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 16px;
}

/* ---- 2. Get a Quote CTA ---------------------------------- */
.ddg-get-quote-wrap {
    margin: 18px 0 4px;
}

.ddg-get-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 26px;
    border: 2px solid #1b6f58;      /* theme primary */
    border-radius: 48px;            /* matches Add To Cart pill */
    background: transparent;
    color: #1b6f58;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: capitalize;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ddg-get-quote:hover,
.ddg-get-quote:focus,
.ddg-get-quote:focus-visible {
    background: #165a48;            /* theme primary-hover */
    border-color: #165a48;
    color: #fff;
    text-decoration: none;
}

.ddg-get-quote__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

@media (max-width: 575px) {
    .ddg-get-quote {
        width: 100%;
        padding: 0 18px;
    }
}


/* ---- 3. Decoration Type badge ---------------------------- */
.ddg-decoration-wrap {
    margin: 0 0 16px;
}

.ddg-decoration-badge {
    display: inline-block;
    max-width: 100%;
    padding: 5px 14px;
    border-radius: 40px;
    background: #eaf3ef;
    color: #1b6f58;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Distinct tint for the second type.
   Delete this one rule to make every decoration type green. */
.ddg-decoration-badge[data-decoration="laser_engraved"] {
    background: #f6f1e4;
    color: #8a6410;
}

/* ---- 4. Delivery information cards ----------------------- */
.ddg-delivery-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.ddg-delivery-card {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 11px 12px;
    border-radius: 12px;
    background: #f5f5f5;   /* the theme's own field / control surface */
}

.ddg-delivery-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: #1a1a1a;
}

.ddg-delivery-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ddg-delivery-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ddg-delivery-title {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    color: #000;
    overflow-wrap: break-word;
}

.ddg-delivery-time {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    color: #7e7e7e;
    overflow-wrap: break-word;
}

@media (max-width: 575px) {
    .ddg-delivery-options {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ddg-delivery-card {
        padding: 10px 12px;
    }
}


/* ---- 5. Tablet / mobile dropdown menu --------------------
   The three mega-menu panels are emitted by the mega-menu builder with
   INLINE widths on the <ul class="sub-menu">:

       custom-t-shirt        width: 700px
       custom-apparel        width: 1100px
       promotional-products  width: 700px

   Inline styles beat any stylesheet, so those widths applied inside the
   burger dropdown too - a 1100px panel inside a ~450px phone screen, which
   is why the dropdown looked broken on tablet and mobile.

   These rules neutralise the inline width for the burger dropdown ONLY.
   Everything is scoped to .haru-nav-menu--dropdown, which is the burger
   panel and is only rendered at 1024px and below; the desktop mega menu
   lives in .haru-nav-menu--main and is not touched. No layout, no hidden
   elements and no template settings are changed.                          */

@media (max-width: 1024px) {

    .haru-nav-menu--dropdown {
        max-width: 100vw !important;
    }

    .haru-nav-menu--dropdown ul.sub-menu,
    .haru-nav-menu--dropdown ul.sub-menu ul.sub-menu {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
    }

    .haru-nav-menu--dropdown ul.sub-menu li.mega-menu-content {
        max-width: 100% !important;
    }
}