.catalogue-page { background: url("assets/fond.jpg") center / cover fixed; }
.catalogue-main { overflow: hidden; }
.catalogue-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(65px, 10vw, 125px) 24px; }
.catalogue-hero h1 { margin: 42px 0 0; color: var(--pink); font-family: "Moon Get", sans-serif; font-size: clamp(3.08rem, 10vw, 7.7rem); line-height: 1.05; text-transform: uppercase; text-shadow: 5px 5px 0 var(--cream); }
.catalogue-hero > div > p:last-child { max-width: 600px; margin-top: 18px; font-size: 1.05rem; line-height: 1.7; }
.catalogue-hero figure { position: relative; margin: 0; padding: 10px 10px 32px; background: #fff; box-shadow: 10px 12px 0 rgb(113 49 61 / 23%); transform: rotate(3deg); }
.catalogue-hero figure::before { position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; background: rgb(227 131 140 / 58%); content: ""; transform: translateX(-50%) rotate(-4deg); }
.catalogue-hero figure img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.catalogue-hero figcaption { padding-top: 10px; color: var(--pink-dark); font-family: "Moon Get", sans-serif; font-size: .7rem; text-align: center; }

.shop-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto clamp(80px, 10vw, 125px); }
.upcoming-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto clamp(80px, 10vw, 125px); }
.shop-heading { display: flex; gap: 28px; align-items: end; justify-content: space-between; margin-bottom: 30px; }
.shop-heading h2 { max-width: 760px; margin: 7px 0 0; color: var(--wine); font-family: "Moon Get", sans-serif; font-size: clamp(2.2rem, 6vw, 5.1rem); line-height: 1.05; text-transform: uppercase; }
.shop-all-link { flex: 0 0 auto; padding: 13px 16px 11px; color: var(--wine); font-family: "Moon Get", sans-serif; font-size: .7rem; text-decoration: none; text-transform: uppercase; background: var(--cream); border: 2px solid var(--wine); box-shadow: 4px 4px 0 var(--pink); transition: transform 160ms ease, color 160ms ease, background 160ms ease; }
.shop-all-link:hover, .shop-all-link:focus-visible { color: #fff; background: var(--wine); transform: translate(-2px, -2px); }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 4vw, 42px); }
.shop-card { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(0, 1.25fr); gap: clamp(18px, 3vw, 32px); align-items: center; padding: clamp(18px, 3vw, 30px); background: rgb(255 250 245 / 95%); border: 2px solid var(--wine); box-shadow: 9px 10px 0 rgb(113 49 61 / 22%); }
.shop-card-image { align-self: center; aspect-ratio: auto; border: 0; background: transparent; }
.shop-card-image img { height: auto; object-position: center; }
.shop-card-content { display: flex; align-items: flex-start; flex-direction: column; padding: 0; }
.shop-card h3 { margin: 0 0 16px; color: var(--pink); font-family: "Moon Get", sans-serif; font-size: clamp(1.1rem, 2.4vw, 2rem); line-height: 1.05; text-transform: uppercase; }
.shop-card h3.shop-card-title-small { font-size: clamp(.72rem, 1.8vw, 1.4rem); }
.shop-grid .marah-shop-card { order: 10; }
.shop-card-content > p:not(.item-type) { margin: 0 0 22px; font-size: .9rem; line-height: 1.65; }
.buy-button { display: inline-flex; gap: 12px; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding: 14px 16px 12px; color: #fff; font-family: "Moon Get", sans-serif; font-size: .72rem; line-height: 1.2; text-decoration: none; text-transform: uppercase; background: var(--pink); border: 2px solid var(--wine); box-shadow: 4px 4px 0 var(--wine); transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.buy-button span { font-family: Arial, sans-serif; font-size: 1.2rem; }
.buy-button:hover, .buy-button:focus-visible { background: var(--wine); box-shadow: 1px 1px 0 var(--wine); transform: translate(3px, 3px); }
.buy-button:disabled { color: var(--pink-dark); background: var(--cream); border-style: dashed; box-shadow: none; cursor: not-allowed; opacity: .85; }

.catalogue-browser { max-width: 1240px; margin: 0 auto clamp(80px, 12vw, 150px); background: rgb(255 250 245 / 93%); border: 2px solid var(--wine); box-shadow: 13px 14px 0 rgb(113 49 61 / 24%); }
.archive-bar { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 7px 12px 6px 15px; color: var(--cream); font-family: "Moon Get", sans-serif; font-size: .75rem; letter-spacing: .05em; background: var(--wine); }
.catalogue-tools { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 20px; align-items: end; padding: 24px; border-bottom: 1px dashed rgb(113 49 61 / 35%); }
.catalogue-search { display: grid; gap: 7px; color: var(--pink-dark); font-family: "Moon Get", sans-serif; font-size: .7rem; text-transform: uppercase; }
.catalogue-search input { width: 100%; min-height: 42px; padding: 9px 12px; color: var(--wine); font: inherit; background: #fff; border: 2px solid var(--wine); outline: none; }
.catalogue-search input:focus { box-shadow: 3px 3px 0 var(--pink); }
.catalogue-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.catalogue-filters button, .view-toggle { min-height: 38px; padding: 8px 11px; color: var(--wine); font-family: "Moon Get", sans-serif; font-size: .66rem; text-transform: uppercase; background: var(--cream); border: 1px solid var(--wine); cursor: pointer; }
.catalogue-filters button[aria-pressed="true"] { color: #fff; background: var(--pink); }
.view-toggle { min-width: 42px; font-family: Arial, sans-serif; font-size: 1.35rem; }
.catalogue-count { padding: 15px 24px; color: var(--pink-dark); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.catalogue-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 12px 28px 38px; }
.catalogue-item { position: relative; display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 24px; align-items: center; min-height: 260px; padding: 24px; background: #fff; border: 1px solid rgb(113 49 61 / 32%); box-shadow: 6px 7px 0 rgb(227 131 140 / 18%); transition: transform 170ms ease; }
.catalogue-item:hover { transform: translateY(-4px) rotate(-.3deg); }
.catalogue-item[hidden] { display: none; }
.catalogue-image-button { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; background: var(--cream); border: 1px solid rgb(113 49 61 / 15%); cursor: zoom-in; }
.shop-card-image.catalogue-image-button { border: 0; }
.catalogue-image-button img { display: block; width: 100%; height: 205px; object-fit: cover; object-position: top; transition: transform 180ms ease; }
.shop-card-image.catalogue-image-button img { height: auto; max-height: 310px; object-fit: contain; object-position: center; }
.catalogue-image-button > span { position: absolute; right: 5px; bottom: 5px; padding: 5px 7px; color: var(--cream); font-family: "Moon Get", sans-serif; font-size: .55rem; background: rgb(113 49 61 / 88%); }
.shop-card-image > span { right: 8px; bottom: 8px; padding: 7px 9px 6px; font-size: .58rem; line-height: 1; pointer-events: none; }
.catalogue-image-button:hover img, .catalogue-image-button:focus-visible img { transform: scale(1.035); }
.catalogue-image-button:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.item-index { position: absolute; top: 10px; right: 12px; color: rgb(113 49 61 / 38%); font-family: "Moon Get", sans-serif; font-size: .65rem; }
.item-type { margin: 0 0 9px; color: var(--pink-dark); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.catalogue-item h2 { margin: 0 0 12px; color: var(--pink); font-family: "Moon Get", sans-serif; font-size: clamp(1.45rem, 3vw, 2.3rem); line-height: 1.05; text-transform: uppercase; }
.catalogue-item p:not(.item-type) { font-size: .88rem; line-height: 1.55; }
.catalogue-item a { display: inline-block; margin-top: 5px; color: var(--pink-dark); font-family: "Moon Get", sans-serif; font-size: .68rem; text-decoration: none; text-transform: uppercase; }
.catalogue-unavailable { display: inline-block; margin-top: 5px; color: var(--pink-dark); font-family: "Moon Get", sans-serif; font-size: .68rem; text-transform: uppercase; opacity: .65; }
.catalogue-items.list-view { grid-template-columns: 1fr; }
.catalogue-items.list-view .catalogue-item { grid-template-columns: 115px minmax(0, 1fr); min-height: 190px; }
.catalogue-items.list-view .catalogue-image-button img { height: 145px; }
.catalogue-empty { padding: 55px 25px 70px; text-align: center; }
.catalogue-note { display: flex; gap: 22px; align-items: center; width: min(570px, calc(100% - 40px)); margin: -70px auto 110px; padding: 22px 28px; color: var(--wine); background: var(--cream); border: 2px dashed var(--pink); transform: rotate(-1deg); }
.catalogue-note strong { color: var(--pink); font-family: "Moon Get", sans-serif; }

.catalogue-lightbox { position: fixed; z-index: 100; inset: 0; display: grid; padding: 18px; overflow: auto; background: rgb(31 11 15 / 84%); backdrop-filter: blur(5px); place-items: start center; }
.catalogue-lightbox[hidden] { display: none; }
.catalogue-lightbox-panel { width: min(1120px, 100%); margin: auto 0; padding: 0 14px 18px; background: var(--paper); border: 3px solid var(--wine); box-shadow: 15px 15px 0 rgb(113 49 61 / 35%); }
.catalogue-lightbox-bar { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; margin: 0 -14px 18px; padding: 7px 9px 7px 14px; color: var(--cream); font-family: "Moon Get", sans-serif; font-size: .72rem; background: var(--wine); }
.catalogue-lightbox-bar button { display: grid; width: 31px; height: 29px; padding: 0; color: var(--wine); font-size: 1.3rem; line-height: 1; background: var(--cream); border: 0; cursor: pointer; place-items: center; }
.catalogue-lightbox-panel > img { display: block; width: min(900px, 100%); height: auto; margin: 0 auto; }
body.catalogue-lightbox-open { overflow: hidden; }

@media (max-width: 1040px) {
  .catalogue-browser { width: calc(100% - 32px); }
  .catalogue-tools { grid-template-columns: 1fr; align-items: start; }
  .view-toggle { justify-self: start; }
  .catalogue-items { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .catalogue-hero { grid-template-columns: 1fr; }
  .catalogue-hero figure { width: min(260px, 72vw); margin: 0 auto; }
  .catalogue-item { grid-template-columns: 105px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .catalogue-image-button img { height: 165px; }
  .catalogue-note { align-items: flex-start; flex-direction: column; }
  .shop-heading { align-items: flex-start; flex-direction: column; }
  .shop-card { grid-template-columns: 110px minmax(0, 1fr); padding: 18px; }
  .shop-card-content { padding: 0; }
  .shop-card-image img { height: 100%; }
  .shop-card h3, .shop-card h3.shop-card-title-small { max-width: 100%; font-size: clamp(.56rem, 2.5vw, .72rem); line-height: 1.14; overflow-wrap: normal; }
  .catalogue-item h2 { max-width: 100%; font-size: clamp(1.05rem, 5.2vw, 1.45rem); overflow-wrap: anywhere; }
}

@media (max-width: 440px) {
  .shop-card { grid-template-columns: 1fr; }
  .shop-card-image { width: min(240px, 100%); margin: 0 auto; }
  .shop-card-image img { height: 100%; }
  .shop-card-content { padding: 0; }
}