/*
 * Thokai landing design.
 * Palette sampled from wp-content/uploads/2026/09/story.webp so the page matches
 * the artwork it sits on rather than an eyeballed approximation.
 * Decorative PNGs in assets/images/ are keyed out of that same artwork.
 */
:root {
    --td-teal:      #186078;
    --td-teal-dk:   #124e60;
    --td-teal-lt:   #2a87a3;
    --td-green:     #3c7848;
    --td-green-lt:  #4e9b5c;
    --td-maroon:    #6c1824;
    --td-brown:     #48180c;
    --td-cream:     #fdf3e7;
    --td-ink:       #6c6c6c;
    --td-collect:   #e8f0f7;

    /* repoint the theme warm palette at the new brand colours */
    --primary-color: #186078;
    --primary-dark:  #124e60;
    --primary-light: #2a87a3;
    --bg-beige:      #fdf3e7;
    --accent-gold:   #b0862f;
    --border-light:  #d7e4ec;

    /* ---- shared inner-page tokens ----------------------------------------
     * search.php, product-detail.css, template-parts/content-none.php and the
     * my-account block in custom.css are all written against this token set.
     * They each used to carry their own amber :root copy, which is why the
     * inner pages stayed orange while the landing page went teal. The values
     * now live here only, so every inner page reads the landing palette.
     * ------------------------------------------------------------------- */
    --orange:        #186078;   /* accent / links / active state */
    --orange-lt:     #2a87a3;
    --gold:          #b0862f;   /* rating stars, small warm accents */
    --gold-lt:       #e2c489;
    --cream:         #fdf3e7;   /* card + panel fill, as Featured Products */
    --cream-dk:      #f2e3cf;
    --warm-bg:       #f4f9fc;   /* page ground, tinted off the collection band */
    --collect:       #e8f0f7;
    --brown:         #48180c;   /* headings */
    --brown-md:      #6c1824;   /* section titles (maroon) */
    --brown-lt:      #6c6c6c;   /* eyebrows, meta */
    --text:          #2f2f2f;
    --text-md:       #5a5a5a;
    --border:        #d7e4ec;
    --white:         #ffffff;
    --shadow:        0 4px 20px rgba(24, 96, 120, .08);
    --shadow-lg:     0 12px 40px rgba(24, 96, 120, .16);
}

