/* Oryvanta — styles that Tailwind utilities don't cover (placeholders, label, states, motion). */
/* Light design only: tells phone browsers (Chrome auto-dark, etc.) not to recolour the site in dark mode */
:root { color-scheme: only light; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: #2A3FD0; }
button, input, select, textarea { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid #2A3FD0; outline-offset: 2px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #151412; color: #F4F0E8; padding: 12px 16px; }
.skip:focus { top: 12px; color: #F4F0E8; }

.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.link-u { text-decoration: underline; text-underline-offset: 5px; }

/* Buttons */
.btn { height: 56px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; border: 0; white-space: nowrap; }
.btn-primary { background: #151412; color: #F4F0E8; }
.btn-primary:hover { background: #2E2B27; color: #F4F0E8; }
.btn-secondary { border: 1px solid #151412; background: transparent; color: #151412; }
.btn-secondary:hover { background: #151412; color: #F4F0E8; }
.btn[disabled] { background: #CFC6B6; color: #5E584F; cursor: not-allowed; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: none; border: 0; cursor: pointer; }

/* Christmas: Gifts collection only (body.xmas is set by the catalogue when the Gifts collection is open) */
.xmas-hero { background: radial-gradient(120% 140% at 0% 0%, #1B5A45 0%, #0F3B2E 45%, #0B2C22 70%), #0F3B2E; box-shadow: inset 0 -6px 0 #7A1E2C; }
.xmas-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 4px; background: repeating-linear-gradient(90deg, #C9A24A 0 14px, transparent 14px 22px); opacity: .55; }
.xmas-snow { background-image: radial-gradient(circle at 20% 30%, rgba(255,247,232,.55) 0 1.5px, transparent 2px), radial-gradient(circle at 70% 20%, rgba(255,247,232,.4) 0 1px, transparent 1.5px), radial-gradient(circle at 45% 75%, rgba(255,247,232,.35) 0 1.2px, transparent 1.8px), radial-gradient(circle at 85% 65%, rgba(255,247,232,.45) 0 1.5px, transparent 2px); background-size: 90px 90px, 130px 130px, 70px 70px, 110px 110px; animation: xmas-fall 18s linear infinite; }
@keyframes xmas-fall { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 90px, 0 130px, 0 70px, 0 110px; } }
@media (prefers-reduced-motion: reduce) { .xmas-snow { animation: none; } }
.xmas-tag { border-radius: 4px; outline: 2px dashed #C9A24A; outline-offset: -8px; }
.badge-gift { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: #7A1E2C; color: #FFF7E8; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
body.xmas { background: linear-gradient(#F4F0E8, #F4F0E8) padding-box, #F4F0E8; }
body.xmas #grid .am-card .js-img1 { box-shadow: 0 0 0 1px #E5D9C3; }
body.xmas #cat-title { color: #0F3B2E; }

/* Provisional photo placeholders — replace with <img> inside .ph (see LISEZMOI.md) */
.ph { position: relative; width: 100%; --l: rgba(21,20,18,.05); }
.ph::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-ecru { background: #EAE4D8; color: #151412; }
.ph-sand { background: #DDD4C4; color: #151412; }
.ph-stone { background: #C9BFAE; color: #151412; }
.ph-grey { background: #B9B3AA; color: #151412; }
.ph-black { background: #26241F; color: #F4F0E8; --l: rgba(255,255,255,.05); }
.tex-rib::before { background-image: repeating-linear-gradient(90deg, var(--l) 0 3px, transparent 3px 7px); }
.tex-knit::before { background-image: repeating-linear-gradient(60deg, var(--l) 0 2px, transparent 2px 9px), repeating-linear-gradient(-60deg, var(--l) 0 2px, transparent 2px 9px); }
.ph-brief { position: absolute; top: 12px; left: 12px; right: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 500; line-height: 1.35; max-width: 240px; }
.ph-tag { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: .14em; text-transform: uppercase; padding: 5px 7px; border: 1px solid currentColor; }

/* Signature: woven Oryvanta label (O + cobalt stitch), same drawing as assets/brand/oryvanta-symbol.svg */
.am-tab { position: absolute; right: -9px; top: 14%; width: 30px; height: 60px; background: #151412; border-radius: 1px; box-shadow: 0 2px 5px rgba(0,0,0,.22); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding-bottom: 6px; z-index: 2; }
.am-tab::before { content: ''; position: absolute; inset: 3px; border: 1px dashed rgba(244,240,232,.38); }
.am-tab::after { content: ''; position: absolute; bottom: 7px; left: 9px; right: 9px; height: 2px; background: #3B52E0; }
.am-tab svg { width: 17px; height: 17px; color: #F4F0E8; position: relative; top: -4px; }
@media (max-width: 767px) { .am-tab { right: 14px; } }

.badge-new { background: #151412; color: #F4F0E8; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 6px 8px; display: inline-flex; align-items: center; gap: 6px; }
.badge-new::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6F80FF; }
.badge-example { font-size: 11px; font-weight: 600; letter-spacing: .12em; border: 1.5px dashed #5E584F; padding: 4px 7px; color: #3A3732; display: inline-block; }

/* Swatches */
.sw { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; }
.sw span { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(21,20,18,.25); }
.sw[aria-checked="true"] span { box-shadow: 0 0 0 2px #F4F0E8, 0 0 0 3px #151412; }
.sw-lg { width: 44px; height: 44px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; background: none; cursor: pointer; padding: 0; }
.sw-lg span { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(21,20,18,.2); }
.sw-lg[aria-checked="true"] { border-color: #151412; }

/* Size selector */
.size-btn { height: 50px; border: 1px solid #CFC6B6; background: transparent; font-size: 15px; font-weight: 500; cursor: pointer; }
.size-btn.out { text-decoration: line-through; background: #EFEAE0; color: #6E675D; }
.size-btn[aria-checked="true"] { background: #151412; border-color: #151412; color: #F4F0E8; }

/* Filter options */
.opt { min-height: 44px; padding: 0 12px; border: 1px solid #CFC6B6; background: transparent; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.opt[aria-pressed="true"] { background: #151412; color: #F4F0E8; border-color: #151412; }
.dot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(21,20,18,.25); flex-shrink: 0; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .label { font-size: 14px; font-weight: 600; }
.input { width: 100%; height: 52px; border: 1px solid #CFC6B6; background: #fff; padding: 0 14px; font-size: 16px; color: #151412; border-radius: 0; outline: none; }
textarea.input { height: auto; padding: 12px 14px; resize: vertical; }
.input:focus { border-color: #151412; box-shadow: 0 0 0 1px #151412; }
.input[aria-invalid="true"] { border-color: #9E1F17; }
.hint { font-size: 13px; color: #4A463F; }
.err { font-size: 14px; color: #9E1F17; display: flex; gap: 6px; align-items: center; }
.err:empty { display: none; }
.check { width: 20px; height: 20px; accent-color: #151412; flex-shrink: 0; }

/* Reviews: star rating input and stars display */
.rev-star { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.rev-star svg { width: 30px; height: 30px; fill: none; stroke: #151412; stroke-width: 1.4; stroke-linejoin: round; transition: fill .15s; }
.rev-star.is-on svg { fill: #151412; }
.rev-star:focus-within { outline: 2px solid #2A3FD0; outline-offset: 2px; }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 16px; height: 16px; fill: none; stroke: #151412; stroke-width: 1.6; stroke-linejoin: round; }
.stars .on svg { fill: #151412; }

/* Overlays */
.panel { display: none; }
.panel.open { display: flex; }
.anim-in.open { animation: amIn .25s ease; }
.anim-right.open { animation: amRight .32s cubic-bezier(.2,.7,.2,1); }
.anim-left.open { animation: amLeft .3s cubic-bezier(.2,.7,.2,1); }
.anim-down.open { animation: amDown .28s ease; }
.anim-sheet.open { animation: amUp .32s cubic-bezier(.2,.7,.2,1); }
@media (min-width: 768px) { .anim-sheet.open { animation: amIn .25s ease; } }
@keyframes amIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes amRight { from { transform: translateX(100%) } to { transform: none } }
@keyframes amLeft { from { transform: translateX(-100%) } to { transform: none } }
@keyframes amUp { from { transform: translateY(100%) } to { transform: none } }
@keyframes amDown { from { transform: translateY(-24px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes amPulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
.skel { animation: amPulse 1.2s ease-in-out infinite; background: #E6DFD2; }

/* Accordions (details/summary) */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details[open] .acc-plus { display: none; }
details:not([open]) .acc-minus { display: none; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.text-pretty { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}