/* ==================================================
   DEFAULT (DESKTOP) - Mobile menu completely hidden
   ================================================== */
.mobile-menu-btn {
  display: none;
}

.mobile-menu-overlay {
  display: none;
}

.mobile-menu-backdrop {
  display: none;
}

/* ==================================================
   MOBILE RESPONSIVE HEADER (phone only, max-width 768px)
   ================================================== */
@media (max-width: 768px) {

  /* 1. Announcement bar hide */
  .announcement-bar {
    display: none;
  }

  /* 2. Main nav: logo left, sirf icons right */
  .main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
  }

  .nav-left {
    display: none;
  }

  .logo-center {
    position: static;
    transform: none;
    order: -1;
    margin-right: auto;
  }

  .logo-img {
    height: 80px;
    width: auto;
  }

  .nav-icons .icon-search {
    display: none;
  }

  .nav-icons {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .mobile-menu-btn {
    display: inline-block;
    font-size: 20px;
    color: #000;
  }

  .category-nav {
    display: none;
  }

  /* ================== MOBILE SLIDE MENU ================== */
  .mobile-menu-overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0,0,0,0.15);
  }

  .mobile-menu-overlay.active {
    transform: translateX(0);
  }

  .mobile-menu-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    z-index: 1000;
  }

  .mobile-menu-backdrop.active {
    display: block;
  }

  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
  }

  .mobile-menu-logo {
    height: 80px;
  }

  .mobile-menu-close {
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #000;
  }

  .mobile-menu-categories {
    padding: 10px 0;
  }

  .mobile-cat-item {
    border-bottom: 1px solid #f0f0f0;
  }

  .mobile-cat-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    color: #000;
  }

  .mobile-cat-title i {
    font-size: 12px;
    transition: transform 0.25s ease;
  }

  .mobile-cat-item.open .mobile-cat-title i {
    transform: rotate(180deg);
  }

  .mobile-cat-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fafafa;
  }

  .mobile-cat-item.open .mobile-cat-sub {
    max-height: 400px;
  }

  .mobile-cat-sub a {
    display: block;
    padding: 10px 30px;
    font-size: 14px;
    color: #444;
    text-decoration: none;
  }

  .mobile-cat-sub a:hover {
    background: #f0f0f0;
  }

  body.no-scroll {
    overflow: hidden;
  }

}
/* ==================================================
   HERO SWIPER - RESPONSIVE (FIXED HEIGHT ISSUE)
   ================================================== */
@media (max-width: 768px) {

  .hero-swiper,
  .hero-swiper .swiper-wrapper,
  .hero-swiper .swiper-slide,
  .hero-swiper .slide-bg {
    height: 280px !important;
    min-height: unset !important;
    max-height: 280px !important;
  }

  .hero-swiper .slide-bg {
    position: relative;
    overflow: hidden;
  }

  .hero-swiper .slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

}

@media (max-width: 480px) {
  .hero-swiper,
  .hero-swiper .swiper-wrapper,
  .hero-swiper .swiper-slide,
  .hero-swiper .slide-bg {
    height: 220px !important;
    max-height: 220px !important;
  }
}
/* ==================================================
   TRUST BAR - RESPONSIVE
   ================================================== */
@media (max-width: 768px) {

  .trust-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 10px;
    padding: 15px 12px;
  }

  .trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .trust-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  .trust-label {
    font-size: 12px;
    display: block;
    line-height: 1.3;
  }

  .trust-desc {
    font-size: 10px;
    display: block;
    opacity: 0.7;
  }

  /* Divider lines hide (grid mein ugly lagti hain) */
  .trust-divider {
    display: none;
  }

}

/* Chhoti screen (390px se neeche) pe font aur chhota */
@media (max-width: 380px) {
  .trust-label {
    font-size: 11px;
  }
  .trust-desc {
    font-size: 9px;
  }
  .trust-icon {
    width: 20px;
    height: 20px;
  }
}
/* ==================================================
   SHOP BY CATEGORY - RESPONSIVE
   ================================================== */
