/* مطابع روعة التصاميم, the new site. Light mode: a beige page with maroon type; dark mode turns it round, a maroon

   page with beige type. The hero plays the shop's own film behind a shade of those same colours. Logical properties throughout, so Arabic (rtl) and

   English (ltr) share every rule; the few physical ones say why. */



@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/alexandria-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }

@font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/alexandria-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-400-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-500-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-600-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }



/* light mode takes its burgundy from Nidal Abu Al-Majd's name plate, a warmer red than the dark mode's maroon */

:root {

  --maroon: #7A0C20;

  --maroon-700: #941A30;

  --maroon-900: #4A0512;

  --maroon-950: #2E020B;

  --beige: #D6C1A0;

  --beige-light: #EADCC2;

  --beige-pale: #F4ECDE;

  --gold: #C9A97C;

  --gold-bright: #E4C690;

  --font-head: 'Alexandria', 'IBM Plex Sans Arabic', Tahoma, sans-serif;

  --font-body: 'IBM Plex Sans Arabic', Tahoma, sans-serif;

  --wrap: 1240px;

  --gutter: clamp(16px, 4vw, 40px);

  --radius: 16px;

  --ease: cubic-bezier(.2, .7, .2, 1);



  /* light: a pale beige page (the shade the cards used to be), maroon type; cards a step lighter again */

  --bg: #F7EFE2;

  --bg-alt: #EFE4D1;

  --card: #FFFBF5;

  --card-hover: #FFFDFA;

  --text: #7A0C20;

  --text-soft: rgba(122, 12, 32, .78);

  --text-faint: rgba(122, 12, 32, .6);

  --accent: #8A5C2C;

  --line: rgba(122, 12, 32, .14);

  --line-strong: rgba(122, 12, 32, .3);

  --btn: #7A0C20;

  --btn-text: #F4ECDE;

  --btn-hover: #941A30;

  --strip: #7A0C20;

  --strip-text: #EADCC2;

  --cta-from: #941A30;

  --cta-mid: #7A0C20;

  --cta-to: #4A0512;

  --cta-text: #EADCC2;

  --cta-btn: #D6C1A0;

  --cta-btn-text: #4A0512;

  --shadow: 0 18px 40px -22px rgba(122, 12, 32, .5);

  color-scheme: light;

}

/* dark: the same page turned round, maroon ground and beige type */

html[data-theme="dark"] {

  --maroon: #4B0129;

  --maroon-700: #620E3A;

  --maroon-900: #2A0016;

  --maroon-950: #1C000E;

  --bg: #3A0120;

  --bg-alt: #2C0018;

  --card: #4B0129;

  --card-hover: #570835;

  --text: #EADCC2;

  --text-soft: rgba(234, 220, 194, .78);

  --text-faint: rgba(234, 220, 194, .58);

  --accent: #E0BF86;

  --line: rgba(234, 220, 194, .14);

  --line-strong: rgba(234, 220, 194, .32);

  --btn: #D6C1A0;

  --btn-text: #2A0016;

  --btn-hover: #EADCC2;

  --strip: #D6C1A0;

  --strip-text: #3A0120;

  --cta-from: #F2E6D0;

  --cta-mid: #D6C1A0;

  --cta-to: #BFA27A;

  --cta-text: #2A0016;

  --cta-btn: #4B0129;

  --cta-btn-text: #F4ECDE;

  --shadow: 0 18px 40px -20px rgba(0, 0, 0, .6);

  color-scheme: dark;

}



/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }

body {

  margin: 0; background: var(--bg); color: var(--text); overflow-x: clip;

  font: 400 1rem/1.85 var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;

  transition: background-color .35s, color .35s;

}

h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 700; line-height: 1.3; }

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video { display: block; max-width: 100%; }

button { font: inherit; }

.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.skip { position: absolute; z-index: 100; inset-inline-start: 12px; top: -60px; padding: .6rem 1rem; border-radius: 10px; background: var(--btn); color: var(--btn-text); }

.skip:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.hero :focus-visible, .cta :focus-visible, .foot :focus-visible { outline-color: var(--gold-bright); }



/* ---------- buttons ---------- */

.btn {

  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .8rem 1.5rem;

  border-radius: 12px; border: 1.5px solid transparent; font: 600 .98rem/1.2 var(--font-head); white-space: nowrap; cursor: pointer;

  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease), box-shadow .25s;

}

.btn svg { width: 20px; height: 20px; flex: none; }

.btn:hover { transform: translateY(-2px); }

.btn-fill { background: var(--btn); color: var(--btn-text); box-shadow: var(--shadow); }

.btn-fill:hover { background: var(--btn-hover); }

.btn-line { border-color: var(--line-strong); color: var(--text); }

.btn-line:hover { border-color: var(--text); }

.btn-light { background: var(--beige); color: var(--maroon-900); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .55); }

.btn-light:hover { background: var(--beige-light); }

.btn-ghost { border-color: rgba(234, 220, 194, .45); color: var(--beige-light); background: rgba(18, 0, 10, .3); }

.btn-ghost:hover { border-color: var(--beige-light); background: rgba(234, 220, 194, .08); }



/* ---------- top bar and header ---------- */

.topbar { position: relative; z-index: 41; background: var(--maroon-950); color: rgba(234, 220, 194, .8); font-size: .82rem; }

html[data-theme="dark"] .topbar { background: #14000A; }

.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }

.topbar-call { color: var(--beige); }

.topbar-call .ltr { color: var(--gold-bright); font-weight: 500; margin-inline-start: .3rem; }

.topbar-call:hover .ltr { color: var(--beige-light); }

.topbar-name { color: var(--beige-light); font-weight: 600; }



.hdr { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); transition: box-shadow .3s, background-color .35s; }

.hdr.scrolled { box-shadow: 0 12px 30px -20px rgba(42, 0, 22, .55); }

.hdr-in { display: flex; align-items: center; gap: 1.1rem; min-height: 78px; }

.brand { display: flex; align-items: center; gap: .75rem; flex: 0 1 auto; min-width: 0; }

.brand-mark { width: 46px; height: 50px; flex: none; }

.brand-mark img { width: 100%; height: 100%; object-fit: contain; }

.hdr .on-dark, html[data-theme="dark"] .hdr .on-light { display: none; }

html[data-theme="dark"] .hdr .on-dark { display: block; }

.brand-name { display: grid; min-width: 0; line-height: 1.3; }

.brand-name b, .brand-name small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.brand-name b { font: 700 1.06rem/1.3 var(--font-head); }

.brand-name small { font-size: .74rem; color: var(--text-faint); }

.nav { display: flex; gap: .15rem; margin-inline-start: auto; }

.nav a { position: relative; padding: .55rem .8rem; border-radius: 10px; font: 500 .93rem/1.2 var(--font-head); color: var(--text-soft); white-space: nowrap; transition: color .2s; }

/* seven links: a little closer together on narrower laptops, and the menu button below 1300px, so the shop's name is never cut */

@media (max-width: 1440px) { .nav a { padding-inline: .55rem; } .nav a::after { inset-inline: .55rem; } }

@media (min-width: 1301px) { .brand { flex-shrink: 0; } }.nav a:hover, .nav a.active { color: var(--text); }

.nav a::after { content: ""; position: absolute; inset-inline: .8rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .35s var(--ease); }

.nav a.active::after { transform: none; }

.hdr-tools { display: flex; align-items: center; gap: .4rem; }

.icon-btn, .lang-btn {

  height: 42px; min-width: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line);

  background: transparent; color: var(--text); cursor: pointer; transition: border-color .2s, background-color .2s;

}

.icon-btn:hover, .lang-btn:hover { border-color: var(--line-strong); }

.icon-btn svg { width: 20px; height: 20px; }

.lang-btn { padding-inline: .7rem; font: 600 .9rem/1 var(--font-head); }

.theme-btn .i-sun, html[data-theme="dark"] .theme-btn .i-moon { display: none; }

html[data-theme="dark"] .theme-btn .i-sun { display: block; }

/* the call button is last in the header, so it sits top left in Arabic, as asked */

.call-btn {

  display: inline-flex; align-items: center; gap: .5rem; height: 46px; padding-inline: 1.15rem; border-radius: 12px;

  background: var(--btn); color: var(--btn-text); font: 600 .95rem/1 var(--font-head); box-shadow: var(--shadow);

  transition: background-color .2s, transform .2s var(--ease);

}

.call-btn:hover { background: var(--btn-hover); transform: translateY(-1px); }

.call-btn svg { width: 19px; height: 19px; }

.menu-btn { display: none; width: 46px; height: 46px; padding: 0; border-radius: 12px; border: 1px solid var(--line); background: transparent; cursor: pointer; place-content: center; gap: 5px; }

.menu-btn span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease), opacity .2s; }

.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }

.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }



.drawer {

  position: fixed; inset: 0; z-index: 39; display: flex; flex-direction: column; padding: calc(var(--drawer-top, 116px) + 1rem) var(--gutter) 2rem;

  background: var(--bg); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px);

  transition: opacity .3s, visibility .3s, transform .3s var(--ease);

}

.drawer.open { opacity: 1; visibility: visible; transform: none; }

.drawer > a { padding-block: 1rem; border-bottom: 1px solid var(--line); font: 600 1.2rem/1.3 var(--font-head); }

.drawer-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.8rem; }

.drawer-tools .btn { flex: 1 0 100%; }

.drawer-tools .lang-btn { flex: 1; }

body.menu-open { overflow: hidden; }



/* ---------- hero: the shop's own film behind it all, and a shade in the page's own colour (beige by day, maroon by

   night) on the copy's side. The copy stays on the right in both languages, because the film's pictures sit on the left ---------- */

:root { --shade: 247, 239, 226; }

html[data-theme="dark"] { --shade: 58, 1, 32; }

.hero {

  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;

  min-height: max(560px, calc(100svh - 116px)); background: var(--bg);

}

.hero-media { position: absolute; inset: 0; z-index: -2; }

.hero-media picture, .hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-poster, .hero-video { object-fit: cover; }

.hero-video { opacity: 0; transition: opacity .8s ease; }

.hero-video.playing { opacity: 1; }

/* until the film plays, its first frame drifts slowly closer, so the hero moves from the very first moment; once the

   film has faded in over it, it rests */

.hero-poster { transform-origin: 30% 40%; animation: poster-drift 9s ease-in-out infinite alternate; }

@keyframes poster-drift { to { transform: scale(1.06); } }

.hero-media:has(.hero-video.playing) .hero-poster { visibility: hidden; animation-play-state: paused; transition: visibility 0s .9s; }

.hero::after {

  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background .35s;

  background: linear-gradient(to left, rgba(var(--shade), .96) 0%, rgba(var(--shade), .92) 42%, rgba(var(--shade), .7) 50%, rgba(var(--shade), .2) 55%, rgba(var(--shade), 0) 60%);

}

.hero-in { display: flex; padding-block: clamp(48px, 8vh, 96px); }

.hero-copy { width: min(100%, 560px); margin-left: auto; margin-right: 0; }

.eyebrow { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; font: 500 .9rem/1.4 var(--font-head); color: var(--accent); }

.eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; }

.hero h1 { font-size: clamp(2.3rem, 4.2vw, 3.7rem); line-height: 1.22; color: var(--text); }

.hero h1 span { display: block; color: var(--accent); }

html[lang="en"] .hero h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.15; }

.hero-lead { margin-top: 1.2rem; max-width: 34em; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.95; color: var(--text-soft); }

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.hero-browse { display: inline-flex; align-items: center; gap: .5rem; font: 600 .95rem/1 var(--font-head); color: var(--text); }

.hero-browse svg { width: 18px; height: 18px; }

.hero-browse:hover { color: var(--accent); }

.hero-links { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin-top: 1.5rem; }

.hero-links > a:first-child svg { animation: nudge 2.4s ease-in-out infinite; }

.hero-note { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .86rem; color: var(--text-faint); }

@keyframes nudge { 50% { transform: translateY(4px); } }



/* ---------- the moving strip of what we print ---------- */

