/* Design 4, Parlour. Every selector is scoped to html[data-design="4"]. */
html[data-design="4"] {
  --ps-radius: 4px;
  --ps-radius-sm: 3px;
  --ps-font-display: "Abril Fatface", "Aref Ruqaa", Georgia, serif;
  --ps-font-body: "Lora", "Noto Naskh Arabic", Georgia, serif;
  --ps-header-h: 68px;
  --d4-max: 1180px;
  --d4-st: 44px; /* awning stripe width = one scallop */
}
html[data-design="4"][lang="ar"] {
  --ps-font-display: "Aref Ruqaa", "Abril Fatface", serif;
  --ps-font-body: "Noto Naskh Arabic", "Lora", Georgia, serif;
}
html[data-design="4"][data-theme="light"] {
  --d4-paper: color-mix(in oklab, var(--brand-cream) 72%, #fffdf6);
  --d4-paper-2: var(--brand-cream);
  --d4-card: color-mix(in oklab, var(--brand-cream) 30%, #fffef9);
  --d4-board: color-mix(in oklab, var(--brand-deep) 80%, #1a1008);
  --d4-ink: color-mix(in oklab, var(--brand-deep) 55%, #1d130c);
  --d4-muted: color-mix(in oklab, var(--brand-deep) 30%, #56483c);
  --d4-gold: #b38c3c;
  --d4-gold-ink: color-mix(in oklab, #7c5a1b 85%, var(--brand-deep));
  --d4-gold-hi: #e6c46e;
  --d4-on-board: #f7ecd5;
  --d4-on-board-2: #dccaa8;
  --d4-stripe: color-mix(in oklab, var(--brand) 82%, var(--brand-deep));
  --d4-stripe-2: color-mix(in oklab, var(--brand-cream) 55%, #fffaf0);
  --d4-tile-bg: color-mix(in oklab, var(--brand-cream) 80%, #fff);
  --d4-tile-deep: color-mix(in oklab, var(--brand-deep) 85%, #1a1008);
  --d4-tile-br: color-mix(in oklab, var(--brand) 80%, var(--brand-deep));
  --d4-glow: transparent;
  --ps-bg: var(--d4-paper);
  --ps-surface: var(--d4-card);
  --ps-surface-2: var(--d4-paper-2);
  --ps-ink: var(--d4-ink);
  --ps-muted: var(--d4-muted);
  --ps-line: color-mix(in srgb, var(--d4-ink) 20%, transparent);
  --ps-accent: color-mix(in oklab, var(--brand) 58%, var(--brand-deep));
  --ps-on-accent: #fffaf0;
  --ps-focus: color-mix(in oklab, var(--brand) 58%, var(--brand-deep));
  --ps-shadow: 0 24px 60px -28px rgba(60, 30, 8, .5);
}
/* After closing: the parlour lit by gas lamps */
html[data-design="4"][data-theme="dark"] {
  --d4-paper: color-mix(in oklab, var(--brand-deep) 28%, #17100b);
  --d4-paper-2: color-mix(in oklab, var(--brand-deep) 30%, #22170f);
  --d4-card: color-mix(in oklab, var(--brand-deep) 20%, #261b12);
  --d4-board: color-mix(in oklab, var(--brand-deep) 45%, #0b0705);
  --d4-ink: #f4e6c8;
  --d4-muted: #cfbb97;
  --d4-gold: #b8913f;
  --d4-gold-ink: #e6c475;
  --d4-gold-hi: #ecca74;
  --d4-on-board: #f4e6c8;
  --d4-on-board-2: #d3c09d;
  --d4-stripe: color-mix(in oklab, var(--brand) 52%, #26170c);
  --d4-stripe-2: color-mix(in oklab, var(--brand-cream) 58%, #6a4724);
  --d4-tile-bg: color-mix(in oklab, var(--brand-cream) 16%, #2a1e14);
  --d4-tile-deep: color-mix(in oklab, var(--brand-deep) 45%, #0b0705);
  --d4-tile-br: color-mix(in oklab, var(--brand) 40%, #2a1a0e);
  --d4-glow: rgba(255, 176, 84, .16);
  --ps-bg: var(--d4-paper);
  --ps-surface: var(--d4-card);
  --ps-surface-2: var(--d4-paper-2);
  --ps-ink: var(--d4-ink);
  --ps-muted: var(--d4-muted);
  --ps-line: rgba(230, 196, 117, .24);
  --ps-accent: #e0b960;
  --ps-on-accent: #22150a;
  --ps-focus: #f1d084;
  --ps-shadow: 0 30px 70px -26px rgba(0, 0, 0, .8);
}

html[data-design="4"] body { line-height: 1.65; }
html[data-design="4"][lang="ar"] body { line-height: 1.85; }
html[data-design="4"] .d4-wrap { max-width: var(--d4-max); margin-inline: auto; padding-inline: var(--ps-gutter); }
html[data-design="4"] .d4-sec { padding-block: clamp(56px, 8vw, 104px); }
html[data-design="4"] .d4-head2 { display: grid; justify-items: center; text-align: center; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }
html[data-design="4"] .d4-h2 { font: 400 clamp(2.1rem, 4.6vw, 3.4rem)/1.1 var(--ps-font-display); color: var(--ps-ink); text-wrap: balance; }
html[data-design="4"][lang="ar"] .d4-h2 { font-weight: 700; line-height: 1.5; }
html[data-design="4"] .d4-rule { width: 150px; height: 16px; color: var(--d4-gold); }
html[data-design="4"] .d4-lead { color: var(--ps-muted); max-width: 54ch; font-size: 1.04rem; }
html[data-design="4"][lang="en"] .d4-lead { font-style: italic; }

/* ---------- shared tile pattern ---------- */
html[data-design="4"] .d4-tiles { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-design="4"] .d4-t-bg { fill: var(--d4-tile-bg); }
html[data-design="4"] .d4-t-deep { fill: var(--d4-tile-deep); }
html[data-design="4"] .d4-t-br { fill: var(--d4-tile-br); }
html[data-design="4"] .d4-t-gold { fill: var(--d4-gold); }

/* ---------- buttons ---------- */
html[data-design="4"] .d4-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  border: 0; border-radius: 3px;
  background: var(--ps-accent); color: var(--ps-on-accent);
  box-shadow: inset 0 0 0 1px var(--ps-accent), inset 0 0 0 3px color-mix(in srgb, var(--ps-on-accent) 55%, transparent);
  font: 600 1rem/1.2 var(--ps-font-body); text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
html[data-design="4"] .d4-btn:hover { background: var(--d4-board); box-shadow: inset 0 0 0 1px var(--d4-board), inset 0 0 0 3px color-mix(in srgb, var(--d4-gold-hi) 60%, transparent); color: var(--d4-on-board); }
html[data-design="4"] .d4-btn-line { background: transparent; color: var(--ps-ink); box-shadow: inset 0 0 0 1.5px var(--ps-ink); }
html[data-design="4"] .d4-btn-line:hover { background: var(--ps-ink); color: var(--ps-bg); box-shadow: inset 0 0 0 1.5px var(--ps-ink); }
html[data-design="4"] .d4-btn .ps-ico { width: 1.15em; height: 1.15em; }

/* ---------- header: the fascia board ---------- */
html[data-design="4"] .d4-top {
  position: sticky; z-index: 40; top: 0;
  background: var(--d4-board); color: var(--d4-on-board);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--d4-gold) 55%, transparent);
}
html[data-design="4"] .d4-top-in {
  max-width: var(--d4-max); margin-inline: auto; padding-inline: var(--ps-gutter);
  height: var(--ps-header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
html[data-design="4"] .d4-brand { display: flex; color: var(--d4-gold-hi); justify-self: start; min-height: 44px; align-items: center; }
html[data-design="4"] .d4-logo { height: 42px; }
html[data-design="4"] .d4-nav { display: flex; gap: 6px; }
html[data-design="4"] .d4-nav a,
html[data-design="4"] .d4-foot-nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: 14px;
  font: 500 1rem var(--ps-font-body); text-decoration: none; color: var(--d4-on-board);
  background: linear-gradient(var(--d4-gold-hi), var(--d4-gold-hi)) no-repeat 50% calc(100% - 6px) / 0 1px;
  transition: background-size .25s ease, color .2s ease;
}
html[data-design="4"] .d4-nav a:hover,
html[data-design="4"] .d4-foot-nav a:hover { background-size: calc(100% - 28px) 1px; color: var(--d4-gold-hi); }
html[data-design="4"] .d4-ctl { justify-self: end; display: flex; align-items: center; gap: 2px; color: var(--d4-on-board); }
html[data-design="4"] .d4-ctl .ps-ctl:hover { background: color-mix(in srgb, var(--d4-gold-hi) 16%, transparent); }
html[data-design="4"] .d4-ctl .ps-count { box-shadow: 0 0 0 2px var(--d4-board); }
html[data-design="4"] .d4-top :focus-visible { outline-color: var(--d4-gold-hi); }
html[data-design="4"] .d4-burger { display: none; }
html[data-design="4"] .d4-sheet { border-top: 1px solid color-mix(in srgb, var(--d4-gold) 45%, transparent); padding: 10px var(--ps-gutter) 26px; }
html[data-design="4"] .d4-sheet nav { display: grid; }
html[data-design="4"] .d4-sheet a {
  display: flex; align-items: center; min-height: 56px;
  font: 400 1.7rem/1.3 var(--ps-font-display); color: var(--d4-on-board); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--d4-gold) 30%, transparent);
}
html[data-design="4"][lang="ar"] .d4-sheet a { font-weight: 700; font-size: 1.8rem; }
html[data-design="4"] .d4-sheet a:hover { color: var(--d4-gold-hi); }
@media (max-width: 899px) {
  html[data-design="4"] .d4-top-in { grid-template-columns: auto 1fr; }
  html[data-design="4"] .d4-nav { display: none; }
  html[data-design="4"] .d4-burger { display: inline-grid; }
  html[data-design="4"] .d4-logo { height: 36px; }
}
@media (min-width: 900px) {
  html[data-design="4"] .d4-sheet { display: none !important; }
}

/* ---------- hero: fascia, awning, window, floor ---------- */
html[data-design="4"] .d4-hero { position: relative; overflow-x: clip; }
html[data-design="4"] .d4-fascia { background: var(--d4-board); color: var(--d4-on-board); padding: clamp(18px, 3vw, 30px) var(--ps-gutter) clamp(20px, 3vw, 30px); }
html[data-design="4"] .d4-fascia-in {
  max-width: var(--d4-max); margin-inline: auto;
  display: grid; justify-items: center; text-align: center; gap: 2px;
  padding: clamp(14px, 2.4vw, 26px) 16px clamp(16px, 2.4vw, 26px);
  border: 1px solid color-mix(in srgb, var(--d4-gold) 70%, transparent);
  outline: 1px solid color-mix(in srgb, var(--d4-gold) 40%, transparent); outline-offset: 5px;
}
html[data-design="4"] .d4-gilt {
  color: var(--d4-gold-hi);
  background: linear-gradient(176deg, #fff3c4 0%, #ecc764 30%, #a97a26 50%, #dcb04a 66%, #f8e19a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45));
}
html[data-design="4"] .d4-fascia h1 {
  font: 400 clamp(2.4rem, 7.4vw, 5.6rem)/1.05 var(--ps-font-display);
  text-wrap: balance; padding-block: .06em;
}
html[data-design="4"][lang="en"] .d4-fascia h1 { letter-spacing: .01em; }
html[data-design="4"][lang="ar"] .d4-fascia h1 { font-weight: 700; font-size: clamp(2.6rem, 8vw, 6rem); line-height: 1.45; padding-block: 0; }
html[data-design="4"] .d4-since { font: italic 500 clamp(1rem, 1.6vw, 1.2rem) var(--ps-font-body); color: var(--d4-on-board-2); }
html[data-design="4"][lang="ar"] .d4-since { font-style: normal; }

/* the memorable move: a striped awning with a scalloped hem */
html[data-design="4"] .d4-awning {
  position: relative; z-index: 2;
  filter: drop-shadow(0 12px 10px rgba(50, 22, 4, .28));
  transform-origin: 50% 0;
}
html[data-design="4"] .d4-canvas,
html[data-design="4"] .d4-hem {
  background-image:
    var(--d4-shade),
    repeating-linear-gradient(90deg, var(--d4-stripe) 0 var(--d4-st), var(--d4-stripe-2) var(--d4-st) calc(var(--d4-st) * 2));
}
html[data-design="4"] .d4-canvas {
  --d4-shade: linear-gradient(180deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, .04) 30%, rgba(255, 255, 255, .1) 72%, rgba(0, 0, 0, .1));
  height: clamp(46px, 7vw, 86px);
  box-shadow: inset 0 5px 0 var(--d4-board);
}
html[data-design="4"] .d4-hem {
  --d4-shade: linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, 0));
  height: calc(var(--d4-st) / 2 + 12px);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 13px no-repeat, radial-gradient(circle at 50% 0, #000 calc(var(--d4-st) / 2 - .6px), transparent calc(var(--d4-st) / 2)) 0 12px / var(--d4-st) calc(var(--d4-st) / 2) repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% 13px no-repeat, radial-gradient(circle at 50% 0, #000 calc(var(--d4-st) / 2 - .6px), transparent calc(var(--d4-st) / 2)) 0 12px / var(--d4-st) calc(var(--d4-st) / 2) repeat-x;
  transform-origin: 50% 0;
}
@media (max-width: 640px) {
  html[data-design="4"] { --d4-st: 30px; }
}

html[data-design="4"] .d4-shop {
  position: relative;
  max-width: var(--d4-max); margin-inline: auto;
  padding: clamp(30px, 5vw, 64px) var(--ps-gutter) clamp(44px, 6vw, 84px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
  gap: clamp(28px, 6vw, 84px);
}
html[data-design="4"] .d4-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 40% at 18% 34%, var(--d4-glow), transparent 70%), radial-gradient(ellipse 45% 38% at 84% 40%, var(--d4-glow), transparent 70%);
}
html[data-design="4"] .d4-window {
  position: relative;
  background: var(--d4-board);
  padding: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d4-gold) 70%, transparent), var(--ps-shadow);
  border-radius: 2px;
}
html[data-design="4"] .d4-transom {
  text-align: center; color: var(--d4-gold-hi);
  font: italic 500 clamp(1rem, 1.7vw, 1.2rem)/1.4 var(--ps-font-body);
  padding: 4px 12px 14px;
}
html[data-design="4"][lang="ar"] .d4-transom { font-style: normal; font-size: clamp(1.15rem, 2vw, 1.4rem); font-family: var(--ps-font-display); font-weight: 700; padding-bottom: 10px; }
html[data-design="4"] .d4-pane {
  position: relative; overflow: hidden; aspect-ratio: 5 / 4;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--d4-gold) 70%, transparent);
  background: var(--ps-surface-2);
}
html[data-design="4"] .d4-pane img { width: 100%; height: 100%; object-fit: cover; }
html[data-design="4"] .d4-pane::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .2) 0 14%, transparent 14% 24%, rgba(255, 255, 255, .1) 24% 27%, transparent 27%);
}
html[data-design="4"] .d4-hero-copy { display: grid; gap: 16px; max-width: 520px; }
html[data-design="4"] .d4-tagline { font: 400 clamp(1.9rem, 3.6vw, 2.9rem)/1.15 var(--ps-font-display); color: var(--ps-ink); text-wrap: balance; }
html[data-design="4"][lang="ar"] .d4-tagline { font-weight: 700; line-height: 1.6; }
html[data-design="4"] .d4-intro { color: var(--ps-muted); font-size: 1.06rem; }
html[data-design="4"] .d4-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

html[data-design="4"] .d4-floor {
  position: relative; overflow: hidden;
  height: clamp(48px, 7vw, 80px);
  border-top: 8px solid var(--d4-board);
  background: var(--d4-tile-bg);
}
html[data-design="4"] .d4-floor::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 55%);
}

/* The one load moment: the awning unrolls, the hem drops, the gilt catches the light */
@media (prefers-reduced-motion: no-preference) {
  html[data-design="4"] .d4-canvas { animation: d4-unroll .9s cubic-bezier(.3, .7, .2, 1) both; transform-origin: 50% 0; }
  html[data-design="4"] .d4-hem { animation: d4-drop 1.1s .55s cubic-bezier(.3, 1.6, .5, 1) both; }
  html[data-design="4"] .d4-fascia h1 { background-size: 100% 220%; animation: d4-gleam 1.8s .2s ease-out both; }
}
@keyframes d4-unroll { from { transform: scaleY(0); } }
@keyframes d4-drop { from { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } }
@keyframes d4-gleam { from { background-position: 0 100%; } to { background-position: 0 0; } }

@media (max-width: 899px) {
  html[data-design="4"] .d4-shop { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 26px; }
  html[data-design="4"] .d4-window { max-width: 560px; width: 100%; justify-self: center; }
  html[data-design="4"] .d4-hero-copy { max-width: 600px; justify-self: center; }
}

/* ---------- signature: pastries with a scalloped edge ---------- */
html[data-design="4"] .d4-sig { background: var(--ps-surface-2); }
html[data-design="4"] .d4-track {
  gap: 24px;
  padding: 6px max(var(--ps-gutter), calc((100vw - var(--d4-max)) / 2 + var(--ps-gutter))) 20px;
  scroll-padding-inline: max(var(--ps-gutter), calc((100vw - var(--d4-max)) / 2 + var(--ps-gutter)));
}
html[data-design="4"] .d4-card {
  width: clamp(244px, 70vw, 280px);
  display: flex; flex-direction: column;
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  box-shadow: 0 1px 0 var(--ps-line);
  border-radius: 3px;
  text-align: center;
}
html[data-design="4"] .d4-card-pic {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--d4-paper-2);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 9px) no-repeat, radial-gradient(circle at 50% 0, #000 9.4px, transparent 10px) 0 calc(100% - 10px) / 20px 10px repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 9px) no-repeat, radial-gradient(circle at 50% 0, #000 9.4px, transparent 10px) 0 calc(100% - 10px) / 20px 10px repeat-x;
}
html[data-design="4"] .d4-card-pic img { width: 100%; height: 100%; object-fit: cover; }
html[data-design="4"] .d4-ribbon {
  position: absolute; top: 12px; inset-inline-start: 12px;
  padding: 2px 12px; border-radius: 2px;
  background: var(--d4-board); color: var(--d4-gold-hi);
  font: italic 500 .85rem/1.6 var(--ps-font-body);
}
html[data-design="4"][lang="ar"] .d4-ribbon { font-style: normal; }
html[data-design="4"] .d4-card-body { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 18px 20px; }
html[data-design="4"] .d4-card h3 { font: 400 1.45rem/1.2 var(--ps-font-display); color: var(--ps-ink); }
html[data-design="4"][lang="ar"] .d4-card h3 { font-weight: 700; font-size: 1.5rem; line-height: 1.6; }
html[data-design="4"] .d4-card-desc { color: var(--ps-muted); font-size: .92rem; }
html[data-design="4"] .d4-price { margin-top: auto; padding-top: 4px; color: var(--d4-gold-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
html[data-design="4"] .d4-price small, html[data-design="4"] .d4-amt small { font-weight: 400; color: var(--ps-muted); font-size: .84em; }
html[data-design="4"] .d4-card .d4-buy { margin-top: 8px; width: 100%; }
html[data-design="4"] .d4-card .ps-buy.d4-buy { flex-direction: column; }
html[data-design="4"] .d4-card .ps-chips.d4-buy { justify-content: center; }
html[data-design="4"] .d4-arrows { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
html[data-design="4"] .d4-knob {
  width: 50px; height: 50px; border-radius: 999px; border: 0;
  display: grid; place-items: center;
  background: var(--d4-board); color: var(--d4-gold-hi);
  box-shadow: inset 0 0 0 1px var(--d4-board), inset 0 0 0 3px color-mix(in srgb, var(--d4-gold) 70%, transparent);
  transition: transform .15s ease;
}
html[data-design="4"] .d4-knob:hover { transform: scale(1.06); }
html[data-design="4"] .d4-back { transform: scaleX(-1); }
html[data-design="4"][dir="rtl"] .d4-back { transform: none; }

/* ---------- add controls ---------- */
html[data-design="4"] .ps-add.d4-buy,
html[data-design="4"] .d4-buy .ps-add {
  min-height: 44px; min-width: 44px; padding: 0 18px;
  border: 0; border-radius: 3px;
  background: var(--ps-accent); color: var(--ps-on-accent);
  font: 600 .98rem/1 var(--ps-font-body);
  transition: background-color .2s ease, color .2s ease;
}
html[data-design="4"] .ps-add.d4-buy:hover,
html[data-design="4"] .d4-buy .ps-add:hover,
html[data-design="4"] .ps-add.d4-buy.is-added,
html[data-design="4"] .d4-buy .ps-add.is-added { background: var(--d4-board); color: var(--d4-on-board); }
html[data-design="4"][data-theme="dark"] .ps-add.d4-buy:hover,
html[data-design="4"][data-theme="dark"] .d4-buy .ps-add:hover,
html[data-design="4"][data-theme="dark"] .ps-add.d4-buy.is-added,
html[data-design="4"][data-theme="dark"] .d4-buy .ps-add.is-added { background: var(--d4-ink); color: var(--d4-board); }
html[data-design="4"] .d4-buy .ps-opt {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 0 38px 0 14px;
  border: 1px solid color-mix(in srgb, var(--ps-ink) 45%, transparent); border-radius: 3px;
  background: var(--ps-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9822f' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  color: var(--ps-ink); font: 500 .95rem var(--ps-font-body);
  cursor: pointer;
}
html[data-design="4"][dir="rtl"] .d4-buy .ps-opt { padding: 0 14px 0 38px; background-position: left 12px center; }
html[data-design="4"] .d4-buy .ps-opt:hover { border-color: var(--ps-ink); }
html[data-design="4"] .d4-buy .ps-opt option { background: var(--ps-surface); color: var(--ps-ink); }
html[data-design="4"] .d4-buy .ps-chip {
  padding: 4px 14px; border-radius: 3px;
  border: 1px dashed color-mix(in srgb, var(--ps-ink) 50%, transparent);
  background: var(--ps-surface); color: var(--ps-ink);
  transition: background-color .2s ease, border-color .2s ease;
}
html[data-design="4"] .d4-buy .ps-chip-l { font-size: .8rem; color: var(--ps-muted); }
html[data-design="4"] .d4-buy .ps-chip-p { font-weight: 600; font-size: .92rem; color: var(--ps-ink); }
html[data-design="4"] .d4-buy .ps-chip:hover,
html[data-design="4"] .d4-buy .ps-chip.is-added { border-style: solid; border-color: var(--ps-accent); background: color-mix(in srgb, var(--ps-accent) 12%, var(--ps-surface)); }

/* ---------- the menu: a framed printed card on the tiled floor ---------- */
html[data-design="4"] .d4-menu {
  position: relative; isolation: isolate;
  padding-inline: clamp(10px, 5vw, 64px);
  background: var(--d4-tile-bg);
}
html[data-design="4"] .d4-menu-floor { z-index: -1; opacity: .42; }
html[data-design="4"] .d4-paper {
  position: relative;
  max-width: 1120px; margin-inline: auto;
  background: var(--d4-card);
  box-shadow: inset 0 0 0 1px var(--d4-gold), inset 0 0 0 9px var(--d4-card), inset 0 0 0 10px color-mix(in srgb, var(--d4-gold) 60%, transparent), 0 2px 0 rgba(0, 0, 0, .06), var(--ps-shadow);
  border-radius: 2px;
}
html[data-design="4"] .d4-paper-in { padding: clamp(52px, 7vw, 96px) clamp(22px, 6vw, 84px) clamp(48px, 6vw, 80px); }
html[data-design="4"] .d4-c { position: absolute; width: clamp(46px, 7vw, 74px); aspect-ratio: 1; color: var(--d4-gold-ink); pointer-events: none; }
html[data-design="4"] .d4-c svg { width: 100%; height: 100%; }
/* Symmetric ornament, so the corners stay put in either direction */
html[data-design="4"] .d4-c-ss { top: 14px; left: 14px; }
html[data-design="4"] .d4-c-se { top: 14px; right: 14px; transform: scaleX(-1); }
html[data-design="4"] .d4-c-es { bottom: 14px; left: 14px; transform: scaleY(-1); }
html[data-design="4"] .d4-c-ee { bottom: 14px; right: 14px; transform: scale(-1, -1); }
html[data-design="4"] .d4-paper-logo { height: 54px; color: var(--ps-ink); }
html[data-design="4"] .d4-paper-head { margin-bottom: 24px; }

html[data-design="4"] .d4-index { border-block: 1px solid var(--ps-line); padding-block: 6px; }
html[data-design="4"] .d4-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; }
html[data-design="4"] .d4-index li { display: flex; align-items: center; gap: 4px; }
html[data-design="4"] .d4-index li + li::before { content: ""; width: 5px; height: 5px; background: var(--d4-gold); transform: rotate(45deg); }
html[data-design="4"] .d4-index a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px;
  color: var(--ps-ink); text-decoration: none; font-weight: 500;
  background: linear-gradient(var(--ps-accent), var(--ps-accent)) no-repeat 50% calc(100% - 8px) / 0 1.5px;
  transition: background-size .25s ease;
}
html[data-design="4"][lang="en"] .d4-index a { font-style: italic; }
html[data-design="4"] .d4-index a:hover,
html[data-design="4"] .d4-index a.is-on { background-size: calc(100% - 20px) 1.5px; }

html[data-design="4"] .d4-cat { padding-top: clamp(44px, 6vw, 72px); scroll-margin-top: calc(var(--ps-header-h) + 8px); }
html[data-design="4"] .d4-cat-head { display: grid; justify-items: center; text-align: center; gap: 12px; margin-bottom: 22px; }
html[data-design="4"] .d4-cameo {
  position: relative; overflow: hidden;
  width: 84px; height: 104px; border-radius: 50%;
  background: var(--d4-paper-2);
  box-shadow: 0 0 0 3px var(--d4-card), 0 0 0 4px var(--d4-gold);
}
html[data-design="4"] .d4-cameo img { width: 100%; height: 100%; object-fit: cover; }
html[data-design="4"] .d4-cameo-tile { display: grid; place-items: center; }
html[data-design="4"] .d4-cameo-tile span {
  position: relative; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--d4-board); color: var(--d4-gold-hi);
  box-shadow: 0 0 0 2px var(--d4-gold);
  font: 400 1.6rem/1 var(--ps-font-display);
}
html[data-design="4"][lang="ar"] .d4-cameo-tile span { font-weight: 700; font-size: 1.7rem; line-height: 1; padding-bottom: 6px; }
html[data-design="4"] .d4-cat-head h3 { font: 400 clamp(1.8rem, 3.4vw, 2.4rem)/1.15 var(--ps-font-display); color: var(--ps-ink); }
html[data-design="4"][lang="ar"] .d4-cat-head h3 { font-weight: 700; line-height: 1.55; }
html[data-design="4"] .d4-cat-head p { color: var(--ps-muted); font-size: .98rem; max-width: 48ch; }
html[data-design="4"][lang="en"] .d4-cat-head p { font-style: italic; }
html[data-design="4"] .d4-count { white-space: nowrap; color: var(--d4-gold-ink); font-style: normal; }
html[data-design="4"] .d4-count::before { content: "( "; }
html[data-design="4"] .d4-count::after { content: " )"; }

html[data-design="4"] .d4-items { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 64px; border-top: 1px solid var(--ps-line); }
@media (min-width: 900px) {
  html[data-design="4"] .d4-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: linear-gradient(var(--ps-line), var(--ps-line)) no-repeat 50% 0 / 1px 100%;
  }
}
html[data-design="4"] .d4-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "txt amt act";
  align-items: center; gap: 4px 14px;
  padding-block: 14px;
  border-bottom: 1px dotted color-mix(in srgb, var(--ps-ink) 30%, transparent);
}
html[data-design="4"] .d4-item.is-sized { grid-template-areas: "txt amt" "act act"; grid-template-columns: minmax(0, 1fr) auto; }
html[data-design="4"] .d4-item-txt { grid-area: txt; min-width: 0; }
html[data-design="4"] .d4-item h4 { font: 600 1.06rem/1.4 var(--ps-font-body); color: var(--ps-ink); }
html[data-design="4"][lang="ar"] .d4-item h4 { font-size: 1.08rem; line-height: 1.7; }
html[data-design="4"] .d4-tag {
  display: inline-block; vertical-align: 2px; margin-inline-start: 4px;
  padding: 0 8px; border-radius: 2px;
  background: var(--ps-accent); color: var(--ps-on-accent);
  font: 600 .72rem/1.65 var(--ps-font-body); white-space: nowrap;
}
html[data-design="4"] .d4-desc { color: var(--ps-muted); font-size: .9rem; line-height: 1.5; margin-top: 2px; }
html[data-design="4"][lang="en"] .d4-desc { font-style: italic; }
html[data-design="4"] .d4-amt { grid-area: amt; justify-self: end; text-align: end; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ps-ink); }
html[data-design="4"] .d4-act { grid-area: act; }
html[data-design="4"] .d4-item .ps-add.d4-buy { padding: 0; width: 44px; border-radius: 999px; }
html[data-design="4"] .d4-item.is-sized .d4-act { margin-top: 6px; }
html[data-design="4"] .d4-item .ps-chips.d4-buy { justify-content: flex-start; }
html[data-design="4"] .d4-item .ps-buy.d4-buy { max-width: 400px; }
html[data-design="4"] .d4-paper-foot {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--ps-line);
  text-align: center; color: var(--ps-muted); font-size: .92rem;
}
html[data-design="4"][lang="en"] .d4-paper-foot { font-style: italic; }
@media (max-width: 520px) {
  html[data-design="4"] .d4-paper { box-shadow: inset 0 0 0 1px var(--d4-gold), inset 0 0 0 6px var(--d4-card), inset 0 0 0 7px color-mix(in srgb, var(--d4-gold) 60%, transparent), var(--ps-shadow); }
  html[data-design="4"] .d4-paper-in { padding-inline: 18px; }
  html[data-design="4"] .d4-c-ss, html[data-design="4"] .d4-c-se { top: 9px; }
  html[data-design="4"] .d4-c-es, html[data-design="4"] .d4-c-ee { bottom: 9px; }
  html[data-design="4"] .d4-c-ss, html[data-design="4"] .d4-c-es { left: 9px; }
  html[data-design="4"] .d4-c-se, html[data-design="4"] .d4-c-ee { right: 9px; }
  html[data-design="4"] .d4-item { column-gap: 10px; }
  html[data-design="4"] .d4-amt small { display: block; }
  html[data-design="4"] .d4-item .ps-buy.d4-buy .ps-add { width: 44px; padding: 0; border-radius: 999px; flex: none; }
  html[data-design="4"] .d4-item .ps-buy.d4-buy .ps-add span { display: none; }
  html[data-design="4"] .d4-buy .ps-opt { font-size: .9rem; padding-inline: 10px 34px; }
  html[data-design="4"][dir="rtl"] .d4-buy .ps-opt { padding-inline: 10px 34px; }
  html[data-design="4"] .d4-index ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
  html[data-design="4"] .d4-index li + li::before { display: none; }
  html[data-design="4"] .d4-index a { padding-inline: 6px; text-align: center; }
}

