/* BASMAH v278 source: basmah-site-v270.css */
/* Source: original inline stylesheet */
:root {
      --bg: #fffdf9;
      --surface: #ffffff;
      --surface-2: #f7f1e8;
      --sand: #e8dccd;
      --sand-dark: #c6ad91;
      --ink: #26231f;
      --muted: #756f68;
      --line: #e7ded3;
      --accent: #8d6e50;
      --accent-dark: #654a35;
      --success: #436b54;
      --danger: #9b3d3d;
      --shadow: 0 18px 60px rgba(54, 42, 31, 0.09);
      --radius: 22px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: auto; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
    }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    [hidden] { display: none !important; }

    .announcement {
      background: var(--ink);
      color: #fff;
      text-align: center;
      padding: 9px 16px;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 28px;
      padding: 18px clamp(18px, 4vw, 64px);
      background: rgba(255, 253, 249, .94);
      border-bottom: 1px solid rgba(231, 222, 211, .8);
      backdrop-filter: blur(16px);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      font-weight: 800;
      letter-spacing: .13em;
      text-transform: uppercase;
    }
    .brand-mark {
      width: 36px;
      height: 36px;
      border: 1px solid var(--ink);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: Georgia, serif;
      font-size: 19px;
      font-style: italic;
    }
    .nav { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
    .nav button, .icon-btn {
      border: 0;
      background: transparent;
      color: var(--ink);
    }
    .nav button {
      padding: 9px 13px;
      border-radius: 999px;
      font-size: 14px;
    }
    .nav button:hover, .nav button.active { background: var(--surface-2); }
    .header-actions { display: flex; align-items: center; gap: 10px; }
    .icon-btn {
      min-width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface);
      position: relative;
    }
    .cart-count {
      position: absolute;
      right: -3px;
      top: -5px;
      min-width: 20px;
      height: 20px;
      padding: 0 5px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--ink);
      color: #fff;
      font-size: 11px;
    }

    main { min-height: 70vh; }
    .view { display: none; }
    .view.active { display: block; animation: fade .28s ease; }
    @keyframes fade { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: none; } }

    .container { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
    .eyebrow {
      color: var(--accent-dark);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
    }
    h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.08; margin: 0; }
    h1 { font-size: clamp(48px, 7vw, 92px); letter-spacing: -.045em; }
    h2 { font-size: clamp(34px, 4vw, 56px); letter-spacing: -.03em; }
    h3 { font-size: 25px; }
    p { color: var(--muted); }

    .btn {
      border: 1px solid var(--ink);
      border-radius: 999px;
      padding: 13px 20px;
      background: var(--ink);
      color: #fff;
      font-weight: 700;
      transition: .2s ease;
    }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(38,35,31,.16); }
    .btn.secondary { background: transparent; color: var(--ink); }
    .btn.soft { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
    .btn.small { padding: 9px 13px; font-size: 13px; }
    .btn.full { width: 100%; }

    .hero {
      min-height: 720px;
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      align-items: center;
      gap: 42px;
      padding: 76px 0 60px;
    }
    .hero-copy p { max-width: 640px; font-size: 18px; }
    .hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
    .hero-note { margin-top: 24px; font-size: 13px; color: var(--muted); }
    .gallery-stage {
      position: relative;
      min-height: 570px;
      border-radius: 34px;
      background:
        radial-gradient(circle at 68% 18%, rgba(255,255,255,.85), transparent 29%),
        linear-gradient(145deg, #e9dece, #cbb69d);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .stage-shadow {
      position: absolute;
      left: 12%; right: 12%; bottom: 8%; height: 12%;
      background: rgba(75, 58, 42, .22);
      filter: blur(24px);
      border-radius: 50%;
    }
    .frame-art {
      position: absolute;
      background: #e8e0d7;
      border: 13px solid #3a3029;
      box-shadow: 0 26px 38px rgba(45,35,25,.22), inset 0 0 0 4px #b3916f;
      overflow: hidden;
    }
    .frame-art::before {
      content: "";
      position: absolute;
      inset: 8%;
      background:
        radial-gradient(ellipse at 72% 20%, rgba(114,91,61,.7), transparent 18%),
        radial-gradient(ellipse at 58% 54%, rgba(137,119,91,.7), transparent 26%),
        linear-gradient(150deg, #e5dfd3 0 38%, #b9ac99 39% 54%, #766d5e 55% 64%, #d8cdbd 65%);
    }
    .frame-art::after {
      content: "";
      position: absolute;
      width: 120%; height: 3px;
      left: -10%; top: 63%;
      background: rgba(86,67,48,.42);
      transform: rotate(-14deg);
      box-shadow: 0 33px 0 rgba(86,67,48,.22), 0 -28px 0 rgba(255,255,255,.35);
    }
    .frame-large { width: 47%; aspect-ratio: .72; left: 27%; top: 12%; transform: rotate(-1deg); }
    .frame-small.one { width: 27%; aspect-ratio: .8; left: 7%; top: 48%; transform: rotate(-5deg); }
    .frame-small.two { width: 29%; aspect-ratio: 1.1; right: 5%; top: 47%; transform: rotate(5deg); }
    .stage-label {
      position: absolute;
      right: 18px; bottom: 18px;
      background: rgba(255,253,249,.88);
      border: 1px solid rgba(255,255,255,.7);
      padding: 12px 15px;
      border-radius: 15px;
      font-size: 12px;
      backdrop-filter: blur(12px);
    }

    .section { padding: 92px 0; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
    .section-head p { max-width: 510px; margin: 0; }

    .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .category-card {
      position: relative;
      min-height: 250px;
      padding: 20px;
      display: flex;
      align-items: end;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--surface);
      transition: .25s ease;
    }
    .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .category-art { position: absolute; inset: 0; opacity: .95; }
    .category-art.a { background: radial-gradient(circle at 50% 42%, #f3eee5 0 22%, transparent 23%), conic-gradient(from 45deg, #b49b7d, #e7dbca, #907458, #d5c2aa, #b49b7d); }
    .category-art.b { background: linear-gradient(145deg, #e9d6be, #aa8c68); }
    .category-art.b::after { content:""; position:absolute; inset:25% 21%; border:14px double rgba(68,51,36,.75); border-radius: 45% 45% 10% 10%; }
    .category-art.c { background: radial-gradient(ellipse at 33% 38%, #786c58 0 6%, transparent 7%), radial-gradient(ellipse at 63% 48%, #9b866b 0 9%, transparent 10%), linear-gradient(150deg,#e7dfd1,#c0aa8b); }
    .category-art.d { background: linear-gradient(160deg,#f1ebe1,#d1bd9f 45%,#846b52 46% 54%,#d8c9b6 55%); }
    .category-art.e { background: repeating-linear-gradient(132deg,#eadfce 0 22px,#bd9f7a 23px 46px,#6e5845 47px 49px); }
    .category-art.f { background: radial-gradient(circle,#d5c8b7 0 30%,#8a745b 31% 34%,#eee7dd 35% 49%,#5d4b3c 50% 54%,#c5b39d 55%); }
    .category-art.g { background: repeating-radial-gradient(ellipse at center,#dcc8aa 0 8px,#795c41 9px 13px,#b99e79 14px 24px); }
    .category-art.h { background: linear-gradient(145deg,#ede3d5,#a88d6f); }
    .category-art.h::before { content:"+"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(55,42,31,.68); font: 200 90px Georgia; }
    .category-title {
      z-index: 1;
      width: 100%;
      padding: 13px 15px;
      border-radius: 14px;
      background: rgba(255,253,249,.88);
      backdrop-filter: blur(10px);
      font-weight: 750;
    }

    .feature-strip { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
    .feature { padding: 28px; background: #fff; }
    .feature + .feature { border-left: 1px solid var(--line); }
    .feature strong { display:block; margin-bottom: 5px; }
    .feature p { margin: 0; font-size: 14px; }


    /* Tadween-inspired Basmah homepage */
    .home-hero-wrap { padding: 30px 0 18px; }
    .home-hero-shell {
      min-height: 690px;
      display:grid;
      grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
      align-items:center;
      gap:46px;
      padding:64px clamp(28px,5vw,72px);
      border:1px solid var(--line);
      border-radius:32px;
      background:
        radial-gradient(circle at 80% 10%, rgba(232,220,205,.55), transparent 32%),
        linear-gradient(135deg,#fffdf9 0%,#f8f2e9 100%);
      overflow:hidden;
      box-shadow:0 18px 54px rgba(57,45,33,.07);
    }
    .home-hero-copy { position:relative; z-index:2; }
    .home-kicker {
      display:inline-flex; align-items:center; gap:9px;
      padding:8px 12px; border:1px solid #dccdbd; border-radius:999px;
      background:rgba(255,255,255,.78); color:var(--accent-dark);
      font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
      margin-bottom:18px;
    }
    .home-kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
    .home-hero-copy h1 { max-width:760px; font-size:clamp(52px,6.4vw,88px); }
    .home-hero-copy > p { max-width:640px; font-size:18px; line-height:1.75; margin:22px 0 0; }
    .home-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
    .home-hero-trust { display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; }
    .home-trust-chip { padding:9px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:12px; font-weight:700; color:#665f58; }
    .home-hero-visual { position:relative; min-height:560px; }
    .home-hero-visual .gallery-stage { position:absolute; inset:0; min-height:0; border-radius:28px; }
    .home-visual-card {
      position:absolute; left:-28px; bottom:36px; z-index:4; width:210px;
      padding:16px 17px; border-radius:18px; background:rgba(255,253,249,.94);
      border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(12px);
      box-shadow:0 15px 38px rgba(45,35,25,.15);
    }
    .home-visual-card strong { display:block; font-size:15px; margin-bottom:4px; }
    .home-visual-card span { display:block; color:var(--muted); font-size:12px; line-height:1.5; }

    .home-section { padding:88px 0; }
    .home-section-soft { background:#f7f1e9; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .home-center-head { text-align:center; max-width:780px; margin:0 auto 38px; }
    .home-center-head p { max-width:680px; margin:14px auto 0; font-size:16px; }
    .home-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .home-feature-card {
      min-height:205px; padding:24px; border-radius:20px; background:#fff;
      border:1px solid var(--line); transition:.22s ease;
    }
    .home-feature-card:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(45,35,25,.08); }
    .home-feature-no { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#f2e8db; color:var(--accent-dark); font-size:12px; font-weight:900; margin-bottom:20px; }
    .home-feature-card h3 { font-size:22px; margin-bottom:9px; }
    .home-feature-card p { margin:0; font-size:14px; line-height:1.65; }

    .home-story-grid { display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center; }
    .home-story-copy h2 { margin-top:8px; }
    .home-story-copy p { font-size:16px; line-height:1.75; max-width:590px; }
    .home-story-points { display:grid; gap:12px; margin-top:24px; }
    .home-story-point { display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line); }
    .home-story-point:first-child { border-top:0; }
    .home-story-point b { min-width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:12px; }
    .home-story-point span { color:var(--muted); font-size:14px; line-height:1.55; }
    .home-room-scene {
      position:relative; min-height:510px; border-radius:28px; overflow:hidden; border:1px solid var(--line);
      background:linear-gradient(180deg,#ede5da 0 72%,#cbb9a5 72%);
      box-shadow:var(--shadow);
    }
    .home-room-scene::before { content:""; position:absolute; left:7%; right:7%; bottom:10%; height:13%; background:rgba(77,58,40,.15); filter:blur(24px); border-radius:50%; }
    .home-room-frame { position:absolute; background:#eee8df; box-shadow:0 18px 28px rgba(60,45,30,.16); }
    .home-room-frame::before { content:""; position:absolute; inset:7%; background:linear-gradient(145deg,#e8ded0,#b9a58e 42%,#6e6255 43% 52%,#d9cbbb 53%); }
    .home-room-frame.a { width:42%; aspect-ratio:.72; left:29%; top:11%; border:9px solid #40352e; }
    .home-room-frame.b { width:23%; aspect-ratio:.8; left:8%; top:42%; border:7px solid #8d744f; }
    .home-room-frame.c { width:25%; aspect-ratio:1; right:7%; top:45%; border:7px solid #d2b36a; }
    .home-room-console { position:absolute; left:17%; right:17%; bottom:12%; height:12%; background:#765f4b; border-radius:3px; box-shadow:0 14px 0 #5c4838; }
    .home-room-vase { position:absolute; width:10%; height:18%; right:23%; bottom:24%; border-radius:45% 45% 30% 30%; background:#ddd0bd; box-shadow:inset -8px -8px 18px rgba(73,54,37,.12); }

    .home-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .home-step { position:relative; padding:28px; border:1px solid var(--line); border-radius:20px; background:#fff; }
    .home-step-num { color:#b49b80; font:500 54px Georgia,serif; line-height:1; margin-bottom:16px; }
    .home-step h3 { font-size:23px; margin-bottom:8px; }
    .home-step p { margin:0; font-size:14px; line-height:1.65; }

    .home-cta {
      margin:20px auto 92px; padding:54px clamp(28px,5vw,64px); border-radius:28px;
      display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
      color:#fff; background:linear-gradient(135deg,#2f2924,#4a3b2e 70%,#7a6049);
      box-shadow:0 24px 55px rgba(45,35,25,.18);
    }
    .home-cta .eyebrow { color:#d7c4ae; }
    .home-cta h2 { max-width:760px; margin-top:8px; }
    .home-cta p { color:#d8d0c8; max-width:720px; margin:12px 0 0; }
    .home-cta-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
    .home-cta .btn { background:#fff; color:var(--ink); border-color:#fff; }
    .home-cta .btn.secondary { background:transparent; color:#fff; border-color:#887666; }


    /* v52 — full-width Tadween-style hero adapted for Basmah wall art */
    .home-hero-wrap.v52-full { width:100%; max-width:none; padding:0; }
    .basmah-tadween-hero {
      position:relative;
      min-height:760px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      background:#3a2d23;
      isolation:isolate;
    }
    .basmah-tadween-hero .hero-art-backdrop {
      position:absolute;
      inset:0;
      min-height:0;
      border-radius:0;
      box-shadow:none;
      background:
        linear-gradient(180deg, rgba(36,27,21,.16) 0%, rgba(36,27,21,.16) 100%),
        url("../media/f8e3951fb9c55e.webp") center center / cover no-repeat;
      transform:scale(1.03);
      filter:saturate(.98) contrast(1.02);
    }
    .basmah-tadween-hero .hero-art-backdrop .frame-art {
      display:none !important;
    }
    .basmah-tadween-hero .hero-art-backdrop::before,
    .basmah-tadween-hero .hero-art-backdrop::after {
      content:none !important;
      display:none !important;
    }
    .basmah-tadween-hero .hero-stage-label { display:none; }
    .basmah-tadween-hero .stage-shadow {
      left:18%; right:18%; bottom:6%; height:16%; opacity:.38;
      background:radial-gradient(ellipse at center, rgba(34,24,18,.34) 0%, rgba(34,24,18,.12) 45%, rgba(34,24,18,0) 72%);
      filter:blur(16px);
    }
    .basmah-tadween-hero-overlay {
      position:absolute;
      inset:0;
      z-index:3;
      background:
        linear-gradient(90deg,rgba(37,27,21,.82),rgba(68,48,35,.74) 46%,rgba(64,45,32,.72)),
        radial-gradient(circle at 50% 42%,rgba(180,138,80,.13),transparent 34%);
    }
    .basmah-tadween-hero-content {
      position:relative;
      z-index:4;
      width:min(1120px,calc(100% - 40px));
      margin:0 auto;
      padding:76px 20px 58px;
      text-align:left;
      color:#fff;
    }
    @media (min-width:1200px) {
      .basmah-tadween-hero-content {
        margin-left:clamp(36px,5vw,86px);
        margin-right:auto;
      }
    }
    .basmah-tadween-kicker {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:9px 18px;
      margin-bottom:24px;
      border:1px solid rgba(227,190,139,.62);
      border-radius:999px;
      background:rgba(166,122,74,.22);
      color:#fff3e3;
      font-size:13px;
      font-weight:800;
      letter-spacing:.02em;
      backdrop-filter:blur(8px);
    }
    .basmah-tadween-hero-content h1 {
      max-width:980px;
      margin:0;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      font-size:clamp(54px,6.2vw,94px);
      font-weight:800;
      line-height:1.02;
      letter-spacing:-.045em;
      color:#fff;
      text-wrap:balance;
    }
    .basmah-tadween-hero-content h1 .hero-accent {
      color:#d2a25f;
      text-shadow:0 8px 34px rgba(103,72,38,.28);
    }
    .basmah-tadween-hero-content > p {
      max-width:760px;
      margin:28px 0 0;
      color:rgba(255,255,255,.86);
      font-size:18px;
      line-height:1.7;
    }
    .basmah-tadween-actions {
      display:flex;
      gap:16px;
      justify-content:flex-start;
      flex-wrap:wrap;
      margin-top:34px;
    }
    .basmah-tadween-actions .btn {
      min-width:220px;
      min-height:58px;
      border-radius:12px;
      font-size:15px;
      font-weight:800;
      background:linear-gradient(135deg,#c99a59,#a9753e);
      border-color:#c99a59;
      color:#fff;
      box-shadow:0 14px 30px rgba(48,31,18,.25);
    }
    .basmah-tadween-actions .btn.secondary {
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.62);
      color:#fff;
      box-shadow:none;
      backdrop-filter:blur(8px);
    }
    .basmah-tadween-benefits {
      display:flex;
      justify-content:flex-start;
      flex-wrap:wrap;
      gap:9px 17px;
      margin-top:24px;
      color:rgba(255,255,255,.72);
      font-size:12px;
      font-weight:600;
    }
    .basmah-tadween-benefits span::before { content:"✓"; margin-right:5px; color:#e3bb80; }
    .basmah-tadween-stats {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
      max-width:680px;
      margin:58px 0 0;
    }
    .basmah-tadween-stat {
      min-height:92px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:16px 20px;
      border:1px solid rgba(255,255,255,.24);
      border-radius:24px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(10px);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    }
    .basmah-tadween-stat strong { font-size:28px; line-height:1; color:#fff; font-weight:850; }
    .basmah-tadween-stat span { margin-top:7px; color:rgba(255,255,255,.66); font-size:12px; }
    .basmah-tadween-stat-qatar strong { white-space:nowrap; }
    .basmah-tadween-stat-qatar span { white-space:nowrap; font-size:11px; letter-spacing:-0.01em; }

    @media (max-width:760px){
      .basmah-tadween-hero{min-height:720px;}
      .basmah-tadween-hero-content{padding:64px 8px 46px;}
      .basmah-tadween-hero-content h1{font-size:clamp(44px,13vw,62px);}
      .basmah-tadween-hero-content>p{font-size:16px;}
      .basmah-tadween-actions .btn{min-width:min(100%,280px);}
      .basmah-tadween-stats{grid-template-columns:1fr;max-width:360px;margin-top:38px;gap:10px;}
      .basmah-tadween-stat-qatar{padding-left:14px;padding-right:14px;}
      .basmah-tadween-stat{min-height:76px;border-radius:18px;}
      .basmah-tadween-hero .hero-art-backdrop .frame-large{width:48%;left:26%;top:12%;}
      .basmah-tadween-hero .hero-art-backdrop .frame-small.one{width:33%;left:-6%;top:50%;}
      .basmah-tadween-hero .hero-art-backdrop .frame-small.two{width:35%;right:-7%;top:48%;}
    }
    @media (max-width:980px){
      .home-hero-shell{grid-template-columns:1fr; min-height:0; padding:48px 34px;}
      .home-hero-copy{text-align:center;}
      .home-hero-copy>p{margin-inline:auto;}
      .home-hero-actions,.home-hero-trust{justify-content:center;}
      .home-hero-visual{min-height:520px;}
      .home-visual-card{left:18px;}
      .home-feature-grid{grid-template-columns:repeat(2,1fr);}
      .home-story-grid{grid-template-columns:1fr;}
      .home-story-copy{text-align:center;}
      .home-story-copy p{margin-inline:auto;}
      .home-story-points{text-align:left;}
      .home-steps{grid-template-columns:1fr;}
      .home-cta{grid-template-columns:1fr;text-align:center;}
      .home-cta p{margin-inline:auto;}
      .home-cta-actions{justify-content:center;}
    }
    @media (max-width:640px){
      .home-hero-wrap{padding-top:16px;}
      .home-hero-shell{padding:34px 18px;border-radius:22px;gap:28px;}
      .home-hero-copy h1{font-size:46px;}
      .home-hero-visual{min-height:390px;}
      .home-visual-card{left:12px;right:12px;bottom:14px;width:auto;}
      .home-section{padding:64px 0;}
      .home-feature-grid{grid-template-columns:1fr;}
      .home-room-scene{min-height:400px;}
      .home-cta{margin-bottom:64px;padding:38px 22px;border-radius:22px;}
    }
    .shop-hero { padding: 54px 0 18px; text-align: center; }
    .shop-category-picker {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;
      margin:22px auto 10px;
      max-width:980px;
    }
    .shop-category-card {
      position:relative;
      display:flex;
      align-items:center;
      gap:11px;
      min-height:82px;
      padding:10px 12px;
      text-align:left;
      border:1px solid var(--line);
      border-radius:16px;
      background:rgba(255,255,255,.78);
      color:var(--ink);
      overflow:hidden;
      transition:.2s ease;
      box-shadow:0 5px 14px rgba(63,46,31,.035);
    }
    .shop-category-card:hover {
      transform:translateY(-1px);
      border-color:rgba(141,110,80,.42);
      background:#fff;
      box-shadow:0 9px 20px rgba(63,46,31,.075);
    }
    .shop-category-card.active {
      border-color:var(--sand-dark);
      background:#f2e9de;
      color:var(--ink);
      box-shadow:0 0 0 1px rgba(141,110,80,.12), 0 8px 18px rgba(63,46,31,.07);
    }
    .shop-category-card.active .shop-category-kicker,
    .shop-category-card.active .shop-category-meta { color:var(--muted); }
    .shop-category-card.active .shop-category-count {
      background:var(--ink);
      border-color:var(--ink);
      color:#fff;
    }
    .shop-category-card::before { display:none; }
    .shop-category-top {
      display:flex;
      align-items:center;
      gap:11px;
      width:100%;
      margin:0;
    }
    .shop-category-swatch {
      position:relative;
      order:-1;
      width:48px;
      min-width:48px;
      height:48px;
      border-radius:12px;
      overflow:hidden;
      background:#f3ede4;
      box-shadow:none;
    }
    .shop-category-swatch::after {
      content:"";
      position:absolute;
      inset:0;
      border-radius:12px;
      border:1px solid rgba(68,51,36,.07);
      pointer-events:none;
    }
    .shop-category-swatch .category-art { position:absolute; inset:0; }
    .shop-category-copy { flex:1; min-width:0; }
    .shop-category-kicker {
      margin:0 0 3px;
      color:var(--muted);
      font-size:9px;
      line-height:1.1;
      text-transform:uppercase;
      letter-spacing:.12em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .shop-category-name {
      margin:0;
      font-size:15px;
      line-height:1.22;
      font-weight:800;
    }
    .shop-category-desc { display:none; }
    .shop-category-meta {
      display:flex;
      align-items:center;
      margin-left:auto;
      color:var(--muted);
      font-size:11px;
      font-weight:700;
    }
    .shop-category-meta > span:first-child { display:none; }
    .shop-category-count {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:28px;
      height:28px;
      padding:0 8px;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(68,51,36,.08);
      color:var(--ink);
      font-size:11px;
      font-weight:800;
      box-shadow:none;
    }
    .shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 30px; padding: 22px 0 80px; }
    .filters { align-self: start; position: sticky; top: 110px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
    .filter-group + .filter-group { margin-top: 22px; padding-top: 19px; border-top: 1px solid var(--line); }
    .filter-group label.title { display:block; font-weight:800; margin-bottom: 10px; }
    .check { display:flex; gap:9px; align-items:center; margin:8px 0; font-size:14px; color:var(--muted); }
    .shop-filter-select { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); font:inherit; font-size:13px; outline:none; }
    .shop-filter-select:focus { border-color:#9d8068; box-shadow:0 0 0 3px rgba(157,128,104,.10); }
    .product-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
    .product-toolbar select { padding: 10px 13px; border:1px solid var(--line); border-radius:999px; background:#fff; }
    .product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
    .product-card {
      display:flex;
      flex-direction:column;
      height:100%;
      border:1px solid var(--line);
      background:#fff;
      border-radius:var(--radius);
      overflow:hidden;
      transition:.25s ease;
    }
    .product-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
    .product-open-area { cursor:pointer; }
    .product-open-area:focus-visible { outline:3px solid rgba(141,110,80,.35); outline-offset:-3px; }
    .product-visual {
      width:100%;
      height:248px;
      min-height:248px;
      padding:22px;
      display:grid;
      place-items:center;
      background:linear-gradient(145deg,#f8f4ee,#ede4d8);
      overflow:hidden;
    }
    .product-visual .mini-frame {
      box-sizing:border-box;
      width:auto;
      height:78%;
      max-width:74%;
      aspect-ratio:.78;
      flex:none;
    }
    .product-visual .mini-frame.landscape {
      width:84%;
      height:auto;
      max-height:64%;
      max-width:84%;
      aspect-ratio:1.3;
    }
    .product-visual .mini-frame.square {
      width:auto;
      height:72%;
      max-width:72%;
      aspect-ratio:1;
    }
    .product-description {
      height:60px;
      min-height:60px;
      margin:8px 0 0;
      color:var(--muted);
      font-size:13px;
      line-height:1.55;
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .mini-frame {
      width:70%;
      aspect-ratio:.78;
      padding:10px;
      position:relative;
      overflow:hidden;
      background:var(--frame-surface,#4b3a2d);
      box-shadow:var(--frame-shadow,0 17px 28px rgba(49,37,27,.19));
    }
    .mini-frame::before,
    .configured-frame::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:var(--frame-overlay,linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.1) 16%, rgba(255,255,255,0) 30%, rgba(0,0,0,.08) 78%, rgba(0,0,0,.2) 100%));
    }
    .mini-frame::after,
    .configured-frame::after {
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      box-shadow:inset 2px 2px 0 rgba(255,255,255,.18), inset -3px -3px 0 rgba(0,0,0,.2), inset 10px 10px 14px rgba(255,255,255,.05), inset -10px -10px 14px rgba(0,0,0,.07);
    }
    .mini-frame > *,
    .configured-frame > * { position:relative; z-index:1; }
    .mini-frame.landscape { aspect-ratio:1.3; width:83%; }
    .mini-frame.square { aspect-ratio:1; width:72%; }
    .mini-art { width:100%; height:100%; border:9px solid #f1ece4; background:linear-gradient(155deg,#d9d1c4 0 38%,#9f8a70 39% 52%,#5a5045 53% 60%,#d7c9b6 61%); }
    .mini-art.alt { background:radial-gradient(ellipse at 42% 35%,#89785f 0 10%,transparent 11%),radial-gradient(ellipse at 64% 60%,#a8957a 0 16%,transparent 17%),#ded5c8; }
    .mini-art.modern { background:linear-gradient(130deg,#c8b295 0 32%,#f1ece5 33% 52%,#6c5947 53% 66%,#d6c7b6 67%); }
    .product-info { display:flex; flex-direction:column; flex:1; padding:18px; }
    .product-info > .product-open-area { display:flex; flex-direction:column; flex:1; }
    .product-meta { min-height:30px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.11em; }
    .product-name { font-weight:800; margin:5px 0 4px; }
    .price { margin-top:auto; padding-top:9px; font-weight:800; }
    .card-actions { display:grid; grid-template-columns:1fr; gap:8px; margin-top:15px; }

    .product-page { display:grid; grid-template-columns:1.08fr .92fr; gap:22px 54px; padding:18px 0 90px; }
    .product-back-row {
      grid-column:1/-1; position:sticky; top:86px; z-index:24; width:max-content;
      padding:6px 0; pointer-events:none;
    }
    .back-listings {
      display:inline-flex; align-items:center; gap:9px; padding:11px 16px; pointer-events:auto;
      border:1px solid var(--sand-dark); border-radius:999px; background:rgba(255,255,255,.97); color:var(--ink); font-weight:800;
      box-shadow:0 8px 24px rgba(54,42,31,.13); transition:.2s ease;
    }
    .back-listings:hover { border-color:var(--sand-dark); transform:translateX(-2px); }
    .product-gallery { display:grid; grid-template-columns:82px minmax(0,1fr); gap:14px; width:100%; min-width:0; align-items:start; }
    .preview-stack { width:100%; min-width:0; }
    .preview-stage { width:100%; }
    .product-side-thumbs { display:flex; flex-direction:column; gap:10px; width:82px; }
    .product-side-thumb {
      width:82px;
      aspect-ratio:1/1;
      border:1px solid var(--line);
      border-radius:14px;
      background:#fff;
      padding:6px;
      overflow:hidden;
      cursor:pointer;
      transition:.18s ease;
    }
    .product-side-thumb:hover { border-color:var(--sand-dark); transform:translateY(-1px); }
    .product-side-thumb.active { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
    .product-side-thumb img { display:block; width:100%; height:100%; object-fit:contain; border-radius:9px; background:#fff; }
    .product-side-thumb .side-thumb-art { width:100%; height:100%; border-radius:9px; background:#f3ede4 center/cover no-repeat; }
    .frame-reference-main {
      position:absolute;
      inset:22px;
      width:calc(100% - 44px);
      height:calc(100% - 44px);
      object-fit:contain;
      background:#fff;
      border-radius:12px;
      z-index:5;
    }
    .thumbs { display:flex; flex-direction:column; gap:10px; }
    .thumbs-single { display:none !important; }
    .thumb { border:1px solid var(--line); border-radius:14px; background:#fff; padding:7px; aspect-ratio:1; display:grid; place-items:center; transition:.2s ease; }
    .thumb:hover { transform:translateY(-1px); border-color:var(--sand-dark); }
    .thumb.active { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
    .angled-thumb { transform:perspective(700px) rotateY(-18deg) rotateX(0deg); transform-style:preserve-3d; }
    .angled-thumb .mini-art { box-shadow:0 0 0 1px rgba(0,0,0,.06); }
    .thumb-mockup {
      position:relative; width:100%; height:100%; border-radius:10px; overflow:hidden;
      background:#ece5db center/cover no-repeat; border:1px solid rgba(97,77,56,.08);
    }
    .thumb-mockup-placement { position:absolute; }
    .thumb-mockup .mini-frame { width:100%; height:100%; }
    .rotation-control, .drag-hint { display:none !important; }
    .preview-stage {
      min-height:0; height:clamp(500px,50vw,610px); padding:34px; border-radius:24px;
      display:grid; place-items:center; background:linear-gradient(145deg,#f5efe7,#e7dbcc);
      overflow:hidden; position:relative;
    }
    .preview-stage.orientation-landscape { height:clamp(430px,43vw,520px); }
    .preview-stage.orientation-square { height:clamp(470px,47vw,570px); }
    .configured-frame {
      width:54%;
      aspect-ratio:.72;
      position:relative;
      overflow:hidden;
      background:var(--frame-surface,#3d3027);
      padding:14px;
      box-shadow:var(--frame-shadow,0 26px 44px rgba(50,38,28,.25));
      transition:transform .3s ease, width .25s ease, aspect-ratio .25s ease, background .25s ease, padding .25s ease, box-shadow .25s ease;
    }
    .configured-frame.landscape { width:77%; aspect-ratio:1.35; }
    .configured-frame.square { width:67%; aspect-ratio:1; }
    .preview-stage.mode-front .configured-frame { place-self:center; margin:auto; transform:none; transform-origin:center; }
    .preview-stage.mode-art .configured-frame { transform:scale(1.32); }
    .preview-stage.mode-frame .configured-frame { transform:scale(1.72) translate(10%,10%); transform-origin:top left; }
    .mount-outer { width:100%; height:100%; padding:19px; background:#f3efe9; transition:.2s ease; }
    .mount-inner { width:100%; height:100%; padding:0; background:#d7c5b4; transition:.2s ease; }
    .artwork-preview { width:100%; height:100%; background:radial-gradient(ellipse at 37% 30%,#7d705e 0 6%,transparent 7%),radial-gradient(ellipse at 62% 46%,#9c8a70 0 11%,transparent 12%),linear-gradient(145deg,#e4dccc,#c5b396); position:relative; overflow:hidden; }
    .artwork-preview::after { content:""; position:absolute; width:130%; height:3px; left:-15%; top:62%; background:rgba(72,57,44,.32); transform:rotate(-13deg); box-shadow:0 35px 0 rgba(72,57,44,.16); }
    .artwork-preview.alt { background:radial-gradient(ellipse at 42% 35%,#89785f 0 10%,transparent 11%),radial-gradient(ellipse at 64% 60%,#a8957a 0 16%,transparent 17%),#ded5c8; }
    .artwork-preview.modern { background:linear-gradient(130deg,#c8b295 0 32%,#f1ece5 33% 52%,#6c5947 53% 66%,#d6c7b6 67%); }
    .artwork-preview.heritage { background:linear-gradient(160deg,#ead8be,#b28b61 46%,#6f4f34 47% 55%,#e1d0b8 56%); }
    .artwork-preview.sacred { background:repeating-conic-gradient(from 45deg,#d8c19b 0 12.5%,#6c533d 0 25%); }
    .artwork-preview.stilllife { background:radial-gradient(ellipse at 48% 56%,#8a7158 0 14%,transparent 15%),radial-gradient(ellipse at 58% 35%,#b49a79 0 11%,transparent 12%),linear-gradient(145deg,#e5ddd1,#baaa95); }
    .artwork-preview.carpet { background:repeating-radial-gradient(ellipse at center,#dcc8aa 0 8px,#795c41 9px 13px,#b99e79 14px 24px); }
    .artwork-preview.uploaded { background-size:100% 100% !important; background-position:center !important; background-repeat:no-repeat !important; }
    .artwork-preview.uploaded::after { display:none; }
    .upload-box { display:grid; gap:10px; padding:15px; border:1px dashed var(--sand-dark); border-radius:16px; background:var(--surface-2); }
    .upload-label { display:flex; align-items:center; justify-content:center; min-height:48px; padding:12px 16px; border:1px solid var(--line); border-radius:999px; background:#fff; font-weight:750; cursor:pointer; text-align:center; }
    .upload-label:hover { border-color:var(--accent); }
    .upload-status { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; }
    .upload-status button { border:0; background:transparent; color:var(--danger); padding:0; }
    .zoom-hint { position:absolute; bottom:17px; right:17px; max-width:calc(100% - 34px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(255,255,255,.86); border:1px solid var(--line); border-radius:999px; padding:9px 12px; font-size:12px; z-index:9; }
    .preview-stage {
      perspective:1500px;
      cursor:zoom-in;
      user-select:none;
      touch-action:pan-y;
      transition:background .3s ease;
    }
    .preview-stage:active { cursor:zoom-in; }
    .preview-stage.scene-studio {
      background:
        radial-gradient(ellipse at 50% 78%, rgba(83,62,43,.10), transparent 37%),
        linear-gradient(145deg,#f5efe7,#e7dbcc);
    }
    .preview-stage.scene-white {
      background:
        radial-gradient(circle at 22% 18%, rgba(255,255,255,.95), transparent 26%),
        repeating-linear-gradient(0deg, rgba(83,64,46,.018) 0 1px, transparent 1px 4px),
        #f7f6f3;
    }
    .preview-stage.scene-warm {
      background:
        linear-gradient(180deg, transparent 0 76%, rgba(111,81,54,.08) 76% 77%, rgba(111,81,54,.14) 77% 100%),
        radial-gradient(circle at 25% 18%, rgba(255,247,226,.65), transparent 30%),
        linear-gradient(145deg,#ddc9aa,#bca180);
    }
    .preview-stage.has-mockup-front {
      display:block;
      width:100%;
      height:auto !important;
      min-height:0;
      padding:0 !important;
      background:#ece5db !important;
      overflow:hidden;
      cursor:zoom-in;
    }
    .mockup-zoom-layer { display:contents; }
    .preview-stage.has-mockup-front .mockup-zoom-layer {
      display:block;
      position:relative;
      width:100%;
      transform:none;
    }
    .preview-mockup-image {
      width:100%;
      height:auto;
      display:block;
      user-select:none;
      pointer-events:none;
    }
    .preview-magnifier {
      --lens-size:200px;
      position:absolute;
      left:0;
      top:0;
      width:var(--lens-size);
      height:var(--lens-size);
      border-radius:50%;
      overflow:hidden;
      box-sizing:border-box;
      z-index:999;
      pointer-events:none;
      opacity:0;
      visibility:hidden;
      transform:translate(-50%,-50%) scale(.96);
      transition:opacity .08s ease, transform .08s ease;
      background:#fff;
      border:5px solid rgba(255,255,255,.98);
      box-shadow:0 14px 38px rgba(28,20,14,.34),0 0 0 1px rgba(67,51,38,.28);
    }
    .preview-magnifier.visible {
      opacity:1;
      visibility:visible;
      transform:translate(-50%,-50%) scale(1);
    }
    .preview-magnifier::after {
      content:"";
      position:absolute;
      inset:0;
      border-radius:50%;
      box-shadow:inset 0 0 18px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.55);
      pointer-events:none;
      z-index:50;
    }
    .preview-magnifier-content {
      position:absolute;
      left:0;
      top:0;
      transform-origin:0 0;
      pointer-events:none;
    }
    .preview-stage { cursor:crosshair !important; }
    .preview-stage.has-mockup-front .frame-renderer {
      position:absolute;
      display:block;
      z-index:3;
    }
    .frame-renderer {
      --preview-scale:1;
      --preview-hover-scale:1;
      --preview-x:0%;
      --preview-y:0%;
      --preview-rotate-y:0deg;
      --preview-rotate-x:0deg;
      width:max-content;
      height:max-content;
      display:grid;
      place-items:center;
      transform-style:preserve-3d;
      transform-origin:center;
      transform:perspective(1500px) translate3d(var(--preview-x),var(--preview-y),0) rotateX(var(--preview-rotate-x)) rotateY(var(--preview-rotate-y)) scale(calc(var(--preview-scale) * var(--preview-hover-scale)));
      transition:transform .34s cubic-bezier(.2,.8,.2,1), filter .25s ease;
      will-change:transform;
    }
    .preview-stage.mode-front .frame-renderer { --preview-scale:1; --preview-x:0%; --preview-y:0%; }
    .preview-stage.mode-art .frame-renderer { --preview-scale:1.31; --preview-x:0%; --preview-y:0%; }
    .preview-stage.mode-frame .frame-renderer { --preview-scale:1.72; --preview-x:10%; --preview-y:10%; transform-origin:top left; }
    .preview-stage.mode-angled .frame-renderer { --preview-scale:1; --preview-x:0%; --preview-y:0%; }
    .preview-stage.mode-front .configured-frame,
    .preview-stage.mode-art .configured-frame,
    .preview-stage.mode-frame .configured-frame { transform:none; margin:0; }
    .configured-frame {
      --frame-depth:10px;
      --frame-rail:14px;
      position:relative;
      overflow:visible;
      background:transparent !important;
      transform-style:preserve-3d;
    }
    .frame-face,
    .frame-depth-face,
    .frame-back {
      position:absolute;
      backface-visibility:hidden;
      transform-style:preserve-3d;
      pointer-events:none;
    }
    .frame-face-front {
      inset:0;
      transform:translateZ(calc(var(--frame-depth) / 2));
      z-index:4;
    }
    .frame-back {
      inset:0;
      transform:rotateY(180deg) translateZ(calc(var(--frame-depth) / 2));
      background:linear-gradient(145deg,#27231f,#0e0d0c 62%,#38322d);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 9px 14px 18px rgba(45,32,22,.16);
    }
    .frame-depth-right,
    .frame-depth-left {
      top:0;
      left:50%;
      margin-left:calc(var(--frame-depth) / -2);
      width:var(--frame-depth);
      height:100%;
      background:
        linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 16%,rgba(0,0,0,.08) 72%,rgba(0,0,0,.24)),
        var(--frame-depth-surface,#201914);
      box-shadow:inset 1px 0 rgba(255,255,255,.12), inset -2px 0 rgba(0,0,0,.18);
    }
    .frame-depth-right {
      transform:rotateY(90deg) translateZ(calc(var(--frame-w) / 2));
      clip-path:polygon(0 0,100% 2.5%,100% 97.5%,0 100%);
    }
    .frame-depth-left {
      transform:rotateY(-90deg) translateZ(calc(var(--frame-w) / 2));
      clip-path:polygon(0 2.5%,100% 0,100% 100%,0 97.5%);
    }
    .frame-depth-top,
    .frame-depth-bottom {
      top:50%;
      left:0;
      margin-top:calc(var(--frame-depth) / -2);
      width:100%;
      height:var(--frame-depth);
      background:
        linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,0) 18%,rgba(0,0,0,.12) 88%),
        var(--frame-depth-surface,#201914);
      box-shadow:inset 0 1px rgba(255,255,255,.14), inset 0 -2px rgba(0,0,0,.18);
    }
    .frame-depth-top {
      transform:rotateX(90deg) translateZ(calc(var(--frame-h) / 2));
    }
    .frame-depth-bottom {
      transform:rotateX(-90deg) translateZ(calc(var(--frame-h) / 2));
      filter:brightness(.78);
    }
    .frame-rail {
      position:absolute;
      display:block;
      z-index:3;
      pointer-events:none;
      background:var(--frame-surface,#3d3027);
    }
    .frame-rail::after {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
    }
    .frame-rail-top {
      inset:0 0 auto;
      height:var(--frame-rail);
      clip-path:polygon(0 0,100% 0,calc(100% - var(--frame-rail)) 100%,var(--frame-rail) 100%);
    }
    .frame-rail-top::after {
      background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.06) 48%,rgba(0,0,0,.16));
    }
    .frame-rail-bottom {
      inset:auto 0 0;
      height:var(--frame-rail);
      clip-path:polygon(var(--frame-rail) 0,calc(100% - var(--frame-rail)) 0,100% 100%,0 100%);
    }
    .frame-rail-bottom::after {
      background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.26));
    }
    .frame-rail-left {
      inset:0 auto 0 0;
      width:var(--frame-rail);
      clip-path:polygon(0 0,100% var(--frame-rail),100% calc(100% - var(--frame-rail)),0 100%);
    }
    .frame-rail-left::after {
      background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.02) 52%,rgba(0,0,0,.20));
    }
    .frame-rail-right {
      inset:0 0 0 auto;
      width:var(--frame-rail);
      clip-path:polygon(0 var(--frame-rail),100% 0,100% 100%,0 calc(100% - var(--frame-rail)));
    }
    .frame-rail-right::after {
      background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(0,0,0,.28));
    }

    /* Clean straight Box Frame profile — matches the simple rectangular reference */
    .configured-frame.box-frame {
      --frame-depth:0px;
      --frame-rail:13px;
      transform-style:flat;
    }
    .configured-frame.box-frame .frame-face-front {
      transform:none;
      background:var(--frame-surface,#202020);
      overflow:hidden;
    }
    .configured-frame.box-frame .frame-face-front::before {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:2;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(0,0,0,.16),
        inset 1px 0 0 rgba(255,255,255,.03),
        inset -1px 0 0 rgba(0,0,0,.1);
      background:var(--frame-overlay,linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 26%,rgba(0,0,0,.08) 100%));
    }
    .configured-frame.box-frame .frame-depth-face,
    .configured-frame.box-frame .frame-back {
      display:none;
    }
    .configured-frame.box-frame .frame-rail {
      clip-path:none !important;
      background:transparent;
      box-shadow:none;
    }
    .configured-frame.box-frame .frame-rail::after {
      display:none;
    }
    .configured-frame.box-frame .frame-rail-top,
    .configured-frame.box-frame .frame-rail-bottom {
      left:-1px; right:-1px; width:auto; height:var(--frame-rail); z-index:3;
    }
    .configured-frame.box-frame .frame-rail-top { top:0; bottom:auto; }
    .configured-frame.box-frame .frame-rail-bottom { top:auto; bottom:0; }
    .configured-frame.box-frame .frame-rail-left,
    .configured-frame.box-frame .frame-rail-right {
      top:0; bottom:0; height:auto; width:var(--frame-rail); z-index:2;
    }
    .configured-frame.box-frame .frame-rail-left { left:0; right:auto; }
    .configured-frame.box-frame .frame-rail-right { right:0; left:auto; }
    .configured-frame.box-frame .frame-face-front > .mount-outer {
      inset:var(--frame-rail);
      background:linear-gradient(180deg, rgba(251,251,251,.99), rgba(240,240,240,.99));
      box-shadow:
        0 0 0 1px rgba(0,0,0,.15),
        inset 0 12px 16px rgba(0,0,0,.18),
        inset 10px 0 12px rgba(0,0,0,.08),
        inset -10px 0 12px rgba(0,0,0,.11),
        inset 0 -3px 4px rgba(255,255,255,.32);
    }
    .configured-frame.box-frame .frame-face-front > .mount-outer::before {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:7;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65),
        inset 0 0 0 1px rgba(255,255,255,.18),
        inset 0 14px 16px rgba(0,0,0,.08),
        inset 14px 0 14px rgba(0,0,0,.05),
        inset -14px 0 14px rgba(0,0,0,.07);
    }
    .configured-frame.box-frame .frame-face-front > .mount-outer::after {
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.22),
        inset 0 18px 18px rgba(255,255,255,.04),
        inset 0 -10px 12px rgba(0,0,0,.04);
    }

    .mockup-frame-shell.box-frame-shell {
      box-sizing:border-box;
      padding:3.5%;
      background:var(--frame-surface,#202020);
      box-shadow:0 8px 18px rgba(35,28,22,.14);
    }
    .mockup-frame-shell.box-frame-shell::before {
      background:var(--frame-overlay,linear-gradient(180deg,rgba(255,255,255,.08),transparent 28%,rgba(0,0,0,.08)));
      z-index:2;
    }
    .mockup-frame-shell.box-frame-shell::after {
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
      z-index:3;
    }
    .mockup-frame-shell.box-frame-shell .mockup-art {
      position:relative;
      z-index:1;
      width:100%;
      height:100%;
      box-shadow:
        0 0 0 1px rgba(0,0,0,.14),
        inset 0 9px 12px rgba(0,0,0,.14),
        inset 7px 0 9px rgba(0,0,0,.06),
        inset -7px 0 9px rgba(0,0,0,.09),
        inset 0 -2px 4px rgba(255,255,255,.18);
    }

    .configured-frame.floating-frame {
      --frame-rail:4px;
      --frame-depth:0px;
    }
    .configured-frame.floating-frame .frame-face-front {
      transform:none;
      background:var(--frame-surface,#202020);
      overflow:hidden;
      box-shadow:0 12px 24px rgba(28,24,20,.18);
    }
    .configured-frame.floating-frame .frame-face-front::before {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:2;
      background:var(--frame-overlay,transparent);
      box-shadow:none;
    }
    .configured-frame.floating-frame .frame-depth-face,
    .configured-frame.floating-frame .frame-back {
      display:none;
    }
    .configured-frame.floating-frame .frame-rail {
      clip-path:none !important;
      background:transparent;
      box-shadow:none;
    }
    .configured-frame.floating-frame .frame-rail::after { display:none; }
    .configured-frame.floating-frame .frame-rail-top,
    .configured-frame.floating-frame .frame-rail-bottom {
      left:-1px; right:-1px; width:auto; height:var(--frame-rail); z-index:3;
    }
    .configured-frame.floating-frame .frame-rail-top { top:0; bottom:auto; }
    .configured-frame.floating-frame .frame-rail-bottom { top:auto; bottom:0; }
    .configured-frame.floating-frame .frame-rail-left,
    .configured-frame.floating-frame .frame-rail-right {
      top:0; bottom:0; height:auto; width:var(--frame-rail); z-index:2;
    }
    .configured-frame.floating-frame .frame-rail-left { left:0; right:auto; }
    .configured-frame.floating-frame .frame-rail-right { right:0; left:auto; }
    .configured-frame.floating-frame .frame-face-front > .mount-outer {
      inset:var(--frame-rail);
      background:transparent;
      box-shadow:none;
    }
    .configured-frame.floating-frame .frame-face-front > .mount-outer::after {
      display:none;
    }
    .configured-frame.floating-frame .frame-face-front > .mount-outer > .mount-inner {
      background:transparent;
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:1.5%;
      box-shadow:none;
    }
    .configured-frame.floating-frame .frame-face-front > .mount-outer > .mount-inner > .artwork-preview {
      width:100%;
      height:100%;
      box-shadow:
        0 0 0 5px rgba(0,0,0,.82),
        0 0 10px rgba(0,0,0,.14);
    }

    .mockup-frame-shell.floating-frame-shell {
      box-sizing:border-box;
      padding:3.5%;
      background:var(--frame-surface,#202020);
      box-shadow:0 8px 18px rgba(35,28,22,.14);
    }
    .mockup-frame-shell.floating-frame-shell::before {
      background:var(--frame-overlay,transparent);
      z-index:2;
    }
    .mockup-frame-shell.floating-frame-shell::after {
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
      z-index:3;
    }
    .mockup-frame-shell.floating-frame-shell .mockup-art {
      position:relative;
      z-index:1;
      width:100%;
      height:100%;
      background-color:transparent;
      background-origin:content-box;
      background-clip:content-box;
      padding:1.5%;
      box-sizing:border-box;
      box-shadow:none;
    }
    .mockup-frame-shell.floating-frame-shell .mockup-art::after {
      content:"";
      position:absolute;
      inset:1.5%;
      pointer-events:none;
      box-shadow:0 0 0 5px rgba(0,0,0,.82), 0 0 10px rgba(0,0,0,.14);
    }
    .configured-frame.unframed .frame-rail,
    .configured-frame.unframed .frame-depth-face,
    .configured-frame.unframed .frame-back { display:none; }
    .configured-frame.unframed .frame-face-front { transform:none; }
    .configured-frame.unframed .frame-face-front > .mount-outer { inset:0; box-shadow:none; }
    .configured-frame.unframed { --frame-depth:0px; --frame-rail:0px; }
    .frame-face-front > .mount-outer {
      position:absolute;
      inset:var(--frame-rail);
      width:auto;
      height:auto;
      z-index:2;
      overflow:hidden;
      pointer-events:auto;
      box-shadow:
        0 0 0 1px rgba(0,0,0,.10),
        inset 1px 1px 1px rgba(255,255,255,.58),
        inset -2px -2px 5px rgba(45,34,24,.10);
    }
    .frame-face-front > .mount-outer::after {
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:8;
      box-shadow:inset 1px 1px 1px rgba(255,255,255,.45), inset -2px -2px 4px rgba(45,34,24,.08);
    }
    .drag-hint {
      position:absolute;
      left:17px;
      bottom:17px;
      z-index:9;
      padding:8px 11px;
      border-radius:999px;
      border:1px solid rgba(86,65,47,.12);
      background:rgba(255,255,255,.76);
      backdrop-filter:blur(10px);
      color:var(--muted);
      font-size:11px;
      opacity:.86;
    }
    .preview-controls {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
      margin-top:12px;
      padding:13px;
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,255,255,.78);
      box-shadow:0 10px 26px rgba(54,42,31,.06);
    }
    .preview-control-group,.rotation-control { min-width:0; }
    .preview-control-label { display:block; margin-bottom:8px; font-size:11px; font-weight:850; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
    .scene-options { display:flex; flex-wrap:wrap; gap:7px; }
    .scene-option {
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:36px;
      padding:7px 10px;
      border:1px solid var(--line);
      border-radius:999px;
      background:#fff;
      color:var(--ink);
      font-size:12px;
      font-weight:750;
    }
    .scene-option.active { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
    .scene-dot { width:15px; height:15px; border-radius:50%; border:1px solid rgba(45,35,25,.12); }
    .scene-dot.studio { background:linear-gradient(145deg,#f5efe7,#d8c8b4); }
    .scene-dot.white { background:#f8f7f4; }
    .scene-dot.warm { background:linear-gradient(145deg,#dec7a7,#b3926f); }
    .rotation-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .rotation-heading .preview-control-label { margin-bottom:8px; }
    .rotation-heading button { padding:0; border:0; background:transparent; color:var(--accent); font-size:12px; font-weight:800; }
    .rotation-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
    .rotation-row input { width:100%; accent-color:var(--ink); }
    .angle-presets { display:flex; justify-content:center; gap:7px; margin-top:9px; }
    .angle-preset {
      width:34px;
      height:30px;
      padding:0;
      border:1px solid var(--line);
      border-radius:9px;
      background:#fff;
      color:var(--muted);
      font-size:15px;
      line-height:1;
      transition:.18s ease;
    }
    .angle-preset:hover { transform:translateY(-1px); border-color:var(--sand-dark); color:var(--ink); }
    .angle-preset.active { color:#fff; background:var(--ink); border-color:var(--ink); }
    .product-details .breadcrumbs { color:var(--muted); font-size:13px; margin-bottom:19px; }
    .product-details h2 { font-size:48px; }
    .product-code { font-size:12px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
    .product-price { font-size:27px; font-weight:850; margin:15px 0 4px; }
    .option { margin-top:19px; }
    .option > label { display:block; font-size:13px; font-weight:800; margin-bottom:8px; }
    .segmented { display:flex; flex-wrap:wrap; gap:8px; }
    .segment { padding:10px 13px; border:1px solid var(--line); border-radius:999px; background:#fff; }
    .segment.active { background:var(--ink); color:#fff; border-color:var(--ink); }
    .field { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:13px; background:#fff; color:var(--ink); }
    .two-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .swatches { display:flex; flex-wrap:wrap; gap:9px; }
    .swatch { width:36px; height:36px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); background-size:100% 100% !important; }
    .swatch.active { box-shadow:0 0 0 2px var(--ink); }
    .swatches.floating-palette { gap:10px; }
    .swatches.floating-palette .swatch {
      width:64px;
      height:30px;
      border-radius:6px;
      border:2px solid #fff;
      box-shadow:0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.12);
      background-size:100% 100% !important;
    }
    .swatches.floating-palette .swatch.active {
      box-shadow:0 0 0 2px var(--ink), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.12);
    }
    .product-buy { display:grid; grid-template-columns:100px 1fr; gap:10px; margin-top:25px; }
    .quantity { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:999px; background:#fff; padding:0 8px; }
    .quantity button { border:0; background:transparent; width:28px; height:40px; }
    .detail-note { margin-top:22px; display:grid; gap:9px; font-size:13px; color:var(--muted); }

    .page-header { padding:65px 0 22px; text-align:center; }
    .cart-layout, .checkout-layout { display:grid; grid-template-columns:1fr 380px; gap:30px; padding:28px 0 90px; }
    .panel { border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:22px; }
    .cart-item { display:grid; grid-template-columns:120px 1fr auto; gap:18px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
    .cart-item:last-child { border-bottom:0; }
    .cart-thumb { aspect-ratio:1; background:var(--surface-2); border-radius:15px; padding:16px; display:grid; place-items:center; overflow:hidden; }
    .cart-thumb .mini-frame { width:75%; }
    .cart-thumb.has-mockup { padding:0; background:#eee7de; }
    .cart-thumb .cart-mockup-preview { width:100%; height:100%; background-position:center; background-size:cover; background-repeat:no-repeat; }
    .cart-thumb .basmah-cart-product-image { width:100%; height:100%; display:block; object-fit:cover; }
    .cart-options { font-size:13px; color:var(--muted); }
    .remove { color:var(--danger); border:0; background:transparent; padding:0; font-size:13px; }
    .summary-line { display:flex; justify-content:space-between; gap:20px; padding:10px 0; color:var(--muted); }
    .summary-line.total { margin-top:8px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink); font-size:19px; font-weight:850; }
    .empty-state { text-align:center; padding:58px 20px; }

    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .form-group.full { grid-column:1/-1; }
    .form-group label { display:block; font-size:13px; font-weight:750; margin-bottom:6px; }
    textarea.field { min-height:100px; resize:vertical; }
    .choice-row { display:grid; gap:9px; }
    .choice { display:flex; align-items:center; gap:10px; padding:13px; border:1px solid var(--line); border-radius:14px; }
    .checkout-section + .checkout-section { margin-top:24px; }
    .checkout-section h3 { margin-bottom:14px; font-size:23px; }
    .success-message { display:none; padding:16px; margin-top:14px; border-radius:14px; background:#edf5ef; color:var(--success); border:1px solid #cfe0d3; }
    .success-message.show { display:block; }

    footer { background:#211e1a; color:#fff; padding:62px 0 25px; }
    .footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:35px; }
    footer p, footer a { color:#bdb6ad; }
    footer h4 { margin:0 0 13px; }
    footer a { display:block; margin:8px 0; font-size:14px; }
    .newsletter { display:flex; gap:8px; margin-top:14px; }
    .newsletter input { flex:1; min-width:0; border:1px solid #4b4640; border-radius:999px; background:#2d2925; color:#fff; padding:11px 13px; }
    .footer-bottom { border-top:1px solid #3b3631; margin-top:38px; padding-top:21px; display:flex; justify-content:center; align-items:center; text-align:center; gap:20px; color:#8f8981; font-size:12px; }

    .mobile-menu { display:none; }
    .whatsapp-float {
      position:fixed;
      right:24px;
      bottom:24px;
      z-index:9999;
      padding:0;
      display:block;
      color:#fff;
      text-decoration:none;
      box-sizing:border-box;
      transition:transform .2s ease, filter .2s ease;
      -webkit-tap-highlight-color:transparent;
    }
    .whatsapp-float:hover {
      transform:translateY(-3px) scale(1.02);
      filter:drop-shadow(0 14px 30px rgba(0,0,0,.22));
    }
    .whatsapp-float:focus-visible {
      outline:3px solid rgba(37,211,102,.34);
      outline-offset:4px;
      border-radius:999px;
    }
    .whatsapp-float-pill{
      display:flex;
      align-items:center;
      gap:0;
      min-width:250px;
      height:64px;
      padding:6px 10px 6px 8px;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      box-shadow:0 10px 28px rgba(0,0,0,.18);
      backdrop-filter:blur(4px);
      -webkit-backdrop-filter:blur(4px);
    }
    .whatsapp-float-icon{
      width:56px;
      height:56px;
      flex:0 0 56px;
      border-radius:50%;
      background:#25D366;
      border:4px solid #ffffff;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 6px 16px rgba(17,94,53,.22);
    }
    .whatsapp-float-icon svg{
      display:block;
      width:30px;
      height:30px;
      color:#fff;
      overflow:visible;
      flex:0 0 auto;
    }
    .whatsapp-float-icon svg * { vector-effect:non-scaling-stroke; }
    .whatsapp-float-label{
      margin-left:10px;
      min-width:0;
      flex:1 1 auto;
      height:48px;
      padding:0 20px;
      border-radius:999px;
      background:#dddddd;
      border:2px solid #f2f2f2;
      color:#2e2b29;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      font-size:15px;
      font-weight:700;
      letter-spacing:.01em;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
      direction:ltr;
      white-space:nowrap;
    }
    .toast { position:fixed; right:18px; bottom:18px; z-index:80; background:var(--ink); color:#fff; border-radius:14px; padding:13px 16px; box-shadow:var(--shadow); transform:translateY(25px); opacity:0; pointer-events:none; transition:.25s ease; }
    .toast.show { transform:none; opacity:1; }

    @media (max-width: 980px) {
      .nav { display:none; }
      .mobile-menu { display:grid; }
      .site-header { grid-template-columns:auto 1fr auto; }
      .brand { justify-self:center; }
      .hero { grid-template-columns:1fr; padding-top:55px; }
      .hero-copy { text-align:center; }
      .hero-copy p { margin-inline:auto; }
      .hero-actions { justify-content:center; }
      .gallery-stage { min-height:500px; }
      .category-grid { grid-template-columns:repeat(2,1fr); }
      .shop-category-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .shop-layout { grid-template-columns:1fr; }
      .filters { position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
      .filter-group + .filter-group { margin:0; padding:0; border:0; }
      .product-grid { grid-template-columns:repeat(2,1fr); }
      .product-page { grid-template-columns:1fr; }
      .product-gallery { grid-template-columns:72px minmax(0,1fr); gap:12px; }
      .product-side-thumbs, .product-side-thumb { width:72px; }
      .preview-stage { height:590px; }
      .preview-stage.orientation-landscape { height:500px; }
      .preview-stage.orientation-square { height:550px; }
      .cart-layout, .checkout-layout { grid-template-columns:1fr; }
      .footer-grid { grid-template-columns:repeat(2,1fr); }
    }

    @media (max-width: 640px) {
      .announcement { font-size:10px; }
      .site-header { padding:13px 14px; gap:8px; }
      .brand span:last-child { display:none; }
      .header-actions .account { display:none; }
      h1 { font-size:48px; }
      .hero { min-height:auto; padding:42px 0; }
      .gallery-stage { min-height:400px; }
      .section { padding:64px 0; }
      .section-head { align-items:start; flex-direction:column; }
      .category-grid, .product-grid, .footer-grid { grid-template-columns:1fr; }
      .product-visual { height:236px; min-height:236px; }
      .shop-category-picker { grid-template-columns:1fr 1fr; gap:8px; }
      .shop-category-card { min-height:72px; padding:9px 10px; }
      .shop-category-swatch { width:42px; min-width:42px; height:42px; }
      .shop-category-name { font-size:13px; }
      .shop-category-kicker { display:none; }
      .shop-category-count { min-width:25px; height:25px; padding:0 7px; font-size:10px; }
      .category-card { min-height:220px; }
      .preview-controls { grid-template-columns:1fr; }
      .drag-hint { display:none; }
      .feature-strip { grid-template-columns:1fr; }
      .feature + .feature { border-left:0; border-top:1px solid var(--line); }
      .filters { grid-template-columns:1fr; }
      .product-toolbar { align-items:flex-start; flex-direction:column; }
      .product-gallery { grid-template-columns:58px minmax(0,1fr); gap:8px; }
      .product-side-thumbs, .product-side-thumb { width:58px; }
      .thumbs { order:2; flex-direction:row; }
      .thumb { width:64px; }
      .product-page { padding-top:10px; gap:14px; }
      .product-back-row { top:72px; }
      .preview-stage { height:430px; padding:18px; }
      .preview-stage.orientation-landscape { height:370px; }
      .preview-stage.orientation-square { height:410px; }
      .whatsapp-float { right:12px; bottom:max(12px, env(safe-area-inset-bottom)); }
      .whatsapp-float-pill{ min-width:210px; height:58px; padding:5px 8px 5px 6px; }
      .whatsapp-float-icon{ width:50px; height:50px; flex-basis:50px; }
      .whatsapp-float-icon svg{ width:27px; height:27px; }
      .whatsapp-float-label{ margin-left:8px; height:42px; padding:0 16px; font-size:13px; }
      .product-details h2 { font-size:39px; }
      .product-buy { grid-template-columns:1fr; }
      .cart-item { grid-template-columns:86px 1fr; }
      .cart-item > :last-child { grid-column:2; }
      .form-grid { grid-template-columns:1fr; }
      .form-group.full { grid-column:auto; }
      .footer-bottom { justify-content:center; text-align:center; }
    }
  

    .config-mode {
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: var(--surface-2);
    }
    .selected-option {
      margin-left: 6px;
      color: var(--accent-dark);
      font-weight: 700;
    }
    .option-note {
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
    }
    .sub-label {
      display: block;
      margin: 0 0 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }
    .mount-width-row { margin-top: 10px; }
    .swatch {
      position: relative;
      overflow: hidden;
    }
    .swatch::after {
      content: attr(aria-label);
      position: fixed;
      left: -9999px;
    }
    .configured-frame.mirror {
      width: 56%;
      aspect-ratio: 1;
    }
    .artwork-preview.mirror-surface {
      position: relative;
      background: linear-gradient(135deg, #5f5148, #b89b7e 45%, #6d5847 72%, #c0a78d);
      box-shadow: inset 0 0 22px rgba(255,255,255,.28), inset 0 0 45px rgba(0,0,0,.12);
    }
    .artwork-preview.mirror-surface::after { display: none; }
    .artwork-preview.mirror-surface::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(118deg, transparent 0 28%, rgba(255,255,255,.34) 36%, transparent 44% 100%);
      pointer-events: none;
    }
    .mini-art.mirror {
      background: linear-gradient(135deg,#5f5148,#b89b7e 45%,#6d5847 72%,#c0a78d);
      position: relative;
    }
    .mini-art.mirror::after {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg,transparent 0 30%,rgba(255,255,255,.35) 38%,transparent 46% 100%);
    }
    @media (max-width: 640px) {
      .two-fields { grid-template-columns: 1fr; }
    }

    .mini-art.product-image, .artwork-preview.product-image {
      background-size:var(--product-art-size,100% 100%) !important;
      background-position:var(--product-art-position,center) !important;
      background-repeat:no-repeat !important;
    }
    .mini-art.product-image::after, .artwork-preview.product-image::after { display:none !important; }

    .developer-launcher {
      position:fixed; left:18px; bottom:18px; z-index:9990; display:none;
      align-items:center; gap:8px; padding:10px 14px; border:1px solid rgba(75,57,42,.2);
      border-radius:999px; background:#2d2721; color:#fff; font:700 12px/1 system-ui,sans-serif;
      box-shadow:0 12px 30px rgba(30,23,18,.2); cursor:pointer;
    }
    .developer-launcher.visible { display:flex; }
    .developer-shell {
      position:fixed; inset:0; z-index:10000; display:none; background:#f5f1ea; color:#29231e;
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }
    .developer-shell.open { display:grid; grid-template-columns:240px minmax(0,1fr); }
    .developer-sidebar { background:#26211d; color:#fff; padding:22px 14px; overflow:auto; }
    .developer-brand { padding:6px 10px 20px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:14px; }
    .developer-brand strong { display:block; font-size:18px; }
    .developer-brand span { display:block; color:#afa69d; font-size:11px; margin-top:5px; }
    .developer-tabs { display:grid; gap:6px; }
    .developer-tab { text-align:left; padding:11px 12px; border:0; border-radius:10px; background:transparent; color:#cfc7bf; font-weight:700; cursor:pointer; }
    .developer-tab:hover, .developer-tab.active { background:#fff; color:#29231e; }
    .developer-sidebar-actions { margin-top:20px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); display:grid; gap:8px; }
    .developer-side-btn { width:100%; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:transparent; color:#fff; cursor:pointer; }
    .developer-main { min-width:0; height:100vh; overflow:auto; }
    .developer-topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 24px; background:rgba(245,241,234,.94); backdrop-filter:blur(12px); border-bottom:1px solid #ddd5ca; }
    .developer-topbar h2 { margin:0; font:700 22px/1.2 Georgia,serif; }
    .developer-top-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .admin-btn { border:1px solid #d4cabd; background:#fff; color:#2a241f; border-radius:10px; padding:9px 13px; font-weight:700; cursor:pointer; }
    .admin-btn.primary { background:#2a241f; border-color:#2a241f; color:#fff; }
    .admin-btn.danger { color:#a12d2d; border-color:#e5c5c5; }
    .developer-content { padding:24px; max-width:1400px; margin:0 auto; }
    .developer-pane { display:none; }
    .developer-pane.active { display:block; }
    .admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    .admin-card { background:#fff; border:1px solid #ded6cb; border-radius:16px; padding:18px; box-shadow:0 6px 20px rgba(62,49,37,.04); }
    .admin-card h3 { margin:0 0 14px; font-size:15px; }
    .admin-field { display:grid; gap:6px; margin-bottom:12px; }
    .admin-field label { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#766c63; font-weight:800; }
    .admin-input, .admin-select, .admin-textarea { width:100%; border:1px solid #d9d0c5; border-radius:10px; padding:10px 11px; background:#fff; color:#28221d; font:500 13px/1.4 inherit; }
    .admin-textarea { min-height:90px; resize:vertical; }
    .admin-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .admin-help { color:#7c7269; font-size:12px; line-height:1.5; }
    .admin-list-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:16px; }
    .admin-product-list { background:#fff; border:1px solid #ded6cb; border-radius:16px; padding:10px; max-height:70vh; overflow:auto; }
    .admin-product-item { width:100%; text-align:left; border:0; background:transparent; border-radius:10px; padding:10px; cursor:pointer; display:flex; align-items:center; gap:10px; }
    .admin-product-item:hover, .admin-product-item.active { background:#f0ebe4; }
    .admin-product-thumb { width:44px; height:44px; border-radius:8px; background:#eee6da center/cover no-repeat; border:1px solid #e0d7cc; flex:0 0 auto; }
    .admin-product-item strong { display:block; font-size:12px; }
    .admin-product-item small { display:block; color:#7c7269; margin-top:2px; }
    .admin-image-preview { width:140px; height:140px; border:1px dashed #cbbdac; border-radius:12px; background:#f5f1ea center/contain no-repeat; display:grid; place-items:center; color:#8b8178; font-size:11px; overflow:hidden; }
    .admin-toolbar { display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px; }
    .admin-table { width:100%; border-collapse:collapse; font-size:12px; }
    .admin-table th, .admin-table td { border-bottom:1px solid #ece6de; padding:8px; text-align:left; vertical-align:top; }
    .admin-table th { color:#776d64; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
    .admin-table input, .admin-table select { width:100%; min-width:90px; border:1px solid #ddd4ca; border-radius:8px; padding:7px 8px; }
    .admin-category-image { width:64px; height:44px; border-radius:8px; background:#eee6da center/cover no-repeat; border:1px solid #ded4c8; }
    .admin-section-title { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:15px; }
    .admin-section-title h3 { margin:0; font-size:19px; }
    .admin-section-title p { margin:4px 0 0; color:#7d7369; font-size:12px; }
    .admin-status { position:fixed; right:24px; bottom:24px; z-index:11000; padding:10px 14px; border-radius:999px; background:#2b251f; color:#fff; opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s; font-size:12px; }
    .admin-status.show { opacity:1; transform:none; }
    .admin-json { min-height:260px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }
    .admin-divider { height:1px; background:#ece5dc; margin:16px 0; }
    .admin-size-list { display:grid; gap:8px; }
    .admin-size-row { display:grid; grid-template-columns:1fr 1.35fr .8fr auto; gap:8px; align-items:end; padding:10px; border:1px solid #e8e0d6; border-radius:12px; background:#fbf9f6; }
    .admin-size-row .admin-field { margin:0; }
    .admin-check-grid { display:flex; flex-wrap:wrap; gap:8px; }
    .admin-check-option { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid #ddd4ca; border-radius:10px; background:#fff; font-size:13px; font-weight:700; }
    .admin-check-option input { accent-color:#2a241f; }
    .admin-product-image-row { display:grid; grid-template-columns:180px 1fr; gap:14px; align-items:start; }
    .admin-hidden { display:none !important; }
    .admin-art-full-preview {
      width:100%; max-width:360px; aspect-ratio:4/5; border:1px solid #ddd3c7; border-radius:14px;
      background:#f6f2eb center/100% 100% no-repeat; overflow:hidden; box-shadow:0 10px 24px rgba(50,38,28,.06);
      display:grid; place-items:center; color:#81766c; font-size:12px;
    }
    .admin-mockup-editor { width:100%; margin-top:12px; }
    .admin-mockup-canvas {
      position:relative; width:100%; min-height:340px; border:1px solid #d9d0c5; border-radius:16px; overflow:hidden;
      background:linear-gradient(145deg,#f6f2ec,#eee6dc); user-select:none;
    }
    .admin-mockup-canvas > img { width:100%; height:auto; display:block; pointer-events:none; user-select:none; }
    .admin-mockup-empty { position:absolute; inset:0; display:grid; place-items:center; color:#8a7f75; font-size:13px; }
    .admin-mockup-placement-box {
      position:absolute; touch-action:none; cursor:move; box-sizing:border-box; border:1px dashed rgba(38,31,25,.7);
      outline:1px solid rgba(255,255,255,.85); outline-offset:-2px; min-width:36px; min-height:36px;
    }
    .admin-mockup-placement-box.dragging { cursor:grabbing; }
    .admin-mockup-placement-box .admin-mockup-frame { width:100%; height:100%; }
    .admin-resize-handle {
      position:absolute; z-index:30; right:-8px; bottom:-8px; width:18px; height:18px; border-radius:4px;
      background:#2a241f; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:nwse-resize; touch-action:none;
    }
    .admin-mockup-tip { margin-top:9px; color:#746a61; font-size:12px; line-height:1.5; }
    .admin-media-two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    .admin-range-group { display:grid; gap:9px; margin-top:12px; }
    .admin-range-row { display:grid; grid-template-columns:90px 1fr 48px; gap:10px; align-items:center; font-size:12px; color:#5e554c; }
    .admin-range-row input[type=range] { width:100%; accent-color:#2a241f; }
    .admin-crop-preview, .admin-mockup-preview {
      position:relative; width:100%; min-height:240px; border:1px solid #ddd3c7; border-radius:14px;
      background:#f6f2eb center/cover no-repeat; overflow:hidden;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
    }
    .admin-crop-preview { display:grid; place-items:center; background-image:linear-gradient(45deg,#efe8de 25%,transparent 25%,transparent 75%,#efe8de 75%,#efe8de),linear-gradient(45deg,#efe8de 25%,transparent 25%,transparent 75%,#efe8de 75%,#efe8de); background-size:18px 18px; background-position:0 0,9px 9px; }
    .admin-crop-art {
      width:76%; aspect-ratio:4/5; border:1px solid rgba(80,64,48,.14); background:#fff center/var(--product-art-size,100% auto) no-repeat;
      background-position:var(--product-art-position,50% 50%); box-shadow:0 12px 22px rgba(54,40,27,.09); overflow:hidden;
    }
    .admin-mockup-overlay { position:absolute; }
    .admin-mockup-frame, .mockup-frame-shell {
      position:relative; width:100%; height:100%; overflow:hidden; isolation:isolate;
      background:var(--frame-surface,#4b3a2d); box-shadow:var(--frame-shadow,0 10px 22px rgba(49,37,27,.18));
    }
    .admin-mockup-frame::before, .admin-mockup-frame::after,
    .mockup-frame-shell::before, .mockup-frame-shell::after {
      content:""; position:absolute; inset:0; pointer-events:none;
    }
    .admin-mockup-frame::before, .mockup-frame-shell::before { background:var(--frame-overlay,linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.1) 16%, rgba(255,255,255,0) 30%, rgba(0,0,0,.08) 78%, rgba(0,0,0,.2) 100%)); }
    .admin-mockup-frame::after, .mockup-frame-shell::after { box-shadow:inset 2px 2px 0 rgba(255,255,255,.18), inset -3px -3px 0 rgba(0,0,0,.2), inset 10px 10px 14px rgba(255,255,255,.05), inset -10px -10px 14px rgba(0,0,0,.07); }
    .admin-mockup-art, .mockup-art, .mockup-art-plain {
      position:relative; z-index:1; width:100%; height:100%; background:#fff center/cover no-repeat;
    }
    .mockup-art-plain { box-shadow:0 6px 16px rgba(47,35,25,.12); }
    .product-mockup {
      position:relative; width:100%; height:100%; border-radius:12px; overflow:hidden; background:#ece5db center/cover no-repeat;
      border:1px solid rgba(97,77,56,.08);
    }
    .product-mockup-placement { position:absolute; }
    .listing-scene-stage, .thumb-scene-stage {
      position:absolute;
      transform:translate(-50%,-50%);
      background-position:center;
      background-size:100% 100%;
      background-repeat:no-repeat;
      max-width:none;
      max-height:none;
      border-radius:12px;
    }
    .thumb-scene-stage { border-radius:10px; }

    .listing-real-mockup, .thumb-real-mockup { background-color:#ece5db; }
    @media (max-width:900px){
      .developer-shell.open { grid-template-columns:1fr; }
      .developer-sidebar { display:none; }
      .developer-topbar { padding:14px; }
      .developer-content { padding:14px; }
      .admin-grid, .admin-row, .admin-list-layout, .admin-media-two-col { grid-template-columns:1fr; }
      .admin-size-row { grid-template-columns:1fr 1fr; }
      .admin-product-image-row { grid-template-columns:1fr; }
      .admin-product-list { max-height:240px; }
    }



    /* v54 — cleaner header + category transition */
    .announcement { display:none !important; }
    .site-header {
      padding:20px clamp(22px,4vw,68px);
      min-height:82px;
    }
    .nav { gap:10px; }
    .nav button {
      padding:12px 20px;
      min-height:46px;
      font-size:16px;
      font-weight:650;
      border-radius:999px;
    }
    .nav button:hover,
    .nav button.active {
      background:#f1e8dd;
    }
    .brand { font-size:16px; }
    .brand-mark { width:40px; height:40px; font-size:21px; }
    .icon-btn { min-width:46px; height:46px; }

    .home-categories-blend {
      position:relative;
      width:100%;
      max-width:none;
      margin:0;
      padding:78px 0 92px;
      background:
        linear-gradient(180deg,
          #3a2d23 0%,
          #5a4332 72px,
          #a88c6d 165px,
          #ded1c2 270px,
          #f3ece3 390px,
          #f3ece3 100%);
      overflow:hidden;
    }
    .home-categories-blend::before {
      content:"";
      position:absolute;
      inset:0 0 auto;
      height:220px;
      pointer-events:none;
      background:radial-gradient(circle at 50% 0%, rgba(215,173,112,.18), transparent 55%);
    }
    .home-categories-blend > .container { position:relative; z-index:1; }
    .home-categories-blend .section-head { margin-bottom:28px; }
    .home-categories-blend .section-head h2 { color:#fff; text-shadow:0 4px 18px rgba(32,22,15,.2); }
    .home-categories-blend .section-head p { color:rgba(255,255,255,.78); }
    .home-categories-blend .eyebrow { color:#edc996; }
    .home-categories-blend .category-card {
      border-color:rgba(144,113,81,.20);
      box-shadow:0 16px 36px rgba(50,36,24,.10);
    }

    @media (max-width:760px){
      .site-header{min-height:70px;padding:12px 14px;}
      .nav{gap:4px;}
      .nav button{font-size:14px;padding:10px 12px;min-height:40px;}
      .home-categories-blend{padding:56px 0 68px;background:linear-gradient(180deg,#3a2d23 0%,#70543e 85px,#d4c5b4 230px,#f3ece3 330px,#f3ece3 100%);}
    }



    /* v61 — slightly deeper, warmer homepage backgrounds below the hero */
    #homeView { background:#f3ece3; }
    #homeView .home-section-soft { background:#eee4d8; }
    #homeView > .container.home-section { background:transparent; }

    /* v55 — header visually blended into the homepage banner */
    .nav button {
      font-size:17px;
      font-weight:700;
      padding:13px 22px;
      min-height:48px;
    }

    body:has(#homeView.active) .site-header {
      position:absolute;
      top:0;
      left:0;
      right:0;
      z-index:60;
      background:linear-gradient(180deg, rgba(35,27,21,.88) 0%, rgba(58,45,35,.64) 100%);
      border-bottom:1px solid rgba(255,255,255,.12);
      box-shadow:none;
      backdrop-filter:blur(16px) saturate(1.08);
      -webkit-backdrop-filter:blur(16px) saturate(1.08);
    }
    body:has(#homeView.active) .site-header .brand,
    body:has(#homeView.active) .site-header .nav button,
    body:has(#homeView.active) .site-header .icon-btn {
      color:#fff;
    }
    body:has(#homeView.active) .site-header .brand-mark {
      color:#fff;
      border-color:rgba(255,255,255,.72);
      background:rgba(255,255,255,.05);
    }
    body:has(#homeView.active) .site-header .nav button {
      background:transparent;
      text-shadow:0 2px 10px rgba(0,0,0,.18);
    }
    body:has(#homeView.active) .site-header .nav button:hover {
      background:rgba(255,255,255,.10);
    }
    body:has(#homeView.active) .site-header .nav button.active {
      background:rgba(205,163,101,.20);
      box-shadow:inset 0 0 0 1px rgba(231,194,139,.28);
      color:#fff4e4;
    }
    body:has(#homeView.active) .site-header .icon-btn {
      background:rgba(255,255,255,.07);
      border-color:rgba(255,255,255,.24);
    }
    body:has(#homeView.active) .site-header .icon-btn:hover {
      background:rgba(255,255,255,.13);
    }
    body:has(#homeView.active) .site-header .cart-count {
      background:#d0a261;
      color:#2d2118;
    }

    @media (max-width:760px){
      .nav button{font-size:15px;padding:10px 13px;min-height:42px;}
      body:has(#homeView.active) .site-header{
        background:linear-gradient(180deg,rgba(35,27,21,.92),rgba(58,45,35,.70));
      }
    }

    /* v56 — keep the blended header clear of hero copy */
    body:has(#homeView.active) .basmah-tadween-hero {
      min-height:820px;
    }
    body:has(#homeView.active) .basmah-tadween-hero-content {
      padding-top:158px;
      padding-bottom:64px;
    }
    body:has(#homeView.active) .basmah-tadween-kicker {
      margin-top:0;
    }

    /* v56 — premium scroll reveal motion */
    #homeView .reveal-on-scroll {
      opacity:0;
      transform:translate3d(0,34px,0) scale(.985);
      filter:blur(5px);
      transition:
        opacity .66s cubic-bezier(.2,.7,.2,1),
        transform .66s cubic-bezier(.2,.7,.2,1),
        filter .62s ease;
      transition-delay:var(--reveal-delay,0ms);
      will-change:opacity,transform,filter;
    }
    #homeView .reveal-on-scroll.reveal-left { transform:translate3d(-42px,18px,0) scale(.985); }
    #homeView .reveal-on-scroll.reveal-right { transform:translate3d(42px,18px,0) scale(.985); }
    #homeView .reveal-on-scroll.reveal-scale { transform:translate3d(0,22px,0) scale(.94); }
    #homeView .reveal-on-scroll.reveal-visible {
      opacity:1;
      transform:translate3d(0,0,0) scale(1);
      filter:blur(0);
    }
    #homeView .home-feature-card.reveal-visible,
    #homeView .home-step.reveal-visible,
    #homeView .category-card.reveal-visible {
      animation:basmahSettle .62s cubic-bezier(.2,.75,.2,1) both;
      animation-delay:var(--reveal-delay,0ms);
    }
    @keyframes basmahSettle {
      0% { transform:translateY(24px) scale(.97); }
      62% { transform:translateY(-4px) scale(1.012); }
      100% { transform:translateY(0) scale(1); }
    }
    #homeView .home-room-scene.reveal-visible {
      animation:basmahSceneIn .86s cubic-bezier(.2,.75,.2,1) both;
    }
    @keyframes basmahSceneIn {
      from { opacity:.2; transform:translateY(26px) rotate(.7deg) scale(.96); }
      to { opacity:1; transform:translateY(0) rotate(0) scale(1); }
    }
    #homeView .home-story-point.reveal-visible b {
      animation:basmahCheckPop .41s cubic-bezier(.2,.8,.2,1) both;
      animation-delay:calc(var(--reveal-delay,0ms) + 100ms);
    }
    @keyframes basmahCheckPop {
      0% { transform:scale(.45) rotate(-18deg); }
      70% { transform:scale(1.14) rotate(3deg); }
      100% { transform:scale(1) rotate(0); }
    }
    #homeView .home-cta.reveal-visible {
      animation:basmahCtaIn .78s cubic-bezier(.2,.75,.2,1) both;
    }
    @keyframes basmahCtaIn {
      from { opacity:0; transform:translateY(38px) scale(.975); box-shadow:0 0 0 rgba(0,0,0,0); }
      to { opacity:1; transform:none; box-shadow:0 26px 70px rgba(34,25,19,.15); }
    }
    @media (max-width:760px){
      body:has(#homeView.active) .basmah-tadween-hero{min-height:790px;}
      body:has(#homeView.active) .basmah-tadween-hero-content{padding-top:128px;padding-bottom:48px;}
    }
    @media (prefers-reduced-motion:reduce){
      #homeView .reveal-on-scroll,
      #homeView .reveal-on-scroll.reveal-left,
      #homeView .reveal-on-scroll.reveal-right,
      #homeView .reveal-on-scroll.reveal-scale{
        opacity:1!important; transform:none!important; filter:none!important; transition:none!important; animation:none!important;
      }
    }

/* Source: basmah-v60-home-hero-image */
/* v60 — user-supplied hero image; homepage hero only */
#homeView .basmah-tadween-hero .hero-art-backdrop {
  background:
    linear-gradient(180deg, rgba(36,27,21,.16) 0%, rgba(36,27,21,.16) 100%),
    url("../media/4507a4be6226b4.webp") center center / cover no-repeat !important;
}

/* Source: basmah-v64-hero-background-nudge */
/* v64 — nudge only the homepage hero background slightly right; keep hero dimensions/content unchanged */
@media (min-width: 900px) {
  #homeView .basmah-tadween-hero .hero-art-backdrop {
    transform: translateX(18px) scale(1.025);
    transform-origin: center center;
  }
}

/* Source: basmah-v68-customer-service-modal */
.service-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(30, 26, 22, .62);
    backdrop-filter: blur(8px);
  }
  .service-modal-backdrop.is-open { display: flex; }
  .service-modal {
    position: relative;
    width: min(760px, 100%);
    max-height: min(82vh, 760px);
    overflow: auto;
    border: 1px solid #e5d9cc;
    border-radius: 26px;
    background: #fffdf9;
    color: #26231f;
    box-shadow: 0 34px 90px rgba(23, 19, 16, .28);
    animation: serviceModalIn .22s ease;
  }
  @keyframes serviceModalIn {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
  .service-modal-head {
    padding: 34px 70px 24px 36px;
    border-bottom: 1px solid #eadfd4;
    background: linear-gradient(135deg, #fffdf9 0%, #f4ece2 100%);
  }
  .service-modal-kicker {
    margin-bottom: 10px;
    color: #765a43;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  .service-modal-title {
    margin: 0;
    font: 500 clamp(32px, 5vw, 46px)/1.02 Georgia, "Times New Roman", serif;
    letter-spacing: -.025em;
    color: #26231f;
  }
  .service-modal-intro {
    max-width: 610px;
    margin: 13px 0 0;
    color: #756f68;
    font-size: 15px;
    line-height: 1.65;
  }
  .service-modal-close {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #ddd1c4;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: #26231f;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  .service-modal-close:hover { background: #26231f; color: #fff; border-color: #26231f; }
  .service-modal-body { padding: 28px 36px 36px; }
  .service-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
  .service-info-card {
    padding: 18px 19px;
    border: 1px solid #e8ddd2;
    border-radius: 17px;
    background: #fff;
  }
  .service-info-card.wide { grid-column: 1 / -1; }
  .service-info-card strong {
    display: block;
    margin-bottom: 6px;
    color: #332b25;
    font-size: 14px;
  }
  .service-info-card p {
    margin: 0;
    color: #756f68;
    font-size: 14px;
    line-height: 1.62;
  }
  .service-bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
  .service-bullets li {
    position: relative;
    padding-left: 27px;
    color: #6f6861;
    font-size: 14px;
    line-height: 1.62;
  }
  .service-bullets li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #2d2824;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
  }
  .service-note {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 15px;
    background: #f4ece2;
    color: #685b50;
    font-size: 13px;
    line-height: 1.6;
  }
  .service-contact-list { display: grid; gap: 10px; }
  .service-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #eadfd4;
  }
  .service-contact-row:last-child { border-bottom: 0; }
  .service-contact-row span { color: #756f68; font-size: 13px; }
  .service-contact-row a { color: #26231f; font-weight: 750; text-align: right; }
  .service-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
  .service-modal-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 17px;
    border: 1px solid #26231f;
    border-radius: 999px;
    background: #26231f;
    color: #fff;
    font-size: 13px;
    font-weight: 750;
  }
  .service-modal-actions a.secondary { background: transparent; color: #26231f; }
  body.service-modal-open { overflow: hidden; }

  /* v68 — Delivery and Returns: show the full popup without an internal scrollbar */
  .service-modal[data-service-type="delivery"],
  .service-modal[data-service-type="returns"] {
    width: min(920px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
  }
  .service-modal[data-service-type="delivery"] .service-modal-head,
  .service-modal[data-service-type="returns"] .service-modal-head {
    padding: 25px 68px 18px 30px;
  }
  .service-modal[data-service-type="delivery"] .service-modal-intro,
  .service-modal[data-service-type="returns"] .service-modal-intro {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.5;
  }
  .service-modal[data-service-type="delivery"] .service-modal-body,
  .service-modal[data-service-type="returns"] .service-modal-body {
    padding: 18px 30px 24px;
  }
  .service-modal[data-service-type="delivery"] .service-modal-grid,
  .service-modal[data-service-type="returns"] .service-modal-grid {
    gap: 10px;
  }
  .service-modal[data-service-type="delivery"] .service-info-card,
  .service-modal[data-service-type="returns"] .service-info-card {
    padding: 13px 15px;
    border-radius: 14px;
  }
  .service-modal[data-service-type="delivery"] .service-info-card strong,
  .service-modal[data-service-type="returns"] .service-info-card strong {
    margin-bottom: 4px;
    font-size: 13px;
  }
  .service-modal[data-service-type="delivery"] .service-info-card p,
  .service-modal[data-service-type="returns"] .service-info-card p {
    font-size: 12.5px;
    line-height: 1.48;
  }
  .service-modal[data-service-type="delivery"] .service-note,
  .service-modal[data-service-type="returns"] .service-note {
    margin-top: 12px;
    padding: 12px 15px;
    font-size: 12px;
    line-height: 1.48;
  }

  @media (max-width: 640px) {
    .service-modal-backdrop { padding: 12px; align-items: flex-end; }
    .service-modal { max-height: 88vh; border-radius: 22px 22px 12px 12px; }
    .service-modal[data-service-type="delivery"],
    .service-modal[data-service-type="returns"] {
      width: 100%;
      max-height: none;
      overflow: visible;
    }
    .service-modal-head { padding: 28px 58px 20px 22px; }
    .service-modal-body { padding: 22px; }
    .service-modal-close { top: 16px; right: 16px; width: 38px; height: 38px; }
    .service-modal-grid { grid-template-columns: 1fr; }
    .service-info-card.wide { grid-column: auto; }
    .service-contact-row { align-items: flex-start; flex-direction: column; gap: 4px; }
    .service-contact-row a { text-align: left; }
  }

/* Source: basmah-v71-hero-note-full-center */
/* v71 — center the Basmah signature across the full hero, not just the left content column */
#homeView .basmah-tadween-hero .hero-note-full-center {
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:5;
  width:max-content;
  max-width:calc(100% - 40px);
  margin:0;
  text-align:center;
  color:rgba(255,255,255,.65);
  font-size:13px;
  white-space:nowrap;
}
@media (max-width:600px) {
  #homeView .basmah-tadween-hero .hero-note-full-center {
    bottom:14px;
    max-width:calc(100% - 24px);
    white-space:normal;
  }
}

/* Source: basmah-v72-qatar-hero-emphasis */
/* v72 — emphasize Basmah as a Qatari brand and local production without changing hero dimensions */
#homeView .basmah-tadween-kicker {
  letter-spacing:.09em;
  text-transform:uppercase;
  background:rgba(140, 88, 54, .30);
  border-color:rgba(236, 205, 166, .78);
}
#homeView .basmah-tadween-hero-content > p strong {
  display:inline;
  color:#fff7eb;
  font-weight:800;
}

/* Source: basmah-v74-global-search */
/* v74 — global catalogue search from the header */
body.global-search-open { overflow:hidden; }
.global-search-backdrop {
  position:fixed; inset:0; z-index:12000; display:none; place-items:start center;
  padding:clamp(72px,10vh,110px) 18px 24px; background:rgba(25,21,18,.66);
  backdrop-filter:blur(9px);
}
.global-search-backdrop.is-open { display:grid; }
.global-search-modal {
  width:min(920px,100%); max-height:min(760px,calc(100vh - 105px)); overflow:hidden;
  display:flex; flex-direction:column; background:#fffdf9; color:#26231f;
  border:1px solid #dfd2c3; border-radius:26px; box-shadow:0 30px 85px rgba(22,17,13,.30);
}
.global-search-head { display:flex; align-items:center; gap:14px; padding:22px 22px 14px; }
.global-search-title { flex:1; min-width:0; }
.global-search-title .eyebrow { margin-bottom:3px; }
.global-search-title h3 { font-size:27px; }
.global-search-close {
  width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center;
  border:1px solid #ded2c5; border-radius:999px; background:#fff; color:#26231f;
  font-size:24px; line-height:1;
}
.global-search-box { padding:0 22px 16px; }
.global-search-input-wrap {
  display:flex; align-items:center; gap:11px; padding:0 17px; background:#fff;
  border:1px solid #d9cbbb; border-radius:16px; box-shadow:0 5px 18px rgba(54,42,31,.04);
}
.global-search-input-wrap span { font-size:22px; color:#756f68; }
.global-search-input {
  width:100%; height:56px; border:0; outline:0; background:transparent; color:#26231f;
  font-size:17px;
}
.global-search-meta { display:flex; justify-content:space-between; gap:12px; padding:0 24px 11px; color:#837a72; font-size:12px; }
.global-search-results {
  overflow:auto; padding:0 16px 18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  scrollbar-width:thin;
}
.global-search-result {
  width:100%; display:grid; grid-template-columns:82px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:10px; border:1px solid #e8ded3; border-radius:16px; background:#fff; color:#26231f;
  text-align:left; transition:.18s ease;
}
.global-search-result:hover,.global-search-result:focus-visible { border-color:#bca58d; box-shadow:0 9px 24px rgba(54,42,31,.08); transform:translateY(-1px); outline:0; }
.global-search-thumb { height:72px; border-radius:11px; overflow:hidden; background:#eee5da; }
.global-search-thumb .product-visual { width:100%; height:100%; min-height:0; border-radius:0; pointer-events:none; }
.global-search-thumb > * { width:100% !important; height:100% !important; min-height:0 !important; margin:0 !important; }
.global-search-thumb .product-mockup,.global-search-thumb .mini-frame { width:100% !important; height:100% !important; max-width:none !important; }
.global-search-copy { min-width:0; }
.global-search-copy strong { display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.global-search-copy span { display:block; margin-top:4px; color:#81776e; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.global-search-price { color:#654a35; font-size:12px; font-weight:800; white-space:nowrap; }
.global-search-empty { grid-column:1/-1; padding:44px 18px; text-align:center; color:#756f68; }
.global-search-empty strong { display:block; color:#26231f; font-size:19px; margin-bottom:5px; }
@media(max-width:680px){
  .global-search-backdrop{padding:68px 10px 10px;align-items:start;}
  .global-search-modal{border-radius:20px;max-height:calc(100vh - 78px);}
  .global-search-head{padding:17px 15px 12px;}
  .global-search-box{padding:0 15px 12px;}
  .global-search-meta{padding:0 17px 9px;}
  .global-search-results{grid-template-columns:1fr;padding:0 10px 12px;}
  .global-search-result{grid-template-columns:68px minmax(0,1fr) auto;gap:10px;}
  .global-search-thumb{height:62px;}
}

/* Source: basmah-v76-round-header-logo */
/* v76 — round Basmah logo in the shared header on every page/view */
.site-header .basmah-logo-mark {
  overflow:hidden;
  padding:0;
  border-radius:50%;
  background:#eadbc5;
  flex:0 0 auto;
}
.site-header .basmah-logo-mark img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}

/* Source: basmah-v77-header-wordmark */
/* v77 — add Arabic wordmark under Basmah in the shared header */
.brand {
  text-transform:none;
  letter-spacing:0;
}
.brand-wordmark {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
  min-width:max-content;
}
.brand-wordmark #siteBrandName {
  display:block;
  width:100%;
  text-align:center;
  font-size:16px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1;
}
.brand-wordmark .brand-arabic {
  display:block;
  width:100%;
  margin-top:4px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  color:var(--ink);
  text-align:center;
  white-space:nowrap;
  transform:scaleX(1.35);
  transform-origin:center;
}
@media (max-width:640px){
  .brand > span:last-child { display:flex; }
  .brand-wordmark #siteBrandName { font-size:14px; }
  .brand-wordmark .brand-arabic { font-size:11px; margin-top:3px; transform:scaleX(1.28); }
}

/* Source: basmah-v79-header-wordmark-tuning */
/* v80 — Arabic wordmark visually matches BASMAH width; white on Home, same color as menu elsewhere */
.site-header .brand-wordmark {
  color:var(--ink);
}
.site-header .brand-wordmark #siteBrandName {
  color:inherit;
}
.site-header .brand-wordmark .brand-arabic {
  color:inherit;
  transform:scaleX(2.05);
  transform-origin:center center;
}
body:has(#homeView.active) .site-header .brand-wordmark,
body:has(#homeView.active) .site-header .brand-wordmark #siteBrandName,
body:has(#homeView.active) .site-header .brand-wordmark .brand-arabic {
  color:#fff;
}
@media (max-width:640px){
  .site-header .brand-wordmark .brand-arabic {
    transform:scaleX(2.05);
  }
}

/* Source: basmah-v82-contact-no-scroll */
/* v83 — Contact Us: slightly larger while keeping full content visible without internal scrolling */
.service-modal[data-service-type="contact"] {
  width: min(960px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
}
.service-modal[data-service-type="contact"] .service-modal-head {
  padding: 28px 72px 20px 34px;
}
.service-modal[data-service-type="contact"] .service-modal-kicker {
  margin-bottom: 7px;
}
.service-modal[data-service-type="contact"] .service-modal-title {
  font-size: clamp(32px, 4.2vw, 43px);
}
.service-modal[data-service-type="contact"] .service-modal-intro {
  max-width: 810px;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.5;
}
.service-modal[data-service-type="contact"] .service-modal-body {
  padding: 18px 34px 26px;
}
.service-modal[data-service-type="contact"] .service-contact-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 34px;
  row-gap: 0;
}
.service-modal[data-service-type="contact"] .service-contact-row {
  min-width: 0;
  padding: 12px 0;
  gap: 12px;
}
.service-modal[data-service-type="contact"] .service-contact-row span {
  font-size: 12.5px;
}
.service-modal[data-service-type="contact"] .service-contact-row a {
  min-width: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.service-modal[data-service-type="contact"] .service-note {
  margin-top: 14px;
  padding: 13px 16px;
  font-size: 12px;
  line-height: 1.5;
}
.service-modal[data-service-type="contact"] .service-modal-actions {
  margin-top: 16px;
  gap: 9px;
}
.service-modal[data-service-type="contact"] .service-modal-actions a {
  min-height: 40px;
  padding: 10px 15px;
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .service-modal[data-service-type="contact"] {
    width: 100%;
    max-height: none;
    overflow: visible;
  }
  .service-modal[data-service-type="contact"] .service-modal-head {
    padding: 24px 58px 16px 22px;
  }
  .service-modal[data-service-type="contact"] .service-modal-body {
    padding: 14px 22px 20px;
  }
  .service-modal[data-service-type="contact"] .service-contact-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
  .service-modal[data-service-type="contact"] .service-contact-row {
    padding: 9px 0;
  }
  .service-modal[data-service-type="contact"] .service-modal-actions {
    margin-top: 10px;
  }
}

/* Source: basmah-v85-shop-alignment */
/* v85 — align the filter panel with the top of the product cards */
@media (min-width:981px){
  #shopView .filters {
    margin-top:62px;
  }
}
@media (max-width:980px){
  #shopView .filters {
    margin-top:0;
  }
}

/* Source: basmah-v88-warmer-shop */
/* v88 — warmer shop palette, scoped only to the Shop view */
#shopView {
  background:#f1e5d6;
}
#shopView .shop-hero {
  background:transparent;
}
#shopView .filters {
  background:#f9f3eb;
  border-color:#dfcdb8;
}
#shopView .shop-filter-select,
#shopView .product-toolbar select {
  background:#fffaf4;
  border-color:#dfcdb8;
}
#shopView .product-card {
  background:#fffaf4;
  border-color:#dfcdb8;
}
#shopView .product-card .product-image,
#shopView .product-card .product-media {
  background:linear-gradient(145deg,#f2e8dc,#e5d4c0);
}
#shopView .btn.soft {
  background:#efe1d1;
  border-color:#dcc5ad;
}

/* Source: basmah-v89-warmer-header */
/* v89 — warm the non-home header so it feels less white */
.site-header {
  background:rgba(245, 236, 225, .96);
  border-bottom:1px solid rgba(216, 198, 174, .92);
  box-shadow:0 10px 24px rgba(86, 66, 46, .06);
}
.site-header .nav button:hover,
.site-header .nav button.active {
  background:#eee0cf;
}
.site-header .icon-btn {
  background:#f8f0e6;
  border-color:#dcc7af;
}
.site-header .cart-count {
  box-shadow:0 2px 8px rgba(45, 33, 24, .16);
}

/* Source: basmah-v90-arabic-rtl */
/* v90 — full Arabic customer-facing website, with RTL layout while preserving existing dimensions */
html[lang="ar"], html[lang="ar"] body { direction:rtl; }
html[lang="ar"] body { text-align:right; }
html[lang="ar"] .site-header,
html[lang="ar"] .nav,
html[lang="ar"] .header-actions,
html[lang="ar"] .hero-actions,
html[lang="ar"] .card-actions,
html[lang="ar"] .service-modal-actions,
html[lang="ar"] .developer-top-actions { direction:rtl; }
html[lang="ar"] .basmah-tadween-hero-content,
html[lang="ar"] .section-head,
html[lang="ar"] .home-center-head,
html[lang="ar"] .home-feature-card,
html[lang="ar"] .home-story-copy,
html[lang="ar"] .home-step,
html[lang="ar"] .shop-category-copy,
html[lang="ar"] .product-info,
html[lang="ar"] .filters,
html[lang="ar"] .filter-group,
html[lang="ar"] .product-panel,
html[lang="ar"] .option-group,
html[lang="ar"] .cart-layout,
html[lang="ar"] .checkout-layout,
html[lang="ar"] footer,
html[lang="ar"] .service-modal,
html[lang="ar"] .global-search-modal,
html[lang="ar"] .developer-shell { text-align:right; }
html[lang="ar"] input:not([type="email"]):not([type="tel"]),
html[lang="ar"] textarea,
html[lang="ar"] select { text-align:right; }
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] #sitePhoneLink,
html[lang="ar"] #siteEmailLink,
html[lang="ar"] .price,
html[lang="ar"] .global-search-price,
html[lang="ar"] .product-code,
html[lang="ar"] [data-ltr] { direction:ltr; unicode-bidi:embed; text-align:left; }
html[lang="ar"] .global-search-input { direction:rtl; text-align:right; }
html[lang="ar"] .service-bullets { padding-right:20px; padding-left:0; }
html[lang="ar"] .brand-wordmark { direction:ltr; }
html[lang="ar"] .brand-wordmark .brand-arabic { direction:rtl; }
html[lang="ar"] .basmah-tadween-hero-note { direction:rtl; }
html[lang="ar"] .developer-sidebar { direction:rtl; }
html[lang="ar"] .developer-main { direction:rtl; }
html[lang="ar"] .service-modal-close { right:auto; left:18px; }
html[lang="ar"] .back-btn { direction:rtl; }

/* Source: basmah-v91-language-toggle-style */
/* v91 — bilingual Arabic / English language switch in the shared header */
.language-toggle {
  min-width:58px;
  height:42px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #dcc7af;
  border-radius:999px;
  background:#f8f0e6;
  color:var(--ink);
  font:700 12px/1 inherit;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.language-toggle:hover { background:#eee0cf; transform:translateY(-1px); }
body:has(#homeView.active) .site-header .language-toggle {
  color:#fff;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.28);
}
body:has(#homeView.active) .site-header .language-toggle:hover {
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.42);
}
@media (max-width:640px){
  .language-toggle{min-width:48px;height:40px;padding:0 10px;font-size:11px;}
}

/* Source: basmah-v92-arabic-header-left */
/* v92 — keep the Arabic header positioned and aligned like the English header */
html[lang="ar"] .site-header {
  direction:ltr;
  text-align:left;
}
html[lang="ar"] .site-header .brand {
  direction:ltr;
  text-align:left;
}
html[lang="ar"] .site-header .brand-wordmark {
  direction:ltr;
  align-items:flex-start;
  text-align:left;
}
html[lang="ar"] .site-header .brand-wordmark #siteBrandName,
html[lang="ar"] .site-header .brand-wordmark .brand-arabic {
  text-align:left;
}
html[lang="ar"] .site-header .brand-wordmark .brand-arabic {
  direction:rtl;
  transform-origin:left center;
}
html[lang="ar"] .site-header .nav {
  direction:ltr;
}
html[lang="ar"] .site-header .nav button {
  direction:rtl;
  text-align:left;
}
html[lang="ar"] .site-header .header-actions {
  direction:ltr;
}

/* Source: basmah-v93-arabic-home-hero-left */
/* v93 — Arabic HOME HERO copy stays on the same left side as English and is left aligned */
html[lang="ar"] #homeView .basmah-tadween-hero-content {
  direction:rtl;
  text-align:left !important;
}
html[lang="ar"] #homeView .basmah-tadween-kicker,
html[lang="ar"] #homeView .basmah-tadween-hero-content h1,
html[lang="ar"] #homeView .basmah-tadween-hero-content > p {
  direction:rtl;
  text-align:left !important;
  margin-left:0;
  margin-right:auto;
}
html[lang="ar"] #homeView .basmah-tadween-actions,
html[lang="ar"] #homeView .basmah-tadween-benefits,
html[lang="ar"] #homeView .basmah-tadween-stats {
  direction:ltr;
  justify-content:flex-start;
  margin-left:0;
  margin-right:auto;
}
html[lang="ar"] #homeView .basmah-tadween-actions .btn,
html[lang="ar"] #homeView .basmah-tadween-benefits span,
html[lang="ar"] #homeView .basmah-tadween-stat {
  direction:rtl;
}
@media (min-width:1200px) {
  html[lang="ar"] #homeView .basmah-tadween-hero-content {
    margin-left:clamp(36px,5vw,86px) !important;
    margin-right:auto !important;
  }
}
@media (max-width:760px) {
  html[lang="ar"] #homeView .basmah-tadween-hero-content,
  html[lang="ar"] #homeView .basmah-tadween-hero-content h1,
  html[lang="ar"] #homeView .basmah-tadween-hero-content > p {
    text-align:left !important;
  }
}

/* Source: basmah-v96-footer-contact-fix */
/* v96 — remove footer subscribe and keep Arabic contact phone/email aligned left */
html[lang="ar"] footer .footer-contact #sitePhoneLink,
html[lang="ar"] footer .footer-contact #siteEmailLink {
  display:block;
  direction:ltr;
  unicode-bidi:embed;
  text-align:left;
  margin-left:0;
  margin-right:auto;
  width:max-content;
}

/* Source: basmah-v97-arabic-hero-background-left-indent */
/* v97 — Arabic hero gets the new room background and the Arabic copy is pushed further left */
html[lang="ar"] #homeView .basmah-tadween-hero .hero-art-backdrop {
  background:
    linear-gradient(180deg, rgba(36,27,21,.16) 0%, rgba(36,27,21,.16) 100%),
    url("../media/ebf40c3f18de06.webp") center center / cover no-repeat !important;
  transform: translateX(0) scale(1.03) !important;
  filter: saturate(.98) contrast(1.02) !important;
}
html[lang="ar"] #homeView .basmah-tadween-hero-content {
  width:min(1140px,calc(100% - 24px)) !important;
  padding-left:12px !important;
  padding-right:12px !important;
}
@media (min-width:1200px) {
  html[lang="ar"] #homeView .basmah-tadween-hero-content {
    margin-left:clamp(10px,2vw,26px) !important;
    margin-right:auto !important;
  }
}
@media (max-width:760px) {
  html[lang="ar"] #homeView .basmah-tadween-hero-content {
    width:min(100%,calc(100% - 20px)) !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* Source: basmah-v98-arabic-right-align-all */
/* v98 — Arabic interface: all Arabic copy is right aligned, including the hero */
html[lang="ar"] body,
html[lang="ar"] main,
html[lang="ar"] section,
html[lang="ar"] article,
html[lang="ar"] footer,
html[lang="ar"] .section-head,
html[lang="ar"] .home-center-head,
html[lang="ar"] .home-feature-card,
html[lang="ar"] .home-story-copy,
html[lang="ar"] .home-step,
html[lang="ar"] .shop-hero,
html[lang="ar"] .shop-category-copy,
html[lang="ar"] .filters,
html[lang="ar"] .filter-group,
html[lang="ar"] .product-card,
html[lang="ar"] .product-info,
html[lang="ar"] .product-panel,
html[lang="ar"] .option-group,
html[lang="ar"] .cart-layout,
html[lang="ar"] .checkout-layout,
html[lang="ar"] .service-modal,
html[lang="ar"] .global-search-modal,
html[lang="ar"] .developer-shell,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] label {
  text-align:right !important;
}

/* Home hero moves to the right and all Arabic hero copy aligns right */
html[lang="ar"] #homeView .basmah-tadween-hero-content {
  direction:rtl !important;
  text-align:right !important;
  margin-left:auto !important;
  margin-right:clamp(10px,2vw,26px) !important;
}
html[lang="ar"] #homeView .basmah-tadween-kicker,
html[lang="ar"] #homeView .basmah-tadween-hero-content h1,
html[lang="ar"] #homeView .basmah-tadween-hero-content > p {
  direction:rtl !important;
  text-align:right !important;
  margin-left:auto !important;
  margin-right:0 !important;
}
html[lang="ar"] #homeView .basmah-tadween-actions,
html[lang="ar"] #homeView .basmah-tadween-benefits,
html[lang="ar"] #homeView .basmah-tadween-stats {
  direction:rtl !important;
  justify-content:flex-start !important;
  margin-left:auto !important;
  margin-right:0 !important;
}
html[lang="ar"] #homeView .basmah-tadween-actions .btn,
html[lang="ar"] #homeView .basmah-tadween-benefits span,
html[lang="ar"] #homeView .basmah-tadween-stat,
html[lang="ar"] #homeView .basmah-tadween-stat span,
html[lang="ar"] #homeView .basmah-tadween-stat strong {
  direction:rtl !important;
  text-align:right !important;
}

/* Footer/contact Arabic section fully aligned to the right */
html[lang="ar"] footer .footer-grid > div,
html[lang="ar"] footer .footer-contact {
  text-align:right !important;
}
html[lang="ar"] footer .footer-contact #sitePhoneLink,
html[lang="ar"] footer .footer-contact #siteEmailLink,
html[lang="ar"] footer .footer-contact #siteInstagramLink,
html[lang="ar"] footer .footer-contact #siteLocation {
  direction:ltr !important;
  unicode-bidi:embed;
  text-align:right !important;
  margin-left:auto !important;
  margin-right:0 !important;
  width:max-content;
}

html[lang="ar"] input:not([type="email"]):not([type="tel"]),
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] .global-search-input {
  direction:rtl !important;
  text-align:right !important;
}

/* Source: basmah-v101-arabic-header-flip-fixed */
/* v101 — clean mirrored Arabic header without changing the English header */
@media (min-width:981px){
  html[lang="ar"] .site-header{
    direction:ltr !important;
    grid-template-columns:auto 1fr auto !important;
    grid-template-areas:"actions nav brand" !important;
  }
  html[lang="ar"] .site-header .brand{
    grid-area:brand !important;
    justify-self:end !important;
    direction:ltr !important;
    text-align:left !important;
  }
  html[lang="ar"] .site-header .nav{
    grid-area:nav !important;
    justify-self:center !important;
    direction:rtl !important;
  }
  html[lang="ar"] .site-header .header-actions{
    grid-area:actions !important;
    justify-self:start !important;
    direction:rtl !important;
  }
  html[lang="ar"] .site-header .mobile-menu{
    display:none !important;
  }
}

/* On tablet/mobile mirror the English mobile header cleanly:
   actions left, brand centered, menu right. */
@media (max-width:980px){
  html[lang="ar"] .site-header{
    direction:ltr !important;
    grid-template-columns:auto 1fr auto !important;
    grid-template-areas:"actions brand menu" !important;
  }
  html[lang="ar"] .site-header .header-actions{
    grid-area:actions !important;
    justify-self:start !important;
    direction:rtl !important;
  }
  html[lang="ar"] .site-header .brand{
    grid-area:brand !important;
    justify-self:center !important;
    direction:ltr !important;
  }
  html[lang="ar"] .site-header .mobile-menu{
    grid-area:menu !important;
    justify-self:end !important;
  }
  html[lang="ar"] .site-header .nav{
    display:none !important;
  }
}

/* Source: basmah-v102-ar-hero-title-break */
html[lang="ar"] #siteHeroTitle .hero-accent{display:inline-block;}

/* Source: basmah-v103-ar-brand-logo-right */
/* v103 — in Arabic header keep the logo to the right of the BASMAH wordmark */
html[lang="ar"] .site-header .brand {
  flex-direction: row-reverse !important;
}
html[lang="ar"] .site-header .brand-wordmark {
  align-items: flex-start;
  text-align: left;
}

/* Source: basmah-v104-ar-hero-buttons-benefits-fix */
/* v104 — center Arabic hero buttons and add clearer spacing between check marks and text */
html[lang="ar"] #homeView .basmah-tadween-actions {
  justify-content:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
html[lang="ar"] #homeView .basmah-tadween-benefits {
  justify-content:center !important;
  gap:12px 24px !important;
}
html[lang="ar"] #homeView .basmah-tadween-benefits span {
  display:inline-flex;
  align-items:center;
  gap:9px;
}
html[lang="ar"] #homeView .basmah-tadween-benefits span::before {
  margin-right:0 !important;
}

/* Source: basmah-v105-ar-hero-right-align-buttons-text-center */
/* v105 — Arabic hero buttons/benefits stay on the right, while button labels stay centered */
html[lang="ar"] #homeView .basmah-tadween-actions {
  justify-content:flex-end !important;
  margin-left:auto !important;
  margin-right:0 !important;
}
html[lang="ar"] #homeView .basmah-tadween-benefits {
  justify-content:flex-end !important;
  margin-left:auto !important;
  margin-right:0 !important;
  gap:12px 24px !important;
}
html[lang="ar"] #homeView .basmah-tadween-actions .btn {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-align:center !important;
}

/* Source: basmah-v106-ar-hero-match-english-right */
/* v106 — Arabic hero mirrors the English spacing/layout, but the whole control group is anchored right */
html[lang="ar"] #homeView .basmah-tadween-actions {
  direction:ltr !important;
  width:max-content;
  max-width:100%;
  justify-content:flex-start !important;
  margin-left:auto !important;
  margin-right:0 !important;
  gap:16px !important;
}
html[lang="ar"] #homeView .basmah-tadween-actions .btn {
  direction:rtl !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-align:center !important;
  min-width:220px;
}

html[lang="ar"] #homeView .basmah-tadween-benefits {
  direction:ltr !important;
  width:max-content;
  max-width:100%;
  justify-content:flex-start !important;
  margin-left:auto !important;
  margin-right:0 !important;
  gap:9px 17px !important;
}
html[lang="ar"] #homeView .basmah-tadween-benefits span {
  direction:rtl !important;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-align:right !important;
}
html[lang="ar"] #homeView .basmah-tadween-benefits span::before {
  margin:0 !important;
}

html[lang="ar"] #homeView .basmah-tadween-stats {
  direction:ltr !important;
  width:min(680px,100%);
  margin-left:auto !important;
  margin-right:0 !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}
html[lang="ar"] #homeView .basmah-tadween-stat,
html[lang="ar"] #homeView .basmah-tadween-stat strong,
html[lang="ar"] #homeView .basmah-tadween-stat span {
  direction:rtl !important;
  text-align:center !important;
}

@media (max-width:760px){
  html[lang="ar"] #homeView .basmah-tadween-actions,
  html[lang="ar"] #homeView .basmah-tadween-benefits {
    width:100%;
    max-width:100%;
  }
  html[lang="ar"] #homeView .basmah-tadween-actions {
    justify-content:flex-end !important;
  }
  html[lang="ar"] #homeView .basmah-tadween-benefits {
    justify-content:flex-end !important;
  }
  html[lang="ar"] #homeView .basmah-tadween-stats {
    grid-template-columns:1fr !important;
    width:min(360px,100%);
  }
}

/* Source: basmah-v107-ar-contact-popup-ltr-fix */
/* v107 — fix flipped phone/Instagram text in Arabic Contact Us popup only */
html[lang="ar"] .service-modal[data-service-type="contact"] .service-contact-row a {
  direction:ltr !important;
  unicode-bidi:embed !important;
  text-align:right !important;
  margin-left:auto;
}

/* Source: basmah-v108-ar-service-bullets-right */
/* v108 — move Arabic service/care popup check marks to the right side */
html[lang="ar"] .service-bullets li {
  padding-left: 0 !important;
  padding-right: 27px !important;
}
html[lang="ar"] .service-bullets li::before {
  left: auto !important;
  right: 0 !important;
}

/* Source: basmah-v109-ar-hero-order-flip */
/* v109 — in Arabic hero, keep the first item on the right: Explore first, and 8 collections first */
html[lang="ar"] #homeView .basmah-tadween-actions {
  flex-direction: row-reverse !important;
}
html[lang="ar"] #homeView .basmah-tadween-benefits {
  flex-direction: row-reverse !important;
}
html[lang="ar"] #homeView .basmah-tadween-stats {
  direction: rtl !important;
}
html[lang="ar"] #homeView .basmah-tadween-stats .basmah-tadween-stat,
html[lang="ar"] #homeView .basmah-tadween-benefits span,
html[lang="ar"] #homeView .basmah-tadween-actions .btn {
  direction: rtl !important;
}

/* Source: basmah-v110-ar-brand-arabic-centered */
/* v110 — in Arabic mode, keep بصمة centered underneath BASMAH */
html[lang="ar"] .site-header .brand-wordmark {
  align-items:center !important;
  text-align:center !important;
}
html[lang="ar"] .site-header .brand-wordmark #siteBrandName,
html[lang="ar"] .site-header .brand-wordmark .brand-arabic {
  width:100%;
  text-align:center !important;
}
html[lang="ar"] .site-header .brand-wordmark .brand-arabic {
  transform-origin:center center !important;
}

/* Source: basmah-v111-live-arabic-editor */
/* v111 — live Arabic translation editor inside the Developer dashboard */
.translation-editor-shell{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:16px;align-items:start}
.translation-preview-card,.translation-edit-card{background:#fff;border:1px solid #ded6cb;border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(62,49,37,.04)}
.translation-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid #e7dfd5;background:#fbf8f4}
.translation-preview-toolbar .left,.translation-preview-toolbar .right{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.translation-mini-btn{border:1px solid #d7cec3;background:#fff;color:#2a241f;border-radius:9px;padding:8px 10px;font:700 11px/1 inherit;cursor:pointer}
.translation-mini-btn.active,.translation-mini-btn:hover{background:#2a241f;color:#fff;border-color:#2a241f}
.translation-preview-wrap{position:relative;height:calc(100vh - 210px);min-height:570px;background:#e9e1d7}
.translation-preview-frame{display:block;width:100%;height:100%;border:0;background:#fff;overscroll-behavior:contain}.translation-preview-wrap{overscroll-behavior:contain}
.translation-preview-hint{padding:9px 14px;border-top:1px solid #e7dfd5;color:#756b62;font-size:11px;line-height:1.45;background:#fbf8f4}
.translation-edit-card{position:sticky;top:92px;padding:17px}
.translation-edit-card h3{margin:0 0 6px;font-size:17px}
.translation-selected-badge{display:inline-flex;margin:0 0 14px;padding:6px 9px;border-radius:999px;background:#efe7dc;color:#6b5d50;font-size:10px;font-weight:800}
.translation-source-box{padding:11px 12px;border-radius:10px;background:#f6f2ec;border:1px solid #e4dbd0;color:#5f554c;font-size:12px;line-height:1.5;min-height:43px;white-space:pre-wrap;word-break:break-word}
.translation-arabic-input{width:100%;min-height:130px;border:1px solid #d9d0c5;border-radius:11px;padding:11px 12px;resize:vertical;font:600 15px/1.7 Tahoma,Arial,sans-serif;direction:rtl;text-align:right;color:#28221d;background:#fff}
.translation-edit-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.translation-empty{padding:16px;border:1px dashed #ccbfb1;border-radius:12px;background:#faf7f3;color:#7a7067;font-size:12px;line-height:1.6}
.translation-count{margin-top:12px;color:#7c7269;font-size:11px}
@media(max-width:1050px){.translation-editor-shell{grid-template-columns:1fr}.translation-edit-card{position:static}.translation-preview-wrap{height:620px}}

/* Source: basmah-v113-wall-visualizer */
/* v113 — reusable product wall visualizer, shared by English and Arabic */
.wall-try-entry{margin-top:22px;padding:15px 16px;border:1px solid #d9cbb9;border-radius:18px;background:linear-gradient(135deg,#faf4ec,#f1e5d6);display:flex;align-items:center;justify-content:space-between;gap:16px}.wall-try-entry-copy{display:flex;align-items:center;gap:12px;min-width:0}.wall-try-entry-copy>span:last-child{display:grid;gap:3px}.wall-try-entry-copy strong{font-size:14px;color:var(--ink)}.wall-try-entry-copy small{font-size:12px;line-height:1.45;color:var(--muted)}.wall-try-entry-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:#2b2621;color:#fff;font-size:20px}.wall-try-entry-button{flex:0 0 auto;white-space:nowrap}.wall-visualizer-backdrop{position:fixed;inset:0;z-index:10050;background:rgba(25,20,16,.72);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:22px}.wall-visualizer-backdrop.is-open{display:flex}.wall-visualizer-modal{position:relative;width:min(1240px,calc(100vw - 44px));max-height:calc(100vh - 44px);overflow:auto;border-radius:28px;background:#fbf7f1;box-shadow:0 32px 90px rgba(15,10,7,.34)}.wall-visualizer-head{padding:30px 72px 20px 32px;border-bottom:1px solid #e6d9ca}.wall-visualizer-kicker{margin-bottom:6px;color:#9a7047;font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.wall-visualizer-head h2{font-size:clamp(31px,3.7vw,48px);line-height:1.04}.wall-visualizer-head p{max-width:850px;margin:9px 0 0;font-size:14px;line-height:1.6}.wall-visualizer-close{position:absolute;z-index:4;right:22px;top:20px;width:42px;height:42px;border:1px solid #d8c9b8;border-radius:50%;background:#fff;color:#28231f;font-size:25px;line-height:1}.wall-visualizer-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:0}.wall-visualizer-canvas-column{min-width:0;padding:24px;border-right:1px solid #e6d9ca}.wall-photo-stage{position:relative;width:100%;min-height:520px;overflow:hidden;border-radius:20px;background:linear-gradient(145deg,#e8dfd3,#cdbda9);box-shadow:inset 0 0 0 1px rgba(76,58,40,.08);touch-action:none;user-select:none}.wall-photo-stage.has-photo{min-height:0;background:#d8cec1}.wall-room-image{display:block;width:100%;height:auto;max-width:100%;user-select:none;-webkit-user-drag:none;pointer-events:none}.wall-photo-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px;color:#51463d}.wall-photo-empty strong{margin-top:10px;font-size:22px}.wall-photo-empty span{max-width:440px;margin:7px 0 20px;color:#7c7066;font-size:13px;line-height:1.55}.wall-photo-empty-icon{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.72);display:grid;place-items:center;font-size:31px;box-shadow:0 8px 30px rgba(59,43,29,.1)}.wall-frame-overlay{position:absolute;left:50%;top:48%;width:32%;transform:translate(-50%,-50%);cursor:grab;touch-action:none;filter:drop-shadow(0 12px 14px rgba(20,14,9,.28));z-index:3}.wall-frame-overlay.dragging{cursor:grabbing}.wall-frame-clone-host{width:100%;height:100%;position:relative}.wall-frame-clone-host>.configured-frame{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;transform:none!important;place-self:auto!important;justify-self:auto!important;align-self:auto!important}.wall-drag-hint{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:rgba(32,27,22,.82);color:#fff;font-size:10px;white-space:nowrap;opacity:.88;pointer-events:none}.wall-photo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.wall-control-button,.wall-size-buttons button,.wall-mode-toggle button{border:1px solid #d9cdbf;background:#fff;color:#332d28;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:750}.wall-control-button:disabled{opacity:.42;cursor:not-allowed}.wall-visualizer-controls{padding:24px;background:#f7f0e7}.wall-selected-piece{display:grid;gap:4px;padding:16px;border-radius:16px;background:#fff;border:1px solid #e4d8ca}.wall-selected-piece span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#92704f}.wall-selected-piece strong{font-size:18px;color:#2b2621}.wall-selected-piece small{font-size:13px;color:#786c61}.wall-control-group{margin-top:20px}.wall-control-group>label,.wall-control-heading label{display:block;font-size:12px;font-weight:850;color:#3f3730}.wall-control-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.wall-control-heading span{font-size:12px;color:#906a46;font-weight:800}.wall-mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.wall-mode-toggle button{border-radius:12px;padding:10px 8px}.wall-mode-toggle button.active{background:#2b2621;color:#fff;border-color:#2b2621}.wall-control-group input[type="range"]{width:100%;accent-color:#2b2621}.wall-size-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.wall-size-buttons button{border-radius:12px}.wall-measure-input{display:flex;align-items:center;margin-top:8px;border:1px solid #d9cdbf;border-radius:13px;background:#fff;overflow:hidden}.wall-measure-input input{width:100%;min-width:0;border:0;background:transparent;padding:12px 13px;color:#2d2824;font:inherit;outline:0}.wall-measure-input span{padding:0 13px;color:#7d6f62;font-size:12px;font-weight:800}.wall-control-group>small{display:block;margin-top:7px;color:#807368;font-size:11px;line-height:1.45}.wall-privacy-note{display:grid;gap:4px;margin:22px 0 16px;padding:13px 14px;border-radius:14px;background:#eee2d4;color:#6a5849}.wall-privacy-note strong{font-size:12px}.wall-privacy-note span{font-size:11px;line-height:1.4}body.wall-visualizer-open{overflow:hidden}.wall-frame-overlay.wall-landscape{aspect-ratio:1.35}.wall-frame-overlay.wall-square{aspect-ratio:1}.wall-frame-overlay.wall-portrait{aspect-ratio:.75}html[lang="ar"] .wall-try-entry,html[lang="ar"] .wall-visualizer-modal,html[lang="ar"] .wall-visualizer-controls{text-align:right}html[lang="ar"] .wall-visualizer-head{padding:30px 32px 20px 72px}html[lang="ar"] .wall-visualizer-close{right:auto;left:22px}html[lang="ar"] .wall-visualizer-canvas-column{border-right:0;border-left:1px solid #e6d9ca}html[lang="ar"] .wall-selected-piece,html[lang="ar"] .wall-control-group,html[lang="ar"] .wall-privacy-note{direction:rtl}html[lang="ar"] .wall-control-heading{direction:rtl}html[lang="ar"] .wall-measure-input{direction:ltr}html[lang="ar"] #wallSelectedSize,html[lang="ar"] #wallScaleValue{direction:ltr;unicode-bidi:embed} @media(max-width:900px){.wall-visualizer-backdrop{padding:10px;align-items:flex-end}.wall-visualizer-modal{width:100%;max-height:94vh;border-radius:24px 24px 10px 10px}.wall-visualizer-body{grid-template-columns:1fr}.wall-visualizer-canvas-column{border-right:0;border-bottom:1px solid #e6d9ca;padding:15px}.wall-photo-stage{min-height:390px}.wall-visualizer-controls{padding:18px}.wall-visualizer-head{padding:24px 58px 16px 18px}.wall-visualizer-close{right:15px;top:14px}.wall-try-entry{align-items:stretch;flex-direction:column}.wall-try-entry-button{width:100%}html[lang="ar"] .wall-visualizer-head{padding:24px 18px 16px 58px}html[lang="ar"] .wall-visualizer-close{left:15px}.wall-drag-hint{display:none}} @media(max-width:560px){.wall-photo-stage{min-height:320px}.wall-mode-toggle,.wall-size-buttons{grid-template-columns:1fr}.wall-photo-actions{display:grid;grid-template-columns:1fr 1fr}.wall-photo-actions .wall-control-button:last-child{grid-column:1/-1}}

/* Source: basmah-v114-wall-free-resize */
/* v114 — full-width wall photo visualizer with direct drag + corner resize; no side controls or actual-size mode */
.wall-visualizer-body.wall-visualizer-body-simple{display:block!important}
.wall-visualizer-body-simple .wall-visualizer-canvas-column{border:0!important;padding:24px 28px 26px!important}
.wall-visualizer-body-simple .wall-photo-stage{min-height:560px}
.wall-visualizer-body-simple .wall-photo-stage.has-photo{min-height:0}
.wall-frame-overlay{outline:1px dashed rgba(255,255,255,.78);outline-offset:7px}
.wall-frame-overlay.resizing{cursor:nwse-resize!important}
.wall-resize-handle{position:absolute;z-index:8;width:18px;height:18px;padding:0;border:2px solid #fff;border-radius:50%;background:#2b2621;box-shadow:0 2px 9px rgba(0,0,0,.28);touch-action:none}
.wall-resize-nw{left:-15px;top:-15px;cursor:nwse-resize}
.wall-resize-ne{right:-15px;top:-15px;cursor:nesw-resize}
.wall-resize-sw{left:-15px;bottom:-15px;cursor:nesw-resize}
.wall-resize-se{right:-15px;bottom:-15px;cursor:nwse-resize}
.wall-photo-actions{justify-content:center;align-items:center;gap:9px;margin-top:14px}
.wall-photo-actions .wall-visualizer-done{min-width:110px;padding:9px 20px;border-radius:999px}
.wall-privacy-note.wall-privacy-note-simple{max-width:680px;margin:14px auto 0;text-align:center}
html[lang="ar"] .wall-privacy-note.wall-privacy-note-simple{text-align:center!important;direction:rtl}
@media(max-width:900px){.wall-visualizer-body-simple .wall-visualizer-canvas-column{padding:15px 15px 20px!important}.wall-visualizer-body-simple .wall-photo-stage{min-height:390px}.wall-resize-handle{width:22px;height:22px}.wall-resize-nw{left:-17px;top:-17px}.wall-resize-ne{right:-17px;top:-17px}.wall-resize-sw{left:-17px;bottom:-17px}.wall-resize-se{right:-17px;bottom:-17px}.wall-photo-actions{display:flex;justify-content:center}.wall-photo-actions .wall-control-button,.wall-photo-actions .wall-visualizer-done{flex:1 1 145px}.wall-drag-hint{display:block;font-size:9px}}
@media(max-width:560px){.wall-visualizer-body-simple .wall-photo-stage{min-height:320px}.wall-photo-actions{display:grid;grid-template-columns:1fr 1fr}.wall-photo-actions .wall-visualizer-done{grid-column:1/-1;width:100%}}

/* Source: basmah-v115-wall-free-stretch */
/* v115 — allow free width and height resizing in the wall visualizer */
.wall-frame-overlay{
  aspect-ratio:auto !important;
}
.wall-frame-overlay.resizing{
  cursor:move !important;
}

/* Source: basmah-v116-wall-frame-widths-diagonal-resize */
/* v116 — wall visualizer: 1 cm floating frame, 1.5 cm box frame, and true corner-drag resizing */
#wallFrameCloneHost > .configured-frame{
  --wall-floating-inner:3px;
}
#wallFrameCloneHost > .configured-frame.floating-frame .frame-face-front > .mount-outer > .mount-inner > .artwork-preview{
  box-shadow:
    0 0 0 var(--wall-floating-inner) rgba(0,0,0,.82),
    0 0 10px rgba(0,0,0,.14) !important;
}
.wall-resize-handle{cursor:nwse-resize}
.wall-resize-ne,.wall-resize-sw{cursor:nesw-resize}

/* Source: basmah-v117-wall-no-scroll */
/* v117 — keep the complete wall visualizer visible without scrolling */
@media (min-width:901px){
  .wall-visualizer-backdrop{
    padding:14px !important;
  }
  .wall-visualizer-modal{
    width:min(1240px,calc(100vw - 28px)) !important;
    height:calc(100vh - 28px) !important;
    max-height:none !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .wall-visualizer-head{
    flex:0 0 auto;
    padding-top:18px !important;
    padding-bottom:14px !important;
  }
  .wall-visualizer-head h2{
    font-size:clamp(28px,3vw,42px) !important;
  }
  .wall-visualizer-head p{
    margin-top:6px !important;
    line-height:1.45 !important;
  }
  .wall-visualizer-body.wall-visualizer-body-simple{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .wall-visualizer-body-simple .wall-visualizer-canvas-column{
    height:100% !important;
    min-height:0 !important;
    padding:16px 28px 14px !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .wall-photo-stage,
  .wall-visualizer-body-simple .wall-photo-stage,
  .wall-visualizer-body-simple .wall-photo-stage.has-photo{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
  }
  .wall-room-image{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
  .wall-photo-actions{
    flex:0 0 auto;
    margin-top:10px !important;
  }
  .wall-privacy-note.wall-privacy-note-simple{
    flex:0 0 auto;
    margin-top:8px !important;
    margin-bottom:0 !important;
    padding:9px 12px !important;
  }
}

/* Source: basmah-v118-custom-order-wizard */
.lang-ar{display:none!important}html[lang="ar"] .lang-en{display:none!important}html[lang="ar"] .lang-ar{display:inline!important}
.custom-order-page{padding:54px 0 90px;background:linear-gradient(180deg,#f4eadf 0,#fbf7f1 34%,#f7efe6 100%);min-height:calc(100vh - 80px)}
.custom-order-heading{max-width:980px;text-align:center;margin-bottom:30px}.custom-order-heading .eyebrow{color:#9b7046}.custom-order-heading h2{font-size:clamp(34px,4.5vw,58px);line-height:1.04;margin:8px 0 12px}.custom-order-heading p{max-width:760px;margin:0 auto;color:#75695e;line-height:1.7;font-size:14px}
.custom-order-layout{display:grid;grid-template-columns:minmax(380px,.92fr) minmax(520px,1.08fr);gap:26px;align-items:start}.custom-preview-panel,.custom-wizard-panel{border:1px solid #dfd0bf;border-radius:26px;background:rgba(255,252,247,.94);box-shadow:0 18px 48px rgba(65,47,31,.08)}.custom-preview-panel{padding:20px;position:sticky;top:22px}.custom-preview-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;color:#6e6257;font-size:12px;font-weight:800}.custom-preview-topline strong{direction:ltr;unicode-bidi:embed;color:#2a241f}
.custom-preview-stage{position:relative;display:grid;place-items:center;min-height:530px;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 38%,#f6f0e7 0,#e5d8c8 62%,#cdbba6 100%);box-shadow:inset 0 0 0 1px rgba(70,52,37,.08)}.custom-preview-empty{display:grid;place-items:center;text-align:center;color:#786b5f;gap:7px;padding:28px}.custom-preview-upload-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#fff;color:#2d2722;font-size:28px;box-shadow:0 10px 25px rgba(51,39,28,.1)}.custom-preview-empty strong{color:#2e2823;font-size:18px}.custom-preview-empty small{font-size:12px}.custom-preview-frame-wrap{width:84%;height:84%;display:grid;place-items:center}.custom-preview-frame-wrap>.configured-frame{position:relative!important;inset:auto!important;margin:0!important;max-width:92%;max-height:88%;transform:none!important;justify-self:center!important;align-self:center!important}.custom-preview-frame-wrap .artwork-preview{background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important}.custom-wall-preview-button{margin-top:12px}.custom-preview-summary{display:grid;gap:6px;margin-top:12px;padding:13px 14px;border-radius:15px;background:#f0e4d6;color:#685b50;font-size:11px;line-height:1.5}.custom-preview-summary strong{color:#2e2924;font-size:12px}
.custom-wizard-panel{padding:22px}.custom-stepper{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:20px}.custom-step-dot{border:0;background:transparent;padding:0;display:grid;place-items:center;gap:5px;color:#918579;cursor:pointer}.custom-step-dot>span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#eee3d6;border:1px solid #d9cab8;font-size:12px;font-weight:900}.custom-step-dot small{font-size:10px;font-weight:800;white-space:nowrap}.custom-step-dot.active,.custom-step-dot.done{color:#2c2722}.custom-step-dot.active>span{background:#2c2722;color:#fff;border-color:#2c2722}.custom-step-dot.done>span{background:#c99350;color:#fff;border-color:#c99350}
.custom-step-card{display:none;min-height:420px;padding:26px;border-radius:20px;background:#fff;border:1px solid #e7dbce}.custom-step-card.active{display:block}.custom-step-number{font-size:11px;letter-spacing:.14em;font-weight:900;color:#ae7d49}.custom-step-card h3{font-size:28px;margin:6px 0 8px}.custom-step-card>p{color:#786d63;line-height:1.65;font-size:13px;margin:0 0 22px}.custom-upload-box{width:100%;min-height:235px;border:1.5px dashed #cdb79d;border-radius:20px;background:#fbf6ef;display:grid;place-items:center;align-content:center;gap:8px;color:#2d2823;cursor:pointer}.custom-upload-box:hover{background:#f6ecdf}.custom-upload-symbol{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#2d2823;color:#fff;font-size:28px}.custom-upload-box strong{font-size:16px}.custom-upload-box small{color:#88796b}
.custom-choice-grid{display:grid;gap:11px}.custom-choice-grid.two{grid-template-columns:repeat(2,1fr)}.custom-choice-grid.three{grid-template-columns:repeat(3,1fr)}.custom-choice{min-height:110px;border:1px solid #d9cbbd;border-radius:17px;background:#fbf7f1;color:#2e2823;padding:16px;text-align:left;display:grid;align-content:center;gap:6px;cursor:pointer}.custom-choice strong{font-size:14px}.custom-choice small{font-size:11px;color:#817368}.custom-choice.active{border-color:#2d2823;background:#2d2823;color:#fff;box-shadow:0 10px 24px rgba(45,40,35,.16)}.custom-choice.active small{color:#d9cdc0}.custom-choice:disabled{opacity:.42;cursor:not-allowed}.custom-colour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.custom-colour-choice{border:1px solid #ddcfc1;background:#fff;border-radius:15px;padding:10px;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;min-width:0}.custom-colour-choice.active{border-color:#2b2621;box-shadow:0 0 0 1px #2b2621}.custom-colour-swatch{width:34px;height:34px;flex:0 0 34px;border-radius:10px;border:1px solid rgba(0,0,0,.12)}.custom-colour-choice span:last-child{font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.custom-size-choice{border:1px solid #dacbbc;border-radius:14px;background:#fbf7f1;padding:12px;display:grid;gap:3px;text-align:left;cursor:pointer}.custom-size-choice strong{font-size:12px}.custom-size-choice span{font-size:10px;color:#827467;direction:ltr;unicode-bidi:embed}.custom-size-choice.active{background:#2d2823;border-color:#2d2823;color:#fff}.custom-size-choice.active span{color:#ded2c7}.custom-size-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.custom-size-inputs label{display:grid;gap:6px;font-size:11px;font-weight:800;color:#655a50}.custom-size-inputs input{width:100%;border:1px solid #d9cab9;border-radius:12px;padding:12px;background:#fff;font:inherit;outline:0}.custom-final-box{margin-top:20px;padding:17px;border-radius:17px;background:#efe2d3}.custom-final-box>strong{font-size:14px}.custom-final-box p{font-size:11px;line-height:1.5;color:#746558;margin:6px 0 12px}.custom-wizard-actions{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.custom-wizard-actions .btn{min-width:125px}
html[lang="ar"] .custom-order-heading,html[lang="ar"] .custom-wizard-panel,html[lang="ar"] .custom-preview-panel{text-align:right}.custom-order-heading{text-align:center!important}html[lang="ar"] .custom-choice,html[lang="ar"] .custom-colour-choice,html[lang="ar"] .custom-size-choice{text-align:right}.custom-colour-choice{direction:ltr}html[lang="ar"] .custom-colour-choice{direction:rtl}.custom-size-inputs input{direction:ltr;text-align:left}html[lang="ar"] .custom-preview-topline{direction:rtl}html[lang="ar"] .custom-stepper{direction:rtl}
@media(max-width:1000px){.custom-order-layout{grid-template-columns:1fr}.custom-preview-panel{position:relative;top:auto}.custom-preview-stage{min-height:440px}.custom-wizard-panel{padding:16px}}@media(max-width:640px){.custom-order-page{padding-top:32px}.custom-stepper{gap:2px}.custom-step-dot small{display:none}.custom-step-card{padding:18px;min-height:0}.custom-choice-grid.two,.custom-choice-grid.three,.custom-colour-grid,.custom-size-grid{grid-template-columns:1fr 1fr}.custom-preview-stage{min-height:340px}.custom-order-layout{gap:16px}.custom-preview-panel{padding:13px}.custom-wizard-panel{border-radius:20px}.custom-size-inputs{grid-template-columns:1fr}}

/* Source: basmah-v119-custom-order-sharp-upload-preview */
/* v119 — keep customer-uploaded artwork sharp in the custom-order preview and wall visualizer */
.custom-preview-frame-wrap .artwork-preview.uploaded,
#wallFrameCloneHost .artwork-preview.uploaded{
  background-image:none !important;
  background-color:transparent !important;
}
.custom-uploaded-art-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
  object-position:center;
  image-rendering:auto;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
  backface-visibility:hidden;
}

/* Source: basmah-v120-wall-preview-clean-save */
/* v120 — cleaner wall visualizer controls + smaller corner points */
.wall-drag-hint{display:none!important}
.wall-resize-handle{
  width:10px!important;
  height:10px!important;
  border-width:1.5px!important;
}
.wall-resize-nw{left:-8px!important;top:-8px!important}
.wall-resize-ne{right:-8px!important;top:-8px!important}
.wall-resize-sw{left:-8px!important;bottom:-8px!important}
.wall-resize-se{right:-8px!important;bottom:-8px!important}
.wall-photo-actions .wall-save-preview{
  min-width:120px;
}
@media(max-width:900px){
  .wall-resize-handle{width:12px!important;height:12px!important}
  .wall-resize-nw{left:-9px!important;top:-9px!important}
  .wall-resize-ne{right:-9px!important;top:-9px!important}
  .wall-resize-sw{left:-9px!important;bottom:-9px!important}
  .wall-resize-se{right:-9px!important;bottom:-9px!important}
}

/* Source: basmah-v126-logical-preview-frame-thickness */
/* v126 — customer preview + wall preview frame widths: Box 1.5 cm, Floating 1 cm */
#customConfiguredFrame,
#wallFrameCloneHost > .configured-frame{
  box-sizing:border-box;
}

/* Source: basmah-v127-smooth-wall-drag */
/* v127 — smoother wall-frame movement with no initial grab jump */
.wall-frame-overlay{
  will-change:left,top,width,height;
}
.wall-frame-overlay.dragging{
  transition:none !important;
}

/* Source: basmah-v128-custom-order-review-cart */
/* v128 — final Review + Add to Cart step for Custom Orders */
.custom-review-summary{
  display:grid;
  gap:9px;
  padding:16px;
  border:1px solid #e2d5c6;
  border-radius:16px;
  background:#fbf7f1;
  margin-bottom:14px;
}
.custom-review-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding-bottom:8px;
  border-bottom:1px solid #eadfd3;
  font-size:12px;
}
.custom-review-row:last-child{border-bottom:0;padding-bottom:0}
.custom-review-row span{color:#7a6d62}
.custom-review-row strong{text-align:right;color:#2d2823}
.custom-review-price{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:14px 0;
  padding:15px 16px;
  border-radius:15px;
  background:#2d2823;
  color:#fff;
}
.custom-review-price span{font-size:12px;color:#d8ccc0}
.custom-review-price strong{font-size:22px}
.custom-review-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.custom-review-actions .btn{width:100%}
html[lang="ar"] .custom-review-summary,
html[lang="ar"] .custom-review-price{direction:rtl}
html[lang="ar"] .custom-review-row strong{text-align:left}
@media(max-width:640px){
  .custom-review-actions{grid-template-columns:1fr}
  .custom-stepper{grid-template-columns:repeat(7,1fr)}
}

/* Source: basmah-v131-top-center-toast */
/* v131 — show website notifications prominently at the top center */
.toast{
  left:50% !important;
  right:auto !important;
  top:22px !important;
  bottom:auto !important;
  z-index:20050 !important;
  width:max-content;
  max-width:min(560px,calc(100vw - 32px));
  padding:14px 20px !important;
  text-align:center;
  line-height:1.45;
  white-space:normal;
  transform:translate(-50%,-18px) !important;
  opacity:0;
  box-shadow:0 12px 34px rgba(20,15,11,.28) !important;
}
.toast.show{
  transform:translate(-50%,0) !important;
  opacity:1;
}
html[lang="ar"] .toast{
  direction:rtl;
  text-align:center !important;
}
@media(max-width:640px){
  .toast{
    top:14px !important;
    max-width:calc(100vw - 24px);
    padding:13px 16px !important;
  }
}

/* Source: basmah-v136-whatsapp-pill-fixed-order */
/* v136 — keep WhatsApp icon on the LEFT and number on the RIGHT in both English and Arabic */
.whatsapp-float-pill{
  direction:ltr !important;
  flex-direction:row !important;
}
.whatsapp-float-icon{
  order:1 !important;
}
.whatsapp-float-label{
  order:2 !important;
  margin-left:10px !important;
  margin-right:0 !important;
  direction:ltr !important;
  text-align:center !important;
}
html[lang="ar"] .whatsapp-float-pill,
html[lang="ar"] .whatsapp-float-icon,
html[lang="ar"] .whatsapp-float-label{
  direction:ltr !important;
}
html[lang="ar"] .whatsapp-float-label{
  margin-left:10px !important;
  margin-right:0 !important;
}
@media (max-width:980px){
  .whatsapp-float-label{
    margin-left:8px !important;
    margin-right:0 !important;
  }
  html[lang="ar"] .whatsapp-float-label{
    margin-left:8px !important;
    margin-right:0 !important;
  }
}

/* Source: basmah-v137-language-floats */
/* v137 — Arabic uses the Developer launcher in the WhatsApp floating position */
html[lang="ar"] #siteWhatsappLink{
  display:none !important;
}
html[lang="ar"] #developerLauncher{
  display:flex !important;
  left:auto !important;
  right:24px !important;
  bottom:24px !important;
  min-height:52px;
  padding:0 20px !important;
  border:2px solid rgba(255,255,255,.9) !important;
  border-radius:999px !important;
  background:#2d2721 !important;
  color:#fff !important;
  font-size:14px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
}
html[lang="en"] #siteWhatsappLink{
  display:block;
}
html[lang="en"] #developerLauncher{
  display:none !important;
}
@media(max-width:640px){
  html[lang="ar"] #developerLauncher{
    right:12px !important;
    bottom:max(12px, env(safe-area-inset-bottom)) !important;
    min-height:48px;
    padding:0 17px !important;
    font-size:13px !important;
  }
}

/* Source: basmah-v138-arabic-whatsapp-left */
/* v138 — Arabic: WhatsApp stays visible on the bottom-left, Developer stays bottom-right */
html[lang="ar"] #siteWhatsappLink{
  display:block !important;
  left:24px !important;
  right:auto !important;
  bottom:24px !important;
}
html[lang="ar"] #developerLauncher{
  display:flex !important;
  right:24px !important;
  left:auto !important;
  bottom:24px !important;
}
@media(max-width:640px){
  html[lang="ar"] #siteWhatsappLink{
    left:12px !important;
    right:auto !important;
    bottom:max(12px, env(safe-area-inset-bottom)) !important;
  }
  html[lang="ar"] #developerLauncher{
    right:12px !important;
    left:auto !important;
    bottom:max(12px, env(safe-area-inset-bottom)) !important;
  }
}

/* Source: basmah-v139-english-developer-left */
/* v139 — English: Developer bottom-left, WhatsApp bottom-right */
html[lang="en"] #developerLauncher{
  display:flex !important;
  left:24px !important;
  right:auto !important;
  bottom:24px !important;
}
html[lang="en"] #siteWhatsappLink{
  display:block !important;
  right:24px !important;
  left:auto !important;
  bottom:24px !important;
}
@media(max-width:640px){
  html[lang="en"] #developerLauncher{
    left:12px !important;
    right:auto !important;
    bottom:max(12px, env(safe-area-inset-bottom)) !important;
  }
  html[lang="en"] #siteWhatsappLink{
    right:12px !important;
    left:auto !important;
    bottom:max(12px, env(safe-area-inset-bottom)) !important;
  }
}

/* Source: basmah-v140-equal-home-shop-categories */
/* v140 — equal-size category cards on Home; reuse the same visual category cards on Shop */

/* HOME: 4 equal cards on the first row, remaining cards centered on the next row. */
#homeView .category-grid{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:16px;
}
#homeView .category-grid .category-card{
  flex:0 0 calc((100% - 48px) / 4);
  width:calc((100% - 48px) / 4);
  min-width:0;
  height:250px;
  min-height:250px;
}

/* SHOP: replace the compact category selectors with the same large visual cards. */
#shopView .shop-category-picker{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:16px;
  max-width:none !important;
  width:100%;
  margin:30px auto 18px;
}
#shopView .shop-category-card{
  position:relative;
  flex:0 0 calc((100% - 48px) / 4);
  width:calc((100% - 48px) / 4);
  min-width:0;
  height:250px;
  min-height:250px;
  padding:20px !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  border:1px solid rgba(144,113,81,.20) !important;
  border-radius:22px !important;
  overflow:hidden;
  background:#fff !important;
  color:var(--ink) !important;
  text-align:left;
  box-shadow:0 16px 36px rgba(50,36,24,.10) !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#shopView .shop-category-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 20px 42px rgba(50,36,24,.15) !important;
}
#shopView .shop-category-card.active{
  border-color:#8d6e50 !important;
  box-shadow:
    0 0 0 3px rgba(141,110,80,.20),
    0 18px 40px rgba(50,36,24,.14) !important;
}
#shopView .shop-category-card .category-art{
  position:absolute !important;
  inset:0 !important;
  width:100%;
  height:100%;
  opacity:.98;
}
#shopView .shop-category-card .category-title{
  position:relative;
  z-index:2;
  width:100%;
  padding:13px 15px;
  border-radius:14px;
  background:rgba(255,253,249,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--ink);
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  text-align:center;
}
#shopView .shop-category-card.active .category-title{
  background:#fff;
  box-shadow:0 0 0 2px rgba(141,110,80,.18);
}

/* Keep Shop All available without creating an eighth fake artwork category card. */
#shopView .shop-all-category-row{
  flex:0 0 100%;
  width:100%;
  display:flex;
  justify-content:center;
  margin:0 0 2px;
}
#shopView .shop-all-category-button{
  border:1px solid #d8c8b6;
  border-radius:999px;
  padding:11px 24px;
  background:rgba(255,255,255,.86);
  color:var(--ink);
  font-weight:800;
  font-size:13px;
  box-shadow:0 7px 18px rgba(63,46,31,.06);
  transition:.2s ease;
}
#shopView .shop-all-category-button:hover{
  transform:translateY(-1px);
  background:#fff;
}
#shopView .shop-all-category-button.active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

/* Arabic keeps the card design identical, only the text direction changes. */
html[lang="ar"] #shopView .shop-category-card{
  text-align:right;
}
html[lang="ar"] #shopView .shop-category-card .category-title{
  text-align:center;
}

/* Tablet */
@media (max-width:1000px){
  #homeView .category-grid .category-card,
  #shopView .shop-category-card{
    flex-basis:calc((100% - 16px) / 2);
    width:calc((100% - 16px) / 2);
    height:240px;
    min-height:240px;
  }
}

/* Mobile */
@media (max-width:640px){
  #homeView .category-grid,
  #shopView .shop-category-picker{
    gap:12px;
  }
  #homeView .category-grid .category-card,
  #shopView .shop-category-card{
    flex-basis:100%;
    width:100%;
    height:235px;
    min-height:235px;
  }
  #shopView .shop-category-picker{
    margin-top:22px;
  }
}

/* Source: basmah-v141-pricing-dashboard */
.pricing-frame-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start;
}
.pricing-frame-card{
  border:1px solid #e4d8ca;
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}
.pricing-frame-card-head{
  padding:18px 18px 14px;
  background:linear-gradient(135deg,#fbf7f1,#f2e8dc);
  border-bottom:1px solid #e6dacd;
}
.pricing-frame-card-head h3{margin:0 0 5px;font-size:20px}
.pricing-frame-card-head p{margin:0;font-size:12px;line-height:1.55;color:#766b61}
.pricing-frame-card-body{padding:16px}
.pricing-frame-card .admin-table{margin:0}
.pricing-frame-card .admin-table input{min-width:94px}
.pricing-rate-box{
  margin-top:15px;
  padding:14px;
  border:1px solid #e7ddd2;
  border-radius:14px;
  background:#fbf8f4;
}
.pricing-rate-box .admin-help{margin-top:6px}

.custom-pricing-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);
  gap:18px;
  align-items:start;
}
.custom-pricing-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 14px;
}
.custom-price-test{
  position:sticky;
  top:16px;
  padding:18px;
  border:1px solid #ded0c0;
  border-radius:18px;
  background:linear-gradient(145deg,#2e2924,#47392d);
  color:#fff;
  box-shadow:0 18px 42px rgba(30,23,18,.16);
}
.custom-price-test h3{color:#fff;margin:0 0 5px}
.custom-price-test p{color:#d9cfc5;margin:0 0 16px;font-size:12px}
.custom-price-test .admin-field label{color:#e9dfd5}
.custom-price-test .admin-input,
.custom-price-test .admin-select{
  background:#fff;
  color:#292520;
  border-color:#d6c7b6;
}
.custom-calc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.custom-calc-breakdown{
  display:grid;
  gap:7px;
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.16);
}
.custom-calc-row{
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:12px;
  color:#ddd3ca;
}
.custom-calc-row strong{color:#fff;text-align:right}
.custom-calc-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:15px;
  padding:14px 15px;
  border-radius:14px;
  background:#fff;
  color:#2d2823;
}
.custom-calc-total span{font-size:12px;font-weight:800}
.custom-calc-total strong{font-size:25px}
.custom-pricing-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:13px;
  background:#f8f2eb;
  border:1px solid #e5d9cc;
  color:#6f655c;
  font-size:12px;
  line-height:1.6;
}
html[lang="ar"] .pricing-frame-card,
html[lang="ar"] .custom-pricing-layout,
html[lang="ar"] .custom-price-test{direction:rtl}
html[lang="ar"] .custom-calc-row strong{text-align:left}
@media(max-width:980px){
  .pricing-frame-grid,
  .custom-pricing-layout{grid-template-columns:1fr}
  .custom-price-test{position:static}
}
@media(max-width:640px){
  .custom-pricing-fields,
  .custom-calc-grid{grid-template-columns:1fr}
}

/* Source: basmah-v143-preview-editor-fixes */
/* v143 — product/editor cleanup */
#artOrientationOption{display:none!important}
#previewHint{display:none!important}

/* Real frame sample (the second thumbnail) must always open as a full large preview. */
.preview-stage.has-mockup-front.frame-reference-active,
.preview-stage.frame-reference-active{
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:clamp(500px,50vw,610px)!important;
  min-height:480px!important;
  padding:22px!important;
  background:#fff!important;
  overflow:hidden!important;
}
.preview-stage.frame-reference-active .mockup-zoom-layer{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
}
.preview-stage.frame-reference-active .frame-reference-main:not([hidden]){
  display:block!important;
  position:absolute!important;
  inset:22px!important;
  width:calc(100% - 44px)!important;
  height:calc(100% - 44px)!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  background:#fff!important;
  border-radius:12px!important;
  z-index:20!important;
}
.preview-stage.frame-reference-active #previewMockupImage,
.preview-stage.frame-reference-active #frameRenderer{display:none!important}

/* Box Frame: no artificial grey/white inner border when No Mount is selected. */
.configured-frame.box-frame.box-no-mount .frame-face-front > .mount-outer{
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
}
.configured-frame.box-frame.box-no-mount .frame-face-front > .mount-outer::before,
.configured-frame.box-frame.box-no-mount .frame-face-front > .mount-outer::after{display:none!important}
.configured-frame.box-frame.box-no-mount .frame-face-front > .mount-outer > .mount-inner{
  background:transparent!important;
  padding:0!important;
  box-shadow:none!important;
}
.mockup-frame-shell.box-frame-shell{padding:1.5%!important}
.mockup-frame-shell.box-frame-shell .mockup-art{box-shadow:none!important}

/* Floating Frame: 1 cm visual face and a softer inner black reveal/shadow. */
.mockup-frame-shell.floating-frame-shell{padding:1%!important}
.configured-frame.floating-frame .frame-face-front > .mount-outer > .mount-inner > .artwork-preview{
  box-shadow:0 0 0 2px rgba(0,0,0,.38),0 0 6px rgba(0,0,0,.07)!important;
}
.mockup-frame-shell.floating-frame-shell .mockup-art::after{
  box-shadow:0 0 0 2px rgba(0,0,0,.38),0 0 6px rgba(0,0,0,.07)!important;
}
#wallFrameCloneHost > .configured-frame.floating-frame .frame-face-front > .mount-outer > .mount-inner > .artwork-preview{
  box-shadow:0 0 0 var(--wall-floating-inner,2px) rgba(0,0,0,.38),0 0 6px rgba(0,0,0,.07)!important;
}

/* Developer: locked Custom Size row and custom rate panel. */
.admin-custom-size-row{
  background:#f8f3ec;
  border:1px solid #dfd1c1;
  border-radius:14px;
  padding:10px;
}
.admin-custom-size-row [data-size-label],
.admin-custom-size-row [data-size-dimensions]{background:#f1ebe4!important;color:#6e6257!important}
.admin-custom-size-row [data-size-price]{display:none!important}
.admin-custom-size-row .admin-custom-rate-note{font-size:11px;color:#74685d;align-self:center;padding:0 6px}
.admin-product-custom-rates{margin:0 0 16px!important;background:#fbf7f1!important}
.admin-product-custom-rates .admin-row{margin-top:10px}
.admin-fixed-installation{padding:12px 14px;border-radius:12px;background:#f5efe7;border:1px solid #dfd2c4;font-weight:800;color:#50463d}

@media(max-width:640px){
  .preview-stage.has-mockup-front.frame-reference-active,
  .preview-stage.frame-reference-active{height:420px!important;min-height:360px!important;padding:14px!important}
  .preview-stage.frame-reference-active .frame-reference-main:not([hidden]){inset:14px!important;width:calc(100% - 28px)!important;height:calc(100% - 28px)!important}
}

/* Source: basmah-v159-extra-product-size */
#adminProductEditor .basmah-extra-size-row{border:1px dashed #c8b49d;background:#fffaf3}
#adminProductEditor .basmah-extra-size-row [data-size-label],
#adminProductEditor .basmah-extra-size-row [data-size-dimensions]{background:#fff!important;cursor:text!important}
#adminProductEditor .basmah-extra-auto-price{color:#6e6257;font-size:12px;font-weight:700;align-self:end;padding:10px 0}

/* Source: basmah-v172-mockup-only-admin */
/* v172 — mockup-only product setup. The guide marks the artwork opening; no second art upload is needed. */
#adminProductsPane .admin-mockup-placement-box{
  background:transparent!important;
  border:0!important;
  outline:none!important;
  box-shadow:none!important;
  cursor:move!important;
  touch-action:none;
}
#adminProductsPane .admin-mockup-placement-box::before{
  content:none!important;
  display:none!important;
}
html[lang="ar"] #adminProductsPane .admin-mockup-placement-box::before{content:none!important;}
#adminProductsPane .admin-mockup-frame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:2px solid #111!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
}
#adminProductsPane .admin-mockup-frame::before,
#adminProductsPane .admin-mockup-frame::after,
#adminProductsPane .admin-mockup-art{display:none!important;}
#adminProductsPane .admin-resize-handle{
  width:18px!important;height:18px!important;
  right:-10px!important;bottom:-10px!important;
  border:3px solid #fff!important;
  background:#1f1c19!important;
  box-shadow:0 2px 8px rgba(0,0,0,.25)!important;
}
#adminProductsPane .basmah-mockup-only-note{
  margin-top:10px;padding:11px 13px;border-radius:12px;background:#f7f1e8;border:1px solid #e3d6c7;
  color:#6f655c;font-size:12px;line-height:1.55;
}

/* Source: basmah-v172-hide-legacy-art-upload */
#adminProductsPane #apArtImage,#adminProductsPane #adminArtImagePreview,#adminProductsPane #adminArtFullPreview{display:none!important}#adminProductsPane #apArtImage~*{display:none!important}

/* Source: basmah-v175-product-preview-click-lightbox */
/* v175 — keep the existing hover magnifier; click the main product preview for a large sharp popup. */
body.basmah-product-lightbox-open{overflow:hidden!important}
.product-preview-lightbox{
  position:fixed;inset:0;z-index:25000;display:none;align-items:center;justify-content:center;
  padding:28px;background:rgba(20,17,14,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.product-preview-lightbox.is-open{display:flex}
.product-preview-lightbox-shell{
  position:relative;display:grid;place-items:center;max-width:100%;max-height:100%;
}
.product-preview-lightbox-content{
  position:relative;display:grid;place-items:center;max-width:calc(100vw - 56px);max-height:calc(100vh - 56px);
}
.product-preview-lightbox-fit{position:relative;flex:none;overflow:visible}
.product-preview-lightbox-viewport{
  position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;border-radius:18px;
  box-shadow:0 28px 90px rgba(0,0,0,.46);background:#ece5db;
}
.product-preview-lightbox-viewport>.preview-stage{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;border-radius:18px!important;cursor:default!important;user-select:none!important;
}
.product-preview-lightbox-viewport>.preview-stage.has-mockup-front{height:100%!important}
.product-preview-lightbox-viewport .preview-mockup-image{
  width:100%!important;height:100%!important;object-fit:fill!important;display:block!important;
}
.product-preview-lightbox-viewport .preview-magnifier,
.product-preview-lightbox-viewport .zoom-hint{display:none!important}
.product-preview-lightbox-viewport *{cursor:default!important}
.product-preview-lightbox-close{
  position:fixed;right:22px;top:20px;z-index:25010;width:48px;height:48px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.34);border-radius:50%;background:rgba(255,255,255,.96);color:#28231f;
  font-size:29px;line-height:1;box-shadow:0 10px 30px rgba(0,0,0,.26);cursor:pointer;
}
.product-preview-lightbox-close:hover{background:#28231f;color:#fff;border-color:#28231f}
#previewStage{cursor:crosshair!important}
#previewStage::after{
  content:"";position:absolute;inset:0;z-index:1000;pointer-events:none;border-radius:inherit;
}
@media(max-width:640px){
  .product-preview-lightbox{padding:12px}
  .product-preview-lightbox-content{max-width:calc(100vw - 24px);max-height:calc(100vh - 24px)}
  .product-preview-lightbox-close{right:12px;top:12px;width:44px;height:44px;font-size:26px}
  .product-preview-lightbox-viewport{border-radius:12px}
  .product-preview-lightbox-viewport>.preview-stage{border-radius:12px!important}
}

/* Source: basmah-v176-mobile-only-fixes */
/* v176 — mobile-only polish. Desktop is intentionally untouched. */
@media (max-width:640px){
  html{background:#2f241c;}
  body{min-height:100dvh;}
  body:has(#homeView.active){background:#2f241c;}

  /* Let the dark Basmah header/hero visually continue into the iPhone safe area. */
  body:has(#homeView.active) .site-header{
    padding-top:max(12px,env(safe-area-inset-top))!important;
  }

  /* Compact WhatsApp control for phone screens. */
  .whatsapp-float-pill{
    min-width:148px!important;
    height:40px!important;
    padding:3px 5px 3px 4px!important;
  }
  .whatsapp-float-icon{
    width:34px!important;height:34px!important;flex:0 0 34px!important;
    border-width:2px!important;
  }
  .whatsapp-float-icon svg{width:19px!important;height:19px!important;}
  .whatsapp-float-label{
    height:32px!important;
    margin-left:5px!important;margin-right:0!important;
    padding:0 8px!important;
    font-size:10.5px!important;
    border-width:1px!important;
  }
  html[lang="ar"] .whatsapp-float-label{margin-left:5px!important;margin-right:0!important;}

  /* Keep both hero CTA buttons truly centered on phones. */
  #homeView .basmah-tadween-actions,
  html[lang="ar"] #homeView .basmah-tadween-actions{
    width:100%!important;
    max-width:100%!important;
    margin:30px auto 0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
  }
  #homeView .basmah-tadween-actions .btn,
  html[lang="ar"] #homeView .basmah-tadween-actions .btn{
    width:min(100%,300px)!important;
    min-width:0!important;
    margin-left:auto!important;margin-right:auto!important;
    text-align:center!important;
    justify-content:center!important;
  }

  /* No desktop-style magnifying lens on touch/mobile. Pinch zoom remains available. */
  #previewStage .preview-magnifier,
  #previewMagnifier{display:none!important;visibility:hidden!important;opacity:0!important;}
  #previewStage,
  .product-preview-lightbox,
  .product-preview-lightbox-content,
  .product-preview-lightbox-viewport{
    touch-action:pan-x pan-y pinch-zoom!important;
  }
  #previewStage{cursor:zoom-in!important;}

  /* Center frame-related controls beneath the product preview. */
  #productView #artworkOptions #artFrameTypeOption > label,
  #productView #artworkOptions #artFrameColourOption > label,
  #productView #artworkOptions #artMountOption > label,
  #productView #artworkOptions #artMountSettings > label,
  #productView #mirrorOptions .option > label{
    text-align:center!important;
  }
  #productView #artworkOptions #artFrameTypeOption .segmented,
  #productView #artworkOptions #artMountOption .segmented,
  #productView #artworkOptions #artFrameColourOption .swatches,
  #productView #mirrorOptions .segmented,
  #productView #mirrorOptions .swatches{
    justify-content:center!important;
  }
  #productView #artworkOptions #artFrameTypeOption .option-note{
    text-align:center!important;
  }

  /* Mobile navigation drawer. */
  .basmah-mobile-nav{
    position:fixed;inset:0;z-index:14000;display:none;
  }
  .basmah-mobile-nav.is-open{display:block;}
  .basmah-mobile-nav-backdrop{
    position:absolute;inset:0;border:0;padding:0;background:rgba(24,19,15,.54);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  }
  .basmah-mobile-nav-panel{
    position:absolute;
    left:14px;right:14px;
    top:calc(max(12px,env(safe-area-inset-top)) + 76px);
    display:grid;gap:7px;padding:12px;
    border:1px solid rgba(255,255,255,.20);
    border-radius:20px;
    background:rgba(45,35,28,.97);
    box-shadow:0 22px 55px rgba(0,0,0,.30);
  }
  .basmah-mobile-nav-panel button{
    min-height:48px;padding:10px 15px;border:0;border-radius:13px;
    background:rgba(255,255,255,.07);color:#fff;
    font-weight:800;font-size:15px;text-align:center;
  }
  .basmah-mobile-nav-panel button:active{background:rgba(255,255,255,.16);}
  html[lang="ar"] .basmah-mobile-nav-panel{direction:rtl;}
}
@media (min-width:641px){
  .basmah-mobile-nav{display:none!important;}
}

/* Source: basmah-v177-gallery-noframe-mobilezoom */
/* v177 — product main preview full-width, thumbnails below, plus mobile zoomable lightbox. */
#productView .product-gallery{
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
}
#productView .preview-stack{order:1!important;width:100%!important;min-width:0!important;}
#productView .product-side-thumbs{
  order:2!important;
  width:100%!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
#productView .product-side-thumb{width:82px!important;flex:0 0 82px!important;}
#productView #productPreviewThumbArt{
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:#f3ede4!important;
}
#productView .preview-stage.has-mockup-front .preview-mockup-image{
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
}
/* No Frame is a true artwork-only choice. */
#productView.no-frame-selected #artFrameColourOption,
#productView.no-frame-selected #artMountOption,
#productView.no-frame-selected #artMountSettings{display:none!important;}
#productView.no-frame-selected #configuredFrame::before,
#productView.no-frame-selected #configuredFrame::after{display:none!important;}
@media(max-width:640px){
  #productView .product-side-thumb{width:62px!important;flex-basis:62px!important;}
  #productView .product-side-thumbs{gap:8px!important;margin-top:2px!important;}
  .product-preview-lightbox-content{
    overflow:visible!important;
    touch-action:none!important;
  }
  .product-preview-lightbox-fit{
    transform-origin:center center!important;
    will-change:transform;
    touch-action:none!important;
  }
  .product-preview-lightbox-viewport{touch-action:none!important;}
}

/* Source: basmah-v181-filter-category-tabs */
/* v181 — compact category tabs inside the Shop filter sidebar */
#shopView .shop-category-filter-group{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
#shopView .shop-filter-category-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
#shopView .shop-filter-category-tab{
  flex:1 1 calc(50% - 4px);
  min-width:0;
  min-height:34px;
  padding:7px 8px;
  border:1px solid #dfcdb8;
  border-radius:10px;
  background:#fffaf4;
  color:var(--ink);
  font-size:10.5px;
  font-weight:750;
  line-height:1.2;
  text-align:center;
  overflow-wrap:anywhere;
  transition:.18s ease;
}
#shopView .shop-filter-category-tab.wide{
  flex-basis:100%;
}
#shopView .shop-filter-category-tab:hover{
  border-color:#b99a78;
  background:#f6eadc;
}
#shopView .shop-filter-category-tab.active{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
  box-shadow:0 4px 12px rgba(45,35,31,.12);
}
html[lang="ar"] #shopView .shop-filter-category-tabs{direction:rtl;}
html[lang="ar"] #shopView .shop-filter-category-tab{text-align:center!important;}
@media(max-width:980px){
  #shopView .shop-category-filter-group{grid-column:1/-1;}
  #shopView .shop-filter-category-tabs{justify-content:flex-start;}
  #shopView .shop-filter-category-tab{flex:0 1 auto;min-width:110px;padding-inline:12px;}
  #shopView .shop-filter-category-tab.wide{flex-basis:auto;}
}
@media(max-width:640px){
  #shopView .shop-filter-category-tab{min-width:calc(50% - 4px);flex:1 1 calc(50% - 4px);}
  #shopView .shop-filter-category-tab.wide{flex-basis:100%;}
}

/* Source: basmah-v224-product-explore-transition */
/* v224 — product is prepared before reveal; keep the visible entrance extremely light. */
#productView.active{animation:none;}
@keyframes basmahV224ProductEnter{from{opacity:.96;transform:translateY(2px)}to{opacity:1;transform:none}}

/* Explore Wall Art: subtle cinematic lift without delaying navigation. */
#shopView.basmah-explore-enter.active .shop-shell,
#shopView.basmah-explore-enter.active .container{animation:basmahV224ExploreEnter .30s cubic-bezier(.2,.75,.25,1) both;}
@keyframes basmahV224ExploreEnter{from{opacity:.72;transform:translateY(10px)}to{opacity:1;transform:none}}
#homeView .hero .btn[data-basmah-translation-key="__heroExplore"]{transition:transform .16s ease,box-shadow .16s ease;}
#homeView .hero .btn[data-basmah-translation-key="__heroExplore"]:active{transform:scale(.985);}
@media(prefers-reduced-motion:reduce){#productView.active,#shopView.basmah-explore-enter.active .shop-shell,#shopView.basmah-explore-enter.active .container{animation:none!important;}}

/* Source: basmah-v225-global-transitions */
/* v225 — one lightweight motion language across all customer-facing interactions. */
:root{--basmah-nav-ease:cubic-bezier(.22,.72,.24,1);}
.view.active{animation:basmahV225ViewEnter .26s var(--basmah-nav-ease) both!important;}
@keyframes basmahV225ViewEnter{from{opacity:.90;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Category/list refreshes transition in-place instead of visually blinking. */
#shopView .product-grid.basmah-list-refresh,
#shopView .product-toolbar.basmah-list-refresh{animation:basmahV225ListRefresh .24s var(--basmah-nav-ease) both;}
@keyframes basmahV225ListRefresh{from{opacity:.76;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Consistent tactile feedback for buttons, navigation, cards and clickable product areas. */
button,.btn,a.brand,[data-nav],.category-card,.shop-category-card,.shop-filter-category-tab,.product-open-area,.service-link,.language-toggle{
  transition:transform .15s ease,opacity .15s ease,box-shadow .20s ease,background-color .20s ease,border-color .20s ease!important;
}
button:active,.btn:active,a.brand:active,[data-nav]:active,.category-card:active,.shop-category-card:active,.shop-filter-category-tab:active,.product-open-area:active,.service-link:active,.language-toggle:active{
  transform:scale(.985)!important;opacity:.92;
}

/* Product reveal stays elegant but immediate. */
#productView.active .product-shell,#productView.active .container{animation:basmahV225ProductContent .25s var(--basmah-nav-ease) both;}
@keyframes basmahV225ProductContent{from{opacity:.88;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .view.active,#shopView .product-grid.basmah-list-refresh,#shopView .product-toolbar.basmah-list-refresh,#productView.active .product-shell,#productView.active .container{animation:none!important;}
  button,.btn,a.brand,[data-nav],.category-card,.shop-category-card,.shop-filter-category-tab,.product-open-area,.service-link,.language-toggle{transition:none!important;}
}

/* Source: basmah-v183-reset-filter-spacing */
/* v183 — keep Reset filters visually separated from the Frame type dropdown */
#shopView .shop-reset-filters{
  margin-top:16px;
}

/* Source: basmah-v224-video-navigation-language-fix */
/* Header: logo circle on the right, English BASMAH vertically centered on its left. */
.site-header .brand{flex-direction:row-reverse!important;gap:10px!important;align-items:center!important;}
.site-header .brand-wordmark{display:flex!important;align-items:center!important;justify-content:center!important;text-align:left!important;min-width:0!important;}
.site-header .brand-wordmark #siteBrandName{width:auto!important;text-align:left!important;font-size:15px!important;line-height:1!important;letter-spacing:.14em!important;text-transform:uppercase!important;white-space:nowrap!important;}
.site-header .brand-wordmark .brand-arabic{display:none!important;}
html[lang="ar"] .site-header .brand-wordmark{align-items:center!important;text-align:left!important;direction:ltr!important;}
html[lang="ar"] .site-header .brand-wordmark #siteBrandName{text-align:left!important;direction:ltr!important;}

/* Fast, subtle page motion: enough to feel intentional without delaying interaction. */
.view.active{animation:basmahV225ViewEnter .26s var(--basmah-nav-ease) both!important;}
@keyframes basmahV221Enter{from{opacity:.86;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.view.active{animation:none!important;}}

/* Coupon block on checkout. */
.checkout-coupon{margin:14px 0 15px;padding:14px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(180deg,#fffdf9,#faf5ed);}
.checkout-coupon-heading{margin-bottom:9px;font-size:12px;font-weight:800;color:var(--ink);}
.checkout-coupon-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;}
.checkout-coupon-row .field{text-transform:uppercase;letter-spacing:.05em;min-width:0;}
.checkout-coupon-row .btn{min-width:92px;padding-inline:14px;}
.checkout-coupon-message{min-height:18px;margin-top:8px;font-size:11px;line-height:1.5;color:var(--muted);}
.checkout-coupon-message.success{color:#436b54;font-weight:700;}
.checkout-coupon-message.error{color:#9b433f;font-weight:700;}
.checkout-discount-line strong{color:#436b54!important;}
@media(max-width:520px){.checkout-coupon-row{grid-template-columns:1fr}.checkout-coupon-row .btn{width:100%}}

/* Developer coupon management. */
.coupon-admin-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.coupon-admin-table{min-width:780px;}
.coupon-admin-table input[type="text"]{text-transform:uppercase;font-weight:800;letter-spacing:.04em;}
.coupon-admin-table input[type="date"]{min-width:142px;}
.coupon-admin-table input[type="number"]{width:84px;}
.coupon-status-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#655a50;}

/* Source: basmah-v226-scroll-stability */
/* v226 — route navigation must never use native smooth scrolling.
   Visual smoothness comes from view/list animations, so scroll position changes are deterministic. */
html,body{scroll-behavior:auto!important;}
.view.active{animation-duration:.24s!important;}

/* Source: basmah-v227-mobile-history-drawer-cart-css */
html.basmah-pop-restore .view.active,html.basmah-pop-restore #productView.active .product-shell,html.basmah-pop-restore #productView.active .container{animation:none!important;transition:none!important;}
#homeView.basmah-cta-leaving .basmah-tadween-hero-content{animation:basmahV227HeroOut .12s ease both!important;}
#shopView.basmah-cta-arrive.active .shop-shell,#shopView.basmah-cta-arrive.active .container,#customView.basmah-cta-arrive.active .custom-order-page{animation:basmahV227CtaIn .30s cubic-bezier(.2,.75,.22,1) both!important;}
@keyframes basmahV227HeroOut{from{opacity:1}to{opacity:.72}}
@keyframes basmahV227CtaIn{from{opacity:.25}to{opacity:1}}
@media(max-width:640px){
  #shopView .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  #shopView .product-card{min-width:0!important;border-radius:15px!important;overflow:hidden;}
  #shopView .product-visual{height:178px!important;min-height:178px!important;}
  #shopView .product-info{padding:11px!important;}
  #shopView .product-name{font-size:13px!important;line-height:1.3!important;}
  #shopView .product-description{font-size:10.5px!important;line-height:1.45!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  #shopView .price{font-size:13px!important;}
  #shopView .card-actions .btn{padding:9px 7px!important;font-size:11px!important;}
  #customView .custom-order-layout{display:flex!important;flex-direction:column!important;gap:16px!important;}
  #customView .custom-wizard-panel{order:1!important;width:100%!important;}
  #customView .custom-preview-panel{order:2!important;width:100%!important;position:relative!important;top:auto!important;}
  body.basmah-mobile-menu-open{overflow:hidden!important;}
  .basmah-mobile-nav{display:block!important;visibility:hidden!important;pointer-events:none!important;}
  .basmah-mobile-nav.is-open{visibility:visible!important;pointer-events:auto!important;}
  .basmah-mobile-nav-backdrop{background:rgba(45,35,28,.28)!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important;opacity:0!important;transition:opacity .26s ease!important;}
  .basmah-mobile-nav.is-open .basmah-mobile-nav-backdrop{opacity:1!important;}
  .basmah-mobile-nav-panel{top:0!important;right:0!important;left:auto!important;bottom:0!important;width:min(86vw,360px)!important;height:100dvh!important;padding:calc(max(24px,env(safe-area-inset-top)) + 72px) 18px max(22px,env(safe-area-inset-bottom))!important;align-content:start!important;gap:9px!important;border:0!important;border-left:1px solid #dfd0bf!important;border-radius:24px 0 0 24px!important;background:linear-gradient(180deg,#fffdf9 0%,#f6eee4 100%)!important;box-shadow:-24px 0 55px rgba(43,32,24,.18)!important;transform:translateX(105%)!important;transition:transform .30s cubic-bezier(.22,.72,.24,1)!important;direction:rtl!important;}
  .basmah-mobile-nav.is-open .basmah-mobile-nav-panel{transform:translateX(0)!important;}
  .basmah-mobile-nav-panel::before{content:'BASMAH';display:block;margin:0 4px 16px;color:#302a25;font-size:18px;font-weight:900;letter-spacing:.14em;direction:ltr;text-align:left;}
  .basmah-mobile-nav-panel button{min-height:52px!important;padding:12px 14px!important;border:1px solid #e2d5c5!important;border-radius:14px!important;background:#fffaf4!important;color:#302a25!important;font-size:14px!important;text-align:right!important;box-shadow:none!important;}
  .basmah-mobile-nav-panel button:active{background:#efe3d5!important;transform:scale(.985)!important;}
  .basmah-cart-float{display:none!important;left:12px!important;right:12px!important;width:auto!important;max-height:calc(100dvh - 105px)!important;border-radius:18px!important;}
  .basmah-cart-float.is-open{display:flex!important;flex-direction:column!important;}
  .basmah-cart-float-items{max-height:min(42dvh,320px)!important;}
  .basmah-cart-float-actions{grid-template-columns:1fr 1fr!important;}
}
@media(prefers-reduced-motion:reduce){#homeView.basmah-cta-leaving .basmah-tadween-hero-content,#shopView.basmah-cta-arrive.active .shop-shell,#shopView.basmah-cta-arrive.active .container,#customView.basmah-cta-arrive.active .custom-order-page{animation:none!important;}}

/* Source: basmah-v270-elegant-navigation */
/* One quiet motion language for route changes. Navigation happens first; this only
   animates the destination, so it never adds a loading delay. */
:root{
  --basmah-final-ease:cubic-bezier(.22,1,.36,1);
  --basmah-final-duration:.38s;
}

/* Neutralize older view animations so route changes never stack two effects. */
.view.active{animation:none!important;}
#productView.active .product-shell,
#productView.active .container{animation:none!important;}

.view.active.basmah-final-page-enter:not(#shopView){
  animation:basmahElegantPageEnter var(--basmah-final-duration) var(--basmah-final-ease) both!important;
  transform-origin:50% 18%;
  will-change:opacity,transform;
}
@keyframes basmahElegantPageEnter{
  from{opacity:.36;transform:translate3d(0,8px,0) scale(.997)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* The catalogue remains lightweight: animate its main regions, never 185 cards one by one. */
#shopView.active.basmah-final-page-enter .shop-hero{
  animation:basmahElegantShopEnter .31s var(--basmah-final-ease) both!important;
  will-change:opacity,transform;
}
#shopView.active.basmah-final-page-enter #shopCategoryPicker{
  animation:basmahElegantShopEnter .34s var(--basmah-final-ease) .025s both!important;
  will-change:opacity,transform;
}
#shopView.active.basmah-final-page-enter .shop-layout{
  animation:basmahElegantShopBody .36s var(--basmah-final-ease) .045s both!important;
  will-change:opacity,transform;
}
@keyframes basmahElegantShopEnter{
  from{opacity:.38;transform:translate3d(0,7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes basmahElegantShopBody{
  from{opacity:.58;transform:translate3d(0,4px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Restrained feedback for controls that actually navigate. */
.basmah-final-nav-tap{
  animation:basmahElegantNavTap .18s ease-out both!important;
}
@keyframes basmahElegantNavTap{
  0%{opacity:1}
  42%{opacity:.82}
  100%{opacity:1}
}

.basmah-final-transition-sheen{display:none!important;}

/* Browser Back and iOS swipe restoration stay immediate and stable. */
html.basmah-pop-restore .view.active,
html.basmah-pop-restore .view.active.basmah-final-page-enter{
  animation:none!important;
}

@media(max-width:640px){
  :root{--basmah-final-duration:.32s;}
  #shopView.active.basmah-final-page-enter .shop-hero,
  #shopView.active.basmah-final-page-enter #shopCategoryPicker,
  #shopView.active.basmah-final-page-enter .shop-layout{animation-duration:.30s!important;}
}
@media(prefers-reduced-motion:reduce){
  .view.active.basmah-final-page-enter,
  #shopView.active.basmah-final-page-enter .shop-hero,
  #shopView.active.basmah-final-page-enter #shopCategoryPicker,
  #shopView.active.basmah-final-page-enter .shop-layout,
  .basmah-final-nav-tap{animation:none!important;}
}

/* Source: basmah-root-performance-fix */
#productGrid .product-card{
  content-visibility:auto;
  contain-intrinsic-size:auto 430px;
}
.listing-scene-stage[data-basmah-bg]:not([data-basmah-bg-loaded="1"]){
  background-image:none!important;
  background-color:#eee5da;
}

/* Source: basmah-fawran-only-payment-style */
.basmah-fawran-payment-section{margin-top:24px}
.basmah-fawran-heading{display:grid;gap:3px;margin-bottom:12px}
.basmah-fawran-heading>strong{font-size:15px;color:var(--ink)}
.basmah-fawran-heading>small{font-size:12px;color:var(--muted)}
.basmah-fawran-options{display:grid;gap:11px}
.basmah-fawran-option{display:block;padding:15px 16px;border:1px solid #dfd1c1;border-radius:16px;background:#fffaf4;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.basmah-fawran-option:has(input[type="radio"]:checked){border-color:#8d6e50;background:#f8efe4;box-shadow:0 0 0 2px rgba(141,110,80,.10)}
.basmah-fawran-option-top{display:flex;align-items:flex-start;gap:11px}
.basmah-fawran-option-top input{margin-top:3px;accent-color:#2d2823;flex:0 0 auto}
.basmah-fawran-option-top>span{display:grid;gap:4px;min-width:0}
.basmah-fawran-option-top strong{font-size:13px;color:#2d2823}
.basmah-fawran-option-top small{font-size:11.5px;line-height:1.55;color:#7a6e63}
.basmah-fawran-detail{margin:13px 0 0 27px;padding:13px;border-radius:13px;background:#f2e7da;border:1px solid #e1d0bd;cursor:default}
html[lang="ar"] .basmah-fawran-detail{margin-left:0;margin-right:27px;text-align:right!important}
.basmah-fawran-detail>label,.basmah-fawran-detail-label{display:block;margin-bottom:7px;font-size:11px;font-weight:800;color:#6f6155}
.basmah-fawran-detail .field{background:#fff}
.basmah-fawran-alias-row{display:flex;align-items:center;gap:9px;direction:ltr}
.basmah-fawran-alias-row>strong{flex:1;min-width:0;padding:11px 13px;border:1px solid #d8c5b0;border-radius:11px;background:#fff;color:#2c2722;font-size:18px;letter-spacing:.02em}
.basmah-fawran-copy{flex:0 0 auto;min-height:42px;padding:0 15px;border:1px solid #2d2823;border-radius:11px;background:#2d2823;color:#fff;font-weight:800;font-size:12px;cursor:pointer}
.basmah-fawran-copy:active{opacity:.78}
.basmah-fawran-alias-detail>small{display:block;margin-top:8px;color:#75685d;font-size:10.5px;line-height:1.5}
@media(max-width:640px){.basmah-fawran-option{padding:14px}.basmah-fawran-detail{margin-left:0!important;margin-right:0!important}.basmah-fawran-alias-row{align-items:stretch}.basmah-fawran-copy{min-width:72px}}

/* Source: basmah-final-checkout-sticky */
/* Desktop: keep the full order summary visible while customer completes payment. */
#checkoutView.active .checkout-layout > aside.panel{
  position:sticky;
  top:96px;
  align-self:start;
  max-height:calc(100vh - 118px);
  overflow:auto;
  overscroll-behavior:contain;
}
.basmah-checkout-sticky-pay{display:none;}

@media(max-width:980px){
  #checkoutView.active{
    padding-bottom:calc(92px + env(safe-area-inset-bottom));
  }
  #checkoutView.active .checkout-layout > aside.panel{
    position:static;
    max-height:none;
    overflow:visible;
  }
  #checkoutView.active .basmah-checkout-sticky-pay{
    position:fixed;
    left:10px;
    right:10px;
    bottom:max(10px,env(safe-area-inset-bottom));
    z-index:9500;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:10px 10px 10px 14px;
    border:1px solid rgba(141,110,80,.24);
    border-radius:18px;
    background:rgba(255,253,249,.97);
    box-shadow:0 14px 42px rgba(41,31,23,.18);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  .basmah-checkout-sticky-total{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .basmah-checkout-sticky-total>span{
    color:var(--muted);
    font-size:11px;
    font-weight:750;
  }
  .basmah-checkout-sticky-total strong{
    color:var(--ink);
    font-size:19px;
    line-height:1.15;
    white-space:nowrap;
  }
  .basmah-checkout-sticky-pay .btn{
    min-width:126px;
    padding:12px 17px;
    white-space:nowrap;
  }
}
@media(max-width:420px){
  #checkoutView.active .basmah-checkout-sticky-pay{
    left:7px;right:7px;gap:8px;padding-left:12px;
  }
  .basmah-checkout-sticky-pay .btn{min-width:112px;padding-inline:13px;}
  .basmah-checkout-sticky-total strong{font-size:17px;}
}

/* Source: basmah-v230-install-upgrade-cart-remove-search */
/* Checkout installation upgrade offer */
.basmah-install-upgrade{
  margin-top:13px;
  padding:16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:15px;
  align-items:center;
  border:1px solid #d5bea5;
  border-radius:17px;
  background:
    radial-gradient(circle at 100% 0,rgba(203,166,121,.18),transparent 42%),
    linear-gradient(135deg,#fffaf3,#f5eadc);
  box-shadow:0 9px 24px rgba(74,53,36,.06);
}
.basmah-install-upgrade[hidden]{display:none!important;}
.basmah-install-upgrade-copy{min-width:0;}
.basmah-install-upgrade-badge{
  display:inline-flex;
  margin-bottom:7px;
  padding:5px 9px;
  border-radius:999px;
  background:#2f2924;
  color:#fff;
  font-size:10px;
  font-weight:850;
  letter-spacing:.04em;
}
.basmah-install-upgrade-copy>strong{
  display:block;
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
}
.basmah-install-upgrade-copy p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.basmah-install-upgrade-btn{white-space:nowrap;}
.basmah-install-upgrade.is-applied{
  border-color:#8f765f;
  box-shadow:0 0 0 1px rgba(143,118,95,.12),0 9px 24px rgba(74,53,36,.06);
}
.basmah-install-upgrade.is-applied .basmah-install-upgrade-badge{
  background:var(--success);
}

/* Remove directly below each price in the header cart summary. */
.basmah-cart-float-price-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
}
.basmah-cart-float-remove{
  padding:0;
  border:0;
  background:transparent;
  color:var(--danger);
  font-size:10px;
  font-weight:750;
  text-decoration:underline;
  text-underline-offset:2px;
}
.basmah-cart-float-remove:hover{opacity:.72;}
html[lang="ar"] .basmah-cart-float-price-wrap{align-items:flex-start;}

/* The cart summary should work from the cart icon on mobile too. */
@media(max-width:980px){
  .basmah-cart-float.is-open{
    display:flex!important;
    flex-direction:column!important;
  }
}
@media(max-width:640px){
  .basmah-install-upgrade{
    grid-template-columns:1fr;
    gap:11px;
  }
  .basmah-install-upgrade-btn{width:100%;}
}

/* Ensure loaded search artwork fully occupies the thumbnail box. */
.global-search-thumb .listing-mockup-fit,
.global-search-thumb .product-mockup,
.global-search-thumb .listing-scene-stage{
  display:block;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
}

/* Source: basmah-v231-sticky-product-preview */
/* Keep the configured artwork visible while the customer chooses product options. */
@media (min-width:981px){
  #productView .product-gallery{
    align-self:stretch!important;
    position:relative!important;
  }
  #productView .preview-stack{
    position:sticky!important;
    top:136px!important;
    z-index:20!important;
  }
}

/* On tablet/mobile the original full preview is preserved at the top of the page.
   Once it would scroll away, the same live preview becomes a compact pinned panel. */
.basmah-preview-placeholder{
  width:100%;
  flex:0 0 auto;
  pointer-events:none;
}
@media (max-width:980px){
  #productView .preview-stack.basmah-preview-pinned{
    position:fixed!important;
    top:124px!important;
    left:50%!important;
    right:auto!important;
    width:min(720px,calc(100vw - 24px))!important;
    transform:translateX(-50%)!important;
    z-index:45!important;
    padding:6px!important;
    border:1px solid rgba(141,110,80,.20)!important;
    border-radius:18px!important;
    background:rgba(255,253,249,.96)!important;
    box-shadow:0 14px 38px rgba(43,32,23,.17)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  #productView .preview-stack.basmah-preview-pinned .preview-stage{
    width:100%!important;
    height:clamp(190px,30vh,260px)!important;
    min-height:190px!important;
    max-height:260px!important;
    padding:14px!important;
    border-radius:13px!important;
  }
  #productView .preview-stack.basmah-preview-pinned .preview-stage.has-mockup-front{
    height:clamp(190px,30vh,260px)!important;
    min-height:190px!important;
    max-height:260px!important;
    padding:0!important;
    background:#ece5db!important;
  }
  #productView .preview-stack.basmah-preview-pinned .preview-stage.has-mockup-front .mockup-zoom-layer{
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }
  #productView .preview-stack.basmah-preview-pinned .preview-stage.has-mockup-front .preview-mockup-image{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    background:#ece5db!important;
  }
  #productView .preview-stack.basmah-preview-pinned .zoom-hint,
  #productView .preview-stack.basmah-preview-pinned .preview-magnifier{
    display:none!important;
  }
}
@media (max-width:640px){
  #productView .preview-stack.basmah-preview-pinned{
    top:120px!important;
    width:calc(100vw - 18px)!important;
    padding:5px!important;
    border-radius:16px!important;
  }
  #productView .preview-stack.basmah-preview-pinned .preview-stage,
  #productView .preview-stack.basmah-preview-pinned .preview-stage.has-mockup-front{
    height:clamp(175px,27vh,215px)!important;
    min-height:175px!important;
    max-height:215px!important;
    border-radius:11px!important;
  }
}

/* Source: basmah-v232-checkout-summary-root-fix */
/* Checkout-only compact mode: no full footer, just copyright. */
body.basmah-checkout-mode footer{
  padding:0!important;
  background:#211e1a!important;
}
body.basmah-checkout-mode footer .footer-grid{
  display:none!important;
}
body.basmah-checkout-mode footer .footer-bottom{
  margin:0!important;
  padding:9px 16px!important;
  min-height:34px!important;
  border-top:0!important;
  justify-content:center!important;
  font-size:10.5px!important;
}

/* Keep checkout as compact as possible on desktop. */
@media (min-width:981px){
  #checkoutView.active .page-header{
    padding:10px 0 5px!important;
  }
  #checkoutView.active .page-header .eyebrow{
    font-size:10px!important;
    margin-bottom:2px!important;
  }
  #checkoutView.active .page-header h2{
    font-size:clamp(27px,2.6vw,38px)!important;
  }
  #checkoutView.active .checkout-layout{
    grid-template-columns:minmax(0,1fr) 350px!important;
    gap:14px!important;
    padding:4px 0 12px!important;
    align-items:start!important;
  }
  #checkoutView.active .checkout-layout>.panel{
    padding:13px!important;
    border-radius:18px!important;
  }
  #checkoutView.active .checkout-layout>.panel:first-child{
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr)!important;
    gap:12px 14px!important;
    align-items:start!important;
  }
  #checkoutView.active .checkout-layout>.panel:first-child>.checkout-section:first-child{
    grid-column:1!important;
    grid-row:1 / span 2!important;
  }
  #checkoutView.active #checkoutInstallSection{
    grid-column:2!important;
    grid-row:1!important;
  }
  #checkoutView.active .basmah-fawran-payment-section{
    grid-column:2!important;
    grid-row:2!important;
  }
  #checkoutView.active .checkout-section{
    margin-top:0!important;
  }
  #checkoutView.active .checkout-section h3{
    margin:0 0 7px!important;
    font-size:17px!important;
  }
  #checkoutView.active .form-grid{
    gap:7px 8px!important;
  }
  #checkoutView.active .form-group label{
    margin-bottom:3px!important;
    font-size:11px!important;
  }
  #checkoutView.active .field{
    padding:8px 10px!important;
    min-height:36px!important;
    border-radius:10px!important;
    font-size:12px!important;
  }
  #checkoutView.active textarea#notes{
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    resize:none!important;
    overflow:auto!important;
  }
  #checkoutView.active .choice-row{
    gap:6px!important;
  }
  #checkoutView.active .choice{
    padding:8px 10px!important;
    border-radius:11px!important;
    font-size:11.5px!important;
  }
  #checkoutView.active .basmah-install-upgrade{
    margin-top:7px!important;
    padding:9px!important;
    gap:8px!important;
    border-radius:12px!important;
  }
  #checkoutView.active .basmah-install-upgrade-badge{
    margin-bottom:4px!important;
    padding:3px 7px!important;
    font-size:8.5px!important;
  }
  #checkoutView.active .basmah-install-upgrade-copy>strong{
    font-size:11px!important;
    line-height:1.35!important;
  }
  #checkoutView.active .basmah-install-upgrade-copy p{
    margin-top:3px!important;
    font-size:9.5px!important;
  }
  #checkoutView.active .basmah-install-upgrade-btn{
    padding:8px 10px!important;
    font-size:10px!important;
  }
  #checkoutView.active .basmah-fawran-payment-section{
    margin-top:0!important;
  }
  #checkoutView.active .basmah-fawran-heading{
    margin-bottom:6px!important;
    gap:1px!important;
  }
  #checkoutView.active .basmah-fawran-heading>strong{font-size:12.5px!important;}
  #checkoutView.active .basmah-fawran-heading>small{font-size:9.5px!important;}
  #checkoutView.active .basmah-fawran-options{
    gap:6px!important;
  }
  #checkoutView.active .basmah-fawran-option{
    padding:8px 9px!important;
    border-radius:11px!important;
  }
  #checkoutView.active .basmah-fawran-option-top{
    gap:7px!important;
  }
  #checkoutView.active .basmah-fawran-option-top strong{
    font-size:10.5px!important;
  }
  #checkoutView.active .basmah-fawran-option-top small{
    font-size:9px!important;
    line-height:1.3!important;
  }
  #checkoutView.active .basmah-fawran-detail{
    margin-top:6px!important;
    padding:7px!important;
    border-radius:9px!important;
  }
  #checkoutView.active .basmah-fawran-alias-row>strong{
    padding:7px 9px!important;
    font-size:14px!important;
  }
  #checkoutView.active .basmah-fawran-copy{
    min-height:34px!important;
    padding:0 10px!important;
    font-size:10px!important;
  }
  #checkoutView.active .checkout-coupon{
    margin:8px 0!important;
    padding:9px!important;
    border-radius:11px!important;
  }
  #checkoutView.active .checkout-coupon-heading{
    margin-bottom:5px!important;
    font-size:10.5px!important;
  }
  #checkoutView.active .checkout-coupon-row{
    gap:5px!important;
  }
  #checkoutView.active .checkout-coupon-row .btn{
    min-width:72px!important;
    padding:8px 10px!important;
    font-size:10.5px!important;
  }
  #checkoutView.active .checkout-coupon-message{
    min-height:12px!important;
    margin-top:4px!important;
    font-size:9.5px!important;
  }
  #checkoutView.active aside.panel>h3{
    margin-bottom:7px!important;
    font-size:18px!important;
  }
  #checkoutView.active aside.panel .summary-line{
    padding:6px 0!important;
    font-size:11px!important;
  }
  #checkoutView.active aside.panel .summary-line.total{
    margin-top:3px!important;
    padding-top:9px!important;
    font-size:15px!important;
  }
  #checkoutView.active #placeOrderButton{
    margin-top:10px!important;
    padding:10px 15px!important;
  }
  #checkoutView.active #checkoutContinueShopping{
    margin-top:6px!important;
    padding:9px 15px!important;
  }
}

/* On smaller screens keep normal scrolling; only remove the textarea resize triangle. */
@media (max-width:980px){
  #checkoutView textarea#notes{
    min-height:58px!important;
    height:58px!important;
    resize:none!important;
  }
}

/* Source: basmah-v233-checkout-final-polish */
/* Checkout occupies the viewport cleanly. The copyright strip sits at the real bottom,
   so the site's dark hero/root background can never show as an empty brown block. */
html:has(body.basmah-checkout-mode){
  background:#211e1a!important;
}
body.basmah-checkout-mode{
  min-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
  background:var(--bg)!important;
}
body.basmah-checkout-mode main{
  flex:1 0 auto!important;
}
body.basmah-checkout-mode footer{
  flex:0 0 auto!important;
  margin-top:auto!important;
  width:100%!important;
  background:#211e1a!important;
}
body.basmah-checkout-mode footer .footer-bottom{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:10px 18px!important;
  min-height:34px!important;
  background:#211e1a!important;
  color:#aaa39b!important;
  border:0!important;
  font-size:10.5px!important;
}

/* Upgrade card only belongs to the Delivery-only state. */
#checkoutInstallUpgradeOffer[hidden]{
  display:none!important;
}

/* Source: basmah-v234-checkout-address-service-clean */
/* Checkout columns: customer details on one side; address and payment stacked on the other. */
@media (min-width:981px){
  #checkoutView.active .checkout-layout>.panel:first-child{
    display:grid!important;
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important;
    gap:12px 14px!important;
    align-items:start!important;
  }
  #checkoutView.active .basmah-customer-section{
    grid-column:1!important;
    grid-row:1 / span 2!important;
  }
  #checkoutView.active .basmah-address-section{
    grid-column:2!important;
    grid-row:1!important;
  }
  #checkoutView.active .basmah-fawran-payment-section{
    grid-column:2!important;
    grid-row:2!important;
  }
  #checkoutView.active .basmah-address-section,
  #checkoutView.active .basmah-fawran-payment-section{
    margin-top:0!important;
  }
}

/* Upgrade now belongs to the order summary, not the customer form. */
#checkoutView .basmah-summary-upgrade{
  grid-template-columns:1fr!important;
  gap:8px!important;
  margin:8px 0 10px!important;
  padding:10px!important;
}
#checkoutView .basmah-summary-upgrade .basmah-install-upgrade-btn{
  width:100%!important;
}
#checkoutView .basmah-checkout-service-price{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}
html[lang="ar"] #checkoutView .basmah-checkout-service-price{
  align-items:flex-start;
}
#checkoutView .basmah-checkout-service-remove{
  padding:0;
  border:0;
  background:transparent;
  color:var(--danger);
  font-size:10px;
  font-weight:750;
  text-decoration:underline;
  text-underline-offset:2px;
}
#checkoutView .basmah-checkout-service-remove:hover{opacity:.72;}

/* The deleted delivery/fixing options must never reappear through an older renderer. */
#checkoutInstallSection{display:none!important;}

/* Source: basmah-v235-portrait-checkout-delivery-default */
/* Desktop checkout: intentionally narrower, portrait-style composition. */
@media (min-width:981px){
  #checkoutView.active .container{
    width:min(900px,calc(100% - 34px))!important;
  }

  #checkoutView.active .checkout-layout{
    grid-template-columns:280px minmax(0,1fr)!important;
    gap:16px!important;
    padding:6px 0 14px!important;
    align-items:start!important;
  }

  /* Customer → Address → Payment, all in one vertical form column. */
  #checkoutView.active .checkout-layout>.panel:first-child{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    padding:15px!important;
  }

  #checkoutView.active .basmah-customer-section,
  #checkoutView.active .basmah-address-section,
  #checkoutView.active .basmah-fawran-payment-section{
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    margin:0!important;
  }

  #checkoutView.active .basmah-address-section{
    padding-top:12px!important;
    border-top:1px solid var(--line)!important;
  }

  #checkoutView.active .basmah-fawran-payment-section{
    padding-top:12px!important;
    border-top:1px solid var(--line)!important;
  }

  #checkoutView.active .form-grid{
    grid-template-columns:1fr 1fr!important;
    gap:8px 9px!important;
  }

  #checkoutView.active .basmah-address-section .form-group.full,
  #checkoutView.active .basmah-customer-section .form-group.full{
    grid-column:1/-1!important;
  }

  #checkoutView.active aside.panel{
    width:100%!important;
  }
}

/* Keep the portrait feel on medium screens as well. */
@media (min-width:641px) and (max-width:980px){
  #checkoutView.active .container{
    width:min(720px,calc(100% - 28px))!important;
  }
  #checkoutView.active .checkout-layout{
    grid-template-columns:1fr!important;
  }
  #checkoutView.active .checkout-layout>.panel:first-child{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  #checkoutView.active .basmah-customer-section,
  #checkoutView.active .basmah-address-section,
  #checkoutView.active .basmah-fawran-payment-section{
    width:100%!important;
    margin:0!important;
  }
  #checkoutView.active .basmah-address-section,
  #checkoutView.active .basmah-fawran-payment-section{
    padding-top:12px!important;
    border-top:1px solid var(--line)!important;
  }
}

/* Source: basmah-v236-checkout-balanced-columns */
@media (min-width:981px){
  /* Keep the overall checkout portrait/compact. */
  #checkoutView.active .container{
    width:min(900px,calc(100% - 34px))!important;
  }

  /* In RTL: first track is the RIGHT side.
     Customer/Address/Payment = wide. Your Order = slim. */
  #checkoutView.active .checkout-layout{
    grid-template-columns:minmax(0,1fr) 270px!important;
    gap:16px!important;
    align-items:stretch!important;
  }

  #checkoutView.active .checkout-layout>.panel:first-child{
    grid-column:1!important;
    align-self:stretch!important;
    height:100%!important;
  }

  #checkoutView.active .checkout-layout>aside.panel{
    grid-column:2!important;
    position:static!important;
    top:auto!important;
    align-self:stretch!important;
    height:100%!important;
    max-height:none!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
  }

  /* Keep the order actions visually anchored at the bottom of the equal-height card. */
  #checkoutView.active #placeOrderButton{
    margin-top:auto!important;
  }

  #checkoutView.active #checkoutContinueShopping{
    flex:0 0 auto!important;
  }
}

/* English/LTR naturally mirrors the composition:
   customer form stays the wide first column and Your Order stays slim. */

/* Source: basmah-v238-mobile-only-final-fixes */
@media (max-width:640px){
  body.basmah-checkout-mode #checkoutView.active{padding-bottom:calc(168px + env(safe-area-inset-bottom))!important;}
  body.basmah-checkout-mode #checkoutView.active .basmah-checkout-sticky-pay{left:8px!important;right:8px!important;bottom:calc(72px + env(safe-area-inset-bottom))!important;z-index:10020!important;padding:9px 9px 9px 12px!important;border-radius:16px!important;}
  body.basmah-checkout-mode #checkoutView.active .basmah-checkout-sticky-total strong{font-size:17px!important;}
  body.basmah-checkout-mode #checkoutView.active .basmah-checkout-sticky-pay .btn{min-width:118px!important;min-height:43px!important;padding:10px 13px!important;}
  body.basmah-checkout-mode .whatsapp-float{right:9px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;z-index:9999!important;}
  body.basmah-checkout-mode .whatsapp-float-pill{min-width:56px!important;width:56px!important;height:56px!important;padding:3px!important;background:rgba(255,255,255,.36)!important;}
  body.basmah-checkout-mode .whatsapp-float-icon{width:50px!important;height:50px!important;flex:0 0 50px!important;border-width:3px!important;}
  body.basmah-checkout-mode .whatsapp-float-label{display:none!important;}

  .service-modal-backdrop{align-items:center!important;justify-content:center!important;padding:12px 10px!important;}
  .service-modal,.service-modal[data-service-type="contact"],.service-modal[data-service-type="delivery"],.service-modal[data-service-type="care"],.service-modal[data-service-type="returns"]{width:100%!important;height:calc(100dvh - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow-y:auto!important;overflow-x:hidden!important;border-radius:20px!important;overscroll-behavior:contain!important;}
  .service-modal-head,.service-modal[data-service-type="delivery"] .service-modal-head,.service-modal[data-service-type="returns"] .service-modal-head{padding:23px 54px 16px 18px!important;}
  html[dir="rtl"] .service-modal-head,html[dir="rtl"] .service-modal[data-service-type="delivery"] .service-modal-head,html[dir="rtl"] .service-modal[data-service-type="returns"] .service-modal-head{padding:23px 18px 16px 54px!important;}
  .service-modal-body,.service-modal[data-service-type="delivery"] .service-modal-body,.service-modal[data-service-type="returns"] .service-modal-body{padding:17px 18px 24px!important;}
  .service-modal-close{position:sticky!important;float:right!important;top:10px!important;right:10px!important;margin:0 0 -42px auto!important;width:38px!important;height:38px!important;z-index:20!important;}
  html[dir="rtl"] .service-modal-close{float:left!important;right:auto!important;left:10px!important;margin:0 auto -42px 0!important;}
  .service-modal-title{font-size:clamp(28px,9vw,38px)!important;}
  .service-modal-intro{font-size:13px!important;line-height:1.55!important;}
  .service-modal-grid{grid-template-columns:1fr!important;gap:9px!important;}
  .service-info-card{padding:13px 14px!important;border-radius:13px!important;}
  .service-info-card.wide{grid-column:auto!important;}

  #productView .preview-stack.basmah-mobile-preview-locked{position:fixed!important;top:72px!important;left:8px!important;right:8px!important;width:auto!important;height:auto!important;z-index:49!important;transform:none!important;padding:4px!important;border:1px solid rgba(141,110,80,.22)!important;border-radius:14px!important;background:rgba(255,253,249,.97)!important;box-shadow:0 12px 32px rgba(43,32,23,.17)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;}
  #productView .preview-stack.basmah-mobile-preview-locked .preview-stage,#productView .preview-stack.basmah-mobile-preview-locked .preview-stage.has-mockup-front{width:100%!important;height:168px!important;min-height:168px!important;max-height:168px!important;padding:8px!important;border-radius:10px!important;overflow:hidden!important;}
  #productView .preview-stack.basmah-mobile-preview-locked .preview-stage.has-mockup-front{padding:0!important;}
  #productView .preview-stack.basmah-mobile-preview-locked .mockup-zoom-layer{width:100%!important;height:100%!important;overflow:hidden!important;}
  #productView .preview-stack.basmah-mobile-preview-locked .preview-mockup-image{width:100%!important;height:100%!important;object-fit:contain!important;background:#ece5db!important;}
  #productView .preview-stack.basmah-mobile-preview-locked .zoom-hint,#productView .preview-stack.basmah-mobile-preview-locked .preview-magnifier{display:none!important;}
  .basmah-mobile-preview-space{width:100%;pointer-events:none;}
}

/* Source: basmah-v239-mobile-following-preview */
@media (max-width:640px){
  /* The live preview is portaled to <body> while scrolling through product options,
     so it genuinely follows the viewport instead of being constrained by product layout. */
  body > .preview-stack.basmah-mobile-follow-preview{
    position:fixed!important;
    top:74px!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    height:auto!important;
    z-index:10010!important;
    margin:0!important;
    padding:4px!important;
    transform:none!important;
    border:1px solid rgba(141,110,80,.22)!important;
    border-radius:14px!important;
    background:rgba(255,253,249,.98)!important;
    box-shadow:0 12px 34px rgba(43,32,23,.18)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .preview-stage,
  body > .preview-stack.basmah-mobile-follow-preview .preview-stage.has-mockup-front{
    width:100%!important;
    height:142px!important;
    min-height:142px!important;
    max-height:142px!important;
    padding:7px!important;
    overflow:hidden!important;
    border-radius:10px!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .preview-stage.has-mockup-front{
    padding:0!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .mockup-zoom-layer{
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .preview-mockup-image{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    background:#ece5db!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .zoom-hint,
  body > .preview-stack.basmah-mobile-follow-preview .preview-magnifier{
    display:none!important;
  }

  .basmah-mobile-follow-preview-placeholder{
    width:100%;
    pointer-events:none;
  }
}

/* Source: basmah-v240-mobile-preview-polish */
@media (max-width:640px){
  /* Small elegant floating live preview instead of the previous full-width banner. */
  body > .preview-stack.basmah-mobile-follow-preview{
    top:78px!important;
    left:50%!important;
    right:auto!important;
    width:min(252px,calc(100vw - 30px))!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    padding:5px!important;
    border:1px solid rgba(141,110,80,.22)!important;
    border-radius:16px!important;
    background:rgba(255,253,249,.985)!important;
    box-shadow:0 12px 30px rgba(43,32,23,.16)!important;
    overflow:hidden!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .preview-stage,
  body > .preview-stack.basmah-mobile-follow-preview .preview-stage.has-mockup-front{
    width:100%!important;
    height:126px!important;
    min-height:126px!important;
    max-height:126px!important;
    padding:6px!important;
    border-radius:11px!important;
    overflow:hidden!important;
    background:#f3ede4!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .preview-stage.has-mockup-front{
    padding:0!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .mockup-zoom-layer{
    width:100%!important;
    height:100%!important;
    display:block!important;
    overflow:hidden!important;
    border-radius:10px!important;
    background:#f3ede4!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .preview-mockup-image{
    width:100%!important;
    height:100%!important;
    display:block!important;
    object-fit:cover!important;
    object-position:center!important;
    background:#f3ede4!important;
    border-radius:10px!important;
  }

  /* Keep the live frame/art overlay clipped neatly inside the mini preview. */
  body > .preview-stack.basmah-mobile-follow-preview .frame-renderer{
    max-width:100%!important;
    max-height:100%!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .zoom-hint,
  body > .preview-stack.basmah-mobile-follow-preview .preview-magnifier,
  body > .preview-stack.basmah-mobile-follow-preview .drag-hint,
  body > .preview-stack.basmah-mobile-follow-preview .preview-controls{
    display:none!important;
  }

  /* Preserve space where the original preview lives, but keep it visually clean. */
  .basmah-mobile-follow-preview-placeholder{
    min-height:1px!important;
  }
}

/* Source: basmah-v241-mobile-preview-correct-ratio-header-hide */
@media (max-width:640px){
  /* Product page only: hide the site header while the live preview follows the customer. */
  body.basmah-mobile-product-preview-following .site-header{
    transform:translateY(-110%)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:transform .22s ease,opacity .18s ease!important;
  }

  /* Restore normal header transition when it comes back. */
  body:not(.basmah-mobile-product-preview-following) .site-header{
    transition:transform .22s ease,opacity .18s ease!important;
  }

  /* Preserve the preview's REAL ratio captured before it is moved to <body>. */
  body > .preview-stack.basmah-mobile-follow-preview{
    top:8px!important;
    left:50%!important;
    right:auto!important;
    width:min(var(--basmah-follow-width,calc(100vw - 16px)),calc(100vw - 16px))!important;
    height:auto!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    padding:4px!important;
    border:1px solid rgba(141,110,80,.22)!important;
    border-radius:16px!important;
    background:rgba(255,253,249,.985)!important;
    box-shadow:0 12px 32px rgba(43,32,23,.17)!important;
    overflow:hidden!important;
    z-index:10020!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .preview-stage,
  body > .preview-stack.basmah-mobile-follow-preview .preview-stage.has-mockup-front{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:var(--basmah-follow-stage-ratio,4/3)!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:11px!important;
    background:#f3ede4!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .mockup-zoom-layer{
    display:block!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    border-radius:10px!important;
    background:#f3ede4!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .preview-mockup-image{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:#f3ede4!important;
    border-radius:10px!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .frame-renderer{
    max-width:100%!important;
    max-height:100%!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .zoom-hint,
  body > .preview-stack.basmah-mobile-follow-preview .preview-magnifier,
  body > .preview-stack.basmah-mobile-follow-preview .drag-hint,
  body > .preview-stack.basmah-mobile-follow-preview .preview-controls{
    display:none!important;
  }
}

/* Source: basmah-v242-mobile-checkout-popup-only */
/* ============================================================
   MOBILE ONLY — requested edits on the supplied previous version
   ============================================================ */
@media (max-width:640px){

  /* 1) CHECKOUT:
     Total + Confirm Order remain at the true bottom.
     WhatsApp sits clearly ABOVE the checkout bar. */
  body.basmah-checkout-mode #checkoutView.active{
    padding-bottom:calc(154px + env(safe-area-inset-bottom))!important;
  }

  body.basmah-checkout-mode #checkoutView.active .basmah-checkout-sticky-pay{
    left:8px!important;
    right:8px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    z-index:10030!important;
  }

  body.basmah-checkout-mode .whatsapp-float,
  html[lang="ar"] body.basmah-checkout-mode #siteWhatsappLink,
  html[lang="en"] body.basmah-checkout-mode #siteWhatsappLink{
    bottom:calc(72px + env(safe-area-inset-bottom))!important;
    z-index:10040!important;
  }

  /* Checkout only: keep WhatsApp compact so it does not cover the form. */
  body.basmah-checkout-mode .whatsapp-float-pill{
    min-width:54px!important;
    width:54px!important;
    height:54px!important;
    padding:2px!important;
  }
  body.basmah-checkout-mode .whatsapp-float-icon{
    width:50px!important;
    height:50px!important;
    flex:0 0 50px!important;
  }
  body.basmah-checkout-mode .whatsapp-float-label{
    display:none!important;
  }

  /* 2) CONTACT / DELIVERY / CARE / RETURNS:
     Near-full-screen dialog with a visible outside margin for tap-to-close. */
  .service-modal-backdrop{
    align-items:center!important;
    justify-content:center!important;
    padding:10px 12px!important;
  }

  .service-modal,
  .service-modal[data-service-type="contact"],
  .service-modal[data-service-type="delivery"],
  .service-modal[data-service-type="care"],
  .service-modal[data-service-type="returns"]{
    position:relative!important;
    width:calc(100vw - 24px)!important;
    height:auto!important;
    max-height:calc(100dvh - 20px)!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important; /* fallback only for very short phone screens */
    border-radius:18px!important;
    overscroll-behavior:contain!important;
  }

  .service-modal-head,
  .service-modal[data-service-type="contact"] .service-modal-head,
  .service-modal[data-service-type="delivery"] .service-modal-head,
  .service-modal[data-service-type="care"] .service-modal-head,
  .service-modal[data-service-type="returns"] .service-modal-head{
    padding:15px 45px 9px 13px!important;
  }

  html[dir="rtl"] .service-modal-head,
  html[dir="rtl"] .service-modal[data-service-type="contact"] .service-modal-head,
  html[dir="rtl"] .service-modal[data-service-type="delivery"] .service-modal-head,
  html[dir="rtl"] .service-modal[data-service-type="care"] .service-modal-head,
  html[dir="rtl"] .service-modal[data-service-type="returns"] .service-modal-head{
    padding:15px 13px 9px 45px!important;
  }

  .service-modal-close{
    position:absolute!important;
    top:8px!important;
    right:8px!important;
    left:auto!important;
    width:32px!important;
    height:32px!important;
    margin:0!important;
    float:none!important;
    font-size:20px!important;
    z-index:30!important;
  }
  html[dir="rtl"] .service-modal-close{
    right:auto!important;
    left:8px!important;
  }

  .service-modal-kicker{
    margin-bottom:3px!important;
    font-size:8px!important;
    line-height:1.2!important;
    letter-spacing:.10em!important;
  }

  .service-modal-title,
  .service-modal[data-service-type="contact"] .service-modal-title{
    font-size:clamp(22px,7vw,29px)!important;
    line-height:1.03!important;
  }

  .service-modal-intro,
  .service-modal[data-service-type="contact"] .service-modal-intro,
  .service-modal[data-service-type="delivery"] .service-modal-intro,
  .service-modal[data-service-type="returns"] .service-modal-intro{
    max-width:none!important;
    margin:5px 0 0!important;
    font-size:9.8px!important;
    line-height:1.34!important;
  }

  .service-modal-body,
  .service-modal[data-service-type="contact"] .service-modal-body,
  .service-modal[data-service-type="delivery"] .service-modal-body,
  .service-modal[data-service-type="care"] .service-modal-body,
  .service-modal[data-service-type="returns"] .service-modal-body{
    padding:9px 13px 12px!important;
  }

  /* Two-column cards save vertical space while remaining readable. */
  .service-modal-grid,
  .service-modal[data-service-type="delivery"] .service-modal-grid,
  .service-modal[data-service-type="returns"] .service-modal-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
  }

  .service-info-card,
  .service-modal[data-service-type="delivery"] .service-info-card,
  .service-modal[data-service-type="returns"] .service-info-card{
    padding:7px 8px!important;
    border-radius:9px!important;
  }

  .service-info-card.wide{
    grid-column:1/-1!important;
  }

  .service-info-card strong,
  .service-modal[data-service-type="delivery"] .service-info-card strong,
  .service-modal[data-service-type="returns"] .service-info-card strong{
    margin-bottom:2px!important;
    font-size:9.5px!important;
    line-height:1.25!important;
  }

  .service-info-card p,
  .service-modal[data-service-type="delivery"] .service-info-card p,
  .service-modal[data-service-type="returns"] .service-info-card p{
    margin:0!important;
    font-size:8.6px!important;
    line-height:1.30!important;
  }

  .service-note,
  .service-modal[data-service-type="contact"] .service-note,
  .service-modal[data-service-type="delivery"] .service-note,
  .service-modal[data-service-type="returns"] .service-note{
    margin-top:6px!important;
    padding:7px 8px!important;
    border-radius:9px!important;
    font-size:8.7px!important;
    line-height:1.30!important;
  }

  /* Contact page compact grid. */
  .service-modal[data-service-type="contact"] .service-contact-list{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:12px!important;
    row-gap:0!important;
  }
  .service-contact-row,
  .service-modal[data-service-type="contact"] .service-contact-row{
    min-width:0!important;
    padding:6px 0!important;
    gap:2px!important;
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .service-contact-row span{
    font-size:8.4px!important;
    line-height:1.2!important;
  }
  .service-contact-row a,
  .service-modal[data-service-type="contact"] .service-contact-row a{
    font-size:9.3px!important;
    line-height:1.25!important;
    overflow-wrap:anywhere!important;
  }

  .service-modal-actions,
  .service-modal[data-service-type="contact"] .service-modal-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    margin-top:7px!important;
  }
  .service-modal-actions a,
  .service-modal[data-service-type="contact"] .service-modal-actions a{
    min-height:31px!important;
    padding:6px 7px!important;
    font-size:8.8px!important;
  }

  /* Care Guide: compact two-column bullet list to avoid a tall single column. */
  .service-bullets{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px 8px!important;
  }
  .service-bullets li{
    padding-left:18px!important;
    font-size:8.8px!important;
    line-height:1.32!important;
  }
  html[lang="ar"] .service-bullets li{
    padding-left:0!important;
    padding-right:18px!important;
  }
  .service-bullets li::before{
    width:14px!important;
    height:14px!important;
    font-size:8px!important;
    top:1px!important;
  }
}

/* Source: basmah-v243-mobile-portrait-service-popups */
@media (max-width:640px){
  .service-modal-backdrop{
    align-items:center!important;
    justify-content:center!important;
    padding:28px 18px!important;
  }

  .service-modal,
  .service-modal[data-service-type="contact"],
  .service-modal[data-service-type="delivery"],
  .service-modal[data-service-type="care"],
  .service-modal[data-service-type="returns"]{
    width:min(88vw,390px)!important;
    height:calc(100dvh - 56px)!important;
    max-width:390px!important;
    max-height:calc(100dvh - 56px)!important;
    min-height:0!important;
    margin:0 auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    border-radius:22px!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .service-modal-head,
  .service-modal[data-service-type="contact"] .service-modal-head,
  .service-modal[data-service-type="delivery"] .service-modal-head,
  .service-modal[data-service-type="care"] .service-modal-head,
  .service-modal[data-service-type="returns"] .service-modal-head{
    padding:17px 46px 10px 14px!important;
  }

  html[dir="rtl"] .service-modal-head,
  html[dir="rtl"] .service-modal[data-service-type="contact"] .service-modal-head,
  html[dir="rtl"] .service-modal[data-service-type="delivery"] .service-modal-head,
  html[dir="rtl"] .service-modal[data-service-type="care"] .service-modal-head,
  html[dir="rtl"] .service-modal[data-service-type="returns"] .service-modal-head{
    padding:17px 14px 10px 46px!important;
  }

  .service-modal-title,
  .service-modal[data-service-type="contact"] .service-modal-title{
    font-size:clamp(24px,7.2vw,31px)!important;
    line-height:1.04!important;
  }

  .service-modal-intro,
  .service-modal[data-service-type="contact"] .service-modal-intro,
  .service-modal[data-service-type="delivery"] .service-modal-intro,
  .service-modal[data-service-type="returns"] .service-modal-intro{
    margin-top:6px!important;
    font-size:10.2px!important;
    line-height:1.38!important;
  }

  .service-modal-body,
  .service-modal[data-service-type="contact"] .service-modal-body,
  .service-modal[data-service-type="delivery"] .service-modal-body,
  .service-modal[data-service-type="care"] .service-modal-body,
  .service-modal[data-service-type="returns"] .service-modal-body{
    padding:10px 14px 14px!important;
  }

  /* Portrait proportions: use one readable column rather than a wide square grid. */
  .service-modal-grid,
  .service-modal[data-service-type="delivery"] .service-modal-grid,
  .service-modal[data-service-type="returns"] .service-modal-grid{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }

  .service-info-card,
  .service-modal[data-service-type="delivery"] .service-info-card,
  .service-modal[data-service-type="returns"] .service-info-card{
    padding:8px 10px!important;
    border-radius:11px!important;
  }

  .service-info-card.wide{
    grid-column:auto!important;
  }

  .service-info-card strong{
    font-size:10.5px!important;
    margin-bottom:2px!important;
  }

  .service-info-card p,
  .service-modal[data-service-type="delivery"] .service-info-card p,
  .service-modal[data-service-type="returns"] .service-info-card p{
    font-size:9.2px!important;
    line-height:1.32!important;
  }

  .service-note,
  .service-modal[data-service-type="contact"] .service-note,
  .service-modal[data-service-type="delivery"] .service-note,
  .service-modal[data-service-type="returns"] .service-note{
    margin-top:7px!important;
    padding:8px 9px!important;
    font-size:9.1px!important;
    line-height:1.32!important;
  }

  .service-modal[data-service-type="contact"] .service-contact-list{
    grid-template-columns:1fr!important;
    row-gap:0!important;
  }

  .service-contact-row,
  .service-modal[data-service-type="contact"] .service-contact-row{
    padding:6px 0!important;
    gap:2px!important;
  }

  .service-modal-actions,
  .service-modal[data-service-type="contact"] .service-modal-actions{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    margin-top:8px!important;
  }

  .service-modal-actions a,
  .service-modal[data-service-type="contact"] .service-modal-actions a{
    min-height:33px!important;
    padding:7px 8px!important;
    font-size:9px!important;
  }

  /* Care guide remains portrait too. */
  .service-bullets{
    grid-template-columns:1fr!important;
    gap:6px!important;
  }
}

/* Source: basmah-v243-mobile-smooth-preview-lock */
@media (max-width:640px){
  body > .preview-stack.basmah-mobile-follow-preview{
    will-change:top,left,transform,box-shadow!important;
  }
  body.basmah-mobile-product-preview-following .site-header{
    transition:transform .30s cubic-bezier(.22,.78,.22,1),opacity .22s ease!important;
  }
}

/* Source: basmah-v244-mobile-popup-fill */
@media (max-width:640px){
  /* Keep the exact approved popup dimensions from v243. */
  .service-modal,
  .service-modal[data-service-type="contact"],
  .service-modal[data-service-type="delivery"],
  .service-modal[data-service-type="care"],
  .service-modal[data-service-type="returns"]{
    display:flex!important;
    flex-direction:column!important;
  }

  .service-modal-head{
    flex:0 0 auto!important;
  }

  .service-modal-body,
  .service-modal[data-service-type="contact"] .service-modal-body,
  .service-modal[data-service-type="delivery"] .service-modal-body,
  .service-modal[data-service-type="care"] .service-modal-body,
  .service-modal[data-service-type="returns"] .service-modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow-y:auto!important;
  }

  /* Delivery + Returns: cards expand vertically through the popup body. */
  .service-modal[data-service-type="delivery"] .service-modal-grid,
  .service-modal[data-service-type="returns"] .service-modal-grid{
    flex:1 1 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-auto-rows:minmax(min-content,1fr)!important;
    align-content:stretch!important;
    gap:7px!important;
  }

  .service-modal[data-service-type="delivery"] .service-info-card,
  .service-modal[data-service-type="returns"] .service-info-card{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:10px 11px!important;
  }

  /* Care guide: spread all care points through the available height. */
  .service-modal[data-service-type="care"] .service-bullets{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-evenly!important;
    gap:5px!important;
    margin:0!important;
  }

  .service-modal[data-service-type="care"] .service-bullets li{
    font-size:9.8px!important;
    line-height:1.34!important;
  }

  /* Contact: distribute rows through the card instead of ending halfway down. */
  .service-modal[data-service-type="contact"] .service-contact-list{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-around!important;
  }

  .service-modal[data-service-type="contact"] .service-contact-row{
    flex:0 0 auto!important;
    padding:7px 0!important;
  }

  .service-modal[data-service-type="contact"] .service-modal-actions{
    flex:0 0 auto!important;
  }

  /* Slightly fuller typography while preserving one-page readability. */
  .service-modal[data-service-type="delivery"] .service-info-card p,
  .service-modal[data-service-type="returns"] .service-info-card p{
    font-size:9.7px!important;
    line-height:1.34!important;
  }

  .service-modal[data-service-type="delivery"] .service-info-card strong,
  .service-modal[data-service-type="returns"] .service-info-card strong{
    font-size:10.8px!important;
  }

  .service-modal[data-service-type="contact"] .service-contact-row span{
    font-size:9px!important;
  }

  .service-modal[data-service-type="contact"] .service-contact-row a{
    font-size:10px!important;
  }

  .service-note{
    flex:0 0 auto!important;
    margin-top:8px!important;
  }
}

/* Source: basmah-v245-mobile-product-preview-bounded-css */
@media(max-width:640px){
  body > .preview-stack.basmah-mobile-follow-preview{
    top:8px!important;
    left:50%!important;
    right:auto!important;
    width:min(var(--basmah-follow-width,calc(100vw - 16px)),calc(100vw - 16px))!important;
    height:auto!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    padding:4px!important;
    z-index:10020!important;
    border:1px solid rgba(141,110,80,.22)!important;
    border-radius:16px!important;
    background:rgba(255,253,249,.985)!important;
    box-shadow:0 12px 32px rgba(43,32,23,.17)!important;
    overflow:hidden!important;
    will-change:top,left,transform!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .preview-stage,
  body > .preview-stack.basmah-mobile-follow-preview .preview-stage.has-mockup-front{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:var(--basmah-follow-stage-ratio,4/3)!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:11px!important;
    background:#f3ede4!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .mockup-zoom-layer,
  body > .preview-stack.basmah-mobile-follow-preview .preview-mockup-image{
    width:100%!important;
    height:100%!important;
  }

  body > .preview-stack.basmah-mobile-follow-preview .preview-mockup-image{
    object-fit:contain!important;
    object-position:center!important;
  }

  body.basmah-mobile-product-preview-following .site-header{
    transform:translateY(-110%)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:transform .30s cubic-bezier(.22,.78,.22,1),opacity .22s ease!important;
  }

  body:not(.basmah-mobile-product-preview-following) .site-header{
    transition:transform .24s ease,opacity .18s ease!important;
  }
}

/* Source: basmah-v246-mobile-natural-sticky-preview-css */
@media(max-width:640px){

  /* Remove all legacy floating-preview effects. */
  body.basmah-mobile-product-preview-following .site-header{
    transform:none!important;
    opacity:1!important;
    pointer-events:auto!important;
  }

  /* On phones only, let the preview participate directly in the full product page
     so CSS sticky can follow naturally through the options. */
  #productView .product-gallery{
    display:contents!important;
  }

  #productView .product-back-row{
    order:0!important;
  }

  #productView .preview-stack{
    order:1!important;
    position:sticky!important;
    top:72px!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    transition:none!important;
    z-index:30!important;
    background:var(--bg)!important;
  }

  #productView .product-side-thumbs{
    order:2!important;
    width:100%!important;
  }

  #productView .product-details{
    order:3!important;
  }

  /* Keep the preview exactly as it normally looks. */
  #productView .preview-stack .preview-stage,
  #productView .preview-stack .preview-stage.has-mockup-front{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    transform:none!important;
  }

  #productView .preview-stack .preview-stage.has-mockup-front .mockup-zoom-layer{
    width:100%!important;
    height:auto!important;
  }

  #productView .preview-stack .preview-stage.has-mockup-front .preview-mockup-image{
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:center!important;
  }

  /* Disable every old mobile floating/pinned state even if a stale class appears. */
  #productView .preview-stack.basmah-preview-pinned,
  #productView .preview-stack.basmah-mobile-preview-locked,
  body > .preview-stack.basmah-mobile-follow-preview{
    position:sticky!important;
    top:72px!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    height:auto!important;
    transform:none!important;
    transition:none!important;
    padding:0!important;
    margin:0!important;
    box-shadow:none!important;
    border:0!important;
    background:var(--bg)!important;
  }
}

/* Source: basmah-v247-mobile-product-header-scroll-hide */
@media(max-width:640px){
  /* Product page only: once the customer scrolls down, hide the header.
     It stays hidden until the product page is scrolled fully back to the top. */
  body.basmah-mobile-product-header-hidden #productView.active ~ *{
    /* no-op: keeps this rule product-scoped without touching other views */
  }

  body.basmah-mobile-product-header-hidden .site-header{
    transform:translateY(-110%)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:transform .24s ease,opacity .18s ease!important;
  }

  body:not(.basmah-mobile-product-header-hidden) .site-header{
    transition:transform .24s ease,opacity .18s ease!important;
  }

  /* When the header is hidden, let the sticky live preview use the freed space. */
  body.basmah-mobile-product-header-hidden #productView.active .preview-stack{
    top:8px!important;
  }
}

/* Source: basmah-v249-wall-visit-mobile-polish */
/* Press feedback: opacity only, only on the element being pressed.
   No page-wide filters or persistent will-change. */
@keyframes basmahPressFade249{
  0%{opacity:1}
  42%{opacity:.62}
  100%{opacity:1}
}
.basmah-press-fade249{animation:basmahPressFade249 .17s ease-out!important}

.basmah-book-visit-hero{
  background:linear-gradient(135deg,#d4a45f,#a9753e)!important;
  border-color:#d4a45f!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(48,31,18,.24)!important;
  min-width:230px!important;
}
.basmah-book-visit-hero:hover{
  background:linear-gradient(135deg,#dfb16d,#b47f45)!important;
}

/* Wall visualizer is proportion-locked by JS. */
.wall-frame-overlay{aspect-ratio:auto!important}

/* Book a Visit checkout popup */
.basmah-visit-backdrop{
  position:fixed;inset:0;z-index:10080;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(25,20,16,.72);backdrop-filter:blur(8px);
}
.basmah-visit-backdrop.is-open{display:flex}
body.basmah-visit-open{overflow:hidden}
.basmah-visit-modal{
  position:relative;width:min(1040px,calc(100vw - 44px));max-height:calc(100dvh - 44px);
  overflow:auto;border:1px solid #e4d7c8;border-radius:28px;background:#fbf7f1;
  box-shadow:0 32px 90px rgba(15,10,7,.34);
}
.basmah-visit-head{padding:28px 72px 20px 30px;border-bottom:1px solid #e6d9ca}
.basmah-visit-head h2{margin:7px 0 0;font-size:clamp(34px,4vw,50px)}
.basmah-visit-head p{max-width:850px;margin:10px 0 0;font-size:14px;line-height:1.62}
.basmah-visit-close{
  position:absolute;right:20px;top:18px;z-index:3;width:42px;height:42px;border:1px solid #d8c9b8;
  border-radius:50%;background:#fff;color:#28231f;font-size:25px;line-height:1;
}
.basmah-visit-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,.55fr);gap:16px;padding:18px}
.basmah-visit-form-panel,.basmah-visit-summary{padding:18px!important}
.basmah-visit-summary{align-self:start;position:sticky;top:16px}
.basmah-visit-feature{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}
.basmah-visit-feature strong{font-size:13px}
.basmah-visit-feature small{color:var(--muted);font-size:11.5px;line-height:1.5}
.basmah-visit-summary .btn{margin-top:14px}
html[lang="ar"] .basmah-visit-modal{text-align:right}
html[lang="ar"] .basmah-visit-head{padding:28px 30px 20px 72px}
html[lang="ar"] .basmah-visit-close{right:auto;left:20px}

/* v251: Book a Visit fits on one screen; no internal scrolling. */
.basmah-visit-modal{
  height:min(760px,calc(100dvh - 28px))!important;
  max-height:calc(100dvh - 28px)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}
.basmah-visit-head{
  flex:0 0 auto!important;
  padding-top:18px!important;
  padding-bottom:12px!important;
}
.basmah-visit-head h2{font-size:clamp(30px,3.2vw,42px)!important}
.basmah-visit-head p{margin-top:6px!important;font-size:12.5px!important;line-height:1.42!important}
.basmah-visit-layout{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:12px 16px 14px!important;
  gap:12px!important;
}
.basmah-visit-form-panel,.basmah-visit-summary{padding:14px!important;overflow:hidden!important}
.basmah-visit-form-panel .checkout-section + .checkout-section{margin-top:12px!important}
.basmah-visit-form-panel .checkout-section h3{margin-bottom:8px!important;font-size:18px!important}
.basmah-visit-form-panel .form-grid{gap:8px!important}
.basmah-visit-form-panel .form-group label{margin-bottom:3px!important;font-size:11px!important}
.basmah-visit-form-panel .field{padding:8px 10px!important;min-height:36px!important}
.basmah-visit-form-panel textarea.field{min-height:48px!important;height:48px!important;resize:none!important}
.basmah-visit-payment-section .basmah-fawran-heading{margin-bottom:7px!important}
.basmah-visit-payment-section .basmah-fawran-option{padding:8px 10px!important}
.basmah-visit-payment-section .basmah-fawran-option-top{gap:8px!important}
.basmah-visit-payment-section .basmah-fawran-option small{font-size:10px!important;line-height:1.35!important}
.basmah-visit-feature{padding:8px 0!important}
.basmah-visit-feature small{font-size:10.5px!important;line-height:1.35!important}

@media(max-width:640px){
  /* When the customer swipes on the wall image BESIDE the movable artwork,
     allow the visit modal to scroll down naturally to Download / Done. */
  .wall-photo-stage{touch-action:pan-y!important}
  .wall-frame-overlay,.wall-resize-handle{touch-action:none!important}

  /* Compact the sticky product preview only while the customer is scrolling.
     Selecting a product option expands it back to normal until the next scroll. */
  #productView.active .preview-stack{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:6px 0!important;
    background:var(--bg,#fffdf9)!important;
    box-shadow:0 8px 14px rgba(58,45,35,.08)!important;
    isolation:isolate!important;
    overflow:visible!important;
  }
  /* The opaque strip spans the viewport, preventing product copy from appearing
     behind or beside the sticky image while it is compact. */
  #productView.active .preview-stack::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:-6px;
    bottom:-6px;
    left:50%;
    width:100vw;
    transform:translateX(-50%);
    background:var(--bg,#fffdf9);
    border-bottom:1px solid rgba(141,110,80,.12);
    pointer-events:none;
  }
  #productView.active .preview-stack .preview-stage,
  #productView.active .preview-stack .preview-stage.has-mockup-front{
    width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transition:width .42s cubic-bezier(.2,.8,.2,1)!important;
    transform-origin:top center!important;
  }
  #productView.active .preview-stack.basmah-mobile-preview-compact249 .preview-stage,
  #productView.active .preview-stack.basmah-mobile-preview-compact249 .preview-stage.has-mockup-front{
    width:50%!important;
  }
  #productView.active .preview-stack.basmah-mobile-preview-option-expanded249 .preview-stage,
  #productView.active .preview-stack.basmah-mobile-preview-option-expanded249 .preview-stage.has-mockup-front{
    width:100%!important;
  }

  .basmah-visit-backdrop{padding:5px;align-items:center}
  .basmah-visit-modal{
    width:100%!important;
    height:calc(100dvh - 10px)!important;
    max-height:calc(100dvh - 10px)!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  .basmah-visit-head{padding:12px 44px 8px 12px!important}
  html[lang="ar"] .basmah-visit-head{padding:12px 12px 8px 44px!important}
  .basmah-visit-head .eyebrow{font-size:9px!important}
  .basmah-visit-head h2{font-size:25px!important;margin-top:3px!important}
  .basmah-visit-head p{font-size:10.5px!important;line-height:1.3!important;margin-top:4px!important}
  .basmah-visit-close{top:7px;right:7px;width:32px;height:32px;font-size:20px}
  html[lang="ar"] .basmah-visit-close{right:auto;left:7px}

  .basmah-visit-layout{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    padding:7px!important;
    gap:6px!important;
  }
  .basmah-visit-form-panel{
    padding:8px!important;
    min-height:0!important;
  }
  .basmah-visit-form-panel .checkout-section + .checkout-section{margin-top:7px!important}
  .basmah-visit-form-panel .checkout-section h3{font-size:14px!important;margin-bottom:5px!important}
  .basmah-visit-form-panel .form-grid{
    grid-template-columns:1fr 1fr!important;
    gap:5px 6px!important;
  }
  .basmah-visit-form-panel .form-group.full{grid-column:1/-1!important}
  .basmah-visit-form-panel .form-group label{font-size:9.5px!important;margin-bottom:2px!important}
  .basmah-visit-form-panel .field{
    min-height:30px!important;
    padding:5px 7px!important;
    font-size:11px!important;
    border-radius:9px!important;
  }
  .basmah-visit-form-panel textarea.field{height:34px!important;min-height:34px!important}
  .basmah-visit-payment-section .basmah-fawran-heading{display:none!important}
  .basmah-visit-payment-section .basmah-fawran-options{gap:4px!important}
  .basmah-visit-payment-section .basmah-fawran-option{padding:5px 7px!important;border-radius:10px!important}
  .basmah-visit-payment-section .basmah-fawran-option-top strong{font-size:10.5px!important}
  .basmah-visit-payment-section .basmah-fawran-option-top small{display:none!important}
  .basmah-visit-payment-section .basmah-fawran-detail{margin-top:4px!important}
  .basmah-visit-summary{
    position:static!important;
    padding:7px 9px!important;
  }
  .basmah-visit-summary>h3,.basmah-visit-summary .basmah-visit-feature{display:none!important}
  .basmah-visit-summary .summary-line.total{
    margin:0 0 5px!important;
    padding:5px 0!important;
    font-size:15px!important;
  }
  .basmah-visit-summary .btn{
    margin-top:0!important;
    min-height:36px!important;
    padding:7px 10px!important;
    font-size:11px!important;
  }
  .basmah-visit-summary .success-message{
    margin-top:5px!important;
    padding:6px!important;
    font-size:9.5px!important;
    line-height:1.3!important;
  }

  /* Back button remains at the top while the product preview follows underneath. */
  #productView.active .product-back-row{
    position:sticky!important;
    top:6px!important;
    z-index:60!important;
    padding:4px 0!important;
    background:transparent!important;
  }
  #productView.active .product-back-row .back-listings{
    min-height:38px!important;
    padding:8px 13px!important;
    box-shadow:0 7px 18px rgba(54,42,31,.16)!important;
  }

  /* Keep enough space between the sticky back button and the sticky preview. */
  #productView.active .preview-stack{
    top:54px!important;
  }
  body.basmah-mobile-product-header-hidden #productView.active .preview-stack{
    top:54px!important;
  }

}

