/* ====================================================
   LCJ Mobile Responsive Overrides
   Targets: max-width 768px (tablet) and 480px (phone)
   ==================================================== */

/* ── Prevent horizontal scroll on ALL screen sizes ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Grid banner: lock content to left, prevent bleed ── */
.lcj-grid-banner {
  overflow: hidden;
}
.lcj-grid-panel {
  justify-content: flex-start !important;
  overflow: hidden !important;
}
.lcj-grid-panel-content {
  position: relative !important;
  z-index: 2 !important;
  flex-shrink: 0;
}

/* ── Global spacing ── */
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  .container-fluid,
  .lcj-shop-wrap,
  .lcj-product-page,
  .lcj-related,
  .lcj-subcat-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ────────────────────────────────────────────────────
   HEADER
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Compare sticky tab: smaller on mobile */
  #lcj-cmp-tab {
    padding: 10px 7px;
  }
  #lcj-cmp-tab .lcj-cmp-label {
    font-size: 9px;
    letter-spacing: 1px;
  }

  /* Cookie bar: full width on phones */
  #lcj-cookie-bar {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    max-width: 100% !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Hero
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lcj-hero {
    min-height: 480px;
    height: 80vh;
  }
  .lcj-hero-content h1 {
    font-size: 32px !important;
    line-height: 1.2;
  }
  .lcj-hero-content p {
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .lcj-hero {
    min-height: 380px;
    height: 70vh;
  }
  .lcj-hero-content h1 {
    font-size: 26px !important;
  }
  .lcj-hero-content {
    margin-left: 16px !important;
    max-width: calc(100% - 32px) !important;
  }
  .lcj-hero-content p {
    font-size: 13px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lcj-hero-content .btn,
  .lcj-hero-content a[class*="btn"] {
    padding: 12px 24px !important;
    font-size: 11px !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Section headings
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lcj-section-head {
    padding: 40px 16px 20px !important;
  }
  .lcj-section-head h2,
  .lcj-section-head .section-title {
    font-size: 26px !important;
  }
  .lcj-section-head p,
  .lcj-section-head .section-sub {
    font-size: 14px !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Grid Banner (two panels)
──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lcj-grid-banner {
    grid-template-columns: 1fr !important;
  }
  .lcj-grid-panel {
    height: 220px !important;
    padding: 0 !important;
  }
  .lcj-grid-panel-content {
    max-width: 52% !important;
    padding: 0 0 0 20px !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
  }
  .lcj-grid-panel h3,
  .lcj-grid-panel h2 {
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 8px !important;
  }
  .lcj-grid-panel .lcj-sub {
    font-size: 9px !important;
    margin-bottom: 6px !important;
  }
  .lcj-grid-panel p {
    display: none !important;
  }
  .lcj-grid-panel .lcj-btn-outline-white {
    font-size: 9px !important;
    padding: 8px 14px !important;
    letter-spacing: 0.5px !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Collections circles grid
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lcj-circle {
    width: 120px !important;
    height: 120px !important;
  }
  .lcj-collections-grid {
    gap: 20px 12px !important;
  }
  .lcj-collections-grid .lcj-col-name {
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .lcj-circle {
    width: 90px !important;
    height: 90px !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Product carousel
──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lcj-product-card {
    flex: 0 0 calc(76% - 10px) !important;
  }
  .lcj-carousel-wrap {
    padding: 0 16px 30px !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Testimonials grid
──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lcj-testimonials-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Services grid
──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lcj-services {
    grid-template-columns: 1fr !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Blog grid
──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lcj-blog-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Promise banner
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lcj-promise-banner {
    height: auto !important;
    min-height: 420px;
  }
  .lcj-promise-content {
    margin-right: 0 !important;
    margin-left: 0 !important;
    text-align: center !important;
    max-width: 90% !important;
    padding: 0 20px !important;
  }
  .lcj-promise-content h2 {
    font-size: 28px !important;
  }
}

@media (max-width: 480px) {
  .lcj-promise-banner {
    min-height: 340px;
  }
  .lcj-promise-content h2 {
    font-size: 24px !important;
  }
  .lcj-promise-content p {
    font-size: 13px !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Brand story
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lcj-brand-story {
    height: auto !important;
    min-height: 380px;
  }
  .lcj-brand-story-content {
    padding: 40px 24px !important;
    max-width: 100% !important;
  }
  .lcj-brand-story-content h2 {
    font-size: 26px !important;
  }
}

/* ────────────────────────────────────────────────────
   HOMEPAGE — Scrolling text banner
──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lcj-scrolling-text {
    font-size: 18px !important;
  }
}

/* ────────────────────────────────────────────────────
   SHOP / COLLECTION PAGE
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lcj-hero-banner {
    height: 220px !important;
  }
  .lcj-hero-banner-content h1 {
    font-size: 28px !important;
  }
  .lcj-hero-banner-content p {
    font-size: 13px !important;
  }

  /* Subcategory circles */
  .lcj-subcat-card-img {
    width: 110px !important;
    height: 110px !important;
  }

  /* Shop wrap */
  .lcj-shop-wrap {
    padding-top: 24px !important;
    padding-bottom: 40px !important;
  }

  /* Toolbar: stack on small screens */
  .lcj-shop-toolbar {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .lcj-shop-toolbar-right {
    width: 100%;
    justify-content: space-between;
  }

  /* Parallax banner */
  .lcj-shop-parallax {
    min-height: 300px !important;
    background-attachment: scroll !important;
  }
  .lcj-shop-parallax h2 {
    font-size: 24px !important;
  }
  .lcj-shop-parallax p {
    font-size: 13px !important;
  }
  .lcj-shop-parallax__inner {
    padding: 40px 20px !important;
  }

  /* Newsletter section on shop page */
  .lcj-newsletter {
    padding: 40px 16px !important;
  }
  .lcj-newsletter h3 {
    font-size: 20px !important;
  }
  .lcj-newsletter-form {
    flex-direction: row !important;
    overflow: hidden !important;
    gap: 0 !important;
    max-width: 100% !important;
  }
  .lcj-newsletter-form input[type=email] {
    flex: 1 !important;
    min-width: 0 !important;
    border-right: none !important;
    width: auto !important;
  }
  .lcj-newsletter-form button {
    flex-shrink: 0 !important;
    padding: 0 14px !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: 11px !important;
  }
}

@media (max-width: 480px) {
  .lcj-hero-banner {
    height: 180px !important;
  }
  .lcj-hero-banner-content h1 {
    font-size: 22px !important;
  }

  /* Product grid: 2 columns stays fine, reduce gap */
  .lcj-shop-grid {
    gap: 10px !important;
  }
  .lcj-card-name {
    font-size: 12px !important;
  }
  .lcj-card-price {
    font-size: 13px !important;
  }
}

/* ────────────────────────────────────────────────────
   PRODUCT PAGE
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lcj-product-page {
    padding: 24px 16px 60px !important;
  }

  /* Unstick image column — no sticky on mobile */
  .lcj-product-imgs {
    position: static !important;
  }

  /* Thumbnails: smaller on phones */
  .lcj-thumb {
    width: 56px !important;
    height: 56px !important;
  }

  /* Price: smaller gap */
  .lcj-product-price {
    gap: 8px !important;
  }
  .lcj-product-price .price-current {
    font-size: 22px !important;
  }

  /* ATC button: full width stack */
  .lcj-qty-atc {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .lcj-atc-btn {
    width: 100% !important;
    flex: none !important;
  }
  .lcj-qty-box {
    width: 100% !important;
    justify-content: center;
  }

  /* Trust badges: 2 per row */
  .lcj-trust {
    gap: 12px !important;
  }
  .lcj-trust-item {
    flex: 0 0 calc(50% - 6px) !important;
  }

  /* Related heading */
  .lcj-related h2 {
    font-size: 22px !important;
  }
  .lcj-related {
    padding: 40px 16px 60px !important;
  }

  /* Breadcrumb */
  .lcj-product-hero {
    padding: 12px 16px !important;
  }
  .lcj-product-hero .lcj-breadcrumb {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px) {
  .lcj-product-info h1 {
    font-size: 22px !important;
  }
  .lcj-product-price .price-current {
    font-size: 20px !important;
  }
  .lcj-trust-item {
    flex: 0 0 100% !important;
  }
}

/* ────────────────────────────────────────────────────
   FOOTER — newsletter popup modal
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Newsletter popup: hide image, go single-column */
  #lcj-nl-modal {
    flex-direction: column !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  #lcj-nl-modal > div:first-child {
    /* left image panel */
    flex: 0 0 180px !important;
    min-height: 180px !important;
  }
  #lcj-nl-modal > div:last-child {
    padding: 32px 24px !important;
  }
  #lcj-nl-modal h2 {
    font-size: 24px !important;
  }
}

@media (max-width: 480px) {
  #lcj-nl-modal > div:first-child {
    display: none !important;
  }
}

/* ────────────────────────────────────────────────────
   FOOTER — Quick View modal
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #lcj-qv-modal {
    flex-direction: column !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    width: 97% !important;
  }
  #lcj-qv-modal > div:first-child {
    /* image panel */
    flex: 0 0 220px !important;
    min-height: 220px !important;
  }
  #lcj-qv-modal > div:last-child {
    padding: 28px 20px !important;
  }
  #lcj-qv-modal h2 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
}

/* ────────────────────────────────────────────────────
   FOOTER — compare modal table
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #lcj-cmp-modal {
    width: 97% !important;
    max-height: 85vh !important;
  }
  .lcj-cmp-table {
    table-layout: auto !important;
  }
  .lcj-cmp-img-cell img {
    width: 100px !important;
    height: 100px !important;
  }
  .lcj-cmp-name {
    font-size: 13px !important;
  }
}

/* ────────────────────────────────────────────────────
   FOOTER — Instagram strip
──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lcj-img-strip img {
    height: 140px !important;
  }
}

/* ────────────────────────────────────────────────────
   FOOTER — newsletter section (in footer.php strip)
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lcj-newsletter-section {
    padding: 40px 16px !important;
  }
  .lcj-newsletter-inner h2 {
    font-size: 22px !important;
  }
}

/* ────────────────────────────────────────────────────
   WOOCOMMERCE — Cart page
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce-cart .woocommerce {
    padding: 0 16px;
  }
  .woocommerce-cart table.cart {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .woocommerce .cart-collaterals {
    width: 100% !important;
    float: none !important;
  }
  .woocommerce .cart-collaterals .cart_totals {
    width: 100% !important;
    float: none !important;
  }
}

/* ────────────────────────────────────────────────────
   WOOCOMMERCE — My Account / Login
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce-account .lcj-login-box {
    padding: 0 4px !important;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100% !important;
    float: none !important;
    margin-bottom: 24px;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100% !important;
    float: none !important;
  }
}

/* ────────────────────────────────────────────────────
   WOOCOMMERCE — Checkout
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
    float: none !important;
  }
}

/* ────────────────────────────────────────────────────
   General WooCommerce table overflow fix
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .woocommerce table.shop_table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td {
    padding: 10px 8px !important;
  }
}

/* ────────────────────────────────────────────────────
   Contact / About / inner pages
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lcj-contact-wrap,
  .lcj-about-wrap,
  .lcj-page-wrap {
    padding: 40px 16px !important;
  }
  .lcj-contact-grid,
  .lcj-about-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ────────────────────────────────────────────────────
   Wishlist / Compare pages
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .lcj-wishlist-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .lcj-wishlist-wrap {
    padding: 24px 16px 60px !important;
  }
}

@media (max-width: 480px) {
  .lcj-wishlist-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ────────────────────────────────────────────────────
   Utility: prevent horizontal overflow everywhere
──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
  .woocommerce-page,
  .single-product,
  .archive {
    overflow-x: hidden;
  }
}