/*
 Theme Name: K-Reine
 Theme URI:  https://k-reine.com
 Author:     DIV
 Version:    1.0.0
 Template: storefront
 Text Domain: k-reine-shop
*/

html, body {
  font-family: 'Google Sans', sans-serif;
}

.headerWrap {
  top:auto;
}
.headerWrap header {
  width: 100%;
  background:#fff !important;
  padding:1.2em 1em !important;
  
}
.headerWrap header .logoWrap {
    max-width: 50%;
}

/* hide all child lists by default */
.menu-item-with-childs > .menu-item-childs {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  /* show when the parent has .open */
  .menu-item-with-childs.open > .menu-item-childs {
    display: block;
  }
  
  /* make the parent look clickable */
  .menu-item-with-childs > strong {
    cursor: pointer;
    user-select: none;
  }
 
  .innerPages .mainWrap .contentArea .productOverview.SameRangeProducts ul {
   
    justify-content: normal;
  }

  .showDetails figure img {
    /* height:107px; */
  }
  .banner .bannerContent h1 {
    color:#efefef;
  }

  .banner {
    height:69vh;
  }
.add-to-cart-success {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #27ae60;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 15px;
  z-index: 99999;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.attachment-woocommerce_thumbnail {
  margin:0 auto;
}
.innerPages .productCardsWrap .productCard h2 {
  font-size: 1.2rem;
}
.productActions form.cart .ajax_add_to_cart, .product_type_simple, .add_to_cart_button {
    background: #0f1527;
    color: #fff;
    border: 1px solid #0f1527;
    padding: 15px 30px;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    border-radius: 0;
    margin-bottom: 1rem;
}

.productActions form.cart .ajax_add_to_cart:hover, .product_type_simple:hover, .add_to_cart_button:hover {
  background: #fff;
  color: #0f1527;
}

.footerLogo img {
  margin:0 auto;
}

.productActions form.cart {
  display: flex;
}

.productActions form.cart {
  display: flex;
}
.productActions form.cart .ajax_add_to_cart {
  margin-top:0;
  margin-left: 1rem;
}

.woocommerce-message .button {
  margin-top:0;
}

.productLayout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.productSticky {
  position: sticky;
  top: 80px;
  width: 50%;
}

.contentArea {
  width: 50%;
}

.mobileTitle {
  display: none;
}

.productCardsWrap {
  margin-top:0;
}


@media (max-width: 992px) {
  .productLayout {
      flex-direction: column;
  }
  .productSticky {
      position: relative;
      width: 100%;
      top: 0;
  }
  .contentArea {
      width: 100%;
  }
  .mobileTitle {
      display: block;
      margin-top: 20px;
      font-size: 24px;
      font-weight: bold;
  }
}

/* Make slider container fill banner */
.banner .swiper {
  width: 100%;
  height: 100%;
}

/* Each slide is now positioned like your old banner */
.banner .swiper-slide {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
}

/* Fix figure inside slide */
.banner .swiper-slide figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.banner .swiper-slide figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Banner content stays centered */
.banner .swiper-slide .bannerContent {
  position: absolute;
  width: 100%;
  height: 90%;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  flex-direction: column;
  z-index: 3;
}

/* Keep your styling */
.banner .bannerContent h1 {
  max-width: 70%;
  margin: 0 auto;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    color: #fff;
}

.banner .banner-slide {
  position: relative;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
}

.banner .banner-slide video,
.banner .banner-slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* The key */
  transform: translate(-50%, -50%);
}
.banner .bannerContent {
  justify-content: flex-end !important;
  padding-bottom: 80px; /* adjust height of bottom area */
}

/* DARK TRANSPARENT OVERLAY ON TOP OF EACH SLIDE */
.banner .banner-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      to top,
      rgba(0,0,0,0.6) 0%,      /* darkest at bottom */
      rgba(0,0,0,0.4) 40%,     /* soft fade */
      rgba(0,0,0,0.0) 100%     /* fully transparent at top */
  );
  z-index: 1;
  pointer-events: none; /* click through */
}

/* Bring text ABOVE overlay */
.banner .bannerContent {
  position: absolute;
  z-index: 2; /* higher than overlay */
  width: 100%;
  height: 90%;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end !important;
  padding-bottom: 80px;
  text-align: center;
}

.bannerInnerPage {
  position: relative;
  height: 60vh;              /* adjust as needed */
  min-height: 350px;
  overflow: hidden;
}

.bannerInnerPage figure {
  position: absolute;
  inset: 0;
}

.bannerInnerPage figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONTENT AT BOTTOM */
.bannerInnerContent {
  position: absolute;
  bottom: 40px;                  /* adjust spacing from bottom */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  text-align: center;
  color: #fff;                    /* ensure visibility */
  z-index: 2;
}