.strip { overflow: hidden; padding-block: 1.05rem; background: var(--strip); color: var(--strip-text); }

.strip-track { display: flex; width: max-content; animation: marquee 50s linear infinite; will-change: transform; }

[dir="rtl"] .strip-track { animation-name: marquee-rtl; }

.strip-list { display: flex; align-items: center; gap: 2.2rem; flex: none; margin: 0; padding: 0; padding-inline-end: 2.2rem; list-style: none; }

.strip-list li { font: 600 1rem/1 var(--font-head); white-space: nowrap; }

.strip-star svg { width: 13px; height: 13px; opacity: .7; }

@keyframes marquee { to { transform: translateX(-50%); } }

@keyframes marquee-rtl { to { transform: translateX(50%); } }



/* ---------- the print house in numbers ---------- */

/* the figures are printed in foil: maroon and bronze by day, gold by night; a gleam crosses each once it has counted */

:root { --foil: linear-gradient(100deg, #7A0C20 0%, #7A0C20 34%, #B5823F 46%, #E0B872 50%, #B5823F 54%, #7A0C20 66%, #7A0C20 100%); }

html[data-theme="dark"] { --foil: linear-gradient(100deg, #D9B97F 0%, #E4C690 34%, #F3DFB2 46%, #FFF6DE 50%, #F3DFB2 54%, #E4C690 66%, #D9B97F 100%); }

.stats { position: relative; padding-block: clamp(40px, 6vw, 76px); background: var(--bg); border-bottom: 1px solid var(--line); }

.stats-list { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: 0; padding: 0; list-style: none; }

.stat { position: relative; display: flex; flex-direction: column; align-items: center; gap: .85rem; padding: .4rem 1rem; text-align: center; }

.stat + .stat::before {

  content: ""; position: absolute; inset-inline-start: 0; top: 8%; bottom: 8%; width: 1px;

  background: linear-gradient(transparent, var(--gold), transparent); opacity: .75;

}

.stat-num {

  font: 800 clamp(2.5rem, 6vw, 4.6rem)/1 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -.01em;

  background: var(--foil); background-size: 300% 100%; background-position: 100% 0;

  -webkit-background-clip: text; background-clip: text; color: transparent;

}

.stat-num.done { animation: foil-gleam 1.5s var(--ease) forwards; }

@keyframes foil-gleam { from { background-position: 100% 0; } to { background-position: 0 0; } }

.stat-label { display: flex; flex-direction: column; align-items: center; gap: .7rem; font: 500 clamp(.8rem, 1.5vw, 1.02rem)/1.45 var(--font-head); color: var(--text-soft); }

/* a small gold lozenge between the figure and its words */

.stat-label::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }

@media (max-width: 640px) {

  .stat { padding-inline: .4rem; gap: .65rem; }

  .stat-num { font-size: clamp(2rem, 9.5vw, 2.6rem); }

}



/* ---------- sections ---------- */

.section { padding-block: clamp(64px, 9vw, 120px); }

.section-alt { background: var(--bg-alt); }

.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 3rem; margin-bottom: clamp(32px, 4vw, 56px); }

.sec-eyebrow { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; font: 500 .85rem/1 var(--font-head); color: var(--accent); }

.sec-eyebrow::before { content: ""; width: 1.8rem; height: 1px; background: currentColor; opacity: .7; }

.section h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); line-height: 1.25; }

.section h2 span { display: block; color: var(--accent); }

.sec-lead { max-width: 30em; color: var(--text-soft); }



/* services: each of the sixteen sections is a card listing its products, and the whole card leads to its own page */

.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.4vw, 20px); }

.svc {

  position: relative; display: flex; flex-direction: column; padding: 1.4rem 1.35rem 1.1rem; overflow: hidden;

  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);

  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s, background-color .35s;

}

.svc::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transition: opacity .35s; }

.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); background: var(--card-hover); }

.svc:hover::before { opacity: 1; }

.svc-num { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--btn); color: var(--btn-text); font: 700 .88rem/1 var(--font-head); }

.svc h3 { margin-top: 1.1rem; font-size: 1.14rem; line-height: 1.55; }

.svc-items { display: flex; flex-direction: column; gap: .35rem; margin: .9rem 0 1.3rem; padding: 0; list-style: none; font-size: .9rem; line-height: 1.6; color: var(--text-soft); }

.svc-items li { display: flex; align-items: baseline; gap: .5rem; }

.svc-items li::before { content: ""; width: 5px; height: 5px; flex: none; transform: translateY(-.15em) rotate(45deg); background: var(--accent); }

/* the shop's own starred line under a section, e.g. that stickers can be fitted too */

.svc-note { display: flex; align-items: flex-start; gap: .5rem; margin: -.3rem 0 1.2rem; padding: .6rem .75rem; border-radius: 10px; background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent); font: 500 .82rem/1.65 var(--font-head); }

.svc-note svg { width: 12px; height: 12px; flex: none; margin-top: .35rem; }

.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); font: 600 .92rem/1.2 var(--font-head); }

.svc-foot svg { width: 18px; height: 18px; flex: none; transition: translate .3s var(--ease); }

.svc:hover .svc-foot svg { translate: -3px -3px; }

/* a glimpse of the section on its card: two products clear, the third half clear and half veiled under the invitation.

   It sits just above the card's foot, so the pictures line up across a row whatever the length of the lists */

.svc-pics { display: grid; grid-template-columns: 1fr 1fr 2.35fr; gap: 7px; height: clamp(68px, 5.4vw, 84px); margin-top: auto; }

.svc-pic { position: relative; overflow: hidden; border-radius: 10px; background: var(--line); }

.svc-pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .4s; pointer-events: none; }

.svc:hover .svc-pic::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent); }

.svc-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }

.svc:hover .svc-pic img { transform: scale(1.06); }

.svc-pic-more .svc-pic-veil {

  filter: blur(7px) saturate(1.15) brightness(.9); transform: scale(1.2);

  -webkit-mask-image: linear-gradient(to left, transparent 32%, #000 52%); mask-image: linear-gradient(to left, transparent 32%, #000 52%);

}

[dir="ltr"] .svc-pic-more .svc-pic-veil { -webkit-mask-image: linear-gradient(to right, transparent 32%, #000 52%); mask-image: linear-gradient(to right, transparent 32%, #000 52%); }

.svc:hover .svc-pic-more .svc-pic-veil { transform: scale(1.26); }

.svc-pic-label {

  position: absolute; inset-block: 0; inset-inline-end: 0; width: 60%; display: grid; place-items: center; padding: 0 .3rem; text-align: center;

  background: linear-gradient(to left, rgba(42, 0, 22, .58), rgba(42, 0, 22, .1)); color: #F8EEDC;

  font: 700 .74rem/1.4 var(--font-head); text-shadow: 0 1px 8px rgba(20, 0, 10, .55); letter-spacing: .01em;

}

[dir="ltr"] .svc-pic-label { background: linear-gradient(to right, rgba(42, 0, 22, .58), rgba(42, 0, 22, .1)); }

/* gold on the cards: a warm light follows the pointer, a band of foil sweeps across on hover (and once as each card

   arrives, for phones), the number turns to gold leaf and the edge takes a gold line */

.svc, .svc:hover { --glow: rgba(201, 169, 124, .17); background-image: radial-gradient(280px circle at var(--mx, 50%) var(--my, -60%), var(--glow), transparent 70%); }

html[data-theme="dark"] .svc, html[data-theme="dark"] .svc:hover { --glow: rgba(228, 198, 144, .14); }

.svc::before { background: linear-gradient(90deg, transparent, var(--gold), var(--gold-bright), var(--gold), transparent); }

.svc::after {

  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);

  background: linear-gradient(112deg, transparent 32%, rgba(255, 238, 200, .08) 42%, rgba(255, 236, 190, .42) 50%, rgba(228, 198, 144, .1) 57%, transparent 66%);

}

html[data-theme="dark"] .svc::after { background: linear-gradient(112deg, transparent 32%, rgba(255, 238, 200, .05) 42%, rgba(255, 236, 190, .2) 50%, rgba(228, 198, 144, .06) 57%, transparent 66%); }

.svc:hover::after { transform: translateX(130%); transition: transform 1.15s var(--ease); }

.svc.rv.in::after { animation: svc-sweep 1.3s var(--ease) calc(var(--i, 0) * .12s + .45s); }

@keyframes svc-sweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

.svc:hover { border-color: color-mix(in srgb, var(--gold) 70%, transparent); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }

.svc-num { transition: background .4s, color .4s, box-shadow .4s; background-size: 200% 200%; }

.svc:hover .svc-num {

  background-image: linear-gradient(135deg, #F2DCA6 0%, #C9A060 40%, #F6E3B4 55%, #B5823F 100%); color: #4A0512;

  box-shadow: 0 6px 16px -6px rgba(181, 130, 63, .7), inset 0 1px 0 rgba(255, 255, 255, .45);

}

.link-arrow svg { width: 18px; height: 18px; transition: translate .3s var(--ease); }

.link-arrow:hover svg { translate: -3px -3px; }

/* the arrow points up and forward: up-left in Arabic, up-right in English; the chevrons point forward too */

[dir="ltr"] .i-arrow, [dir="ltr"] .i-next, [dir="ltr"] .i-prev { transform: scaleX(-1); }

[dir="ltr"] .svc:hover .svc-foot svg, [dir="ltr"] .link-arrow:hover svg { translate: 3px -3px; }

.svc-more { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }

.svc-more .btn { white-space: normal; text-align: center; }



/* clients: a card each, its logo (or its name set as a wordmark until the logo comes) and its name; rows stay centred */

.clients { --per: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 1.4vw, 18px); margin: 0; padding: 0; list-style: none; }

.client {

  flex: 0 0 calc((100% - (var(--per) - 1) * clamp(12px, 1.4vw, 18px)) / var(--per));

  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius);

  background: var(--card); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;

}

.client:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.client-logo { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 1.2rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 60%, var(--card)); }

.client-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.client-mark {

  display: grid; place-items: center; min-width: 4.6em; max-width: 100%; height: 4.6em; padding-inline: .9em; border-radius: 999px;

  background: var(--btn); color: var(--btn-text); font: 700 clamp(.82rem, 1.2vw, 1rem)/1 var(--font-head); letter-spacing: .01em;

  box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--gold); overflow-wrap: anywhere; text-align: center;

}

.client-name { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem 1rem; text-align: center; font: 600 .92rem/1.5 var(--font-head); }

.client-name small { font: 400 .78rem/1.4 var(--font-body); color: var(--text-faint); }



/* works */

.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }

.work { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }

.work a { display: block; aspect-ratio: 4 / 3; overflow: hidden; }

.work img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }

.work:hover img { transform: scale(1.05); }

.work figcaption {

  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.2rem;

  background: var(--maroon); color: var(--beige-light); border-top: 2px solid var(--gold); font: 600 .95rem/1.4 var(--font-head);

}

html[data-theme="dark"] .work figcaption { background: var(--maroon-900); }

.work figcaption b { color: var(--gold-bright); font-size: .85rem; }

.works-more { display: flex; justify-content: center; margin-top: clamp(26px, 3vw, 40px); }

.works-more .btn svg { width: 18px; height: 18px; transition: translate .3s var(--ease); }

.works-more .btn:hover svg { translate: -3px -3px; }

[dir="ltr"] .works-more .btn:hover svg { translate: 3px -3px; }



/* ---------- our work: the photos whole, in columns like a pinned board ---------- */

.gallery { columns: 3 280px; column-gap: clamp(12px, 1.4vw, 20px); }

.g-item {

  position: relative; display: block; margin-bottom: clamp(12px, 1.4vw, 20px); break-inside: avoid; overflow: hidden;

  border-radius: var(--radius); background: var(--card); box-shadow: 0 1px 0 var(--line), 0 14px 34px -22px rgba(42, 0, 22, .45);

}

.g-item img { display: block; width: 100%; height: auto; transition: transform .9s var(--ease), filter .6s; }

