/*
Theme Name: Kiss Me Monster
Theme URI: https://kissmonster.mvp.sbarron.com
Author: Kiss Me Monster
Description: Weekly wholesale import for a cult video shop.
Version: 1.0.0
DESIGN_REFS: https://diabolikdvd.com — the visitor shops cult discs by title and price | https://vinegarsyndrome.com — the visitor preorders a restoration and reads the price
WOULD_LOOK_WRONG_ON: prodeel — a green motorway of boxes; lotline — a ticket laid on a lot
*/

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/QGYyz_MVcBeNP4NjuGObqx1XmO1I4TC1C4E.ttf") format("truetype");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/QGYyz_MVcBeNP4NjuGObqx1XmO1I4QK1C4E.ttf") format("truetype");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/QGYyz_MVcBeNP4NjuGObqx1XmO1I4deyC4E.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/rnCs-xNNww_2s0amA9vKsV3G.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/rnCs-xNNww_2s0amA9vmtl3G.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/rnCs-xNNww_2s0amA9uCt13G.ttf") format("truetype");
}

:root {
  --walnut: #241816;
  --oxblood: #7a1e2c;
  --oxblood-deep: #4c121c;
  --bone: #f0e2cf;
  --brass: #d4a24a;
  --ink: #1a1210;
}

* { box-sizing: border-box; }
img { border-radius: 0; max-width: 100%; height: auto; }

body {
  margin: 0;
  color: var(--bone);
  background-color: var(--walnut);
  background-image:
    linear-gradient(180deg, rgba(122, 30, 44, 0.35), rgba(36, 24, 22, 0.2) 28%, rgba(26, 18, 16, 0.55)),
    url("assets/dark-wall.png");
  background-size: auto, 420px;
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  line-height: 1.45;
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  background: var(--bone);
  color: var(--ink);
  padding: 8px 12px;
  z-index: 2;
}

.mast {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: baseline;
  padding: 18px 20px 8px;
  background-image: linear-gradient(100deg, var(--oxblood-deep), var(--oxblood) 55%, #8d2a38);
  box-shadow: 0 18px 30px rgba(20, 8, 10, 0.35);
}
.mark {
  font-family: "Spectral", serif;
  font-weight: 700;
  font-size: 2rem;
  color: var(--bone);
  text-decoration: none;
  letter-spacing: -0.03em;
}
.mast nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.mast nav a {
  color: var(--brass);
  font-weight: 500;
  text-decoration: none;
}
.mast nav a:hover {
  transform: translateY(-2px);
  color: var(--bone);
}
.bow {
  width: 100%;
  height: 28px;
  color: var(--brass);
}

.shop-photo {
  margin: 0 20px;
  overflow: hidden;
  height: 42vw;
  min-height: 180px;
  max-height: 420px;
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35), 0 2px 0 var(--brass);
  background: var(--oxblood-deep);
}
.shop-photo-short { max-height: 240px; min-height: 140px; }
.shop-photo img {
  width: 100%;
  height: 140%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.gf-sheet {
  margin: 18px 16px 40px;
  padding: 16px 14px 28px;
  background-color: var(--bone);
  background-image:
    linear-gradient(180deg, rgba(255, 248, 236, 0.45), rgba(232, 210, 184, 0.35)),
    url("assets/paper-fibers.png");
  color: var(--ink);
  box-shadow: 0 20px 40px rgba(12, 6, 6, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.sheet-kicker {
  font-family: "Spectral", serif;
  font-size: 1.35rem;
  margin: 0 0 12px;
}
.lede, .notice, .what, .aside-title { margin: 0 0 12px; }
.notice {
  padding: 10px 12px;
  background-image: linear-gradient(90deg, rgba(122, 30, 44, 0.12), rgba(212, 162, 74, 0.18));
  border-left: 4px solid var(--oxblood);
}

.gf-row {
  margin: 0 0 12px;
  padding: 12px;
  background-image: linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(240, 226, 207, 0.9));
  box-shadow: 0 8px 18px rgba(60, 24, 20, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.gf-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 28px rgba(60, 24, 20, 0.16);
}
.gf-row h2 {
  font-family: "Spectral", serif;
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 8px;
}
.chip {
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  transition: background 160ms ease, transform 160ms ease;
}
.gf-row:hover .chip { transform: translateX(4px); }
.verdict-update .chip { background: var(--oxblood); }
.verdict-create .chip { background: #245c45; }
.verdict-keep .chip { background: #5c4a32; }
.gf-row dl {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
}
.gf-row dt {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.gf-row dd { margin: 0; font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 16px;
  text-decoration: none;
  display: inline-block;
  transition: transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 8px 0 #1a1210;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 11px 0 #1a1210; }
.button:active { transform: translateY(2px); box-shadow: 0 4px 0 #1a1210; }
.brass { background: var(--brass); color: var(--ink); }
.quiet { background: transparent; color: var(--oxblood); box-shadow: inset 0 0 0 2px var(--oxblood); }
.quiet:hover { box-shadow: inset 0 0 0 2px var(--oxblood), 0 8px 0 rgba(26, 18, 16, 0.15); }

.file { display: block; margin: 0 0 12px; }
.file input { display: block; margin-top: 6px; max-width: 100%; }
.map-grid { display: grid; gap: 10px; margin: 0 0 14px; }
.map-grid label span { display: block; font-size: 0.85rem; }
.map-grid select { width: 100%; font: inherit; padding: 6px; background: #fffaf3; color: var(--ink); }

.shop-page { padding: 0 0 40px; }
.shop-page h1 {
  font-family: "Spectral", serif;
  margin: 18px 20px 8px;
  font-size: 2.4rem;
}
.woocommerce ul.products {
  list-style: none;
  margin: 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.woocommerce ul.products li.product {
  width: 100%;
  float: none;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background-image: linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(240, 226, 207, 0.92));
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(12, 6, 6, 0.22);
  transition: transform 180ms ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); }
.woocommerce ul.products li.product img { width: 120px; height: auto; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "Spectral", serif;
  font-size: 1.25rem;
}
.woocommerce ul.products li.product a { color: var(--ink); text-decoration: none; }
.woocommerce div.product {
  margin: 0 16px 24px;
  padding: 16px;
  background: var(--bone);
  color: var(--ink);
  box-shadow: 0 16px 30px rgba(12, 6, 6, 0.25);
}
.woocommerce div.product .product_title { font-family: "Spectral", serif; }
.colophon { color: var(--bone); padding: 8px 20px 20px; }

@media (min-width: 800px) {
  .mast, .gf-sheet, .shop-page h1 { padding-left: 40px; padding-right: 40px; }
  .shop-photo, .woocommerce ul.products, .woocommerce div.product { margin-left: 40px; margin-right: 40px; }
  .gf-row dl { grid-template-columns: repeat(5, 1fr); }
  .map-grid { grid-template-columns: 1fr 1fr; }
  .woocommerce ul.products li.product { flex-wrap: nowrap; align-items: center; }
}