/* CCE Design Shop – Mobile-only overrides
   Desktop bleibt unverändert. */

@media (max-width: 768px){

  /* Mobile soll wie Desktop wirken (helles Theme, keine "Night Mode"-Anmutung) */
  body{ background: #fff7f9 !important; color:#111827 !important; }

  /* avoid sideways scrolling */
  html, body { overflow-x: hidden; }

  /* general spacing */
  .shell{ padding: 12px 12px !important; }

  

  /* Header: Banner-Optik wie Desktop, aber ohne "quadratisch" zu wirken
     (Headerbild ist sehr breit: 6400×1440 ≈ 40:9) */
  :root{ --cat-overlap: 32px; } /* 64px-Kreise -> halbe Überlappung */
  .header-bg{
    /* Headerbild ist extrem breit – auf Mobile darf es nicht "quadratisch/zoomin" wirken.
       Wir geben der Fläche das passende Seitenverhältnis (40:9), dadurch wird nichts abgeschnitten. */
    height: clamp(110px, 22.5vw, 200px) !important;
    aspect-ratio: 40 / 9 !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
  }

  /* Wenn das JS wegen vieler Kategorien auf "cats-wrap" schaltet:
     Auf Mobile trotzdem EINZEILIG + horizontal wischbar. */
  #categoryStrip.cats-wrap{
    display:flex !important;
    grid-template-columns: none !important;
    justify-items: initial !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  #categoryStrip.cats-wrap .category-strip-item{
    width: auto !important;
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }
/* Category strip: swipeable, smaller circles, better touch */
  .category-strip{
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 12px 6px 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .category-strip::-webkit-scrollbar{ display:none; }
  .category-strip-item{ min-width: 72px; scroll-snap-align: start; }
  .category-strip-circle{ width: 64px !important; height: 64px !important; }
  #categoryStrip .category-strip-item > div:last-child{
    font-size: 12px !important;
    margin-top: 6px !important;
  }

  /* Header controls stack */
  .products-header{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #productSearch, .sort-select{ width: 100% !important; }

  /* Product grid */
  #productsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  #productsGrid .card{ border-radius: 16px !important; }
  #productsGrid .card-img{ height: 150px !important; border-radius: 14px !important; }
  #productsGrid .card-title{ font-size: 0.88rem !important; line-height: 1.18 !important; }
  #productsGrid .card-price{ font-size: 0.95rem !important; }

  /* tiny phones -> 1 column to keep it readable */
  @media (max-width: 380px){
    #productsGrid{ grid-template-columns: 1fr !important; }
    #productsGrid .card-img{ height: 190px !important; }
  }

    /* Product modal */
  .modal-content{ padding-right: 0 !important; }

  /* Mobile: Vollbild-Modal, EIN Scroll-Container (Bild + Text scrollen gemeinsam) */
  .modal-backdrop{
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  .modal{
    /* layout */
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;

    /* size */
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    /* look */
    border-radius: 0 !important; /* Fullscreen wirkt auf Mobile am saubersten */
    padding: 16px 14px 96px !important; /* Platz für mobile Buybar */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal-media{ flex: 0 0 auto !important; min-height: 0 !important; }
  .modal-content{
    flex: 1 1 auto !important;
    overflow: visible !important;
    max-height: none !important;
    padding-right: 0 !important;
  }
  .modal-content h3{
    font-size: 1.15rem !important;
    line-height: 1.22 !important;
    margin: 6px 0 10px !important;
    overflow-wrap: anywhere;
  }
  .modal-desc{
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
  }

  .modal-img-main{
    /* genug groß, aber nicht ewig – scrollt dann weg */
    height: 36vh !important;
    min-height: 220px !important;
    max-height: 44vh !important;
  }

  /* thumbs row swipe */
  .modal-thumbs{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 6px !important;
  }
  .modal-thumbs::-webkit-scrollbar{ display:none; }
  .modal-thumb{
    width: 60px !important;
    height: 60px !important;
    border-radius: 16px !important;
    flex: 0 0 auto !important;
  }

  /* Buy/back/share stack full width */
  .buy-cta-row, .buy-share-row{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .btn-back-shop, .btn-cart-pill, .btn-share-pill{ width: 100% !important; }

  .modal-variations select,
  .modal-personalization input,
  .qty-select select{ width: 100% !important; }

  /* Cart page: easier on mobile */

  .cart-page{ border-radius: 16px !important; padding: 12px 12px 16px !important; }
  .cart-page-item{
    grid-template-columns: 74px minmax(0,1fr) !important;
    gap: 8px 10px !important;
    padding: 10px 0 !important;
  }
  .cart-page-thumb{
    width: 74px !important;
    height: 74px !important;
    border-radius: 16px !important;
  }
  .cart-page-item-remove{
    justify-self: start !important;
  }
  .cart-back-wrap .btn-back-shop{ width: 100% !important; }
}