/* ===================================================================
   MAISON GEORGES LARNICOL — responsive overrides
   Loaded AFTER main.css (priority 300) so rules here win.
   Put all @media / mobile-tablet adjustments in this file.

   Breakpoints used across the theme:
     - 1200px  large desktop / down
     - 992px   small desktop / tablet landscape
     - 768px   tablet portrait
     - 480px   mobile
   =================================================================== */

/* Burger toggle — hidden on desktop, shown at <= 980px (see block below) */
.header-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 31px;
  height: 34px;
  padding: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.header-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--dark);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.header-burger span:nth-child(3) {
  width: 70%;
}
.header-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-burger.is-active span:nth-child(2) { opacity: 0; }
.header-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================ <= 1700px ============================ */
@media (max-width: 1700px) {
  .header-top-nav .nav-links a {
    font-size: 13px;
  }
}

@media (max-width: 1600px) {
  .products {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  }
}

@media (max-width: 1599px) {
  .products {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  }
}

/* ============================ <= 1200px ============================ */
@media (max-width: 1200px) {
  .lcontainer { width: 92%; }
}

@media (max-width: 1025px) {
  .sitemap .lcontainer .footer-col,
  .sitemap .lcontainer .footer-col:last-child {
    width: calc(50% - 20px);
  }
}

/* ============================ <= 992px ============================= */
@media (max-width: 992px) {
  /* product page: stack gallery + info */
  .product-page { grid-template-columns: 1fr; gap: 30px; }

  /* category / all-products grid */
  .page-category .products { grid-template-columns: repeat(2, 1fr); }
}


