/* Reusable Media d’Oro UI primitives. Import tokens.css first. */
.od-ui{font-family:var(--od-font-ui);font-size:var(--od-type-body);line-height:1.5;color:var(--od-ink)}
.od-wordmark{display:inline-flex;flex-direction:column;width:max-content;white-space:nowrap;line-height:1;color:var(--od-ink)}
.od-wordmark__name{font:normal 31px/1 var(--od-font-display);letter-spacing:-.055em}
.od-wordmark__subtitle{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:5px;color:var(--od-muted);font:normal 8px/1 var(--od-font-ui)}
.od-wordmark__subtitle .word-gap{width:4px;flex:none}
.od-kicker{color:#9a805a;font:normal 12px/1.4 var(--od-font-ui);letter-spacing:.19em;text-transform:uppercase}
.od-display{font:normal var(--od-type-hero)/.98 var(--od-font-display);letter-spacing:-.05em}
.od-title{font:normal var(--od-type-section)/1.05 var(--od-font-display);letter-spacing:-.05em}
.od-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:46px;padding:11px 27px;background:transparent;border:1px solid transparent;color:var(--od-ink);font:normal 12px/1.3 var(--od-font-ui);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.od-button--primary{background:#202221;border-color:#202221;color:#fff}
.od-button--primary:hover{background:#4d4e48;border-color:#4d4e48}
.od-button--outline{border-color:var(--od-ink);min-width:218px;justify-content:space-between}
.od-button--outline:hover{background:var(--od-ink);color:#fff}
.od-button--text{border:0;border-bottom:1px solid currentColor;min-height:0;padding:0 0 8px;justify-content:flex-start}
.od-button--text:hover{color:var(--od-gold)}
.od-button:disabled{opacity:.4;cursor:not-allowed}
.od-arrow{width:21px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none;transition:transform .2s}
.od-button:hover:not(:disabled) .od-arrow{transform:translateX(3px)}
.od-mode{display:inline-flex;align-items:center;gap:1px;padding:2px;border-radius:var(--od-radius-pill);background:#3b3d3b}
.od-mode button{border:0;border-radius:var(--od-radius-pill);background:transparent;color:#dddcd6;padding:6px 12px;font:normal 11px/1.2 var(--od-font-ui);cursor:pointer;white-space:nowrap}
.od-mode button[aria-pressed=true]{background:#f2f0e9;color:#242523}
.od-tab,.od-size{border:1px solid #d4d2ca;background:transparent;color:#55564f;font:normal 13px/1.3 var(--od-font-ui);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.od-tab{border-radius:var(--od-radius-pill);padding:8px 17px}
.od-tab[aria-pressed=true],.od-size[aria-pressed=true]{background:var(--od-ink);border-color:var(--od-ink);color:#fff}
.od-tab:hover:not([aria-pressed=true]),.od-size:hover:not([aria-pressed=true]){border-color:#929087}
.od-size{min-width:44px;min-height:39px;padding:9px 10px}
.od-badge{display:inline-block;background:var(--od-paper);padding:7px 10px;color:var(--od-ink);font:normal 11px/1.2 var(--od-font-ui);letter-spacing:.04em}
.od-badge[hidden]{display:none}
.od-product{min-width:0;background:transparent}
.od-product__media{position:relative;display:grid;place-items:center;aspect-ratio:1/1.13;background:var(--od-surface)}
.od-product__media img{width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply}
.od-product__media .od-badge{position:absolute;left:16px;top:16px}
.od-product__details{display:flex;justify-content:space-between;gap:15px;padding:15px 2px 0}
.od-product__name{margin:0 0 4px;font-size:14px}
.od-product__meta{margin:0;color:var(--od-muted);font-size:12px}
.od-product__price{font-size:15px;white-space:nowrap}
.od-product__action{margin-top:7px;padding:5px 0;border:0;border-bottom:1px solid #aaa69b;background:transparent;color:#6d6657;font:normal 12px/1.4 var(--od-font-ui);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.od-product__action:hover{color:var(--od-ink);border-color:var(--od-ink)}
.od-input{width:100%;min-height:46px;border:0;border-bottom:1px solid var(--od-ink);border-radius:0;background:transparent;padding:10px 0;color:var(--od-ink);font:normal 16px/1.4 var(--od-font-ui)}
.od-input::placeholder{color:#8b8c85}
.od-input:focus{outline:0;border-bottom:2px solid var(--od-gold)}
.od-ui :is(a,button,input):focus-visible{outline:2px solid var(--od-gold);outline-offset:3px}
@media(max-width:600px){.od-wordmark__name{font-size:25px}.od-wordmark__subtitle{font-size:7px}.od-product__media .od-badge{left:8px;top:8px}}