:root {
	--wd-text-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #777777;
	--wd-text-font-size: 14px;
	--wd-title-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(0, 0, 0);
	--wd-alternative-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Manrope", 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: "Manrope", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(251,220,10);
	--wd-alternative-color: rgb(0,0,0);
	--btn-default-bgcolor: rgb(255,204,0);
	--btn-default-bgcolor-hover: rgb(242,177,0);
	--btn-default-color: rgb(0,0,0);
	--btn-default-color-hover: rgb(0,0,0);
	--btn-accented-bgcolor: rgb(255,204,0);
	--btn-accented-bgcolor-hover: rgb(244,187,0);
	--btn-accented-color: rgb(0,0,0);
	--btn-accented-color-hover: rgb(0,0,0);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: rgb(221,51,51);
	--notices-warning-color: #fff;
	--wd-link-color: rgb(145,145,145);
	--wd-link-color-hover: rgb(251,220,10);
}
.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: 800px;
}
: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 bottom;
}
.wd-footer {
	background-color: rgb(10,10,10);
	background-image: url(https://storytellerstore.in/wp-content/uploads/2022/03/about-us-page.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right bottom;
}
html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
	color: rgb(0,0,0);
}
html .wd-nav.wd-nav-main > li > a {
	font-family: "Manrope", Arial, Helvetica, sans-serif;
	font-weight: 600;
	color: rgb(43,43,43);
}
html .wd-nav.wd-nav-main > li:hover > a, html .wd-nav.wd-nav-main > li.current-menu-item > a {
	color: rgb(0,0,0);
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(0,0,0);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(0,0,0);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(0,0,0);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(26,26,26);
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: rgb(26,26,26);
	background-image: none;
}
.woodmart-archive-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,243,234);
	background-image: none;
}
.single-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(245,243,234);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 35px;
--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-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 8px;
}

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

rs-slides :is([data-type=text],[data-type=button]) {
font-family: Manrope !important;
}
rs-slides :is(h1,h2,h3,h4,h5,h6)[data-type=text] {
font-family: Manrope !important;
}

.wd-page-title {
background-color: #0a0a0a;
}

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600;700&display=swap');
/* =========================================================
   STORYTELLER STORE - GLOBAL TEXT COLORS
   ========================================================= */

/* Product titles, prices and categories - GRID/LOOP VIEWS
   (shop page, homepage sections, category & related products).
   Single product page is untouched — reads fine as-is. */
.products .price,
.products .price .amount,
.products .price .woocommerce-Price-amount,
.products .price ins .amount,
.products .price del .amount,
.products .wd-entities-title a,
.products .wd-product-cats a {
    color: #ffffff !important;
}


/* =========================================================
   SHOP / PRODUCT ARCHIVE PAGE TITLE
   ========================================================= */

/* Shop heading */
.page-title .entry-title,
.page-title .page-title__title,
.page-title .title,
.page-title h1 {
    color: #000000 !important;
}

/* Shop page title area text */
.page-title,
.page-title a,
.page-title span {
    color: #000000 !important;
}


/* =========================================================
   NEW ARRIVALS HEADING
   ========================================================= */

.new-arrivals-title,
.new-arrivals-title.elementor-widget-heading,
.new-arrivals-title .elementor-heading-title {
    color: #000000 !important;
    text-align: center !important;
}

.new-arrivals-title .elementor-heading-title {
    display: block !important;
    width: 100% !important;
}


/* =========================================================
   PRODUCT SELECT OPTIONS BUTTON
   ========================================================= */

/* Normal button text */
.product-grid-item .wd-add-btn .add-to-cart-loop,
.product-grid-item .wd-add-btn .add-to-cart-loop span {
    color: #000000 !important;
}

/* Hover button text */
.product-grid-item .wd-add-btn .add-to-cart-loop:hover,
.product-grid-item .wd-add-btn .add-to-cart-loop:hover span,
.product-grid-item .wd-add-btn .add-to-cart-loop:hover::before {
    color: #000000 !important;
}

/* WoodMart hover-standard button */
.wd-hover-standard .wd-add-btn .add-to-cart-loop:hover,
.wd-hover-standard .wd-add-btn .add-to-cart-loop:hover span,
.wd-hover-standard .wd-add-btn .add-to-cart-loop:hover::before {
    color: #000000 !important;
}


/* =========================================================
   SINGLE PRODUCT - HIDE SKU FROM CUSTOMERS
   ========================================================= */

.single-product .product_meta .sku_wrapper {
    display: none !important;
}



/* =========================================================
   STORYTELLER - BLACK HEADER + ANTON TEXT LOGO   [st-header]
   ========================================================= */