.g-item::after {

  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;

  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .45s;

}

.g-cap {

  position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem;

  padding: 2.6rem 1rem .9rem; color: #F8EEDC; font: 600 .92rem/1.45 var(--font-head);

  background: linear-gradient(to top, rgba(30, 0, 15, .82), rgba(30, 0, 15, 0));

  opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s var(--ease);

}

.g-cap b { color: var(--gold-bright); font-size: .8rem; letter-spacing: .08em; }

.g-item:hover img, .g-item:focus-visible img { transform: scale(1.045); }

.g-item:hover::after, .g-item:focus-visible::after { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent), inset 0 0 0 5px rgba(228, 198, 144, .12); }

.g-item:hover .g-cap, .g-item:focus-visible .g-cap { opacity: 1; transform: none; }

.gallery-end { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-top: clamp(30px, 4vw, 52px); text-align: center; }

.gallery-end p { margin: 0; font: 700 clamp(1.1rem, 2.2vw, 1.4rem)/1.5 var(--font-head); color: var(--accent); }

.gallery-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

@media (max-width: 640px) {

  .gallery { columns: 2; column-gap: 10px; }

  .g-item { margin-bottom: 10px; border-radius: 12px; }

}

.works-note { margin-top: 1.4rem; font-size: .85rem; color: var(--text-faint); }



/* about */

.about-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 96px); align-items: start; }

.about-text > p { margin-top: 1.3rem; max-width: 34em; font-size: 1.04rem; color: var(--text-soft); }

.link-arrow { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-strong); font: 600 .98rem/1 var(--font-head); }

.link-arrow:hover { border-color: var(--text); }

.about-points { margin: 0; padding: 0; list-style: none; }

.about-points li { display: flex; gap: 1.2rem; padding-block: 1.6rem; border-bottom: 1px solid var(--line); }

.about-points li:first-child { padding-top: .3rem; }

.pt-num { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font: 600 .85rem/1 var(--font-head); color: var(--accent); }

.about-points h3 { font-size: 1.1rem; }

.about-points p { margin-top: .35rem; font-size: .95rem; color: var(--text-soft); }



/* order steps */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }

.steps li { position: relative; padding-top: 1.6rem; border-top: 1px solid var(--line-strong); }

.steps li::before { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 56px; height: 2px; background: var(--accent); }

.step-num { display: block; font: 600 clamp(2.2rem, 3.4vw, 3rem)/1 var(--font-head); color: var(--accent); }

.steps h3 { margin-top: 1rem; font-size: 1.15rem; }

.steps p { margin-top: .5rem; font-size: .95rem; color: var(--text-soft); }



/* contact */

.section-contact { padding-top: clamp(56px, 7vw, 96px); }

.cta {

  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 3rem;

  padding: clamp(28px, 4.5vw, 60px); border-radius: calc(var(--radius) + 6px); color: var(--cta-text);

  background: radial-gradient(120% 150% at 88% 0%, var(--cta-from) 0%, var(--cta-mid) 48%, var(--cta-to) 100%);

  box-shadow: 0 30px 60px -32px rgba(42, 0, 22, .7);

}

/* a faint eight-point star lattice, the pattern stamped into the film's wall */

.cta::before {

  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .1;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 6l6.5 13.5L57 15l-4.5 14.5L66 36l-13.5 6.5L57 57l-14.5-4.5L36 66l-6.5-13.5L15 57l4.5-14.5L6 36l13.5-6.5L15 15l14.5 4.5z' fill='none' stroke='%23D6C1A0' stroke-width='1.2'/%3E%3C/svg%3E") repeat;

  -webkit-mask: linear-gradient(to left, #000, transparent 70%); mask: linear-gradient(to left, #000, transparent 70%);

}

html[data-theme="dark"] .cta::before { filter: brightness(.3); }

.cta-eyebrow { margin-bottom: .8rem; font: 500 .86rem/1 var(--font-head); opacity: .8; }

.cta h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
/* the sales manager: his title, and under it his name, large */
.cta h2 .cta-role, .cta h2 .cta-name { color: inherit; }
.cta-role { display: block; margin-bottom: .35rem; font: 600 clamp(1rem, 1.7vw, 1.3rem)/1.4 var(--font-head); opacity: .86; }
.cta-name { display: block; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.2; }

.cta-text p { margin-top: .6rem; opacity: .86; }

.cta-actions { display: grid; justify-items: center; gap: .9rem; }

.cta .btn-light { background: var(--cta-btn); color: var(--cta-btn-text); }

.cta .btn-light:hover { filter: brightness(1.08); }

.cta-call { font-size: .95rem; opacity: .9; }

.cta-call b { margin-inline-start: .35rem; font-weight: 600; }

.cta-call:hover { opacity: 1; }

/* five cards: email, Instagram, TikTok over the map and the opening hours, which takes two places */

.contact-wide { grid-column: span 2; }

.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 18px); margin: clamp(16px, 2vw, 24px) 0 0; padding: 0; list-style: none; }

.contact-cards a, .contact-hours {

  height: 100%; display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; border-radius: 14px;

  background: var(--card); border: 1px solid var(--line); font-size: .92rem; line-height: 1.6; color: var(--text-soft);

  transition: border-color .25s, color .25s, transform .25s var(--ease);

}

.contact-cards a:hover { border-color: var(--line-strong); color: var(--text); transform: translateY(-2px); }

.contact-cards svg { width: 22px; height: 22px; flex: none; color: var(--accent); }



/* ---------- footer ---------- */

.foot { padding-top: clamp(56px, 7vw, 88px); background: var(--maroon-950); color: rgba(234, 220, 194, .78); font-size: .93rem; }

html[data-theme="dark"] .foot { background: #14000A; }

.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem; }

.foot .brand-mark { width: 52px; height: 56px; }

.foot .brand-name b { color: var(--beige-light); }

.foot .brand-name small { color: rgba(234, 220, 194, .6); }

.foot-about p { margin-top: 1.2rem; max-width: 30em; line-height: 1.9; }

.vision-line { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.2rem; font-size: .88rem; color: var(--gold-bright); }

.vision-line::before { content: ""; width: 1.8rem; height: 1px; background: currentColor; opacity: .7; }

.foot h3 { margin-bottom: 1.1rem; font: 600 1rem/1.3 var(--font-head); color: var(--beige-light); }

.foot ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }

.foot a { transition: color .2s; }

.foot a:hover { color: var(--beige-light); }

/* room at the bottom so the floating buttons never cover the last line */

.foot-bottom {

  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; margin-top: clamp(40px, 5vw, 64px);

  padding-block: 1.4rem calc(env(safe-area-inset-bottom, 0px) + 92px); border-top: 1px solid rgba(214, 193, 160, .16);

  font-size: .84rem; color: rgba(234, 220, 194, .6);

}

.credit a { color: var(--beige); font-weight: 600; border-bottom: 1px solid rgba(214, 193, 160, .35); transition: color .2s, border-color .2s; }

.credit a:hover { color: var(--beige-light); border-color: var(--beige-light); }



/* ---------- floating buttons: WhatsApp bottom left, back to top bottom right ---------- */

.wa-float {

  position: fixed; z-index: 30; left: max(18px, env(safe-area-inset-left, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);

  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;

  background: var(--beige); color: var(--maroon-900); box-shadow: 0 10px 30px rgba(20, 0, 10, .35);

  transition: transform .25s, opacity .35s, visibility .35s;

}

.wa-float:hover { transform: scale(1.06); }

/* the hero has its own WhatsApp button, so the floating one waits until the reader moves past it */

.js .wa-float.away { opacity: 0; visibility: hidden; transform: translateY(12px); }

.wa-float svg { width: 28px; height: 28px; }

.to-top {

  position: fixed; z-index: 30; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);

  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;

  background: var(--maroon); color: var(--beige-light); border: 0; box-shadow: 0 10px 30px rgba(20, 0, 10, .3);

  opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s, visibility .35s, transform .35s, background-color .25s;

}

.to-top.show { opacity: 1; visibility: visible; transform: none; }

.to-top:hover { background: var(--maroon-700); }

.to-top svg { width: 20px; height: 20px; }

/* how far down the page the reader is, as a gold ring that is the button's own rim (--p from 0 to 1, set by site.js) */

.to-top .to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; overflow: visible; }

.to-top-ring circle { fill: none; stroke-width: 3; }

.to-top-ring .track { stroke: color-mix(in srgb, var(--gold) 28%, transparent); }

.to-top-ring .bar {

  stroke: var(--gold-bright); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p, 0));

  filter: drop-shadow(0 0 3px rgba(228, 198, 144, .55));

}

html:not([data-theme="dark"]) .to-top-ring .bar { stroke: #C99A55; }



/* ---------- lightbox ---------- */

.lb { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 5vh 4vw; background: rgba(14, 0, 8, .93); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }

.lb.open { opacity: 1; visibility: visible; }

.lb figure { margin: 0; }

.lb img { max-width: min(1100px, 92vw); max-height: 78vh; width: auto; height: auto; margin-inline: auto; border-radius: 12px; }

.lb figcaption { margin-top: .9rem; text-align: center; font-family: var(--font-head); color: var(--beige-light); }

.lb button {

  position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;

  border: 1px solid rgba(214, 193, 160, .35); background: rgba(42, 0, 22, .7); color: var(--beige-light); font-size: 1.5rem; line-height: 1;

}

.lb-close { top: 18px; inset-inline-end: 18px; }

.lb-prev, .lb-next { top: 50%; translate: 0 -50%; }

.lb-prev { inset-inline-start: 18px; }

.lb-next { inset-inline-end: 18px; }



/* ---------- a section's page: the band with its name, then a card for each product ---------- */

.cat-head, .pd-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.6rem 3rem; }

.cat-num {

  display: inline-grid; place-items: center; min-width: 54px; height: 42px; margin-bottom: 1rem; padding-inline: .7rem; border-radius: 12px;

  border: 1px solid rgba(228, 198, 144, .45); color: var(--gold-bright); font: 700 1rem/1 var(--font-head);

}

.page-band .cat-title h1, .page-band .pd-title h1 { text-wrap: balance; }

.page-band .cat-note {

  display: inline-flex; align-items: flex-start; gap: .55rem; margin-top: 1.1rem; padding: .6rem .95rem; border-radius: 12px;

  background: rgba(228, 198, 144, .12); border: 1px solid rgba(228, 198, 144, .28); color: var(--gold-bright);

  font: 500 .88rem/1.65 var(--font-head);

}

.cat-note svg { width: 13px; height: 13px; flex: none; margin-top: .4rem; }

.cat-side, .pd-actions { display: grid; justify-items: stretch; gap: .8rem; min-width: 230px; }

.cat-count { display: flex; align-items: baseline; justify-content: center; gap: .5rem; font: 500 .95rem/1 var(--font-head); color: rgba(234, 220, 194, .8); }

.cat-count b { font-size: 2.6rem; font-weight: 700; color: var(--gold-bright); }

.page-band .btn-light { color: var(--maroon-900); }



.cat { padding-top: clamp(32px, 4vw, 56px); }

.c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 26px); }

.c-card {

  display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px);

  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;

}

.c-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.c-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--maroon-900); }

.c-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s, transform .9s var(--ease); }

.c-alt { opacity: 0; }

@media (hover: hover) {

  .c-card:hover .c-alt { opacity: 1; }

  .c-card:hover .c-media img { transform: scale(1.04); }

}

.c-body { flex: 1; display: flex; flex-direction: column; padding: 1.15rem 1.25rem 1.25rem; }

.c-body h3 { font-size: 1.1rem; line-height: 1.5; text-wrap: balance; }

.c-body h3 a:hover { color: var(--accent); }

.c-body p { margin: .45rem 0 1.15rem; font-size: .9rem; line-height: 1.75; color: var(--text-soft); }

.c-actions { display: grid; gap: .55rem; margin-top: auto; }

.c-btn {

  display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .55rem 1rem; border-radius: 11px;

  font: 600 .9rem/1.45 var(--font-head); text-align: center; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease);

}

