@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Jost:wght@400;500&display=swap");
/* CHROMD house style, loaded last on every page except the homepage (which carries the same rules itself).
   White shop, Bodoni Moda headings, Jost text, black footer, deep oxblood bands and oxblood on marks, actions and active states. */
:root{
  --h-paper:#ffffff;
  --h-ink:#0c0b0b;
  --h-soft:#5f5958;
  --h-mist:#f4f2f1;
  --h-night:#0b0a0a;
  --h-ivory:#f1efee;
  --h-ivory-soft:#aaa3a2;
  --h-ox:#5b1b24;
  --h-ox-deep:#3b1219;
  --h-ox-ink:#7a2a35;
  --h-ox-text:#cdb7b9;
  --h-display:"Bodoni Moda","Didot","Bodoni 72","Times New Roman",serif;
  --h-text:"Jost","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif;
}
html body{font-family:var(--h-text);-webkit-font-smoothing:antialiased;caret-color:var(--h-ox)}
::selection{background:var(--h-ox);color:#fff}
html body :focus-visible{outline:2px solid var(--h-ox);outline-offset:3px}

/* ---------- header: white bar, oxblood C, Bodoni wordmark ---------- */
html body .x-hdr{background:var(--h-paper)!important;color:var(--h-ink)!important;box-shadow:none!important;border:0!important}
html body .x-hdr .x-ico,html body .x-hdr a,html body .x-hdr button,html body .x-hdr select,html body .x-hdr label{color:var(--h-ink)!important}
html body .x-hdr .x-cbtn,html body .x-hdr .x-cbtn *{color:var(--h-ox)!important}
html body .x-hdr .x-cbtn path,html body .x-hdr .x-cbtn g{fill:var(--h-ox)!important}
html body .x-hdr .x-word{font-size:0!important;letter-spacing:0!important;text-transform:none!important;color:var(--h-ink)!important}
html body .x-hdr .x-word::before{content:"CHROMD";font:500 24px/1 var(--h-display);letter-spacing:.3em;padding-left:.3em;color:var(--h-ink)}
html body .x-hdr .x-bag-n{color:var(--h-ox)!important;background:none!important;font-weight:500!important}
html body .x-hdr .x-ico:hover{color:var(--h-ox)!important}
html body .x-hdr select{background-color:transparent!important;font:400 14px var(--h-text)!important;letter-spacing:0!important;text-transform:none!important}
@media (max-width:899px){html body .x-hdr .x-word::before{font-size:19px}}

/* ---------- headings everywhere: Bodoni, sentence case ---------- */
html body main h1,html body .serif-xl,html body .serif-s,html body .serif-t,html body .x-rail-h,html body .x-info h2,html body .x-match h2,html body .bag__head h2,html body .bag__head h3{font-family:var(--h-display)!important;font-weight:400!important;text-transform:none!important;letter-spacing:-.015em!important}
html body .caps-h,html body .caps-p,html body .kicker,html body .fine{text-transform:none!important;letter-spacing:0!important}
html body main h1{line-height:1.02!important}

/* ---------- shop intro: deep oxblood band ---------- */
html body .x-strip{background:var(--h-ox-deep)!important;color:var(--h-ivory)!important}
html body .x-strip h1{font-size:clamp(52px,6.4vw,104px)!important;color:var(--h-ivory)!important}
html body .x-strip .x-strip-s,html body .x-strip .x-count{color:var(--h-ox-text)!important;font-size:16px!important;letter-spacing:0!important;text-transform:none!important}

/* category tabs */
html body .v5-cats a,html body .v5-fs{font:400 15px var(--h-text)!important;text-transform:none!important;letter-spacing:0!important;color:var(--h-soft)!important}
html body .v5-cats a:hover,html body .v5-cats a[aria-current],html body .v5-cats a.is-on,html body .v5-cats a.on,html body .v5-cats a.active{color:var(--h-ink)!important;text-decoration:underline!important;text-decoration-color:var(--h-ox)!important;text-decoration-thickness:2px!important;text-underline-offset:7px!important}
html body .v5-fs:hover{color:var(--h-ox)!important}

/* ---------- product cards ---------- */
html body .x-cname,html body .x-sname,html body .card__name{font:400 15px/1.35 var(--h-text)!important;text-transform:none!important;letter-spacing:0!important;color:var(--h-ink)!important}
html body .x-cprice,html body .x-sprice{font:400 15px var(--h-text)!important;letter-spacing:0!important;font-variant-numeric:tabular-nums;color:var(--h-ink)!important}
html body .x-cref,html body .x-sref{font:400 13px var(--h-text)!important;letter-spacing:0!important;text-transform:none!important;color:var(--h-soft)!important}
html body .x-card a:hover .x-cname{color:var(--h-ox)!important}
html body [aria-pressed="true"].x-cwish svg,html body [aria-pressed="true"].x-save svg,html body .wish-on svg{color:var(--h-ox)!important;fill:var(--h-ox)!important;stroke:var(--h-ox)!important}
html body [aria-pressed="true"].x-cwish svg *,html body [aria-pressed="true"].x-save svg *{fill:var(--h-ox)!important;stroke:var(--h-ox)!important}

/* ---------- product page ---------- */
html body .x-pname{font-family:var(--h-display)!important;font-weight:400!important;font-size:clamp(32px,3.1vw,46px)!important;line-height:1.04!important;text-transform:none!important;letter-spacing:-.015em!important}
html body .x-psub{text-transform:lowercase!important;letter-spacing:0!important;font-size:15px!important;color:var(--h-soft)!important}
html body .x-psub::first-letter{text-transform:uppercase}
html body .x-pref{font-size:13.5px!important;color:var(--h-soft)!important}
html body .x-pprice{font-size:20px!important;font-variant-numeric:tabular-nums}
html body .x-assure{font-size:13.5px!important;letter-spacing:0!important;color:var(--h-soft)!important}
html body .x-pmore{color:var(--h-ink)!important;text-decoration:underline!important;text-underline-offset:5px!important}
html body .x-pmore:hover{color:var(--h-ox)!important}

/* ---------- buttons: square, ink, oxblood on hover ---------- */
html body .x-cta,html body .btn:not(.secondary),html body .x-btn,html body .x-geo-continue,html body .btn--block{background:var(--h-ink)!important;color:#fff!important;border:0!important;border-radius:0!important;font:500 15px var(--h-text)!important;letter-spacing:0!important;text-transform:none!important;min-height:52px;transition:background .3s,color .3s}
html body .x-cta *,html body .btn:not(.secondary) *{color:inherit!important;letter-spacing:0!important;text-transform:none!important}
html body .x-cta:hover,html body .btn:not(.secondary):hover,html body .x-btn:hover,html body .x-geo-continue:hover,html body .btn--block:hover{background:var(--h-ox)!important;color:#fff!important}
html body .x-cta--line,html body .btn.secondary,html body .x-geo-change{background:transparent!important;color:var(--h-ink)!important;box-shadow:inset 0 0 0 1px #cfc9c8!important;border:0!important;border-radius:0!important;font:500 15px var(--h-text)!important;letter-spacing:0!important;text-transform:none!important}
html body .x-cta--line:hover,html body .btn.secondary:hover,html body .x-geo-change:hover{background:var(--h-ink)!important;color:#fff!important;box-shadow:none!important}
html body .x-foot .x-cta--line,html body .x-strip .x-cta--line{color:var(--h-ivory)!important;box-shadow:inset 0 0 0 1px #5a4f50!important}

/* links in running text */
html body main .rich a,html body main .ulink,html body main p a{text-underline-offset:4px}
html body main .rich a:hover,html body main .ulink:hover,html body main p a:hover{color:var(--h-ox)!important}

/* ---------- region chooser and privacy banner ---------- */
html body .x-geo{border-radius:0!important;font-family:var(--h-text)!important;box-shadow:0 24px 60px rgba(12,11,11,.22)!important;border:0!important}
html body .x-geo .v5-geo-title{font:400 30px/1.1 var(--h-display)!important;text-transform:none!important;letter-spacing:-.01em!important;color:var(--h-ink)!important}
html body .x-geo .x-geo-copy,html body .x-geo .x-geo-status{letter-spacing:0!important;text-transform:none!important}
html body .x-geo label{text-transform:none!important;letter-spacing:0!important;font-size:13.5px!important;color:var(--h-soft)!important}
html body .x-geo select{border-radius:0!important;font:400 15px var(--h-text)!important;color:var(--h-ink)!important}
html body .chromd-cookies{background:var(--h-paper)!important;color:var(--h-ink)!important;font:400 14px/1.5 var(--h-text)!important;border-radius:0!important;border:0!important;box-shadow:0 24px 60px rgba(12,11,11,.2)!important}
html body .chromd-cookies strong{font:400 22px/1.15 var(--h-display)!important;letter-spacing:-.01em!important;display:block;margin-bottom:6px}
html body .chromd-cookies button{border-radius:0!important;font:500 14px var(--h-text)!important;text-transform:none!important;letter-spacing:0!important}
html body .chromd-cookies button[data-cc="all"]{background:var(--h-ink)!important;color:#fff!important;border:0!important}
html body .chromd-cookies button[data-cc="all"]:hover{background:var(--h-ox)!important}
html body .chromd-cookies button.secondary{background:transparent!important;color:var(--h-ink)!important;border:0!important;box-shadow:inset 0 0 0 1px #cfc9c8!important}
html body .chromd-cookies button.secondary:hover{box-shadow:inset 0 0 0 1px var(--h-ink)!important}

/* ---------- footer: black, service row in oxblood, name at full width ---------- */
html body .x-foot{background:var(--h-night)!important;color:var(--h-ivory)!important;position:relative}
html body .x-foot .x-svc{background:var(--h-ox-deep)!important;border:0!important}
html body .x-foot .x-svc a{border-color:rgba(241,239,238,.12)!important;color:var(--h-ivory)!important}
html body .x-foot .x-svc strong{font:400 22px/1.15 var(--h-display)!important;letter-spacing:-.01em!important;text-transform:none!important}
html body .x-foot .x-svc span{color:var(--h-ox-text)!important;font-size:14px!important;letter-spacing:0!important}
html body .x-foot h3{font:400 15px var(--h-text)!important;color:var(--h-ivory-soft)!important;letter-spacing:0!important;text-transform:none!important}
html body .x-foot .x-cols a{font-size:15px!important;color:var(--h-ivory)!important;letter-spacing:0!important;text-transform:none!important}
html body .x-foot .x-cols a:hover{color:#d9a7ae!important}
html body .x-foot .x-cols span{color:var(--h-ivory-soft)!important;letter-spacing:0!important;text-transform:none!important}
html body .x-foot .x-news h2{font-size:0!important;letter-spacing:0!important}
html body .x-foot .x-news h2::before{content:"New pieces, first";font:400 clamp(30px,3.2vw,46px)/1.05 var(--h-display);letter-spacing:-.02em;color:var(--h-ivory);text-transform:none}
html body .x-foot .x-news p{color:var(--h-ivory-soft)!important;letter-spacing:0!important;text-transform:none!important;font-size:15px!important}
html body .x-foot .x-news input{background:#1b1918!important;border:0!important;border-radius:0!important;color:var(--h-ivory)!important;font:400 15px var(--h-text)!important;min-height:52px}
html body .x-foot .x-news input:focus{box-shadow:inset 0 -2px 0 var(--h-ox)!important;outline:0!important}
html body .x-foot .x-news button{background:var(--h-ivory)!important;color:var(--h-night)!important;border:0!important;border-radius:0!important;font:500 15px var(--h-text)!important;min-height:52px;padding:0 20px!important;letter-spacing:0!important}
html body .x-foot .x-news button svg{display:none!important}
html body .x-foot .x-news button:hover{background:var(--h-ox)!important;color:#fff!important}
html body .x-foot .x-base{color:var(--h-ivory-soft)!important;letter-spacing:0!important;text-transform:none!important}
html body .x-foot .x-base-mark g,html body .x-foot .x-base-mark path{fill:var(--h-ox-ink)!important}
html body .x-foot::after{content:"CHROMD";display:block;font:400 clamp(64px,21.2vw,420px)/.78 var(--h-display);letter-spacing:-.025em;color:var(--h-ivory);white-space:nowrap;overflow:hidden;padding:.08em max(16px,2.2vw) .1em;margin:0}

/* header order to match the homepage: C on the left, wordmark centred, tools on the right */
html body .x-hdr .x-bar{grid-template-columns:1fr auto 1fr!important}
html body .x-hdr .x-bar > .x-cbtn{grid-column:1!important;grid-row:1!important;justify-self:start!important}
html body .x-hdr .x-bar > .x-word{grid-column:2!important;grid-row:1!important;justify-self:center!important}
html body .x-hdr .x-bar > .x-tools{grid-column:3!important;grid-row:1!important;justify-self:end!important}

/* stronger hold on the footer service row and the newsletter line */
html body .x-foot div.x-svc.x-svc{background:var(--h-ox-deep)!important;margin-left:calc(-1 * max(16px,2.2vw));margin-right:calc(-1 * max(16px,2.2vw));padding:28px max(16px,2.2vw)!important}
html body .x-foot .x-news.x-news > p:first-of-type{font-size:0!important}
html body .x-foot .x-news.x-news > p:first-of-type::before{content:"New arrivals reach the list before they reach the shop.";font:400 15px/1.5 var(--h-text);color:var(--h-ivory-soft)}

/* product details: sentence case labels */
html body .x-info summary,html body .x-info h3,html body .x-info button,html body .x-info dt,html body .x-mt-n,html body .x-match a{text-transform:none!important;letter-spacing:0!important;font-family:var(--h-text)!important}
html body .x-info summary,html body .x-info h3,html body .x-info button{font-size:16px!important;font-weight:500!important}
html body .x-mt-n{font-size:14px!important;font-weight:400!important}

/* phone header: keep the centred wordmark clear of the tools */
@media (max-width:599px){
  html body .x-hdr .x-tools a[href="/wishlist"]{display:none!important}
  html body .x-hdr .x-word::before{font-size:16px;letter-spacing:.2em;padding-left:.2em}
  html body .x-hdr .x-tools{gap:2px!important}
  html body .x-hdr .x-cur select{font-size:12px!important;max-width:58px}
}
@media (max-width:379px){html body .x-hdr .x-cur{display:none!important}}