/* 1. Black, seamless, no card */
.whb-header,
.whb-main-header,
.whb-header .whb-row,
.whb-header .whb-top-bar,
.whb-header .whb-general-header,
.whb-header .whb-header-bottom {
  background-color: #000 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.whb-header .whb-row { border-bottom: 0 !important; }
.whb-sticked .whb-main-header,
.whb-sticky-shadow .whb-main-header { box-shadow: none !important; }

/* 2. Logo as Anton text */
.whb-header .wd-logo img { display: none !important; }
.whb-header .wd-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.whb-header .wd-logo::after {
  content: "STORYTELLER";
  font-family: 'Anton', 'Arial Narrow', Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  transition: color .3s ease;
}
.whb-header .wd-logo:hover::after { color: #facc15; }
@media (max-width: 1024px) { .whb-header .wd-logo::after { font-size: 24px; } }
@media (max-width: 480px)  { .whb-header .wd-logo::after { font-size: 20px; } }

/* 3. Navigation - Inter 500 / 14 / .1em / uppercase */
.whb-header .wd-nav-main > li > a,
.whb-header .wd-nav-main > li > a .nav-link-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.whb-header .wd-nav-main > li > a:hover .nav-link-text,
.whb-header .wd-nav-main > li.current-menu-item > a .nav-link-text,
.whb-header .wd-nav-main > li.current-menu-ancestor > a .nav-link-text { color: #facc15; }
.whb-header .wd-nav-main > li > a > .nav-link-text::after,
.whb-header .wd-nav-main > li > a > .nav-link-text::before { display: none !important; }
.whb-header .wd-nav-main > li { margin-left: 20px; margin-right: 20px; }

/* 4. Icons - search / account / wishlist / cart */
.whb-header .wd-tools-element > a,
.whb-header .wd-tools-element > a .wd-tools-icon,
.whb-header .wd-tools-element > a .wd-tools-text,
.whb-header .whb-text-element,
.whb-header .whb-text-element * { color: #fff; }
.whb-header .wd-tools-element > a:hover .wd-tools-icon,
.whb-header .wd-tools-element > a:hover .wd-tools-text { color: #facc15; }
.whb-header .wd-cart-number {
  background-color: #facc15 !important;
  color: #000 !important;
  border-color: #facc15 !important;
}

/* 5. Mobile - touch targets, no wrap */
@media (max-width: 1024px) {
  .whb-header .wd-tools-element > a {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
  }
  .whb-header .whb-column { flex-wrap: nowrap; }
}
.wd-side-hidden.wd-side-hidden-nav,
.wd-nav-mobile { background-color: #000; }
.wd-nav-mobile li > a { color: #fff; }
.wd-nav-mobile li > a:hover,
.wd-nav-mobile li.current-menu-item > a { color: #facc15; }

/* 6. Kill the gap under the header on hero pages */
body:has(.st-hero) { background-color: #000; }
body:has(.st-hero) .main-page-wrapper,
body:has(.st-hero) .wd-page-content,
body:has(.st-hero) .site-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: #000 !important;
}
body:has(.st-hero) main.wd-content-layout,
body:has(.st-hero) .content-layout-wrapper {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 7. No white seam under the black header on dark pages */
body.home,
body:has(.st-hero) { background-color: #000; }
body.home .wd-page-wrapper,
body.home .website-wrapper,
body:has(.st-hero) .wd-page-wrapper,
body:has(.st-hero) .website-wrapper { background-color: #000 !important; }
body.home main.wd-content-layout { padding-top: 0 !important; }

/* 8. Desktop dropdown (Shop mega-menu) - black bg, white text, matches hero */
@media (min-width: 1025px) {
  .whb-header .wd-nav-main .sub-menu,
  .whb-header .wd-nav-main .dropdown-menu {
    background-color: #000 !important;
    border-color: #000 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.4) !important;
  }
  .whb-header .wd-nav-main .sub-menu a,
  .whb-header .wd-nav-main .dropdown-menu a {
    color: #fff !important;
  }
  .whb-header .wd-nav-main .sub-menu a:hover,
  .whb-header .wd-nav-main .dropdown-menu a:hover {
    color: #facc15 !important;
  }
}
/* /[st-header] */


/* =========================================================
   STORYTELLER - FOOTER  [st-footer]   v6
   The whole footer is one self-contained block inside the
   Custom HTML widget in footer-1. Nothing here styles footer
   CONTENT - that all lives in the block. These rules only get
   the theme out of its way: full bleed, no container, no
   padding, unused columns gone.
   ========================================================= */
.wd-footer{padding:0!important;margin:0!important;background:#000!important;border:0!important;overflow:hidden}
.wd-footer::before,.wd-footer::after{content:none!important;display:none!important}
.wd-footer .container.main-footer{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important}
.wd-footer .footer-sidebar{display:block!important;margin:0!important;padding:0!important;gap:0!important}

/* column 1 carries the entire footer; 2-5 are unused */
.wd-footer .footer-column-1{display:block!important;width:100%!important;max-width:100%!important;flex:0 0 100%!important;padding:0!important;margin:0!important}
.wd-footer .footer-column-2,.wd-footer .footer-column-3,
.wd-footer .footer-column-4,.wd-footer .footer-column-5{display:none!important}

/* the widget itself is a transparent shell */
.wd-footer .footer-column-1 .widget{margin:0!important;padding:0!important;border:0!important;background:none!important;max-width:100%!important}
.wd-footer .footer-column-1 .widget-title{display:none!important}
.wd-footer .footer-column-1 .textwidget,
.wd-footer .footer-column-1 .custom-html-widget{margin:0!important;padding:0!important}
/* /[st-footer] */

/* =========================================================
   HERO - dissolve the model cutout into the black instead of
   showing the hard crop line at the bottom.   [st-herofade]
   ========================================================= */
.st-hero .st-hero__img{
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.6) 80%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.6) 80%,rgba(0,0,0,0) 100%);
}
@media (max-width:767px){
  .st-hero .st-hero__img{
    -webkit-mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.5) 76%,rgba(0,0,0,0) 96%);
    mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.5) 76%,rgba(0,0,0,0) 96%);
  }
}
/* /[st-herofade] */

/* =========================================================
   STORYTELLER - NEW ARRIVALS SECTION   [st-new-arrivals]
   Sits between hero and footer. Matches hero: black bg,
   Anton heading, brand yellow accent, product grid restyled
   from WooCommerce default to the premium dark aesthetic.
   ========================================================= */

.st-new-arrivals {
  background-color: #000 !important;
  padding-top: clamp(48px, 8vw, 96px) !important;
  padding-bottom: clamp(48px, 8vw, 96px) !important;
}

.st-new-arrivals-title,
.st-new-arrivals-title .elementor-heading-title {
  font-family: 'Anton','Arial Narrow',Impact,sans-serif !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  text-align: center !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  line-height: 1.05 !important;
  margin-bottom: 8px !important;
}
.st-new-arrivals-title .st-accent { color: #facc15 !important; }

.st-new-arrivals-sub {
  font-family: 'Inter', sans-serif !important;
  color: rgba(255,255,255,.65) !important;
  text-align: center !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: clamp(28px, 4vw, 48px) !important;
}

/* Product grid - dark premium restyle */
.st-new-arrivals-products ul.products { background: transparent !important; }
.st-new-arrivals-products ul.products li.product {
  background: #0d0d0d !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  transition: border-color .3s ease, transform .3s ease !important;
}
.st-new-arrivals-products ul.products li.product:hover {
  border-color: #facc15 !important;
  transform: translateY(-4px) !important;
}
.st-new-arrivals-products ul.products li.product img { border-radius: 0 !important; }
.st-new-arrivals-products ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Inter', sans-serif !important;
  color: #fff !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.st-new-arrivals-products ul.products li.product .price {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: #facc15 !important;
}
.st-new-arrivals-products ul.products li.product .price ins { color: #facc15 !important; }
.st-new-arrivals-products ul.products li.product .price del { color: rgba(255,255,255,.4) !important; }
.st-new-arrivals-products ul.products li.product .button {
  background: #facc15 !important;
  color: #000 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  border-radius: 2px !important;
}
.st-new-arrivals-products ul.products li.product .button:hover { background: #fff !important; }

/* Responsive: 4 → 3 → 2 columns */
@media (max-width: 1024px) {
  .st-new-arrivals-products ul.products { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 767px) {
  .st-new-arrivals-products ul.products { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
  .st-new-arrivals-products ul.products li.product .woocommerce-loop-product__title { font-size: 12px !important; }
}
/* /[st-new-arrivals] */@media (max-width: 576px) {
	/* =========================================
   STORYTELLER - MOBILE SINGLE PRODUCT
   DESCRIPTION TAB
   ========================================= */

.single-product .woocommerce-tabs .tab-title-description {
    color: #2B2B2B !important;
}

.single-product .woocommerce-tabs .tab-title-description .wd-accordion-title-text,
.single-product .woocommerce-tabs .tab-title-description .wd-accordion-title-text span {
    color: #2B2B2B !important;
}

.single-product .woocommerce-tabs .tab-title-description .wd-accordion-opener {
    color: #2B2B2B !important;
}

/* =========================================
   STORYTELLER - MOBILE BOTTOM NAVBAR
   Black bar, white icons
   ========================================= */

body .wd-toolbar,
body .woodmart-toolbar {
    background-color: #000000 !important;
}

body .wd-toolbar .wd-tools-element > a,
body .woodmart-toolbar .wd-tools-element > a {
    color: #ffffff !important;
}
}