/* ==================== <= 980px : header burger nav ==================== */
/* Logo (left) — icons (center) — burger (right); menu opens full-width. */
@media (max-width: 980px) {
  #search #js-product-list .products,
  .product-suggestions .products,
  .product-viewed .products {  
    grid-template-columns: repeat(2, 1fr);
  }
  #header {
    padding: 0;
  }

  .header-top-nav {
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 20px;
  }

  .header-top-nav .nav-icons .profile .profile-block {
    left: 0;
    right: auto;
  }

  /* logo — left */
  .header-top-nav .header-logo-bar {
    order: 1;
    width: auto;
    justify-content: flex-start;
  }
  .header-top-nav .header-logo-bar img {
    max-width: 170px;
  }

  /* icons — center */
  .header-top-nav .nav-icons {
    order: 2;
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  /* burger — right */
  .header-burger {
    order: 3;
    display: flex;
    flex: 0 0 auto;
  }
  .on-mobile {
    display: block;
  }
  /* menu — full-screen drawer.
     The panel is position:fixed with inset:0, so it has no natural collapsed
     height: max-height cannot hide it the way it did when it was an absolutely
     positioned dropdown. It is slid out of view instead, with visibility so it
     is not reachable by keyboard or screen readers while closed. */
  .header-top-nav .nav-links {
    order: 4;
    position: fixed;
    inset: 0;
    width: 100vw;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 56px 0 24px;
    background: #FFF;
    overflow-y: auto;
    z-index: 1000;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  /* Full tree at the top of the drawer. Specificity is deliberately high:
     the rule that hides it on desktop sits at the end of this file, and an
     equally specific selector there would win on source order alone. */
  .header-top-nav .nav-links .mobile-menu { display: block; width: 100%; }
  .mobile-menu__list,
  .mobile-menu__sub { list-style: none; margin: 0; padding: 0; }
  .header-top-nav .nav-links .mobile-menu__link {
    display: block;
    padding: 13px 24px;
    font-size: 17px;
    border-bottom: 1px solid var(--light-gray);
  }
  .header-top-nav .nav-links .mobile-menu__link--strong { font-weight: 600; }
  /* Sub-entries read as part of the heading above them, so no divider. */
  .header-top-nav .nav-links .mobile-menu__sublink {
    display: block;
    padding: 8px 24px 8px 42px;
    font-size: 14px;
    color: #6b6b6b;
    border-bottom: none;
  }
  .mobile-menu__sub { padding-bottom: 8px; border-bottom: 1px solid var(--light-gray); }

  .header-top-nav .nav-links.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }
  .header-top-nav .nav-links a {
    padding: 0 24px;
    font-size: 16px;
  }

  .header-links-redirects {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-top-nav .nav-links .header-links-redirects > a {
    display: none;
  }

  /* logo at the top of the drawer */
  .header-top-nav .nav-links .on-mobile {
    padding: 0 24px 20px;
    text-align: center;
  }
  .header-top-nav .nav-links .on-mobile a {
    display: inline-block;
    padding: 0;
    border-bottom: none;
  }
  .header-top-nav .nav-links .on-mobile > img {
    max-width: 190px;
    width: 100%;
  }

  #header-nav-links .footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: stretch;
    justify-content: flex-end;
    padding-top: 30px;
  }
  #header-nav-links .footer-col ul {
    max-width: 350px;
    margin: 0 auto;
  }
  .header-logs {
    width: 100%;
  }
  #header-nav-links .footer-col ul li {
    text-align: left;
  }
  #header-nav-links .footer-col ul li a {
    justify-content: center;
  }
  #header-nav-links .footer-col ul li a img {
    margin: 0 !important;
  }
  /* .header-top-nav .nav-icons {
    flex: none;
  } */

  .header-top-nav .nav-icons.on-mobile {
    display: flex;
  }

  .header-top-nav .nav-links,
  .header-top-nav .nav-icons {
    width: auto;
  }

  .on-mobile .logo-img {
    width: 200px;
    margin: 0 auto;
  }

  /* close button — floats over the top right corner so it does not push the
     logo off centre */
  .header-top-nav .nav-links .nav-links__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 6px;
    right: 10px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--dark);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
  }

  .header-top-nav .nav-links .nav-links__close:hover {
    color: var(--brown);
  }

  /* .header-burger {
    order: 1;
  }
  .header-top-nav .nav-icons {
    order: 3;
  }
  .header-top-nav .header-logo-bar {
    order: 2;
  } */

  .header-top-nav .nav-icons .map-icon,
  .header-top-nav .nav-icons .profile,
  .header-top-nav .nav-icons .locate_pin {
    display: none;
  }
  .header-top-nav .nav-icons.on-mobile .profile {
    display: block;
  }

  .header-top-nav .nav-icons.on-mobile .profile .profile-block {
    border: 1px solid #000;
  }

  .home-stats .lcontainer {
    flex-direction: column;
  }
  .home-stats .lcontainer .img-cnt,
  .home-stats .lcontainer .count-cnt {
    width: 100%;
  }

  .boutique-grid {
    gap: 30px;
    justify-content: flex-start;
  }
  .boutique-card {
    width: calc(50% - 15px);
  }
}

@media (min-width: 769px) {
  #index .home-hero { height: auto; min-height: 0; }
  #index .home-hero .larnicol-hero-picture { display: block; }
  #index .home-hero .larnicol-hero-picture img { display: block; width: 100%; height: auto; }
}

