/*-- -------------------------- -->
<---        Collection          -->
<--- -------------------------- -*/

@import url('core.css');

/* Page-specific safe space for floating navbar on the Product Collection page */
:root {

  --pc-nav-offset-top: 2rem;
  --pc-nav-height-mobile: 6.5rem;
  --pc-nav-height-desktop: 6rem;
}

/* Reserve space above the section so the title never sits under the floating nav */
#collection-1602 { 
  margin-top: calc(var(--pc-nav-offset-top) + var(--pc-nav-height-mobile));
}
@media only screen and (min-width: 64rem) {
  #collection-1602 { 
    margin-top: calc(var(--pc-nav-offset-top) + var(--pc-nav-height-desktop));
  }
}
/* On scroll, keep only the navigation bar's height as the top margin */
body.scroll #collection-1602 { 
  margin-top: var(--pc-nav-height-mobile);
}
@media only screen and (min-width: 64rem) {
  body.scroll #collection-1602 { 
    margin-top: var(--pc-nav-height-desktop);
  }
}

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #collection-1602 { padding: var(--sectionPadding); }
  #collection-1602 .cs-container { width: 100%; max-width: 80rem; margin: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(3rem, 6vw, 4rem); position: relative; z-index: 1; }
  #collection-1602 .cs-content { text-align: center; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
  #collection-1602 .cs-title { margin: 0; }
  #collection-1602 .cs-button-group { margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1rem, 4vw, 2rem); }
  #collection-1602 .cs-button { font-size: 1rem; font-weight: 700; line-height: 1.2em; text-transform: uppercase; padding: 0; color: var(--bodyTextColor); background-color: transparent; border: none; position: relative; transition: color 0.3s; }
  #collection-1602 .cs-button:before { content: ""; width: 0; height: 1px; background: var(--primary); display: block; position: absolute; bottom: 0; left: 0; transition: width 0.3s; }
  #collection-1602 .cs-button:hover { color: var(--primary); cursor: pointer; }
  #collection-1602 .cs-button:hover:before { width: 100%; }
  #collection-1602 .cs-button.cs-active { color: var(--primary); }
  #collection-1602 .cs-button.cs-active:before { width: 100%; }
  #collection-1602 .cs-listing-wrapper { width: 100%; position: relative; z-index: 1; }
  #collection-1602 .cs-listing { width: 100%; margin: 0; padding: 0; display: grid; justify-items: center; grid-auto-flow: row; gap: clamp(1rem, 1.5vw, 1.25rem); position: relative; transform-style: preserve-3d; perspective: 700px; transition: transform 0.7s, opacity 0.3s, visibility 0.5s, top 0.3s, left 0.3s; transform-origin: left top; }
  #collection-1602 .cs-listing.cs-hidden { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; transform: scaleY(0) scaleX(0); pointer-events: none; }
  #collection-1602 .cs-listing.cs-hidden .cs-image { opacity: 0; transform: translateY(2.1875rem) rotateX(90deg); }
  #collection-1602 .cs-listing.cs-hidden .cs-item { transform: rotateY(180deg); opacity: 0; }
  #collection-1602 .cs-item { width: 100%; max-width: 23.4375rem; min-width: 0; opacity: 1; padding: 1rem; border: 1px solid #e8e8e8; transform: rotateY(0); transition: transform 0.7s, opacity 0.3s; }
  #collection-1602 .cs-link { text-decoration: none; }
  #collection-1602 .cs-link:hover .cs-picture img { transform: scale(1.1); }
  #collection-1602 .cs-picture-group { width: auto; height: 18.75rem; margin-bottom: 1.25rem; position: relative; }
  #collection-1602 .cs-picture { width: 100%; height: 100%; background-color: #f6f6f6; overflow: hidden; display: block; }
  #collection-1602 .cs-picture img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s; }
  #collection-1602 .cs-offer { font-size: 0.8125rem; font-weight: 700; line-height: 1.2em; text-transform: uppercase; letter-spacing: 1.3px; padding: 0.375rem; color: #fff; background: #ff4747; position: absolute; top: 0.75rem; right: 0.75rem; }
  #collection-1602 .cs-category { font-size: 1rem; line-height: 1.5em; color: #767676; }
  #collection-1602 .cs-name { font-size: clamp(1.25rem, 1vw, 1.5625rem); font-weight: 700; line-height: 1.2em; text-overflow: ellipsis; white-space: nowrap; width: 100%; margin: 0; color: var(--headerColor); overflow: hidden; }
  #collection-1602 .cs-actions { margin-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; }
  #collection-1602 .cs-price { font-size: 1.25rem; font-weight: 700; line-height: 1.2em; color: var(--secondary); }
  #collection-1602 .cs-was-price { font-size: 1rem; font-weight: 700; line-height: 1.2em; text-decoration: line-through; color: #767676; }
  #collection-1602 .cs-stars { margin-top: 0.25rem; display: flex; }
  #collection-1602 .cs-star { width: 1.25rem; height: 1.25rem; }
  #collection-1602 .cs-buy { max-height: 2.5rem; padding: 0.5rem 0.75rem; background: none; border: 2px solid var(--primary); border-radius: 0.25rem; display: inline-flex; justify-content: center; align-items: center; gap: .5rem; cursor: pointer; font-weight: 600; color: var(--primary); }
  #collection-1602 .cs-buy:hover { background: var(--primary); color: #fff; }
  #collection-1602 .cs-basket { width: 1.5rem; height: auto; }
  #collection-1602 .cs-buy.cs-contact { font-size: .9rem; white-space: nowrap; }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #collection-1602 .cs-content { flex-direction: row; justify-content: space-between; }
  #collection-1602 .cs-listing { grid-template-columns: repeat(3, 1fr); }
  #collection-1602 .cs-item { max-width: none; }
  #collection-1602 .cs-picture-group { height: clamp(12.5rem, 23vw, 20rem); }
}