:root {
	--wd-text-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(0,0,0);
	--wd-text-font-size: 14px;
	--wd-title-font: "Oswald", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: rgb(36,36,36);
	--wd-entities-title-font: "Lora", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 400;
	--wd-entities-title-color: rgb(36,36,36);
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Playfair Display", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 800;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(114,86,73);
	--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(62,39,35);
	--wd-alternative-color: rgb(93,64,55);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: #3E2723;
	--btn-accented-bgcolor-hover: rgb(107,79,65);
	--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: url(https://www.jacketdesigner.com/wp-content/uploads/2021/08/shoes-promo-popup.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 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 center;
}
.wd-footer {
	background-color: rgb(255,255,255);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
: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-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: 0px;
}

@media (min-width: 1222px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}


.wd-page-title {
background-color: rgb(62,39,35);
}

/* Fix for product tabs overlapping issue */
.wd-nav-tabs-wrapper {
    position: relative !important;
    z-index: 999 !important;
}

ul.wc-tabs {
    position: relative !important;
    z-index: 999 !important;
}
/* END Fix for product tabs overlapping issue */

.button-wrapper #chart-button, .button-wrapper .md-size-chart-btn {
  color: #fff;
}

.scfw-size-chart-main .button.md-size-chart-btn {
  background-color: #3E2723;
  border-radius: 5px;
}
.button.md-size-chart-btn:hover {
  background-color: #5D4037 !important;
}

.scfw-size-chart-main {
  display: table-cell;
  width: 50%;
	padding-right: 8px;
}
.scfw-size-chart-main .md-size-chart-btn {
  display: flex;
}

div#md-size-chart-modal .remodal-close {
  color: #fff;
	float: right;
  position: fixed;
	background-color: #3E2723;
}
.scfw_size-chart-details-tab {
position:relative;
}


/* FAQ */

/* ACTIVE (selected) tab */
ul.vc_tta-tabs-list li.vc_tta-tab.vc_active a {
  background-color: #3E2723 !important;
  color: #ffffff !important;
	border: none !important;
}

/* INACTIVE (non-selected) tabs */
ul.vc_tta-tabs-list li.vc_tta-tab a {
  background-color: #F5EDE5 !important;
  color: #000000 !important;
	border: none !important;
}

/* Mobile View - ACTIVE Accordion Tab */
.vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-title > a {
  background-color: #3E2723 !important;
  color: #ffffff !important;
	border: none !important;
}

/* Mobile View - INACTIVE Accordion Tabs */
.vc_tta.vc_general .vc_tta-panel .vc_tta-panel-title > a {
  background-color: #F5EDE5 !important;
  color: #000000 !important;
	border: none !important;
}




/* 1. Default FAQ item background */
.custom-faq .wd-accordion-item {
  background-color: #EDE7E3; /* Light brown */
  border: 1px solid #D7CCC8;
	margin-bottom: 12px;
  transition: background-color 0.3s ease;
}

/* 2. Title padding + layout */
.custom-faq .wd-accordion-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* 3. Default question text */
.custom-faq .wd-accordion-title-text span {
  color: #000000;
  font-weight: 500;
  transition: color 0.3s ease;
}

/* 4. Hover effect ONLY changes background */
.custom-faq .wd-accordion-title:hover {
  background-color: #D7CCC8;
}

/* ✅ 5. CLICKED state: Background + Text color change */
.custom-faq .wd-accordion-title.wd-active {
  background-color: #3E2723 !important;
}

.custom-faq .wd-accordion-title.wd-active .wd-accordion-title-text span {
  color: #FFFFFF !important;
}

/* 6. Answer content (stays white) */
.custom-faq .wd-accordion-content {
  background-color: #FFFFFF;
  color: #000000;
  padding: 16px 20px;
  border-top: 1px solid #D7CCC8;
}

/* ✅ Arrow Styling Begins Here */

/* Arrow Container */
.custom-faq .wd-accordion-opener {
  margin-left: 10px;
  display: inline-block;
}

