/* Shop hero — editorial, image-led composition. */
.shop-hero {
  --hero-copy: #d8ddd5;
  --hero-heading: #f4f1e8;
  --hero-accent: #55c7d4;
  position: relative;
  display: grid;
  min-height: min(44rem, 76svh);
  padding: clamp(8rem, 11vw, 10rem) var(--page-inline) clamp(4.5rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(4, 16, 10, .58) 0%, rgba(5, 20, 12, .34) 36%, rgba(5, 17, 11, .06) 66%, rgba(5, 17, 11, .1) 100%),
    linear-gradient(180deg, rgba(6, 21, 12, .08), rgba(6, 21, 12, .32)),
    url("../assets/images/hero/hero.jpg") 62% center / cover;
}

.shop-hero::after {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7rem;
  background: linear-gradient(transparent, rgba(18, 24, 18, .86));
  content: "";
  pointer-events: none;
}

.shop-hero-content {
  align-self: center;
  width: min(100%, 37rem);
  margin-left: clamp(0rem, 5vw, 4.5rem);
  text-align: left;
  transform: translateY(-1.25rem);
}

.shop-hero .eyebrow {
  margin: 0 0 1.1rem;
  color: rgba(231, 232, 224, .78);
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(.75rem, .75vw, .88rem);
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
  animation: shop-hero-enter .65s both ease-out;
}

.shop-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--hero-heading);
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(3.4rem, 4.8vw, 4.75rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: .98;
  text-wrap: balance;
  text-shadow: none;
  animation: shop-hero-enter .7s .08s both ease-out;
}

.shop-hero h1 > span { display: block; }

.shop-hero h1 .shop-hero__accent {
  color: var(--hero-accent);
  font-style: italic;
  font-weight: 400;
}

.shop-hero__description {
  max-width: 29rem;
  margin: 1.25rem 0 0;
  color: var(--hero-copy);
  font-size: clamp(.98rem, 1.25vw, 1.12rem);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1.75;
  animation: shop-hero-enter .7s .16s both ease-out;
}

.shop-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.55rem;
  animation: shop-hero-enter .7s .24s both ease-out;
}

.shop-hero__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: .72rem 1.2rem;
  border: 1px solid rgba(173, 232, 234, .5);
  border-radius: .55rem;
  background: #78dce6;
  box-shadow: 0 8px 20px rgba(8, 60, 63, .22);
  color: #0a3537;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.shop-hero__actions a:hover {
  background: #a8e7e8;
  box-shadow: 0 12px 26px rgba(8, 60, 63, .3);
  transform: translateY(-2px);
}