/* ---------- 1. Header: white with a teal rule ---------- */
.site-header { border-top: 4px solid var(--td-teal); }
.site-header .navbar,
.site-header .navbar.bg-light { background: #fff !important; }
.site-header .nav-link { color: #2b2b2b !important; letter-spacing: .04em; }
.site-header .nav-link:hover,
.site-header .nav-link.active,
.site-header .current-menu-item > a { color: var(--td-teal) !important; }
.site-header .nav-link.active::after,
.site-header .current-menu-item > a::after { background: var(--td-teal) !important; }

/* ---------- 2. Shop as Collection ---------- */

/* cards: teal frame, no amber glow */
.tc-cate-box {
    border: 2px solid var(--td-teal-lt);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(24, 96, 120, .18) !important;
    transition: transform .35s ease, box-shadow .35s ease;
}
.tc-cate-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(24, 96, 120, .28) !important;
}
/* caption band: a soft scrim at the foot of the card, not a slab over half of it */
.tc-cate-box > .e-con,
.tc-cate-box > .elementor-element {
    background-color: transparent !important;
    background-image: linear-gradient(to top,
        rgba(7, 40, 50, .94) 0%,
        rgba(7, 40, 50, .86) 42%,
        rgba(7, 40, 50, .45) 78%,
        rgba(7, 40, 50, 0) 100%) !important;
    box-shadow: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 34px 12px 16px !important;
    min-height: 0 !important;
}
.tc-cate-box .elementor-widget-heading .elementor-heading-title,
.tc-cate-box h3.elementor-heading-title {
    color: #f7ecdd !important;
    font-size: 23px !important;
    white-space: nowrap;
    line-height: 1.12;
    margin-bottom: 2px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
/* the design prints "Saree" under each collection name */
.tc-cate-box h3.elementor-heading-title span {
    content: "Saree";
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: .7em;
    font-style: normal;
    letter-spacing: .12em;
    color: #e2d3c0;
    margin-top: 2px;
}
.tc-cate-box .elementor-button {
    background-color: transparent !important;
    background-image: url("../../../../uploads/2026/09/blue-btn-bg.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 0 !important;
    letter-spacing: .08em;
    padding: 11px 26px !important;
    filter: drop-shadow(0 3px 8px rgba(24, 96, 120, .35));
    transition: transform .3s ease, filter .3s ease;
}
.tc-cate-box .elementor-button:hover { filter: drop-shadow(0 5px 12px rgba(24, 96, 120, .5));  background-image: url("../../../../uploads/2026/09/brown-btn-bg.webp") !important; }


/* ---------- 4. Uniquely Woven ---------- */
/* feather-bg.webp is the section backdrop; feather-section-image.webp is the
   arch-framed loom photo and carries its own outline, so no CSS arch here. */
.elementor-element-cf29599 {
    position: relative;
    background-color: #ffffff !important;
    background-image: url("../../../../uploads/2026/09/feather-bg.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}

.elementor-element-cf29599 .elementor-button {
    background-color: transparent !important;
    background-image: url("../../../../uploads/2026/09/green-btn-bg.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    padding: 11px 30px !important;
    letter-spacing: .08em;
}
.elementor-element-cf29599 .elementor-button:hover { filter: brightness(1.12); }

/* the second, smaller photo is not in the design */
.elementor-element-3109c75 { display: none !important; }
.elementor-element-455ae27 { display: block !important; }
.elementor-element-455ae27 .elementor-widget-container img,
.elementor-element-455ae27 img {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    max-width: 400px;
}

/* ---------- 5. Featured Products ---------- */
.elementor-element-351285f h2.elementor-heading-title { color: var(--td-maroon) !important; }
.hfproduct ul.products li.product {
    background: var(--td-cream);
    border-radius: 14px;
    padding: 0 0 15px;
    box-shadow: 0 4px 16px rgba(72, 24, 12, .07);
    transition: transform .3s ease, box-shadow .3s ease;
}
.hfproduct ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 26px rgba(72, 24, 12, .14);
    padding: 0 0 15px;
    background: var(--td-white);
}
.hfproduct ul.products li.product img { border-radius: 0px; }
.hfproduct ul.products li.product .woocommerce-loop-product__title {
     font-family: "Calibri";
    font-style: italic;
    color: var(--td-brown);
    font-size: 15px;
    line-height: 1.35;
    padding: 0px 12px !important;

       display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(15px * 1.35 * 2);
}
.hfproduct ul.products li.product .price { color: var(--td-teal-lt); font-weight: 600; }
.hfproduct ul.products li.product .button {
    background-color: transparent !important;
    background-image: url("../../../../uploads/2026/09/brown-btn-bg.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 0 !important;
    letter-spacing: .08em;
    padding: 11px 30px !important;
}
/* Hover swaps the plate for the green one. It used to swap to the cyan
   blue-btn plate *and* add brightness(1.15) on top, which came out far
   brighter than any brand colour and left the plate's ends looking mismatched
   against the card. */
.hfproduct ul.products li.product .button:hover,
.hfproduct ul.products li.product .button:focus-visible {
    background-image: url("../../../../uploads/2026/09/green-btn-bg.webp") !important;
    filter: none;
    outline: none;
}

/* ---------- 6. Footer: teal to green, with the artwork florals ---------- */
.site-footer.bg-dark {
    position: relative;
    overflow: hidden;
    background: url("../../../../uploads/2026/09/footer-bg.webp") no-repeat center center !important;
    background-size: cover !important;
}
/* the circular Thokai badge and the pink badge are painted into footer-bg-1,
   so the markup versions are suppressed to avoid doubling them up */
/* .site-footer .footer-logo,
.site-footer .footer-tagline,
.site-footer .footer-main .col-md-2:first-child p { display: none !important; } */
.site-footer .footer-main .footer-logo .custom-logo-link {
  background: #fff;
  border-radius: 50%;
  padding: 20px;
}

.site-footer .footer-main .footer-logo .custom-logo-link img {
  max-width: 100% !important;
  width: 100%;
}
.site-footer .footer-main .footer-logo .custom-logo-link img{}
.site-footer .footer-main,
.site-footer .footer-bottom { position: relative; z-index: 2; }
.site-footer .footer-title {
    color: #ffd9a0 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}
.site-footer,
.site-footer p,
.site-footer .footer-links a,
.site-footer .contact-info a { color: #eaf4f2 !important; }
.site-footer .footer-links a:hover,
.site-footer .contact-info a:hover { color: #fff !important; text-decoration: underline; }
.site-footer .footer-tagline { color: #ffd9a0 !important; }
.site-footer .social-icon {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
}
.site-footer .social-icon:hover { background: #ffd9a0; color: var(--td-teal-dk); }
.site-footer .copyright-text,
.site-footer .copyright-text a { color: #dce9e6 !important; }
.site-footer hr { border-color: rgba(255, 255, 255, .22) !important;  display:none}
/* bottom bar sits inside the gradient rather than a separate maroon strip */
.site-footer .footer-bottom { background: rgb(37, 101, 127) !important; }
.site-footer .footer-logo img,
.site-footer .custom-logo { max-width: 108px; height: auto; }
.site-footer .footer-links li { margin-bottom: 6px; }
/* .footer-brandmark sizing lives in custom.css with the rest of the
   responsive footer, so it isn't split across two files. */

/* product loop button reads SHOP NOW in the design */
.hfproduct ul.products li.product .button.added_to_cart { display: none; }

.search-field:focus-visible { outline: none;}


@media (max-width: 991px) {
    .elementor-element-cf29599::before { width: 200px; height: 140px; }
    .elementor-element-cf29599::after  { width: 220px; height: 130px; }
    .site-footer::after { width: 240px; height: 140px; opacity: .7; }
    .elementor-element-09d69bc { background-size: auto 34%; }
}


/* ---------- 7. Our Story ---------- */
/* story-bg.webp is the floral backdrop and story-content-outer-design.webp is the
   peacock frame. The copy is real text now rather than baked into a flat image.
   Elementor's .e-con rules load after this file at equal specificity, so the
   background and sizing declarations need both the id prefix and !important. */
.elementor-element-cfaf38d {
    min-height: 560px !important;
    background-image: url("../../../../uploads/2026/09/story-bg.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
}
.elementor-element-cfaf38d > .e-con-inner { max-width: 1680px !important; }
.elementor-element-cfaf38d .tstory-mark {
    min-height: 470px !important;
    background-image: url("../images/thokai-logotype.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 74% auto !important;
}
.elementor-element-cfaf38d .tstory-frame {
    min-height: 470px !important;
    background-image: url("../../../../uploads/2026/09/story-content-outer-design.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    padding: 7% 12% 17% 16% !important;
}
.tstory-title .elementor-heading-title {
     font-family: "Calibri";
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.tstory-sub .elementor-heading-title { font-weight: 400; margin-bottom: 14px; }
.tstory-body { color: #2f2f2f; line-height: 1.65; font-size: 15px; }
.tstory-body p { margin-bottom: 12px; }

@media (max-width: 991px) {
    .elementor-element-cfaf38d > .e-con-inner { flex-direction: column !important; }
    .elementor-element-cfaf38d .tstory-mark,
    .elementor-element-cfaf38d .tstory-frame { width: 100% !important; }
    .elementor-element-cfaf38d .tstory-mark { min-height: 150px !important; }
    .elementor-element-cfaf38d .tstory-frame {
        min-height: 0 !important;
        padding: 12% 10% 16% 12% !important;
    }
    .tstory-body { font-size: 13px; }
}

.navbar-toggler[aria-expanded="true"] + .navbar-brand > .custom-logo-link {
  background: #fff;
  border-radius: 50%;
  position: relative;
}