:root {
	--wd-hb-opt-h: 40px;
	--wd-text-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 14px;
	--wd-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(255,102,0);
	--wd-alternative-color: #fbbc34;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(255,102,0);
	--btn-accented-bgcolor-hover: rgb(255,102,0);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 1000px;
}
.wd-hb {
	background-color: rgb(255,102,0);
	background-image: none;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-hb-opt-h: 35px;
	}

}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(255,102,0);
}

/* =========================================
   1. HIDE UNNECESSARY ELEMENTS
   ========================================= */

/* Hide Shiprocket Pincode Checker */
#shiprocket_pincode_check,
#check_pincode {
    display: none !important;
}

/* Hide Product Meta (SKU, Categories, Tags) on single product pages.
   .product_meta is WooCommerce's own core class (not theme-specific),
   used the same way across virtually every WooCommerce theme, so this
   is safe and won't drift if the theme updates. */
.single-product .product_meta {
    display: none !important;
}

/* Hide the duplicate "Share" block.
   The lower share row (Facebook / X / Pinterest "Save" / LinkedIn / Telegram)
   matches the AddToAny plugin's output — .a2a_kit is AddToAny's actual,
   fixed wrapper class, not a guess. */
.single-product .a2a_kit {
    display: none !important;
}

/* The upper "Share this:" row (plain Facebook/X icons) looks like Woodmart's
   own built-in product share feature. This targets the most common class
   names Woodmart uses for it. If it doesn't disappear after pasting this in,
   right-click that block → Inspect → send me the outer HTML like you did
   for the banner, and I'll swap in the exact class. */
.single-product .wd-social-share,
.single-product .product-share,
.single-product .wd-share {
    display: none !important;
}

/* =========================================
   2. HEADER BANNER — TRUST MARQUEE
   Rewritten against the site's REAL markup:

   <div class="header-banner wd-hb">
     <div class="container wd-entry-content">
       <div class="trust-banner">
         <div class="trust-banner-track">✅ ... ✅ ...</div>
       </div>
     </div>
   </div>

   The classes ".wd-announcement-bar" / ".wd-announcement-text" used in
   earlier versions of this file do NOT exist anywhere in the actual page
   HTML — those rules were silently matching nothing, which is why the
   banner never responded to them no matter what was changed.

   There's also a genuine bug in the widget's own inline <style> block
   (embedded directly in the page content): it puts
   "white-space: nowrap" on ".trust-banner-track span", but the banner
   text is typed straight into the .trust-banner-track div — there is no
   <span> in the markup. So that rule targets an element that doesn't
   exist and never fires, which is the actual, original cause of the
   text wrapping to two lines. The fix below applies nowrap to the real
   element that holds the text.
   ========================================= */

/* Full-width, no stray horizontal scroll from the marquee */
.header-banner,
.header-banner .wd-entry-content {
    overflow: hidden;
}

.header-banner .wd-entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Custom keyframes, defined and owned entirely by this stylesheet.
   The page's built-in "scroll-right" keyframe actually animates
   LEFT-to-RIGHT (it moves from a negative offset toward 0), which is
   the opposite of what's wanted here. Since the banner text is already
   duplicated back-to-back in the HTML, a clean 0% -> -50% translate
   gives a seamless RIGHT-to-LEFT loop with no visible reset/jump. */
@keyframes navgraha-ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* The scrolling track itself — this is the actual fix.
   !important guards against the page's own inline <style> block,
   which is injected later in the document and would otherwise win
   any tie in the cascade. */
.trust-banner-track {
    display: flex !important;
    width: max-content !important;
    white-space: nowrap !important;

    /* Text styling — restored here, scoped ONLY to this element
       (not a "*" blanket rule) so it can't leak onto anything else. */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 16px !important;

    /* Animation written as individual longhand properties rather than
       the "animation" shorthand. If any other stylesheet on the page
       (e.g. a "prefers-reduced-motion" accessibility rule) overrides
       just one piece — like animation-duration — a shorthand here
       would silently lose to it. Setting every piece explicitly with
       !important closes that gap. */
    animation-name: navgraha-ticker-scroll !important;
    animation-duration: 25s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-direction: normal !important;
    animation-play-state: running !important;
}