/* Default Arrow Style */
.custom-faq .wd-accordion-opener::before {
  color: #4E342E; /* Dark brown */
		font-size: 12px;
	font-weight: bold;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover Arrow Color */
.custom-faq .wd-accordion-title:hover .wd-accordion-opener::before {
  color: #3E2723; /* Darker on hover */
}

/* Active (Opened) Arrow Style */
.custom-faq .wd-accordion-title.wd-active .wd-accordion-opener::before {
  color: #FFFFFF; /* White on dark background */
}


@media (max-width: 600px) {
  .custom-faq .wd-accordion-title,
  .custom-faq .wd-accordion-content {
    padding: 10px 15px;
  }

  .custom-faq .wd-accordion-item {
    margin-bottom: 6px;
  }
}

/* لائٹ ایفیکٹ کے لیے مین کنٹینر کو تیار کرنا */
.promo-banner{
    position: relative;
    overflow: hidden;
}

/* یہ کوڈ ایک نقلی (Pseudo) چمکتی ہوئی لائٹ بنائے گا */
.promo-banner::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    transform: skewX(-25deg);
}

/* جب ماؤس اوپر آئے گا تو لائٹ تیزی سے دائیں طرف گزرے گی */
.promo-banner:hover::before {
    animation: shine .75s;
}

/* لائٹ کی حرکت (Animation) کا سائز اور رفتار */
@keyframes shine {
    100% {
        left: 125%;
    }
}

/* Adds letter-spacing to marquee text  */
.wd-marquee-item {
    letter-spacing: 2px !important;
}


/* Premium Smooth Pointing Hint for Before/After Slider */
.wd-compare-img-wrapp::before {
    content: "Drag the slider to compare \2192";
    display: block;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #555555; /* Thora dark aur solid color takay prominent rahay */
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    /* Sirf smooth movement wali animation, opacity hamesha full rahegi */
    animation: smoothSlide 2s infinite ease-in-out;
}

/* Elegant sliding animation without opacity drop */
@keyframes smoothSlide {
    0% { transform: translateX(0px); }
    50% { transform: translateX(10px); } /* 10px right ki taraf ishara karega */
    100% { transform: translateX(0px); }
}


/* Add to Cart Button Shaking Animation */
.single_add_to_cart_button {
    animation: horizontal-shaking 1.5s infinite;
}

/* Keyframes for the shaking effect */
@keyframes horizontal-shaking {
    0% { transform: translateX(0); }
    10% { transform: translateX(5px); }
    20% { transform: translateX(-5px); }
    30% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}



/* Toggle Buttons Wrapper */
.custom-size-toggle-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

/* Toggle Buttons Style */
.size-toggle-btn {
    cursor: pointer;
    padding: 6px 15px;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid #3e2723;
    background-color: #fff;
    color: #000;
    transition: all 0.3s ease;
}

/* Left Button (Inches) Radius */
.size-toggle-btn.btn-in {
    border-radius: 5px 0 0 5px;
    border-right: none;
}

/* Right Button (CM) Radius */
.size-toggle-btn.btn-cm {
    border-radius: 0 5px 5px 0;
}

/* Active State */
.size-toggle-btn.active {
    background-color: #3e2723;
    color: #fff;
}

/* Change the Size Chart header background color */
#size-chart.classic tr th {
  background: #3e2729 !important;
}

/* 1. Row Hover: Ek refined, subtle dark-on-light feel */
#size-chart.classic tr:hover {
    background-color: #f2e9e8 !important; /* Bohat hi halka warmth touch, almost white-brown */
		transition: all 0.3s ease-in-out;
}

/* 2. Cell Hover: Focus ke liye primary color ka use */
#size-chart.classic tr td:hover {
    background-color: #3e2723 !important; /* Primary color */
    color: #ffffff !important; /* Text white ho jayega, jo bohot sharp lagega */
    font-weight: 600; /* Font thoda bold ho jayega for clarity */
    transition: all 0.2s ease;
}

/* --- Desktop Styles (Jo pehle se set hain) --- */
table#size-chart.classic tr th {
    background-color: #3e2729 !important;
    color: #ffffff !important;
}

#size-chart.classic tr:hover {
    background-color: #f2e9e8 !important;
    transition: all 0.3s ease-in-out;
}

