/* ---------- mobile.css ---------- */

@media (max-width: 768px) {

  /* HEADER LAYOUT */
  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    position: relative;
  }

  /* HAMBURGER */
  .hamburger {
    display: flex;
    z-index: 10001;
  }

  /* MOBILE NAV PANEL */
  .header-nav {
    position: fixed;
    top: 69px;
    left: 0;
    width: 100%;
    height: calc(100vh - 75px);
    background: #fff;
    overflow-y: auto;
    display: none;
    z-index: 9999;
    padding: 25px 20px;
  }

  .header-nav.active {
    display: block;
  }

  /* MAIN MENU = VERTICAL */
  .nav-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-menu > li {
    width: 100%;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  .nav-menu > li > a {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 18px;
    text-decoration: none;
    color: #000;
  }

  /* REMOVE DESKTOP MEGA MENU STYLES */
  .mega-menu {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    display: none;
    background: transparent;
    box-shadow: none;
    padding: 10px 0 0 0;
  }

  /* OPENED MEGA MENU */
  .has-mega-menu.active .mega-menu {
    display: block;
  }

  /* STACK COLUMNS */
  .mega-menu-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px;
    padding: 0;
  }

  .mega-column,
  .mega-feature {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* SECTION HEADINGS */
  .mega-column h4,
  .mega-feature h4 {
    font-size: 18px;
    margin-bottom: 15px;
  }

  /* SUBMENU LINKS */
  .mega-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mega-column ul li {
    margin-bottom: 10px;
  }

  .mega-column ul li a {
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    color: #555;
    padding: 0;
  }

  /* FEATURED PRODUCT */
  .mega-feature {
    display: none; /* hide on mobile */
  }

  /* UTILITIES */
  .header-utilities {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  /* QUOTE BUTTON */
  .cta-button {
    padding: 8px 12px;
    font-size: 14px;
    width: auto;
    line-height: normal;
    @media (max-width:768px){

  .has-mega-menu .mega-menu{
    display:none;
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    width:100% !important;
  }

}
  }

}


/* MOBILE PRODUCTS DROPDOWN */

@media (max-width: 768px) {

  .has-mega-menu > a {
    position: relative;
    padding-right: 28px;
  }

  /* PLUS ICON */
  .has-mega-menu > a::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    transition: 0.2s ease;
  }

  /* MINUS ICON WHEN OPEN */
  .has-mega-menu.mega-open > a::after {
    content: "−";
  }

}



@media (max-width: 767px) {
  .collection-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .stat-box {
    padding: 20px 25px;
  }
}


@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-links a {
    margin-left: 0;
    margin-right: 15px;
  }
}

