/* ------------------------------------------------------------------
 * Vendor storefront (TMA-11), see templates/listings/store.liquid.
 * Loaded after profile.css, whose rules the reused blocks still carry.
 * Linked with a ?v= cache-buster from the template: bump it on every change.
 * ------------------------------------------------------------------ */

/* Banner: the vendor's cover, nothing over it. Without a cover, the brand
   colours instead of the old blurred mask. */
.kr-store-banner {
  height: 280px;
  background-color: #eef4ef;
  background-position: center;
  background-size: cover;
}

.kr-store-banner--plain {
  height: 200px;
  background-image: linear-gradient(120deg, #d7eee8 0%, #e9f6df 55%, #f5fbe8 100%);
}

/* Identity: logo over the banner's edge, name, city, rating, categories,
   actions. */
.kr-store-id {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px 28px;
  align-items: start;
  margin-top: -64px;
}

.kr-store-id__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 144px;
  height: 144px;
  padding: 14px;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(17, 24, 39, 0.14);
}

.kr-store-id__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.kr-store-id__text,
.kr-store-id__actions {
  padding-top: 80px;
}

.kr-store-id__name {
  margin: 0 0 8px;
  color: #111827;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.kr-store-id__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  color: #4b5563;
  font-size: 15px;
}

.kr-store-id__city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.kr-store-id__city svg {
  width: 16px;
}

.kr-store-id__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}

.kr-store-id__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.kr-store-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-size: 13px;
}

.kr-store-id__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 16px;
}

.kr-store-id__actions .btn {
  white-space: nowrap;
}

.kr-store-id__actions #socialSectionStore {
  flex-basis: 100%;
  justify-content: flex-end;
}

.kr-store-id__actions #socialSectionStore:empty {
  display: none;
}

/* Sections */
.kr-store > section {
  margin-top: 48px;
}

.kr-store-title,
.kr-store .about_the_store h3,
.kr-store-catalog .results_list h2,
.kr-store #rateSectionhead h2 {
  margin: 0 0 16px;
  color: #111827;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

/* About: a few lines, then "Lire la suite". */
.kr-store .about_the_store_cnt {
  margin-top: 0;
  color: #374151;
  font-size: 16px;
  line-height: 1.6;
}

.kr-store [data-kr-clamp] .about_the_store_cnt {
  max-height: calc(1.6em * 6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.kr-store-about__more {
  margin-top: 8px;
}

.kr-store-about__more[hidden] {
  display: none;
}

.kr-store-link {
  padding: 0;
  border: none;
  background: none;
  color: #111827;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}

/* The gallery opens with the profile picture and the cover, which profile.css
   hides (both are shown above): it only has something to show from its third
   picture on, counted before and after slick wraps them. Below that it keeps
   no room, and the section none when there is no text either. */
.kr-store .about_the_store_gallery:not(:has(.pdetails-largeimages > .pdetails-singleimage:nth-child(3), .slick-track > .slick-slide:nth-child(3))),
.kr-store-about:not(:has(.about_the_store, .pdetails-largeimages > .pdetails-singleimage:nth-child(3), .slick-track > .slick-slide:nth-child(3))) {
  display: none;
}

/* The gallery as the grid profile.css lays out, all pictures at once. Two
   things kept it blank: the tenant's own head code sets
   .pdetails-images{opacity:0} for the product page's loading skeleton, which
   only the product page lifts, and slick's fade mode stacks the slides with
   inline opacity:0 but for the current one (the hidden profile picture). */
.kr-store .about_the_store_gallery .pdetails-images {
  opacity: 1;
}

.kr-store .about_the_store_gallery .slick-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  transform: none !important;
}

.kr-store .about_the_store_gallery .slick-slide {
  position: static !important;
  left: auto !important;
  width: auto !important;
  margin: 0;
  opacity: 1 !important;
}

.kr-store .about_the_store_gallery .slick-slide img {
  height: 200px;
  border-radius: 12px;
  object-position: center;
  cursor: zoom-in;
}

/* Practical information: white cards on a grey band that runs edge to edge
   (the shadow paints the band's sides, the clip keeps it off the sections
   above and below). Labels, terms and commitments are cards of the same grid:
   a few lines each, shown open rather than folded at the end of the page. */
.kr-store > .kr-store-infos {
  padding: 40px 0 44px;
  background: #f3f4f6;
  box-shadow: 0 0 0 100vmax #f3f4f6;
  clip-path: inset(0 -100vmax);
}

.kr-store-infos__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.kr-store-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

.kr-store-card--wide {
  grid-column: 1 / -1;
}

/* Contact and hours are the long cards: over two rows, they leave the third
   column to the short ones (services, then labels), stacked. */
@media (min-width: 992px) {
  .kr-store-infos__grid {
    grid-auto-flow: row dense;
  }

  .kr-store-card--tall {
    grid-row: span 2;
  }
}

.kr-store-card .side_item_st {
  gap: 10px;
  margin: 0;
  padding: 0;
  border: none;
}

.kr-store-card .side_item_st + .side_item_st {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eceef1;
}

.kr-store-infos .side_head_title h4 {
  color: #111827;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.kr-store-infos .side_body_ct {
  margin: 0;
  color: #374151;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.kr-store-card__note,
.kr-store-infos .dl_retour {
  color: #374151;
  font-size: 14px;
  line-height: 1.45;
}

.kr-store-infos .side_body_bt .btn,
.kr-store-infos #vendorTos .btn {
  margin-top: 4px;
}

.kr-store-infos .vendor-schedule ul {
  gap: 4px;
}

/* Labels: the known ones are logos (profile.css draws them from the class);
   any other was 0px text, so invisible. It reads as a chip instead. */
.kr-store .label-certif-list {
  gap: 12px;
}

.kr-store .label-certif-list span {
  width: 88px;
  height: 88px;
}

.kr-store .label-certif-list span:not(.electrorev):not(.solid\'r):not(.rec\'up) {
  width: auto;
  height: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
}

.kr-store .about-user-badge-app:empty {
  display: none;
}

/* Commitments: the pale green text on pale green was hard to read. */
.kr-store .engagements-list {
  gap: 8px;
}

.kr-store .engagements-list span {
  padding: 4px 12px;
  background: #e3f4ea;
  color: #1d6b43;
  font-size: 13px;
}

.kr-store .liste-autres-boutiques {
  gap: 16px;
}

.kr-store .liste-autres-boutiques h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.kr-store .liste-autres-boutiques p {
  margin: 0;
  color: #374151;
  font-size: 15px;
}

/* Catalogue */
.kr-store-catalog .result_list_wrapper {
  margin-top: 0;
}

.kr-store-catalog .str_side {
  margin-top: 0;
}

/* Tablets: the actions go under the name, the cards on two columns. */
@media (max-width: 991px) {
  .kr-store-infos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kr-store-id {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .kr-store-id__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 8px;
  }

  .kr-store-id__actions #socialSectionStore {
    justify-content: flex-start;
  }

  .kr-store-title,
  .kr-store .about_the_store h3,
  .kr-store-catalog .results_list h2,
  .kr-store #rateSectionhead h2 {
    font-size: 20px;
  }
}

/* Phones and tablets: the filters column stacks above the products, so the
   "Filtrer" button came before the catalogue's title, pulled 15px up against
   it. Both columns step aside (display: contents) to order the title, the
   button, the filters it opens, then the products. */
@media (max-width: 991px) {
  .kr-store-catalog .result_list_wrapper {
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  .kr-store-catalog .str_side,
  .kr-store-catalog .results_list {
    display: contents;
  }

  .kr-store-catalog .results_list > * {
    order: 3;
  }

  .kr-store-catalog .results_list > h2 {
    order: 0;
    margin-bottom: 0;
  }

  .kr-store-catalog .str_side > .visible-xs {
    order: 1;
    margin-top: 24px;
  }

  .kr-store-catalog .str_side .toggle-filters {
    margin-top: 0;
  }

  .kr-store-catalog #side-filters {
    order: 2;
  }

  /* 24px between the button and the products, as above it: the grid's own
     32px, and the empty list of active filters' 12.5px, made it 72px. The
     active filters, when there are some, sit 16px under the button. */
  .kr-store-catalog .selected-filters {
    margin: 16px 0 0;
  }

  .kr-store-catalog .selected-filters:not(:has(li)) {
    margin: 0;
  }

  .kr-store-catalog .results_list_row {
    margin-top: 24px;
  }
}

/* Phones: one column, the products before the practical information. */
@media (max-width: 767px) {
  .kr-store-banner {
    height: 180px;
  }

  .kr-store-banner--plain {
    height: 120px;
  }

  .kr-store {
    display: flex;
    flex-direction: column;
  }

  .kr-store-id {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: -48px;
  }

  .kr-store-id__logo {
    width: 96px;
    height: 96px;
    padding: 10px;
    border-radius: 16px;
  }

  .kr-store-id__text,
  .kr-store-id__actions {
    padding-top: 0;
  }

  .kr-store-id__name {
    font-size: 24px;
  }

  .kr-store-id__actions .btn {
    flex: 1 1 auto;
  }

  .kr-store > section {
    margin-top: 32px;
  }

  .kr-store-about {
    order: 1;
  }

  .kr-store-catalog {
    order: 2;
  }

  .kr-store-infos {
    order: 3;
  }

  .kr-store-reviews {
    order: 4;
  }

  .kr-store > .kr-store-infos {
    padding: 24px 0 28px;
  }

  .kr-store-infos__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

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

  .kr-store .about_the_store_gallery .slick-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .kr-store .about_the_store_gallery .slick-slide img {
    height: 140px;
  }
}