/* Some themes/plugins ship a global accessibility reset like:
     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
     }
   That silences every animation on the site with !important via a
   universal "*" selector. A class selector beats a universal selector
   on specificity even when both sides use !important, so re-declaring
   the same properties here, scoped to our own element, wins the tie
   and keeps this one decorative banner animating regardless of that
   setting. (Everything else on the site still correctly respects
   reduced motion — this override is scoped to just this element.) */
@media (prefers-reduced-motion: reduce) {
    .trust-banner-track {
        animation-duration: 25s !important;
        animation-iteration-count: infinite !important;
        animation-play-state: running !important;
    }
}

/* Pause the scroll on hover for readability */
.header-banner:hover .trust-banner-track {
    animation-play-state: paused !important;
}


/* =========================================
   3. WALLET STYLING (Woodmart header wallet chip)
   ========================================= */

.whb-column .ng-wallet-chip-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.whb-column .ng-wallet a.ng-wallet-chip {
    border: 0;
    background: transparent;
    padding: 0;
    gap: .35rem;
    font-size: 14px;
    color: #ff6600;
    max-width: 100%;
}

.whb-column .ng-wallet a.ng-wallet-chip:hover,
.whb-column .ng-wallet a.ng-wallet-chip:focus {
    background: transparent;
    color: #d94f00;
}

.whb-column .ng-wallet-chip .ng-wallet-icon {
    width: 30px;
    height: 30px;
}

/* Mobile Wallet Icon Color Fix */
.whb-column-mobile4 .woo-wallet-icon-wallet,
.whb-column-mobile4 .woo-wallet-icon-wallet::before,
.whb-column-mobile4 a.woo-wallet-menu-contents {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Mobile Responsive Adjustments for Wallet */
@media (max-width: 767px) {
    .whb-column .ng-wallet a.ng-wallet-chip {
        font-size: 13px;
        gap: .28rem;
    }
    .whb-column .ng-wallet-chip .ng-wallet-icon {
        width: 26px;
        height: 26px;
    }
    .whb-column .ng-wallet-chip .ng-wallet-icon svg {
        width: 14px;
        height: 14px;
    }
}


/* =========================================
   4. PRODUCT DESCRIPTION — CLEAN, OPEN TYPOGRAPHY
   No card/box background — content sits directly on the page.
   Works together with the JS snippet (separate file) that adds the
   actual Read More / Read Less button and toggles the .expanded class.
   ========================================= */

.woocommerce-Tabs-panel--description,
.tab-description {
    position: relative;
    max-height: 340px; /* collapsed height before "Read More" */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    padding: 0;
    margin: 10px 0 0 0;
    background: transparent;
    border: none;
    border-radius: 0;
    max-width: 800px; /* comfortable reading width instead of full-bleed text */
}

.woocommerce-Tabs-panel--description.expanded,
.tab-description.expanded {
    max-height: 6000px; /* large enough for any realistic content */
}

/* Headings — full scale, h1 through h4 */
.woocommerce-Tabs-panel--description h1,
.tab-description h1 {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 28px 0 14px 0;
    line-height: 1.3;
}

.woocommerce-Tabs-panel--description h2,
.tab-description h2 {
    font-size: 21px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 26px 0 12px 0;
    line-height: 1.35;
}

.woocommerce-Tabs-panel--description h3,
.tab-description h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2c2c2c;
    margin: 22px 0 10px 0;
    line-height: 1.4;
}

.woocommerce-Tabs-panel--description h4,
.tab-description h4 {
    font-size: 16px;
    font-weight: 600;
    color: #2c2c2c;
    margin: 18px 0 8px 0;
    line-height: 1.4;
}

.woocommerce-Tabs-panel--description p,
.tab-description p {
    line-height: 1.8;
    color: #444;
    margin-bottom: 16px;
    font-size: 15.5px;
}

.woocommerce-Tabs-panel--description strong,
.tab-description strong {
    color: #1a1a1a;
    font-weight: 700;
}

.woocommerce-Tabs-panel--description em,
.tab-description em {
    color: #555;
}

