:root { --mood-serif: Georgia, "Times New Roman", serif; --mood-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
.mood-shop { --accent: #c98589; --accent-strong: #a95f69; --page: #f7efe4; --surface: #fffaf3; --text: #2b2420; --muted: #6e625a; --border: rgba(72, 51, 40, .15); margin: 0; color: var(--text); background: var(--page); font-family: var(--mood-sans); }
.mood-shop.mood-spooky { color-scheme: dark; --accent: #d78691; --accent-strong: #eba0aa; --page: #151416; --surface: #201e21; --text: #f4ebe4; --muted: #b9adb0; --border: rgba(239, 218, 213, .13); }
.mood-header { min-height: 82px; padding: 0 max(24px, calc((100% - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); }
.mood-home { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.mood-home span { width: 38px; aspect-ratio: 1; display: grid; place-items: center; color: var(--accent); background: var(--surface); border: 1px solid var(--accent); border-radius: 50%; font-family: var(--mood-serif); font-size: 24px; }
.mood-home b { font-family: var(--mood-serif); font-size: 19px; font-weight: 400; }
.mood-header nav { display: flex; align-items: center; gap: clamp(17px, 3vw, 36px); }
.mood-header nav a { position: relative; color: var(--muted); text-decoration: none; font-family: var(--mood-serif); font-size: 14px; }
.mood-header nav a::after { content: ""; position: absolute; height: 1px; left: 0; right: 100%; bottom: -7px; background: var(--accent); transition: right .2s ease; }
.mood-header nav a:hover::after, .mood-header nav a.active::after { right: 0; }
.mood-header nav a.active { color: var(--text); }

.shop-hero { position: relative; min-height: 500px; padding: 85px max(24px, calc((100% - 1180px) / 2)); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--border); }
.shop-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mood-cozy .shop-hero::before { background: linear-gradient(90deg, var(--page) 0 43%, rgba(247,239,228,.88) 52%, rgba(247,239,228,.08) 100%), url("img/bg-cozy.png") right 47% / 66% auto no-repeat; }
.mood-spooky .shop-hero::before { background: radial-gradient(circle at 78% 42%, rgba(205,124,135,.18), transparent 18%), radial-gradient(circle at 80% 40%, #40343c 0, #211e23 25%, #111012 68%); }
.mood-spooky .shop-hero::after { content: ""; position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(112deg, transparent 0 35px, rgba(255,255,255,.035) 36px 38px); }
.shop-hero-inner { position: relative; z-index: 2; width: min(560px, 53%); }
.shop-eyebrow { margin: 0 0 13px; color: var(--accent-strong); text-transform: uppercase; letter-spacing: .22em; font-size: 9px; font-weight: 800; }
.shop-hero h1 { margin: 0; font-family: var(--mood-serif); font-size: clamp(60px, 8vw, 105px); line-height: .88; letter-spacing: -.055em; font-weight: 400; }
.shop-hero-inner > p:not(.shop-eyebrow) { max-width: 520px; margin: 25px 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.shop-hero-inner > a { width: fit-content; min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; gap: 18px; color: #fff; background: var(--accent); border-radius: 7px; outline: 1px dashed rgba(255,255,255,.7); outline-offset: -6px; text-decoration: none; text-transform: uppercase; font-family: var(--mood-serif); font-size: 12px; letter-spacing: .06em; }
.mood-spooky .shop-hero-inner > a { color: var(--text); background: transparent; border: 1px solid var(--accent); }
.shop-hero-art { position: absolute; z-index: 1; right: max(25px, calc((100% - 1180px) / 2)); width: 390px; aspect-ratio: 1; }
.mood-cozy .shop-hero-art { display: none; }
.mood-spooky .shop-hero-art::before { content: ""; position: absolute; left: 18%; bottom: 5%; width: 52%; height: 62%; border-radius: 48% 48% 38% 38%; background: repeating-radial-gradient(circle at 50% 45%, #302d31 0 4px, #151416 5px 9px); filter: drop-shadow(0 22px 20px #080708); }
.mood-spooky .shop-hero-art::after { content: ""; position: absolute; right: 3%; bottom: 10%; width: 39%; aspect-ratio: .9; border-radius: 48% 48% 34% 34%; background: repeating-radial-gradient(circle at 45% 50%, #e8dbc8 0 4px, #cbbba6 5px 9px); transform: rotate(5deg); filter: drop-shadow(0 18px 15px #080708); }
.shop-hero-art span::before, .shop-hero-art span::after { content: ""; position: absolute; z-index: 3; top: 51%; width: 25px; aspect-ratio: 1; border-radius: 50%; background: #dba656; box-shadow: inset 0 0 0 7px #09080a; }
.shop-hero-art span::before { left: 31%; }.shop-hero-art span::after { left: 46%; }
.shop-hero-art i::before, .shop-hero-art i::after { content: ""; position: absolute; z-index: 3; right: 9%; top: 55%; width: 37px; height: 49px; border-radius: 50%; background: #151416; }
.shop-hero-art i::after { right: 26%; }
.shop-hero-art b { position: absolute; z-index: 4; right: 18%; top: 72%; width: 15px; height: 20px; border-radius: 50%; background: #151416; }

.shop-collection { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 85px 0 105px; }
.shop-collection-heading { margin-bottom: 36px; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.shop-collection-heading h2 { max-width: 720px; margin: 0; font-family: var(--mood-serif); font-size: clamp(32px, 4.5vw, 52px); line-height: 1.04; letter-spacing: -.035em; font-weight: 400; }
.shop-collection-heading > span { flex: 0 0 auto; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.shop-piece-grid { row-gap: 28px; }
.shop-piece-grid .piece-card { padding: 10px 10px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 30px rgba(50,35,28,.07); }
.mood-spooky .shop-piece-grid .piece-card { box-shadow: 0 14px 35px rgba(0,0,0,.24); }
.shop-piece-grid .piece-image { height: 330px; }
.mood-spooky .shop-piece-grid .piece-image:not(.has-image) { background: linear-gradient(145deg, #50434b, #171519); }
.mood-spooky .shop-piece-grid .crochet-placeholder { background: repeating-radial-gradient(circle, rgba(234,220,203,.9) 0 7px, rgba(28,25,29,.9) 8px 14px, rgba(201,111,125,.88) 15px 22px); }
.shop-piece-grid .piece-details, .shop-piece-grid .piece-description { margin-inline: 7px; }
.shop-piece-grid .piece-category, .shop-piece-grid .piece-description { color: var(--muted); }
.shop-piece-grid .piece-shop { border-color: var(--border); color: var(--accent); }
.shop-empty { padding: 90px 25px; text-align: center; border: 1px dashed var(--border); border-radius: 15px; }
.shop-empty > span { color: var(--accent); font-family: var(--mood-serif); font-size: 45px; }
.shop-empty h2 { margin: 12px 0 8px; font-family: var(--mood-serif); font-size: 34px; font-weight: 400; }
.shop-empty p { color: var(--muted); }

.mood-switch { padding: 70px max(24px, calc((100% - 1180px) / 2)); display: flex; justify-content: space-between; align-items: center; gap: 35px; color: #f8eee7; background: #1a181b; }
.mood-spooky .mood-switch { color: #302721; background: #f1dfd5; }
.mood-switch p { margin: 0; font-family: var(--mood-serif); font-size: clamp(30px, 4vw, 49px); }
.mood-switch a { flex: 0 0 auto; padding: 14px 19px; border: 1px solid currentColor; border-radius: 7px; text-decoration: none; text-transform: uppercase; font-family: var(--mood-serif); font-size: 11px; letter-spacing: .08em; }
.mood-switch a span { color: var(--accent); margin-left: 8px; }
.shop-ebay { padding: 30px max(24px, calc((100% - 1180px) / 2)); display: flex; justify-content: space-between; align-items: center; gap: 25px; color: var(--muted); background: var(--surface); font-size: 12px; }
.shop-ebay a { color: var(--text); font-weight: 800; text-decoration: none; }
.mood-footer { min-height: 80px; padding: 20px max(24px, calc((100% - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); border-top: 1px solid var(--border); background: var(--page); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.mood-footer a { text-decoration: none; }

@media (max-width: 850px) {
  .shop-hero { min-height: 460px; }
  .shop-hero-inner { width: 62%; }
  .shop-hero-art { right: -35px; width: 340px; opacity: .7; }
  .piece-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .mood-header { min-height: 72px; }
  .mood-home b { display: none; }
  .mood-home span { width: 36px; }
  .mood-header nav { gap: 14px; }
  .mood-header nav a { font-size: 12px; }
  .mood-header nav a:last-child { display: none; }
  .shop-hero { min-height: 560px; padding-block: 70px; align-items: flex-start; }
  .shop-hero-inner { width: 100%; }
  .shop-hero h1 { font-size: 63px; }
  .mood-cozy .shop-hero::before { background: linear-gradient(180deg, rgba(247,239,228,.96) 0 58%, rgba(247,239,228,.24) 100%), url("img/bg-cozy.png") center bottom / auto 63% no-repeat; }
  .shop-hero-art { right: 50%; bottom: -52px; width: 295px; transform: translateX(50%); opacity: .48; }
  .shop-collection { width: min(100% - 28px, 1180px); padding-block: 65px 75px; }
  .shop-collection-heading { display: block; }
  .shop-collection-heading > span { display: block; margin-top: 14px; }
  .piece-grid { grid-template-columns: 1fr; }
  .shop-piece-grid .piece-image { height: 370px; }
  .mood-switch { align-items: flex-start; flex-direction: column; }
  .shop-ebay { align-items: flex-start; flex-direction: column; }
  .mood-footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }