/* Store: category pages (/category/*) and product pages (/product-page/*). */

.crumbs { display: flex; align-items: center; gap: 14px; font: 300 16px/22.4px var(--f-body); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold); }
.crumbs__sep { width: 8px; height: 14px; }
[dir="rtl"] .crumbs__sep { transform: scaleX(-1); }

/* ---------- Category ---------- */
.store {
  display: grid; grid-template-columns: 200px 1fr; column-gap: 40px;
  max-width: var(--page); margin: 0 auto; padding: 4px 20px 20px;
}
.store .crumbs { grid-column: 1 / -1; align-items: flex-start; height: 62px; }

.store-side__title {
  padding-bottom: 16px; border-bottom: 1px solid var(--grey);
  font: 700 20px/28px var(--f-display);
}
.store-side__title--filter { margin-top: 48px; }
.store-side__cats { margin: 15px 0 0; padding: 0; list-style: none; }
.store-side__cats li + li { margin-top: 12px; }
.store-side__cats a { font: 300 16px/20.8px var(--f-body); text-decoration: none; }
.store-side__cats a[aria-current="page"] { color: var(--slate); text-decoration: underline; text-underline-offset: 3px; }
.store-side__cats a:hover { color: var(--gold); }

.filters details { border-bottom: 1px solid var(--grey); }
.filters summary {
  display: flex; justify-content: space-between; align-items: center;
  height: 54px; cursor: pointer; list-style: none; font: 300 16px/22.4px var(--f-body);
}
.filters summary::-webkit-details-marker { display: none; }
.filters summary::after { content: '+'; font: 300 22px/1 var(--f-body); }
.filters details[open] summary::after { content: '\2212'; }
.filters details[open] { padding-bottom: 12px; }
.check { display: flex; align-items: center; gap: 12px; height: 30px; font: 300 16px/22.4px var(--f-body); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--navy); }
.price-range { position: relative; padding: 6px 0 0; }
.price-range input[type=range] { display: block; width: 100%; accent-color: var(--navy); }
.price-range__values { display: flex; justify-content: space-between; font: 300 14px/20px var(--f-body); }

.store-banner { width: 100%; height: 280px; object-fit: cover; margin-bottom: 24px; }
.store-main__title { font: 700 28px/39.2px var(--f-display); }
.store-main__desc { max-width: 672px; margin-top: 1px; font: 300 16px/24px var(--f-body); }
.store-bar { display: flex; justify-content: space-between; align-items: center; margin: 54px 0 16px; }
.store-bar__count { font: 300 14px/19.6px var(--f-body); }
.sort { display: flex; align-items: center; gap: 4px; font: 300 16px/22.4px var(--f-body); }
.sort select {
  border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231e2233'/%3E%3C/svg%3E") no-repeat right center / 14px 8px;
  padding: 0 24px 0 0; font: inherit; color: inherit; cursor: pointer; appearance: none;
}

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px 20px; margin: 0; padding: 0; list-style: none; }
.product-card a { display: block; text-decoration: none; }
.product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .2s; }
.product-card a:hover img { opacity: .85; }
.product-card__name { margin-top: 16px; font: 300 16px/24px var(--f-body); }
.product-card__price { margin-top: 4px; font: 300 16px/24px var(--f-body); }
.store-empty { padding: 40px 0; font: 300 16px/24px var(--f-body); }

/* ---------- Product ---------- */
.product { max-width: 890px; margin: 0 auto; padding: 64px 0 40px; }
.product .crumbs { margin-bottom: 64px; }
.product__layout { display: grid; grid-template-columns: 500px 355px; gap: 35px; }
.product__media img { width: 500px; height: 500px; object-fit: cover; border: 1px solid var(--gold); }
.product__desc { margin-top: 21px; width: 488px; font: 300 16px/24px var(--f-body); }
.product__name { font: 300 28px/33.6px var(--f-body); }
.product__price { margin-top: 29px; font: 300 16px/19px var(--f-body); }