.woocommerce-Tabs-panel--description a,
.tab-description a {
    color: #ff6600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.woocommerce-Tabs-panel--description blockquote,
.tab-description blockquote {
    margin: 20px 0;
    padding: 14px 20px;
    border-left: 3px solid #ff6600;
    background: #fff7f0;
    color: #555;
    font-style: italic;
    border-radius: 0 6px 6px 0;
}

.woocommerce-Tabs-panel--description ul,
.tab-description ul {
    margin: 18px 0;
    padding-left: 10px;
    list-style: none;
}

.woocommerce-Tabs-panel--description li,
.tab-description li {
    margin-bottom: 12px;
    line-height: 1.6;
    color: #444;
    position: relative;
    padding-left: 25px;
    font-size: 15.5px;
}

/* Custom checkmark for list items */
.woocommerce-Tabs-panel--description li:before,
.tab-description li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ff6600;
    font-weight: bold;
}

/* Fade effect at the bottom when collapsed — matches page background (white).
   If your product page background isn't white, change the "white" below
   to match, otherwise the fade will show a visible seam. */
.woocommerce-Tabs-panel--description::after,
.tab-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(to bottom, transparent, #ffffff);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.woocommerce-Tabs-panel--description.expanded::after,
.tab-description.expanded::after {
    opacity: 0;
}

/* Read More / Read Less link — injected by the JS snippet.
   Styled as a plain orange text link, not a button. */
.read-more-btn {
    display: block;
    width: fit-content;
    margin: 14px auto 0;
    background: none;
    border: none;
    padding: 0;
    color: #ff6600 !important;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-align: center;
}

.read-more-btn:hover {
    color: #e65c00 !important;
}

.read-more-btn::after {
    content: " →";
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s ease;
}

.read-more-btn:hover::after {
    transform: translateX(3px);
}

/* =========================================================
   NAVGRAHA — PRODUCT PAGE TRUST BLOCK  (v2, layout-hardened)

   REPLACES the earlier trust block CSS. Delete that whole
   section first, then paste this at the end of your master CSS.

   WHAT WAS WRONG IN v1
   .ng-trust-text had no flex sizing, so it inherited the default
   flex: 0 1 auto. Inside Woodmart's .entry-summary the row had no
   width to distribute, which squeezed the text to roughly one
   character wide and forced a word-per-line wrap. The box then
   computed a short height while its content overflowed past the
   border, which is what overlapped the elements underneath.

   WHAT CHANGED
   Every dimension that matters is now stated explicitly rather
   than inherited: the block is forced to full width and block
   display, the text is given flex: 1 1 auto with min-width: 0
   (the standard fix for flex items that refuse to wrap normally),
   and height constraints are unset so the box always grows to fit.

   All selectors remain scoped under .single-product and namespaced
   with ng-trust-, so nothing else on the site is affected.
   ========================================================= */

.single-product .ng-trust-block {
    /* Force out of any flex/grid/float context the theme applies */
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;

    /* Full width regardless of parent layout. The flex shorthand
       covers the case where .entry-summary is itself a flex row. */
    width: 100% !important;
    flex: 1 0 100% !important;
    box-sizing: border-box !important;

    /* Never let a theme rule cap the height. This is what caused
       the content to spill outside the border. */
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;

    margin: 18px 0 20px 0 !important;
    padding: 14px 16px;
    border: 1px solid #f0ddcc;
    border-radius: 8px;
    background: #fffaf5;
}

.single-product .ng-trust-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;

    width: 100% !important;
    box-sizing: border-box !important;

    gap: 10px;
    padding: 7px 0;
    margin: 0 !important;
}

.single-product .ng-trust-row + .ng-trust-row {
    border-top: 1px solid #f5e8dc;
}

.single-product .ng-trust-icon {
    /* Fixed basis so the icon never grows or shrinks */
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px;
    color: #ff6600;
    line-height: 0 !important;
}

.single-product .ng-trust-icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}

.single-product .ng-trust-text {
    /* THE ACTUAL FIX.
       flex: 1 1 auto lets the text claim the remaining width.
       min-width: 0 overrides the flex default of min-width: auto,
       which is what prevented the text from wrapping normally and
       produced the word-per-line stack. */
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;

    font-size: 14.5px;
    color: #3a3a3a;
    line-height: 1.45 !important;

    /* Normal wrapping, in case a theme rule set break-all */
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word;
}

.single-product .ng-trust-text strong {
    font-weight: 700;
    color: #1a1a1a;
}

@media (max-width: 767px) {
    .single-product .ng-trust-block {
        padding: 12px 14px;
    }

    .single-product .ng-trust-text {
        font-size: 14px;
    }
}