#size-chart.classic tr td:hover {
    background-color: #3e2723 !important;
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}
/* --- Mobile Optimized Styles for Size Chart (Responsive) --- */
@media only screen and (max-width: 600px) {
    /* Toggle buttons ka alignment */
    .custom-size-toggle-wrapper {
        justify-content: center;
        margin-bottom: 10px;
    }
    
    .size-toggle-btn {
        padding: 4px 10px !important;
        font-size: 12px !important;
    }
}
/* --- SAFE Desktop Modal Width & Fit Fix --- */
@media only screen and (min-width: 900px) {
    /* 1. White Popup Box ko accurately wide karna */
    div#md-size-chart-modal {
        max-width: 980px !important; 
        width: 95% !important;
    }

    /* 2. Table ko zabardasti box ke andar rakhna */
    #size-chart.classic {
        width: 100% !important;
        table-layout: fixed !important; /* Ye table ko box se bahar jane se rokega */
    }

    /* 3. Headings ko properly adjust karna */
    #size-chart.classic th {
        font-size: 11px !important; 
        padding: 10px 2px !important;
        white-space: normal !important; /* Text ko 2 line mein todne ke liye */
        word-wrap: break-word !important;
        line-height: 1.2 !important;
    }

    /* 4. Cells ko set karna */
    #size-chart.classic td {
        font-size: 13px !important;
        padding: 8px 2px !important;
    }
}

/* ================================================== */
/* MEN's SIZE GUIDE */
/* ================================================== */

/* Grid Layout (Always 2 Columns) */
.jdsg-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    margin-bottom: 25px; 
}

.jdsg-figure { margin: 0; }

.jdsg-label { 
    text-align: center; 
    font-weight: 600; 
    font-size: 15px; 
    color: #3e2723; 
    margin-bottom: 8px; 
}

/* Magnifying Glass Hover Effect */
.jdsg-zoom {
    overflow: hidden; 
    border-radius: 8px; 
    cursor: grab;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); 
    background: #fff;
    border: 1px solid #eee;
}

.jdsg-zoom img {
    width: 100%; 
    display: block; 
    transition: transform 0.15s ease-out; 
}

/* Lightbox Styling */
.jdsg-lightbox {
    display: none; 
    position: fixed; 
    z-index: 999999; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.85); 
    align-items: center; 
    justify-content: center; 
    cursor: zoom-out;
}

.jdsg-lightbox img { 
    max-width: 90%; 
    max-height: 90%; 
    border-radius: 8px; 
    box-shadow: 0 0 25px rgba(0,0,0,0.5); 
}

/* Mobile Responsive Fix */
@media only screen and (max-width: 600px) {
    .jdsg-grid { gap: 10px; }
}