/* Optional overlay for readability */
.bannerInnerPage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(0,0,0,0.6) 0%,      /* darkest at bottom */
      rgba(0,0,0,0.4) 40%,     /* soft fade */
      rgba(0,0,0,0.0) 100%     /* fully transparent at top */
  );
  z-index: 1;
  pointer-events: none;        /* optional */
}

/* Make text visible above overlay */
.bannerInnerContent * {
  position: relative;
  z-index: 3;
}

.storefront-sorting {
  display: none;
}

.bannerInnerContent h1 {
  color:#fff;
}

/* .hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(
      to top,
      rgba(0,0,0,0.60) 0%,
      rgba(0,0,0,0.40) 25%,
      rgba(0,0,0,0.15) 60%,
      rgba(0,0,0,0.00) 100%
  );
} */

.showDetails {
  max-height: 30vh;
  overflow: scroll;
}

.innerPages .mainWrap .contentArea .toggleSection .showDetails {
  max-height: none;
  overflow: scroll;
}
.innerPages .mainWrap .contentArea .toggleSection h2 span {
  top:-1px;
}

.innerPages .blogHero .blogContent { 
  width: auto;
}

.innerPages .blogHero .blogImage {
  width: auto;
  max-height: 400px;
  overflow: hidden;
  border-radius: 6px;

  position: relative; /* REQUIRED for overlay */
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerPages .blogHero .blogImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 🔥 The play button overlay */
.innerPages .blogHero .blogImage .playOverlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 40%,
    rgba(0,0,0,0) 100%
  );

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: 0.25s ease;
}

.innerPages .blogHero .blogImage .playOverlay {
  opacity: 1;
}

.innerPages .blogHero .blogImage .playOverlay svg {
  width: 80px;   /* adjust size */
  height: 80px;
  fill: #fff;
  opacity: 0.9;
  transition: 0.2s ease;
}

.innerPages .blogHero .blogImage:hover .playOverlay svg {
  transform: scale(1.05);
}

.blogArticle p {
  margin-bottom: 1rem;
}

/* Remove bootstrap modal backdrop completely */
.modal.no-backdrop .modal-backdrop {
  display: none !important;
}

/* Remove background dimming */
.modal-backdrop.show {
  opacity: 0 !important;
}

/* Remove modal box shadow + border + background */
.modal.no-backdrop .modal-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Optional: remove padding */
.modal.no-backdrop .modal-content.no-padding {
  padding: 0 !important;
}

/* Optional: prevent fade animation */
.modal.no-backdrop.fade {
  opacity: 1 !important;
  transition: none !important;
}

/* Make sure modal covers the entire screen for clean look */
.modal.no-backdrop {
  background: #000 !important;
}

.bannerInnerContent * {
  color:#fff !important;
}

.bannerInnerContent p {
  font-size: 1.5rem;
}

.bannerInnerContent h1, h1 {
  padding-bottom:1rem;
}

.latestNews ul li figure {
  border-radius: 6px;
}
@media screen and (max-width: 767px) {
  .banner .bannerContent h1 {
      max-width: none;
  }
  .innerPages .blogArticle {
    max-width: 85%;
  }
  .bannerInnerContent p {
    font-size: 1.2rem;
  }
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.3rem;
}

.banner .swiper-slide .bannerContent {
  bottom:25%;
}

.banner .bannerContent h1 {
  font-size: 2.5rem;
  max-width: 47%;
}

.headerWrap .sideMenu ul li {
  margin:0.5rem 0;
}
.headerWrap .sideMenu ul li strong {
  font-size: 1.2rem;
  font-weight: 400;
}

.twoColumnBlock {
  background:#fff;
}

.latestNews ul li h3, .latestNews ul li p {
  text-align: left;
}
.latestNews ul li p {
  font-size: 1rem;
}

.breadcrumbWrap {
  padding: 15px 0;
  font-size: 14px;

  display: flex;
  justify-content: space-between;
  max-width: 92%;
  margin: 0 auto;
  padding-top: 1%;
}

.woocommerce-breadcrumb a {
  text-decoration: none;
  color: #666;
}

.woocommerce-breadcrumb {
  color: #999;
  font-family: 'Google Sans', sans-serif;
}

p {
  color:#000;
  line-height: 1.5;
  font-size: 1rem;
  margin-bottom:1rem;
}

.videoWrap {
  padding:0;
}
.videoWrap h2 {
  font-size: 1.7rem;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 100%;
}

.innerPages .blogArticle {
  padding:0;
  max-width: 100%;
  width: 100%;
}