.order-form { margin-top: 21px; font: 300 14px/21px var(--f-body); }
.order-form .field + .field { margin-top: 15px; }
.order-form label { display: block; margin-bottom: 8px; }
.select { position: relative; }
.select::after {
  content: ''; position: absolute; right: 14px; top: 15px; width: 10px; height: 10px; pointer-events: none;
  border-right: 1px solid #444; border-bottom: 1px solid #444; transform: rotate(45deg) translate(-3px, -3px);
}
[dir="rtl"] .select::after { right: auto; left: 14px; }
.select select, .order-form input[type=email] {
  display: block; width: 100%; height: 41px; padding: 0 12px; border: 1px solid rgba(0, 0, 0, .6); border-radius: 0;
  background: #fff; font: 300 15px/22.5px var(--f-body); color: #444; appearance: none;
}
.qty { display: inline-flex; width: 92px; height: 37px; border: 1px solid rgba(0, 0, 0, .6); }
.qty button { width: 30px; border: 0; background: none; font: 300 18px/1 var(--f-body); color: var(--navy); cursor: pointer; }
.qty input { width: 30px; border: 0; background: none; text-align: center; font: 300 14px/1 var(--f-body); -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.order-form__submit {
  display: block; width: 100%; height: 40px; margin-top: 32px; border: 0;
  background: var(--slate); color: var(--cream); font: 300 16px/24px var(--f-body); cursor: pointer;
}
.order-form__submit:hover { background: var(--navy); }
.order-form .form-status { margin-top: 12px; }

.share { display: flex; gap: 18px; margin: 46px 0 0; padding: 0 0 0 4px; list-style: none; }
.share a { display: block; width: 20px; height: 20px; }
.share svg { width: 20px; height: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .product { padding-left: 24px; padding-right: 24px; }
  .product__layout { grid-template-columns: 1fr 1fr; }
  .product__media img { width: 100%; height: auto; aspect-ratio: 1; }
  .product__desc { width: auto; }
}
.filter-toggle, .store-side__close { display: none; }

/* Mobile: Wix 320px units, see site.css */
@media (max-width: 760px) {
  .crumbs { gap: calc(14 * var(--m)); font-size: calc(16 * var(--m)); line-height: calc(22.4 * var(--m)); }
  .store { display: block; padding: calc(4 * var(--m)) calc(20 * var(--m)) calc(30 * var(--m)); }
  .store .crumbs { height: auto; }
  .store-banner, .store-main__desc { display: none; }
  .store-main { position: relative; }
  .store-main__title { margin-top: calc(22 * var(--m)); font-size: calc(28 * var(--m)); line-height: calc(43.4 * var(--m)); }
  .store-bar { margin: calc(20 * var(--m)) 0 calc(15 * var(--m)); }
  .store-bar__count { font-size: calc(14 * var(--m)); }
  .filter-toggle {
    display: block; border: 0; background: none; padding: 0; cursor: pointer; color: var(--navy);
    font: 300 calc(16 * var(--m))/calc(22.4 * var(--m)) var(--f-body);
  }
  .store-side {
    display: none; position: fixed; inset: 0; z-index: 60; overflow: auto;
    padding: 24px 20px; background: var(--cream);
  }
  .store-side.is-open { display: block; }
  .store-side__close {
    display: block; position: absolute; right: 14px; top: 10px; width: 36px; height: 36px;
    border: 0; background: none; font-size: 30px; line-height: 1; cursor: pointer; color: var(--navy);
  }
  .store-side .sort { margin-top: 24px; }
  .product-grid { grid-template-columns: 1fr; gap: calc(30 * var(--m)); }
  .product-card img { height: calc(280 * var(--m)); }
  .product-card__name { margin-top: calc(16 * var(--m)); font-size: calc(16 * var(--m)); line-height: calc(24.8 * var(--m)); }
  .product-card__price { margin-top: calc(3 * var(--m)); font-size: calc(16 * var(--m)); line-height: calc(24 * var(--m)); }

  .product { padding: calc(24 * var(--m)) calc(40 * var(--m)) calc(40 * var(--m)); }
  .product .crumbs { flex-wrap: wrap; row-gap: calc(8 * var(--m)); margin-bottom: calc(28 * var(--m)); }
  .product__layout { display: flex; flex-direction: column; gap: 0; }
  .product__media { display: contents; }
  .product__media img { order: 1; width: calc(240 * var(--m)); height: calc(240 * var(--m)); }
  .product__info { order: 2; margin-top: calc(24 * var(--m)); }
  .product__desc { order: 3; width: auto; margin-top: calc(26 * var(--m)); font-size: calc(16 * var(--m)); line-height: calc(24 * var(--m)); }
  .product__name { font-size: calc(28 * var(--m)); line-height: calc(33.6 * var(--m)); }
  .product__price { margin-top: calc(8 * var(--m)); font-size: calc(16 * var(--m)); }
  .order-form { margin-top: calc(25 * var(--m)); font-size: calc(14 * var(--m)); }
  .order-form__submit { margin-top: calc(23 * var(--m)); height: calc(40 * var(--m)); font-size: calc(16 * var(--m)); }
  .share { display: none; }
}