/* ============================ <= 768px ============================= */
@media (max-width: 768px) {

  .header-top-nav .header-logo-bar img {
    max-width: 250px;
    width: 250px;
  }

  .header-top-nav .header-logo-bar img.logo-img-mobile {
    display: block;
  }
  .header-top-nav .header-logo-bar img.logo-img-desktop {
    display: none;
  }

  .home-engagements {
    display: none;
  }

  #index .cat-nav {
    display: none;
  }

  .home-stats .lcontainer,
  .home-stats .lcontainer .img-cnt {
    width: 100% !important;
  }
  .home-stats .lcontainer .count-cnt {
    max-width: 1440px !important;
    width: 90% !important;
    margin: 0 auto !important;
  }

  .page-category .category__header .page-title,
  .page-category .category__header h1 {
    font-size: 30px;
  }
  .category-products__heading .category-subnav {
    justify-content: center;
  }
  .category-products__heading {
    flex-direction: column;
  }
  .category-products__heading .section-title {
    font-size: 25px;
    line-height: 1.3;
  }

  .subcategory__link {
    width: calc(50% - 20px);
  }
  .subcategory__name {
    font-size: 25px;
  }

  .section-title {
    font-size: 30px;
  }
  .stat__num  {
    font-size: 40px;
  }
  .home-stats {
    padding: 0 0 30px;
  }
  .home-boutique {
    padding: 30px 0;
  }

  .title-wrap {
    flex-direction: column;
    gap: 10px;
  }
    /* .title-wrap span {
    text-align: right;
    } */
  /* homepage sections */
  .boutique-grid { grid-template-columns: repeat(2, 1fr); }
  .home-infos { grid-template-columns: 1fr; gap: 30px; }
  .home-stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .home-engagements { grid-template-columns: 1fr; gap: 32px; }
  .boutiques-wrapper { grid-template-columns: 1fr; }
  .home-infos .lcontainer {
    flex-direction: column;
  }
  .home-infos .lcontainer {
    flex-direction: column;
  }
  .home-infos .lcontainer h2 {
    order: 1;
  }
  .home-infos .lcontainer .infos-text {
    order: 3;
    width: 100%;
    padding-right: 0;
  }
  /* .home-infos .infos-text .infos-text-item:first-child {
    border-top  : 1px solid #B8AD9E;
  } */
  .home-infos .lcontainer > h2 {
    border-bottom: none;
    margin-bottom: 0 !important;
  }

  .home-infos .lcontainer .infos-img {
    order: 2;
    width: 100%;
    margin-bottom: 20px;
    display: none;
  }

  /* hero */
  .home-hero .hero-content {
    width: 100%;
    padding: 40px 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: auto;
    right: auto;
    text-align: center;
  }
  .hero-btns-wrapper {
    justify-content: center;
  }

  /* category */
  .page-category .category__header,
  .page-category #products { padding-left: 20px; padding-right: 20px; }
  .subcategory__list--with-images { grid-template-columns: repeat(2, 1fr); }

  /* blog */
  .gazette__title { font-size: 32px; padding: 8px 20px; }
  .gazette__item { grid-template-columns: 1fr; gap: 16px; }

  /* contact */
  .contact-page { grid-template-columns: 1fr; gap: 40px; }
  .contact-page__form { padding: 28px 20px; }

  /* footer */
  .footer-columns { grid-template-columns: repeat(2, 1fr); }

  /* product extra images */
  .product-page__extra-images { grid-template-columns: 1fr; }

  .footer-columns { grid-template-columns: repeat(2, 1fr); }

  .boutique-grid { grid-template-columns: repeat(2, 1fr); }
  .home-infos { grid-template-columns: 1fr; gap: 30px; }
  .home-stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .home-engagements { grid-template-columns: 1fr; gap: 32px; }
  .boutiques-wrapper { grid-template-columns: 1fr; }

  .page-category .category__header,
  .page-category #products { padding-left: 20px; padding-right: 20px; }
  .subcategory__list--with-images { grid-template-columns: repeat(2, 1fr); }
  .page-category .products { grid-template-columns: repeat(2, 1fr); }

  .product-page { grid-template-columns: 1fr; gap: 30px; }
  .product-page__extra-images { grid-template-columns: 1fr; }

  .contact-page { grid-template-columns: 1fr; gap: 40px; }
  .contact-page__form { padding: 28px 20px; }

  .gazette__title { font-size: 32px; padding: 8px 20px; }
  .gazette__item { grid-template-columns: 1fr; gap: 16px; }

  .home-stats .lcontainer .stat {
    width: calc(50% - 20px);
  }
  .home-engagements .lcontainer .engagement {
    width: calc(50% - 15px);
  }

  .boutique-item__name {
    font-size: 18px;
  }


  .login-form-cont .lcontainer {
    flex-direction: column;
    gap: 0;
  }
  .login-form-cont .left-banner > img {
    display: none;
  }
  .login-form-cont .left-banner,
  .login-form-cont .inputs-form {
    width: 100%;
  }
  .left-banner .auth-txt {
    text-align: center;
  }
  .login-form-cont .inputs-form {
    margin: 0 auto;
  }
  .login-form-cont .login__register-prompt,
  .login-form-cont .register-form__login-prompt {
    flex-direction: column;
  }
  .auth-txt h3 {
    font-size: 32px;
  }

  .product-page__name,
  .product-page__price,
  .product-page__actions .quantity-button__group input {
    font-size: 32px;
  }

  #index .home-hero {
    height: calc(100svh - var(--larnicol-header-height, 72px));
    overflow: hidden;
  }
  #index .home-hero .hero-img-wrapper,
  #index .home-hero .larnicol-hero-picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  #index .home-hero .hero-img-wrapper img,
  #index .home-hero .larnicol-hero-picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  #index .home-hero .hero-content {
    z-index: 1;
    width: 100%;
    top: auto;
    left: 0;
    bottom: 7%;
    right: auto;
    transform: none;
    padding: 20px 24px;
    text-align: center;
  }
  #index .home-hero .hero-content h1 { font-size: clamp(32px, 9vw, 48px); }
  #index .home-hero .hero-content p { font-size: 16px; line-height: 1.4; }
  #index .home-hero .hero-btns-wrapper { justify-content: center; margin-top: 24px; }
  #index .home-hero .hero-btns-wrapper .btn-discover {
    width: auto;
    min-width: 155px;
    height: 52px;
    padding: 0 30px;
    border-radius: 10px;
    background: #fff;
    color: #000;
    font-size: 18px;
    text-decoration: none;
  }
  #index .home-hero .hero-btns-wrapper .btn-bag { display: none !important; }
}