.c-btn svg { width: 19px; height: 19px; flex: none; }

.c-order { background: var(--btn); color: var(--btn-text); box-shadow: var(--shadow); }

.c-order:hover { background: var(--btn-hover); transform: translateY(-1px); }

.c-see { justify-content: space-between; border: 1.5px solid var(--line-strong); color: var(--text); text-align: start; }

.c-see svg { width: 17px; height: 17px; transition: translate .3s var(--ease); }

.c-see:hover { border-color: var(--text); }

.c-see:hover svg { translate: -3px -3px; }

[dir="ltr"] .c-see:hover svg { translate: 3px -3px; }

.c-grid-more { grid-template-columns: repeat(4, 1fr); }

.c-compact .c-body { padding: .9rem 1rem 1rem; }

.c-compact .c-body h3 { font-size: .98rem; margin-bottom: .8rem; }

.c-compact .c-see { min-height: 40px; border: 0; padding: .7rem 0 0; border-top: 1px solid var(--line); border-radius: 0; font-size: .84rem; color: var(--accent); }



/* every section, so the reader can move on without going back home */

.all-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .8rem 2rem; margin-bottom: clamp(20px, 2.4vw, 32px); }

.all-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

.all-head p { color: var(--text-soft); }

.all-head .link-arrow { margin-top: 0; }

.sec-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 0; padding: 0; list-style: none; }

.sec-links a {

  height: 100%; display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: 12px; background: var(--card);

  border: 1px solid var(--line); font: 500 .9rem/1.5 var(--font-head); transition: border-color .2s, transform .2s var(--ease), background-color .2s;

}

.sec-links a:hover { border-color: var(--line-strong); transform: translateY(-2px); }

.sec-links b { flex: none; font-size: .78rem; color: var(--accent); }

.sec-links a[aria-current] { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }

.sec-links a[aria-current] b { color: inherit; opacity: .75; }



/* ---------- a product's page: the band as its card reads, then its pictures ---------- */

.pd-sec {

  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem; padding-block: .4rem; padding-inline: .45rem .85rem; border-radius: 999px;

  border: 1px solid rgba(228, 198, 144, .35); color: var(--beige-light); font: 500 .85rem/1.3 var(--font-head); transition: border-color .2s, background-color .2s;

}

.pd-sec b { display: grid; place-items: center; min-width: 30px; height: 26px; padding-inline: .35rem; border-radius: 999px; background: var(--gold); color: var(--maroon-900); font-size: .75rem; }

.pd-sec:hover { border-color: var(--gold-bright); background: rgba(228, 198, 144, .08); }

.pd-assure { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.3rem 0 0; padding: 0; list-style: none; font: 500 .88rem/1.5 var(--font-head); color: rgba(234, 220, 194, .88); }

.pd-assure li { display: flex; align-items: center; gap: .45rem; }

.pd-assure svg { width: 17px; height: 17px; flex: none; color: var(--gold-bright); }

.pd-actions .btn { width: 100%; }



.pd { padding-top: clamp(28px, 3.6vw, 52px); }

.pd-gallery { display: grid; gap: clamp(12px, 1.4vw, 20px); }

.pd-gallery.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }

.pd-gallery.n3 .pd-shot:first-child { grid-row: span 2; }

.pd-gallery.n2 { grid-template-columns: 1fr 1fr; }

.pd-shot { position: relative; display: block; overflow: hidden; border-radius: calc(var(--radius) + 4px); background: var(--maroon-900); border: 1px solid var(--line); }

.pd-shot img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); }

.pd-gallery.n3 .pd-shot:not(:first-child) img { position: absolute; inset: 0; aspect-ratio: auto; }

.pd-shot:hover img { transform: scale(1.04); }

.pd-zoom {

  position: absolute; bottom: 14px; inset-inline-end: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;

  background: rgba(247, 239, 226, .92); color: var(--maroon); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);

  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease);

}

.pd-zoom svg { width: 20px; height: 20px; }

.pd-shot:hover .pd-zoom, .pd-shot:focus-visible .pd-zoom { opacity: 1; transform: none; }

@media (hover: none) { .pd-zoom { opacity: 1; transform: none; width: 38px; height: 38px; } }

.pd-note { margin-top: 1rem; font-size: .84rem; color: var(--text-faint); }

.pd-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: clamp(28px, 3vw, 44px); padding-top: 1.4rem; border-top: 1px solid var(--line); }

.pd-pager a { display: flex; align-items: center; gap: .8rem; max-width: 48%; font: 600 .95rem/1.5 var(--font-head); transition: color .2s; }

.pd-pager a:hover { color: var(--accent); }

.pd-pager small { display: block; font: 500 .78rem/1.4 var(--font-head); color: var(--text-faint); }

.pd-pager svg { width: 22px; height: 22px; flex: none; color: var(--accent); }

.pd-next { margin-inline-start: auto; text-align: end; }



/* ---------- 404 ---------- */

.notfound { min-height: 58vh; display: grid; align-items: center; text-align: center; }

.notfound .sec-eyebrow { justify-content: center; }

.notfound h1 { font-size: clamp(2rem, 5vw, 3.2rem); }

.notfound p { margin-top: 1rem; color: var(--text-soft); }

.notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }



/* ---------- things rise into place as they come into view (only once the script is running) ---------- */

.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }

.js .rv.in { opacity: 1; transform: none; }



/* ---------- smaller screens ---------- */

@media (max-width: 1300px) {

  .nav, .hdr-tools { display: none; }

  .menu-btn { display: grid; margin-inline-start: auto; }

}

@media (max-width: 1100px) {

  .works-grid, .contact-cards, .c-grid { grid-template-columns: repeat(2, 1fr); }

  .c-grid-more, .sec-links { grid-template-columns: repeat(3, 1fr); }

  .foot-grid { grid-template-columns: 1fr 1fr; }

  .clients { --per: 4; }

}

@media (max-width: 900px) {

  .clients { --per: 3; }

}

/* the home page's section cards: four to a row, two from 1100px down, one on a phone */

@media (max-width: 1100px) {

  .svc-grid { grid-template-columns: repeat(2, 1fr); }

}

@media (max-width: 760px) {

  .sec-head { display: block; }

  .sec-lead { margin-top: 1rem; }

  .about-grid, .steps { grid-template-columns: 1fr; }

  .cat-head, .pd-head { grid-template-columns: 1fr; align-items: start; }

  .cat-side, .pd-actions { min-width: 0; }

  .cat-side { grid-template-columns: auto 1fr; align-items: center; }

  .c-grid-more, .sec-links { grid-template-columns: repeat(2, 1fr); }

  .cta-actions { width: 100%; justify-items: stretch; text-align: center; }

}

@media (max-width: 640px) {

  .topbar-text { display: none; }

  .topbar-in { justify-content: center; }

  .hdr-in { min-height: 66px; gap: .6rem; }

  .brand-mark { width: 40px; height: 44px; }

  .brand-name b { font-size: .98rem; }

  .brand-name small { display: none; }

  .call-btn { width: 46px; padding: 0; justify-content: center; }

  .call-btn span { display: none; }

  .contact-cards, .foot-grid, .c-grid { grid-template-columns: 1fr; }

  .contact-wide { grid-column: auto; }

  .clients { --per: 2; gap: 10px; }

  .client-logo { padding: .8rem; }

  .client-name { padding: .65rem .6rem .75rem; font-size: .82rem; }

  /* the work samples two to a row, so the phone page stays short */

  .works-grid { gap: 10px; }

  /* the other products of a section stay two to a row, as small cards */

  .c-grid.c-grid-more { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .c-compact .c-body { padding: .7rem .75rem .8rem; }

  .c-compact .c-body h3 { font-size: .86rem; margin-bottom: .5rem; }

  .c-compact .c-see { font-size: .76rem; padding-top: .55rem; min-height: 44px; }

  .work figcaption { padding: .6rem .7rem; font-size: .78rem; gap: .4rem; }

  .work figcaption b { display: none; }

  .svc-grid { grid-template-columns: 1fr; }

  .svc { padding: 1.35rem 1.3rem 1.1rem; }

  .svc-pics { height: 88px; }

  .svc-pic-label { font-size: .84rem; }

  .pd-gallery.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }

  .pd-gallery.n3 .pd-shot:first-child { grid-row: auto; grid-column: 1 / -1; }

  .pd-gallery.n3 .pd-shot:not(:first-child) img { position: static; aspect-ratio: 4 / 3; }

  .pd-shot { border-radius: var(--radius); }

  .pd-pager a { font-size: .86rem; }

  .cat-side { grid-template-columns: 1fr; }

  .cat-count { justify-content: flex-start; }

}

/* the smallest phones: the header still holds the logo, the name and the sales manager, the cart, the menu and the

   call button (from 380px down the call button gives way: the phone number is in the bar above it) */

@media (max-width: 400px) {

  .hdr-in { gap: .45rem; }

  .brand { gap: .5rem; }

  .brand-mark { width: 34px; height: 38px; }

  .brand-name b { font-size: .9rem; }

  .hdr-shop .icon-btn { height: 40px; min-width: 40px; }

  .menu-btn, .call-btn { width: 42px; height: 42px; }

}

@media (max-width: 380px) {

  .call-btn { display: none; }

}

@media (max-width: 340px) {

  .brand-mark { width: 30px; height: 34px; }

  .brand-name b { font-size: .84rem; }

}

/* tall screens get the tall cut: its pictures at the top, the copy at the bottom on the shade */

@media (max-aspect-ratio: 4/5) {

  .hero { align-items: flex-end; min-height: max(calc(100svh - 104px), 600px); }

  .hero::after { background: linear-gradient(to top, rgba(var(--shade), .97) 0%, rgba(var(--shade), .93) 46%, rgba(var(--shade), .45) 60%, rgba(var(--shade), 0) 70%); }

  .hero-poster, .hero-video { object-position: 50% 0; }

  .hero-in { padding-block: 0 1.8rem; }

  .hero-copy { width: 100%; margin: 0; }

  .eyebrow { margin-bottom: .8rem; }

  .hero h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); }

  .hero-lead { margin-top: .9rem; font-size: .98rem; line-height: 1.85; }

  .hero-actions { margin-top: 1.4rem; flex-wrap: nowrap; }

  .hero-actions .btn { flex: 1 1 0; min-width: 0; padding-inline: .8rem; }

  .hero-links { margin-top: 1.1rem; }

  .hero-note { display: none; }

}

/* phones narrower than the tall cut show it whole rather than trim its sides, so the shop sign keeps both ends;

   the strip it leaves at the bottom lies under the shade */

@media (max-aspect-ratio: 9/16) {

  .hero-poster, .hero-video { object-fit: contain; object-position: 50% 0; }

}

@media (max-aspect-ratio: 4/5) {

  .hero-poster { transform-origin: 50% 22%; }

}

