/* ===== redesign sample: shared layout (gallery, tool dock, footer) ===== */
body { background: var(--t-bg); color: var(--t-text); }
.logo .lw { display: inline-flex; flex-direction: column; line-height: 1; }
/* gallery */
.gallery { padding: 40px 0 30px; }
.g-head { text-align: center; max-width: 680px; margin: 0 auto 18px; }
.g-head h2 { font-family: var(--t-head); color: var(--t-title); font-size: clamp(30px, 4.6vw, 48px); }
.g-head p { color: var(--t-muted); margin: 10px auto 0; font-size: 16.5px; max-width: 34em; }
.g-chips { position: sticky; top: 62px; z-index: 15; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 2px; margin: 0 -2px 14px; background: var(--t-chipbar); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); scroll-snap-type: x proximity; }
.g-chips::-webkit-scrollbar { display: none; }
.g-chip { flex: none; display: inline-flex; align-items: baseline; gap: 7px; border: 1px solid var(--t-line); background: var(--t-chip); color: var(--t-text); border-radius: var(--t-chip-r, 999px); padding: 9px 15px; font: 600 14px/1.1 var(--sans); cursor: pointer; scroll-snap-align: start; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.g-chip .g-he { font-family: 'Frank Ruhl Libre', serif; font-weight: 700; color: var(--t-accent); font-size: 15px; }
.g-chip[aria-pressed="true"] { background: var(--t-chip-on); color: var(--t-chip-on-text); border-color: var(--t-chip-on); }
.g-chip[aria-pressed="true"] .g-he { color: var(--t-chip-on-he, var(--t-chip-on-text)); }
.g-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
.g-tile { position: relative; display: block; text-decoration: none; color: inherit; border-radius: var(--t-tile-r); transition: transform .2s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
.g-tile .g-card { width: 100%; max-width: none; margin: 0; border-radius: var(--t-card-r); overflow: hidden; box-shadow: var(--t-tile-shadow); pointer-events: none; aspect-ratio: 2 / 3; }
.g-tile:hover { transform: translateY(-4px); }
.g-tile:hover .g-card { box-shadow: var(--t-tile-shadow-h); }
.g-tile:active { transform: scale(.98); }
.g-cap { display: block; padding: 9px 2px 0; }
.g-name { display: block; font-weight: 600; font-size: 14px; color: var(--t-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-type { display: block; font-size: 12px; color: var(--t-muted); margin-top: 2px; letter-spacing: .02em; }
.g-tile .nb { position: absolute; top: 10px; left: 10px; z-index: 2; font-style: normal; font: 700 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; background: var(--t-badge); color: var(--t-badge-text); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
[dir="rtl"] .g-tile .nb { left: auto; right: 10px; }
.g-more-row { text-align: center; margin-top: 26px; }
.g-more[hidden] { display: none; }
@media (max-width: 1080px) { .g-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .gallery { padding: 26px 0 20px; }
  .g-chips { top: 58px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}
/* editor tool dock (shows with an opened design) */
.ed-dock { display: none; }
body.ed-mode .ed-dock { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 8px; background: var(--t-dock); border: 1px solid var(--t-dock-line); border-radius: var(--t-dock-r, 16px); box-shadow: var(--t-dock-shadow, none); }
.ed-dock .dk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--t-dock-text); font: 600 11.5px/1.1 var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s; }
.ed-dock .dk svg { width: 22px; height: 22px; color: var(--t-dock-icon); }
.ed-dock .dk:hover { background: var(--t-dock-hover); }
.ed-dock .dk:active { transform: scale(.96); }
.ed-dock .dk-dl { background: var(--t-dock-dl); color: var(--t-dock-dl-text); }
.ed-dock .dk-dl svg { color: var(--t-dock-dl-text); }
.ed-dock .dk-dl:hover { background: var(--t-dock-dl); filter: brightness(1.06); }
body.ed-mode .ed-tools-head { padding: 10px 12px; }
body.ed-mode .ed-tools-head .ed-details-btn, body.ed-mode .ed-tools-head .line-tools { display: none; }
body.ed-mode .ed-tip { margin: 0 2px; font-size: .98rem; }
@media (max-width: 900px) {
  body.ed-mode .ed-dock { margin-top: 6px; gap: 2px; padding: 6px; }
  .ed-dock .dk { min-height: 54px; font-size: 10.5px; }
  body.ed-mode .ed-tip { font-size: .95rem; }
}
/* footer */
footer.site { padding: 40px 0 34px; background: var(--t-foot); color: var(--t-foot-text); border-top: 1px solid var(--t-line); }
footer.site .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 26px; justify-content: stretch; }
footer.site .f-brand p { margin: 10px 0 0; font-size: 14px; }
footer.site .f-he { font-family: 'Frank Ruhl Libre', serif; font-size: 17px; color: var(--t-accent); }
footer.site .f-col { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
footer.site .f-col b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-accent); margin-bottom: 2px; }
footer.site a.plain { color: inherit; text-decoration: none; opacity: .9; }
footer.site a.plain:hover { opacity: 1; text-decoration: underline; }
footer.site .f-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid var(--t-line); padding-top: 16px; font-size: 13px; opacity: .8; }
footer.mk-foot { margin-bottom: 0; }
@media (max-width: 900px) { footer.mk-foot { padding-bottom: 100px; } }
@media (max-width: 640px) { footer.site .wrap { grid-template-columns: 1fr 1fr; } footer.site .f-brand { grid-column: 1 / -1; } }

.ui-rtl .g-chip .g-he { display: none; }
.g-all { display: block; margin-top: 14px; font-size: 14px; color: var(--t-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Sample A · Catalog Luxe: midnight, burgundy and gold ===== */
:root {
  --navy: #14182a; --navy-2: #1d2340; --gold: #b8913f; --gold-2: #e4c983; --ivory: #0f1322; --paper: #fbf6ea; --line: #e3d6b8;
  --serif: 'Playfair Display', 'Frank Ruhl Libre', Georgia, serif;
  --sans: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --t-bg: #0f1322; --t-text: #efe6d2; --t-title: #f6ecd6; --t-muted: #b6ac98; --t-accent: #d9b56a; --t-line: rgba(217,181,106,.28);
  --t-head: 'Playfair Display', 'Frank Ruhl Libre', Georgia, serif;
  --t-chipbar: rgba(15,19,34,.88); --t-chip: rgba(255,255,255,.04); --t-chip-on: linear-gradient(180deg,#e4c983,#b8913f); --t-chip-on-text: #14182a;
  --t-tile-r: 6px; --t-card-r: 4px; --t-tile-shadow: 0 0 0 1px rgba(217,181,106,.55), 0 0 0 5px #0f1322, 0 0 0 6px rgba(217,181,106,.35), 0 18px 30px -16px rgba(0,0,0,.8);
  --t-tile-shadow-h: 0 0 0 1px #e4c983, 0 0 0 5px #0f1322, 0 0 0 6px rgba(228,201,131,.7), 0 26px 40px -18px rgba(0,0,0,.9);
  --t-badge: linear-gradient(180deg,#f0d897,#c39a48); --t-badge-text: #1a1408;
  --t-dock: #151a2e; --t-dock-line: rgba(217,181,106,.35); --t-dock-text: #efe6d2; --t-dock-icon: #e4c983; --t-dock-hover: rgba(217,181,106,.12); --t-dock-dl: linear-gradient(180deg,#e4c983,#b8913f); --t-dock-dl-text: #14182a;
  --t-foot: #0a0d18; --t-foot-text: #b6ac98;
}
body { background: radial-gradient(120% 60% at 50% 0%, #1b2140 0%, #0f1322 55%) fixed, #0f1322; font-family: var(--sans); }
h1, h2, h3 { color: var(--t-title); font-family: var(--t-head); }
.top { background: rgba(12,15,28,.86); border-bottom: 1px solid rgba(217,181,106,.35); }
.top .wrap { height: 64px; }
.logo { color: #f3e9d2; font-family: 'Cinzel', 'Playfair Display', serif; gap: 10px; }
.logo-mark { width: 26px; height: 34px; }
.logo .lw-1 { font-size: 21px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.logo .lw-1 b { color: #e4c983; font-weight: 600; }
.logo small { font-family: var(--sans); font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: #b8a273; margin-top: 4px; }
.nav a.plain { color: #cfc4ad; } .nav a.plain:hover { color: #f3e9d2; }
.langpick { background: rgba(255,255,255,.06) !important; border-color: rgba(217,181,106,.35) !important; }
.langpick button { color: #e8dcc0 !important; }
.langpick button[aria-pressed="true"] { background: #e4c983 !important; color: #14182a !important; }
.btn { background: #6e1f2e; color: #fbf3e2; font-family: var(--sans); font-weight: 700; letter-spacing: .02em; }
.btn:hover { background: #82293a; }
.btn.gold { background: linear-gradient(180deg, #ecd28f, #b8913f); color: #17130a; box-shadow: 0 8px 22px -10px rgba(228,201,131,.7), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.ghost { background: transparent; color: #f0e3c4; box-shadow: inset 0 0 0 1px rgba(228,201,131,.7); }
.btn.ghost:hover { background: rgba(228,201,131,.1); }
.top .nav .btn.sm { background: transparent; color: #e4c983; box-shadow: inset 0 0 0 1px #c9a45a; }
/* hero */
.hero { padding: 50px 0 34px; text-align: left; }
.hero::before { background: radial-gradient(50% 55% at 75% 40%, rgba(110,31,46,.55), transparent 70%), radial-gradient(40% 40% at 15% 85%, rgba(217,181,106,.12), transparent 70%); }
.hero .eyebrow, .eyebrow { color: #d9b56a; letter-spacing: .3em; font-size: 12px; }
.hero h1 { font-size: clamp(40px, 5.6vw, 64px); font-weight: 500; color: #f6ecd6; }
.hero h1 em { color: #e4c983; font-weight: 400; }
.he-tag { color: #e4c983; font-size: 22px; margin: 16px 0 0; }
.lede { color: #c4b9a2; }
.trust { color: #b6ac98; } .trust span::before { color: #e4c983; }
.hero-cards { height: 520px; display: flex; align-items: center; justify-content: center; }
.hero-cards .hc { position: absolute; }
.hero-cards .fc-wrap { position: relative; width: 100%; right: auto; left: auto; top: auto; transform: none; }
.hero-cards .hc-m { width: 300px; z-index: 3; }
.hero-cards .hc-l, .hero-cards .hc-r { width: 220px; top: 120px; opacity: .92; filter: saturate(.9); }
.hero-cards .hc-l { left: 0; transform: rotate(-6deg); } .hero-cards .hc-r { right: 0; transform: rotate(6deg); }
.hero-cards .hc-l .fc-wrap, .hero-cards .hc-r .fc-wrap { box-shadow: 0 0 0 1px rgba(217,181,106,.5), 0 24px 40px -18px #000; }
.arch-frame { position: relative; padding: 46px 16px 16px; border-radius: 999px 999px 10px 10px / 230px 230px 10px 10px; background: linear-gradient(180deg, #23182a, #12162a); border: 1.5px solid #d9b56a; box-shadow: 0 0 0 6px #0f1322, 0 0 0 7px rgba(217,181,106,.55), 0 34px 60px -24px #000; }
.arch-frame::before { content: ''; position: absolute; inset: 8px; border-radius: inherit; border: 1px solid rgba(217,181,106,.45); pointer-events: none; }
.arch-frame::after { content: ''; position: absolute; left: 50%; top: 18px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: #e4c983; }
.arch-frame .fc-wrap { box-shadow: 0 10px 26px -10px rgba(0,0,0,.8); }
/* sections */
section { padding: 64px 0; }
.sec-head h2 { color: #f6ecd6; font-weight: 500; }
.sec-head h2::after, .g-head h2::after { content: ''; display: block; width: 90px; height: 10px; margin: 14px auto 0; background: radial-gradient(circle, #e4c983 2.5px, transparent 3px) center/10px 10px no-repeat, linear-gradient(90deg, transparent, #c9a45a 30%, transparent 46%, transparent 54%, #c9a45a 70%, transparent) center/100% 1px no-repeat; }
.sec-head p { color: #b6ac98; }
.g-head .eyebrow { margin-bottom: 8px; }
.g-head h2 { font-weight: 500; }
.g-chip { border-color: rgba(217,181,106,.35); color: #e9dec5; font-family: var(--sans); }
.g-chip .g-he { color: #e4c983; }
.g-tile { padding: 0; }
.g-name { color: #efe6d2; font-family: var(--t-head); font-size: 15px; font-weight: 500; text-align: center; }
.g-type { text-align: center; color: #a89c84; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; }
.g-cap { padding-top: 14px; }
.g-grid { gap: 34px 22px; }
.types { gap: 14px; }
.type { background: linear-gradient(180deg, #171c33, #121629); border: 1px solid rgba(217,181,106,.3); border-radius: 160px 160px 10px 10px / 70px 70px 10px 10px; text-align: center; padding: 30px 16px 22px; }
.type:hover { border-color: #e4c983; box-shadow: 0 18px 34px -20px rgba(0,0,0,.9), 0 0 0 1px #e4c983; }
.type .t-he { color: #e4c983; }
.type .t-en { color: #f3e9d2; font-family: var(--t-head); font-weight: 500; }
.type .t-sub { color: #a89c84; }
.band { background: linear-gradient(180deg, #4a1220, #2c0c16); border-top: 1px solid rgba(217,181,106,.35); border-bottom: 1px solid rgba(217,181,106,.35); }
.step { background: rgba(0,0,0,.18); border-color: rgba(228,201,131,.35); border-radius: 10px; }
.g-item { background: #151a2e; border-color: rgba(217,181,106,.22); border-radius: 10px; }
.g-item .ic { background: rgba(217,181,106,.12); color: #e4c983; }
.g-item h3 { color: #f3e9d2; font-weight: 500; }
.g-item p { color: #b0a68f; }
.faq details { background: #151a2e; border-color: rgba(217,181,106,.22); border-radius: 10px; }
.faq summary { color: #f0e5cb; } .faq details p { color: #b6ac98; }
.final-cta { background: radial-gradient(60% 80% at 50% 50%, rgba(110,31,46,.5), transparent 70%); }
.final-cta h2 { font-weight: 500; } .final-cta p { color: #b6ac98; }
.final-cta .he { color: #e4c983; }
/* editor: midnight stage, ivory paper panels */
.maker h1 { color: #f6ecd6; font-weight: 500; }
.maker .sub, .draft-note { color: #b6ac98; }
.draft-note .linkbtn, .maker > .wrap > .maker-grid > div > .draft-note .linkbtn { color: #e4c983; }
.panel { background: #fbf6ea; color: #1f2330; border: 1px solid #d9c38f; border-radius: 10px; box-shadow: 0 16px 30px -22px #000; }
.panel h2 { color: #14182a; }
.panel h2 .n { background: #14182a; color: #e4c983; font-family: 'Cinzel', serif; }
.chip[aria-pressed="true"] { background: #14182a; border-color: #14182a; }
.swatch[aria-pressed="true"] { border-color: #b8913f; }
.preview-label { color: #c9b98f; }
.preview-col .dl-hint, .dl-hint { color: #b6ac98; }
.preview-col .linkbtn, .set-link { color: #e4c983; }
.print-opts { color: #e8dcc0; }
.print-opts summary { color: #e4c983; }
.fontbar { background: #151a2e !important; border-color: rgba(217,181,106,.4) !important; }
.fontbar .fb-cur, .fontbar .fb-arrow { color: #f0e3c4 !important; }
.fontbar .fb-l { color: #b8a273 !important; }
.ed-head .ed-back { background: transparent; color: #e4c983; border-color: rgba(217,181,106,.6); }
.ed-name { color: #f3e9d2; font-family: var(--t-head); }
.ed-strip-l { color: #b6ac98; }
.ed-row > .swatch.ed-tile .sw-name { color: #cfc4ad; }
body.ed-mode .ed-tools-head { background: #151a2e; border-color: rgba(217,181,106,.35); }
body.ed-mode .ed-tip { color: #efe6d2; }
@media (min-width: 901px) {
  body.ed-mode .maker-grid > .preview-col { background: linear-gradient(180deg, #171c33, #10142a); border: 1px solid rgba(217,181,106,.45); border-radius: 12px; box-shadow: inset 0 0 0 6px #10142a, inset 0 0 0 7px rgba(217,181,106,.25); }
}
@media (max-width: 900px) {
  body.ed-mode .ed-stage { background: rgba(15,19,34,.97) !important; border-bottom: 1px solid rgba(217,181,106,.35); }
  .mobile-bar { background: rgba(12,15,28,.96) !important; border-top: 1px solid rgba(217,181,106,.4) !important; }
}
body.ed-mode .ed-drawer:not([hidden]) { background: #f6efdf; }
.dl-more .btn.ghost { color: #f0e3c4; }
footer.site .logo .lw-1 { font-size: 18px; }
@media (max-width: 900px) {
  .hero { text-align: center; padding: 30px 0 10px; }
  .hero .cta-row, .hero .trust { justify-content: center; }
  .hero .lede { margin-left: auto; margin-right: auto; }
  .hero-cards { height: 440px; max-width: 420px; }
  .hero-cards .hc-m { width: 236px; }
  .hero-cards .hc-l, .hero-cards .hc-r { width: 150px; top: 130px; }
  .hero-cards .hc-l { left: -6px; } .hero-cards .hc-r { right: -6px; }
  .arch-frame { padding: 38px 12px 12px; border-radius: 999px 999px 8px 8px / 180px 180px 8px 8px; }
}
@media (max-width: 640px) {
  .logo .lw-1 { font-size: 18px; letter-spacing: .12em; } .logo small { font-size: 8.5px; letter-spacing: .26em; }
  .hero h1 { font-size: 38px; }
  .hero .cta-row .btn { flex: 1 1 100%; } .hero .cta-row .btn.ghost { flex: 1 1 40%; }
  .types { grid-template-columns: 1fr 1fr; }
  .type { padding: 24px 10px 16px; }
  .type .t-he { font-size: 24px; } .type .t-en { font-size: 19px; }
}

.draft-note { font-size: 13.5px; }
.panel h2 { font-size: 22px; font-weight: 600; }
.panel h2 .opt { font-family: var(--sans); font-size: 12.5px; }

.pe-tip { color: #efe6d2; }
.pe-tip .linkbtn { color: #e4c983; }

/* ===== v20261103h: home = simchas with one design each + a short row of new designs; the whole collection is on designs.html ===== */
.g-featured { padding-bottom: 10px; }
.g-featured .g-grid.g-row { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px 14px; }
.g-featured .g-tile .g-cap { font-size: 12.5px; }
.g-featured .g-more-row { margin-top: 18px; }
@media (max-width: 1080px) {
  .g-featured .g-grid.g-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 23%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .g-featured .g-grid.g-row::-webkit-scrollbar { display: none; }
  .g-featured .g-tile { scroll-snap-align: start; }
}
@media (max-width: 640px) { .g-featured .g-grid.g-row { grid-auto-columns: 42%; gap: 12px; } }
.g-page { padding-top: 34px; }
.g-page h1 { margin: 6px 0 8px; }
.type.has-pic { padding: 12px 12px 18px; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.type .t-pic { width: 100%; max-width: none; margin: 0 0 14px; aspect-ratio: 2 / 3; border-radius: 999px 999px 8px 8px / 46% 46% 8px 8px; overflow: hidden; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(217,181,106,.55), 0 14px 26px -16px rgba(0,0,0,.9); background: #1a1f36; }
.type .t-pic .fc-card { width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
.type .t-pic-blank { background: linear-gradient(180deg, #f7f0e1, #efe4cb); }
.types:has(.has-pic) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .types:has(.has-pic) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px) { .types:has(.has-pic) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .types:has(.has-pic) { grid-template-columns: 1fr 1fr; gap: 12px; } .type.has-pic { padding: 8px 8px 14px; } .type .t-pic { margin-bottom: 10px; } }