@media(prefers-reduced-motion:reduce){
  .basmah-press-fade249{animation:none!important}
  #productView.active .preview-stack .preview-stage{transition:none!important}
}

/* Source: basmah-v253-popup-mobile-wall-fixes */
/* ----------------------------------------------------------
   BOOK A VISIT — DESKTOP
   Keep it one page with NO internal scrolling, but use almost
   the full viewport height so an opened Fawran detail never clips.
   ---------------------------------------------------------- */
@media (min-width:641px){
  .basmah-visit-backdrop{
    padding:6px!important;
  }
  .basmah-visit-modal{
    width:min(1080px,calc(100vw - 20px))!important;
    height:calc(100dvh - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
    overflow:hidden!important;
  }
  .basmah-visit-head{
    padding:13px 58px 9px 20px!important;
  }
  html[lang="ar"] .basmah-visit-head{
    padding:13px 20px 9px 58px!important;
  }
  .basmah-visit-head .eyebrow{
    font-size:9px!important;
    margin-bottom:2px!important;
  }
  .basmah-visit-head h2{
    margin-top:2px!important;
    font-size:32px!important;
  }
  .basmah-visit-head p{
    margin-top:4px!important;
    font-size:11px!important;
    line-height:1.3!important;
  }
  .basmah-visit-layout{
    padding:8px 14px 10px!important;
    gap:10px!important;
    grid-template-columns:minmax(0,1.55fr) minmax(245px,.45fr)!important;
    overflow:visible!important;
  }
  .basmah-visit-form-panel,
  .basmah-visit-summary{
    padding:10px 13px!important;
    overflow:visible!important;
  }
  .basmah-visit-form-panel .checkout-section + .checkout-section{
    margin-top:7px!important;
  }
  .basmah-visit-form-panel .checkout-section h3{
    margin-bottom:4px!important;
    font-size:15px!important;
  }
  .basmah-visit-form-panel .form-grid{
    gap:5px 7px!important;
  }
  .basmah-visit-form-panel .form-group label{
    margin-bottom:2px!important;
    font-size:9.5px!important;
  }
  .basmah-visit-form-panel .field{
    min-height:30px!important;
    padding:5px 8px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }
  .basmah-visit-form-panel textarea.field{
    height:34px!important;
    min-height:34px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-heading{
    margin-bottom:4px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-heading strong{
    font-size:11px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-heading small{
    font-size:9.5px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-options{
    gap:5px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-option{
    padding:6px 8px!important;
    border-radius:11px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-option-top{
    gap:6px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-option-top strong{
    font-size:11px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-option-top small{
    font-size:9px!important;
    line-height:1.25!important;
  }
  .basmah-visit-payment-section .basmah-fawran-detail{
    margin-top:5px!important;
    padding:6px!important;
    border-radius:9px!important;
  }
  html[lang="ar"] .basmah-visit-payment-section .basmah-fawran-detail{
    margin-right:18px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-detail>label,
  .basmah-visit-payment-section .basmah-fawran-detail-label{
    margin-bottom:3px!important;
    font-size:9px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-detail .field{
    min-height:28px!important;
  }
  .basmah-visit-feature{
    padding:6px 0!important;
  }
  .basmah-visit-feature strong{
    font-size:11px!important;
  }
  .basmah-visit-feature small{
    font-size:9.5px!important;
    line-height:1.25!important;
  }
  .basmah-visit-summary .summary-line.total{
    padding:8px 0!important;
    margin-top:5px!important;
  }
  .basmah-visit-summary .btn{
    min-height:40px!important;
    margin-top:7px!important;
    padding:8px 12px!important;
  }
}

/* ----------------------------------------------------------
   MOBILE PRODUCT PAGE
   Back to listings is NOT sticky. Only the preview stays sticky.
   ---------------------------------------------------------- */
@media (max-width:640px){
  #productView.active .product-back-row{
    position:relative!important;
    top:auto!important;
    z-index:10!important;
    padding:4px 0 7px!important;
  }
  #productView.active .preview-stack{
    position:sticky!important;
    top:72px!important;
    z-index:22!important;
  }
  body.basmah-mobile-product-header-hidden #productView.active .preview-stack{
    top:8px!important;
  }
}

/* ----------------------------------------------------------
   BOOK A VISIT — MOBILE
   Smaller modal, normal smooth vertical scrolling.
   ---------------------------------------------------------- */
@media (max-width:640px){
  .basmah-visit-backdrop{
    padding:12px!important;
    align-items:center!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .basmah-visit-modal{
    width:min(94vw,430px)!important;
    height:auto!important;
    max-height:88dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    border-radius:22px!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }
  .basmah-visit-head{
    padding:18px 48px 12px 16px!important;
  }
  html[lang="ar"] .basmah-visit-head{
    padding:18px 16px 12px 48px!important;
  }
  .basmah-visit-head .eyebrow{
    font-size:9px!important;
  }
  .basmah-visit-head h2{
    font-size:28px!important;
    margin-top:4px!important;
  }
  .basmah-visit-head p{
    font-size:11px!important;
    line-height:1.4!important;
    margin-top:5px!important;
  }
  .basmah-visit-close{
    position:sticky!important;
    float:right;
    top:8px!important;
    right:8px!important;
    z-index:20!important;
    width:34px!important;
    height:34px!important;
    margin-bottom:-34px!important;
  }
  html[lang="ar"] .basmah-visit-close{
    float:left;
    right:auto!important;
    left:8px!important;
  }
  .basmah-visit-layout{
    display:block!important;
    padding:8px!important;
    overflow:visible!important;
  }
  .basmah-visit-form-panel,
  .basmah-visit-summary{
    overflow:visible!important;
    padding:12px!important;
  }
  .basmah-visit-form-panel .checkout-section + .checkout-section{
    margin-top:12px!important;
  }
  .basmah-visit-form-panel .checkout-section h3{
    display:block!important;
    font-size:17px!important;
    margin-bottom:7px!important;
  }
  .basmah-visit-form-panel .form-grid{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .basmah-visit-form-panel .form-group.full{
    grid-column:auto!important;
  }
  .basmah-visit-form-panel .form-group label{
    font-size:11px!important;
    margin-bottom:4px!important;
  }
  .basmah-visit-form-panel .field{
    min-height:40px!important;
    padding:9px 10px!important;
    font-size:13px!important;
  }
  .basmah-visit-form-panel textarea.field{
    height:58px!important;
    min-height:58px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-heading{
    display:block!important;
    margin-bottom:7px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-options{
    gap:8px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-option{
    padding:10px!important;
    border-radius:13px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-option-top strong{
    font-size:12px!important;
  }
  .basmah-visit-payment-section .basmah-fawran-option-top small{
    display:block!important;
    font-size:10px!important;
    line-height:1.35!important;
  }
  .basmah-visit-payment-section .basmah-fawran-detail{
    margin:7px 0 0!important;
    padding:8px!important;
  }
  .basmah-visit-summary{
    position:static!important;
    margin-top:8px!important;
  }
  .basmah-visit-summary>h3,
  .basmah-visit-summary .basmah-visit-feature{
    display:none!important;
  }
  .basmah-visit-summary .summary-line.total{
    margin:0 0 8px!important;
    padding:8px 0!important;
    font-size:17px!important;
  }
  .basmah-visit-summary .btn{
    min-height:44px!important;
    margin-top:0!important;
    font-size:13px!important;
  }
}

/* ----------------------------------------------------------
   TRY ON YOUR WALL — MOBILE
   Smooth native scrolling, no expensive backdrop blur,
   and close X always available at top of the viewport.
   ---------------------------------------------------------- */
@media (max-width:900px){
  .wall-visualizer-backdrop{
    padding:6px!important;
    align-items:flex-end!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .wall-visualizer-modal{
    width:100%!important;
    height:calc(100dvh - 12px)!important;
    max-height:calc(100dvh - 12px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    border-radius:22px 22px 8px 8px!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }
  .wall-visualizer-close{
    position:fixed!important;
    top:14px!important;
    right:16px!important;
    left:auto!important;
    z-index:10120!important;
    width:40px!important;
    height:40px!important;
    box-shadow:0 7px 22px rgba(26,19,14,.22)!important;
  }
  html[lang="ar"] .wall-visualizer-close{
    right:auto!important;
    left:16px!important;
  }
  .wall-visualizer-head{
    padding:22px 58px 14px 16px!important;
  }
  html[lang="ar"] .wall-visualizer-head{
    padding:22px 16px 14px 58px!important;
  }
  .wall-visualizer-head h2{
    font-size:30px!important;
  }
  .wall-visualizer-head p{
    font-size:12px!important;
    line-height:1.5!important;
  }
  .wall-visualizer-body-simple .wall-visualizer-canvas-column{
    padding:12px!important;
  }
  .wall-photo-stage{
    touch-action:pan-y!important;
  }
  .wall-frame-overlay,
  .wall-resize-handle{
    touch-action:none!important;
  }
}

/* Source: basmah-v254-book-visit-layout */
/* ----------------------------------------------------------
   BOOK A VISIT — DESKTOP
   Fill the popup properly instead of leaving a large empty area.
   ---------------------------------------------------------- */
@media (min-width:641px){
  .basmah-visit-modal{
    height:min(760px,calc(100dvh - 28px))!important;
    max-height:calc(100dvh - 28px)!important;
  }

  .basmah-visit-layout{
    height:100%!important;
    min-height:0!important;
    align-items:stretch!important;
  }

  .basmah-visit-form-panel,
  .basmah-visit-summary{
    height:100%!important;
    min-height:0!important;
  }

  .basmah-visit-form-panel{
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    gap:12px!important;
    align-content:stretch!important;
  }

  .basmah-visit-form-panel .checkout-section{
    margin-top:0!important;
  }

  .basmah-visit-form-panel .checkout-section:nth-child(3){
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    justify-content:flex-start!important;
  }

  .basmah-visit-payment-section .basmah-fawran-options{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    align-items:start!important;
  }

  .basmah-visit-payment-section .basmah-fawran-option{
    height:100%!important;
    align-content:start!important;
  }

  .basmah-visit-payment-section .basmah-fawran-detail{
    width:100%!important;
  }

  .basmah-visit-summary{
    display:flex!important;
    flex-direction:column!important;
    align-self:stretch!important;
    position:static!important;
  }

  .basmah-visit-summary .basmah-visit-feature{
    flex:0 0 auto!important;
  }

  .basmah-visit-summary .summary-line.total{
    margin-top:auto!important;
    padding-top:16px!important;
  }

  .basmah-visit-summary .btn{
    margin-top:10px!important;
  }
}

/* ----------------------------------------------------------
   BOOK A VISIT — MOBILE
   Close X stays floating on the LEFT side of the popup.
   ---------------------------------------------------------- */
@media (max-width:640px){
  .basmah-visit-modal{
    position:relative!important;
  }

  .basmah-visit-close{
    position:sticky!important;
    top:8px!important;
    left:8px!important;
    right:auto!important;
    z-index:50!important;
    float:none!important;
    display:grid!important;
    place-items:center!important;
    margin:8px auto -42px 8px!important;
    width:36px!important;
    height:36px!important;
    border-radius:50%!important;
    box-shadow:0 8px 22px rgba(30,22,16,.22)!important;
    background:#fff!important;
  }

  html[lang="ar"] .basmah-visit-close,
  html[lang="en"] .basmah-visit-close{
    left:8px!important;
    right:auto!important;
    margin-left:8px!important;
    margin-right:auto!important;
  }

  .basmah-visit-head{
    padding-left:52px!important;
  }

  html[lang="ar"] .basmah-visit-head{
    padding-left:52px!important;
    padding-right:16px!important;
  }
}

/* Source: basmah-v255-book-visit-balanced */
/* ----------------------------------------------------------
   BOOK A VISIT — DESKTOP BALANCE
   Slightly wider popup/details area and use the full height
   elegantly instead of leaving a large empty lower section.
   ---------------------------------------------------------- */
@media (min-width:641px){
  .basmah-visit-modal{
    width:min(1180px,calc(100vw - 24px))!important;
  }

  .basmah-visit-layout{
    grid-template-columns:minmax(0,1.50fr) minmax(285px,.50fr)!important;
    gap:14px!important;
    padding:12px 16px 14px!important;
  }

  /* Main visit-details side */
  .basmah-visit-form-panel{
    padding:16px 18px!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    gap:14px!important;
  }

  .basmah-visit-form-panel .checkout-section h3{
    font-size:17px!important;
    margin-bottom:7px!important;
  }

  .basmah-visit-form-panel .form-grid{
    gap:8px 10px!important;
  }

  .basmah-visit-form-panel .field{
    min-height:36px!important;
    padding:7px 10px!important;
    font-size:12px!important;
  }

  .basmah-visit-form-panel textarea.field{
    min-height:44px!important;
    height:44px!important;
  }

  /* Let payment occupy the remaining height cleanly. */
  .basmah-visit-payment-section{
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
  }

  .basmah-visit-payment-section .basmah-fawran-heading{
    flex:0 0 auto!important;
    margin-bottom:8px!important;
  }

  .basmah-visit-payment-section .basmah-fawran-options{
    flex:1 1 auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    align-items:stretch!important;
    gap:12px!important;
  }

  .basmah-visit-payment-section .basmah-fawran-option{
    min-height:100%!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    padding:16px 17px!important;
    border-radius:16px!important;
  }

  .basmah-visit-payment-section .basmah-fawran-option-top{
    flex:0 0 auto!important;
  }

  .basmah-visit-payment-section .basmah-fawran-detail{
    margin-top:14px!important;
    width:100%!important;
  }

  /* Service/visit summary gets a little more breathing room too. */
  .basmah-visit-summary{
    padding:19px 20px!important;
  }

  .basmah-visit-summary>h3{
    font-size:25px!important;
    margin-bottom:4px!important;
  }

  .basmah-visit-summary .basmah-visit-feature{
    flex:1 1 0!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:14px 0!important;
  }

  .basmah-visit-summary .basmah-visit-feature strong{
    font-size:14px!important;
    margin-bottom:5px!important;
  }

  .basmah-visit-summary .basmah-visit-feature small{
    font-size:11px!important;
    line-height:1.5!important;
  }

  .basmah-visit-summary .summary-line.total{
    margin-top:8px!important;
    padding-top:16px!important;
    padding-bottom:8px!important;
  }

  .basmah-visit-summary .btn{
    min-height:50px!important;
    margin-top:8px!important;
  }
}

/* Source: basmah-v256-elegant-payment */
/* ----------------------------------------------------------
   BOOK A VISIT — DESKTOP PAYMENT CLEANUP
   Compact, balanced Fawran cards with a neat selected state.
   ---------------------------------------------------------- */
@media (min-width:641px){

  .basmah-visit-payment-section{
    display:block!important;
  }

  .basmah-visit-payment-section .basmah-fawran-heading{
    margin-bottom:10px!important;
  }

  .basmah-visit-payment-section .basmah-fawran-options{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    align-items:start!important;
  }

  .basmah-visit-payment-section .basmah-fawran-option{
    height:auto!important;
    min-height:92px!important;
    display:block!important;
    padding:14px 16px!important;
    border:1px solid #dfcfbd!important;
    border-radius:16px!important;
    background:#fffaf4!important;
    box-shadow:none!important;
    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease,
      transform .18s ease!important;
  }

  .basmah-visit-payment-section .basmah-fawran-option:hover{
    border-color:#c9aa85!important;
    background:#fffdf9!important;
    transform:translateY(-1px);
  }

  .basmah-visit-payment-section .basmah-fawran-option:has(input:checked){
    border-color:#9b714a!important;
    background:#f8eee2!important;
    box-shadow:
      0 0 0 1px rgba(155,113,74,.10),
      0 9px 22px rgba(80,57,37,.07)!important;
  }

  .basmah-visit-payment-section .basmah-fawran-option-top{
    display:flex!important;
    align-items:flex-start!important;
    gap:10px!important;
  }

  .basmah-visit-payment-section .basmah-fawran-option-top input[type="radio"]{
    flex:0 0 auto!important;
    margin-top:3px!important;
  }

  .basmah-visit-payment-section .basmah-fawran-option-top > span{
    min-width:0!important;
    flex:1 1 auto!important;
  }

  .basmah-visit-payment-section .basmah-fawran-option-top strong{
    display:block!important;
    margin-bottom:4px!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  .basmah-visit-payment-section .basmah-fawran-option-top small{
    display:block!important;
    font-size:10px!important;
    line-height:1.45!important;
    color:#7d7064!important;
  }

  .basmah-visit-payment-section .basmah-fawran-detail{
    width:100%!important;
    margin:10px 0 0!important;
    padding:10px!important;
    border:1px solid #e3d5c5!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
  }

  html[lang="ar"] .basmah-visit-payment-section .basmah-fawran-detail{
    margin-right:0!important;
    margin-left:0!important;
  }

  .basmah-visit-payment-section .basmah-fawran-detail>label,
  .basmah-visit-payment-section .basmah-fawran-detail-label{
    display:block!important;
    margin-bottom:5px!important;
    font-size:9.5px!important;
    font-weight:800!important;
    color:#6f6257!important;
  }

  .basmah-visit-payment-section .basmah-fawran-detail .field{
    min-height:34px!important;
    padding:6px 9px!important;
    border-radius:9px!important;
    background:#fffdf9!important;
  }

  .basmah-visit-payment-section .basmah-fawran-alias-row{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }

  .basmah-visit-payment-section .basmah-fawran-alias-row strong{
    font-size:15px!important;
    letter-spacing:.04em!important;
  }

  .basmah-visit-payment-section .basmah-fawran-copy{
    min-height:32px!important;
    padding:6px 11px!important;
    border-radius:999px!important;
  }
}

/* Source: basmah-v257-launch-offer */
.basmah-launch-offer{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:13000;
  width:min(430px,calc(100vw - 32px));
  padding:18px;
  border:1px solid rgba(218,198,174,.92);
  border-radius:22px;
  background:#fffaf4;
  color:#29231e;
  box-shadow:0 18px 48px rgba(31,23,17,.20);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate3d(-50%,16px,0) scale(.985);
  transition:
    opacity .24s ease,
    transform .24s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .24s;
}
.basmah-launch-offer.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(-50%,0,0) scale(1);
  transition-delay:0s;
}
.basmah-launch-offer-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid #ddcdbc;
  border-radius:50%;
  background:#fff;
  color:#332a23;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
html[lang="ar"] .basmah-launch-offer-close{
  right:auto;
  left:10px;
}
.basmah-launch-offer-badge{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:5px 9px;
  margin-bottom:11px;
  border-radius:999px;
  background:#efe0cd;
  color:#765337;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}
.basmah-launch-offer-main{
  display:flex;
  align-items:center;
  gap:14px;
  padding-right:30px;
}
html[lang="ar"] .basmah-launch-offer-main{
  padding-right:0;
  padding-left:30px;
  direction:rtl;
}
.basmah-launch-offer-percent{
  flex:0 0 auto;
  min-width:78px;
  font:800 44px/1 Georgia,"Times New Roman",serif;
  color:#9a6839;
  letter-spacing:-.045em;
}
.basmah-launch-offer-copy{
  min-width:0;
  display:grid;
  gap:4px;
}
.basmah-launch-offer-copy strong{
  color:#29231e;
  font-size:16px;
  line-height:1.3;
}
.basmah-launch-offer-copy small{
  color:#786e64;
  font-size:11.5px;
  line-height:1.45;
}
.basmah-launch-offer-actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px;
  margin-top:15px;
}
html[lang="ar"] .basmah-launch-offer-actions{
  direction:rtl;
}
.basmah-launch-code{
  min-width:0;
  height:43px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px dashed #b9936d;
  border-radius:13px;
  background:#f8eee2;
  color:#352c25;
  cursor:pointer;
}
.basmah-launch-code-label,
.basmah-launch-copy-label{
  color:#807166;
  font-size:10px;
  font-weight:750;
}
.basmah-launch-code strong{
  justify-self:center;
  font-size:16px;
  letter-spacing:.08em;
}
.basmah-launch-shop{
  min-height:43px!important;
  padding:9px 17px!important;
  border-radius:13px!important;
  white-space:nowrap;
}
html[lang="ar"] .basmah-launch-offer{
  direction:rtl;
  text-align:right;
}
@media(max-width:640px){
  .basmah-launch-offer{
    bottom:max(12px,env(safe-area-inset-bottom));
    width:min(390px,calc(100vw - 20px));
    padding:15px;
    border-radius:19px;
  }
  .basmah-launch-offer-main{
    gap:10px;
  }
  .basmah-launch-offer-percent{
    min-width:65px;
    font-size:38px;
  }
  .basmah-launch-offer-copy strong{
    font-size:14px;
  }
  .basmah-launch-offer-copy small{
    font-size:10.5px;
  }
  .basmah-launch-offer-actions{
    grid-template-columns:1fr;
  }
  .basmah-launch-shop{
    width:100%;
  }
}
@media(prefers-reduced-motion:reduce){
  .basmah-launch-offer{
    transition:none!important;
  }
}

/* Source: basmah-v258-centered-launch-popup */
/* Launch offer centered in the viewport on all screen sizes. */
.basmah-launch-offer{
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:min(430px,calc(100vw - 32px))!important;
  transform:translate3d(-50%,calc(-50% + 12px),0) scale(.985)!important;
}
.basmah-launch-offer.is-open{
  transform:translate3d(-50%,-50%,0) scale(1)!important;
}

@media(max-width:640px){
  .basmah-launch-offer{
    width:min(318px,calc(100vw - 34px))!important;
    min-height:390px!important;
    padding:22px 19px 20px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    border-radius:23px!important;
  }

  .basmah-launch-offer-badge{
    align-self:flex-start;
    margin-bottom:20px!important;
  }

  .basmah-launch-offer-main{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
    padding:0!important;
  }

  html[lang="ar"] .basmah-launch-offer-main{
    align-items:flex-end!important;
    padding:0!important;
  }

  .basmah-launch-offer-percent{
    min-width:0!important;
    font-size:54px!important;
    line-height:.95!important;
  }

  .basmah-launch-offer-copy{
    gap:7px!important;
  }

  .basmah-launch-offer-copy strong{
    font-size:17px!important;
    line-height:1.35!important;
  }

  .basmah-launch-offer-copy small{
    font-size:12px!important;
    line-height:1.55!important;
  }

  .basmah-launch-offer-actions{
    width:100%!important;
    margin-top:auto!important;
    padding-top:24px!important;
    gap:10px!important;
  }

  .basmah-launch-code{
    height:46px!important;
  }

  .basmah-launch-shop{
    min-height:46px!important;
  }

  .basmah-launch-offer-close{
    top:12px!important;
    right:12px!important;
  }

  html[lang="ar"] .basmah-launch-offer-close{
    right:auto!important;
    left:12px!important;
  }
}

/* Source: basmah-v146-physical-frame-mount-widths */
/* Preview face target: 2CM Box = 1.5 cm, 5CM Box = 2 cm, Floating = 1.5 cm. */
.configured-frame.box-frame .frame-rail,
.configured-frame.floating-frame .frame-rail{
  box-shadow:none!important;
}
.configured-frame.box-frame .frame-face-front::before{
  box-shadow:none!important;
  background:var(--frame-overlay,transparent)!important;
}

/* Do not let extra inner-edge effects make the Box rail look wider. */
.configured-frame.box-frame .frame-face-front > .mount-outer{
  box-shadow:none;
}
.configured-frame.box-frame .frame-face-front > .mount-outer::before,
.configured-frame.box-frame .frame-face-front > .mount-outer::after{
  box-shadow:none!important;
}

/* A mount is a flat measured board area, not an extra frame/bevel. */
#configuredFrame .mount-outer,
#configuredFrame .mount-inner{
  box-sizing:border-box!important;
}

/* Keep Floating Frame inner reveal subtle. */
.configured-frame.floating-frame .frame-face-front > .mount-outer > .mount-inner > .artwork-preview{
  box-shadow:0 0 0 1px rgba(0,0,0,.26),0 0 4px rgba(0,0,0,.05)!important;
}

/* Source: basmah-v147-correct-frame-proportions */
/*
  v147 visual correction:
  Box Frame must visibly be the thicker profile (1.5 cm front face).
  Floating Frame must visibly be the slimmer profile (1.0 cm front face).
*/

/* Make the two profiles unmistakably different in mockup-style previews too. */
.mockup-frame-shell.box-frame-shell{
  padding:1.5%!important;
}
.mockup-frame-shell.floating-frame-shell{
  padding:.68%!important;
}

/* Box: no extra inner line or bevel consuming the visible 1.5 cm profile. */
.configured-frame.box-frame .frame-face-front > .mount-outer{
  box-shadow:none!important;
}
.configured-frame.box-frame .frame-face-front > .mount-outer::before,
.configured-frame.box-frame .frame-face-front > .mount-outer::after{
  display:none!important;
}

/* Floating: the inner reveal is a very narrow gap, not a thick black border. */
.configured-frame.floating-frame .frame-face-front > .mount-outer > .mount-inner > .artwork-preview{
  box-shadow:none!important;
}
.mockup-frame-shell.floating-frame-shell .mockup-art::after{
  box-shadow:0 0 0 1px rgba(0,0,0,.28)!important;
}
#wallFrameCloneHost > .configured-frame.floating-frame .frame-face-front > .mount-outer > .mount-inner > .artwork-preview{
  box-shadow:none!important;
}

/* Source: basmah-v148-listing-frame-canvas-fix */
/* Product cards: canvas must sit INSIDE the frame, edge-to-edge. */
.product-mockup-placement .listing-physical-frame{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  display:block!important;
  margin:0!important;
}

.product-mockup-placement .listing-physical-frame .listing-canvas{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  box-sizing:border-box!important;
  padding:0!important;
  margin:0!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-origin:border-box!important;
  background-clip:border-box!important;
  box-shadow:none!important;
}

/* Remove legacy pseudo-elements that were covering/shrinking the artwork. */
.product-mockup-placement .listing-physical-frame .listing-canvas::before{
  display:none!important;
}

/* BOX: canvas starts immediately after the 1.5 cm frame face. */
.product-mockup-placement .listing-physical-frame.box-frame-shell .listing-canvas{
  outline:0!important;
}

/* FLOATING: keep only a tiny reveal; never replace part of the canvas with a thick black band. */
.product-mockup-placement .listing-physical-frame.floating-frame-shell .listing-canvas::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)!important;
}

/* The old fixed 3.5/1.5 percent padding must not win over physical sizing. */
.product-mockup-placement .mockup-frame-shell.box-frame-shell,
.product-mockup-placement .mockup-frame-shell.floating-frame-shell{
  padding:var(--listing-frame-rail,1px)!important;
}

/* Orientation is no longer a customer-facing product-card attribute. */
.product-card .product-meta{
  min-height:auto;
}

/* Source: basmah-v149-list-view-frame-alignment */
/*
  The saved frame placement is measured against the ORIGINAL mockup image.
  Previously the list card used background-size:cover on a differently-shaped
  card, so the room image was cropped while the frame percentages were not.
  That caused the frame to miss the artwork in list view.
*/
.product-mockup.listing-mockup-fit{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#ece5db!important;
  border:1px solid rgba(97,77,56,.08)!important;
  border-radius:12px!important;
}

.product-mockup.listing-mockup-fit > .product-mockup-stage{
  position:relative!important;
  flex:0 0 auto!important;
  overflow:hidden!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
}

/* Placement coordinates now live inside the exact mockup-image rectangle. */
.product-mockup-stage > .product-mockup-placement{
  position:absolute!important;
  box-sizing:border-box!important;
}

/* Frame outer edge and canvas use exactly the same saved placement box. */
.product-mockup-stage .listing-physical-frame{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
}

/* Canvas always reaches all four inner frame edges. */
.product-mockup-stage .listing-physical-frame .listing-canvas{
  width:100%!important;
  height:100%!important;
  margin:0!important;
  box-sizing:border-box!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* Source: basmah-v150-list-mockup-cover-fit */
/* v150 — fill the entire list-view mockup area with the room image, no blank side margins */
.product-mockup.listing-mockup-fit{
  overflow:hidden!important;
}
.product-mockup.listing-mockup-fit > .product-mockup-stage{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  max-width:none!important;
  max-height:none!important;
}

/* Source: basmah-v151-list-mockup-downward-focus */
/* v151 — keep cover fit, but bias the room image downward so the wall art stays visible */
.product-mockup.listing-mockup-fit > .product-mockup-stage{
  top:62%!important; /* pull the room image down so the upper artwork area stays visible */
}

/* Source: basmah-v153-box-frame-options */
/* v153 — preserve the current 2CM Box preview exactly; 5CM is only slightly wider. */
.custom-choice-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
[data-option="artFrameType"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.configured-frame.box-frame-5cm{--basmah-box-profile:5cm}
@media(max-width:760px){
  .custom-choice-grid.three{grid-template-columns:1fr!important}
  [data-option="artFrameType"]{grid-template-columns:1fr!important}
}

/* Source: basmah-v154-automatic-pricing */
/* v154 — locked five-size automatic price system. */
#adminProductEditor .basmah-auto-pricing-note{
  margin:10px 0 16px;padding:12px 14px;border:1px solid #dfd4c8;border-radius:12px;background:#fffaf4;color:#5d5146;font-size:12px;line-height:1.6
}
#adminProductEditor .basmah-auto-size-price{font-weight:800;color:#654a35;white-space:nowrap;align-self:center;padding:0 6px}
#adminProductEditor .admin-size-row[data-basmah-fixed-size] [data-size-label],
#adminProductEditor .admin-size-row[data-basmah-fixed-size] [data-size-dimensions]{background:#f5f1eb;cursor:default}
#adminProductEditor .admin-size-row[data-basmah-fixed-size] button{display:none!important}
#adminProductEditor #adminProductCustomRates{display:none!important}
#adminProductEditor #adminFrameTypeFields,
#adminProductEditor #adminMountFields{display:none!important}
.basmah-pricing-locked-card{overflow:auto}
.basmah-pricing-locked-card table{min-width:850px}
.basmah-price-rule-note{padding:12px 14px;border-radius:12px;background:#f7f1e9;border:1px solid #e6dbcf;font-size:12px;color:#655c54;line-height:1.65;margin-top:14px}

/* Source: basmah-v191-product-size-delete */
/* v191 — allow individual preset sizes to be removed per product; Custom Size stays available. */
#adminProductEditor .admin-size-row[data-basmah-standard-size] .basmah-remove-size-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
#adminProductEditor .admin-custom-size-row .basmah-remove-size-btn{display:none !important;}

/* Source: basmah-v179-bulk-artwork-importer-style */
.bulk-artwork-backdrop{position:fixed;inset:0;z-index:13050;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(25,21,18,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bulk-artwork-backdrop.is-open{display:flex}
.bulk-artwork-modal{width:min(760px,100%);max-height:calc(100vh - 44px);overflow:auto;border:1px solid #ded2c4;border-radius:24px;background:#fbf7f1;color:#29231e;box-shadow:0 30px 90px rgba(22,17,13,.32)}
.bulk-artwork-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px 26px 18px;border-bottom:1px solid #e4d9cd}
.bulk-artwork-head h3{margin:3px 0 0;font:600 28px/1.1 Georgia,serif}
.bulk-artwork-head p{margin:8px 0 0;max-width:560px;color:#786d63;font-size:12px;line-height:1.55}
.bulk-artwork-close{width:40px;height:40px;flex:0 0 40px;border:1px solid #d9cdbf;border-radius:50%;background:#fff;color:#29231e;font-size:23px;line-height:1}
.bulk-artwork-body{padding:22px 26px 26px}
.bulk-artwork-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.bulk-artwork-field{display:grid;gap:6px}
.bulk-artwork-field.full{grid-column:1/-1}
.bulk-artwork-field label{font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:#766b61}
.bulk-artwork-field select,.bulk-artwork-field input[type=file]{width:100%;min-height:44px;border:1px solid #d9cdbf;border-radius:11px;background:#fff;color:#29231e;padding:9px 11px;font:600 13px/1.3 inherit}
.bulk-artwork-file-summary{margin-top:8px;padding:11px 12px;border:1px solid #e1d6c9;border-radius:12px;background:#fff;color:#756a60;font-size:12px;line-height:1.5}
.bulk-artwork-note{margin-top:15px;padding:12px 14px;border-radius:13px;background:#efe4d6;color:#66584c;font-size:12px;line-height:1.55}
.bulk-artwork-progress{display:none;margin-top:15px}
.bulk-artwork-progress.is-active{display:block}
.bulk-artwork-progress-track{height:9px;border-radius:999px;background:#e4d9cd;overflow:hidden}
.bulk-artwork-progress-bar{height:100%;width:0;background:#2a241f;transition:width .18s ease}
.bulk-artwork-progress-text{margin-top:7px;color:#6f645b;font-size:12px;font-weight:750}
.bulk-artwork-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.bulk-placement-badge{display:inline-flex;margin-top:4px;padding:3px 7px;border-radius:999px;background:#fff0cf;color:#7a5317;font-size:9px;font-weight:850;letter-spacing:.02em}
#bulkAddArtworksBtn{white-space:nowrap}
html[lang="ar"] .bulk-artwork-modal{text-align:right;direction:rtl}
html[lang="ar"] .bulk-artwork-actions{justify-content:flex-start}
@media(max-width:640px){.bulk-artwork-backdrop{padding:10px;align-items:flex-end}.bulk-artwork-modal{max-height:92vh;border-radius:22px 22px 10px 10px}.bulk-artwork-head{padding:20px 18px 15px}.bulk-artwork-body{padding:18px}.bulk-artwork-grid{grid-template-columns:1fr}.bulk-artwork-field.full{grid-column:auto}.bulk-artwork-actions{display:grid;grid-template-columns:1fr}.bulk-artwork-actions button{width:100%}}

/* Source: basmah-v184-listing-mockup-natural-aspect */
/* v184 — product listing mockups keep their original image proportions (no stretching). */
#shopView .product-mockup.listing-mockup-fit > .listing-scene-stage{
  background-size:100% 100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  max-width:none !important;
  max-height:none !important;
  transform:translate(-50%,-50%) !important;
  transform-origin:center center !important;
}

/* Source: basmah-v187-nature-list-aspect-match */
/* v187 — Nature & Florals list previews match each mockup's real aspect ratio.
   This removes the large left/right gaps without cropping or stretching. */
#shopView .product-card.nature-list-card .product-visual{
  height:auto !important;
  min-height:0 !important;
  padding:12px !important;
  display:block !important;
  background:linear-gradient(145deg,#f8f4ee,#ede4d8);
}
#shopView .product-card.nature-list-card .product-mockup.listing-mockup-fit{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:var(--basmah-nature-mockup-ratio,4/5) !important;
  margin:0 !important;
  background:#ece5db;
  overflow:hidden;
}
#shopView .product-card.nature-list-card .product-mockup.listing-mockup-fit > .listing-scene-stage{
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  transform:none !important;
  background-size:100% 100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
@media (max-width:900px){
  #shopView .product-card.nature-list-card .product-visual{
    padding:10px !important;
  }
}

/* Source: basmah-v190-developer-category-filter */
/* v190 — Developer > Products & images: filter artwork list by category. */
#adminProductsPane .admin-product-list-column{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#adminProductsPane .admin-product-category-filter{
  padding:12px;
  border:1px solid #ded6cb;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 16px rgba(62,49,37,.035);
}
#adminProductsPane .admin-product-category-filter label{
  display:block;
  margin-bottom:7px;
  color:#6f645b;
  font-size:10px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#adminProductsPane .admin-product-category-filter select{
  width:100%;
  min-height:42px;
  padding:9px 34px 9px 11px;
  border:1px solid #d7ccbf;
  border-radius:10px;
  background:#fbf8f4;
  color:#2a241f;
  font:750 13px/1.25 inherit;
  cursor:pointer;
  outline:none;
}
#adminProductsPane .admin-product-category-filter select:focus{
  border-color:#9b7b5e;
  box-shadow:0 0 0 3px rgba(141,110,80,.10);
}
#adminProductsPane .admin-product-category-filter-meta{
  margin-top:7px;
  color:#83776c;
  font-size:11px;
  line-height:1.35;
}
#adminProductsPane .admin-product-filter-empty{
  padding:26px 14px;
  text-align:center;
  color:#7c7269;
  font-size:12px;
  line-height:1.55;
}
@media(max-width:900px){
  #adminProductsPane .admin-product-list-column{min-width:0;}
}

/* Source: basmah-v197-final-edits */
/* v197 — final requested edits */

/* 4 — Home header stays locked while scrolling. */
body:has(#homeView.active) .site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
}

/* 5 — Size and frame-type filters are removed from Shop by script; this is a CSS safety net. */
#shopView #shopSizeFilter,
#shopView #shopFrameTypeFilter{display:none!important}

/* 1 — optional artwork price override per product size. */
#adminProductEditor .basmah-size-price-override{
  min-width:0;
}
#adminProductEditor .basmah-size-price-override label{
  white-space:normal;
}
#adminProductEditor .basmah-price-override-help{
  margin-top:4px;
  color:#84766a;
  font-size:10px;
  line-height:1.35;
}
#adminProductEditor .admin-size-row:not(.admin-custom-size-row){
  grid-template-columns:minmax(110px,1fr) minmax(145px,1.15fr) minmax(145px,.95fr) auto auto;
}
@media(max-width:900px){
  #adminProductEditor .admin-size-row:not(.admin-custom-size-row){grid-template-columns:1fr 1fr}
}

/* 3 — desktop cart summary is a floating anchored card, never a modal. */
.basmah-cart-float{
  position:fixed;
  z-index:12020;
  width:min(390px,calc(100vw - 32px));
  max-height:min(520px,calc(100vh - 120px));
  display:none;
  overflow:hidden;
  border:1px solid #dbcbb9;
  border-radius:20px;
  background:rgba(255,253,249,.985);
  color:var(--ink);
  box-shadow:0 22px 55px rgba(31,23,17,.20);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.basmah-cart-float.is-open{display:flex;flex-direction:column}
.basmah-cart-float-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 17px 12px;border-bottom:1px solid var(--line)}
.basmah-cart-float-head strong{font-size:16px}
.basmah-cart-float-head span{color:var(--muted);font-size:11px}
.basmah-cart-float-items{overflow:auto;padding:4px 14px;max-height:300px}
.basmah-cart-float-item{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.basmah-cart-float-item:last-child{border-bottom:0}
.basmah-cart-float-thumb{width:54px;height:54px;border-radius:10px;overflow:hidden;background:#eee5da;display:grid;place-items:center}
.basmah-cart-float-thumb .cart-mockup-preview{width:100%;height:100%;background-position:center;background-size:cover;background-repeat:no-repeat}
.basmah-cart-float-thumb .basmah-cart-product-image{width:100%;height:100%;display:block;object-fit:cover}
.basmah-cart-float-thumb .mini-frame{width:68%;height:auto;max-height:78%}
.basmah-cart-float-copy{min-width:0}
.basmah-cart-float-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.basmah-cart-float-copy span{display:block;margin-top:3px;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.basmah-cart-float-price{font-size:12px;font-weight:850;white-space:nowrap}
.basmah-cart-float-empty{padding:28px 18px;text-align:center;color:var(--muted);font-size:13px}
.basmah-cart-float-footer{padding:13px 14px 14px;border-top:1px solid var(--line);background:#faf5ee}
.basmah-cart-float-total{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px;font-size:13px}
.basmah-cart-float-total strong{font-size:17px}
.basmah-cart-float-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.basmah-cart-float-actions .btn{min-width:0;padding:11px 12px}
html[lang="ar"] .basmah-cart-float{text-align:right;direction:rtl}
@media(max-width:980px){.basmah-cart-float{display:none!important}}

/* 6 — adaptive large configured product preview on desktop click. */
@media(min-width:981px){
  #productView #previewStage{cursor:zoom-in!important}
  /* The legacy v175 desktop popup is disabled; mobile keeps its pinch-zoom implementation. */
  .product-preview-lightbox{display:none!important}
}
.basmah-product-lightbox{
  position:fixed;inset:0;z-index:26050;display:none;align-items:center;justify-content:center;
  padding:34px;background:rgba(20,16,13,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.basmah-product-lightbox.is-open{display:flex}
.basmah-product-lightbox-card{
  position:relative;display:grid;place-items:center;max-width:94vw;max-height:90vh;
  border-radius:20px;background:#111;overflow:hidden;box-shadow:0 35px 90px rgba(0,0,0,.38)
}
.basmah-product-lightbox-stage-host{position:relative;width:100%;height:100%;overflow:hidden;background:#ece5db}
.basmah-product-lightbox-stage-host>.preview-stage{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;
  margin:0!important;border-radius:0!important;cursor:default!important;user-select:none!important
}
.basmah-product-lightbox-stage-host>.preview-stage.has-mockup-front{height:100%!important}
.basmah-product-lightbox-stage-host .preview-mockup-image{width:100%!important;height:100%!important;object-fit:fill!important;display:block!important}
.basmah-product-lightbox-stage-host .preview-magnifier,
.basmah-product-lightbox-stage-host .zoom-hint{display:none!important}
.basmah-product-lightbox-stage-host *{cursor:default!important}
.basmah-product-lightbox-close{position:absolute;right:16px;top:16px;z-index:20;width:44px;height:44px;border:1px solid rgba(255,255,255,.42);border-radius:50%;background:rgba(0,0,0,.52);color:#fff;font-size:26px;display:grid;place-items:center}
html[lang="ar"] .basmah-product-lightbox-close{right:auto;left:16px}

/* 8 — shipping fee rows are intentionally absent. */

/* Source: basmah-v199-product-size-orientation */
/* v199 — Developer product sizes: Portrait / Landscape / Square preset selector. */
#adminProductEditor .basmah-size-orientation-picker{
  margin:0 0 14px;
  padding:14px;
  border:1px solid #dfd4c8;
  border-radius:14px;
  background:#f7f1e9;
}
#adminProductEditor .basmah-size-orientation-picker>label{
  display:block;
  margin-bottom:9px;
  color:#5f544a;
  font-size:11px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
#adminProductEditor .basmah-size-orientation-buttons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
#adminProductEditor .basmah-size-orientation-button{
  min-height:42px;
  padding:9px 12px;
  border:1px solid #d6c8b9;
  border-radius:11px;
  background:#fff;
  color:#2d2823;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
#adminProductEditor .basmah-size-orientation-button:hover{
  border-color:#9e8168;
  background:#fffaf4;
}
#adminProductEditor .basmah-size-orientation-button.active{
  border-color:#2d2823;
  background:#2d2823;
  color:#fff;
  box-shadow:0 7px 16px rgba(45,40,35,.12);
}
#adminProductEditor .basmah-size-orientation-help{
  margin-top:9px;
  color:#786c61;
  font-size:10.5px;
  line-height:1.45;
}
@media(max-width:640px){
  #adminProductEditor .basmah-size-orientation-buttons{grid-template-columns:1fr;}
}

/* Source: basmah-v200-category-area-pricing-style */
/* v200 — category-specific area pricing rules shown in Developer pricing. */
.basmah-category-area-pricing-note{
  margin-top:14px;
  padding:14px 16px;
  border:1px solid #e1d5c8;
  border-radius:14px;
  background:#fffaf4;
  color:#5f544a;
  font-size:12px;
  line-height:1.6;
}
.basmah-category-area-pricing-note strong{color:#2d2823}
.basmah-category-rate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.basmah-category-rate-item{padding:11px 12px;border:1px solid #eadfd3;border-radius:11px;background:#fff}
.basmah-category-rate-item span{display:block;color:#7b6e62;font-size:10.5px;margin-top:3px}
#adminProductEditor .basmah-carpet-rate-price small{display:block;margin-top:2px;color:#87786a;font-size:9.5px;font-weight:700}
@media(max-width:640px){.basmah-category-rate-grid{grid-template-columns:1fr}}

/* v274 — mobile product back button stays clear of the sticky preview.
   It is visible only at the true top of the product page. While the customer
   scrolls through options the row keeps its space but becomes non-interactive,
   leaving the existing preview shrink/expand behaviour completely unchanged. */
@media(max-width:640px){
  #productView.active .product-back-row{
    position:relative!important;
    top:auto!important;
    z-index:40!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    background:var(--bg,#fffdf9)!important;
    transition:opacity .16s ease,visibility 0s linear 0s!important;
  }
  body.basmah-mobile-product-header-hidden #productView.active .product-back-row{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .12s ease,visibility 0s linear .12s!important;
  }
}

/* Source: basmah-v206-ux-fixes */
/* Mobile product descriptions: compact at first, all information remains accessible. */
#productDescriptionToggle{display:none;}
@media(max-width:640px){
  #productDescription{
    margin:12px 0 3px;
    padding:12px 13px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(247,241,232,.72);
    font-size:13px;
    line-height:1.65;
  }
  #productDescription.basmah-description-collapsed{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    overflow:hidden;
  }
  #productDescriptionToggle{
    display:none;
    margin:6px 0 2px;
    padding:7px 0;
    border:0;
    background:transparent;
    color:var(--accent-dark);
    font-size:12px;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:3px;
  }
  #productDescriptionToggle.is-visible{display:inline-flex;}
}

/* Arabic custom order: wizard on the right, live preview on the left. */
@media(min-width:1001px){
  html[lang="ar"] #customView .custom-order-layout{direction:ltr!important;}
  html[lang="ar"] #customView .custom-preview-panel{grid-column:1!important;direction:rtl!important;text-align:right!important;}
  html[lang="ar"] #customView .custom-wizard-panel{grid-column:2!important;direction:rtl!important;text-align:right!important;}
}

/* Source: basmah-v228-frame-count-admin-style */
#adminProductEditor .basmah-frame-count-card{
  margin:4px 0 16px;
  padding:14px 16px;
  background:#fbf7f1;
  border:1px solid #e4d8ca;
  border-radius:14px;
}
#adminProductEditor .basmah-frame-count-card .admin-help{margin-top:7px;line-height:1.55}
#adminProductEditor .basmah-frame-count-price-grid{
  display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;
}
#adminProductEditor .basmah-frame-count-price-grid span{
  display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;
  background:#fff;border:1px solid #e6dbcf;color:#67584b;font-size:11px;font-weight:700;
}

/* Source: basmah-v229-luxury-mirror-mode-style */
#adminProductEditor .basmah-luxury-mirror-mode-card{
  margin:12px 0;padding:14px;border:1px solid #e4d8ca;border-radius:14px;background:#fffaf4;
}
#adminProductEditor .basmah-luxury-mirror-mode-card .admin-help{margin-top:7px;line-height:1.55}
#adminProductEditor .basmah-mirror-rate-pills{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
#adminProductEditor .basmah-mirror-rate-pills span{
  display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;background:#fff;
  border:1px solid #e6dbcf;color:#67584b;font-size:11px;font-weight:700;
}

/* Source: basmah-final-dual-static-descriptions */
/* The exported Shop All grid is ready in both languages, so entering Shop needs no expensive rebuild. */
#shopView .product-description .basmah-desc-ar{display:none;}
html[lang="ar"] #shopView .product-description .basmah-desc-en{display:none;}
html[lang="ar"] #shopView .product-description .basmah-desc-ar{display:inline;}
html[lang="en"] #shopView .product-description .basmah-desc-en{display:inline;}

/* Source: basmah-final-polish-v2 */
/* Premium mobile drawer + in-place Shop category motion. */
@media(max-width:640px){
  .basmah-mobile-nav-backdrop{
    background:rgba(34,26,20,.42)!important;
    backdrop-filter:blur(7px) saturate(.9)!important;
    -webkit-backdrop-filter:blur(7px) saturate(.9)!important;
  }
  .basmah-mobile-nav-panel{
    width:min(89vw,382px)!important;
    padding:calc(max(22px,env(safe-area-inset-top)) + 10px) 18px max(22px,env(safe-area-inset-bottom))!important;
    gap:10px!important;
    overflow:hidden!important;
    border-left:1px solid rgba(179,145,105,.52)!important;
    border-radius:30px 0 0 30px!important;
    background:
      radial-gradient(circle at 86% 4%,rgba(205,165,108,.22),transparent 26%),
      radial-gradient(circle at 10% 92%,rgba(141,110,80,.11),transparent 32%),
      linear-gradient(180deg,#fffdf9 0%,#f8f0e6 48%,#f2e4d5 100%)!important;
    box-shadow:-30px 0 80px rgba(35,25,18,.28)!important;
  }
  html[lang="en"] .basmah-mobile-nav-panel{direction:ltr!important;}
  html[lang="ar"] .basmah-mobile-nav-panel{direction:rtl!important;}

  .basmah-mobile-nav-panel::before{display:none!important;}
  .basmah-mobile-nav-brand{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
    margin:0 2px 15px;padding:3px 0 17px;border-bottom:1px solid rgba(141,110,80,.20);direction:ltr;
  }
  .basmah-mobile-nav-logo{
    width:66px;height:66px;display:block;overflow:hidden;border-radius:50%;background:#eadbc5;
    border:1px solid rgba(141,110,80,.22);box-shadow:0 11px 28px rgba(69,48,32,.13);
  }
  .basmah-mobile-nav-logo img{width:100%;height:100%;display:block;object-fit:cover;}
  .basmah-mobile-nav-wordmark{
    color:#2d261f;font:600 29px/1 Georgia,"Times New Roman",serif;letter-spacing:.14em;
    text-align:center;direction:ltr;text-shadow:0 8px 26px rgba(77,53,34,.08);
  }
  .basmah-mobile-nav-panel::after{
    content:'CURATED WALL ART · MADE IN QATAR';
    display:block;
    margin:17px 4px 0;
    padding-top:16px;
    border-top:1px solid rgba(141,110,80,.17);
    color:#8b7867;
    font-size:9px;
    font-weight:850;
    letter-spacing:.16em;
    text-align:center;
    direction:ltr;
  }
  html[lang="ar"] .basmah-mobile-nav-panel::after{
    content:'بصمة تترك أثر';
    direction:rtl;
    letter-spacing:.04em;
  }

  .basmah-mobile-nav-close{
    position:absolute!important;
    top:max(18px,env(safe-area-inset-top))!important;
    right:18px!important;
    width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid rgba(141,110,80,.24)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.76)!important;
    color:#382f28!important;
    font:400 25px/1 Arial,sans-serif!important;
    box-shadow:0 8px 22px rgba(57,43,31,.10)!important;
    backdrop-filter:blur(8px)!important;
    -webkit-backdrop-filter:blur(8px)!important;
    z-index:2!important;
  }
  html[lang="ar"] .basmah-mobile-nav-close{right:auto!important;left:18px!important;}

  .basmah-mobile-nav-panel .basmah-mobile-nav-item{
    position:relative!important;
    min-height:60px!important;
    padding:10px 13px!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    border:1px solid rgba(197,174,148,.55)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.72)!important;
    color:#302820!important;
    font-size:14px!important;
    font-weight:800!important;
    box-shadow:0 7px 22px rgba(64,46,31,.055),inset 0 1px 0 rgba(255,255,255,.85)!important;
    text-align:left!important;
    overflow:hidden!important;
    transform:none!important;
  }
  html[lang="ar"] .basmah-mobile-nav-panel .basmah-mobile-nav-item{text-align:right!important;}
  .basmah-mobile-nav-panel .basmah-mobile-nav-item::before{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(145deg,#3d322a,#6f5744);
    color:#fff8ef;
    box-shadow:0 7px 16px rgba(56,40,28,.13);
    font-size:17px;
    font-weight:500;
  }
  .basmah-mobile-nav-panel .basmah-mobile-nav-item::after{
    content:'›';
    margin-left:auto;
    color:#a18162;
    font-size:22px;
    font-weight:400;
    line-height:1;
  }
  html[lang="ar"] .basmah-mobile-nav-panel .basmah-mobile-nav-item::after{
    content:'‹';
    margin-left:0;
    margin-right:auto;
  }
  .basmah-mobile-nav-panel .nav-home::before{content:'⌂';}
  .basmah-mobile-nav-panel .nav-shop::before{content:'▦';}
  .basmah-mobile-nav-panel .nav-custom::before{content:'✦';}
  .basmah-mobile-nav-panel .nav-contact::before{content:'☎';font-size:15px;}
  .basmah-mobile-nav-panel .basmah-mobile-nav-item:active{
    background:#efe0cf!important;
    border-color:#c6a987!important;
    transform:scale(.985)!important;
  }
  .basmah-mobile-nav.is-open .basmah-mobile-nav-item{
    animation:basmahMenuItemIn .34s cubic-bezier(.22,.76,.24,1) both;
  }
  .basmah-mobile-nav.is-open .basmah-mobile-nav-item:nth-of-type(2){animation-delay:.035s;}
  .basmah-mobile-nav.is-open .basmah-mobile-nav-item:nth-of-type(3){animation-delay:.065s;}
  .basmah-mobile-nav.is-open .basmah-mobile-nav-item:nth-of-type(4){animation-delay:.095s;}
  .basmah-mobile-nav.is-open .basmah-mobile-nav-item:nth-of-type(5){animation-delay:.125s;}
  @keyframes basmahMenuItemIn{
    from{opacity:0;transform:translate3d(18px,0,0)}
    to{opacity:1;transform:none}
  }
}

/* Category selection is an in-page navigation action, so it gets its own motion. */
#shopView .product-grid.basmah-category-enter{
  animation:basmahCategoryGridIn .28s var(--basmah-final-ease) both!important;
}
#shopView .product-toolbar.basmah-category-enter{
  animation:basmahCategoryToolbarIn .24s var(--basmah-final-ease) both!important;
}
@keyframes basmahCategoryGridIn{from{opacity:.50;transform:translate3d(0,5px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes basmahCategoryToolbarIn{from{opacity:.52}to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .basmah-mobile-nav.is-open .basmah-mobile-nav-item,
  #shopView .product-grid.basmah-category-enter,
  #shopView .product-toolbar.basmah-category-enter{animation:none!important;}
}

/* Source: basmah-v264-q10-checkout-shine-style */
/* Lightweight coupon reminder: animate only a short-lived compositor transform. */
#checkoutCouponBox{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Source: basmah-v270-shop-batches */
.shop-load-more{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:30px 0 8px;
}
.shop-load-more[hidden]{display:none!important;}
.shop-load-more-button{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:220px;
  min-height:48px;
  padding:12px 24px!important;
  border-radius:999px!important;
}
.shop-load-more-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(98,72,49,.09);
  color:inherit;
  font-size:11px;
  font-weight:800;
  direction:ltr;
}
.shop-load-more-count:empty{display:none;}
@media(max-width:640px){
  .shop-load-more{padding:22px 0 4px;}
  .shop-load-more-button{width:min(100%,320px);}
}
#checkoutCouponBox.basmah-q10-shine::after{
  content:"";
  position:absolute;
  z-index:2;
  top:-25%;
  bottom:-25%;
  left:-42%;
  width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);
  pointer-events:none;
  will-change:transform;
  animation:basmahQ10CheckoutShine .72s cubic-bezier(.22,.72,.28,1);
}
@keyframes basmahQ10CheckoutShine{
  from{transform:translate3d(0,0,0) skewX(-18deg)}
  to{transform:translate3d(430%,0,0) skewX(-18deg)}
}
@media (prefers-reduced-motion:reduce){
  #checkoutCouponBox.basmah-q10-shine::after{display:none!important;}
}

/* BASMAH v266 — mobile sticky coverage and real-frame gallery repair. */
@media(max-width:640px){
  /* Cover the complete gap between the browser/header edge and the sticky
     preview, plus a little below it, so underlying product copy never peeks
     through during sticky movement. */
  #productView.active .preview-stack::before{
    top:-64px!important;
    bottom:-12px!important;
  }

  /* The real-frame image is absolutely positioned. Give its stage a definite
     mobile height after the natural-image rules, which otherwise collapse it. */
  #productView.active .preview-stack .preview-stage.frame-reference-active,
  #productView.active .preview-stack .preview-stage.has-mockup-front.frame-reference-active,
  #productView.active .preview-stack.basmah-mobile-preview-compact249 .preview-stage.frame-reference-active,
  #productView.active .preview-stack.basmah-mobile-preview-compact249 .preview-stage.has-mockup-front.frame-reference-active{
    width:100%!important;
    height:clamp(320px,85vw,420px)!important;
    min-height:320px!important;
    max-height:420px!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:14px!important;
  }
}

/* BASMAH v278 source: basmah-pricing-v273.css */
.basmah-v271-pricing-card{margin:4px 0 16px;background:linear-gradient(145deg,#fffaf4,#fff);border-color:#d7c5b3;box-shadow:0 14px 36px rgba(75,52,33,.08)}
.basmah-v271-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.basmah-v271-card-head h3{margin:3px 0 6px!important;font:700 20px/1.2 Georgia,serif}
.basmah-v271-card-head p{max-width:760px;margin:0;color:#74675c;font-size:12px;line-height:1.6}
.basmah-v271-kicker{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#9b6a42}
.basmah-v271-version{padding:6px 9px;border-radius:999px;background:#2a241f;color:#fff;font-size:10px;font-weight:900}
.basmah-v271-config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.basmah-v271-rule-note{margin:2px 0 13px;padding:10px 12px;border:1px solid #ead8c5;border-radius:11px;background:#fff7ed;color:#665548;font-size:11px;line-height:1.55}
.basmah-v271-breakdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.basmah-v271-breakdown>div{display:grid;gap:3px;padding:10px 11px;border:1px solid #e5ddd4;border-radius:10px;background:#fff}
.basmah-v271-breakdown span{font-size:10px;color:#7c7065}
.basmah-v271-breakdown strong{font-size:12px;color:#2d2722}
.basmah-v271-breakdown .basmah-v271-empty{grid-column:1/-1;color:#81766c}
.basmah-v271-legacy-price-field,.basmah-size-price-override{display:none!important}
.admin-size-row .basmah-v271-size-pricing{grid-column:1/-1;display:grid;grid-template-columns:minmax(120px,.8fr) minmax(170px,1fr) minmax(140px,.9fr) auto;gap:9px;align-items:end;padding:10px;border:1px solid #eadfd4;border-radius:12px;background:#fcfaf7}
.basmah-v271-price-value,.basmah-v271-override-field{display:grid;gap:4px;margin:0}
.basmah-v271-price-value small,.basmah-v271-override-field small{font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8a7a6c}
.basmah-v271-price-value strong{font-size:14px}
.basmah-v271-price-value.final{padding:8px 10px;border-radius:9px;background:#f0e8df}
.basmah-v271-price-value.final span{font-size:9px;font-weight:900;color:#6f6257}
.basmah-v271-price-value.final span.manual{color:#a14a24}
.basmah-v271-reset{white-space:nowrap}
.basmah-extra-frame-renderer{pointer-events:none!important}
.preview-stage.has-mockup-front .frame-renderer.basmah-multi-panel-frame .configured-frame{
  --frame-depth:5px!important;
}
#adminProductsPane .admin-mockup-placement-box.basmah-multi-placement-box{
  border:2px solid #b56f37!important;
  outline:1px solid rgba(255,255,255,.95)!important;
  outline-offset:-3px!important;
  box-shadow:0 0 0 1px rgba(65,39,20,.2),0 8px 18px rgba(44,28,15,.12)!important;
  z-index:12;
}
#adminProductsPane .admin-mockup-placement-box.basmah-multi-placement-box:nth-of-type(2){border-color:#447d8f!important}
#adminProductsPane .admin-mockup-placement-box.basmah-multi-placement-box:nth-of-type(3){border-color:#6f7d49!important}
.basmah-placement-number{
  position:absolute;z-index:35;top:5px;left:5px;padding:4px 7px;border-radius:999px;
  background:rgba(35,29,24,.9);color:#fff;font:800 10px/1 Arial,sans-serif;letter-spacing:.03em;
  pointer-events:none;box-shadow:0 2px 7px rgba(0,0,0,.2)
}
.basmah-multi-placement-note{
  margin:0 0 10px;padding:10px 12px;border:1px solid #e2c5a8;border-radius:10px;
  background:#fff7ed;color:#604d3e;font-size:12px;line-height:1.5
}
@media(max-width:1000px){.basmah-v271-config-grid,.basmah-v271-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-size-row .basmah-v271-size-pricing{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.basmah-v271-card-head{display:block}.basmah-v271-version{display:inline-block;margin-top:9px}.basmah-v271-config-grid,.basmah-v271-breakdown,.admin-size-row .basmah-v271-size-pricing{grid-template-columns:1fr}.developer-launcher{left:12px;bottom:12px}}

/* BASMAH v278 source: basmah-edits-v274.css */
/* BASMAH v274 — requested customer-facing refinements. */

/* Keep the floating WhatsApp contact as an icon-only control. */
#siteWhatsappLink .whatsapp-float-pill{
  width:60px!important;
  min-width:60px!important;
  height:60px!important;
  padding:4px!important;
  justify-content:center!important;
}

/* BASMAH v275 mobile first-load optimization.
   These are center crops of the existing heroes, matching the current mobile
   cover view while transferring substantially fewer bytes. */
@media (max-width:640px){
  #homeView .basmah-tadween-hero .hero-art-backdrop{
    background:
      linear-gradient(180deg,rgba(36,27,21,.16) 0%,rgba(36,27,21,.16) 100%),
      url("../media/mobile_hero_landscape_art-v275.webp") center center / cover no-repeat !important;
  }
  html[lang="ar"] #homeView .basmah-tadween-hero .hero-art-backdrop{
    background:
      linear-gradient(180deg,rgba(36,27,21,.16) 0%,rgba(36,27,21,.16) 100%),
      url("../media/mobile_hero_landscape_art-v275.webp") center center / cover no-repeat !important;
  }
}
#siteWhatsappLink .whatsapp-float-icon{
  width:52px!important;
  height:52px!important;
  flex:0 0 52px!important;
}
#siteWhatsappLink .whatsapp-float-label{display:none!important;}

/* Four custom-order construction choices fit cleanly on larger screens. */
.custom-choice-grid.four{grid-template-columns:repeat(4,minmax(0,1fr));}
.custom-stepper{grid-template-columns:repeat(var(--custom-step-count,7),1fr)!important;}

/* Stretched canvas has no external frame, depth face, colour or mount. */
#customConfiguredFrame.stretched-canvas{
  --frame-depth:0px!important;
  --frame-rail:0px!important;
  box-shadow:0 10px 26px rgba(45,35,27,.14)!important;
}
#customConfiguredFrame.stretched-canvas .frame-rail,
#customConfiguredFrame.stretched-canvas .frame-depth-face,
#customConfiguredFrame.stretched-canvas .frame-back{display:none!important;}
#customConfiguredFrame.stretched-canvas .frame-face-front{transform:none!important;}
#customConfiguredFrame.stretched-canvas .frame-face-front>.mount-outer{
  inset:0!important;
  padding:0!important;
  box-shadow:none!important;
}
.custom-step-dot.custom-step-skipped,
.custom-step-card.custom-step-skipped{display:none!important;}

@media(max-width:640px){
  .custom-choice-grid.four{grid-template-columns:1fr 1fr;}

  /* Product preview: slightly smaller while scrolling and faster response. */
  #productView.active .preview-stack .preview-stage,
  #productView.active .preview-stack .preview-stage.has-mockup-front{
    transition:width .16s ease!important,height .16s ease!important;
  }
  #productView.active .preview-stack.basmah-mobile-preview-compact249 .preview-stage,
  #productView.active .preview-stack.basmah-mobile-preview-compact249 .preview-stage.has-mockup-front{
    width:42%!important;
  }
  #productView.active .preview-stack.basmah-mobile-preview-compact249 .preview-stage.frame-reference-active,
  #productView.active .preview-stack.basmah-mobile-preview-compact249 .preview-stage.has-mockup-front.frame-reference-active{
    width:42%!important;
    height:clamp(170px,46vw,230px)!important;
    min-height:170px!important;
    max-height:230px!important;
    padding:8px!important;
  }

  /* On phones the live preview follows the wizard, directly below it. */
  #customView .custom-step-card h3::after{
    content:"See preview below \2193";
    display:inline-flex;
    margin-inline-start:9px;
    padding:4px 8px;
    border-radius:999px;
    background:#f1e4d5;
    color:#8a623c;
    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:800;
    line-height:1.2;
    vertical-align:middle;
    white-space:nowrap;
  }
  html[lang="ar"] #customView .custom-step-card h3::after{
    content:"المعاينة بالأسفل \2193";
  }
}