:root { --sans: 'DM Sans', sans-serif; --serif: 'Playfair Display', serif; --bg: #0e0d0b; --surface: #171511; --field: #12100e; --text: #f4ecdd; --muted: #b9ad9a; --accent: #c7964b; --accent-ink: #17110a; --line: rgb(230 198 148 / .18); }
body.sy { background-image: linear-gradient(rgb(255 255 255 / .012) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .012) 1px, transparent 1px); background-size: 42px 42px; }
.sy .hero:not(.hero--cinematic) .hero__inner { grid-template-columns: minmax(0, .82fr) minmax(25rem, 1.18fr); }
.sy .hero:not(.hero--cinematic) .hero__media { height: min(72svh, 700px); border-radius: 0 0 0 8rem; }
.sy .hero__media::after { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); content: ""; }
.sy .hero h1 em { display: block; color: var(--accent); font-weight: 500; }
.sy .category-strip { border-block: 1px solid var(--line); background: #11100d; }
.sy .category-strip .grid-3 > div { padding: 2rem 0; }
.sy .category-strip strong { display: block; color: var(--accent); font-family: var(--serif); font-size: 2rem; font-weight: 500; }
.sy .category-strip p { color: var(--muted); }
.sy .composition { position: relative; overflow: clip; }
.sy .craft-panel { padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); background: #12100e; }
.sy .gift-panel { position: relative; min-height: 34rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.sy .gift-panel__copy { position: relative; z-index: 2; width: min(52rem, 85%); padding: clamp(2rem, 7vw, 6rem); }
.sy .gift-panel__image { position: absolute; inset: 0 0 0 auto; width: 55%; height: 100%; object-fit: cover; opacity: .56; mask-image: linear-gradient(90deg, transparent, #000 45%); }
.sy .hygiene-badge { width: 15rem; margin-top: 1.5rem; }
.sy .page-hero__media { border-radius: 0 0 0 5rem; }
.sy .blog-card:nth-child(4n + 2), .sy .blog-card:nth-child(4n + 3) { background: #13110e; }

@media (max-width: 700px) {
  .sy .hero:not(.hero--cinematic) .hero__inner { grid-template-columns: 1fr; }
  .sy .hero:not(.hero--cinematic) .hero__media { order: -1; height: 52svh; min-height: 25rem; border-radius: 0 0 0 3rem; }
  .sy .gift-panel__copy { width: 100%; }
  .sy .gift-panel__image { width: 100%; opacity: .23; mask-image: linear-gradient(180deg, transparent, #000); }
}