/* FAQ Accordion Styling (Isolated & Corrected) */
.jdsg-faq details {
  background: var(--jdsg-paper-soft, #f8f5f2); 
  border: 1px solid var(--jdsg-border, #e8e1da);
  border-radius: 10px; 
  margin-bottom: 8px; 
  overflow: hidden;
}

.jdsg-faq summary {
  list-style: none; 
  cursor: pointer; 
  padding: 14px 18px;
  font-weight: 600; 
  font-size: 13px; 
  letter-spacing: .3px; 
  text-transform: uppercase;
  color: var(--jdsg-primary, #3e2723); 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  transition: background .2s ease, color .2s ease;
}

.jdsg-faq summary::-webkit-details-marker { display: none; }

.jdsg-faq summary::after {
  content: ''; 
  width: 9px; 
  height: 9px;
  border-right: 1.6px solid currentColor; 
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); 
  transition: transform .25s ease; 
  flex-shrink: 0; 
  margin-left: 12px;
}

.jdsg-faq details[open] summary::after { transform: rotate(225deg); }

.jdsg-faq details:hover summary { background: #efe7df; }

.jdsg-faq details[open] summary { 
  background: var(--jdsg-primary, #3e2723); 
  color: #fff; 
}

.jdsg-faq-body { 
  display: grid; 
  grid-template-rows: 0fr; 
  transition: grid-template-rows .3s ease; 
}

.jdsg-faq details[open] .jdsg-faq-body { grid-template-rows: 1fr; }

.jdsg-faq-body p {
  overflow: hidden; 
  min-height: 0; 
  margin: 0; 
  padding: 16px 18px;
  font-size: 16px; 
  line-height: 1.6; 
  background: #fff;
}


/* 1. Purane text ko design kharab kiye bagair container ke andar hide karna */
.scfw_chart-tab[data-tab="scfw_size-chart-tab-1"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-indent: -9999px !important; /* Yeh trick text ko slide kar ke chupa degi bina design chhede */
    overflow: hidden;
}

/* 2. Naye text ko uski jagah set karna aur baqi saari styling auto-inherit karna */
.scfw_chart-tab[data-tab="scfw_size-chart-tab-1"]::before {
    content: "Size Chart" !important;
    text-indent: 0 !important;      /* Naye text ko wapis center me lana */
    font-size: var(--tab-font-size, 14px) !important; /* Plugin ka default font size auto pick hoga */
    color: inherit !important;       /* Active, Inactive, aur Hover ka color khud ba khud chalega */
    font-weight: inherit !important; /* Font weight bhi plugin ka hi apply hoga */
    display: inline-block !important;
}

/* Delivery Time CSS */

    .jd-shipping-partners { padding: 20px; font-family: Arial, Helvetica, sans-serif; }
    .jd-logo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; max-width: 600px; margin-left: auto; margin-right: auto; }
    .jd-logo-card { background: #fff; border-radius: 14px; padding: 20px; display: flex; align-items: center; justify-content: center; height: 140px; border: 1px solid #ececec; transition: .3s ease; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
    .jd-logo-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
    .jd-logo-card img { max-width: 100%; max-height: 80px; object-fit: contain; filter: grayscale(100%); opacity: .9; transition: .3s; }
    .jd-logo-card:hover img { filter: none; opacity: 1; }
@media(max-width: 480px) { .jd-logo-card { height: 110px; } }


/* ================================
   CUSTOM LEATHER INTRO SECTION
================================ */

.custom-intro-section{
max-width:1280px;
margin:45px auto 90px;
padding:0 15px;
}

/* ================================
   IMAGE
================================ */

.custom-intro-image{
overflow:hidden;
border-radius:18px;
}

.custom-intro-image img{
display:block;
width:100%;
border-radius:18px;
box-shadow:0 18px 40px rgba(0,0,0,.10);
transition:all .35s ease;
}

.custom-intro-image:hover img{
transform:scale(1.03);
box-shadow:0 28px 60px rgba(0,0,0,.16);
}

/* ================================
   BADGE
================================ */

.custom-badge{
display:inline-block;
padding:7px 16px;
background:#f8f6f5;
border:1px solid rgb(62,39,35);
border-radius:50px;
font-size:12px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
color:rgb(62,39,35);
line-height:1.2;

}

/* ================================
   HEADING
================================ */

.custom-heading{
margin-top:18px;
margin-bottom:18px;
font-size:42px;
font-weight:800;
line-height:1.2;
color:#222;
}

.custom-heading span{
color:rgb(62,39,35);

}

/* ================================
   PARAGRAPH
================================ */

.custom-paragraph{
font-size:17px;
line-height:1.9;
color:#555;
margin-bottom:18px;
}

.custom-paragraph strong{
color:#222;
font-weight:700;
}

/* ================================
   INFO BOX
================================ */

.custom-info-box{

margin-top:25px !important;
padding:18px 22px !important;
background:#fbfaf9 !important;
border-left:4px solid rgb(62,39,35) !important;
border-radius:12px !important;
box-shadow:none !important;
color:#555;
font-size:15px;
line-height:1.8;
}

.custom-info-box strong{
color:#222;
}

/* Remove WPBakery default styles */
.custom-info-box.vc_message_box{
background-image:none;
}

/* ================================
   BUTTON
================================ */

.custom-btn .vc_btn3{
background:rgb(62,39,35) !important;
border-color:rgb(62,39,35) !important;
color:#fff !important;
font-weight:700;
font-size:15px;
padding:14px 30px;
border-radius:8px;
transition:all .35s ease;
}

.custom-btn .vc_btn3:hover{
background:#222 !important;
border-color:#222 !important;
transform:translateY(-3px);
}

/* ================================
   MOBILE
================================ */

@media(max-width:991px){
.custom-heading{
font-size:34px;
}

.custom-intro-section{
margin:40px auto 70px;
}
}
@media(max-width:767px){
.custom-heading{
font-size:28px;
}

.custom-paragraph{
font-size:15px;
line-height:1.8;
}

.custom-btn .vc_btn3{
width:100%;
justify-content:center;
}
}
@media (max-width: 576px) {
	.button.md-size-chart-btn {
  font-size: x-small;
}
}