/* ---------- story: a portrait in a gilt frame ---------- */
html[data-design="4"] .d4-story-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 7vw, 100px); align-items: center; }
html[data-design="4"] .d4-frame {
  justify-self: center; width: min(100%, 420px);
  padding: 16px;
  background: linear-gradient(135deg, #f3d989, #a9792a 28%, #e8c66b 50%, #94681f 74%, #f0d27f);
  box-shadow: inset 0 0 0 2px rgba(80, 50, 10, .45), var(--ps-shadow);
}
html[data-design="4"] .d4-frame img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border: 6px solid var(--d4-board);
}
html[data-design="4"] .d4-story-copy { display: grid; gap: 16px; max-width: 60ch; justify-items: start; }
html[data-design="4"] .d4-story-copy p { color: var(--ps-muted); font-size: 1.05rem; }
html[data-design="4"] .d4-story-copy p:first-of-type { color: var(--ps-ink); font-size: clamp(1.18rem, 1.8vw, 1.36rem); line-height: 1.6; }
html[data-design="4"][lang="en"] .d4-story-copy p:first-of-type { font-style: italic; }
html[data-design="4"][lang="ar"] .d4-story-copy p:first-of-type { line-height: 1.9; }
html[data-design="4"] .d4-seals {
  list-style: none; margin-top: clamp(44px, 6vw, 72px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
html[data-design="4"] .d4-seal { display: grid; justify-items: center; text-align: center; gap: 12px; }
html[data-design="4"] .d4-seal b {
  display: grid; place-items: center;
  width: clamp(88px, 13vw, 120px); aspect-ratio: 1; border-radius: 50%;
  background: var(--d4-board); color: var(--d4-gold-hi);
  box-shadow: inset 0 0 0 4px var(--d4-board), inset 0 0 0 5px var(--d4-gold), 0 0 0 1px color-mix(in srgb, var(--d4-gold) 50%, transparent);
  font: 400 clamp(1.25rem, 2.6vw, 1.9rem)/1 "Abril Fatface", Georgia, serif;
  font-variant-numeric: lining-nums;
}
html[data-design="4"] .d4-seal span { color: var(--ps-muted); font-size: .92rem; max-width: 18ch; line-height: 1.4; }
@media (max-width: 899px) {
  html[data-design="4"] .d4-story-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-design="4"] .d4-frame { width: min(84%, 380px); }
}
@media (max-width: 420px) {
  html[data-design="4"] .d4-seals { gap: 10px; }
  html[data-design="4"] .d4-seal span { font-size: .84rem; }
}

/* ---------- visit: enamel shop signs ---------- */
html[data-design="4"] .d4-visit { background: var(--ps-surface-2); }
html[data-design="4"] .d4-branches { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
html[data-design="4"] .d4-branches[data-n="1"] { grid-template-columns: minmax(0, 580px); justify-content: center; }
html[data-design="4"] .d4-branch {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 30px 24px 26px;
  background: var(--d4-board); color: var(--d4-on-board);
  border-radius: 4px;
  box-shadow: inset 0 0 0 7px var(--d4-board), inset 0 0 0 8px color-mix(in srgb, var(--d4-gold) 80%, transparent), var(--ps-shadow);
}
html[data-design="4"] .d4-branch h3 { font: 400 clamp(1.7rem, 2.6vw, 2.1rem)/1.2 var(--ps-font-display); }
html[data-design="4"][lang="ar"] .d4-branch h3 { font-weight: 700; line-height: 1.6; }
html[data-design="4"] .d4-main { color: var(--d4-gold-hi); font-size: .9rem; }
html[data-design="4"][lang="en"] .d4-main { font-style: italic; }
html[data-design="4"] .d4-addr { color: var(--d4-on-board-2); max-width: 36ch; }
html[data-design="4"] .d4-branch-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: auto; padding-top: 12px; }
html[data-design="4"] .d4-branch .d4-btn { min-height: 44px; padding: 0 16px; font-size: .94rem; }
html[data-design="4"] .d4-btn-gold { background: var(--d4-gold-hi); color: #24170a; box-shadow: inset 0 0 0 1px var(--d4-gold-hi), inset 0 0 0 3px rgba(36, 23, 10, .3); }
html[data-design="4"] .d4-btn-gold:hover { background: var(--d4-on-board); color: #24170a; box-shadow: inset 0 0 0 1px var(--d4-on-board); }
html[data-design="4"] .d4-btn-ghost { background: transparent; color: var(--d4-on-board); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d4-on-board) 55%, transparent); }
html[data-design="4"] .d4-btn-ghost:hover { background: color-mix(in srgb, var(--d4-on-board) 12%, transparent); color: var(--d4-on-board); box-shadow: inset 0 0 0 1px var(--d4-on-board); }
html[data-design="4"] .d4-branch :focus-visible { outline-color: var(--d4-gold-hi); }
html[data-design="4"] .d4-reach {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px;
  margin-top: 36px;
}
html[data-design="4"] .d4-phone {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px;
  font: 400 clamp(1.6rem, 3.2vw, 2.2rem)/1.2 "Abril Fatface", Georgia, serif;
  color: var(--ps-ink); text-decoration: none;
}
html[data-design="4"] .d4-phone:hover { color: var(--ps-accent); }
html[data-design="4"] .d4-phone .ps-ico { width: .9em; height: .9em; color: var(--d4-gold-ink); }
html[data-design="4"] .d4-socials { display: flex; gap: 8px; }
html[data-design="4"] .d4-social {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px;
  color: var(--ps-ink); box-shadow: inset 0 0 0 1px var(--ps-line);
  transition: background-color .2s ease, color .2s ease;
}
html[data-design="4"] .d4-social:hover { background: var(--ps-ink); color: var(--ps-bg); }

/* ---------- footer ---------- */
html[data-design="4"] .d4-foot { background: var(--d4-board); color: var(--d4-on-board); }
html[data-design="4"] .d4-foot-tiles { position: relative; height: 40px; overflow: hidden; border-bottom: 1px solid var(--d4-gold); }
html[data-design="4"] .d4-foot-in { display: grid; justify-items: center; gap: 16px; text-align: center; padding-block: 52px 36px; }
html[data-design="4"] .d4-foot-logo { height: 60px; color: var(--d4-gold-hi); }
html[data-design="4"] .d4-foot-tag { font: 400 clamp(1.3rem, 2.4vw, 1.6rem)/1.4 var(--ps-font-display); color: var(--d4-on-board); }
html[data-design="4"][lang="ar"] .d4-foot-tag { font-weight: 700; line-height: 1.8; }
html[data-design="4"] .d4-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
html[data-design="4"] .d4-foot .d4-social { color: var(--d4-on-board); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d4-gold) 55%, transparent); }
html[data-design="4"] .d4-foot .d4-social:hover { background: var(--d4-gold-hi); color: var(--d4-board); }
html[data-design="4"] .d4-foot :focus-visible { outline-color: var(--d4-gold-hi); }
html[data-design="4"] .d4-rights { color: var(--d4-on-board-2); font-size: .88rem; }

/* ---------- shared chrome in parlour dress ---------- */
html[data-design="4"] .ps-drawer-head h2 { font-weight: 400; }
html[data-design="4"][lang="ar"] .ps-drawer-head h2 { font-weight: 700; }
html[data-design="4"] .ps-drawer { box-shadow: inset 0 0 0 1px var(--d4-gold), var(--ps-shadow); }
html[data-design="4"] .ps-cartbar { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--ps-accent), inset 0 0 0 3px color-mix(in srgb, var(--ps-on-accent) 45%, transparent), var(--ps-shadow); }
html[data-design="4"] .ps-toast { border-radius: 4px; }