/* ---------- the store: header buttons, the shop page, panels, quick view, notices ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.svc-more { flex-wrap: wrap; gap: .8rem; }

.hdr-shop { display: flex; gap: .4rem; }

.hdr-shop .icon-btn { position: relative; }

.count {

  position: absolute; top: -7px; inset-inline-end: -7px; min-width: 20px; height: 20px; padding-inline: 5px; display: grid; place-items: center;

  border-radius: 10px; border: 2px solid var(--bg); background: var(--btn); color: var(--btn-text); font: 700 .68rem/1 var(--font-head);

}

.count[hidden] { display: none; }

.nav-shop { font-weight: 600 !important; color: var(--text) !important; }

.drawer-favs {

  display: flex; align-items: center; gap: .6rem; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--line); background: none;

  color: var(--text); font: 600 1.2rem/1.3 var(--font-head); text-align: start; cursor: pointer;

}

.drawer-favs svg { width: 22px; height: 22px; color: var(--accent); }

.drawer-favs .count { position: static; border: 0; }



.page-band {

  position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(36px, 6vw, 72px); color: var(--beige-light);

  background: radial-gradient(120% 160% at 88% 0%, var(--maroon-700) 0%, var(--maroon) 48%, var(--maroon-900) 100%);

}

.page-band::before {

  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09;

  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 6l6.5 13.5L57 15l-4.5 14.5L66 36l-13.5 6.5L57 57l-14.5-4.5L36 66l-6.5-13.5L15 57l4.5-14.5L6 36l13.5-6.5L15 15l14.5 4.5z' fill='none' stroke='%23D6C1A0' stroke-width='1.2'/%3E%3C/svg%3E") repeat;

}

.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; font-size: .85rem; color: rgba(234, 220, 194, .7); }

.crumbs a:hover { color: var(--beige-light); }

.page-band h1 { font-size: clamp(2rem, 4vw, 3rem); color: #F7EEDD; }

.page-band p { max-width: 42em; margin-top: .8rem; color: rgba(234, 220, 194, .84); }



.shop { padding-top: clamp(28px, 4vw, 48px); }

.shop-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {

  flex: none; display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding-inline: 1rem; border-radius: 999px; cursor: pointer;

  border: 1px solid var(--line-strong); background: transparent; color: var(--text-soft); font: 500 .9rem/1 var(--font-head);

  transition: background-color .2s, color .2s, border-color .2s;

}

.chip span { font-size: .74rem; opacity: .7; }

.chip:hover { color: var(--text); border-color: var(--text); }

.chip.on { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }

.shop-tools { display: flex; gap: .6rem; }

.search { display: flex; align-items: center; gap: .5rem; min-width: 240px; height: 44px; padding-inline: .9rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); }

.search:focus-within { border-color: var(--text); }

.search svg { width: 18px; height: 18px; flex: none; color: var(--text-faint); }

.search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 .92rem var(--font-body); }

#shop-sort { height: 44px; padding-inline: .8rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); color: var(--text); font: 500 .88rem var(--font-head); cursor: pointer; }

.shop-count { margin: 1.2rem 0 1rem; font-size: .88rem; color: var(--text-faint); }



.p-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }

.p-card {

  display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);

  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;

}

.p-card[hidden] { display: none; }

.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-strong); }

.p-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--maroon-900); }

.p-link, .p-link img { position: absolute; inset: 0; width: 100%; height: 100%; }

.p-link img { object-fit: cover; transition: opacity .5s, transform .8s var(--ease); }

.p-link .p-alt { opacity: 0; }

.p-badge {

  position: absolute; top: 12px; inset-inline-start: 12px; padding: .3rem .75rem; border-radius: 999px;

  background: var(--beige); color: var(--maroon-900); font: 600 .74rem/1.3 var(--font-head); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5);

}

.p-actions { position: absolute; top: 12px; inset-inline-end: 12px; display: grid; gap: .45rem; }

.p-act {

  width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;

  background: rgba(247, 239, 226, .94); color: var(--maroon); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6);

  transition: transform .3s var(--ease), opacity .3s, background-color .2s, color .2s;

}

.p-act svg { width: 19px; height: 19px; }

.p-act:hover { transform: scale(1.08); }

.p-act.on { background: var(--maroon); color: var(--beige-light); }

.p-act.on svg, .line-remove.on svg, .qv-fav.on svg { fill: currentColor; }

@media (hover: hover) {

  .p-card:hover .p-alt { opacity: 1; }

  .p-card:hover .p-link img { transform: scale(1.04); }

  .p-act:not(.on) { opacity: 0; transform: translateY(-6px); }

  .p-card:hover .p-act, .p-act:focus-visible { opacity: 1; transform: none; }

}

.p-body { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.1rem 1.1rem; }

.p-cat { font: 500 .76rem/1.4 var(--font-head); color: var(--accent); }

.p-body h3 { margin-top: .35rem; font-size: 1.02rem; line-height: 1.45; }

.p-body h3 a:hover { color: var(--accent); }

.p-body p { margin: .4rem 0 .9rem; font-size: .86rem; line-height: 1.7; color: var(--text-soft); }

.p-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); }

.p-price { font-size: .78rem; color: var(--text-faint); }

.p-add {

  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; height: 38px; padding-inline: .85rem; border: 0; border-radius: 10px;

  background: var(--btn); color: var(--btn-text); font: 600 .84rem/1 var(--font-head); white-space: nowrap; cursor: pointer; transition: background-color .2s, transform .2s;

}

.p-add svg { width: 16px; height: 16px; }

.p-add:hover { background: var(--btn-hover); transform: translateY(-1px); }

.shop-empty { padding: 3rem 0; text-align: center; color: var(--text-soft); }

.shop-custom {

  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: clamp(32px, 4vw, 56px);

  padding: clamp(22px, 3vw, 36px); border: 1px dashed var(--line-strong); border-radius: calc(var(--radius) + 4px); background: var(--card);

}

.shop-custom h2 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.shop-custom p { margin-top: .4rem; color: var(--text-soft); }



/* the cart and favourites slide in from the end edge */

.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(14, 0, 8, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }

.scrim.open { opacity: 1; visibility: visible; }

.panel {

  position: fixed; z-index: 71; top: 0; bottom: 0; inset-inline-end: 0; width: min(440px, 100%); display: flex; flex-direction: column;

  background: var(--bg); color: var(--text); box-shadow: 0 0 60px rgba(0, 0, 0, .35); visibility: hidden; transform: translateX(105%);

  transition: transform .4s var(--ease), visibility .4s;

}

[dir="rtl"] .panel { transform: translateX(-105%); }

.panel.open { visibility: visible; transform: none; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); }

.panel-head h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.15rem; }

.panel-head h2 svg { width: 22px; height: 22px; color: var(--accent); }

.panel-head small { font: 500 .8rem var(--font-body); color: var(--text-faint); }

.panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .3rem 1.3rem 1rem; }

.panel-foot { display: grid; gap: .7rem; padding: 1rem 1.3rem calc(1.1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg-alt); }

.panel-foot[hidden] { display: none; }

.order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

.order-form label { display: grid; gap: .3rem; font: 500 .8rem var(--font-head); color: var(--text-soft); }

.order-form input, .order-form select, .order-form textarea {

  width: 100%; padding: .55rem .75rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card); color: var(--text);

  font: 400 .9rem/1.5 var(--font-body); resize: vertical;

}

.order-form input:focus, .order-form select:focus, .order-form textarea:focus { outline: 0; border-color: var(--text); }

.order-note { font-size: .78rem; line-height: 1.6; color: var(--text-faint); }

.order-send { width: 100%; }

.order-clear { justify-self: center; border: 0; background: none; color: var(--text-faint); font: 500 .8rem var(--font-head); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.line { display: grid; grid-template-columns: 84px 1fr auto; align-items: start; gap: .9rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }

.line img { width: 84px; height: 63px; object-fit: cover; border-radius: 10px; }

.line-info { display: grid; gap: .2rem; min-width: 0; }

.line-info b { font: 600 .92rem/1.4 var(--font-head); }

.line-info small { font-size: .78rem; line-height: 1.55; color: var(--text-soft); }

.line-qty { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }

.line-remove { width: 36px; height: 36px; min-width: 36px; }

.line-remove svg { width: 18px; height: 18px; }

.line-btn {

  display: inline-flex; align-items: center; gap: .3rem; height: 34px; margin-top: .4rem; padding-inline: .75rem; border: 0; border-radius: 9px;

  background: var(--btn); color: var(--btn-text); font: 600 .8rem var(--font-head); cursor: pointer;

}

.line-btn svg { width: 15px; height: 15px; }

.panel-empty { display: grid; justify-items: center; gap: 1rem; padding: 3rem 1rem; text-align: center; color: var(--text-soft); }

.panel-empty-icon svg { width: 46px; height: 46px; color: var(--accent); opacity: .7; }

.stepper { display: inline-flex; align-items: center; height: 42px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 10px; }

.stepper button { width: 38px; height: 100%; border: 0; background: transparent; color: var(--text); font-size: 1.15rem; cursor: pointer; }

.stepper button:hover { background: var(--line); }

.stepper input {

  width: 72px; height: 100%; border: 0; border-inline: 1px solid var(--line); background: transparent; color: var(--text);

  text-align: center; font: 600 .95rem var(--font-head); -moz-appearance: textfield; appearance: textfield;

}

.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.stepper.sm { height: 34px; }

.stepper.sm button { width: 32px; }

.stepper.sm input { width: 62px; font-size: .85rem; }



/* quick view */

.qv { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }

.qv.open { opacity: 1; visibility: visible; }

.qv-box {

  position: relative; width: min(980px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; display: grid; grid-template-columns: 1.1fr 1fr;

  background: var(--bg); color: var(--text); border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);

  transform: translateY(16px) scale(.98); transition: transform .4s var(--ease);

}

.qv.open .qv-box { transform: none; }

.qv-close { position: absolute; z-index: 2; top: 12px; inset-inline-end: 12px; background: var(--bg); }

.qv-gallery { display: grid; align-content: start; gap: .7rem; padding: 1rem; background: var(--bg-alt); }

.qv-main { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--maroon-900); }

.qv-main img { width: 100%; height: 100%; object-fit: cover; }

.qv-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }

.qv-thumbs button { aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: none; opacity: .65; cursor: pointer; transition: opacity .2s, border-color .2s; }

.qv-thumbs button.on, .qv-thumbs button:hover { opacity: 1; }

.qv-thumbs button.on { border-color: var(--accent); }

.qv-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.qv-info { display: grid; align-content: start; gap: .9rem; padding: 2rem 1.8rem 1.6rem; }

.qv-info h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; }

.qv-short { color: var(--text-soft); }

.qv-price { font: 600 .9rem var(--font-head); color: var(--accent); }

.qv-choices { display: grid; gap: .9rem; }

.qv-choice { margin: 0; padding: 0; border: 0; }

.qv-choice legend { margin-bottom: .45rem; padding: 0; font: 600 .85rem var(--font-head); }

.pills { display: flex; flex-wrap: wrap; gap: .45rem; }

.pill { position: relative; }

.pill input { position: absolute; opacity: 0; pointer-events: none; }

.pill span {

  display: inline-flex; align-items: center; height: 36px; padding-inline: .85rem; border-radius: 999px; border: 1px solid var(--line-strong);

  font-size: .85rem; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;

}

.pill span:hover { border-color: var(--text); }

.pill input:checked + span { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }

.pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.qv-qty { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }

.qv-label { width: 100%; font: 600 .85rem var(--font-head); }

.qv-min { font-size: .8rem; color: var(--text-faint); }

.qv-buy { display: flex; gap: .6rem; }

.qv-add { flex: 1; }

.qv-fav { width: 52px; height: 52px; border-radius: 12px; }

.qv-fav.on { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }

.qv-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding-top: .9rem; border-top: 1px solid var(--line); font: 500 .86rem var(--font-head); }

.qv-ask { display: inline-flex; align-items: center; gap: .45rem; }

.qv-ask svg { width: 18px; height: 18px; }

.qv-ask:hover { color: var(--accent); }

.qv-share { border: 0; background: none; color: var(--text-soft); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }



.toast {

  position: fixed; z-index: 80; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); max-width: calc(100% - 32px);

  display: flex; align-items: center; gap: 1rem; padding-block: .7rem; padding-inline: 1.1rem .8rem; border-radius: 14px;

  background: var(--maroon-900); color: var(--beige-light); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); font: 500 .9rem var(--font-head);

  opacity: 0; visibility: hidden; translate: -50% 16px; transition: opacity .3s, visibility .3s, translate .3s var(--ease);

}

.toast.show { opacity: 1; visibility: visible; translate: -50% 0; }

.toast-action { padding: .5rem .8rem; border: 0; border-radius: 10px; background: var(--beige); color: var(--maroon-900); font: 600 .82rem var(--font-head); white-space: nowrap; cursor: pointer; }

.toast-action[hidden] { display: none; }

html[data-theme="dark"] .toast { background: var(--beige-light); color: var(--maroon-900); }

html[data-theme="dark"] .toast-action { background: var(--maroon); color: var(--beige-light); }



