/* MD4U v2 skin over the v1 shop build: ivory paper, espresso ink, one champagne accent.
   Loaded last on every page except the home (v2.js keeps it last). Selectors start with "html body" to outrank the v1 brand layer. */
:root:root {
  --brand-primary: 23 18% 14%; --brand-primary-hover: 23 15% 24%; --brand-primary-bright: 23 14% 30%;
  --brand-light: 32 45% 93%; --brand-navy: 23 18% 14%; --brand-navy-hover: 23 15% 24%; --brand-steel: 24 14% 37%;
  --brand-ivory: 34 100% 99%; --brand-text: 24 14% 30%; --brand-text-muted: 24 12% 40%; --brand-border: 30 36% 85%;
  --brand-gold: 35 42% 35%; --brand-gold-soft: 29 43% 90%;
  --background: 35 46% 95%; --foreground: 23 18% 14%;
  --card: 34 100% 99%; --card-foreground: 23 18% 14%;
  --popover: 34 100% 99%; --popover-foreground: 23 18% 14%;
  --primary: 23 18% 14%; --primary-foreground: 35 46% 95%; --primary-teal: 23 18% 14%;
  --secondary: 29 43% 90%; --secondary-foreground: 23 18% 14%;
  --muted: 30 30% 91%; --muted-foreground: 24 14% 37%;
  --accent: 29 43% 90%; --accent-foreground: 23 18% 14%;
  --border: 30 36% 85%; --input: 30 30% 80%; --ring: 36 40% 54%;
  --radius: 0.25rem;
  --soft-teal: 29 43% 92%; --warm-teal: 29 43% 88%; --coral-accent: 36 40% 54%; --deep-teal: 23 18% 14%;
  --footer-bg: 23 18% 14%; --footer-bg-deep: 22 20% 10%; --footer-bar: 22 20% 10%; --footer-fg: 36 45% 92%; --footer-accent: 37 44% 69%;
  --md-gold: #B8935A; --md-gold-text: #7E5F33; --md-ivory: #F8F3EC; --md-band: #F0E4D9;
  --md-y: #D9C3A5; --md-yd: #C9AE8A; --md-k: #2B231E; --md-paper: #F8F3EC;
  --font-display: "Assistant", sans-serif;
}
html body { background: #F8F3EC; color: #2B231E; }
html body ::selection { background: #E9DCC8; color: #2B231E; }
html body :focus-visible { outline: 2px solid #B8935A !important; outline-offset: 3px; box-shadow: none !important; }
html body :is(h1, h2, h3) { font-weight: 400 !important; letter-spacing: 0 !important; }
html body :is(main h1, .wps-h1, .sf-h1) { font-weight: 300 !important; }
html body h1.gradient-text { font-weight: 400 !important; }
html body .gradient-text { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: #2B231E !important; }
html body .font-black, html body .font-extrabold { font-weight: 600 !important; }

/* demo disclosure: one quiet line; the delivery strip under it goes, so the top stays one line */
html body #mova-demo-bar { background: #EFE6DA !important; color: #54453B !important; font: 400 13px/1.5 Assistant, Arial, sans-serif !important; padding: 7px 16px !important; }
html body #mova-demo-bar a, html body #mova-demo-bar span { color: #54453B !important; }
html body #mova-demo-bar a { font-weight: 600 !important; text-underline-offset: 3px; }
html body #mova-demo-pill { background: #2B231E !important; color: #F2EBE0 !important; font-weight: 500 !important; font-size: 13px !important; }
html body .min-h-screen > div.w-full.py-2.px-3[style*="background-color"] { display: none !important; }
html body #mova-demo-bar .db-s { display: none !important; }
@media (max-width: 859px) {
  html body #mova-demo-bar { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html body #mova-demo-bar .db-l { display: none !important; }
  html body #mova-demo-bar .db-s { display: inline !important; }
}

/* white becomes warm paper */
html body .bg-white { background-color: #FFFCF8 !important; }
html body [class*="bg-white/"] { background-color: rgba(255, 252, 248, 0.95) !important; }
html body :is(.bg-gray-50, .bg-slate-50, .bg-neutral-50) { background-color: #F7F1E8 !important; }

/* header */
html body header.sticky { background: rgba(248, 243, 236, 0.94) !important; border-color: #E6D8CA !important; box-shadow: none !important; }
html body header img[alt="MD4U"] { content: url(/v2/icons/md4u.svg); height: 19px !important; width: auto !important; max-width: none !important; object-fit: contain; }
@media (min-width: 1024px) {
  html body header img[alt="MD4U"] { height: 22px !important; }
  html body header a:has(> img[alt="MD4U"]) { display: flex; flex-direction: column; align-items: center; gap: 5px; }
  html body header a:has(> img[alt="MD4U"])::after { content: "מלי רוכמן · מתנות בעבודת יד"; font: 400 13px/1 Assistant, Arial, sans-serif; color: #7E5F33; white-space: nowrap; }
}
html body header nav a, html body header nav button { font-weight: 400 !important; color: #2B231E !important; }
html body header nav > a, html body header nav > div > a, html body header nav > ul > li > a, html body header nav > ul > li > button { background-image: linear-gradient(#B8935A, #B8935A) !important; background-size: 0 1px !important; background-position: 100% calc(100% - 4px) !important; background-repeat: no-repeat !important; background-color: transparent !important; transition: background-size 0.35s !important; }
html body header nav a:hover, html body header nav > div:hover > a { background-size: 100% 1px !important; background-color: transparent !important; color: #2B231E !important; }
html body header :is(a, button)[aria-label] svg { stroke-width: 1.5; }
html body header + div.sticky { background: rgba(248, 243, 236, 0.95) !important; border-color: #E6D8CA !important; box-shadow: none !important; }
html body header + div.sticky input { border-color: #D9C8B4 !important; background: #FFFCF8 !important; border-radius: 2px !important; font-size: 16px !important; box-shadow: none !important; }
html body header + div.sticky button[type="submit"] { background: #2B231E !important; color: #F8F3EC !important; border-radius: 2px !important; font-weight: 500 !important; }

/* dropdown menus, popovers */
html body [role="menu"], html body .mm-panel, html body [data-radix-popper-content-wrapper] > div { border-radius: 4px !important; box-shadow: 0 18px 40px rgba(43, 35, 30, 0.12) !important; }

/* buttons */
html body :is(button.bg-primary, a.bg-primary, .sf-more-btn) { border-radius: 2px !important; font-weight: 500 !important; }
html body :is(button.bg-primary, a.bg-primary, .sf-more-btn):hover { background-color: #4A3C33 !important; color: #F8F3EC !important; }
html body .bg-gradient-to-r.from-brand { background-image: none !important; background-color: #2B231E !important; }
html body .sf-subcat { border: 1px solid #D9C8B4 !important; background: #FFFCF8 !important; font-weight: 400 !important; }
html body .sf-subcat:hover { transform: none !important; background: #F0E4D9 !important; }
html body .sf-more-auto { border-color: #E6D8CA !important; border-top-color: #2B231E !important; }

/* category head: no yellow band, no rotated tag, no banner collage */
html body .sf-head { background: transparent !important; box-shadow: none !important; clip-path: none !important; padding-block: 26px 22px !important; margin-bottom: 22px !important; border-bottom: 1px solid #E6D8CA; animation: none !important; }
html body .sf-head .sf-h1, html body main .sf-head h1 { display: block !important; background: none !important; color: #2B231E !important; transform: none !important; rotate: 0deg !important; padding: 0 !important; font-weight: 300 !important; font-size: clamp(34px, 1.6rem + 2.2vw, 58px) !important; line-height: 1.1 !important; }
html body .sf-head .sf-intro { color: #6B5B50 !important; font-weight: 400 !important; font-size: 17px !important; }
html body img.aspect-\[16\/5\], html body .wps-cb { display: none !important; }
/* v1 painted the banner early as a placeholder above the products; with the banner gone it only flashed and then jumped */
html body section.sf::before { content: none !important; display: none !important; }

/* product cards: paper tile, the photo printed onto it, no frame, no tilt */
html body .sf-card { background: transparent !important; box-shadow: none !important; border-color: transparent !important; transform: none !important; rotate: 0deg !important; }
html body .sf-card-img { background: #F3ECE2 !important; outline: 0 !important; box-shadow: none !important; border: 0 !important; border-radius: 2px !important; transform: none !important; rotate: 0deg !important; }
html body .sf-card-img img { mix-blend-mode: multiply; }
html body .sf-card:hover .sf-card-img, html body .sf-card:hover .sf-card-img img { rotate: 0deg !important; }
html body .sf-card-name { font-weight: 400 !important; color: #2B231E !important; }
html body :is(.sf-card-price, .sf-price-now) { font-weight: 500 !important; color: #2B231E !important; }
html body .wps-card img { background: #F3ECE2; mix-blend-mode: multiply; }

/* product page */
html body .vc-price { color: #7E5F33 !important; }
html body .vc-btn.vc-on { box-shadow: 0 0 0 1.5px #2B231E !important; }
html body :is(.fill-amber-400, .fill-yellow-400) { fill: #B8935A !important; }
html body :is(.text-amber-400, .text-amber-500, .text-yellow-400, .text-yellow-500) { color: #B8935A !important; }
html body :is(.bg-amber-50, .bg-yellow-50) { background-color: #F7EFE4 !important; }

/* lines never end on a lone word where the browser can help: headings balance, paragraphs wrap "pretty" */
html body :is(h1, h2, h3, .wps-ptitle):not([class*="line-clamp"]) { text-wrap: balance; }
html body :is(main p, .wps p, footer p:not(.mdf-tag), .mdf-li) { text-wrap: pretty; }

/* the static layer (blog, cart, about, page links): calm weights, excerpts that end with "…", finished controls */
html body .wps :is(strong, b) { font-weight: 600 !important; }
html body .wps-ptitle { font-weight: 500 !important; color: #2B231E !important; }
html body .wps-post p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
html body .wps-pager > * { box-sizing: border-box; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 2px !important; }
html body .wps-pager a { border-color: #E6D8CA; color: #2B231E !important; text-decoration: none !important; }
html body .flex.items-center.flex-wrap > span:empty { display: none; }
/* the shop toolbar (it holds the result-count span): every control 40px tall, so the reset sits on the chips' line */
html body .flex.items-center.flex-wrap:has(> span.tabular-nums) > :not(span) { min-height: 44px; display: inline-flex; align-items: center; }
html body .wps-pager a:hover { border-color: #2B231E; }
html body .wps-pager [aria-current] { background: #2B231E !important; border-color: #2B231E; color: #F8F3EC !important; }
html body .wps p > a[href="/shop/"]:only-child { display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px; margin-top: 6px; border: 1px solid #2B231E; border-radius: 2px; color: #2B231E !important; text-decoration: none !important; font-weight: 500; }
html body .wps p > a[href="/shop/"]:only-child:hover { background: #2B231E; color: #F8F3EC !important; }

/* listing pages carry their own search box, so the header's search row steps aside and the top holds one search.
   The page is marked in its HTML (build-stage) and on app moves (v2.js), so the row is never shown and then pulled. */
html[data-v2-onesearch] body header + div.sticky { display: none !important; }

/* reviews strip: the review stays put in v2 (build-stage stops the 3-second swap); the dots are the control, 24px to tap */
html body button.p-0\.5[aria-label^="ביקורת"] { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
html body button.p-0\.5[aria-label^="ביקורת"] > div.bg-gray-300 { background-color: #D9C8B4 !important; }

/* WhatsApp: quiet espresso, no green, no yellow ring */
html body :is(.bg-\[\#25D366\], [class*="bg-[#25D366]"]) { background-color: #2B231E !important; box-shadow: 0 8px 22px rgba(43, 35, 30, 0.22) !important; border-color: #F8F3EC !important; }

/* phone bottom bar */
html body nav.fixed.bottom-0 { background: rgba(248, 243, 236, 0.96) !important; border-color: #E6D8CA !important; box-shadow: none !important; }
html body nav.fixed.bottom-0 span.font-semibold { font-weight: 500 !important; font-size: 13px !important; }

/* cookie notice */
html body [data-cookie-consent-banner] > div { background: #FFFCF8 !important; border-color: #E6D8CA !important; border-radius: 4px !important; box-shadow: 0 12px 34px rgba(43, 35, 30, 0.12) !important; }
html body [data-cookie-consent-banner] span.text-2xl { display: none !important; }
html body [data-cookie-consent-banner] h2 { font-weight: 500 !important; font-size: 17px !important; }
html body [data-cookie-consent-banner] button { border-radius: 2px !important; font-weight: 500 !important; }
html body [data-cookie-consent-banner] button.bg-brand { background: #2B231E !important; }

/* 404 and other v1 accents */
html body section > div.bg-gradient-to-br.to-\[\#1a3a64\] { background: #2B231E !important; border-radius: 4px !important; box-shadow: none !important; }
html body .text-\[\#FFB91C\] { color: #D3B98E !important; }
html body .bg-\[\#FFB91C\] { background-color: #B8935A !important; }
html body :is(.bg-\[\#FFB91C\]\/10, .bg-\[\#FFB91C\]\/15) { background-color: rgba(184, 147, 90, 0.14) !important; }
html body main [class*="bg-sky-"], html body main [class*="bg-blue-"], html body main [class*="bg-cyan-"] { background-color: #F0E4D9 !important; }
html body main [class*="border-sky-"], html body main [class*="border-blue-"], html body main [class*="border-cyan-"] { border-color: #D9C3A5 !important; }
html body .rounded-2xl, html body .rounded-3xl { border-radius: 6px !important; }
html body .rounded-xl { border-radius: 4px !important; }
html body .shadow-xl, html body .shadow-2xl { box-shadow: 0 18px 40px rgba(43, 35, 30, 0.1) !important; }

/* Footer, shared by the home and the shop pages (same markup as MdFooter). Prefixed with body to win over MdFooter.css. */
body .mdf { --y: #D3B98E; --k: #2B231E; background: #2B231E; color: #F2EBE0; font-size: 1rem; overflow-x: clip; font-family: Assistant, Heebo, Arial, sans-serif; }
body .mdf *, body .mdf *::before, body .mdf *::after { box-sizing: border-box; }
body .mdf a { color: inherit; text-decoration: none; }
body .mdf a:focus-visible, body .mdf summary:focus-visible { outline: 2px solid #D3B98E; outline-offset: 3px; box-shadow: none !important; }
body .mdf ul { list-style: none; margin: 0; padding: 0; }
body .mdf-wrap { max-width: 1320px; margin-inline: auto; padding-inline: max(16px, 4vw); }
body .mdf-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-block: clamp(64px, 8vw, 104px) clamp(36px, 4.4vw, 56px); border-bottom: 1px solid rgba(242, 235, 224, 0.14); }
body .mdf-tag { margin: 0; font-size: clamp(30px, 1.2rem + 2.6vw, 56px); font-weight: 200; line-height: 1.16; letter-spacing: 0; max-width: 16ch; text-wrap: balance; color: #F2EBE0; }
body .mdf-mark { display: inline; background: none; color: #D3B98E; padding: 0; rotate: 0deg; margin: 0; white-space: nowrap; }
body .mdf-wa { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 2px; background: transparent; border: 1px solid rgba(242, 235, 224, 0.5); color: #F2EBE0 !important; font-weight: 400; font-size: 16px; white-space: nowrap; transition: background-color 0.3s, color 0.3s; }
body .mdf-wa:hover { background: #F2EBE0; color: #2B231E !important; rotate: 0deg; }
body .mdf-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); padding-block: clamp(48px, 6vw, 80px); }
body .mdf-brand img { height: 24px; width: auto; display: block; rotate: 0deg; }
body .mdf-brand p { margin: 20px 0 0; color: rgba(242, 235, 224, 0.72); line-height: 1.7; max-width: 30ch; }
body .mdf-social { display: flex; gap: 10px; margin-top: 22px; }
body .mdf-social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(242, 235, 224, 0.4); border-radius: 50%; color: #F2EBE0; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
body .mdf-social a:hover { background: #F2EBE0; border-color: #F2EBE0; color: #2B231E; }
body .mdf-col h2 { margin: 0 0 16px; font-size: 14px !important; font-weight: 500 !important; color: #D3B98E !important; letter-spacing: 0 !important; font-family: Assistant, Heebo, Arial, sans-serif !important; }
body .mdf-col li + li { margin-top: 4px; }
body .mdf-col a, body .mdf-li { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: rgba(242, 235, 224, 0.86); line-height: 1.45; transition: color 0.2s; }
body .mdf-col a:hover { color: #FFFFFF; translate: none; text-decoration: underline; text-decoration-color: #D3B98E; text-underline-offset: 5px; }
body .mdf-contact svg { color: #D3B98E; flex-shrink: 0; }
body .mdf-bar { background: #231C18; font-size: 14px; color: rgba(242, 235, 224, 0.66); }
body .mdf-bar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-block: 18px; }
body .mdf-bar-in p { margin: 0; }
body .mdf-a11y summary { cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; color: #D3B98E; font-weight: 500; list-style: none; }
body .mdf-a11y summary::-webkit-details-marker { display: none; }
body .mdf-a11y summary::after { content: "▾"; margin-inline-start: 6px; font-size: 0.8em; }
body .mdf-a11y[open] summary::after { content: "▴"; }
body .mdf-a11y-box { padding-top: 10px; }
body .mdf-a11y-box button { border-radius: 2px !important; }
body .mdf-credit { opacity: 0.72; display: inline-flex; align-items: center; min-height: 24px; }
body .mdf-credit:hover { opacity: 1; color: #F2EBE0; }
@media (max-width: 1023px) {
  body .mdf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .mdf-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  body .mdf-top { flex-direction: column; align-items: flex-start; }
  body .mdf-wa { width: 100%; justify-content: center; }
  body .mdf-contact { grid-column: 1 / -1; }
  body .mdf-bar-in { flex-direction: column; align-items: flex-start; padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { body .mdf *, body .mdf *::before { transition: none !important; } }