/*
Theme Name:Broadway Breakthrough
Author: unavoided
Version: 1.1
Text Domain: bb
*/

* {margin:0; padding:0; font-family: "Zalando Sans", sans-serif;  font-style: normal;  }
html {background:#fff; height:100%; overflow-x: hidden;}
body {height:100%;}

/*header*/
header.main {  z-index: 1001; height: 95px; width: 94%; padding:0 3% ;  background: #16222a; }
header.main .menu-btn { display: none;}
header.main .menu-icon {display: none;}

header main, .banner main, .woocommerce main, .woocommerce-page main { margin: auto; position: relative;  max-width: 1200px;	width: 94%;}
header main {padding: 0 !important}

header.main .logolink {display: inline-block; width: 218px; position: absolute; }
header.main .logolink img { padding: 0; height: 100px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease;  transition: all 0.5s ease;}

header.main .main-menu {height: 95px;display: flex;justify-content: flex-end;align-items: center;}
/* Top-level UL — works whether .main-menu is a wrapper OR the UL itself */
header.main .main-menu > ul,
header.main ul.main-menu{  display: flex;  align-items: center;  justify-content: flex-end;  gap: 20px;  height: 95px;  margin: 0;  padding: 0;  list-style: none;}
/* Submenus */
header.main .main-menu ul ul,header.main ul.main-menu ul{  display: block;  height: auto;}
/* Top-level */
header.main .main-menu > ul > li,header.main ul.main-menu > li{  position: relative;  display: flex;  align-items: center;  margin: 0;  padding: 0;  line-height: normal;}


header.main .main-menu li a {color: #fff; font-size: 16px; text-decoration: none; font-weight: 200;}
header.main .main-menu li:hover a{text-decoration: underline;}
header.main .main-menu .register a {background: #c71d66; border-radius: 3.40282e38px; padding: 10px 20px; font-weight: 500; }
header.main .main-menu .cart {width: 36px; padding: 0;}
header.main .main-menu .cart a {font-size: 0; background-image: url(images/cart.png); background-repeat: no-repeat; background-position: center center; background-size: contain; display: block; height: 24px; width: 36px;}

.menu-close {visibility: hidden;}

.banner {background: url(images/banner.jpg); background-size: cover;  display: flex;align-items: center; justify-content: left; min-height: 320px;     }
.wootitle { color: #fff; text-transform: uppercase; margin-bottom: 0}

h1 {font-weight: 700; font-size: 36px; color:  #cf3f7d; margin-bottom: 3%; text-transform: uppercase;}
h2 {color:  #cf3f7d;}
p{margin-bottom: 3%;}
/*woo*/
.woocommerce #primary main,  .woocommerce-page main {padding: 3%;}
.woocommerce .woocommerce-breadcrumb {  margin-bottom: 3% !important; }

/* Ensure parent LI can position submenu */
header.main .main-menu li { position: relative; }

/* The big white dropdown panel */
.bb-submenu-panel {  position: absolute;  top: 40px;    left: 0;  width: 320px;  background: #fff;  border-radius: 12px;  overflow: hidden;  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  padding: 0;  z-index: 9999;  text-align: left;    opacity: 0;  visibility: hidden;  pointer-events: none;  transform: translateY(8px);  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;}

header.main .main-menu li:hover > .bb-submenu-panel {opacity: 1;  visibility: visible;  pointer-events: auto;  transform: translateY(0);}
.bb-submenu-panel > li { list-style: none;  display: block !important; line-height: 24px !important; padding: 0!important;}
.bb-submenu-panel > li:not(.bb-menu-card) > a {  display: block;  padding: 12px;  font-size: 16px;  color: #000 !important;  text-decoration: none !important;  border-bottom: 1px solid #eee;}
/* Card rows */
.bb-submenu-panel > li.bb-menu-card > a {  display: flex;  align-items: center;  justify-content: space-between;  gap: 18px;  padding: 12px;  text-decoration: none;  border-bottom: 1px solid #eee;}
.bb-card-text {  display: block;}
.bb-card-title {  display: block;  font-size: 14px;  line-height: 1.1;  color: #111;}
.bb-card-subtitle {  display: block;  font-size: 12px;  color: #c71d66; }
.bb-card-media img {  width: 110px;  height: 50px;  object-fit: cover;  border-radius: 12px;}
/* Hover feel */
.bb-submenu-panel a:hover {  background: rgba(0,0,0,.03);}

/* arrow on top-level items that have children */
header.main .main-menu li.menu-item-has-children > a{	position: relative;	padding: 10px 28px 10px 0;  }
    /* Default: arrow OWN */
header.main .main-menu li.menu-item-has-children > a::after{	content: "";	position: absolute;	right: 8px;	top: 50%;	width: 8px;	height: 8px;	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;	transform: translateY(-50%) rotate(45deg);	transition: transform .18s ease;  }
    /* Hover/focus-within: arrow UP */
header.main .main-menu li.menu-item-has-children:hover > a::after,header.main .main-menu li.menu-item-has-children:focus-within > a::after{	transform: translateY(0%) rotate(-135deg);  }
  
  
 /*WOOOOOOOOO*/ 
 /* Price */
 .woocommerce div.product p.price,
 .woocommerce div.product span.price{   font-size: 22px;   font-weight: 600;   margin: 0 0 14px 0; }
  /* Short description / note text */
 .woocommerce div.product .woocommerce-product-details__short-description{   margin: 12px 0 18px 0;   font-size: 16px;   line-height: 1.55;   opacity: .9; }
  /* Variations */
 .woocommerce div.product form.cart{   margin-top: 18px; }
 .woocommerce div.product table.variations{   margin: 0 !important;   border: 0; }
 .woocommerce div.product table.variations td, .woocommerce div.product table.variations th{   padding: 10px 0;   border: 0; line-height: 1em !important; }
 .woocommerce div.product table.variations label{   font-weight: 600;   font-size: 14px;   text-transform: uppercase;   letter-spacing: .6px;   opacity: .75;   margin-top: 13px; display: block;  width: 70px;}
  /* Select styling */
 .woocommerce div.product select{   width: 100%;   max-width: 520px;   height: 44px;   padding: 10px 12px;   border-radius: 10px;   border: 1px solid rgba(0,0,0,.18);   background: #fff;
   font-size: 15px;   outline: none; }
   p.price {color: #000 !important}
 .woocommerce div.product select:focus{   border-color: rgba(199,29,102,.7);   box-shadow: 0 0 0 4px rgba(199,29,102,.15); }
  /* Qty + button row */
 .single_variation_wrap {width: 100%;}
  .woocommerce div.product form.cart .quantity{   margin-right: 10px; }
 .woocommerce div.product form.cart .quantity input.qty{   height: 44px;   width: 80px;   border-radius: 10px;   border: 1px solid rgba(0,0,0,.18);   padding: 8px; }
  /* Add to cart button */
 .woocommerce div.product form.cart .single_add_to_cart_button{   height: 44px;   padding: 0 18px;   border-radius: 12px;   border: 0;   background: #c71d66;   color: #fff;   font-weight: 700;
   letter-spacing: .3px;   transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;   box-shadow: 0 10px 20px rgba(199,29,102,.22); }
 .woocommerce div.product form.cart .single_add_to_cart_button:hover{   transform: translateY(-1px);   box-shadow: 0 14px 26px rgba(199,29,102,.28); }
 .woocommerce div.product form.cart .single_add_to_cart_button:active{   transform: translateY(0);   opacity: .95; }
 /* Hide “Clear”  */
 .woocommerce div.product a.reset_variations{   font-size: 13px;   margin-top: 6px;   opacity: .7; } 
  /* Keep qty + button aligned */
 .woocommerce div.product form.cart{   display: flex;   flex-wrap: wrap;   gap: 14px;   align-items: center; }
 /* Make the input look like a modern pill */
 .woocommerce div.product form.cart .quantity input.qty{   width: 92px;   height: 52px;   border-radius: 14px;   border: 1px solid rgba(0,0,0,.14);   background: #fff;   font-size: 16px;
   font-weight: 600;   text-align: center;   padding: 0 12px;   box-shadow: 0 10px 22px rgba(0,0,0,.06);   outline: none; }
  /* Qty on its own row, button on its own row */
 .woocommerce div.product form.cart{   display: flex;   flex-wrap: wrap;   gap: 12px;   align-items: flex-start; }
  .woocommerce div.product form.cart .quantity{   flex: 0 0 100%;   width: 100%;   margin: 0 0 6%!important; }
  /* Fake label */
 .woocommerce div.product form.cart .quantity::before{   content: "QUANTITY";   font-weight: 700;   font-size: 14px;	 text-transform: uppercase;	 letter-spacing: .6px;	 opacity: .75;
  min-width: 90px;	display: inline-block;	float: none; }
  .woocommerce div.product form.cart .quantity input.qty{   width: 120px;     height: 52px; }
  .woocommerce div.product form.cart .single_add_to_cart_button{   flex: 0 0 100%;   width: 100%;   height: 52px; }
  /* Remove the ugly browser spinners */
 .woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
 .woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button{   -webkit-appearance: none;   margin: 0; }
 .woocommerce div.product form.cart .quantity input.qty{   -moz-appearance: textfield; }
  /* Button: full pill, same height, nicer shadow */
 .woocommerce div.product form.cart .single_add_to_cart_button{   height: 52px;   padding: 0 26px;   border-radius: 16px;   font-size: 16px;   font-weight: 800;  box-shadow: 0 14px 26px rgba(199,29,102,.18); }
  /* Button hover/active feels snappy */
 .woocommerce div.product form.cart .single_add_to_cart_button:hover{   transform: translateY(-2px); }
 .woocommerce div.product form.cart .single_add_to_cart_button:active{   transform: translateY(0); }
  /* If Woo disables button (e.g. no variation selected) */
 .woocommerce div.product form.cart .single_add_to_cart_button:disabled,
 .woocommerce div.product form.cart .single_add_to_cart_button.disabled{   opacity: .55;   cursor: not-allowed;   box-shadow: none;   transform: none; }
 
 .wc-block-components-button {   height: 52px;   padding: 0 26px;   border-radius: 16px;   font-size: 16px;   font-weight: 800;  background:  rgba(199,29,102,.99); color: #fff; text-decoration: none; }
 
 .reset_variations {display: none !important;}
 
 /*product content*/ 
 .bb-product-description{   margin-top: 22px;   padding-top: 18px;   border-top: 1px solid rgba(0,0,0,.08);   font-size: 15px;   line-height: 1.6;   opacity: .95;   display: flow-root;	 clear: both; }
  .bb-product-description h2,
 .bb-product-description h3{   margin: 0 0 10px 0;   font-size: 16px;   text-transform: uppercase;   letter-spacing: .6px;   opacity: .75; }
 
 /* On small screens, let the button take the full row */
  @media (max-width: 520px){
	.woocommerce div.product form.cart .quantity{	  width: 100%;	}
	.woocommerce div.product form.cart .quantity input.qty{	  width: 100%;	}
	.woocommerce div.product form.cart .single_add_to_cart_button{	  width: 100%;	  justify-content: center;	}
  }
  
  
 /* =========================
    Footer
    ========================= */
 
.bb-footer{   background: #16222a;   color: #fff;   padding: 60px 3% 40px; }
.bb-footer__inner{   max-width: 1200px;   margin: 0 auto; }
.bb-footer__top{   display: grid;   grid-template-columns: 1fr auto;   gap: 60px;   align-items: start; }
  /* Contact block */
.bb-footer__contact h3{   color: #cf3f7d;   font-size: 18px;   margin-bottom: 12px; }
.bb-footer__contact p{   font-size: 14px;   line-height: 1.6;   opacity: .9; }
.bb-footer__contact a{   color: #fff;   text-decoration: none; } 
.bb-footer__contact a:hover{   text-decoration: underline; }
.bb-footer__spacer{   margin-top: 18px; }
  /* Social icons */
.bb-footer__social{   margin-top: 18px;   display: flex;   gap: 14px; }
.bb-footer__social img{   width: 45px;   height: 45px;   opacity: .9;   transition: opacity .15s ease; }
.bb-footer__social img:hover{   opacity: 1; }
  /* Logos (right) */
.bb-footer__logos{   display: flex;   flex-direction: column;   align-items: flex-end;   gap: 24px; }
.bb-footer__logos img{   max-width: 200px;   height: auto;   height: 200px !important; }
  /* Divider */
.bb-footer__divider{   height: 1px;   background: #cf3f7d;   margin: 15px 0 24px; }
  /* Bottom row */
.bb-footer__bottom{   display: flex;   justify-content: space-between;   flex-wrap: wrap;   gap: 12px;   font-size: 13px;   opacity: .85; }
.bb-footer__links a{   color: #fff;   text-decoration: none; }
.bb-footer__links span{   margin: 0 6px;   opacity: .5; }

.bb-footer__links a:hover{   text-decoration: underline; }
 /* Legal line */
.bb-footer__legal{   margin-top: 12px;   font-size: 12px;   line-height: 1.5;   opacity: .65; }
  /* Mobile */
 @media (max-width: 800px){   
.bb-footer__top{     grid-template-columns: 1fr;   }
.bb-footer__logos{     align-items: flex-start;   }
.bb-footer__bottom{     flex-direction: column;     gap: 8px;   }
 }
 
 /* ===== Off-canvas mobile menu (<= 1024) ===== */
 @media (max-width: 1024px){
header.main{     position: relative;   }
 /* show the hamburger */
header.main .menu-btn{ display: block; position: absolute; opacity: 0; pointer-events: none; }
header.main .menu-icon{     display: inline-flex;     align-items: center;     justify-content: center;     width: 64px;     height: 95px;     cursor: pointer;     position: absolute;
     right: 40px;   /* leaves space for cart on the far right */     top: 0;     z-index: 1101;   }
 /* hamburger lines */
header.main .menu-icon .navicon,
header.main .menu-icon .navicon:before,
header.main .menu-icon .navicon:after{     background: #fff;     content: "";     display: block;     height: 3px;     width: 30px;     border-radius: 3px;     position: relative;
     transition: .2s ease;   }
header.main .menu-icon .navicon:before{ position: absolute; top: -9px; }
header.main .menu-icon .navicon:after{ position: absolute; top: 9px; }
 
/* keep cart top-right */
header.main .main-menu .cart{position: absolute;right: 18px;top: 0;height: 95px;display: flex;align-items: center;z-index: 1103;display: none;}
/* Off-canvas panel */
header.main .main-menu{position: fixed;top: 0;right: 0;height: 100vh;width: min(400px, 86vw);background: #f5f1ec; /* your off-white */padding: 110px 28px 28px;transform: translateX(100%);
transition: transform .25s ease;z-index: 1102;overflow-y: auto;display: block;              /* overrides desktop flex */}
/* Close X inside panel */
header.main .menu-close{position: absolute; visibility: visible; top: 22px;right: 22px;font-size: 28px;line-height: 1;color: #333;cursor: pointer;user-select: none;}
/* Overlay */
header.main .menu-overlay{display: block;position: fixed;inset: 0;background: rgba(0,0,0,.55);opacity: 0;visibility: hidden;transition: opacity .25s ease, visibility .25s ease;z-index: 1100;}
/* When open */
header.main .menu-btn:checked ~ .main-menu{transform: translateX(0);height: 100%;}
header.main .menu-btn:checked ~ .menu-overlay{opacity: 1;visibility: visible;}
/* hide desktop inline underline behaviour */
header.main .main-menu li:hover a{ text-decoration: none; }
/* Menu list inside panel */
header.main .main-menu > ul,header.main .main-menu ul.bb-nav{display: block;height: auto;list-style: none;margin: 0;padding: 0;}
header.main .main-menu li{display: block;padding: 0;margin: 0;}
header.main .main-menu li a{color: #16222a !important;font-size: 16px;font-weight: 400;display: flex;padding: 14px 0;text-decoration: none;}
/* Register button becomes full-width pill */
header.main .main-menu .register a{background: #c71d66;color: #fff !important;border-radius: 9999px;padding: 16px 20px;text-align: center;margin-top: 20px;width: 100%;display: flex;      
justify-content: center;    /* centers text horizontally */
align-items: center;        /* centers vertically */
text-align: center;}
/* IMPORTANT: in off-canvas, your “mega menu” panel should be part of the flow */
.bb-submenu-panel{position: static;width: 100%;box-shadow: none;border-radius: 0;opacity: 1;visibility: visible;pointer-events: auto;transform: none;background: transparent;}
/* Submenu rows look like your screenshot */
.bb-submenu-panel > li:not(.bb-menu-card) > a{padding: 18px 0;font-size: 16px;border-bottom: 1px solid rgba(0,0,0,.08);color: #16222a !important;}
.bb-submenu-panel > li.bb-menu-card > a{padding: 16px 0;border-bottom: 1px solid rgba(0,0,0,.08);}
.bb-card-title{ font-size: 16px; }
.bb-card-subtitle{ font-size: 14px; }
.bb-card-media img{width: 120px;height: 58px;}
.menu-item-has-children .bb-top-link {display: none !important;}
.header-cart{position: absolute;right: 0px;top: 0;width: 44px;height: 95px;display: flex;align-items: center;justify-content: center;text-decoration: none;z-index: 1101;background: url(images/cart.png) no-repeat center / 28px 24px;}
/* Don’t show the chevron animation in panel unless you want it */
header.main .main-menu li.menu-item-has-children > a::after{ display: none; }
}