@font-face{font-family:'Avenir';src:url('../fonts/Avenir.woff') format('woff'),url('../fonts/Avenir-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap;}
/* @font-face{font-family:'Avenir';src:url('../fonts/Avenir-Medium.woff2') format('woff2'),url('../fonts/Avenir-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Avenir';src:url('../fonts/Avenir-Black.woff2') format('woff2'),url('../fonts/Avenir-Black.woff') format('woff');font-weight:900;font-style:normal;font-display:swap;}*/
@font-face{font-family:'Cormorant Upright';src:url('../fonts/CormorantUpright-Bold.woff2') format('woff2'),url('../fonts/CormorantUpright-Bold.woff') format('woff');font-weight:bold;font-style:normal;font-display:swap;}
@font-face{font-family:'Cormorant Upright';src:url('../fonts/CormorantUpright-Light.woff2') format('woff2'),url('../fonts/CormorantUpright-Light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Cormorant Upright';src:url('../fonts/CormorantUpright-Medium.woff2') format('woff2'),url('../fonts/CormorantUpright-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Cormorant Upright';src:url('../fonts/CormorantUpright-Regular.woff2') format('woff2'),url('../fonts/CormorantUpright-Regular.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'Cormorant Upright';src:url('../fonts/CormorantUpright-SemiBold.woff2') format('woff2'),url('../fonts/CormorantUpright-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap;}

/* font-family: 'Cormorant Upright'; */
.main-page.main-home-chandra-builder,body,html{font-family:'Avenir'!important;line-height:normal;    /* Neutralize Angular Material typography vars */--mat-sys-body-large:initial;--mat-sys-body-medium:initial;--mat-sys-body-small:initial;--mat-sys-headline-large:initial;--mat-sys-headline-medium:initial;--mat-sys-title-large:initial;--mat-sys-title-medium:initial;}
h1,h2,h3,h4,h5,h6{font-family:'Avenir'!important;}
.main-page.main-home-chandra-builder *{box-sizing:border-box;}
/* =====================================================
LAYOUT
===================================================== */
.main-page.main-home-chandra-builder{display:flex;flex-direction:column;align-items:center;width:100%;}
main.main-page.main-home-chandra-builder {
    background: unset;
}
/* ================= HERO ================= */
.main-home-chandra-builder .main-page-head{position:relative;width:100%;}
.main-home-chandra-builder .main-page-head img{width:100%;height:auto;display:block;object-fit:cover;}
.main-home-chandra-builder .header-text{
    position: absolute;
    top: 25%;
    left: 13%;
    width: 45%;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-home-chandra-builder .header-text h2{font-family:'Cormorant Upright'!important;text-align: left;font-weight: 400;font-size: 4.2vw;margin: 0;}
/* ================= HEADING ================= */
.main-home-chandra-builder .main-page-content-heading{text-align:center;padding:3vw;}
.main-home-chandra-builder .main-page-content-heading h2{margin:0;font-weight:600;font-size:clamp(18px,2vw,32px);color:#000;margin: 0;font-size: 2vw;font-weight: 600;}
.main-home-chandra-builder .main-page-content-heading h4{margin-top: 10px;margin-bottom: 10px;font-weight: 300;font-size:clamp(14px,1.5vw,22px);font-size: 1.5vw;font-size: 1.5vw;font-weight: 400;}
/* ================= BUILDER GRID ================= */
.main-home-chandra-builder .row{display:flex;gap:12px;justify-content:center;width:100%;padding:0 3vw;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;}
.main-home-chandra-builder .builder-card{display:flex;flex-direction:column;width: 100%;align-items:center;padding: 0;}
.main-home-chandra-builder .builder-card img{width:100%;aspect-ratio:3 / 4.6;    /* Angular-equivalent visual ratio */object-fit:cover;display:block;object-fit: cover;}
.main-home-chandra-builder .card-desc{font-weight: 300;
    font-size: clamp(8px, 1.5vw, 30px);
    text-align: center;
    color: #252525;
    text-decoration: none;}
/* ================= BANNER ================= */
.main-home-chandra-builder .image-container{margin:7vw 3vw;position:relative;width:100%;}
.main-home-chandra-builder .image-container img{width:100%;height:auto;display:block;object-fit:cover;}
.main-home-chandra-builder .banner-text{position:absolute;top:50%;left:0%;transform:translateY(-50%);width: 63%;padding:10px 20px;text-align:center;}
.main-home-chandra-builder .banner-text h2{font-family:'Cormorant Upright'!important;font-weight:400;font-size:clamp(18px,2.5vw,40px);margin:0;color:#000;}
/* ================= CONTENT ================= */
.main-home-chandra-builder .personalization-section{text-align:center;padding:0 3vw; }
.main-home-chandra-builder .personalization-section h2{font-size:clamp(16px,2vw,32px);font-weight:400;margin:0 0 10px;}
.main-home-chandra-builder .personalization-section p
 {
    font-size: clamp(14px, 1.2vw, 20px);
    font-weight: 300;
    margin-bottom: 10px;
    color: #000000;
}



.mnb-faq {
  width: 100%;
  max-width: 90%;
  margin: 10px auto 20px;
  padding: 0 20px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.mnb-faq-header {
  text-align: center;
  font-size: clamp(10px, 1.8vw, 40px);
  font-weight: 200;
  text-align: center;
  cursor: pointer;
  margin-bottom: 30px;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family : 'Avenir';
}

.mnb-faq-item {
  border-top: 1px solid #000;
}

.mnb-faq-item:last-child {
  border-bottom: 1px solid #000;
}

.mnb-faq-question {
  width: 100%;
  background: none;
  border: none;
  font-size: clamp(10px, 1.3vw, 32px);
  font-weight: 400;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vw 0 0 0;
  font-family : 'Avenir';
  color: #252525;
}

.mnb-faq-question .icon {
  width: 18px;
  height: 18px;
  font-size: clamp(10px, 1.3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  line-height: 1;
  margin-left: 20px;
  transition: transform 0.3s ease;
  
}

.mnb-faq-answer {
  max-height: 0; 
  overflow: hidden;
  transition: max-height 0.35s ease;
  padding: 0 0 2vw 0;
  color: #666;
  font-family : 'Avenir';
}

.mnb-faq-answer p {
  margin: 0;
  font-size: clamp(8px, 1vw, 28px);
  padding: 2vw 0px 2px 5px;
}

.mnb-faq-item.active .mnb-faq-answer {
  max-height: 300px;
}


/*****************************/


.wp-block-columns.alignwide.is-layout-flex.wp-container-core-columns-is-layout-28f84493.wp-block-columns-is-layout-flex {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

main#wp--skip-link--target {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
}

app-date-necklace-builder main#wp--skip-link--target {
    margin: 0;
    padding: 0 !important;
    width: 100% !important;
}

app-date-necklace-builder .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

app-date-necklace-builder .form-group .row {/* flex-wrap: unset !important; *//* margin-top: unset; *//* margin-right: unset; *//* margin-left: unset; *//* --bs-gutter-y: unset; *//* --bs-gutter-x: unset; */}

app-date-necklace-builder input.input-field.ng-dirty.ng-valid.ng-touched {
    width: 100% !important;
}

app-date-necklace-builder button.mat-mdc-tooltip-trigger.preview-button.enabled-preview {
    max-width: unset;
    width: unset;
}

app-date-necklace-builder .form-group .row .input-wrapper {
    width: 80% !important;
}

app-date-necklace-builder button.mat-mdc-tooltip-trigger.preview-button {
    width: unset;
    max-width: 51%;
}

app-date-necklace-builder label {
    margin-bottom: 0px !important;
    font-size: clamp(12px, 1.3vw, 20px) !important;
    line-height: normal;
    color: #252525;
    font-weight: 300;
}

app-date-necklace-builder button.option {
    font-weight: 300;
}

app-date-necklace-builder button.height-option {
    font-weight: 300;
}

app-date-necklace-builder .form-group-row .form-group label {
    display: block !important;
}

app-date-necklace-builder input#quantity {
    /* padding-left: 1.3rem; */
    /* width: clamp(28px, 1vw, 125px); */
    /* height: clamp(25px, 3vw, 50px); */
    font-size: clamp(6px, .8vw, 20px);
    /* border: 1px solid #ccc; */
    padding: 9px;
    min-width: 65px;
}



/******************************/
@media (max-width: 1024px) {
    chandra-builder .form-group-row .form-group input#quantity {
        padding-right: 0rem !important;
        padding-left: 1.3rem !important;
    }
}

/* ================= MOBILE ================= */
@media (max-width:451px){
    .main-home-chandra-builder .header-text{display:none;}
    .main-home-chandra-builder .main-page-head img{aspect-ratio:402 / 358;}
    .main-home-chandra-builder .row{flex-wrap:wrap;gap:16px;padding:0;}
    .main-home-chandra-builder .builder-card{width: 100%;}
    .main-home-chandra-builder .banner-text{ width:80%; }
    .main-home-chandra-builder .banner-text h2{font-size:3.5vw;  max-width: max-content;}
    .main-home-chandra-builder .personalization-section{padding:0 20px;}
    
    .main-home-chandra-builder .row {
       grid-template-columns:1fr 1fr;
       margin: 0 !important;
       padding: 0 10px;
    }
    .main-home-chandra-builder .main-page-content-heading h2 {
        margin: 0;
        font-size: 4.4vw;
        font-weight: 600;
    }
    .main-home-chandra-builder .card-desc {
        font-size: 3.5vw;
        font-weight: 300;
        text-align: center;
        color: #252525;
        margin-top: 8px;
    }
    .main-home-chandra-builder .main-page-content-heading h4 {
        font-size: 3.3vw;
        font-weight: 400;        max-width: max-content;
    }
    .main-home-chandra-builder .personalization-section p {
        font-size: 3.5vw;
        font-weight: 300;
        margin: 10px 0;line-height: 1.35;
    }
    .mnb-faq {
      
      max-width: 100%;
     
    }
    .mnb-faq {
       
        margin: 25px auto 3px;
    
    }
    .mnb-faq-header {
        
        margin-bottom: 10px;
    
    }
    
    input#customName {
        min-width: 135px;
    }
}
/* UI enhancements css */
.woocommerce #reviews #comments h2{font-family:'Avenir'!important;font:700 2.25rem / 1.2777777778em 'Avenir'!important;}
.main-product-page .form-group{text-align:left!important;align-items:flex-start!important;padding:0;}
/*input#customName{width:100%;margin-bottom:-20px;}*/
.main-product-page .cta-buttons{width:100%;}
.main-product-page{margin-bottom:40px;}
.faq-item:last-child{border-bottom:0!important;}
main{padding-bottom:30px;}
.main-product-page .submit-button.primary {
    width: 100% !important;
    line-height: 1 !important;
}

.main-product-page .submit-button.secondary {
    width: 100% !important;
    padding: .7rem 1.25rem !important;
    line-height: 1 !important;
}
.main-product-page button.preview-button {
    max-width: max-content;
}

chandra-builder .row {
    margin-left: 0 !important;
    width: 100% !important;
}

app-date-necklace-builder .form-group .row
 {
    flex-wrap: unset !important;
    margin-top: unset !important;
    margin-right: unset !important;
    margin-left: unset !important;
    --bs-gutter-y: unset !important;
    --bs-gutter-x: unset !important;
    width: unset !important;
}

app-date-necklace-builder input-field *, app-date-necklace-builder input-field *::after, app-date-necklace-builder input-field *::before{
  box-sizing: border-box !important;
}


chandra-builder label {
    margin-bottom: 0px !important;
    line-height: 1;
}
chandra-builder label[for*="quantity"] {
   display: block !important;
}

chandra-builder input#quantity {
    padding-right: 1rem !important;
    padding-left: 2rem !important;
    width: clamp(28px, 1vw, 125px) !important;
    height: clamp(25px, 3vw, 50px) !important;
    font-size: clamp(6px, .9vw, 20px) !important;
    border: 1px solid #ccc !important;
    overflow-clip-margin: 0px !important;
    overflow: clip !important;
    border-radius: 0 !important;
}

chandra-builder input#customName {
    border-radius: 0 !important;
}

chandra-builder button.height-option
 {
    line-height: 1.2;
}

chandra-builder button.submit-button.primary {
    width: 100% !important;
}

chandra-builder button.submit-button.secondary {
    width: 100% !important;
}

chandra-builder input#customName:focus {
    outline: 2px solid #e59700;
    border: 1px solid #e59700;
}

.chandra-builder input#quantity {
    font-size: clamp(10px, .8vw, 20px) !important;
}

/* WebKit (Chrome, Edge, Safari) spinner */
chandra-builder input#quantity {
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

chandra-builder #quantity,
chandra-builder #quantity::after,
chandra-builder #quantity::before {
    box-sizing: unset !important;
    font-family: 'Avenir' !important;
}

app-date-necklace-builder input#quantity {
    min-width: unset;
}

app-date-necklace-builder .form-group .row .input-wrapper {
    width: 50% !important;
}