@media (max-width: 1100px) {

  .hdr-shop { margin-inline-start: auto; }

  .menu-btn { margin-inline-start: 0; }

  .p-grid { grid-template-columns: repeat(3, 1fr); }

}

@media (max-width: 760px) {

  .p-grid { grid-template-columns: repeat(2, 1fr); }

  .shop-tools { width: 100%; }

  .search { flex: 1; min-width: 0; }

  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: .2rem var(--gutter); scrollbar-width: none; }

  .chips::-webkit-scrollbar { display: none; }

  .qv { padding: 0; align-items: end; }

  .qv-box { grid-template-columns: 1fr; max-height: 92svh; border-radius: 20px 20px 0 0; }

  .qv-gallery { padding: .8rem; }

  .qv-info { padding: 1.2rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); }

  /* on a phone the sheet scrolls; the add button stays in reach at its foot */

  .qv-buy { position: sticky; z-index: 1; bottom: 0; margin-inline: -1.2rem; padding: .7rem 1.2rem; background: var(--bg); border-top: 1px solid var(--line); }

}

@media (max-width: 640px) {

  .hdr-fav { display: none; }

  .p-body { padding: .8rem .8rem .9rem; }

  .p-body h3 { font-size: .92rem; }

  .p-body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; }

  .p-foot { flex-direction: column; align-items: stretch; gap: .5rem; }

  .p-price { text-align: center; }

  .p-act { width: 36px; height: 36px; }

  .p-badge { font-size: .68rem; padding: .25rem .6rem; }

  .order-fields { grid-template-columns: 1fr; }

  .toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); }

}



@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  .strip-track, .hero-browse svg { animation: none; }

  .js .rv { opacity: 1; transform: none; transition: none; }

}



/* ---------- the opening screen (partials/intro.html), once a visit ---------- */

/* the lid of a gift box: maroon, a gold frame, the foil logo in a ring that draws itself, the name revealed from its

   middle; then a seam of light and the two halves open like doors. Shown only while html has .intro-on (or opening). */

.intro { display: none; }

html.intro-on .intro, .intro.open { display: block; position: fixed; inset: 0; z-index: 200; pointer-events: none; }

html.intro-on .intro { pointer-events: auto; animation: intro-failsafe .01s 9s forwards; }

@keyframes intro-failsafe { to { visibility: hidden; } }

.intro-door { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; transition: transform 1.15s cubic-bezier(.77, 0, .18, 1) .3s; }

.intro-l { left: 0; }

.intro-r { right: 0; }