@media (max-width: 768px) {

  .section-header {
    padding: 0 15px;
  }

  .section-title {
    font-size: 18px;
  }

  .category-section {
    padding: 15px;
  }

  .category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .category-card {
    width: 100%;
  }

  .cat-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
  }

  .cat-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .category-info {
    text-align: center;
    padding: 8px 0;
  }

  .category-name {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .category-link {
    font-size: 11px;
  }

}

/* Chhoti screen pe aur tight spacing */
@media (max-width: 380px) {
  .category-grid {
    gap: 8px;
  }

  .category-name {
    font-size: 13px;
  }

  .category-link {
    font-size: 10px;
  }
}
/* ==========================
   Mobile Banner
========================== */

@media (max-width:768px){

.dark-banner{
    width:100%;
    overflow:hidden;
}

.dark-banner img{
    width:100%;
    height:180px;      /* Height apne hisab se change kar sakte ho */
    object-fit:cover;
    object-position:center;
    display:block;
}

}

/* ==========================
   Collection Section Mobile
========================== */

@media (max-width:768px){

.collection-section{
    padding:20px 15px;
}

.collection-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.collection-title{
    font-size:22px;
    font-weight:600;
}

.view-all{
    font-size:13px;
    text-decoration:none;
}

.collectionSwiper{
    overflow:visible;
}

/* .collectionSwiper .swiper-slide{
    width:70% !important;
} */

.product-card{
    width:100%;
}

.product-img-wrap{
    border-radius:12px;
    overflow:hidden;
}

.product-img-wrap img{
    width:100%;
    display:block;
}

.product-name{
    font-size:15px;
    margin-top:10px;
}

.product-price{
    font-size:15px;
    font-weight:600;
}

.wishlist-btn{
    width:38px;
    height:38px;
    font-size:18px;
}

}
/* ==========================
   Testimonial Mobile
========================== */

@media (max-width:768px){

.testimonial-section{
    padding:40px 15px;
}

.section-head{
    text-align:center;
    margin-bottom:25px;
}

.section-eyebrow{
    font-size:13px;
    margin-bottom:8px;
}

.section-title{
    font-size:26px;
    line-height:1.3;
}

.testimonialSwiper{
    overflow:visible;
}

/* .testimonialSwiper .swiper-slide{
    width:85% !important;
} */

.testimonial-card{
    padding:20px;
    border-radius:12px;
}

.review{
    font-size:15px;
    line-height:1.8;
}

.review-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:20px;
}

.customer h4{
    font-size:16px;
}

.google-review img{
    width:90px;
    height:auto;
}

}
/* ==================================================
   ABOUT US PAGE - RESPONSIVE
   ================================================== */
