/* MaxInspires — jewelry.mixsystems.net. One hand-written stylesheet in the spirit of the old maxinspires.de (Shopify
   «Dawn»): white everywhere, black text, thin grey lines, one simple sans-serif. Accents are the jewellery colours:
   red (prices, cart count, current page), blue (links, focus), black (buttons). Yellow only lives in photos and the logo.
   Mobile first: base = phone, then min-width 481 / 561 / 861 / 1025px. No external requests.
   Font: Inter (OFL), latin subset, self-hosted. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500-latin.woff2) format('woff2')}

:root{
  --ink:#121212; --bg:#ffffff; --muted:#5c5f62; --soft:#f5f5f5; --line:#e5e5e5;
  --red:#c81e1e; --blue:#2340c2;   /* 5.7:1 and 8.1:1 on white */
  --radius-card:6px; --radius-ctl:6px; --max:1240px; --ctl-h:48px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink);
  font:400 16px/1.6 var(--font); overflow-wrap:break-word; -webkit-font-smoothing:antialiased}
main{flex:1}
img,video{display:block; max-width:100%; height:auto}
a{color:var(--blue)}
a:hover{color:var(--ink)}
b,strong,th,dt,legend{font-weight:500}
h1,h2,h3{font-weight:500; line-height:1.2; letter-spacing:-.01em; margin:0 0 var(--s4)}
h1{font-size:clamp(28px,4vw,40px); line-height:1.15}
h2{font-size:clamp(22px,2.6vw,30px)}
h3{font-size:18px}
p,ul,ol,dl,address,table{margin:0 0 var(--s4)}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s4); top:var(--s4); z-index:10; padding:var(--s2) var(--s4); background:#fff; color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}

/* page building blocks */
.wrap{max-width:var(--max); margin-inline:auto; padding-inline:20px}
main>.wrap{padding-block:var(--s7)}   /* pages whose fragment is one .wrap (cart, contact, legal, 404) */
.section{padding-block:var(--s7)}
.section+.section{padding-top:0}
.page-title{font-size:clamp(26px,3.5vw,36px)}
.section-title{text-align:center}
.pretitle{margin-bottom:var(--s2); font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:.1em; color:var(--blue)}
.lead{max-width:40rem; font-size:18px}
.muted{color:var(--muted)}
.more{margin-top:var(--s6); text-align:center}
.text{max-width:46rem}
.ctas{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}

/* buttons: <button> or <a> — black, outline = white with a black line */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:var(--ctl-h);
  padding:var(--s2) var(--s5); border:1px solid var(--ink); border-radius:var(--radius-ctl);
  background:var(--ink); color:#fff; font:500 15px/1.2 var(--font); letter-spacing:.02em; text-align:center; text-decoration:none; cursor:pointer}
