/* =====================================================================
   عاطفه فتوحی · طرح ۱۰ «جعبهٔ مدادرنگی»
   SINGLE SOURCE OF TRUTH for the whole design.
   Generated by redesign/build-css.php · do not hand-edit.
   Edit redesign/chosen/*-source.html and re-run the builder.
   ===================================================================== */

@font-face{font-family:'Lalezar';font-style:normal;font-weight:400;font-display:swap;src:url('../../../uploads/2026/08/lalezar-400-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC}
@font-face{font-family:'Lalezar';font-style:normal;font-weight:400;font-display:swap;src:url('../../../uploads/2026/08/lalezar-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;src:url('../../../uploads/2026/08/vazirmatn-400-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:400;font-display:swap;src:url('../../../uploads/2026/08/vazirmatn-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;src:url('../../../uploads/2026/08/vazirmatn-700-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:700;font-display:swap;src:url('../../../uploads/2026/08/vazirmatn-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD}





/* ============ Demo 10 · «جعبهٔ مدادرنگی» (crayon-box chapters) ============
   The page is a box of colors: an interactive accordion fan of artworks
   as hero, chapters opened by fat painted brushstrokes, and a fixed
   paint-blob palette for navigation. Display: Lalezar.                    */
:root{
  --white:#FFFFFF; --ground:#FCFAF6; --ink:#33302E; --soft:#77716B; --line:#EAE4DC;
  --rose:#C93F58; --rose-t:#FBE6EA;
  --orange:#F08A3C; --orange-t:#FDEBDC;
  --yellow:#F2BB2E; --yellow-t:#FCF2D3;
  --green:#42843F; --green-t:#E4F1E4;
  --blue:#2E6EA6; --blue-t:#E0EDF8;
  --purple:#6F4F91; --purple-t:#EEE7F5;
  --fh:'Lalezar','Vazirmatn','Segoe UI',Tahoma,sans-serif;
  --fb:'Vazirmatn','Segoe UI',Tahoma,sans-serif;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color-scheme:light}
.af-root{direction:rtl;font-family:var(--fb);color:var(--ink);background:var(--ground);
  font-size:16px;line-height:1.9;overflow-x:hidden}
.af-root *,.af-root *::before,.af-root *::after{box-sizing:border-box}
.af-root ::selection{background:var(--yellow-t)}
.af-root img,.af-root svg{max-width:100%}
.af-root a{color:inherit}
.af-root :is(a,button):focus-visible{outline:3px dashed var(--blue);outline-offset:3px;border-radius:8px}

.af-container{max-width:1060px;margin-inline:auto;padding-inline:22px}
/* scroll-margin has to clear the FIXED header, otherwise jumping to a
   chapter puts its band underneath the bar · the header reports its own
   height into --af-hd-h, so follow that and add a little breathing room */
.af-ch{padding:20px 0 64px;scroll-margin-top:calc(var(--af-hd-h,84px) + 24px)}

.af-draftbar{background:repeating-linear-gradient(45deg,#FFE9A0 0 14px,#F8DC7B 14px 28px);
  border-bottom:2px dashed #E0BA55;padding:9px 16px;text-align:center;
  font-size:13.5px;font-weight:700;color:#6B5423}

/* type */
.af-h1{font-family:var(--fh);font-weight:400;font-size:clamp(46px,7vw,84px);line-height:1.05;
  margin:0;text-wrap:balance}
.af-h3{font-family:var(--fh);font-weight:400;font-size:24px;line-height:1.2;margin:0}
.af-muted{color:var(--soft)}

/* brushstroke chapter band */
.af-band{position:relative;margin:0 -8px 40px;padding:26px 34px 20px}
.af-band svg.af-stroke{position:absolute;inset:0;width:100%;height:100%}
.af-band .af-bin{position:relative;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  color:#fff}
.af-band h2{font-family:var(--fh);font-weight:400;font-size:clamp(32px,4.8vw,46px);
  line-height:1;margin:0;color:#fff}
.af-band .af-chno{font-size:13px;font-weight:700;opacity:.9}
.af-band .af-bsub{font-size:14px;opacity:.92}

/* palette nav (fixed) */
.af-pal{position:fixed;top:50%;transform:translateY(-50%);left:16px;z-index:40;
  display:flex;flex-direction:column;gap:12px}
.af-pal a{width:26px;height:26px;border-radius:50% 46% 52% 48%/48% 52% 46% 54%;
  border:3px solid #fff;box-shadow:0 4px 10px rgba(51,48,46,.3);transition:transform .15s}
.af-pal a:hover{transform:scale(1.25)}
.af-pal .af-p1{background:var(--rose)}
.af-pal .af-p2{background:var(--yellow)}
.af-pal .af-p3{background:var(--green)}
.af-pal .af-p4{background:var(--blue)}
.af-pal .af-p5{background:var(--purple)}
.af-pal .af-p6{background:var(--ink)}
@media (max-width:1120px){.af-pal{display:none}}

/* buttons · crayon pills */
.af-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--fh);font-size:21px;line-height:1;padding:13px 26px 15px;
  text-decoration:none;cursor:pointer;border:0;border-radius:999px;color:#fff;
  transition:transform .15s,box-shadow .15s;box-shadow:0 6px 0 rgba(51,48,46,.22)}
.af-btn--rose{background:var(--rose);color:#fff}
.af-btn--blue{background:var(--blue);color:#fff}
.af-btn--green{background:var(--green);color:#fff}
.af-btn--purple{background:var(--purple);color:#fff}
.af-btn--ink{background:#fff;color:var(--ink);border:2.5px solid var(--ink);
  box-shadow:0 6px 0 rgba(51,48,46,.3)}
.af-btn--sm{font-size:18px;padding:11px 20px 12px}
.af-btn:hover{transform:translateY(-2px)}
.af-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(51,48,46,.3)}

/* sticky notes */
.af-sticky{background:#FFF3B0;color:#6B5423;font-size:13.5px;line-height:1.75;font-weight:700;
  padding:12px 15px;width:240px;transform:rotate(-2deg);
  box-shadow:0 8px 18px rgba(51,48,46,.16);text-align:right}

/* ---- HERO: accordion fan ---- */
.af-hero{padding:46px 0 60px;text-align:center}
.af-hero .af-h1 em{font-style:normal;color:var(--rose)}
.af-hero .af-sub{font-family:var(--fh);font-size:24px;color:var(--blue);margin:4px 0 8px}
.af-hero p.af-lead{max-width:56ch;margin:0 auto 26px}
.af-fan{display:flex;gap:12px;height:430px;margin:0 0 14px}
.af-fan a{flex:1;position:relative;overflow:hidden;border-radius:20px;display:block;
  border:4px solid #fff;box-shadow:0 14px 34px rgba(51,48,46,.18);
  transition:flex .45s cubic-bezier(.25,.7,.3,1)}
.af-fan a:hover,.af-fan a:focus-visible{flex:3.4}
/* .elementor img{height:auto} is more specific than .af-fan img, so once
   this is pasted into an Elementor widget the fan images collapse to their
   natural ratio · scope to .af-root to win, and keep !important for the
   theme's own img rules. */
.af-root .af-fan img{position:absolute;inset:0;width:100%!important;height:100%!important;
  object-fit:cover;max-width:none}
.af-fan .af-fl{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.94);
  font-family:var(--fh);font-size:18px;line-height:1;padding:9px 14px 10px;border-radius:999px;
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;white-space:nowrap}
.af-fan a:hover .af-fl,.af-fan a:focus-visible .af-fl{opacity:1;transform:none}
.af-fan a::after{content:'';position:absolute;inset:0;border-radius:16px}
.af-fan a:nth-child(1)::after{box-shadow:inset 0 -60px 60px -40px rgba(225,90,114,.55)}
.af-fan a:nth-child(2)::after{box-shadow:inset 0 -60px 60px -40px rgba(242,187,46,.55)}
.af-fan a:nth-child(3)::after{box-shadow:inset 0 -60px 60px -40px rgba(95,168,95,.55)}
.af-fan a:nth-child(4)::after{box-shadow:inset 0 -60px 60px -40px rgba(65,137,199,.55)}
.af-fan a:nth-child(5)::after{box-shadow:inset 0 -60px 60px -40px rgba(142,107,176,.55)}
.af-fan-hint{font-size:13px;color:var(--soft);margin:0 0 26px}
.af-hero-ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.af-hero-badges{font-size:14px;color:var(--soft);margin-top:20px}

/* ---- chapter: classes (rose) ---- */
.af-cls-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.af-cls{background:#fff;border:2px solid var(--line);border-radius:22px;padding:26px 24px;
  box-shadow:0 12px 30px rgba(51,48,46,.07);position:relative;overflow:hidden}
.af-cls::before{content:'';position:absolute;top:0;right:0;left:0;height:10px}
.af-cls--rose::before{background:var(--rose)}
.af-cls--blue::before{background:var(--blue)}
.af-cls h3{font-size:28px;margin:6px 0 0}
.af-cls .af-when{font-size:13px;font-weight:700;color:var(--soft);margin:0 0 14px}
.af-cls--empty{grid-column:1/-1;text-align:center}
.af-cls-full{display:inline-block;background:var(--yellow-t);color:#8A6A12;font-size:12.5px;
  font-weight:700;padding:3px 12px 4px;border-radius:999px;margin-inline-start:6px;vertical-align:middle}
.af-cls ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.af-cls li{display:flex;gap:10px;align-items:baseline;font-size:15.5px}
.af-cls--rose li::before{content:'●';color:var(--rose);font-size:10px}
.af-cls--blue li::before{content:'●';color:var(--blue);font-size:10px}
.af-cls-wide{grid-column:1/-1;background:var(--orange-t);border:2px solid #F3D3B8;
  border-radius:22px;padding:24px 26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  justify-content:space-between}
.af-cls-wide h3{font-size:25px;margin:0}
.af-cls-wide p{margin:2px 0 0;font-size:14.5px;color:var(--soft);max-width:56ch}
.af-cls-note{text-align:center;margin:24px 0 0;font-size:14.5px;color:var(--soft)}

/* ---- chapter: books (yellow) ---- */
.af-book-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.af-book{background:#fff;border:2px solid var(--line);border-radius:18px;padding:10px 10px 14px;
  text-align:center;transition:transform .18s;box-shadow:0 10px 24px rgba(51,48,46,.07)}
.af-book:hover{transform:translateY(-6px) rotate(-.6deg)}
.af-book img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
.af-book b{font-family:var(--fh);font-weight:400;font-size:21px;line-height:1.2;display:block;
  margin-top:10px}

/* ---- chapter: gallery (green) ---- */
.af-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.af-gitem{position:relative;border-radius:18px;overflow:hidden;border:4px solid #fff;
  box-shadow:0 12px 28px rgba(51,48,46,.12);display:block}
.af-gitem img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .35s}
.af-gitem:hover img{transform:scale(1.07)}
.af-gitem figcaption{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.94);
  font-family:var(--fh);font-size:17px;line-height:1;padding:8px 13px 9px;border-radius:999px}

/* ---- chapter: instagram (blue) ---- */
.af-ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.af-igt{position:relative;display:block;border-radius:18px;overflow:hidden;border:4px solid #fff;
  box-shadow:0 12px 28px rgba(51,48,46,.12)}
.af-igt img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s}
.af-igt:hover img{transform:scale(1.06)}
.af-igt .af-ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(51,48,46,.72));
  display:flex;align-items:flex-end;justify-content:space-between;padding:14px;color:#fff;
  opacity:0;transition:opacity .25s}
.af-igt:hover .af-ov{opacity:1}
.af-igt .af-ov span{font-size:12.5px;font-weight:700}
.af-ig-cta{display:flex;justify-content:center;margin-top:26px}

/* ---- chapter: shop (purple) ---- */
.af-shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.af-prod{background:#fff;border:2px solid var(--line);border-radius:20px;overflow:hidden;
  text-align:center;padding-bottom:18px;transition:transform .18s;
  box-shadow:0 10px 26px rgba(51,48,46,.07)}
.af-prod:hover{transform:translateY(-5px)}
.af-prod img{display:block;width:100%;aspect-ratio:4/3.5;object-fit:cover;margin-bottom:12px}
.af-prod h3{font-size:21px;margin:0 0 6px;padding-inline:10px}
.af-price{display:inline-block;background:var(--purple-t);color:#6B4E8C;font-size:13.5px;
  font-weight:700;padding:5px 14px;border-radius:999px;margin-bottom:12px}
.af-shop-note{text-align:center;font-size:13px;color:var(--soft);margin:22px 0 0}

/* ---- final: about+contact (ink) ---- */
.af-final{background:var(--ink);color:#F5F1EA;border-radius:34px 34px 0 0;margin-top:30px;
  padding:64px 0 56px}
.af-final-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:center}
.af-final .af-photo{border:9px solid #fff;border-radius:6px;transform:rotate(-1.8deg);
  box-shadow:0 24px 54px rgba(0,0,0,.4)}
.af-final .af-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.af-final h2{font-family:var(--fh);font-weight:400;font-size:clamp(32px,4.8vw,46px);
  line-height:1.1;margin:0;color:#fff}
.af-final h2 em{font-style:normal;color:var(--yellow)}
.af-final p{color:rgba(245,241,234,.9);max-width:56ch}
.af-final .af-dots{display:flex;gap:9px;margin:4px 0 14px}
.af-final .af-dots i{width:18px;height:18px;border-radius:50% 46% 52% 48%/48% 52% 46% 54%}
.af-final .af-dots i:nth-child(1){background:var(--rose)}
.af-final .af-dots i:nth-child(2){background:var(--yellow)}
.af-final .af-dots i:nth-child(3){background:var(--green)}
.af-final .af-dots i:nth-child(4){background:var(--blue)}
.af-final .af-dots i:nth-child(5){background:var(--purple)}
.af-final .af-logo{width:140px;max-width:45%;height:auto;filter:invert(1) brightness(1.7);
  mix-blend-mode:screen;transform:rotate(-2deg);display:block;margin-top:8px}
.af-final-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.af-final-meta{margin:20px 0 0;font-size:14px;color:rgba(245,241,234,.7)}

.af-footer{padding:28px 20px 40px;text-align:center;font-size:13px;color:var(--soft)}

@media (max-width:900px){
  .af-fan{height:340px;gap:8px}
  .af-final-grid{grid-template-columns:1fr}
  .af-gal,.af-ig-grid{grid-template-columns:repeat(2,1fr)}
  .af-shop-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .af-ch{padding-bottom:46px}
  .af-fan{height:260px;gap:6px}
  .af-fan .af-fl{display:none}
  .af-cls-grid{grid-template-columns:1fr}
  .af-book-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .af-root *,.af-root *::before,.af-root *::after{animation:none!important;transition:none!important}
}

/* button text colour: beat .af-root a{color:inherit} */
.af-root .af-btn{color:#fff}
.af-root .af-btn--rose{color:#fff}
.af-root .af-btn--blue{color:#fff}
.af-root .af-btn--green{color:#fff}
.af-root .af-btn--purple{color:#fff}
.af-root .af-btn--ink{color:var(--ink)}

/* ============ Header proposal 4 · «نشانِ رنگی» (the floating medallion) ============
   Idea borrowed from the current Woodmart header: a round logo medallion
   sitting in the middle of the bar, menus split around it. Re-imagined for
   the crayon box: the medallion is a wobbly paint blob wrapped in a rainbow
   ring, it floats gently, sparkles twinkle around it, and each menu link
   carries its chapter's crayon underline. Rainbow box-edge strip on top.  */
/* ================= HEADER ================= */
/* The medallion deliberately hangs BELOW the bar, so nothing may clip it.
   The shared base rule sets overflow-x:hidden on .af-root, and a hidden
   axis forces the other axis to "auto" · which crops the blob. The home
   and footer blocks each carry their own copy of that base rule and are
   pasted AFTER this one, so a plain ".af-root{overflow:visible}" here
   loses. Mark this root so the override always wins. Keep both parts. */
.af-root.af-root--hd{overflow:visible!important}

/* ---- break out of the theme's header containers ----
   Woodmart wraps an HTML block in  .container (margin ~33px + 15px pad)
   > .whb-column > .wd-header-html (10px pad) > .elementor section, so the
   bar is inset and then overflows the opposite edge.
   NOTE: margin-inline / 50vw tricks are unreliable here · this block is
   RTL inside an LTR page chrome, and the negative margin flips side.
   Pin to the viewport instead · the bar is sticky anyway, so taking it
   out of flow costs nothing and is direction-proof. */
.af-root--hd .af-hd{position:fixed;top:0;right:0;left:0;width:auto;max-width:none}
/* logged-in admins see the WordPress toolbar · position:fixed ignores it,
   so drop below it. Visitors never get this class, so they see top:0. */
body.admin-bar .af-root--hd .af-hd{top:32px}
@media (max-width:782px){ body.admin-bar .af-root--hd .af-hd{top:46px} }
/* the fixed bar no longer occupies space · reserve it so the page
   below starts in the right place (JS keeps this in sync) */
.af-root--hd{padding-top:var(--af-hd-h,84px)}

.af-hd{position:sticky;top:0;z-index:80}

/* the box edge · six crayons on the very top */
.af-hd-strip{display:flex;height:6px}
.af-hd-strip i{flex:1}
.af-hd-strip i:nth-child(1){background:var(--rose)}
.af-hd-strip i:nth-child(2){background:var(--yellow)}
.af-hd-strip i:nth-child(3){background:var(--green)}
.af-hd-strip i:nth-child(4){background:var(--blue)}
.af-hd-strip i:nth-child(5){background:var(--purple)}
.af-hd-strip i:nth-child(6){background:var(--ink)}

/* the bar · soft glass shelf the medallion floats through */
.af-hd-bar{background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 18px rgba(51,48,46,.08);transition:box-shadow .3s}
.af-hd.is-scrolled .af-hd-bar{box-shadow:0 10px 30px rgba(51,48,46,.16)}
.af-hd-in{max-width:1220px;margin-inline:auto;padding-inline:24px;position:relative;
  display:grid;grid-template-columns:1fr 168px 1fr;align-items:center;
  min-height:72px;transition:min-height .3s}
.af-hd.is-scrolled .af-hd-in{min-height:60px}

/* the medallion is absolute (out of grid flow), so pin the navs to their
   columns explicitly · otherwise the second nav auto-places into the
   narrow centre column and collides with the medallion */
.af-hd-side{display:flex;align-items:center;gap:2px}
.af-hd-side--start{grid-column:1;grid-row:1;justify-self:start}
.af-hd-side--end{grid-column:3;grid-row:1;justify-self:end}

/* chapter links · fat crayon underline wakes on hover */
.af-hd-nav-a{position:relative;font-family:var(--fh);font-size:18.5px;line-height:1;
  text-decoration:none;padding:14px 12px 16px;white-space:nowrap;border-radius:10px}
.af-hd-nav-a::after{content:'';position:absolute;right:10px;left:10px;bottom:7px;height:7px;
  border-radius:999px;transform:scaleX(0);transform-origin:right center;transition:transform .22s}
.af-hd-nav-a:hover::after,.af-hd-nav-a:focus-visible::after{transform:scaleX(1)}
.af-n1::after{background:var(--rose)}
.af-n2::after{background:var(--yellow)}
.af-n3::after{background:var(--green)}
.af-n4::after{background:var(--blue)}
.af-n5::after{background:var(--purple)}
.af-n6::after{background:var(--ink)}

/* quiet CTA at the far edge */
.af-hd-cta{font-family:var(--fh);font-size:16.5px;line-height:1;text-decoration:none;
  color:#fff;background:var(--rose);border-radius:999px;padding:10px 18px 12px;
  margin-inline-start:10px;white-space:nowrap;box-shadow:0 4px 0 rgba(51,48,46,.2);
  transition:transform .15s,box-shadow .15s}
.af-hd-cta:hover{transform:translateY(-2px)}
.af-hd-cta:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(51,48,46,.2)}

.af-hd-ig{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50% 46% 52% 48%/48% 52% 46% 54%;border:2.5px solid var(--line);
  color:var(--ink);margin-inline-end:10px;transition:transform .15s,border-color .15s,color .15s}
.af-hd-ig:hover{transform:scale(1.1) rotate(-5deg);border-color:var(--blue);color:var(--blue)}
.af-hd-ig svg{width:20px;height:20px;display:block}

/* ---- the medallion · a paint blob wrapped in a rainbow ring ----
   Absolutely positioned so it hangs THROUGH the bar (the bar keeps its
   slim height and the blob overlaps the page below, like the original). */
.af-hd-blob{position:absolute;right:50%;top:7px;z-index:3;
  width:150px;aspect-ratio:1;transform:translateX(50%);
  transition:width .3s,top .3s}
.af-hd.is-scrolled .af-hd-blob{width:100px;top:5px}
.af-hd-blob > a{display:block;width:100%;height:100%;padding:5px;
  border-radius:52% 48% 50% 50%/50% 52% 48% 50%;
  background:conic-gradient(var(--rose),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple),var(--rose));
  box-shadow:0 14px 30px rgba(51,48,46,.22);
  animation:af-float 6s ease-in-out infinite}
.af-hd.is-scrolled .af-hd-blob > a{animation:none}
@keyframes af-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.af-hd-blob .af-hd-blob-in{width:100%;height:100%;background:#fff;
  border-radius:52% 48% 50% 50%/50% 52% 48% 50%;
  display:flex;align-items:center;justify-content:center;padding:14%}
.af-hd-blob img{display:block;width:100%;height:auto}

/* sparkles around the medallion */
.af-spark{position:absolute;pointer-events:none;animation:af-twinkle 2.8s ease-in-out infinite}
.af-spark--1{width:20px;top:-4px;right:-22px;color:var(--yellow)}
.af-spark--2{width:13px;bottom:6px;left:-19px;color:var(--blue);animation-delay:1.2s}
.af-spark--3{width:10px;top:34px;left:-30px;color:var(--rose);animation-delay:.6s}
@keyframes af-twinkle{
  0%,100%{opacity:.25;transform:scale(.8) rotate(0deg)}
  50%{opacity:1;transform:scale(1.15) rotate(18deg)}
}

/* burger · three crayon bars
   Woodmart styles every <button> globally (grey bg, inline-flex) and its
   stylesheet loads after ours, so these need !important to stick. */
.af-hd-burger{display:none!important;flex-direction:column;justify-content:center;align-items:stretch!important;gap:5px;width:44px!important;height:44px!important;padding:10px!important;border:0;background:transparent!important;box-shadow:none!important;cursor:pointer;border-radius:12px}
.af-hd-burger i{display:block;width:100%;height:4.5px;border-radius:999px;transition:transform .25s,opacity .2s}
.af-hd-burger i:nth-child(1){background:var(--rose)}
.af-hd-burger i:nth-child(2){background:var(--blue)}
.af-hd-burger i:nth-child(3){background:var(--green);width:70%}
.af-hd-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.af-hd-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.af-hd-burger[aria-expanded="true"] i:nth-child(3){width:100%;transform:translateY(-9.5px) rotate(-45deg)}

@media (max-width:1120px){
  .af-hd-nav-a,.af-hd-cta{display:none}
  .af-hd-burger{display:flex!important;justify-self:start}
  .af-hd-ig{margin-inline-end:0;justify-self:end}
  .af-hd-in{min-height:62px;grid-template-columns:1fr 120px 1fr}
  .af-hd-blob{width:106px;top:6px}
  .af-hd.is-scrolled .af-hd-blob{width:84px}
}

/* ---- mobile drop-card (same family as the chosen J2 capsule) ---- */
.af-dim{position:fixed;inset:0;z-index:60;background:rgba(51,48,46,.3);display:none}
.af-dim.is-open{display:block}
.af-drawer{position:fixed;top:96px;right:14px;left:14px;z-index:70;display:none;
  background:#fff;border-radius:28px;box-shadow:0 30px 70px rgba(51,48,46,.3);
  padding:22px 24px 24px}
.af-drawer.is-open{display:block}
.af-drawer nav{display:grid;gap:2px}
.af-drawer nav a{display:flex;align-items:center;gap:14px;text-decoration:none;
  font-family:var(--fh);font-size:27px;line-height:1.35;padding:9px 10px;border-radius:14px}
.af-drawer nav a i{width:16px;height:16px;flex:0 0 auto;
  border-radius:50% 46% 52% 48%/48% 52% 46% 54%}
.af-drawer .af-d1 i{background:var(--rose)}
.af-drawer .af-d2 i{background:var(--yellow)}
.af-drawer .af-d3 i{background:var(--green)}
.af-drawer .af-d4 i{background:var(--blue)}
.af-drawer .af-d5 i{background:var(--purple)}
.af-drawer .af-d6 i{background:var(--ink)}
.af-drawer nav a:active{background:var(--ground)}
.af-drawer .af-drawer-foot{margin-top:14px;padding-top:16px;border-top:2px dashed var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.af-drawer .af-drawer-meta{font-size:12.5px;color:var(--soft)}

/* section-specific button colours */
.af-root .af-hd-cta{color:#fff}

/* ============ Footer proposal 2 · «دیوار رنگ» (the painted wall) ============
   The dark closing section keeps going and becomes one big painted wall:
   rainbow paint drips from a dashed shelf line, the navigation is six fat
   brushstrokes you can click, chalk doodles glow faintly, and a giant
   ghost of the page title is painted behind everything.                   */
/* ================= FOOTER · the painted wall ================= */
.af-ft2{background:var(--ink);color:#F5F1EA;position:relative;overflow:hidden;
  padding-bottom:0}

/* dashed shelf line + paint pouring down from it */
.af-ft2-shelf{position:relative;margin:0 auto;max-width:1010px;padding:0 22px}
.af-ft2-shelf::before{content:'';display:block;border-top:3px dashed rgba(245,241,234,.22)}
.af-ft2-drips{position:absolute;top:2px;right:0;left:0;height:96px;width:100%;
  pointer-events:none}

/* chalk doodles */
.af-ft2-doodle{position:absolute;pointer-events:none;opacity:.14}
.af-ft2-doodle--star{top:150px;right:7%;width:52px;transform:rotate(-12deg)}
.af-ft2-doodle--spiral{top:330px;left:6%;width:60px;transform:rotate(8deg)}
@media (max-width:900px){.af-ft2-doodle{display:none}}

/* --- act 1 · brushstroke navigation --- */
.af-ft2-head{position:relative;text-align:center;padding-top:104px}
.af-ft2-head h2{font-family:var(--fh);font-weight:400;font-size:clamp(30px,4.6vw,44px);
  line-height:1.2;margin:0 0 4px;color:#fff}
.af-ft2-head h2 em{font-style:normal;color:var(--yellow)}
.af-ft2-head p{margin:0 0 30px;color:rgba(245,241,234,.65);font-size:14.5px}

.af-ft2-nav{position:relative;display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px 12px;padding:0 18px;max-width:1020px;margin-inline:auto}
.af-st{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px 17px;text-decoration:none;
  transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.af-st svg{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.af-st span{position:relative;font-family:var(--fh);font-size:21px;line-height:1;color:#fff}
.af-st--cream span,.af-st--yellow span{color:var(--ink)}
.af-st:nth-child(odd){transform:rotate(-1.6deg)}
.af-st:nth-child(even){transform:rotate(1.4deg)}
.af-st:hover,.af-st:focus-visible{transform:rotate(0deg) translateY(-5px) scale(1.04)}

/* --- act 2 · info on the wall --- */
.af-ft2-grid{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:46px;
  padding:58px 0 46px;align-items:start}
.af-ft2-brand img{display:block;width:150px;height:auto;
  filter:invert(1) brightness(1.7);mix-blend-mode:screen;transform:rotate(-2deg);
  margin-bottom:10px}
.af-ft2-brand p{margin:0 0 14px;color:rgba(245,241,234,.75);font-size:14.5px;max-width:38ch}
.af-ft2-dots{display:flex;gap:8px}
.af-ft2-dots i{width:15px;height:15px;border-radius:50% 46% 52% 48%/48% 52% 46% 54%;
  border:2px solid rgba(255,255,255,.85)}
.af-ft2-dots i:nth-child(1){background:var(--rose)}
.af-ft2-dots i:nth-child(2){background:var(--yellow)}
.af-ft2-dots i:nth-child(3){background:var(--green)}
.af-ft2-dots i:nth-child(4){background:var(--blue)}
.af-ft2-dots i:nth-child(5){background:var(--purple)}

.af-ft2-contact h3{font-family:var(--fh);font-weight:400;font-size:23px;line-height:1.2;
  margin:0 0 12px;color:#fff;display:flex;align-items:center;gap:10px}
.af-ft2-contact h3 i{width:26px;height:9px;border-radius:999px;background:var(--rose);flex:0 0 auto}
.af-ft2-contact p{margin:0 0 6px;font-size:14.5px;color:rgba(245,241,234,.72)}
.af-ft2-contact p b{color:#fff;font-size:15px}
.af-ft2-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}

/* --- act 3 · base line --- */
.af-ft2-base{position:relative;border-top:2px dashed rgba(245,241,234,.16);
  padding:22px 0 36px}
.af-ft2-base .af-container{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap}
.af-ft2-c{font-size:13.5px;color:rgba(245,241,234,.85);margin:0}
.af-ft2-c b{font-family:var(--fh);font-weight:400;font-size:16px;color:#fff}
.af-ft2-mini{font-size:12.5px;color:rgba(245,241,234,.62)}

/* it is a <button> now (a dead #af-top anchor did nothing) · reset UA styles */
.af-ft-top{appearance:none;-webkit-appearance:none;padding:0;font:inherit;
  display:inline-flex;align-items:center;justify-content:center;gap:2px;
  font-family:var(--fh);font-size:17px;line-height:1;color:var(--ink);
  background:var(--yellow);border:0;border-radius:50% 46% 52% 48%/48% 52% 46% 54%;
  width:58px;height:58px;cursor:pointer;text-decoration:none;flex-direction:column;
  box-shadow:0 6px 0 rgba(0,0,0,.35);transition:transform .18s,box-shadow .18s}
.af-ft-top svg{width:20px;height:20px;margin-bottom:-3px}
.af-ft-top:hover{transform:translateY(-4px) rotate(-6deg);box-shadow:0 10px 0 rgba(0,0,0,.35)}
.af-ft-top:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}

.af-ft-strip{display:flex;height:8px}
.af-ft-strip i{flex:1}
.af-ft-strip i:nth-child(1){background:var(--rose)}
.af-ft-strip i:nth-child(2){background:var(--yellow)}
.af-ft-strip i:nth-child(3){background:var(--green)}
.af-ft-strip i:nth-child(4){background:var(--blue)}
.af-ft-strip i:nth-child(5){background:var(--purple)}
.af-ft-strip i:nth-child(6){background:#8C6A4F}

@media (max-width:900px){
  .af-ft2-grid{grid-template-columns:1fr;gap:34px;padding:48px 0 40px}
  .af-st span{font-size:19px}
  .af-st{padding:13px 24px 15px}
}
@media (max-width:600px){
  .af-ft2-head{padding-top:92px}
  .af-ft2-nav{gap:10px 8px}
  .af-st{padding:12px 18px 14px}
  .af-st span{font-size:17px}
  .af-ft2-base .af-container{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .af-root *,.af-root *::before,.af-root *::after{animation:none!important;transition:none!important}
}

/* section-specific button colours */
.af-root .af-ft-top{color:var(--ink)}

/* ---- keep Woodmart's global iranyekan font out of our blocks ---- */
.af-root, .af-root :is(p,span,div,a,li,b,strong,em,i,figcaption,button,input){font-family:var(--fb)}
.af-root :is(h1,h2,h3,h4,h5,h6),
.af-root .af-h1,.af-root .af-h3,.af-root .af-btn,
.af-root .af-band h2,.af-root .af-book b,.af-root .af-gitem figcaption,
.af-root .af-fan .af-fl,.af-root .af-hero .af-sub,
.af-root .af-hd-nav a,.af-root .af-hd-nav-a,.af-root .af-hd-cta,
.af-root .af-st span,.af-root .af-ft2-head h2,
.af-root .af-ft2-contact h3,.af-root .af-ft2-c b,.af-root .af-ft-top{font-family:var(--fh)}
.af-root .af-price,.af-root .af-when,.af-root .af-chno,
.af-root .af-bsub,.af-root .af-cls li,.af-root .af-cls-note{font-family:var(--fb)}

/* ---- integration with the Woodmart theme ----
   These used to live in Theme Settings > Custom CSS. Keeping them here
   means the whole design travels with the plugin. */
.whb-general-header .container{max-width:100%;width:100%;margin:0;padding:0}
.whb-general-header .wd-header-html{padding:0}
.whb-general-header .whb-column{margin:0}
.whb-general-header .whb-flex-row{max-width:100%}
.whb-general-header .whb-column8{display:flex!important}
.whb-general-header [class*="whb-column_mobile"]{display:none!important}
.home .wd-content-layout,.page .wd-content-layout{padding-top:0;padding-bottom:0}
.home .wd-page-content,.page .wd-page-content{background:transparent}
body.single-af_product .wd-post-meta,
body.single-af_product .social-share,
body.single-af_product .wd-page-nav,
body.single-af_product .wd-post-author,
body.single-af_product .entry-meta,
body.single-af_product .wd-post-title,
body.single-af_product .entry-title,
body.single-af_product .post-title,
body.single-af_product .wd-post-thumbnail,
body.single-af_product .post-thumbnail,
body.single-af_product .entry-thumbnail,
body.single-af_product .wp-post-image{display:none!important}
body.single-af_product .af-sp h1,
body.single-af_product .af-sp-media img,
body.single-af_product .af-more .wp-post-image,
body.single-af_product .af-scard img{display:block!important}

/* ---- Woodmart's sticky mobile toolbar · floating card ----
   Buttons are set in تنظیمات قالب › نوار پیمایش موبایل (all five are custom
   links · see HANDOFF §6b for the exact fields). The theme draws a flat
   edge-to-edge strip; this restyles it as a floating rounded card. Icons are
   one-colour line drawings painted through a CSS mask, so currentColor
   tints icon and label together · the brand red marks the tab of the page
   being viewed (body.home / the shop pages), everything else stays a quiet
   warm grey. Flex order pins the reading order
   صفحه اصلی · کلاس‌ها · نقاشی‌ها · فروشگاه · اینستاگرام. */
.wd-toolbar{inset-inline:12px!important;bottom:calc(10px + env(safe-area-inset-bottom))!important;
  height:auto!important;padding:6px!important;border-radius:22px!important;
  background:#FFFFFF!important;border:1px solid rgba(51,48,46,.08)!important;
  box-shadow:0 2px 6px rgba(51,48,46,.05),0 14px 34px rgba(51,48,46,.16)!important}
.wd-toolbar>div{flex:1 1 0}
.wd-toolbar>div a{display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;height:56px!important;padding:0!important;border-radius:16px;
  color:#8A8078!important;text-decoration:none!important;transition:color .2s,background-color .2s}
.wd-toolbar>div a:active{background:#F6F1E7}
.wd-toolbar .wd-toolbar-label{position:static!important;inset-inline:auto!important;
  font-family:'Vazirmatn',sans-serif!important;font-size:10px!important;font-weight:600!important;
  line-height:1.4!important;color:inherit!important}

.wd-toolbar .wd-toolbar-home,.wd-toolbar .wd-toolbar-link-5{order:1}
.wd-toolbar .wd-toolbar-link-1{order:2}
.wd-toolbar .wd-toolbar-link-2{order:3}
.wd-toolbar .wd-toolbar-link-3{order:4}
.wd-toolbar .wd-toolbar-link-4{order:5}

.wd-toolbar .wd-custom-icon{width:24px!important;height:24px!important;display:block!important;
  font-size:0!important;background:currentColor!important;
  -webkit-mask:var(--af-i) center/23px 23px no-repeat;mask:var(--af-i) center/23px 23px no-repeat}
.wd-toolbar .wd-custom-icon::before,.wd-toolbar .wd-tools-icon::before{display:none!important}

.wd-toolbar .wd-toolbar-link-5 .wd-custom-icon{--af-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E")}
.wd-toolbar .wd-toolbar-link-1 .wd-custom-icon{--af-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1 0 1.6-.7 1.6-1.5 0-.4-.2-.8-.5-1.1-.3-.3-.5-.6-.5-1 0-.8.7-1.4 1.5-1.4H16a5 5 0 0 0 5-5c0-4.4-4-8-9-8Z'/%3E%3Ccircle cx='7.6' cy='11.6' r='1.1' fill='%23000' stroke='none'/%3E%3Ccircle cx='11' cy='7.6' r='1.1' fill='%23000' stroke='none'/%3E%3Ccircle cx='15.4' cy='9.2' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.wd-toolbar .wd-toolbar-link-2 .wd-custom-icon{--af-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2.5'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='m4.5 17 4.2-4.2 2.8 2.8 3.2-3.2 4.8 4.8'/%3E%3C/svg%3E")}
.wd-toolbar .wd-toolbar-link-3 .wd-custom-icon{--af-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8h15l-1.2 11.5H5.7Z'/%3E%3Cpath d='M9 8V6.2a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E")}
.wd-toolbar .wd-toolbar-link-4 .wd-custom-icon{--af-i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='3.8'/%3E%3Ccircle cx='16.8' cy='7.2' r='1.1' fill='%23000' stroke='none'/%3E%3C/svg%3E")}

/* page-id-259 is the shop page in this database · re-check after a rebuild */
body.home .wd-toolbar .wd-toolbar-link-5 a,
body.page-id-259 .wd-toolbar .wd-toolbar-link-3 a,
body.single-af_product .wd-toolbar .wd-toolbar-link-3 a{color:#C93F58!important;background:#FAEEF0}

@media (max-width:1024px){
  body.sticky-toolbar-on{padding-bottom:92px!important}
  .sticky-toolbar-on .wd-sticky-btn{bottom:90px!important}
  .sticky-toolbar-on .scrollToTop{bottom:102px!important}
}