@media (max-width: 768px) {
  .testimonials-section {
    padding: 60px 15px;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .testimonial-card {
    padding: 20px;
  }

  .section-title {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .section-subtitle {
    font-size: 14px;
    margin-bottom: 30px;
  }

  .featured-in .brands {
    flex-direction: column;
    gap: 10px;
  }

  .cta-section {
    padding: 50px 15px;
  }

  .cta-container h3 {
    font-size: 20px;
  }

  .cta-container p {
    font-size: 14px;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-buttons .btn {
    width: 100%;
    max-width: 250px;
  }
}


@media (max-width: 767px) {
  .shop-topbar { flex-direction:column; align-items:stretch; gap:12px; }
  .shop-content { flex-direction:column; gap:16px; }
  .shop-filters { display:none; } /* hidden by default on mobile, open via toggle */
  .shop-filters.open { display:block; }
  .grid-inner { grid-template-columns: 1fr; }
  .product-card .thumb { padding-top: 75%; } /* taller on mobile */
  .quickview-left img { width:100%; }
}

/* Start of Global styles for General Pages */
@media (max-width: 600px) {
  .page-container {
    padding: var(--space-md);
  }

  .page-title {
    font-size: 1.8rem;
  }

  .wp-block-quote {
    padding-left: var(--space-sm);
  }
}
/* End of Global styles for General Pages */



/* Start Blog Post Single Post Styles */
@media (max-width: 767px) {
  .single-post-page .entry-title {
    font-size: 1.8rem;
  }

  .single-post-page .entry-header,
  .single-post-page .entry-content,
  .single-post-page .entry-footer {
    padding: 1.2rem;
  }

  .post-navigation {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .single-post-page blockquote {
    padding: 1rem;
  }
}

/* End Blog Post Single Post Styles */



/* ===================================================================
   Start Mobile (max-width: 768px) Product Detial Page Style Overrides
   ================================================================= */
@media (max-width: 768px) {

  /* Force single-column stacking */
  .product-main-grid {
    display: block !important; /* ← Overrides all grid settings */
  }

  .product-gallery,
  .product-summary {
    width: 100% !important;   /* ← Removes desktop width limits */
    max-width: 100% !important;
  }

  /* Add spacing between blocks */
  .product-summary {
    margin-top: 2rem;
  }
}
/* ===================================================================
   End Mobile (max-width: 768px) Product Detial Page Style Overrides
   ================================================================= */

   /* start of Styles for Netflix Bridgerton video modal on hero banner */
@media (max-width: 600px) {
  
  .trailer-content h4 {
    margin: 0;
    font-size: 0.9rem;
    color: #333;
}

.trailer-content p {
    margin-top: 6px;
    font-size: 0.8rem;
    opacity: 0.75;
    color: #333;
}

.yt-play-overlay svg{
  width:60px;
  height:40px;
}


}
/* End of Styles for Netflix Bridgerton video modal on hero banner */


/* start Product Detail Page Buttons Styling Override for Mobile */
@media (max-width: 768px) {
    .custom-top-buttons {
        flex-direction: column;
    }
}
/* End Product Detail Page Buttons Styling Override for Mobile*/


/*===== start custom BNPL (Buy Now Pay Later) comparison widget styling mobile overrides =====*/
@media (max-width: 768px) {
    
  .bnpl-card{
      padding: 5px 10px;
    }

    .bnpl-heading {
      font-size: 10px;
      margin-bottom: 10px;
    }

    .bnpl-left {gap: 6px;}

    .bnpl-left img.bnpl-logo {
    height: 22px;
    border-radius: 2px;
    }

    .bnpl-text .bnpl-main {
    font-size: 10px;
    font-weight: 600;
    }

    .bnpl-text .bnpl-sub {font-size: 9px;}

    .bnpl-price {
      text-align: right;
      font-size: 9px;
      font-weight: 200;
    }

    .bnpl-legal{font-size: 9px;} 

}

/*===== End custom BNPL (Buy Now Pay Later) comparison widget styling mobile overrides =====*/


/*==================================================
Start Hero Mobile
==================================================*/
@media (max-width: 768px) {
/*=========================================================
Hero Mobile
=========================================================*/

.hero{

    min-height:100svh;

    padding:120px 20px 80px;

}

.hero-badge{

    font-size:.75rem;

    margin-bottom:24px;

}

.hero h1{

    font-size:2.4rem;

    margin-bottom:20px;

}

.hero-content h1 {
    color: #fff;
    line-height: 1.3 !important;
}

.hero-subtitle{

    font-size:1rem;

    margin-bottom:40px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons .btn{

    width:100%;

    max-width:320px;

}
}

/*=========================================================
Start WHY US MOBILE
=========================================================*/
@media (max-width: 768px) {
.why-us{

    padding:70px 20px;

}

.section-heading h2{

    font-size:2rem;

}

.section-heading p{

    font-size:1rem;

}

.why-grid{

    grid-template-columns:1fr;

}
}
/*=========================================================
End WHY US MOBILE
=========================================================*/


/*=====================================================
Start Homepage section SHOP CATEGORIES
=====================================================*/
@media (max-width: 680px) {

	.shop-categories {
		padding: 60px 0;
	}

	.shop-categories .container {
		width: min(100% - 24px, 680px);
	}

	.shop-categories .section-heading {
		margin-bottom: 34px;
	}

	.category-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"featured"
			"tall"
			"standard-one"
			"standard-two"
			"standard-three";
		gap: 14px;
	}

	.category-card,
	.category-card-featured,
	.category-card-tall,
	.category-card-standard {
		min-height: 350px;
	}

	.category-overlay {
		padding: 24px;
	}

	.category-overlay h3 {
		font-size: 30px;
	}

	.category-explore {
		font-size: 14px;
	}

}
/*=====================================================
End Homepage section SHOP CATEGORIES
=====================================================*/


/*==============================================================
Start OUR CRAFTSMANSHIP MOBILE (0px and above)
==============================================================*/
@media (max-width: 768px) {
.craftsmanship-section{
    padding:60px 0;
}

.craftsmanship-wrapper{
    display:flex;
    flex-direction:column;
    gap:40px;
}

.craftsmanship-media{
    width:100%;
}

.craftsmanship-image,
.craftsmanship-video{
    width:100%;
    height:320px;
    object-fit:cover;
}

.craftsmanship-content{
    width:100%;
    text-align:center;
}

.craftsmanship-content .section-tag{
    display:block;
    margin-bottom:12px;
}

.craftsmanship-content h2{
    margin-bottom:20px;
}

.craftsmanship-content > p{
    margin:0 auto 35px;
}

.craft-features{
    grid-template-columns:1fr;
    gap:18px;
}

.craft-feature{
    text-align:left;
}

.craftsmanship-content .btn{
    align-self:center;
}
}
/*==============================================================
End OUR CRAFTSMANSHIP MOBILE (0px and above)
==============================================================*/

/*==============================================================
Start TRADE & HOSPITALITY MOBILE (0px and above)
==============================================================*/
@media (max-width: 768px) {
.partnerships-section{
    padding:60px 0;
}

.partnerships-wrapper{
    display:flex;
    flex-direction:column;
    gap:40px;
}

/*--------------------------------------------------------------
Media
--------------------------------------------------------------*/

.partnerships-media{
    width:100%;
}

.partnership-image,
.partnership-video{
    width:100%;
    height:320px;
    object-fit:cover;
}

/*--------------------------------------------------------------
Content
--------------------------------------------------------------*/

.partnerships-content{
    width:100%;
    text-align:center;
}

.partnerships-content .section-tag{
    display:block;
    margin-bottom:12px;
}

.partnerships-content h2{
    margin-bottom:20px;
}

.partnerships-content .section-description{
    margin:0 auto 35px;
    max-width:650px;
}

/*--------------------------------------------------------------
Cards
--------------------------------------------------------------*/

.partnership-cards{
    grid-template-columns:1fr;
    gap:20px;
}

.partnership-card{
    text-align:left;
    padding:24px;
}

.partnership-card h3{
    font-size:1.2rem;
}

.partnership-card p{
    margin-bottom:16px;
}

.partnership-card ul{
    padding-left:20px;
}

.partnership-card li{
    margin-bottom:8px;
}

/*--------------------------------------------------------------
Button
--------------------------------------------------------------*/

.partnerships-content .btn{
    align-self:center;
}
}
/*==============================================================
End TRADE & HOSPITALITY MOBILE (0px and above)
==============================================================*/

/*=====================================================
End Proudly Made in India
=====================================================*/

@media (max-width: 768px) {

	.made-in-india-section {
		padding: 60px 0;
	}

	.made-in-india-section .container {
		width: calc(100% - 24px);
	}

	.made-in-india-layout {
		gap: 30px;

		padding: 38px 22px;

		border-radius: 16px;
	}

	.made-in-india-seal-wrap {
		min-height: 290px;
	}

	.made-in-india-seal-wrap::before {
		width: 250px;
		height: 250px;
	}

	.made-in-india-seal-wrap::after {
		width: 300px;
		height: 300px;
	}

	.made-in-india-seal-image {
		width: min(260px, 88%);
	}

	.made-in-india-content h2 {
		font-size: 40px;
	}

	.made-in-india-benefits {
		grid-template-columns: 1fr;

		gap: 22px;
	}

	.made-in-india-link {
		width: 100%;

		justify-content: center;
	}

}

/*=====================================================
End Proudly Made in India
=====================================================*/