.intro-face {

  position: absolute; top: 0; bottom: 0; width: 200%; display: grid; place-items: center;

  background:

    repeating-linear-gradient(45deg, rgba(228, 198, 144, .035) 0 1px, transparent 1px 15px),

    radial-gradient(120% 90% at 50% 44%, #6E1026 0%, #470819 40%, #24020D 100%);

  color: #EADCC2;

}

.intro-l .intro-face { left: 0; }

.intro-r .intro-face { right: 0; }

/* the box opens: each door slides away with its half, a gold edge catching the light */

.intro.open .intro-l { transform: translateX(-101%); }

.intro.open .intro-r { transform: translateX(101%); }

.intro-door::after {

  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; opacity: 0; transition: opacity .3s .3s;

  background: linear-gradient(transparent, #E4C690 25%, #FFF3D6 50%, #E4C690 75%, transparent);

  box-shadow: 0 0 18px 2px rgba(228, 198, 144, .45);

}

.intro-l::after { right: 0; }

.intro-r::after { left: 0; }

.intro.open .intro-door::after { opacity: 1; }

.intro-seam {

  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; transform: scaleY(0); opacity: 0;

  background: linear-gradient(transparent, #FFF3D6 30%, #FFFFFF 50%, #FFF3D6 70%, transparent);

  box-shadow: 0 0 28px 6px rgba(240, 210, 150, .6);

}

.intro.open .intro-seam { animation: intro-seam .75s cubic-bezier(.65, 0, .35, 1) forwards; }

@keyframes intro-seam { 0% { transform: scaleY(0); opacity: 1; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }



/* the gold frame, double ruled with a square at each corner, settles into place */

.intro-frame {

  position: absolute; inset: clamp(14px, 3vw, 30px); border: 1px solid rgba(228, 198, 144, .5);

  opacity: 0; transform: scale(1.04); animation: intro-frame 1.2s var(--ease) .1s forwards;

}

.intro-frame::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(228, 198, 144, .2); }

.intro-frame::after {

  content: ""; position: absolute; inset: -4px;

  background:

    linear-gradient(#E4C690, #E4C690) 0 0 / 7px 7px no-repeat, linear-gradient(#E4C690, #E4C690) 100% 0 / 7px 7px no-repeat,

    linear-gradient(#E4C690, #E4C690) 0 100% / 7px 7px no-repeat, linear-gradient(#E4C690, #E4C690) 100% 100% / 7px 7px no-repeat;

}

@keyframes intro-frame { to { opacity: 1; transform: none; } }



.intro-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 24px; }

.intro-emblem { position: relative; display: grid; place-items: center; width: clamp(150px, 34vw, 212px); aspect-ratio: 1; }

.intro-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }

.intro-ring circle {

  fill: none; stroke: #E4C690; stroke-width: 1.3; stroke-dasharray: 1 1; stroke-dashoffset: 1;

  filter: drop-shadow(0 0 4px rgba(228, 198, 144, .6)); animation: intro-draw 1.25s cubic-bezier(.65, 0, .35, 1) .15s forwards;

}

@keyframes intro-draw { to { stroke-dashoffset: 0; } }

.intro-emblem img {

  width: 62%; height: auto; opacity: 0; transform: scale(.8); filter: blur(10px) drop-shadow(0 6px 18px rgba(0, 0, 0, .45));

  animation: intro-emblem 1s var(--ease) .4s forwards;

}

@keyframes intro-emblem { to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); } }

/* a gleam crosses the foil logo, and only the logo */

.intro-emblem::after {

  content: ""; position: absolute; left: 19%; top: 15%; width: 62%; height: 70%;

  background: linear-gradient(105deg, transparent 35%, rgba(255, 250, 235, .95) 50%, transparent 65%) 150% 0 / 250% 100% no-repeat;

  -webkit-mask: url(../img/logo-gold.png) center / contain no-repeat; mask: url(../img/logo-gold.png) center / contain no-repeat;

  animation: intro-gleam 1.3s ease-in-out 1.35s forwards;

}

@keyframes intro-gleam { to { background-position: -50% 0; } }

.intro-name {

  margin-top: clamp(18px, 3vh, 28px); font: 700 clamp(1.55rem, 5vw, 3rem)/1.35 var(--font-head);

  background: linear-gradient(100deg, #D9B97F 0%, #E4C690 38%, #FFF6DE 50%, #E4C690 62%, #D9B97F 100%) 100% 0 / 300% 100%;

  -webkit-background-clip: text; background-clip: text; color: transparent;

  clip-path: inset(0 50% 0 50%); animation: intro-name .95s cubic-bezier(.65, 0, .35, 1) .85s forwards, intro-foil 1.6s ease 1.6s forwards;

}

@keyframes intro-name { to { clip-path: inset(0 -2% 0 -2%); } }

@keyframes intro-foil { to { background-position: 0 0; } }

.intro-tag {

  margin-top: .55rem; font: 500 clamp(.74rem, 2.2vw, .92rem)/1.5 var(--font-head); color: rgba(234, 220, 194, .78); word-spacing: .3em;

  opacity: 0; transform: translateY(8px); animation: intro-tag .8s var(--ease) 1.25s forwards;

}

[lang="en"] .intro-tag { letter-spacing: .3em; text-transform: uppercase; font-size: clamp(.62rem, 1.8vw, .76rem); }

@keyframes intro-tag { to { opacity: 1; transform: none; } }

/* the shop's motto between two gold diamonds, and the sales manager's name in foil beneath it */

.intro-motto {

  display: flex; align-items: center; gap: .8em; margin-top: clamp(16px, 2.8vh, 24px);

  font: 600 clamp(.95rem, 3.4vw, 1.22rem)/1.5 var(--font-head); color: #F3E6CC; letter-spacing: .01em;

  opacity: 0; transform: translateY(8px); animation: intro-tag .8s var(--ease) 1.65s forwards;

}

.intro-motto::before, .intro-motto::after { content: ""; width: 7px; height: 7px; flex: none; transform: rotate(45deg); background: #E4C690; box-shadow: 0 0 8px rgba(228, 198, 144, .55); }

.intro-sales {

  margin-top: clamp(10px, 1.8vh, 16px); font: 700 clamp(1.05rem, 3.8vw, 1.42rem)/1.4 var(--font-head);

  background: linear-gradient(100deg, #D9B97F 0%, #E4C690 38%, #FFF6DE 50%, #E4C690 62%, #D9B97F 100%) 0 0 / 300% 100%;

  -webkit-background-clip: text; background-clip: text; color: transparent;

  opacity: 0; transform: translateY(8px); animation: intro-tag .8s var(--ease) 2s forwards;

}

.intro-sales small { font: 500 .72em/1 var(--font-head); -webkit-text-fill-color: rgba(234, 220, 194, .72); margin-inline-end: .25em; }

.intro-bar { position: relative; width: 150px; height: 1px; margin-top: clamp(22px, 4vh, 34px); background: rgba(228, 198, 144, .18); overflow: hidden; }

.intro-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #E4C690 30%, #FFF3D6 50%, #E4C690 70%, transparent); transform: scaleX(0); animation: intro-bar 2.1s cubic-bezier(.4, 0, .2, 1) .2s forwards; }

@keyframes intro-bar { to { transform: scaleX(1); } }

/* as the doors part, what is on them leans a touch toward the reader */

.intro.open .intro-center { transform: scale(1.06); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) .2s; }



/* ---------- design your order ---------- */

/* a deep maroon band in both modes, gold details, and a cream ticket in a gold frame that fills in as one chooses */

.builder-sec {

  --text: #EADCC2; --text-soft: rgba(234, 220, 194, .8); --text-faint: rgba(234, 220, 194, .6); --accent: #E4C690;

  --line: rgba(234, 220, 194, .16); --line-strong: rgba(234, 220, 194, .34);

  position: relative; isolation: isolate; color: var(--text);

  background:

    repeating-linear-gradient(45deg, rgba(228, 198, 144, .03) 0 1px, transparent 1px 16px),

    radial-gradient(90% 70% at 85% 0%, #7A1A30 0%, transparent 60%),

    linear-gradient(160deg, #4A0512 0%, #33030F 55%, #22020A 100%);

}

html[data-theme="dark"] .builder-sec { background: repeating-linear-gradient(45deg, rgba(228, 198, 144, .03) 0 1px, transparent 1px 16px), radial-gradient(90% 70% at 85% 0%, #4B0129 0%, transparent 60%), linear-gradient(160deg, #2A0016 0%, #1C000E 100%); }

.builder-sec::before, .builder-sec::after { content: ""; position: absolute; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7; }

.builder-sec::before { top: 0; }

.builder-sec::after { bottom: 0; }

.builder-sec .sec-lead { color: var(--text-soft); }

.builder { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }

.builder-steps { display: grid; gap: 1.1rem; }

.bstep { margin: 0; padding: 1.15rem 1.2rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 244, 222, .035); }

.bstep legend { float: inline-start; width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .7rem; margin-bottom: .9rem; padding: 0; font: 600 1.02rem/1.4 var(--font-head); color: var(--text); }

.bstep legend small { font: 400 .8rem/1.4 var(--font-body); color: var(--text-faint); }

.bstep legend + * { clear: both; }

.bstep-num {

  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 .8rem/1 var(--font-head); color: #4A0512;

  background: linear-gradient(135deg, #F2DCA6 0%, #C9A060 45%, #F6E3B4 60%, #B5823F 100%); box-shadow: 0 4px 12px -4px rgba(201, 160, 96, .7);

}

.bselect { position: relative; }

.bselect select {

  width: 100%; height: 54px; padding-inline: 1rem 2.8rem; border-radius: 12px; border: 1px solid var(--line-strong); appearance: none; cursor: pointer;

  background: rgba(255, 244, 222, .07); color: var(--text); font: 500 1rem var(--font-head); transition: border-color .25s, background-color .25s;

}

[dir="ltr"] .bselect select { padding-inline: 1rem 2.8rem; }

.bselect select:hover, .bselect select:focus { border-color: var(--gold); background-color: rgba(255, 244, 222, .1); outline: none; }

.bselect select option, .bselect select optgroup { color: #2A0016; background: #FBF5EA; }

.bselect svg { position: absolute; inset-inline-end: 1rem; top: 50%; width: 18px; height: 18px; translate: 0 -50%; color: var(--gold-bright); pointer-events: none; }

.bchips { display: flex; flex-wrap: wrap; gap: .55rem; }

.bchip { position: relative; cursor: pointer; }

.bchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.bchip span {

  display: inline-flex; align-items: center; gap: .5rem; min-height: 42px; padding: .5rem 1rem; border-radius: 999px;

  border: 1px solid var(--line-strong); background: rgba(255, 244, 222, .04); color: var(--text); font: 500 .9rem/1.2 var(--font-head);

  transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .2s;

}

.bchip:hover span { border-color: var(--gold); transform: translateY(-1px); }

.bchip input:checked + span {

  color: #3A0418; border-color: transparent; background: linear-gradient(135deg, #F2DCA6 0%, #D4AE6E 45%, #F6E3B4 62%, #C49A5A 100%);

  box-shadow: 0 8px 20px -10px rgba(228, 198, 144, .8), inset 0 1px 0 rgba(255, 255, 255, .5);

}

.bchip input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* a small swatch for each finish */

.sw { width: 16px; height: 16px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 1px 3px rgba(0, 0, 0, .3); }

.sw-gold { background: linear-gradient(135deg, #F6E3B4, #C9A060 50%, #F2DCA6); }

.sw-silver { background: linear-gradient(135deg, #FAFAFA, #A8A8A8 50%, #E8E8E8); }

.sw-emboss { background: #D9C4A2; box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .7), inset -2px -2px 3px rgba(80, 40, 10, .45); }

.sw-uv { background: radial-gradient(circle at 32% 30%, #fff 0 14%, #3A0A1E 16% 100%); }

.sw-velvet { background: radial-gradient(circle at 40% 35%, #8A2A4A, #4A0B24); box-shadow: inset 0 0 4px rgba(0, 0, 0, .6); }

.sw-matte { background: #7A6555; }

.sw-gloss { background: linear-gradient(160deg, #fff 0 22%, #6A1A34 24% 100%); }

.sw-laser { background: transparent; border: 1.5px dashed var(--gold-bright); box-shadow: none; }

.bchip input:checked + span .sw-laser { border-color: #7A0C20; }

.binput {

  width: 100%; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255, 244, 222, .07);

  color: var(--text); font: 500 .95rem/1.5 var(--font-body); transition: border-color .25s;

}

.binput::placeholder { color: var(--text-faint); }

.binput:focus { outline: none; border-color: var(--gold); }

.bqty-other { max-width: 220px; margin-top: .8rem; }

.bmore { display: grid; gap: .7rem; }

textarea.binput { resize: vertical; min-height: 64px; }



/* the ticket: cream paper, a gold double frame, a perforated line above the button */

.ticket { position: sticky; top: 110px; }

.ticket-in {

  position: relative; padding: clamp(24px, 3vw, 34px); border-radius: 18px; color: #4A0512;

  background: radial-gradient(120% 80% at 50% 0%, #FFFCF5 0%, #F6EBD7 100%);

  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(228, 198, 144, .55);

}

.ticket-in::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(181, 130, 63, .45); border-radius: 12px; pointer-events: none; }

.ticket-eyebrow { display: flex; align-items: center; justify-content: center; gap: .7rem; font: 600 .8rem/1 var(--font-head); color: #9A6A2F; letter-spacing: .02em; }

.ticket-eyebrow::before, .ticket-eyebrow::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }

.ticket-product {

  margin-top: 1.1rem; text-align: center; font: 700 clamp(1.25rem, 2.2vw, 1.6rem)/1.4 var(--font-head);

  background: linear-gradient(100deg, #7A0C20 0%, #7A0C20 40%, #C08A44 50%, #7A0C20 60%, #7A0C20 100%) 100% 0 / 300% 100%;

  -webkit-background-clip: text; background-clip: text; color: transparent;

}

.ticket-product.flash { animation: foil-gleam 1.2s var(--ease); }

.ticket.empty .ticket-product { background: none; color: rgba(74, 5, 18, .45); -webkit-text-fill-color: rgba(74, 5, 18, .45); font-size: 1.1rem; font-weight: 600; }

.ticket-section { min-height: 1.4em; margin-top: .25rem; text-align: center; font: 500 .85rem/1.5 var(--font-head); color: #9A6A2F; }

.ticket-rows { display: grid; gap: 0; margin: 1.3rem 0 1.4rem; }

.ticket-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-top: 1px solid rgba(122, 12, 32, .12); }

.ticket-rows dt { font: 500 .85rem var(--font-head); color: rgba(74, 5, 18, .6); white-space: nowrap; }

.ticket-rows dd { margin: 0; text-align: end; font: 600 .95rem/1.5 var(--font-head); color: #4A0512; }

.ticket-send { position: relative; width: 100%; white-space: normal; }

.ticket-send::before { content: ""; position: absolute; inset-inline: -10px; top: -14px; border-top: 1.5px dashed rgba(122, 12, 32, .22); }

.ticket .btn-fill { background: linear-gradient(135deg, #8A1426, #5A0718); color: #F6E9D2; box-shadow: 0 14px 28px -14px rgba(90, 7, 24, .9); }

.ticket .btn-fill:hover { background: linear-gradient(135deg, #9C1C30, #6A0B20); }

.ticket.empty .ticket-send { opacity: .75; }

.ticket-err { margin-top: .7rem; text-align: center; font: 600 .85rem var(--font-head); color: #B0182E; }

.ticket-note { margin-top: .9rem; text-align: center; font-size: .8rem; line-height: 1.7; color: rgba(74, 5, 18, .62); }

@media (max-width: 960px) {

  .builder { grid-template-columns: 1fr; }

  .ticket { position: static; }

}

@media (max-width: 640px) {

  .bstep { padding: 1rem .9rem 1.1rem; }

  .bchip span { min-height: 40px; padding: .45rem .85rem; font-size: .86rem; }

}



/* ---------- moving between pages ---------- */

/* where the browser can, a page gives way softly to the next: the old one fades back, the new one rises into place,

   while the header holds still; a fine gold line runs across the top as the new page arrives */

@view-transition { navigation: auto; }

.hdr { view-transition-name: site-header; }

::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4, 0, 1, 1) both; }

::view-transition-new(root) { animation: vt-in .6s cubic-bezier(.2, .7, .2, 1) both; }

::view-transition-group(site-header) { animation-duration: .4s; }

@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }

@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

html.vt-arrive::after {

  content: ""; position: fixed; z-index: 300; top: 0; inset-inline: 0; height: 2px; pointer-events: none; transform-origin: center;

  background: linear-gradient(90deg, transparent, #C9A060 20%, #FFF1CF 50%, #C9A060 80%, transparent); box-shadow: 0 0 12px rgba(228, 198, 144, .7);

  animation: vt-line 1s cubic-bezier(.2, .7, .2, 1) forwards;

}

@keyframes vt-line { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }



/* ---------- every device: from the smallest phones to the largest screens ---------- */

/* below the full menu, the cart and the menu button sit together at the far end, on tablets as on phones */

@media (max-width: 1300px) {

  .hdr-shop { margin-inline-start: auto; }

  .menu-btn { margin-inline-start: 0; }

}

/* a narrower hero on the wide cut: the copy keeps to its own side, on a wider shade, so it never runs over the film */

@media (min-aspect-ratio: 4/5) and (max-width: 1000px) {

  .hero-copy { width: 62%; }

  .hero::after { background: linear-gradient(to left, rgba(var(--shade), .97) 0%, rgba(var(--shade), .93) 58%, rgba(var(--shade), .55) 68%, rgba(var(--shade), 0) 78%); }

}

/* on a phone a button may take two lines rather than push out of its box */

@media (max-width: 640px) {

  .btn { max-width: 100%; white-space: normal; text-align: center; }

  .cta-text { min-width: 0; }

  .cta-actions { grid-template-columns: minmax(0, 1fr); }

}

@media (max-width: 400px) {

  .sec-links { grid-template-columns: 1fr; }

  .page-band h1 { font-size: clamp(1.55rem, 7.6vw, 1.9rem); }

}

@media (max-width: 380px) {

  .hero-actions { flex-wrap: wrap; margin-top: 1.1rem; }

  .hero-actions .btn { flex: 1 1 100%; }

}

@media (max-width: 340px) {

  .works-grid, .p-grid, .c-grid.c-grid-more { grid-template-columns: 1fr; }

  .gallery { columns: 1; }

  .cta { padding: 22px 18px; }

  /* two pictures instead of three, so the words on the last one stay whole */

  .svc-pics { grid-template-columns: 1fr 1.9fr; }

  .svc-pic:nth-child(2) { display: none; }

  .svc-pic-label { width: 70%; }

}

/* folding phones, closed: the shop's name takes two lines rather than lose its end */

@media (max-width: 300px) {

  :root { --gutter: 12px; }

  .hdr-in { gap: .35rem; }

  .brand-mark { width: 28px; height: 32px; }

  .brand-name b { font-size: .82rem; line-height: 1.15; white-space: normal; }

}

/* little height, as on a phone on its side: a slimmer header, and the hero's copy all on the first screen */

@media (max-height: 500px) and (orientation: landscape) {

  html { scroll-padding-top: 70px; }

  .hdr-in { min-height: 56px; }

  .brand-mark { width: 34px; height: 38px; }

  .menu-btn, .call-btn { height: 42px; }

  .hero { min-height: max(280px, calc(100svh - 95px)); }

  .hero-in { padding-block: .9rem; }

  .eyebrow { margin-bottom: .35rem; font-size: .78rem; }

  .hero h1, html[lang="en"] .hero h1 { font-size: clamp(1.4rem, 4.2vw, 1.9rem); line-height: 1.2; }

  .hero-lead { margin-top: .35rem; font-size: .84rem; line-height: 1.6; }

  .hero-actions { margin-top: .7rem; gap: .5rem; }

  .hero-actions .btn { min-height: 42px; padding: .35rem 1rem; font-size: .88rem; }

  .hero-links { margin-top: .55rem; }

  .hero-browse { font-size: .84rem; }

  .section { padding-block: 44px; }

  .page-band { padding-block: 22px; }

  .page-band h1 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); }

  .drawer > a { padding-block: .55rem; font-size: 1rem; }

  .drawer-tools { margin-top: .9rem; }

}

/* the quick view side by side where there is width but little height */

@media (max-height: 500px) and (min-width: 560px) {

  .qv { padding: 8px; align-items: center; }

  .qv-box { grid-template-columns: .8fr 1fr; max-height: calc(100svh - 16px); border-radius: 16px; }

}

/* the opening fits a short screen */

@media (max-height: 500px) {

  .intro-emblem { width: clamp(72px, 26vh, 110px); }

  .intro-name { margin-top: 8px; font-size: clamp(1.2rem, 6.5vh, 1.6rem); }

  .intro-tag { margin-top: .15rem; }

  .intro-bar { margin-top: 8px; }

  .intro-motto { margin-top: 6px; font-size: .9rem; }

  .intro-sales { margin-top: 4px; font-size: 1rem; }

}

/* on a short screen the whole cart scrolls as one, so the order form never hides the products */

@media (max-height: 640px) {

  .panel { overflow-y: auto; overscroll-behavior: contain; }

  .panel-head { position: sticky; top: 0; z-index: 1; background: var(--bg); }

  .panel-body { flex: none; overflow: visible; }

}

/* large screens: the whole page grows with the screen, rather than sitting small in its middle */

@media (min-width: 1800px) {

  html { font-size: 112.5%; }

  :root { --wrap: 1440px; }

  .hdr-in { min-height: 4.875rem; }

  .brand-mark { width: 2.875rem; height: 3.125rem; }

  .icon-btn, .lang-btn { height: 2.625rem; min-width: 2.625rem; }

  .icon-btn svg { width: 1.25rem; height: 1.25rem; }

  .call-btn { height: 2.875rem; }

  .call-btn svg { width: 1.2rem; height: 1.2rem; }

  .btn { min-height: 3.25rem; }

  .btn svg { width: 1.25rem; height: 1.25rem; }

  .c-btn { min-height: 2.875rem; }

  .hero-copy { width: min(100%, 35rem); }

  .svc-pics { height: 5.25rem; }

  .wa-float { width: 3.5rem; height: 3.5rem; }

  .wa-float svg { width: 1.75rem; height: 1.75rem; }

  .to-top { width: 3rem; height: 3rem; }

  .lb img { max-width: min(68rem, 92vw); }

}

@media (min-width: 2400px) {

  html { font-size: 137.5%; }

  :root { --wrap: 1860px; }

}

@media (min-width: 3400px) {

  html { font-size: 200%; }

  :root { --wrap: 2700px; }

}

/* ---------- where to find us: the map beside the week's hours ---------- */
.contact-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.visit { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(12px, 1.4vw, 18px); }
.visit-map { position: relative; min-height: clamp(300px, 34vw, 460px); overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-alt); }
.visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visit-open {
  position: absolute; bottom: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .5rem .9rem;
  border-radius: 11px; background: var(--btn); color: var(--btn-text); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); font: 600 .84rem/1.3 var(--font-head); transition: background-color .2s, transform .2s var(--ease);
}
.visit-open:hover { background: var(--btn-hover); transform: translateY(-1px); }
.visit-open svg { width: 17px; height: 17px; flex: none; }
.hours { display: flex; flex-direction: column; padding: clamp(16px, 1.8vw, 24px); border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.hours-head { display: flex; flex-direction: column; gap: .55rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.hours-head h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.hours-head h3 svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.hours-now { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; align-self: flex-start; max-width: 100%; padding: .4rem .8rem; border-radius: 10px; font-size: .84rem; line-height: 1.5; }
.hours-now[hidden] { display: none; }
.hours-now b { font: 700 .88rem/1.4 var(--font-head); }
.hours-now small { font-size: .8rem; opacity: .9; }
.hours-now i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: currentColor; }
.hours-now.open { background: rgba(31, 122, 72, .12); color: #17683C; }
.hours-now.open i { animation: hours-pulse 1.8s ease-out infinite; }
.hours-now.soon { background: rgba(190, 120, 20, .14); color: #8F5A0C; }
.hours-now.closed { background: rgba(176, 24, 46, .1); color: #A0162B; }
html[data-theme="dark"] .hours-now.open { background: rgba(84, 200, 134, .14); color: #7FE0A8; }
html[data-theme="dark"] .hours-now.soon { background: rgba(240, 180, 80, .14); color: #F0C070; }
html[data-theme="dark"] .hours-now.closed { background: rgba(255, 120, 130, .13); color: #FF9CA6; }
@keyframes hours-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.hours-list { flex: 1; display: flex; flex-direction: column; margin: .55rem 0 0; padding: 0; list-style: none; }
.hours-list li { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; padding: .4rem .65rem; border-radius: 9px; font-size: .92rem; color: var(--text-soft); }
.hours-list b { font: 600 .9rem/1.4 var(--font-head); color: var(--text); text-align: end; }
.hours-list .is-closed b { color: var(--text-faint); font-weight: 500; }
.hours-list .is-today { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); font-weight: 600; }
.hours-place { display: flex; align-items: center; gap: .45rem; margin-top: .7rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .86rem; color: var(--text-soft); }
.hours-place svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
@media (max-width: 860px) {
  .visit { grid-template-columns: 1fr; }
  .visit-map { min-height: 320px; }
}
@media (prefers-reduced-motion: reduce) { .hours-now.open i { animation: none; } }

/* ---------- client reviews: the score, the cards, and the form ---------- */
.rvw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(18px, 2.2vw, 28px); }
.rvw-score { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.3rem; padding: .9rem 1.2rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.rvw-avg { font: 800 clamp(2.2rem, 4vw, 3rem)/1 var(--font-head); color: var(--text); }
.rvw-score-side { display: grid; gap: .25rem; }
.rvw-score-side small { font-size: .82rem; color: var(--text-faint); }
.rvw-bars { display: grid; gap: .15rem; min-width: 150px; margin: 0; padding: 0; list-style: none; font-size: .72rem; color: var(--text-faint); }
.rvw-bars li { display: grid; grid-template-columns: 12px 1fr 22px; align-items: center; gap: .45rem; }
.rvw-bars i { display: block; height: 5px; overflow: hidden; border-radius: 3px; background: var(--line); }
.rvw-bars u { display: block; height: 100%; border-radius: 3px; background: #D9A43B; }
.rvw-add svg { width: 17px; height: 17px; }
.stars { display: inline-flex; gap: 2px; direction: ltr; }
.stars svg { width: 17px; height: 17px; fill: var(--line-strong); }
.stars svg.on { fill: #D9A43B; }
.stars svg.half { fill: #D9A43B; opacity: .5; }
.rvw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 20px); }
.rvw-card { display: flex; flex-direction: column; gap: .8rem; padding: clamp(16px, 1.6vw, 22px); border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.rvw-top { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .7rem; }
.rvw-avatar { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--btn); color: var(--btn-text); font: 700 1.05rem/1 var(--font-head); }
.rvw-who { flex: 1; min-width: 7rem; display: grid; }
.rvw-who b { font: 600 .96rem/1.4 var(--font-head); overflow-wrap: anywhere; }
.rvw-who time { justify-self: start; font-size: .76rem; color: var(--text-faint); }
.rvw-text { font-size: .94rem; line-height: 1.85; color: var(--text-soft); overflow-wrap: anywhere; }
.rvw-reply { padding: .7rem .9rem; border-inline-start: 3px solid var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: .88rem; line-height: 1.75; }
.rvw-reply b { display: block; font: 600 .8rem/1.5 var(--font-head); color: var(--accent); }
.rvw-empty { padding: clamp(24px, 4vw, 44px) 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; color: var(--text-soft); }
.rvw-flash { margin-bottom: 1.1rem; padding: .7rem 1rem; border-radius: 11px; background: rgba(176, 24, 46, .1); color: #A0162B; font: 600 .9rem/1.6 var(--font-head); }
.rvw-flash.ok { background: rgba(31, 122, 72, .12); color: #17683C; }
html[data-theme="dark"] .rvw-flash { color: #FF9CA6; }
html[data-theme="dark"] .rvw-flash.ok { color: #7FE0A8; }
.rvw-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.2rem; margin-top: clamp(22px, 3vw, 36px); color: var(--text-soft); font-size: .9rem; }
.rvw-dialog { width: min(520px, calc(100% - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: 18px; background: var(--bg); color: var(--text); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); overflow-y: auto; }
.rvw-dialog::backdrop { background: rgba(14, 0, 8, .6); }
.rvw-form { position: relative; display: grid; gap: .9rem; padding: clamp(18px, 3vw, 28px); }
.rvw-form h2 { padding-inline-end: 2.6rem; font-size: 1.3rem; }
.rvw-close { position: absolute; top: 12px; inset-inline-end: 12px; }
.rvw-rate { margin: 0; padding: 0; border: 0; }
.rvw-rate legend { margin-bottom: .35rem; padding: 0; font: 600 .86rem var(--font-head); }
.rvw-rate-stars { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.rvw-rate-stars input { position: absolute; opacity: 0; pointer-events: none; }
.rvw-rate-stars label { display: grid; place-items: center; width: 46px; height: 46px; cursor: pointer; border-radius: 10px; }
.rvw-rate-stars svg { width: 36px; height: 36px; fill: var(--line-strong); transition: fill .15s, transform .15s; }
.rvw-rate-stars label:hover svg, .rvw-rate-stars label:hover ~ label svg, .rvw-rate-stars input:checked ~ label svg { fill: #D9A43B; }
.rvw-rate-stars label:hover svg { transform: scale(1.1); }
.rvw-rate-stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.rvw-field { display: grid; gap: .3rem; font: 600 .86rem var(--font-head); }
.rvw-field input, .rvw-field textarea { width: 100%; padding: .65rem .8rem; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--card); color: var(--text); font: 400 .95rem/1.6 var(--font-body); resize: vertical; }
.rvw-field input:focus, .rvw-field textarea:focus { outline: 0; border-color: var(--text); }
.rvw-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rvw-msg { padding: .55rem .8rem; border-radius: 10px; background: rgba(176, 24, 46, .1); color: #A0162B; font: 600 .86rem/1.6 var(--font-head); }
.rvw-msg.ok { background: rgba(31, 122, 72, .12); color: #17683C; }
html[data-theme="dark"] .rvw-msg { color: #FF9CA6; }
html[data-theme="dark"] .rvw-msg.ok { color: #7FE0A8; }
.rvw-send { width: 100%; }
.rvw-send[disabled] { opacity: .65; cursor: wait; }
/* a product with more than three pictures: the rest in a row under the first three */
.pd-more-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(12px, 1.4vw, 20px); }
@media (max-width: 1000px) { .rvw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .rvw-grid { grid-template-columns: minmax(0, 1fr); }
  .rvw-bar { align-items: stretch; }
  .rvw-score, .rvw-add { width: 100%; }
  .rvw-bars { flex: 1; }
  .stats-list { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)) !important; }
}

/* a list with nothing in it yet: a section before its first product, the shop, the gallery */
.svc-lead { margin: .9rem 0 1.3rem; font-size: .9rem; line-height: 1.7; color: var(--text-soft); }
.empty-note { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-bottom: clamp(24px, 4vw, 44px); padding: clamp(32px, 6vw, 64px) 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; }
.empty-note p { margin: 0; max-width: 46ch; font-size: 1rem; line-height: 1.8; color: var(--text-soft); }

/* the contact card's heading: orders and quotes, the sales manager's title and his name, all in one size.
   Sized by the card's own width (cqi) so the three always fit on one line; on a phone they stand one under the other. */
.cta { container-type: inline-size; }
.cta .cta-line { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; margin: 0 0 -.6rem; color: inherit; font: 700 1.6rem/1.45 var(--font-head); font-size: clamp(1.2rem, 3.2cqi, 2.6rem); }
.cta .cta-line span { color: inherit; white-space: nowrap; }
.cta .cta-line span:not(:last-child)::after { content: "·"; margin-inline-start: .45em; opacity: .55; }
.cta .cta-line + .cta-text p { margin-top: 0; }
@media (max-width: 800px) {
  .cta .cta-line { display: block; margin: 0; font-size: 1.6rem; font-size: clamp(1.2rem, 7.9cqi, 2.1rem); line-height: 1.45; }
  .cta .cta-line span { display: block; white-space: normal; }
  .cta .cta-line span::after { content: none !important; }
}

/* a section with one or two products so far: the wide picture with "browse" stays wide, so its words stay whole */
.svc-pics.n2 { grid-template-columns: 1fr 2.35fr; }
.svc-pics.n1 { grid-template-columns: 1fr; }
@media (max-width: 340px) {
  .svc-pics.n2 { grid-template-columns: 1fr 1.9fr; }
  .svc-pics.n2 .svc-pic:nth-child(2) { display: block; }
}

/* a product whose photos are not up yet: a clean card of words, never an empty picture */
.c-nopic { border-top: 3px solid color-mix(in srgb, var(--accent) 65%, transparent); }
.c-num { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: .85rem; border-radius: 10px; background: var(--btn); color: var(--btn-text); font: 700 .8rem/1 var(--font-head); }
.c-compact .c-num { width: 30px; height: 30px; margin-bottom: .6rem; font-size: .74rem; }