@media (max-width: 700px) {
  .contact-page {
    padding: 30px 0;
  }
  .contact-page .lcontainer {
    display: flex;
    flex-direction: column;
  }
  .contact-page .lcontainer > div {
    width: 100%;
  }
}

@media (max-width: 600px) {
  #search #js-product-list .products,
  .product-suggestions .products,
  .product-viewed .products {  
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    width: 100%;
    padding: 15px 5% 50px;
  }
  .footer-bottom > span {
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
  }
  .footer-bottom > span a:after {
    display: none;
  }

  .page-category .products {
    grid-template-columns: 1fr;
  }

  .product-suggestions .products {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 500px) {
  .header-search__panel {
    max-width: 200px;
  }
  .home-hero .hero-content p br {
    display: none;
  }
  .home-infos {
    padding: 30px 0;
  }
  .sitemap .lcontainer .footer-col {
    width: 100%;
  }
  .sitemap .lcontainer .footer-col:last-child {
    width: 100%;
  }

  .product-page__category {
    font-size: 25px;
  }

  .boutique-grid {
    gap: 20px;
  }
  .boutique-grid .boutique-item {
    width: calc(50% - 10px);
  }

  .subcategory__name {
    font-size: 18px;
  }

  .page-category .category__header .category__cover {
    padding-bottom: 50px;
  }

  .co-steps {
    display: none;
  }

  .co-card .product-line__content {
    flex-direction: column;
  }
  .co-card .product-line__content-right {
    gap: 5px;
    align-items: flex-start;
  }
  .co-card .product-line__content-left {
    gap: 0;
  }
  .co-card__main {
    padding: 10px;
  }

  .co-checkout__main #conditions-to-approve label {
    display: block;
  }
}