@media (max-width: 768px) {

  .about-section {
    padding: 30px 15px;
  }

  .section-head {
    text-align: center;
    margin-bottom: 20px;
  }

  .section-eyebrow {
    font-size: 11px;
  }

  .section-head .section-title {
    font-size: 20px;
    line-height: 1.3;
  }

  .section-subtitle {
    font-size: 13px;
    padding: 0 8px;
  }

  /* ── OUR STORY ── */
  .story {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .story-media img {
    width: 100%;
    border-radius: 8px;
  }

  .story-content h2 {
    font-size: 18px;
  }

  .story-content p {
    font-size: 13px;
  }

  .bullets {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
  }

  .bullet {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .bullet i {
    font-size: 18px;
    margin-top: 2px;
  }

  .bullet strong {
    font-size: 13px;
    display: block;
  }

  .bullet span {
    font-size: 12px;
    color: #777;
  }

  /* ── WHY CHOOSE US CARDS ── */
  .cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .card {
    padding: 16px 12px;
    border-radius: 8px;
  }

  .card-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
  }

  .card-icon {
    font-size: 20px;
  }

  .card h3 {
    font-size: 13px;
  }

  .card p {
    font-size: 11px;
    line-height: 1.5;
  }

  /* ── TESTIMONIALS ── */
  /* .testimonialSwiper .swiper-slide {
    width: 88% !important;
  } */

  .testimonial-card {
    padding: 16px;
    border-radius: 8px;
    height: auto;
    overflow: visible;
  }

  .testimonial-card .review {
    font-size: 13px;
    line-height: 1.5;
  }

  .review-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
  }

  /* Custom-ring testimonials (rngbld) */
  .rngbld-testi-card {
    height: auto;
    overflow: visible;
  }

  .customer h4 {
    font-size: 13px;
  }

  .google-review img {
    height: 52px;
  }

  /* ── FAQ ── */
  .faq-wrap details {
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 6px;
  }

  .faq-wrap summary {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
  }

  .faq-wrap summary::-webkit-details-marker {
    display: none;
  }

  .faq-wrap details p {
    font-size: 13px;
    margin-top: 8px;
    line-height: 1.5;
  }

  /* ── CTA ── */
  .cta {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px 16px;
    border-radius: 10px;
  }

  .cta h3 {
    font-size: 18px;
  }

  .cta p {
    font-size: 13px;
  }

  .about-hero-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .about-btn {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 13px;
  }

}

/* Chhoti screens */
@media (max-width: 380px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .section-head .section-title {
    font-size: 18px;
  }
}
/* ==================================================
   FAQ (2-column inline style wala) - RESPONSIVE
   ================================================== */
@media (max-width: 768px) {

  #faq {
    margin-top: 30px !important;
    padding: 0 15px;
  }

  .contact-header {
    text-align: center;
  }

  .contact-header .eyebrow {
    font-size: 11px;
  }

  .contact-header h2 {
    font-size: 20px;
  }

  .contact-header p {
    font-size: 13px;
    padding: 0 8px;
  }

  /* Inline grid ko override — 1 column kar do */
  #faq .faq-wrap {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #faq .faq-wrap details {
    padding: 12px 14px !important;
    border-radius: 10px !important;
  }

  #faq .faq-wrap summary {
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
  }

  #faq .faq-wrap details p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-top: 8px !important;
  }

}

/* Chhoti screens pe aur tight */
@media (max-width: 380px) {
  #faq .faq-wrap summary {
    font-size: 11px !important;
  }
}
/* ==================================================
   TRUST BAR (img icon version) - RESPONSIVE
   ================================================== */
@media (max-width: 768px) {

  .trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 10px;
    padding: 15px 12px;
  }

  .trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .trust-icon img {
    width: 22px;
    height: 22px;
  }

  .trust-text strong {
    font-size: 12px;
    display: block;
    line-height: 1.3;
  }

  .trust-text span {
    font-size: 10px;
    display: block;
    opacity: 0.7;
  }

}

/* ==================================================
   DESIGN YOUR OWN — CONFIGURATOR SECTION - RESPONSIVE
   ================================================== */