.communityListing ul li p {
  text-align: left;
  padding:0;
}

.communityListing video {
  border-radius: 6px;
}

.headerWrap .sideMenu ul li {
  margin:0;
  margin-left:5px;
  margin-bottom:5px;
}

.headerWrap .sideMenu ul li a {
  color:#555;
  font-size: 1rem;
  font-family: "Google Sans", sans-serif;
  font-weight: 300;
}

.headerWrap .sideMenu ul li strong {
  line-height: 1.5;
}

.menu-item-with-childs {
  margin-top:5px;
}

ul.menu-item-childs {
  margin-bottom:7px;
}

.headerWrap .sideMenu {
  width:25%;
}

.menu-item {
  margin-bottom:5px;
}

.innerPages .bannerInnerPage {
  height: 79vh;
}

.innerPages .productCardsWrap {
  padding:0;
}

.bannerInnerPage img {
  border-radius: 0;
}

.innerPages .productCardsWrap .productCard h2 {
  font-size: 1rem;
}

.innerPages .mainWrap .contentArea .name {
  font-size:2.3rem;
  margin-bottom: 13px;
}

.productActions {
  margin-top:13px
}

.videoWrap p {
  max-width: 100%;
}

.ep-1 {
  margin-bottom: 11px!important;
}

.allpr a {
  font-size:14px !important;
}

.child-menu-item  {
  margin-bottom:1px!important;
}

.deliveryDetails ul {
  gap: 25px;
}

.banner-slide {
  position: relative;
  overflow: hidden;
}

/* Hidden by default */
.banner-slide .learnMore {
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);

  transition: all 0.3s ease;
}

/* Show on hover */
.banner-slide:hover .learnMore {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bannerInnerContent, .headerWrap .sideMenu ul li a {
  text-transform: capitalize;
}

.b100vh {
  height: 100vh;
}

.menu-item-childs {
  display: none;
}

.menu-item-with-childs.active > .menu-item-childs {
  display: block;
}

.menu-item-childs {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.menu-item-with-childs.active > .menu-item-childs {
  max-height: 500px;
}

.innerPages .mainWrap .contentArea .toggleSection .showDetails.show {
  max-height: 300px;
}

.innerPages .mainWrap .contentArea .productActions {
  border:0;
}

.productActions form.cart {
  margin-bottom: 0;
}

.deliveryDetails {
  padding: 5% 5%;
}

@media screen and (max-width: 767px) {
  .banner .bannerContent h1 {
      font-size: 1.8rem;
      max-width: 90%;
  }

  .b100vh {
      height: auto;
  }

  .singleColumnBlock aside {
    padding-left:0;
  }

  .deliveryDetails ul li figure img {
    margin:0 auto;
  }

  .deliveryDetails ul li p {
    text-align: center!important;
  }

  

  .innerPages .shoppingCart h1 {
    padding-bottom: 1rem;
  }

  .headerWrap .sideMenu {
    width:95%;
  }

  .breadcrumbWrap {
    padding-top: 15px;
  }
  

  
}

.siteHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:20px 40px;
  position:relative;
}

.headerWrap header .logoWrap {
  margin-top:0;
}
.logoWrap{
  flex-shrink:0;
}

.logoWrap img{
  height:30px;
  width:auto;
}

/* NAV TAKES REMAINING SPACE */

.topNav{
  flex:1;
  display:flex;
  justify-content:center;
  border:0;
  padding:0;
}

.topNav ul{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  margin:0;
  padding:0;
  list-style:none;
}

.rightNav{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:18px;
}

.mobileMenuToggle{
  display:none;
}



.topNav a{
  text-decoration:none;
  color:#111;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1px;
  font-weight:600;
}

.topNav li {
	position: relative;
}

.topNav a {
	text-decoration: none;
	color: #111;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
  letter-spacing: 0;
}

.topNav .dropdownMenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	padding: 12px 0;
	box-shadow: 0 8px 25px rgba(0,0,0,0.12);
	display: none;
	z-index: 999;
}

.topNav .dropdownMenu li {
	width: 100%;
}

.topNav .dropdownMenu a {
	display: block;
	padding: 9px 18px;
	white-space: nowrap;
	font-size: 13px;
	text-transform: none;
}

.topNav .hasDropdown:hover .dropdownMenu {
	display: block;
}

.rightNav {
	display: flex;
	align-items: center;
	gap: 18px;
}

.mobileMenuToggle {
	display: none;
	background: none;
	border: 0;
	font-size: 22px;
}

.moreMenu > a {
  white-space: nowrap;
}

.submenuTitle {
  padding: 10px 18px 5px;
  font-size: 12px;
  text-transform: uppercase;
  color: #999;
}


.siteHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:20px 40px;

  position:relative;
  transition:all .3s ease;
}

/* Applied after scrolling */
.siteHeader.is-sticky{
  position:static;
  top:0;
  left:0;
  right:0;

  background:#fff;
  z-index:9999;

  box-shadow:0 2px 15px rgba(0,0,0,.08);
}

.headerWrap{
  width:100%;
  transition:all .3s ease;
}

.headerWrap.is-sticky{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;
  background:#fff;
  box-shadow:0 2px 15px rgba(0,0,0,.08);
}

.hasMegaMenu{
  /* position:static; */
}

.megaMenu{

  position:absolute;

  left:0;
  top:100%;

  width:100%;

  background:#fff;

  padding:30px;

  display:none;

  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

  gap:30px;

  box-shadow:0 10px 30px rgba(0,0,0,.08);

  z-index:9999;

}

.megaMenu{
  position:absolute;
  left:0;
  right:0;
  top:100%;
}

.hasMegaMenu:hover>.megaMenu{
  display:grid;
}

.megaColumn h4{
  margin-bottom:0;
  font-size:15px;
  font-weight:600;
}

.megaColumn h4 a{
  font-size:15px;
  font-weight:600;
}

.megaColumn ul{
  list-style:none;
  padding:0;
  margin:0;
}

.megaColumn li{
  margin-bottom:8px;
}

.megaColumn li a{
  text-transform:none;
  font-size:14px;
  color:#666;
}

.megaColumn ul{
  display:block !important;
  list-style:none;
  margin:0;
  padding:0;
}

.megaColumn li{
  display:block !important;
  width:100% !important;
  margin:8px 0 !important;
}

.megaColumn li a{
  display:block;
}

.megaMenu{
  display:none;
}

.hasMegaMenu:hover > .megaMenu{
  display:grid !important;
}

.megaMenu{

  grid-template-columns:repeat(3,1fr);

}

.megaMenu{
  width:min(800px,95vw);
}

.megaColumn h4{

  font-size:15px;

  font-weight:600;

  margin-bottom:0;

  padding-bottom:10px;

  border-bottom:1px solid #eee;

}

.megaColumn a{

  text-transform:none;

  letter-spacing:0;

  font-weight:400;

  color:#666;

  transition:.2s;

}

.megaColumn a:hover{

  color:#111;

}

@media (max-width:1700px) {
  .siteHeader {
    gap:20px;
  }
  .topNav ul {
    gap:20px;
  }
}

@media (max-width: 1200px) {
	.siteHeader {
		padding: 15px 20px;
	}

	.topNav {
    
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #fff;
		display: none;
		z-index: 999;
		box-shadow: 0 8px 25px rgba(0,0,0,0.12);
	}

	.topNav.active {
		display: block;
	}

	.topNav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: 15px 25px;
	}

	.topNav li {
		width: 100%;
	}

	.topNav a {
		display: block;
		padding: 12px 0;
	}

	.topNav .dropdownMenu {
		position: static;
		box-shadow: none;
		display: block;
		padding: 0 0 0 15px;
	}

	.mobileMenuToggle {
		display: block;
	}
}

@media (max-width:1200px){

  .topNav{
      display:none;
      width:100%;
  }

  .topNav.active{
      display:block;
  }

  .topNav ul{
      flex-direction:column;
      gap:0;
      padding:15px 0;
  }

  .topNav li{
      width:100%;
  }

  .topNav a{
      display:block;
      padding:12px 20px;
  }

  .mobileMenuToggle{
      display:block;
  }
}

body.menu-open{
  overflow:hidden;
}

@media (max-width:1200px){

  .topNav{
    position: fixed !important;
    top: var(--mobile-menu-top, 70px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - var(--mobile-menu-top, 70px)) !important;

    display: none !important;
    background: #fff !important;
    z-index: 9998 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;

    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  }

  .topNav.active{
    display: block !important;
    margin-top:80px !important;
  }

  .topNav > ul{
    display: block !important;
    padding: 20px !important;
    margin: 0 !important;
  }

  .topNav li{
    width: 100% !important;
  }

  .topNav a{
    display: block !important;
    padding: 12px 0 !important;
  }

  .megaMenu,
  .dropdownMenu{
    position: static !important;
    width: 100% !important;
    display: block !important;
    box-shadow: none !important;
    padding: 0 0 0 15px !important;
  }

  .megaMenu{
    grid-template-columns: 1fr !important;
  }

  body.menu-open{
    overflow: hidden !important;
  }
}


.bannerInnerPage figure{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.bannerInnerPage figure img,
.bannerInnerPage figure video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}