/* The Tray website: the prototype's site, copied as it is, with the tokens it shares with the Tray menu. */
html { -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; }
/* ============ The menu preview and the shop's site share these tokens (set from script) ============ */
.scope { --bg: #eef3ec; --surface: #fff; --ink: #13261a; --muted: #5b6f61; --brand: #2f5d3f; --on-brand: #fff; --deep: #264a33; --on-deep: #fff; --soft: #d8e5d6; --pop: #e8803f; --on-pop: #101418; --line: rgba(19, 38, 26, .1); --r: 26px; --f-head: 'Bricolage Grotesque', 'Readex Pro', sans-serif; --f-body: 'Readex Pro', system-ui, sans-serif; --dock-bg: var(--deep); --dock-ink: var(--on-deep); --card-bg: var(--deep); --card-ink: var(--on-deep); --dirv: 1; font-family: var(--f-body); color: var(--ink); }
.scope *, .scope *::before, .scope *::after { box-sizing: border-box; }
.scope button { font-family: inherit; }
.scope[dir="rtl"] { --dirv: -1; }
.add svg { width: 18px; height: 18px; }
.art { display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--tint) 40%, var(--surface)); cursor: pointer; flex: none; }
.art svg { width: 88%; height: 88%; filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .2)); }
.app[data-shape="circle"] .art, .site[data-shape="circle"] .art { border-radius: 50%; }
.app[data-shape="squircle"] .art, .site[data-shape="squircle"] .art { border-radius: 32%; }
.app[data-shape="arch"] .art, .site[data-shape="arch"] .art { border-radius: 50% 50% 18% 18% / 44% 44% 18% 18%; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 99px; padding: 8px 14px; font: 600 13px var(--f-body); cursor: pointer; display: flex; gap: 6px; align-items: center; }
.chip small { color: var(--muted); font-weight: 500; }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chip.on small { color: inherit; opacity: .8; }
/* ---- offers slider ---- */
.offers { margin-top: 6px; }
.o-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 2px; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.o-track::-webkit-scrollbar { display: none; }
.o-slide { --oc: var(--deep); --oi: var(--on-deep); flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; min-height: 214px; border-radius: calc(var(--r) + 8px); padding: 20px; background: var(--oc); color: var(--oi); display: flex; flex-direction: column; align-items: flex-start; }
.o-slide.hero { margin: 0; --oc: var(--deep); }
.o-slide[data-k="happy"] { --oc: var(--pop); --oi: var(--on-pop); }
.o-slide[data-k="bundle"] { --oc: var(--brand); --oi: var(--on-brand); }
.o-slide[data-k="new"] { --oc: var(--surface); --oi: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.o-slide[data-k="goal"] { --oc: var(--soft); --oi: var(--ink); }
.o-slide > * { position: relative; z-index: 1; }
.o-slide .pat { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }
.offers[data-pat="dots"] .o-slide .pat { opacity: .2; background-image: radial-gradient(currentColor 1.4px, transparent 1.7px); background-size: 14px 14px; }
.offers[data-pat="lines"] .o-slide .pat { opacity: .16; background-image: repeating-linear-gradient(135deg, currentColor 0 1.2px, transparent 1.2px 11px); }
.offers[data-pat="grid"] .o-slide .pat { opacity: .13; background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 24px 24px; }
.offers[data-pat="stripes"] .o-slide .pat { opacity: .09; background-image: repeating-linear-gradient(90deg, currentColor 0 12px, transparent 12px 24px); }
.offers[data-pat="waves"] .o-slide .pat, .offers[data-pat="circles"] .o-slide .pat, .offers[data-pat="diamonds"] .o-slide .pat { opacity: .2; background: currentColor; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
.offers[data-pat="waves"] .o-slide .pat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cpath d='M0 8Q11 0 22 8T44 8' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cpath d='M0 8Q11 0 22 8T44 8' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.offers[data-pat="circles"] .o-slide .pat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='12' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='12' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.offers[data-pat="diamonds"] .o-slide .pat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 3 25 14 14 25 3 14Z' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 3 25 14 14 25 3 14Z' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); }
/* the big card's background: a gradient from its colour towards the accent, or the shop's own photo under a tint of the colour */
.offers[data-cbg="gradient"] .o-slide { background: linear-gradient(140deg, var(--oc) 15%, color-mix(in srgb, var(--oc) 28%, var(--pop))); }
.offers[data-cbg="image"] .o-slide { background: linear-gradient(color-mix(in srgb, var(--oc) 58%, transparent), color-mix(in srgb, var(--oc) 78%, transparent)), var(--card-img) center / cover; }
.kick { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--f-body); letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--oi) 14%, transparent); }
.kick svg { width: 13px; height: 13px; }
.o-slide h2 { margin: 10px 0 4px; max-width: 13ch; font: 700 25px/1.08 var(--f-head); text-wrap: balance; }
.o-slide p { margin: 0 0 12px; max-width: 24ch; font-size: 12.5px; opacity: .82; }
.o-slide .grow { flex: 1; }
.o-cta { border: 0; border-radius: 99px; padding: 11px 18px; background: var(--oi); color: var(--oc); font: 700 13px var(--f-body); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-top: auto; }
.o-cta svg { width: 16px; height: 16px; }
.scope[dir="rtl"] .o-cta svg.dir { transform: scaleX(-1); }
.o-cta:disabled { opacity: .45; cursor: default; }
.o-cta:active { transform: scale(.97); }
.o-art { position: absolute !important; z-index: 1; inset-inline-end: -16px; bottom: -22px; width: 148px; height: 148px; transform: rotate(-8deg); filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .3)); pointer-events: none; }
.o-art svg { width: 100%; height: 100%; }
.o-art.two { width: 168px; height: 150px; }
.o-art.two svg { position: absolute; width: 104px; height: 104px; }
.o-art.two svg:first-child { inset-inline-end: 0; top: 0; }
.o-art.two svg:last-child { inset-inline-start: 0; bottom: 0; transform: rotate(14deg); }
.o-cd { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; font: 700 13px ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.o-cd b { background: color-mix(in srgb, var(--oi) 16%, transparent); border-radius: 7px; padding: 3px 6px; font-weight: 700; }
.o-cd em { font: 600 11px var(--f-body); opacity: .75; font-style: normal; margin-inline-end: 4px; }
.o-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font: 700 22px var(--f-head); font-variant-numeric: tabular-nums; }
.o-price s { font: 500 13px var(--f-body); opacity: .65; }
.o-price span { font: 700 11.5px var(--f-body); padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--oi) 16%, transparent); }
.o-bar { width: min(62%, 190px); height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--oi) 14%, transparent); overflow: hidden; margin: 0 0 6px; }
.o-bar i { display: block; height: 100%; border-radius: 8px; background: var(--brand); transition: width .5s; }
.o-sub { font: 600 12px var(--f-body); opacity: .75; margin-bottom: 12px; }
.o-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.o-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: var(--ink); opacity: .2; cursor: pointer; transition: width .25s, opacity .25s; }
.o-dots button.on { width: 20px; opacity: .7; }
.usual { margin: 14px 16px 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: calc(var(--r) * .8); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.usual .art { width: 46px; height: 46px; cursor: default; }
.usual .tx { flex: 1; min-width: 0; line-height: 1.25; }
.usual .tx small { display: block; color: var(--muted); font-size: 11.5px; }
.usual .tx b { font: 700 14px var(--f-head); }
.usual button { border: 0; border-radius: 99px; padding: 10px 14px; background: var(--brand); color: var(--on-brand); font: 700 12.5px var(--f-body); cursor: pointer; display: flex; gap: 6px; align-items: center; }
.usual button svg { width: 14px; height: 14px; }

/* ============ The shop's website, same tokens ============ */
.site { background: var(--bg) var(--bg-image, none) center / cover fixed; color: var(--ink); font-family: var(--f-body); }
.site .wrap { max-width: 1080px; margin-inline: auto; padding-inline: 28px; }
.s-nav { display: flex; align-items: center; gap: 28px; padding: 18px 0; }
.s-nav .lg { display: flex; align-items: center; gap: 10px; font: 700 19px var(--f-head); }
.s-nav .lg i { width: 38px; height: 38px; border-radius: calc(var(--r) * .5); background: var(--deep); color: var(--on-deep); display: grid; place-items: center; }
.s-nav .lk { display: flex; gap: 24px; margin-inline: auto; font-weight: 500; font-size: 14px; color: var(--muted); }
.s-nav .lk a { color: inherit; text-decoration: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 99px; border: 0; font: 700 14px var(--f-body); cursor: pointer; text-decoration: none; background: var(--brand); color: var(--on-brand); }
.btn.g { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.p { background: var(--pop); color: var(--on-pop); }
.btn svg { width: 17px; height: 17px; }
.s-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center; padding: 30px 0 56px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 99px; background: var(--soft); color: var(--brand); font: 700 12px var(--f-body); }
.eyebrow svg { width: 15px; height: 15px; flex: none; }
.s-vis .fl svg { width: 21px; height: 21px; color: var(--pop); flex: none; }
.s-hero h1 { margin: 16px 0 14px; font: 700 clamp(40px, 6.4vw, 72px)/1 var(--f-head); letter-spacing: -.02em; text-wrap: balance; }
.s-hero h1 em { font-style: normal; color: var(--brand); }
.s-hero p.lead { margin: 0 0 24px; max-width: 46ch; font-size: 17px; color: var(--muted); }
.s-hero .cta2 { display: flex; gap: 10px; flex-wrap: wrap; }
.proof { display: flex; gap: 28px; margin: 32px 0 0; padding: 0; list-style: none; }
.proof b { display: block; font: 700 26px var(--f-head); }
.proof small { color: var(--muted); font-size: 12.5px; }
.s-vis { position: relative; display: grid; place-items: center; min-height: 380px; }
.s-vis .blob { position: absolute; inset: 6% 2%; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; background: var(--deep); }
.s-vis .blob::after { content: ''; position: absolute; inset-inline-end: -4%; top: -6%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--pop); opacity: .9; }
.s-vis .big { position: relative; width: 78%; aspect-ratio: 1; background: color-mix(in srgb, var(--tint, #d9b48a) 38%, var(--surface)); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .45); }
.s-vis .fl { position: absolute; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 16px; background: var(--surface); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .4); font: 600 12.5px var(--f-body); }
.s-vis .fl b { font: 700 17px var(--f-head); }
.s-vis .fl.a { inset-inline-start: -2%; bottom: 14%; }
.s-vis .fl.b { inset-inline-end: -1%; top: 10%; }
.s-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 8px 0 54px; }
.feat { display: grid; gap: 8px; }
.feat i { width: 44px; height: 44px; border-radius: calc(var(--r) * .55); display: grid; place-items: center; background: var(--soft); color: var(--brand); }
.feat i svg { width: 22px; height: 22px; }
.feat b { font: 700 16px var(--f-head); }
.feat span { color: var(--muted); font-size: 13.5px; }
.s-sec { padding-bottom: 56px; }
.s-sec > h2 { margin: 0 0 6px; font: 700 clamp(26px, 3.6vw, 38px)/1.1 var(--f-head); }
.s-sec > p { margin: 0 0 22px; color: var(--muted); }
.s-pop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.s-pcard { background: var(--surface); border-radius: var(--r); padding: 14px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 12px; }
.s-pcard .art { width: 100%; aspect-ratio: 1.25; cursor: default; border-radius: calc(var(--r) * .8) !important; }
.s-pcard .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-inline: 4px; }
.s-pcard b { font: 700 17px var(--f-head); }
.s-pcard small { display: block; color: var(--muted); font-size: 12.5px; }
.s-story { border-radius: calc(var(--r) + 10px); background: var(--deep); color: var(--on-deep); display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; margin-bottom: 56px; }
.s-story .tx { padding: 44px; display: grid; gap: 14px; align-content: center; }
.s-story h2 { margin: 0; font: 700 clamp(26px, 3.4vw, 40px)/1.1 var(--f-head); }
.s-story p { margin: 0; opacity: .8; max-width: 44ch; }
.s-story .vv { position: relative; min-height: 280px; background: color-mix(in srgb, var(--pop) 30%, var(--deep)); display: grid; place-items: center; }
.s-story .vv svg { width: 62%; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .35)); }
.s-visit { display: grid; grid-template-columns: 1fr 1fr 220px; gap: 18px; padding-bottom: 60px; }
.vcard { background: var(--surface); border-radius: var(--r); padding: 22px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 12px; align-content: start; }
.vcard h3 { margin: 0; font: 700 18px var(--f-head); }
.hrs { display: grid; gap: 8px; font-size: 14px; }
.hrs div { display: flex; justify-content: space-between; color: var(--muted); }
.hrs b { color: var(--ink); font-weight: 600; }
.addr { display: flex; gap: 8px; color: var(--muted); font-size: 13.5px; }
.addr svg { width: 17px; height: 17px; flex: none; color: var(--brand); }
.rsv label { display: grid; gap: 5px; font: 600 12px var(--f-body); color: var(--muted); }
.rsv input[type="text"] { height: 44px; border-radius: 12px; border: 0; padding-inline: 14px; background: var(--bg); color: var(--ink); font: 500 14px var(--f-body); box-shadow: 0 0 0 1px var(--line); }
.rsv input[type="text"]:focus { outline: 0; box-shadow: 0 0 0 2px var(--brand); }
.rsv .chips .chip { padding: 8px 12px; font-size: 12.5px; }
.rsv .ok { color: #1f9d5b; font: 700 13px var(--f-body); min-height: 1.2em; }
.qrc { text-align: center; justify-items: center; }
.qrc svg { width: 148px; height: 148px; padding: 10px; background: #fff; border-radius: calc(var(--r) * .6); }
.qrc small { color: var(--muted); font-size: 12.5px; }
.s-foot { border-top: 1px solid var(--line); padding: 22px 0 34px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.site .art svg { filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .22)); }
@media (max-width: 860px) {
  .site .wrap { padding-inline: 18px; }
  .s-nav .lk { display: none; }
  .s-nav .btn { margin-inline-start: auto; padding: 11px 16px; }
  .s-hero { grid-template-columns: 1fr; padding-bottom: 36px; }
  .s-vis { min-height: 300px; }
  .s-feats { grid-template-columns: 1fr 1fr; }
  .s-pop { grid-template-columns: 1fr; }
  .s-story { grid-template-columns: 1fr; }
  .s-story .tx { padding: 28px; }
  .s-visit { grid-template-columns: 1fr; }
  .proof { gap: 18px; }
}

/* ---- the site, v2 ---- */
.s-nav .lk a { cursor: pointer; padding-block: 4px; border-bottom: 2px solid transparent; }
.s-nav .lk a.on { color: var(--ink); font-weight: 700; border-color: var(--brand); }
.s-page { animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }
.s-offs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.s-offs .o-slide { flex: none; min-height: 214px; }
.gal { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 130px; gap: 12px; }
.gal .g { border-radius: calc(var(--r) * .8); display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--tint) 45%, var(--surface)); }
.gal .g svg { width: 78%; height: 78%; filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .22)); }
.gal .g.w { grid-column: span 2; }
.gal .g.t { grid-row: span 2; }
.revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rev { background: var(--surface); border-radius: var(--r); padding: 20px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.rev .st { color: #f1b02b; letter-spacing: 2px; font-size: 14px; }
.rev p { margin: 0; font-size: 14px; }
.rev small { color: var(--muted); }
.evs { display: grid; gap: 12px; }
.ev { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 14px 18px; background: var(--surface); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
.ev .dt2 { text-align: center; padding: 8px 0; border-radius: calc(var(--r) * .55); background: var(--soft); color: var(--brand); line-height: 1.1; }
.ev .dt2 b { display: block; font: 800 24px var(--f-head); }
.ev .dt2 small { font: 700 11px var(--f-body); text-transform: uppercase; }
.ev b.t { font: 700 16px var(--f-head); display: block; }
.ev span.s { color: var(--muted); font-size: 13px; }
.brs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mapc { padding: 0 !important; overflow: hidden; min-height: 190px; }
.mapc svg { width: 100%; height: 100%; min-height: 190px; }
.faq details { background: var(--surface); border-radius: calc(var(--r) * .7); box-shadow: 0 0 0 1px var(--line); margin-bottom: 10px; padding: 0 18px; }
.faq summary { padding: 16px 0; cursor: pointer; font: 700 15px var(--f-head); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--brand); }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.news { background: var(--deep); color: var(--on-deep); border-radius: calc(var(--r) + 10px); padding: 36px; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; align-items: center; }
.news h2 { margin: 0; font: 700 clamp(24px, 3vw, 34px)/1.1 var(--f-head); }
.news p { margin: 6px 0 0; opacity: .8; }
.news form { display: flex; gap: 8px; }
.news input { flex: 1; min-width: 0; height: 48px; border-radius: 99px; border: 0; padding-inline: 18px; font: 500 14px var(--f-body); background: color-mix(in srgb, var(--on-deep) 14%, transparent); color: var(--on-deep); }
.news input::placeholder { color: color-mix(in srgb, var(--on-deep) 60%, transparent); }
.news .btn { background: var(--pop); color: var(--on-pop); }
.news .ok { grid-column: 1 / -1; font-weight: 700; min-height: 1.2em; }
.sps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sp { background: var(--surface); border-radius: var(--r); padding: 22px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.sp i { width: 46px; height: 46px; border-radius: calc(var(--r) * .55); display: grid; place-items: center; background: var(--brand); color: var(--on-brand); }
.sp i svg { width: 22px; height: 22px; }
.sp b { font: 700 18px var(--f-head); }
.sp span { color: var(--muted); font-size: 14px; }
.sp .btn { justify-self: start; padding: 10px 16px; font-size: 13px; }
.s-tag { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--pop); margin-bottom: 8px; }
.s-menu { display: grid; gap: 28px; }
.s-menu h3 { margin: 0 0 12px; font: 700 22px var(--f-head); }
.s-mrow { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.s-mrow .art { width: 56px; height: 56px; cursor: default; }
.s-mrow b { font: 700 15px var(--f-head); display: block; }
.s-mrow small { color: var(--muted); font-size: 12.5px; }
.s-qrbox { display: grid; gap: 18px; }
.s-qrbox.two { grid-template-columns: 1fr 1fr; }
.s-qrbox.three { grid-template-columns: 1fr 1fr 220px; }
.site[data-photos="0"] .art, .site[data-photos="0"] .o-art { display: none; }
.site[data-photos="0"] .s-pcard .row { padding: 6px; }
.logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
@media (max-width: 860px) {
  .s-offs, .revs, .sps, .brs, .news, .s-qrbox { grid-template-columns: 1fr; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .ev { grid-template-columns: 56px 1fr; }
  .ev .btn { grid-column: 1 / -1; }
  .news { padding: 26px; }
  .s-nav .lk { display: flex; overflow-x: auto; gap: 16px; max-width: 100%; scrollbar-width: none; order: 3; flex-basis: 100%; margin: 0; }
  .s-nav { flex-wrap: wrap; gap: 12px; }
}