@media (max-width: 768px) {

  .design-section {
    padding: 20px 15px;
  }

  .design-section h2 {
    font-size: 20px;
    text-align: center;
  }

  .design-section .subtitle {
    font-size: 13px;
    text-align: center;
    padding: 0 8px;
  }

  /* Step bar → horizontal scroll */
  .steps-bar {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding: 12px 4px;
    scrollbar-width: none;
  }

  .steps-bar::-webkit-scrollbar {
    display: none;
  }

  .steps-bar .step {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 20px;
  }

  .step-num {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  /* Configurator layout → stack */
  .configurator {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Sidebar (jewellery type) → horizontal scroll */
  .sidebar {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .sidebar::-webkit-scrollbar {
    display: none;
  }

  .sidebar-item {
    flex-shrink: 0;
    width: 80px;
    text-align: center;
    font-size: 11px;
  }

  .sidebar-item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 6px;
  }

  .panel-title {
    font-size: 14px;
    margin: 16px 0 8px;
  }

  /* Shapes grid → 3 columns */
  .shapes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .shape-item {
    padding: 8px 4px;
    text-align: center;
  }

  .shape-item img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
  }

  .shape-item span {
    font-size: 10px;
    display: block;
    margin-top: 4px;
  }

  /* Quality dropdowns → stack */
  .quality-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .quality-group label {
    font-size: 12px;
  }

  .quality-group select {
    width: 100%;
    padding: 8px;
    font-size: 13px;
  }

  /* Size buttons → wrap */
  .size-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .size-btn {
    font-size: 11px;
    padding: 8px 12px;
  }

  /* Selection summary card */
  .selection-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 10px;
    text-align: center;
  }

  .selection-card img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 auto;
  }

  .selection-info .price {
    font-size: 20px;
  }

  .sel-label {
    font-size: 11px;
  }

  .sel-values {
    font-size: 12px;
  }

  .selection-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  .btn-cart,
  .btn-save {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 13px;
  }

}

/* ==================================================
   SHOP BY CATEGORY SWIPER - RESPONSIVE
   ================================================== */
@media (max-width: 768px) {

  .lux-category-slider-section {
    padding: 20px 15px;
  }

  .lux-category-slider-title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 12px;
  }

  .luxCategorySwiper .swiper-slide {
    width: 65% !important;
  }

  .lux-category-card {
    border-radius: 8px;
    overflow: hidden;
  }

  .lux-category-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
  }

  .lux-category-name {
    font-size: 13px;
  }

  .lux-category-btn {
    font-size: 11px;
    padding: 6px 14px;
  }

}
/* ==================================================
   CART / CHECKOUT PAGE - RESPONSIVE
   ================================================== */
@media (max-width: 768px) {

  .cart-page {
    padding: 15px;
  }

  .continue-link {
    font-size: 12px;
  }

  .cart-page h1 {
    font-size: 22px;
    margin-top: 12px;
  }

  .cart-count-line {
    font-size: 13px;
  }

  /* Empty state */
  .cart-empty {
    padding: 40px 15px;
    text-align: center;
  }

  .cart-empty i {
    font-size: 36px;
  }

  .cart-empty h2 {
    font-size: 16px;
  }

  .cart-empty p {
    font-size: 13px;
  }

  /* Layout → stack (items pe, summary neeche) */
  .cart-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .cart-items {
    order: 1;
  }

  .order-summary {
    order: 2;
    padding: 16px;
    border-radius: 10px;
  }

  /* Individual cart item card */
  .cart-item {
    display: flex;
    gap: 10px;
    padding: 15px 11px;
    border-bottom: 1px solid #eee;
  }

  .cart-item img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .cart-item-info {
    flex: 1;
    min-width: 0;
  }

  .cart-item-name {
    font-size: 13px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cart-item-details {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
    line-height: 1.4;
  }

  .cart-item-price {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
  }

  .cart-item-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
  }

  .qty-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .qty-btn {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .qty-num {
    font-size: 13px;
    min-width: 18px;
    text-align: center;
  }

  .remove-btn {
    font-size: 11px;
  }

  /* Order summary */
  .summary-title {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .summary-row {
    font-size: 13px;
    padding: 6px 0;
  }

  .promo-row {
    display: flex;
    gap: 8px;
    margin: 12px 0 6px;
  }

  .promo-row input {
    flex: 1;
    font-size: 12px;
    padding: 8px;
  }

  .promo-row button {
    font-size: 12px;
    padding: 8px 14px;
  }

  .total-row {
    font-size: 15px;
    font-weight: 700;
  }

  .btn-checkout {
    width: 100%;
    padding: 13px;
    font-size: 14px;
    margin-top: 10px;
  }

  .secure-note {
    font-size: 11px;
    text-align: center;
    margin-top: 8px;
  }

  .cart-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .benefit-item {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

}