/* ============================ <= 480px ============================= */
@media (max-width: 480px) {
  .footer-columns { grid-template-columns: 1fr; }
  .boutique-grid { grid-template-columns: 1fr; }
  .subcategory__list--with-images { grid-template-columns: repeat(2, 1fr); }
  .home-stats { grid-template-columns: 1fr; }

  .error-404__code { font-size: 70px; }
  .blog-post__title,
  .contact-page__title { font-size: 26px; }

  .footer-columns { grid-template-columns: 1fr; }
  .boutique-grid { grid-template-columns: 1fr; }
  .subcategory__list--with-images { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .home-stats .lcontainer .stat,
  .home-engagements .lcontainer .engagement {
    width: 100%;
  }

  .header-top-nav .header-logo-bar img {
    width: 180px;
    max-width: 180px;
  }
}

/* Wide desktop keeps the cropped band it was designed around. */
@media (min-width: 1301px) {
  .home-hero .hero-img-wrapper {
    height: 685px;
    overflow: hidden;
  }

  .home-hero .hero-img-wrapper img,
  .home-hero .larnicol-hero-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* ---------------------------------------------------------------- hero ----
   Below 1300px the banner takes its height from the picture: the wrapper and
   the image are width:100% / height:auto and .home-hero simply follows them.
   No forced height, no cropping, no stretching — and the overlay keeps the
   desktop position, bottom right, rather than being centred. */
@media (max-width: 1300px) {
  #index .home-hero,
  .home-hero {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  #index .home-hero .hero-img-wrapper,
  #index .home-hero .larnicol-hero-picture,
  .home-hero .hero-img-wrapper {
    display: block;
    width: 100%;
    height: auto;
  }

  #index .home-hero .hero-img-wrapper img,
  #index .home-hero .larnicol-hero-picture img,
  .home-hero .hero-img-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    /* Back to the initial value. object-fit only bites when the box differs
       from the image's own ratio, but a leftover `cover` here is exactly what
       was cropping and skewing the banner. */
    object-fit: fill;
  }

  /* Bottom right, as on desktop. Every fixed measurement scales with the
     viewport, so the block still sits inside a banner that is now shorter:
     each clamp keeps its 1300px value and shrinks from there. */
  #index .home-hero .hero-content,
  .home-hero .hero-content {
    position: absolute;
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    transform: none;
    width: 58%;
    text-align: left;
    padding-top: 0;
    padding-left: clamp(16px, 6vw, 200px);
    padding-right: clamp(16px, 3vw, 48px);
    padding-bottom: clamp(16px, 5vw, 100px);
  }
  #index .home-hero .hero-content h1,
  .home-hero .hero-content h1 {
    font-size: clamp(22px, 3.4vw, 46px);
  }
  #index .home-hero .hero-content p,
  .home-hero .hero-content p {
    font-size: clamp(12px, 1.5vw, 16px);
    line-height: 1.35;
  }
  #index .home-hero .hero-btns-wrapper,
  .home-hero .hero-btns-wrapper {
    justify-content: flex-start;
    margin-top: clamp(12px, 2vw, 30px);
  }
  #index .home-hero .hero-btns-wrapper .btn-discover,
  .home-hero .hero-btns-wrapper a {
    /* 290px is wider than the column itself once the viewport narrows. */
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: clamp(36px, 3.6vw, 50px);
    padding: 0 clamp(16px, 2.4vw, 37px);
    font-size: clamp(14px, 1.6vw, 24px);
  }
}

/* Narrow screens keep the overlay bottom right, but the column widens so the
   sentence does not shred into a dozen one-word lines. */
@media (max-width: 768px) {
  #index .home-hero .hero-content,
  .home-hero .hero-content {
    width: 72%;
  }
  #index .home-hero .hero-content h1 {
    font-size: clamp(22px, 5.5vw, 40px);
  }
  #index .home-hero .hero-content p {
    font-size: clamp(12px, 2.2vw, 16px);
  }
  #index .home-hero .hero-btns-wrapper .btn-discover {
    height: clamp(40px, 7vw, 52px);
    font-size: clamp(14px, 2.6vw, 18px);
  }
}

@media (max-width: 480px) {
  /* Still anchored right, just wide enough that the sentence does not become
     a column of single words. */
  #index .home-hero .hero-content,
  .home-hero .hero-content {
    width: 78%;
  }
}
/* The drawer tree is never drawn on desktop. */
.mobile-menu { display: none; }