/* ================== 1320px =================*/

@media screen and (max-width: 1440px){

    .collection-h1{
        font-size: 12rem;
    }

}
@media screen and (max-width: 1340px){

    .collection-h1{
        font-size: 10rem;
    }
    .hand-image-on{
        margin-top: -270px;
    }
    .glitch-gold{
        font-size: 64px;
    }

}

@media screen and (max-width: 1300px){
   .navbar ul{
    gap: 20px;
   }
   .img-back{
    left: 15%;
   }
   .emblem-wrapper{
    left: 50%;
   }
}

@media screen and (max-width: 1200px){
  .luxury-grid{
    gap: 40px;
  }
  .img-back {
        left: 10%;
    }
    .emblem-wrapper {
        left: 44%;
    }
    .description{
        max-width: 90%;
    }
}

@media screen and (max-width: 1170px){

    .header-main-inner{
        grid-template-columns: 170px 1fr 150px;
    }
    .offer-section{
        background-position-x: center;
    }

}

@media screen and (max-width: 1140px){

    .collection-h1{
        font-size: 9rem;
    }
    .hand-image-on {
        margin-top: -223px;
        height: 400px;
    }
    .glitch-gold {
        font-size: 55px;
    }

}
/* Responsive */
@media screen and (max-width: 1100px) {
    .royal-frame { width: 90%; }
    .royal-product { left: -5%; }
    .royal-title { font-size: 3.5rem; }
    .arrivals-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 450px) 550px;
    }
    .card-tall { grid-column: 1 / 2; grid-row: 1 / 3; }
    .card-square-top { grid-column: 2 / 3; grid-row: 1 / 2; }
    .card-square-bot { grid-column: 2 / 3; grid-row: 2 / 3; }
    .card-huge { grid-column: 1 / 3; grid-row: 3 / 4; }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 40px;
    }

    /* .container { flex-direction: column; text-align: center; justify-content: center; } */
    .text-column { max-width: 100%; margin-bottom: 60px; padding-right: 0; display: flex; flex-direction: column; align-items: center; }
    
    .subheading { justify-content: center; }
    .subheading::before { display: none; }
    
    .hero-title .outline, .hero-title .italic { padding-left: 0; }
    .description { margin: 0 auto 40px auto; padding-left: 0; border-left: none; width: 80%; }
    .cta-btn { margin-left: 0; }
    
    .gallery-column { width: 100%; min-height: 500px; }
    .img-front { right: 5%; top: 0; width: 280px; height: 400px; }
    .img-back { left: 5%; bottom: 0; width: 220px; height: 320px; }

    .container-bridal {
        grid-template-columns: 1fr;
        gap: 80px;
    }
    .text-column {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .description {
        margin-left: auto;
        margin-right: auto;
    }
    .action-row {
        justify-content: center;
    }
    .trust-row {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .large-frame, .frame-border {
        width: 400px;
        height: 550px;
        margin: 0 auto;
    }
    .product-card-float {
        left: 10%;
    }

    .contact-hero {
        padding: 100px 5%;
    }
    .container {
        grid-template-columns: 1fr;
    }
    .subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    .contact-methods {
        text-align: left;
        width: 100%;
        max-width: 800px;
    }
    
    .image-mask, .image-frame {
        width: 420px;
        height: 560px;
        margin: 0 auto;
    }
    .floating-card {
        left: 5%;
        bottom: -30px;
    }


}

@media (max-width: 1090px){
   .navbar a{
    letter-spacing: 0;
   }
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .bento-item {
        height: 400px;
    }
    .large { 
        grid-column: span 2; 
        grid-row: span 1; 
        height: 480px; 
    }
    .vertical { 
        grid-row: span 1; 
    }
     .swiper-button-next { right: 0; }
    .swiper-button-prev { left: 0; }

     .hero-layout { grid-template-columns: 50% 50%; gap: 30px; }
    .mh-content { padding-left: 30px; }
    .circular-badge { width: 140px; height: 140px; }
    .mh-secondary-visual { display: none; }

    .pdp-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 60px 5%;
    }
    .gallery-section-products {
        position: relative;
        top: 0;
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
    }
    .main-image-container { height: 500px; }
    .info-section {
        max-width: 600px;
        margin: 0 auto;
    }
    .collection-h1 {
        font-size: 8rem;
    }
        .hand-image-on {
        margin-top: -200px;
        height: 330px;
    }
    .container{
        width: 100%;
    }
    /* Hide Desktop Nav */
    .navbar {
        display: none;
    }
    /* Show Mobile Toggle */
    .mobile-toggle {
        display: block;
    }
    .header-main-inner {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    /* Adjust search box on mobile */
    .search-box.active .search-input {
        position: absolute;
        top: 50px;
        right: -40px;
        width: 250px;
        background: #ffffff;
        z-index: 100;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        border: 1px solid var(--border);
        border-top: 3px solid var(--gold);
        border-radius: 4px;
    }
    .offer-left::before{
        top: 20px;
    }
    .main-container { grid-template-columns: 1fr; }
    .summary-panel { position: static; }
    .emblem-wrapper {
        left: 34%;
        top: 37%;
    }        

}

@media screen and (max-width: 1023px){

.luxury-grid{
    width: 95%;
}
        .image-mask, .image-frame {
        width: 100%;
        max-width: 380px;
        height: 520px;
        border-radius: 40px;
        margin: 0;
    }
        .contact-methods {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media screen and (max-width: 992px) {
    .royal-container { grid-template-columns: 1fr; gap: 60px; }
    .royal-content { align-items: center; text-align: center; }
    .royal-desc { max-width: 100%; font-size: 1rem; }
    .royal-features { align-items: center; border-left: none; border-top: 2px solid rgba(212,175,55,0.2); padding-top: 20px; padding-left: 0; }
    .btn-royal { align-self: center; }
    .royal-visuals { height: 600px; }
    .royal-product { left: 50%; transform: translateX(-50%); bottom: -20px; }
    .royal-product:hover { transform: translate(-50%, -10px); }

    .jewel-row { flex-direction: column; }
  .image-container { height: 450px; }
  .royal-badge{
    align-self: auto;
  }
}

@media (max-width: 980px) {
    .hero {
    grid-column: span 12;
    }

    .mini {
    grid-column: span 12;
    }

     .offer-grid {
        grid-template-columns: 1fr;
    }

    .offer-copy {
        text-align: center;
    }

    .discount-box {
        margin-inline: auto;
    }

    .offer-action {
        justify-content: center;
    }

    .hero,
    .craft,
    .values {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        text-align: center;
    }

    .hero-badges,
    .cta {
        justify-content: center;
    }
    .why-layout {
    grid-template-columns: 1fr;
    }

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

@media (max-width: 968px) {
    .bridal-section { grid-template-columns: 1fr;    gap: 0px; }
    .content-box { position: static; text-align: center; }
    .luxury-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
        .offer-footer {
        justify-content: center;
    }
    .floating-price-tag{
        left: 20px;
    }
    .bg-text{
        -webkit-text-stroke: 1px rgb(119 4 4 / 28%);
    }
    .title-traanding-bridal {
    margin-left: auto;
}
}

@media(max-width:960px){
  .offer-body{grid-template-columns:1fr;min-height:auto;}
  .offer-left{border-right:none;border-bottom:1px solid rgba(201,153,58,.15);padding:48px 28px;}
  .offer-right{min-height:auto;}
  .bottom-strip{padding:16px 24px;}
}

@media (max-width: 960px) {
    .banner-grid {
        grid-template-columns: 1fr;
        padding-top: 5rem;
    }

    .about-copy {
        text-align: center;
        margin-inline: auto;
    }

    .eyebrow-about-page {
        justify-content: center;
    }

    .about-actions,
    .trust-row-about {
        justify-content: center;
    }

    .visual-stage {
        min-height: 320px;
    }
    .container-collection-hero{
        flex-direction: column;
        padding: 0 20px;
    }
    .collection-hero{
        padding: 60px 0;
    }
    .text-column-collection{
        text-align: center;
        padding-right: 0px;
    }
        .emblem-wrapper {
        left: 47%;
        top: 50%;
    }
    .img-front{
        right: 0;
    }
    .img-back{
        left: 0;
    }
    .description-banner-collection{
        margin-left: 0;
        padding-left: 0;
        border: none;
    }
}

@media (max-width: 900px) {
    .section-header h2 { font-size: 42px; }
    .products-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

    .luxury-grid { grid-template-columns: 1fr; text-align: center; }
    .glitch-gold { font-size: 3rem; }
    .offer-footer { justify-content: center; }
    .header-offers{
        display: none;
    }
    .gem-card{
        aspect-ratio: auto;
    }
    .gem-card img{
        height: 420px;
    }
}

@media (max-width: 850px){
   .collection-h1 {
        font-size: 7rem;
    }
    .mh-eyebrow{
        letter-spacing: 2px;
    }
    .offer-card{
        max-width: 450px;
        margin-left: 20px;
    }
    .offer-card h1{
        font-size: 30px;
    }
    .offer-card h3{
        letter-spacing: 1px;
    }
    .discount-badge-collection{
        font-size: 20px;
    }
    .product-card-float {
        left: 0%;
    }
}

/* --- RESPONSIVE DESIGN (max-width: 768px as requested) --- */
@media (max-width: 768px) {
    
    /* Adjust Top Header for Mobile */
    .header-top {
        height: auto;
        padding: 15px 0 10px;
    }
    
    /* .header-top-inner {
        flex-direction: column; 
        gap: 12px;
        align-items: center;
        justify-content: center;
    } */

    .header-offers {
        order: 2;
        width: 100%;
        border-top: 1px dashed rgba(255, 255, 255, 0.15);
        border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
        padding: 8px 0;
        margin: 4px 0;
        height: auto;
        display: none;
    }

    .offer-slider {
        height: 32px; /* Allows 2 lines on mobile */
    }

    .offer-text {
        font-size: 11px;
        white-space: normal;
        line-height: 1.4;
        padding: 0 10px;
    }

    /* .gold-rates {
        order: 1;
    } */

    /* .social-contacts {
        order: 3;
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 15px;
    } */

    .header-actions {
        gap: 15px;
    }

    .header-actions .action-link[aria-label="Wishlist"],
    .header-actions .action-link[aria-label="Account"] {
        display: none;
    }

    .mobile-toggle {
        margin-left: 10px;
    }

    .gold-rates-btn {
        font-size: 11px;
    }

    .gold-rates-dropdown {
        width: 220px;
    }

    .slide-text .title-banner {
        font-size: 3rem;
    }
    .slide-overlay {
        background: linear-gradient(180deg, rgba(18,18,18,0.4) 0%, rgba(18,18,18,0.85) 100%);
    }
    .slide-content {
        padding-top: 80px;
        text-align: center;
    }
    .slide-content-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        height: auto;
        padding-bottom: 50px;
    }
    .slide-text {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .slide-text .desc {
        margin-left: auto;
        margin-right: auto;
    }
    .slide-featured {
        justify-content: center;
        display: none; /* Hide glass card on mobile to avoid overflow */
    }
    .banner-swiper-btn-next, .banner-swiper-btn-prev {
        display: none;
    }

    .slider-section { padding: 60px 15px; }
    .swiper-button-next, .swiper-button-prev { display: none; }
    /* Always show quick add on mobile */
    .quick-add-btn {
        transform: translateY(0);
        padding: 12px 0;
        font-size: 0.75rem;
    }
    .icon-btn {
        opacity: 1;
        transform: translateX(0);
    }

    .jewel-grid {
    flex-direction: column;
  }
  .jewel-box img {
    height: 400px;
  }

  .new-arrivals-section { padding: 70px 20px; }
    .arrivals-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 480px; 
    }
    .card-tall, .card-square-top, .card-square-bot, .card-huge {
        grid-column: 1 / 2;
        grid-row: auto;
    }
    .title { font-size: 2.5rem; }

    .footer-newsletter {
        flex-direction: column;
        align-items: flex-start;
    }
    .newsletter-form {
        max-width: 100%;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    .payment-icons {
        justify-content: center;
    }
    .minimal-hero { padding: 120px 5% 60px; }
    .hero-layout { grid-template-columns: 1fr; gap: 50px; text-align: center; }
    .mh-visual { height: 450px; min-height: auto; width: 90%; margin: 0 auto; }
    .mh-content { padding: 0; align-items: center; margin-top: 40px; }
    .mh-eyebrow::before { display: none; }
    .mh-text { max-width: 100%; }
    .circular-badge { top: 450px; left: 50%; transform: translate(-50%, -50%); }
    
    @keyframes fadePopIn {
        0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
        100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    }

    .contact-hero { padding: 60px 20px 60px 20px; }
    .title { font-size: 3.2rem; }
    
    .contact-methods {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .image-mask, .image-frame {
        width: 100%;
        max-width: 380px;
        height: 520px;
        border-radius: 40px; /* Switch to soft rectangle on mobile */
        margin: 0;
    }
    
    .floating-card {
        width: 90%;
        left: 5%;
        bottom: -40px;
        padding: 18px;
    }
    
    .ambient-text { display: none; }

    .collection-h1 {
        font-size: 100px;
    }
        .hand-image-on {
        margin-top: -150px;
        height: 250px;
    }
    .banner-section{
        margin-top: 130px;
        height: auto;
    }
    .hand-down-text{
        font-size: 25px;
    }
    .popup-container {
    flex-direction: column;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
    }
    .popup-image-side {
        height: 200px;
    }
    .popup-form-side {
        padding: 20px 30px;
    }
    .offer-header p{
        font-size: 12px;
    }
    .offer-header h2{
        margin-bottom: 10px;
    }
    .offer-header h2 {
        font-size: 1.8rem;
    }
    .container-bridal{
        gap: 50px;
    }
    .text-section {
    padding-right: 0px;
}
.offer-header {
    margin-bottom: 10px;
}
.submit-btn{
    margin-top: 0;
}
.no-thanks{
    margin-top: 10px;
}
.submit-btn{
    padding: 15px;
}
.input-group-popup input{
    padding: 10px 0;
}

}

@media screen and (max-width: 767px){
    .gem-card img {
        height: 350px;
    }

    .contact-container{
        grid-template-columns: 1fr;
    }
    .login-frame{
        right: 20px;
    }
}



@media screen and (max-width: 650px) {
    .bridal-banner-wrap { padding: 80px 0; }
    .large-frame, .frame-border {
        width: 100%;
        height: 480px;
        border-radius: 40px; /* Switch to soft rectangle on mobile */
        margin: 0;
    }
    .collection-h1 {
        font-size: 80px;
    }
    .hand-image-on {
        margin-top: -126px;
        height: 220px;
    }
    .main-title { font-size: 3.2rem; }
    .action-row {
        flex-direction: column;
        width: 100%;
    }
    .btn-primary, .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    .product-card-float {
        left: 50%;
        transform: translateX(-50%);
        bottom: -80px;
        animation: levitateMobile 6s ease-in-out infinite;
        width: 280px;
        display: none;
    }
    .marquee-bg { display: none; }
    .form-row {
        flex-direction: column;
        gap: 0; /* Let margin-bottom handle spacing on mobile */
    }

    .form-row{
        grid-template-columns: 1fr;
    }
    
    .emerald-wrap {
        margin-bottom: 20px;
    }
}

@media (max-width: 640px) {
    .trending-section {
        padding: 70px 0px;
    }
    .title-main { 
        font-size: 2.2rem; 
    }
    .bento-grid { 
        grid-template-columns: 1fr; 
    }
    .large { 
        grid-column: span 1; 
        height: 440px; 
    }
    .bento-item { 
        height: 380px; 
    }
    .large .card-title-arrivel { 
        font-size: 2.1rem; 
    }
    .about-page {
        width: 100%;
        margin: 0;
    }

    .section {
        border-radius: 0;
    }

    .btn {
        width: 100%;
        text-align: center;
    }
    .minimal-hero {
        padding: 60px 5% 60px;
    }

}


@media (max-width: 620px) {
    .bridal-offer {
        min-height: auto;
        border-radius: 22px;
    }

    .showcase {
        min-height: 380px;
    }

    .cards {
        width: 100%;
        height: 320px;
    }

    .jewel-card {
        width: 170px;
        height: 240px;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .why-wrap {
    padding: 38px 14px;
    }

    .reasons {
    grid-template-columns: 1fr;
    }

    .value-block {
    padding: 42px 0px;
    }

    .mini {
    grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {
    .section-header h2 { font-size: 32px; }
    .tab-container { gap: 10px; }
    .filter-tab { padding: 10px 20px; font-size: 12px; }

    .hero-title { font-size: 3.5rem; }
    .gallery-column { min-height: 400px; }
    .img-front { width: 200px; height: 300px; position: static; margin-bottom: -50px; z-index: 3;}
    .img-back { width: 180px; height: 260px; position: static; z-index: 2;}
    .gallery-column { flex-direction: row; align-items: center; justify-content: center; gap: 20px;}
    .emblem { width: 110px; height: 110px; }
    .emblem .inner-icon { font-size: 20px; }
    .buttons-group { grid-template-columns: 1fr; }
    .product-title-products { font-size: 2.2rem; }
    .main-image-container { height: 400px; }
    .thumb { height: 80px; }
    .cart-card { flex-direction: column; text-align: center; }
    .item-image { width: 100%; height: 250px; }
    .progress-step .step-label { display: none; }
    .offer-card{
        margin: auto;
        max-width: 90%;
    }
}

@media screen and (max-width: 576px) {
    .royal-bridal-section { padding: 100px 5% 50px; }
    .royal-title { font-size: 2.8rem; }
    .royal-title span { font-size: 1.4em; }
    .royal-visuals { height: 450px; }
    .royal-frame { width: 100%; height: 100%; }
    .royal-product { width: 85%; padding: 10px; }
    .rp-info h4 { font-size: 1rem; }

    .collection-h1 {
        font-size: 65px;
    }
    .hand-down-text{
        font-size: 20px;
    }
        .hand-image-on {
        margin-top: -104px;
        height: 180px;
    }
}

@media (max-width: 560px) {
    .about-banner {
        width: 100%;
        border-radius: 0;
        min-height: 100vh;
    }

    .about-actions {
        width: 100%;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .trust-card {
        flex: 1 1 calc(50% - 0.6rem);
    }
}

@media(max-width:520px){
  .clock-digits{gap:2px;}
  .digit-flip{width:36px;height:50px;}
  .digit-flip .top-half,.digit-flip .bot-half{font-size:24px;}
  .stats-row{gap:16px;}
  .stat-num{font-size:28px;}
  .offer-headline .pct{font-size:80px;}
      .collection-h1 {
        font-size: 55px;
    }
    .hand-image-on {
        margin-top: -90px;
        height: 166px;
    }
    .prod-badge{
        position: absolute;
        right: 0px;
        top: 0px;
    }
    .floating-price-tag{
        padding: 10px 15px;
    }
    .offer-footer{
        gap: 20px;
        flex-direction: column;
    }
    .offer-card{
        padding: 40px 20px;
    }
        .offer-card h1 {
        font-size: 25px;
    }
    .offer-card h3{
        font-size: 12px;
    }
    .image-mask, .image-frame {
        width: 100%;
        max-width: 380px;
        height: 400px;
        border-radius: 40px;
        margin: 0;
    }
    .large .card-desc{
        font-size: 14px;
    }
    .large .card-title-arrivel{
        font-size: 30px;
    }
    .bento-overlay{
        padding: 30px 25px;
    }

}

/* Center align dropdown on mobile to avoid overflow */
@media (max-width: 480px) {
    .gold-rates-dropdown {
        left: 0;
    }
    .search-box.active .search-input {
        width: 140px;
    }
    .slide-content .title-banner {
        font-size: 2.5rem;
    }
    .clock-row{
        flex-wrap: wrap;
    }
    .text-column-collection{
        max-width: 100%;
        padding-right: 0;
    }
    .discount-badge-collection {
        font-size: 16px;
    }
    .jewel-card.one{
        animation: none;
    }
    .jewel-card.two{
        animation: none;
    }
    .jewel-card{
        position: relative;
        left: 0 !important;
        top: 0 !important;
        right: 0 !important;
        rotate: 0deg !important;
        transform: rotate(0deg) !important;
    }
    .cards{
        display: flex;
        justify-content: space-between;
        gap: 5px;
        height: auto;
    }
    .offer-copy h1{
        font-size: 35px;
    }
    .login-frame{
        width: calc(95% - 20px);
    }

    .coupon-input-group input{
        width: 100%;
    }
}

@media (max-width: 420px){
   .container-full{
    padding: 0 ;
   }
    .collection-h1 {
        font-size: 45px;
    }
        .hand-image-on {
        margin-top: -77px;
        height: 150px;
    }
        .hand-down-text {
        font-size: 18px;
    }
    .subheading{
        letter-spacing: 2px;
    }
    .jewel-card {
        width: 140px;
        height: 220px;
    }
    .card-sub{
        font-size: 10px;
    }
    .card-title{
        font-size: 12px;
    }
    .jewel-card{
        padding: 8px;
    }
    .item-controls{
        flex-wrap: wrap;
        gap: 10px;
    }
    .summary-panel{
        padding: 30px;
    }
    .main-container{
        padding: 0 20px;
    }
    .address-form, .payment-form{
        padding: 20px;
    }
    .btn-group{
        flex-direction: column;
    }
    .checkout-button{
        letter-spacing: 0;
    }
    .cart-h2-on{
        font-size: 25px;
    }
    .summary-row.total{
        font-size: 16px;
    }
    .social-contacts{
        gap: 8px;
    }

    .current-price-product-on{
        font-size: 26px;
    }

}

@media (max-width: 375px){

.collection-h1 {
        font-size: 38px;
    }
    .prod-card{
        flex-direction: column;
    }
    .rp-img-wrapper{
        width: 65px;
        height: 65px;
    }
    .rp-info h4 {
        font-size: 14px;
    }
    .rp-info p{
        font-size: 13px;
    }
        .glitch-gold {
        font-size: 35px;
    }
    .subheading {
        letter-spacing: 0px;
    }
    .cta-btn{
        letter-spacing: 1px;
    }
    .offer-card h1 {
        font-size: 20px;
    }
    .jewel-card {
        width: 110px;
        height: auto;
    }
    .card-image{
        height: 100px;
    }
    .large-frame, .frame-border{
        height: 280px;
    }
    .card{
        padding: 25px 20px;
    }

    .social-icon{
        font-size: 10px;
    }

    .contact-phone{
        gap: 3px;
        font-size: 10px;
    }
    .social-contacts{
        gap: 4px;
    }

    .discount-badge{
        padding: 6px 6px;
        font-size: 10px;
    }
    .pricing-box{
        gap: 10px;
    }

}