.shop-hero__actions a:nth-child(2) {
  border-color: rgba(230, 239, 232, .38);
  background: rgba(8, 33, 24, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  color: #f0f3ed;
  backdrop-filter: blur(8px);
}

.shop-hero__actions a:nth-child(2):hover {
  border-color: rgba(230, 239, 232, .62);
  background: rgba(18, 55, 40, .66);
}

@keyframes shop-hero-enter {
  from { opacity: 0; transform: translateY(.8rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shop catalog */
.shop-section {
  position: relative;
  padding: clamp(2.55rem, 4.25vw, 3.65rem) var(--page-inline) clamp(4.5rem, 9vw, 7.5rem);
  background: linear-gradient(180deg, #1a2319 0, #151914 7.5rem, #121312 16rem);
}

.shop-intro { max-width: 39rem; margin: 0 auto clamp(2rem, 3.5vw, 2.75rem); text-align: center; }
.shop-intro .eyebrow { margin-bottom: .72rem; color: #71866f; font-size: clamp(.69rem, 1vw, .75rem); font-weight: 500; letter-spacing: .3em; line-height: 1.45; text-transform: uppercase; }
.shop-intro h2 { color: #f4f2ea; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 3vw, 2.45rem); font-weight: 400; letter-spacing: .045em; line-height: 1.3; }
.shop-intro p:last-child { margin-top: .8rem; color: #a9ada4; font-size: .95rem; font-weight: 400; letter-spacing: .018em; line-height: 1.85; }
.shop-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); max-width: 90rem; margin: auto; }
.shop-filters { position: sticky; top: 6.5rem; align-self: start; padding: 1.35rem; border: 1px solid rgba(174, 187, 165, .15); border-radius: var(--radius); background: linear-gradient(145deg, rgba(38, 45, 37, .82), rgba(22, 25, 21, .92)); box-shadow: 0 20px 45px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045); backdrop-filter: blur(14px); }
.filter-heading, .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.filter-heading h3 { font-size: 1rem; }
.filter-heading button { border: 0; background: transparent; color: #9fd3a8; font-weight: 800; cursor: pointer; }
.shop-filters fieldset { display: grid; gap: .55rem; margin-top: 1.15rem; padding-top: 1.15rem; border: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.shop-filters legend { font-size: .8rem; font-weight: 800; }
.shop-filters label { color: var(--muted); font-size: .84rem; }
.filter-search { display: grid; gap: .4rem; margin-top: 1.2rem; }
.filter-search input, .shop-toolbar select { width: 100%; padding: .62rem .7rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: .55rem; background: rgba(12, 16, 12, .72); color: var(--text); }
.filter-options { display: grid; gap: .45rem; }
.price-range { position: relative; height: 1.3rem; }
.price-range input { position: absolute; width: 100%; accent-color: #3f8f58; pointer-events: none; }
.price-range input::-webkit-slider-thumb { pointer-events: auto; }
.shop-filters fieldset p { display: flex; justify-content: space-between; color: #a6d8ae; font-size: .75rem; }
.shop-catalog { min-width: 0; }
.shop-toolbar { margin-bottom: 1.5rem; padding: .85rem 1rem; border: 1px solid rgba(174, 187, 165, .1); border-radius: .85rem; background: rgba(31, 35, 29, .58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); }
.shop-toolbar .results-status { color: #b8bbb1; font-size: .86rem; }
.shop-toolbar > div { display: flex; gap: .5rem; }
.shop-toolbar label { color: var(--muted); font-size: .74rem; font-weight: 800; }
.shop-toolbar select { width: auto; margin-left: .25rem; }
.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-grid.is-loading { min-height: 24rem; }
.product-grid.is-loading::before { display: grid; grid-column: 1 / -1; min-height: 18rem; border-radius: var(--radius); background: linear-gradient(110deg, #191919 8%, #252525 18%, #191919 33%); background-size: 220% 100%; content: ""; animation: shine 1.3s linear infinite; }
.product-card { overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); border-radius: var(--radius); background: linear-gradient(150deg, #252a25, #181b18); box-shadow: 0 15px 34px rgba(0, 0, 0, .27), inset 0 1px 0 rgba(255, 255, 255, .045); transition: .3s; }
.product-card:hover { border-color: rgba(123, 190, 134, .8); box-shadow: 0 26px 52px rgba(0, 0, 0, .4), 0 0 0 1px rgba(91, 160, 104, .14); transform: translateY(-.4rem); }
.product-card__image { position: relative; overflow: hidden; background: #202720; }
.product-card__image > img { width: 100%; height: clamp(13rem, 22vw, 18rem); object-fit: cover; transition: opacity .35s, transform .5s; }
.product-card__secondary { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .product-card__secondary { opacity: 1; }
.product-card:hover .product-card__image > img { transform: scale(1.04); }
.card-heart { position: absolute; z-index: 2; top: .75rem; right: .75rem; display: grid; width: 2.35rem; height: 2.35rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(15, 15, 15, .7); color: #fff; cursor: pointer; place-items: center; }
.card-heart .fa-solid { color: #e68a8a; }
.card-badges { position: absolute; z-index: 2; top: .75rem; left: .75rem; display: grid; gap: .3rem; }
.card-badges span, .stock-badge { width: max-content; padding: .22rem .48rem; border-radius: 999px; background: rgba(30, 65, 35, .88); color: #c9efcf; font-size: .63rem; font-weight: 800; text-transform: uppercase; }
.product-details { padding: 1.3rem; }
.product-details > span { display: block; color: #8fbe8f; font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.product-details h3 { margin: .35rem 0 .45rem; font-size: 1.15rem; }
.product-details p { color: var(--muted); font-size: .84rem; }
.rating { margin-bottom: .5rem; color: #555; font-size: .78rem; letter-spacing: .08em; }
.rating .is-filled { color: #e5c76d; }
.stock-badge { display: inline-block; margin-top: .75rem; }
.out-stock { background: rgba(100, 45, 45, .7); color: #efbcbc; }
.product-bottom { display: flex; align-items: end; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
.product-bottom strong { font-size: 1.08rem; }
.product-bottom > div { display: flex; flex-wrap: wrap; justify-content: end; gap: .35rem; }
.product-bottom button { min-height: 2.25rem; padding: .42rem .55rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: .5rem; background: transparent; color: #fff; font-size: .7rem; font-weight: 800; cursor: pointer; }
.product-bottom .add-to-cart { background: #2e7d32; }
.product-bottom .add-to-cart.is-added { background: #4b9e5a; transform: scale(1.08); }
.product-bottom button:disabled { opacity: .45; cursor: not-allowed; }
.pagination { display: flex; justify-content: center; gap: .45rem; margin-top: 2rem; }
.pagination button { width: 2.4rem; height: 2.4rem; border: 1px solid rgba(255, 255, 255, .13); border-radius: 50%; background: #1b1b1b; color: #fff; font-weight: 800; cursor: pointer; }
.pagination .active { border-color: #2e7d32; background: #2e7d32; }
.quick-view, .compare-modal { width: min(48rem, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--radius); background: #1b1b1b; color: #fff; box-shadow: 0 30px 70px #000; }
.quick-view::backdrop, .compare-modal::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }
.quick-view__close { position: absolute; top: .8rem; right: .8rem; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: #222; color: #fff; font-size: 1.4rem; cursor: pointer; }
.quick-view__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.quick-view__layout > img { width: 100%; height: 18rem; border-radius: .8rem; object-fit: cover; }
.quick-view h2 { font-size: 2rem; line-height: 1.1; }
.quick-view strong { display: block; margin: .7rem 0; font-size: 1.3rem; }
.quick-view p { color: var(--muted); }
.quick-view__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.compare-launch { position: fixed; z-index: 10; right: 1.5rem; bottom: 1.5rem; padding: .75rem 1rem; border: 1px solid rgba(166, 216, 174, .5); border-radius: 999px; background: #1d3321; color: #e6f7e8; font-weight: 800; cursor: pointer; }
.compare-table { display: grid; gap: 1px; margin-top: 1rem; background: rgba(255, 255, 255, .1); }
.compare-row { display: grid; grid-template-columns: 8rem repeat(3, minmax(0, 1fr)); gap: 1px; background: #1b1b1b; }
.compare-row > * { min-width: 0; padding: .7rem; background: #171717; font-size: .8rem; }
.compare-row > span { color: #a6d8ae; font-weight: 800; }
.compare-row p { color: var(--muted); }

@keyframes shine { to { background-position: -220% 0; } }

@media (max-width: 991px) {
  .shop-hero { min-height: min(42rem, 72svh); padding-top: 8.5rem; background-position: 58% center; }
  .shop-hero-content { width: min(100%, 34rem); margin-left: clamp(0rem, 3vw, 1.5rem); transform: translateY(-.75rem); }
  .shop-hero h1 { font-size: clamp(2.9rem, 6.25vw, 4rem); }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-filters { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .filter-heading, .filter-search { grid-column: 1 / -1; }
  .shop-filters fieldset { margin: 0; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .shop-hero { min-height: max(38rem, 100svh); padding-top: 7.75rem; padding-bottom: 4.25rem; background-position: 64% center; }
  .shop-hero-content { width: 100%; margin-left: 0; transform: none; }
  .shop-hero .eyebrow { margin-bottom: .9rem; font-size: .72rem; letter-spacing: .19em; }
  .shop-hero h1 { max-width: 10ch; font-size: clamp(2.65rem, 12vw, 3.65rem); line-height: 1.01; }
  .shop-hero__description { max-width: 28rem; margin-top: 1.2rem; font-size: .98rem; line-height: 1.7; }
  .shop-hero__actions { gap: .65rem; margin-top: 1.45rem; }
  .shop-hero__actions a { min-height: 2.75rem; padding-right: 1rem; padding-left: 1rem; }
  .shop-toolbar { flex-direction: column; align-items: start; }
  .shop-toolbar > div { width: 100%; justify-content: space-between; }
  .shop-filters { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .quick-view__layout { grid-template-columns: 1fr; }
  .quick-view__layout > img { height: 14rem; }
  .compare-row { grid-template-columns: 6rem repeat(3, minmax(7rem, 1fr)); overflow: auto; }
  .compare-table { overflow: auto; }
}

@media (max-width: 390px) {
  .shop-hero { padding-top: 7.25rem; }
  .shop-hero .eyebrow { font-size: .67rem; letter-spacing: .15em; }
  .shop-hero h1 { font-size: clamp(2.45rem, 12vw, 3rem); }
  .shop-hero__actions a { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .shop-hero .eyebrow, .shop-hero h1, .shop-hero__description, .shop-hero__actions { animation: none; }
  .shop-hero__actions a:hover { transform: none; }
}