/* ════════════════════════════════════════════════════════════════════════════════════ MOBILE CSS - HOMEPAGE SECTIONS RESPONSIVE STYLES ════════════════════════════════════════════════════════════════════════════════════ */

/* ── Default Gallery Image Styles (Desktop) ── */
.gallery-image-desktop {
  display: block;
}
.gallery-image-mobile {
  display: none;
}

/* ── TABLET 850px and below ── */
@media (max-width: 850px) {
  .collections-grid { grid-template-columns: 1fr; row-gap: 20px; }
  .gallery-image-desktop {    display: none;  }
  .gallery-image-mobile {    display: block;  }
  .flex > .section-title { width: calc(100vw - 0px); padding: 50px 40px 16px; }
  .section-title__text { font-size: 28px; line-height: 36px; margin-bottom: 14px; }
  .section-title__description { font-size: 16px; line-height: 36px; }
  .gallery-section { padding: 16px 40px 50px; }
  .gallery-tabs { display: flex !important; flex-wrap: wrap !important; row-gap: 8px !important; gap: 16px !important; margin-bottom: 16px !important; padding-bottom: 0px !important; height: auto !important; line-height: 1.5; font-size: 20px; border-bottom: 1px solid var(--border-gray); }
  .gallery-tab { flex: 0 0 calc(50% - 8px) !important; width: calc(50% - 8px) !important; white-space: nowrap !important; padding: 4px 0 !important; height: auto !important; min-height: unset !important; box-sizing: border-box !important; line-height: 1.5; letter-spacing: 1px; text-transform: uppercase; font-size: 18px; line-height: 36px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .gallery-item a { display: block; position: relative; width: 100%; height: 100%; }
  .gallery-label { font-size: 18px; padding: 8px 12px; }
  .gallery-section .gallery-label { position: absolute;    bottom: 16px;    left: 50%;    transform: translateX(-50%);    width: max-content;  min-width: 100px; max-width: calc(100% - 24px); height: auto; padding: 10px 12px;   background-color: #ffffff; color: #6e7f49;
    font-family: 'Playfair Display', serif;    font-size: 16px;    line-height: 1.5;    text-transform: uppercase;    letter-spacing: 0.1em;    text-align: center;    box-sizing: border-box;    white-space: nowrap;  display: block;   z-index: 1;   }
  .gallery-label.top-label { top: 16px; bottom: auto; }
  section.selection-section { padding-left: 40px; padding-right: 40px; }
  .selection-section__title { font-size: 16px; line-height: 24px; margin-bottom: 6px; }
  .selection-section__subtitle { font-size: 28px; line-height: 36px; }
  .product-gallery-section { padding-left: 40px; padding-right: 40px; }
  .product-gallery-tabs { gap: 32px; padding-bottom: 10px; margin-bottom: 32px; }
  .product-gallery-tab { font-size: 18px; line-height: 36px; }
  #product-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .qui-sommes-nous { display: block; padding: 0; margin-top: 4% !important; background: var(--beige); }
  .qui-sommes-nous__content { padding: 50px 40px; text-align: center; }
  .qui-sommes-nous__title { font-size: 28px; line-height: 36px; margin-bottom: 24px; text-align: center; }
  .qui-sommes-nous__subtitle { font-size: 18px; line-height: 36px; margin-bottom: 48px; text-align: center; }
  .qui-sommes-nous__grid { display: block; margin-bottom: 40px; }
  .qui-sommes-nous__grid::before { display: none; }
  .qui-sommes-nous__text { font-size: 18px; line-height: 28px; margin-bottom: 40px; text-align: center; }
  .qui-sommes-nous__text-bold { font-weight: 700; font-size: 18px; line-height: 28px; margin-bottom: 8px; }
  .qui-sommes-nous__text-large { margin-top: 40px; text-align: center; }
  .qui-sommes-nous__text-large p { font-size: 22px; line-height: 36px; letter-spacing: 1px; }
  .qui-sommes-nous__btn { width: 220px; height: 44px; font-size: 18px; margin: 40px auto 0; }
  .qui-sommes-nous__image-wrapper { position: relative; width: 100%; margin-top: 40px; padding: 0 40px; }
  .nos-matieres { padding: 40px 40px 60px; }
  .nos-matieres__title { font-size: 28px; line-height: 36px; margin-bottom: 40px; }
  /* Container for the item */
  .nos-matieres__item { margin-bottom: 20px !important; position: relative; display: block; overflow: hidden; /* Ensures content doesn't spill out if image has rounded corners */ }
  /* Ensure the image wrapper takes full space */
  .nos-matieres__image-wrapper { width: 100%; height: 100%; display: block; }
  /* Content overlay */
  .nos-matieres__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px;  box-sizing: border-box; z-index: 2; padding-bottom: 30px !important;}
  /* Typography adjustments */
  .nos-matieres__subtitle { /* Typography */ font-family: 'Playfair Display', serif; font-size: 25px; font-weight: 700; line-height: 33px; color: #000000; text-align: left; /* Layout & Spacing */ position: relative; display: block; width: 100%; height: auto; margin-bottom: 12px; /* Keeps it close to the text below */ top: 0; left: 0; }
  .nos-matieres__description { text-align: left !important; height: auto; left: 0; top: 0; position: relative; display: block; color: black; font-family: 'Playfair Display', serif; font-style: normal; font-weight: 400; font-size: 15px; line-height: 20px; letter-spacing: 0.1em; width: 100%; margin-bottom: 24px; }
  /* Button adjustments */
  .nos-matieres__btn { padding: 20px 40px !important; line-height: 1.2 !important; display: table; margin: 20px auto 0; text-align: center; margin-bottom: 0px !important;}
  /* Read More Button */
  .nos-matieres__read-more { 
     display: inline !important; /* Ensure it stays inline with the text */
    width: auto !important;     /* Reset width from 100% or block values */
    margin: 0 0 0 8px !important; /* Spacing after the last word */
    padding: 0;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;      /* Match the paragraph font */
    font-size: inherit;        /* Match the paragraph size */
    color: inherit;            /* Match the text color */
 }
  .nos-matieres__read-more:hover { opacity: 0.8; }
  /* Hide second description on mobile by default */
  .nos-matieres__description--hidden { display: none; }
  /* Show when expanded */
  .nos-matieres__description-wrapper[data-expanded="true"] .nos-matieres__description--hidden { display: block; }
  .nos-matieres__description-wrapper[data-expanded="true"] .nos-matieres__read-more { display: none !important; }
  /* Gallery Grid Layout */
  #gallery-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 250px); gap: 1px; }
  .gallery-item { height: 100%; width: 100%; }
  .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(5),
  .gallery-item:nth-child(9),
  .gallery-item:nth-child(13),
  .gallery-item:nth-child(17) { grid-area: 1 / 1 / 2 / 2; }
  .gallery-item:nth-child(2),
  .gallery-item:nth-child(6),
  .gallery-item:nth-child(10),
  .gallery-item:nth-child(14),
  .gallery-item:nth-child(18) { grid-area: 2 / 1 / 3 / 2; }
  .gallery-item:nth-child(3),
  .gallery-item:nth-child(7),
  .gallery-item:nth-child(11),
  .gallery-item:nth-child(15) { grid-area: 3 / 1 / 4 / 2; }
  .gallery-item:nth-child(4),
  .gallery-item:nth-child(8),
  .gallery-item:nth-child(12),
  .gallery-item:nth-child(16) { grid-area: 1 / 2 / 4 / 3; }
}

/* ── TABLET 700px to 849px ── */
@media (max-width: 849px) and (min-width: 700px) {
  .gallery-tabs { display: flex !important; flex-wrap: wrap !important; row-gap: 8px !important; gap: 16px !important; margin-bottom: 16px !important; padding-bottom: 0px !important; height: auto !important; }
  .gallery-tab { flex: 0 0 calc(50% - 8px) !important; width: calc(50% - 8px) !important; white-space: nowrap !important; padding: 4px 0 !important; height: auto !important; min-height: unset !important; box-sizing: border-box !important; font-size: 22px; line-height: 32px; }
}

/* ── MOBILE 700px and below (breakpoint) ── */
@media (max-width: 700px) {
  .flex > .section-title { width: calc(100vw - 0px); padding: 40px 16px 14px; }
  .section-title__text { font-size: 24px; line-height: 32px; margin-bottom: 12px; }
  .section-title__description { font-size: 14px; line-height: 28px; }
  .gallery-section { padding: 14px 16px 40px; }
  .gallery-tabs { gap: 16px; padding-bottom: 12px; margin-bottom: 24px; }
  .gallery-tab { font-size: 22px; line-height: 32px; padding: 6px 0; flex: 0 0 calc(50% - 8px); width: calc(50% - 8px); }
  .gallery-tab.active::after { bottom: -11px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gallery-item a { display: block; position: relative; width: 100%; height: 100%; }
  .gallery-label { font-size: 16px; padding: 6px 10px; }
  .gallery-label.top-label { top: 16px; bottom: auto; }
  section.selection-section { padding-left: 16px; padding-right: 16px; }
  .selection-section__title { font-size: 14px; line-height: 20px; margin-bottom: 4px; }
  .selection-section__subtitle { font-size: 24px; line-height: 32px; }
  .product-gallery-section { padding-left: 16px; padding-right: 16px; }
  .product-gallery-tabs { gap: 16px; padding-bottom: 8px; margin-bottom: 24px; flex-wrap: wrap; }
  .product-gallery-tab { font-size: 16px; line-height: 32px; padding: 6px 0; }
  .product-gallery-tab.active::after { bottom: -11px; }
  #product-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .qui-sommes-nous { display: block; padding-left: 0; margin-top: 4% !important; background: var(--beige); }
  .qui-sommes-nous__content { padding-right: 0; padding-left: 16px; padding-right: 16px; }
  .qui-sommes-nous__title { font-size: 24px; line-height: 32px; margin-bottom: 16px; }
  .qui-sommes-nous__subtitle { font-size: 16px; line-height: 28px; margin-bottom: 32px; }
  .qui-sommes-nous__grid { display: block; margin-bottom: 24px; }
  .qui-sommes-nous__grid::before { display: none; }
  .qui-sommes-nous__text { font-size: 16px; line-height: 26px; margin-bottom: 20px; }
  .qui-sommes-nous__text-bold { font-size: 16px; line-height: 26px; margin-bottom: 4px; }
  .qui-sommes-nous__text-large { grid-column: auto; text-align: center; margin-top: 20px; }
  .qui-sommes-nous__text-large p { font-size: 18px; line-height: 28px; letter-spacing: 0.8px; }
  .qui-sommes-nous__btn { width: 200px; height: 42px; font-size: 16px; margin: 24px auto 0; }
  .qui-sommes-nous__image-wrapper { position: relative; width: 100%; margin-top: 32px; }
  .qui-sommes-nous__image { width: 100%; height: auto; }
  .nos-matieres { padding: 32px 16px 48px; }
  .nos-matieres__title { font-size: 24px; line-height: 32px; margin-bottom: 32px; }
  .nos-matieres__item { position: relative; display: block; overflow: hidden; margin: 0 auto 48px; max-width: none; }
  .nos-matieres__item--reverse .nos-matieres__image-wrapper { order: 0; margin-bottom: 0; }
  .nos-matieres__item--reverse .nos-matieres__content { order: 0; }
  .nos-matieres__image-wrapper { width: 100%; height: 100%; display: block; }
  .nos-matieres__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; box-sizing: border-box; z-index: 2; }
  .nos-matieres__subtitle { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; line-height: 32px; color: #000000; text-align: left !important; position: relative; display: block; width: 100%; height: auto; margin-bottom: 24px; top: 0; left: 0; }
  .nos-matieres__description { text-align: left !important; height: auto; left: 0; top: 0; position: relative; display: block; color: black; font-family: 'Playfair Display', serif; font-style: normal; font-weight: 400; font-size: 16px; line-height: 135%; letter-spacing: 0.8px; width: 100%; margin-bottom: 24px; }
  .nos-matieres__btn { display: table; margin: 20px auto 0; text-align: center; }
  .nos-matieres__read-more {
    display: inline !important;
    width: auto !important;
    margin: 0 0 0 8px !important;
    padding: 0;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
  .nos-matieres__read-more:hover { opacity: 0.8; }
  .nos-matieres__description--hidden { display: none; }
  .nos-matieres__description-wrapper[data-expanded="true"] .nos-matieres__description--hidden { display: block; }
  .nos-matieres__description-wrapper[data-expanded="true"] .nos-matieres__read-more { display: none !important; }
}

/* ── MOBILE 500px and below ── */
@media (max-width: 500px) {
  .flex > .section-title { width: calc(100vw - 0px); padding: 32px 12px 12px; }
  .section-title__text { font-size: 20px; line-height: 28px; margin-bottom: 10px; }
  .section-title__description { font-size: 13px; line-height: 24px; }
  .gallery-section { padding: 12px 12px 36px; }
  .gallery-tabs { display: flex !important; flex-wrap: wrap !important; row-gap: 8px !important; gap: 8px !important; margin-bottom: 16px !important; padding-bottom: 0px !important; height: auto !important; }
  .gallery-tab { flex: 0 0 calc(50% - 4px) !important; width: calc(50% - 4px) !important; white-space: nowrap !important; padding: 4px 0 !important; height: auto !important; min-height: unset !important; box-sizing: border-box !important; font-size: 16px !important; line-height: 1.2 !important; letter-spacing: 0.5px !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .gallery-item a { display: block; position: relative; width: 100%; height: 100%; }
  .gallery-label { font-size: 14px; padding: 5px 8px; }
  .gallery-label.top-label { top: 16px; bottom: auto; }
  section.selection-section { padding-left: 12px; padding-right: 12px; }
  .selection-section__title { font-size: 12px; line-height: 18px; margin-bottom: 3px; }
  .selection-section__subtitle { font-size: 20px; line-height: 28px; }
  .product-gallery-section { padding-left: 12px; padding-right: 12px; }
  .product-gallery-tabs { gap: 12px; padding-bottom: 6px; margin-bottom: 18px; }
  .product-gallery-tab { font-size: 14px; line-height: 28px; padding: 4px 0; }
  #product-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .qui-sommes-nous__content { padding-left: 12px; padding-right: 12px; }
  .qui-sommes-nous__title { font-size: 20px; line-height: 28px; margin-bottom: 12px; }
  .qui-sommes-nous__subtitle { font-size: 14px; line-height: 24px; margin-bottom: 24px; }
  .qui-sommes-nous__text { font-size: 14px; line-height: 22px; margin-bottom: 16px; }
  .qui-sommes-nous__text-large p { font-size: 16px; line-height: 24px; letter-spacing: 0.6px; }
  .qui-sommes-nous__btn { width: 180px; height: 40px; font-size: 14px; }
  .nos-matieres { padding: 24px 12px 36px; }
  .nos-matieres__title { font-size: 20px; line-height: 28px; margin-bottom: 24px; }
  .nos-matieres__item { position: relative; display: block; overflow: hidden; margin: 0 auto 36px; }
  .nos-matieres__image-wrapper { width: 100%; height: 100%; display: block; }
  .nos-matieres__content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; box-sizing: border-box; z-index: 2; }
  .nos-matieres__subtitle { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; line-height: 28px; color: #000000; text-align: left !important; position: relative; display: block; width: 100%; height: auto; margin-bottom: 12px; top: 0; left: 0; }
  .nos-matieres__description { text-align: left !important; height: auto; left: 0; top: 0; position: relative; display: block; color: black; font-family: 'Playfair Display', serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 130%; letter-spacing: 0.5px; width: 100%; margin-bottom: 12px; }
  .nos-matieres__btn { display: table; padding: 8px 12px; font-size: 14px; margin-top: 12px; text-align: center; }
  .nos-matieres__read-more {
    display: inline !important;
    width: auto !important;
    margin: 0 0 0 8px !important;
    padding: 0;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }
  .nos-matieres__read-more:hover { opacity: 0.8; }
  .nos-matieres__description--hidden { display: none; }
  .nos-matieres__description-wrapper[data-expanded="true"] .nos-matieres__description--hidden { display: block; }
  .nos-matieres__description-wrapper[data-expanded="true"] .nos-matieres__read-more { display: none !important; }
}

/* ── MEDIA QUERY 480px and below ── */
@media (max-width: 480px) {
  .section-title__text { font-size: 18px; line-height: 26px; }
  .section-title__description { font-size: 12px; line-height: 22px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item a { display: block; position: relative; width: 100%; height: 100%; }
  .gallery-label { font-size: 13px; padding: 4px 6px; }
  .selection-section__subtitle { font-size: 18px; line-height: 26px; }
  #product-gallery-grid { grid-template-columns: 1fr; }
  .qui-sommes-nous__image-wrapper { margin-top: 24px; }
  .nos-matieres__subtitle { font-size: 18px; }
}

/* ── Responsive Display Classes: Mobile & Desktop Variants ── */
.mobile-only { display: none; }
.desktop-only { display: block; }

@media (max-width: 1050px) {
  .mobile-only { display: block; }
  .desktop-only { display: none; }
}

@media (min-width: 1051px) {
  .mobile-only { display: none; }
  .desktop-only { display: block; }
}