.btn:hover{background:var(--blue); border-color:var(--blue); color:#fff}
.btn--ghost{background:#fff; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); border-color:var(--ink); color:#fff}
.btn--block{display:flex; width:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55; cursor:not-allowed}

/* header: logo + name, menu, language, cart icon — white with a thin line, as the old shop */
.top{border-bottom:1px solid var(--line); background:#fff}
.top .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--s6); padding-block:var(--s3)}
.brand{display:inline-flex; align-items:center; gap:var(--s3); color:var(--ink); font-size:18px; font-weight:500;
  letter-spacing:.02em; text-decoration:none}
.brand:hover{color:var(--ink)}
.brand img{width:44px; height:44px; border-radius:4px}
.nav{order:3; width:100%; display:flex; flex-wrap:wrap; gap:0 var(--s4); font-size:15px}
.nav a,.lang a{display:inline-block; padding-block:var(--s2); color:#3d3d3d; text-decoration:none}
.nav a:hover,.lang a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:6px}
.nav a[aria-current],.lang a[aria-current]{color:var(--ink); text-decoration:underline; text-decoration-color:var(--red);
  text-decoration-thickness:2px; text-underline-offset:6px}
.top__end{margin-left:auto; display:flex; align-items:center; gap:var(--s4)}
.lang{display:flex; gap:var(--s3); font-size:14px}
.lang a+a{padding-left:var(--s3); border-left:1px solid var(--line)}
.cart-link{position:relative; display:inline-grid; place-items:center; width:44px; height:44px; color:var(--ink)}
.cart-link:hover,.cart-link[aria-current]{color:var(--blue)}
.cart-link svg{width:26px; height:26px}
.cart-total{margin-left:.15rem; font-weight:600; font-size:.95rem; color:var(--ink); text-decoration:none; white-space:nowrap}
.cart-total:hover{color:var(--blue)}
[data-cart-count]{position:absolute; right:0; bottom:2px; min-width:19px; padding:0 5px; border-radius:10px;
  background:var(--red); color:#fff; font-size:11px; font-weight:500; line-height:19px; text-align:center}

/* footer */
.foot{padding-block:var(--s6); border-top:1px solid var(--line); color:var(--muted); font-size:14px; text-align:center}
.foot a{color:var(--ink); text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot__links{display:flex; flex-wrap:wrap; justify-content:center; gap:0 var(--s5); margin-bottom:var(--s3)}
.foot__links a{padding-block:var(--s2)}
.foot p{margin:0}

/* home, in the order of the old shop: video → photo mosaic → collections → all pieces */
.hero{padding-top:var(--s5)}
.hero .wrap{position:relative}
.hero__video{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--soft)}
.hero__toggle{position:absolute; right:32px; bottom:12px; display:grid; place-items:center; width:40px; height:40px;
  border:0; border-radius:50%; background:rgba(255,255,255,.88); color:var(--ink); cursor:pointer}
.hero__toggle::before{content:''; width:12px; height:14px; border-inline:4px solid currentColor}           /* pause */
.hero__toggle[aria-pressed=true]::before{width:0; height:0; margin-left:4px; border:8px solid transparent;
  border-right:0; border-left:13px solid currentColor}                                                       /* play */
.mosaic{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2)}
.mosaic img{width:100%; aspect-ratio:1; object-fit:cover; background:var(--soft)}
.mosaic .big,.mosaic img:last-child{grid-column:span 2; grid-row:span 2}
.collections{list-style:none; margin:0; padding:0; display:grid; gap:var(--s4)}
.collection{position:relative; display:block; overflow:hidden; border-radius:var(--radius-card); color:var(--ink); text-decoration:none}
.collection img{width:100%; aspect-ratio:1; object-fit:cover}
.collection--soon img{filter:blur(14px) saturate(1.4); transform:scale(1.2)}
.collection__label{position:absolute; left:50%; bottom:var(--s5); transform:translateX(-50%); padding:var(--s2) var(--s4);
  border:1px solid var(--line); border-radius:var(--radius-ctl); background:#fff; font-size:15px; white-space:nowrap}
a.collection:hover{color:var(--ink)}
a.collection:hover .collection__label{border-color:var(--ink)}

/* about */
.made{display:grid; gap:var(--s6); align-items:center}
.made img{max-width:min(460px,100%); border-radius:var(--radius-card)}
.steps{list-style:none; padding:0; display:grid; gap:var(--s4); margin-top:var(--s5)}
.steps li{display:grid; grid-template-columns:36px minmax(0,1fr); gap:var(--s3)}
.steps b{display:block}
.steps__n{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; font-weight:500}
.steps li:nth-child(1) .steps__n{background:var(--red)}
.steps li:nth-child(2) .steps__n{background:var(--blue)}

/* catalogue: grid of cards */
.shop-head{text-align:center}
.shop-head .lead{margin-inline:auto}
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); margin-block:var(--s5)}
.card{display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-card); background:#fff}
.card__media{position:relative; overflow:hidden}
.card__media img{width:100%; aspect-ratio:1; object-fit:cover; background:var(--soft)}
.card__badge{position:absolute; top:10px; left:10px; z-index:1; margin:0; padding:3px 10px 4px; border-radius:var(--radius-ctl);
  background:var(--ink); color:#fff; font-size:13px; font-weight:500}
.card__badge--sold{background:var(--muted)}
.card__add{position:absolute; left:0; right:0; bottom:0; margin:0; transform:translateY(100%); transition:transform .3s ease}
.card:hover .card__add,.card:focus-within .card__add{transform:none}
.card__add .btn,.btn.card__add{width:100%; min-height:44px; padding-inline:var(--s2); border-radius:0;
  font-size:13px; text-transform:uppercase; letter-spacing:.06em}
.card__add :focus-visible,.card__add:focus-visible{outline-color:#fff; outline-offset:-5px}
@media (hover:none){.card__add{position:static; transform:none}}
.card__body{padding:var(--s3) var(--s3) var(--s4)}
.card__title{margin:0 0 var(--s1); font-size:15px; letter-spacing:.02em}
.card__title a{color:var(--ink); text-decoration:none}
.card__title a:hover{text-decoration:underline; text-underline-offset:4px}

/* prices */
.price{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--s2); color:var(--red); font-size:18px; font-weight:500}
.card .price{margin:0; font-size:16px}
.price__compare{color:var(--muted); font-size:15px; font-weight:400}
.price-note{color:var(--muted); font-size:14px}
.price-note a{color:inherit}
.card .price-note{margin:var(--s1) 0 0; font-size:12px}

/* product page */
.product{display:grid; gap:var(--s6)}
.gallery{width:100%; max-width:600px; min-width:0; margin-inline:auto}
.gallery__main{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:thin;
  border-radius:var(--radius-card)}
.gallery__main img{flex:0 0 100%; width:100%; aspect-ratio:1; object-fit:cover; scroll-snap-align:start; background:var(--soft)}
.gallery__thumbs{display:flex; gap:var(--s2); margin-top:var(--s3); overflow-x:auto}
.gallery__thumbs a{flex:none; border:1px solid var(--line); border-radius:var(--radius-ctl); overflow:hidden}
.gallery__thumbs a:hover{border-color:var(--ink)}
.gallery__thumbs img{width:72px; height:72px; object-fit:cover}
.product__info{min-width:0}
.product .price{margin-bottom:var(--s1); font-size:24px}
.product__info h2{margin-top:var(--s5); font-size:18px}
.product__buy{display:flex; flex-wrap:wrap; gap:var(--s3); margin-block:var(--s5)}
.product__buy .btn{flex:1 1 180px}
.pills{flex-basis:100%; min-width:0; margin:0; padding:0; border:0}
.pills legend{margin-bottom:var(--s2); padding:0}
.pills label{display:inline-block; margin:0 var(--s2) var(--s2) 0}
.pills input{position:absolute; width:1px; height:1px; opacity:0}
.pills span{display:inline-flex; align-items:center; min-height:44px; padding:var(--s2) var(--s4); border:1px solid var(--line);
  border-radius:var(--radius-ctl); cursor:pointer}
.pills input:checked+span{border-color:var(--ink); background:var(--ink); color:#fff}
.pills input:focus-visible+span{outline:2px solid var(--blue); outline-offset:3px}
.pills input:disabled+span{opacity:.55; text-decoration:line-through; cursor:not-allowed}
.qty{display:inline-flex; height:var(--ctl-h); overflow:hidden; border:1px solid var(--ink); border-radius:var(--radius-ctl)}
.qty button{width:44px; border:0; background:#fff; color:var(--ink); font:500 20px/1 var(--font); cursor:pointer}
.qty button:hover{background:var(--soft)}
.qty input{width:52px; border:0; background:#fff; color:var(--ink); font:inherit; text-align:center; -moz-appearance:textfield; appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.qty :focus-visible{outline-offset:-4px}

/* cart (P3 markup) */
.cart{display:grid; gap:var(--s6); align-items:start}
.cart-items{display:grid; gap:var(--s4)}
.cart-item{display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:var(--s2) var(--s4); align-items:center;
  grid-template-areas:"img name name" "img unit total" "qty qty remove";
  padding:var(--s4); border:1px solid var(--line); border-radius:var(--radius-card)}
.cart-item__img{grid-area:img; align-self:start; width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-ctl)}
.cart-item__name{grid-area:name; margin:0; font-size:18px; font-weight:500}
a.cart-item__name{color:var(--ink); text-decoration:none}
a.cart-item__name:hover{text-decoration:underline}
.cart-item__unit{grid-area:unit; margin:0; color:var(--muted)}
.cart-item__total{grid-area:total; margin:0; color:var(--red); font-weight:500; text-align:right}
.cart-item .qty{grid-area:qty; justify-self:start; height:44px}
.cart-item__remove{grid-area:remove; justify-self:end; padding:var(--s2) 0; border:0; background:none; color:var(--red);
  font:inherit; text-decoration:underline; cursor:pointer}
.panel{padding:var(--s5); border:1px solid var(--line); border-radius:var(--radius-card)}
.panel--soft{border-color:var(--soft); background:var(--soft)}
.panel--soft .muted{color:#53565a}   /* --muted on --soft stays above 4.5:1 */
.panel .panel{margin-block:var(--s4); padding:var(--s4)}
.panel>:last-child{margin-bottom:0}
.totals>div{display:flex; justify-content:space-between; gap:var(--s4); padding-block:var(--s1)}
.totals dt{font-weight:400}
.totals dd{margin:0; text-align:right}
.totals .totals__total{margin-top:var(--s2); padding-top:var(--s3); border-top:1px solid var(--line); font-size:20px; font-weight:500}
.totals .totals__total dt{font-weight:500}

/* form controls, messages, tables */
.field{display:grid; gap:var(--s1); margin-bottom:var(--s4)}
.field>span{color:var(--muted); font-size:14px}
.field select,.field input{width:100%; min-height:var(--ctl-h); padding:0 var(--s3); border:1px solid var(--muted);
  border-radius:var(--radius-ctl); background:#fff; color:var(--ink); font:inherit}
.notice{padding:var(--s3) var(--s4); border-left:4px solid var(--ink); border-radius:var(--radius-ctl); background:var(--soft)}
.notice a:not(.btn){color:inherit}
.notice--error{border-left-color:var(--red); background:#fdf1f1}
.notice--ok{border-left-color:var(--blue); background:#f1f3fd}
.empty{padding-block:var(--s8); text-align:center}
.empty .lead{margin-inline:auto}
.empty .ctas{justify-content:center}
.table{width:100%; border-collapse:collapse; font-size:15px}
.table th,.table td{padding:var(--s2) var(--s3); border:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere}
.table thead th{background:var(--soft)}

/* legal text column (P4) */
.legal{max-width:46rem; padding-block:var(--s7); hyphens:auto}
.legal h1{font-size:clamp(26px,3.5vw,36px)}
.legal h2{margin-top:var(--s6); font-size:20px}
.legal h3{margin-top:var(--s5); font-size:17px}
.legal address{font-style:normal}
.legal ul,.legal ol{padding-left:var(--s5)}
.legal li{margin-bottom:var(--s1)}

/* enquiry form (contact page, /app.js) */
.form{display:grid; gap:var(--s4); grid-template-columns:minmax(0,1fr); margin-top:var(--s5)}
.form[hidden]{display:none}
.form label{display:grid; gap:var(--s1); color:var(--muted); font-size:14px}
.form .wide{grid-column:1/-1}
.form input,.form textarea,.form select{width:100%; padding:var(--s3); border:1px solid var(--muted); border-radius:var(--radius-ctl);
  background:#fff; color:var(--ink); font:inherit}
.form textarea{min-height:7.5rem; resize:vertical}
.form label.consent{display:flex; align-items:flex-start; gap:var(--s2); color:var(--ink)}
.form label.consent input{flex:none; width:auto; margin-top:var(--s1)}
.form [aria-invalid=true]{border-color:var(--red); box-shadow:0 0 0 3px rgba(200,30,30,.15)}
.form label.consent[aria-invalid=true] span,.form input[type=checkbox][aria-invalid=true]+span{color:var(--red)}
.form-foot{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4)}
.form button:disabled{opacity:.55; cursor:progress}
.form-status{min-height:1.5em; margin-top:var(--s4); color:var(--muted)}
.form-status:focus{outline:0}
.form-status .is-ok{color:var(--blue)}
.form-status .is-error{color:var(--red)}
.form-status a{color:inherit}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* larger screens */
@media (min-width:481px){
  .grid{gap:20px}
  .card__title{font-size:16px}
  .card__add .btn,.btn.card__add{font-size:14px}
  .cart-item{grid-template-columns:120px minmax(0,1fr) auto; grid-template-areas:"img name name" "img unit total" "img qty remove"}
}
@media (min-width:561px){
  .form{grid-template-columns:repeat(3,minmax(0,1fr))}
  .collections{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
}
@media (min-width:861px){
  .top .wrap{padding-block:var(--s4)}
  .brand img{width:50px; height:50px}
  .mosaic{grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
  .mosaic img:last-child:not(.big){grid-column:auto; grid-row:auto}
  .made{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .made img{max-width:100%}
  .product{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7)}
  .cart{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
}
@media (min-width:1025px){
  .top .wrap{flex-wrap:nowrap; padding-block:var(--s5)}
  .nav{order:0; width:auto; gap:0 var(--s5)}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}