/* ============================================================
   WhiteCoat — Arabic-first theme overlay  (v1)
   Layers on top of donor-49 chassis. Fonts + RTL + motion + polish.
   Accent colour is NOT set here — it is swapped in the HTML/CSS per
   doctor by the builder (string replacement of the donor accent).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@300;400;600;700;900&display=swap');

:root{
  --wa:#25d366;
  --ink:#0b0b0b;
  --cream:#fffffa;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. TYPE — Arabic-first ---------- */
body, .et_pb_text, .et_pb_blurb, p, a, li, span, div, input, textarea, select, button,
.et_pb_button, .et_pb_promo_description, .et_pb_toggle_content, .et_pb_menu__menu a,
.et_pb_testimonial_description_inner{
  font-family:'Tajawal','Cairo','Montserrat',Helvetica,Arial,sans-serif !important;
}
h1,h2,h3,h4,h5,h6,
.et_pb_module_header,
.et_pb_slide_title,
.et_pb_toggle_title,
.et_pb_promo h2,
.et_pb_blurb h4,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3{
  /* El Messiri carries Arabic + Latin, so headings stay elegant in both languages */
  font-family:'El Messiri','Playfair Display',Georgia,serif !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}
body{ line-height:1.85; }
p{ line-height:1.95; }

/* ---------- 2. RTL — mirror Divi's physical layout ---------- */
html[dir="rtl"] body{ direction:rtl; text-align:right; }
html[dir="rtl"] .et_pb_row{ direction:rtl; }
html[dir="rtl"] .et_pb_column{ float:right !important; }

/* Divi alignment utility classes: swap sides */
html[dir="rtl"] .et_pb_text_align_left{ text-align:right !important; }
html[dir="rtl"] .et_pb_text_align_right{ text-align:left !important; }

/* the donor wrapped whole rows in .aow-btn-inline{text-align:left!important}.
   That overrides the row, so the button modules (which carry no alignment of
   their own) inherit `left` while the text modules are flipped right by the
   rule above -> headings right, buttons left. Force the row back to right. */
html[dir="rtl"] .aow-btn-inline{ text-align:right !important; }

/* blurbs: icon moves to the right edge */
html[dir="rtl"] .et_pb_blurb_position_left .et_pb_main_blurb_image{
  float:right !important; margin-right:0 !important; margin-left:20px !important;
}
html[dir="rtl"] .et_pb_blurb_position_right .et_pb_main_blurb_image{
  float:left !important; margin-left:0 !important; margin-right:20px !important;
}
html[dir="rtl"] .et_pb_blurb_content{ text-align:right; }

/* buttons: flip the icon to the left of the label */
html[dir="rtl"] .et_pb_button:after,
html[dir="rtl"] .et_pb_button_module_wrapper .et_pb_button:after{
  content:none !important;            /* kill donor glyph artifacts in RTL */
}
html[dir="rtl"] .et_pb_button{ padding-right:1.4em; padding-left:1.4em; }

/* nav menu: reverse order + align right */
html[dir="rtl"] .et_pb_menu__menu > nav > ul,
html[dir="rtl"] .et_pb_menu .et_pb_menu__menu,
html[dir="rtl"] .et_pb_menu__wrap{ direction:rtl; }
html[dir="rtl"] .et_pb_menu__menu > nav > ul > li{ float:right; }

/* lists + FAQ chevrons */
html[dir="rtl"] ul, html[dir="rtl"] ol{ padding-right:1.4em; padding-left:0; }
html[dir="rtl"] .et_pb_toggle_title:before{ right:auto; left:20px; }
html[dir="rtl"] .et_pb_toggle_title{ padding-right:0; padding-left:50px; }

/* Divi's FAQ toggle markers are ASCII letters inside the ETmodules icon font
   (a9.css: content:"\50" = "P" when closed, content:"\4f" = "O" when open).
   The donor's icon-font bundle was never saved, so the browser paints a
   literal serif "P". Neutralise the glyph and draw a + / - in pure CSS.
   Deliberately NOT scoped to html[dir="rtl"]: the missing font is missing in
   both languages, and an RTL-only override let the English toggle show "P". */
.et_pb_toggle.et_pb_toggle .et_pb_toggle_title:before{
  font-family:inherit !important;
  content:"" !important;
  display:block !important;
  width:18px; height:18px; margin-top:-9px;
  background:
    linear-gradient(#6b7f5e,#6b7f5e) center/14px 2.5px no-repeat,
    linear-gradient(#6b7f5e,#6b7f5e) center/2.5px 14px no-repeat;
  transition:transform .25s var(--ease);
}
.et_pb_toggle.et_pb_toggle.et_pb_toggle_open .et_pb_toggle_title:before{
  background:linear-gradient(#6b7f5e,#6b7f5e) center/14px 2.5px no-repeat;
}

/* the gallery hover veil carried the same missing magnifier glyph ("\E050") */
.et_overlay:before{ content:none !important; display:none !important; }

/* promo card: sparkle that replaced the donor's third-party product photo */
.wc-promo-ic{ display:block; width:58px; height:58px; margin:0 auto 12px; }
.wc-promo-ic svg{ display:block; width:58px; height:58px; }

/* before/after slider label positions */
html[dir="rtl"] .tg-range, html[dir="rtl"] .twentytwenty-handle{ direction:ltr; }

/* ---------- 3. MOTION — reveals, hero entrance (transform/opacity only) ---------- */
.et_pb_section, .et_pb_row, .et_pb_module{ transition:none; }

.wc-reveal{ opacity:0; transform:translateY(18px); will-change:opacity,transform; }
.wc-reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.wc-reveal[data-d="1"]{ transition-delay:.08s; }
.wc-reveal[data-d="2"]{ transition-delay:.16s; }
.wc-reveal[data-d="3"]{ transition-delay:.24s; }
.wc-reveal[data-d="4"]{ transition-delay:.32s; }

/* hero entrance */
.wc-hero-enter{ animation:wcHeroIn .9s var(--ease) both; }
@keyframes wcHeroIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* FAQ answer: a6.css keeps it display:none while .et_pb_toggle_close is on the
   module, so the open state has to win display back before anything can animate. */
.et_pb_toggle_open .et_pb_toggle_content{
  display:block !important;
  animation:wcToggleIn .34s var(--ease) both;
}
@keyframes wcToggleIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.et_pb_toggle_title:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

/* Hero photograph: the builder puts the url in the same layered background-image as
   the scrim, but Divi leaves background-size unset once the photo is gone.
   The 6% vertical anchor is load-bearing: the shot is 3:2 and the band is ~2.7:1,
   so `cover` throws away 55% of the height.  At the old 38% that crop came off the
   top and clipped the parents' heads; 6% keeps all three faces in frame.  The
   horizontal anchor only bites on phones, where the band is taller than the photo's
   ratio and cover crops sideways instead - 18% holds the mother and toddler rather
   than centring on the father's shoulder. */
.et_pb_section_0.et_pb_section{
  background-size:cover !important;
  background-position:22% 6% !important;
  background-repeat:no-repeat !important;
}
@media (max-width:767px){
  .et_pb_section_0.et_pb_section{ background-position:18% 4% !important; }
}

/* gentle image zoom on hover */
.et_pb_image img, .et_pb_blurb img, .et_pb_gallery_item img{ transition:transform .6s var(--ease); }
.et_pb_image:hover img, .et_pb_gallery_item:hover img{ transform:scale(1.04); }

/* button lift */
.et_pb_button{ transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease) !important; }
.et_pb_button:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.16); }

@media (prefers-reduced-motion: reduce){
  .wc-reveal{ opacity:1 !important; transform:none !important; }
  .wc-hero-enter{ animation:none !important; }
  .et_pb_toggle_open .et_pb_toggle_content{ animation:none !important; }
  .et_pb_button:hover{ transform:none !important; }
  html{ scroll-behavior:auto !important; }
}

/* ---------- 4. POLISH ---------- */
html{ scroll-behavior:smooth; }
::selection{ background:rgba(155,127,104,.28); }

/* keep the language toggle tidy */
.wc-lang{
  display:inline-flex; align-items:center; gap:.4em;
  padding:6px 14px; border-radius:999px; cursor:pointer;
  font-size:13px; font-weight:600; line-height:1;
  border:1px solid currentColor; background:transparent;
  font-family:'Tajawal','Cairo',sans-serif;
}

/* On phones the header is only 48px tall and its right end belongs to the
   hamburger, so the pill's inline-start slot lands on top of it.  The logo is
   left-aligned at x=49 in every build, which leaves the first 49px free: park a
   compact pill there.  Physical left/right, not logical, because the page flips
   dir when the toggle is used and the pill must not jump across the hamburger. */
@media (max-width:980px){
  .wc-lang{
    left:14px !important; right:auto !important;
    padding:5px 9px; font-size:11px;
  }
}

/* ---------- 5. WhatsApp floating CTA ---------- */
.wc-wa{
  position:fixed; inset-inline-end:20px; bottom:20px; z-index:99999;
  width:58px; height:58px; border-radius:50%;
  background:var(--wa); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.42);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wc-wa:hover{ transform:scale(1.08); box-shadow:0 12px 30px rgba(37,211,102,.55); }
.wc-wa svg{ width:30px; height:30px; fill:#fff; }
@media (max-width:767px){ .wc-wa{ inset-inline-end:14px; bottom:14px; width:52px; height:52px; } }

/* ---------- 6. Before/After slider (our own, donor JS was lost) ---------- */
.wc-ba{ position:relative; overflow:hidden; border-radius:14px; user-select:none; touch-action:pan-y; aspect-ratio:2/1; }
/* a7.css ships `.dsm_before_after_image img{position:absolute;top:0}` and our markup
   still lives inside that module, so both imgs would go absolute and the wrapper would
   collapse to height 0. Force the in-flow before img back to static. */
.wc-ba img{ position:static !important; display:block; width:100%; height:100%; object-fit:cover; }
.wc-ba .wc-ba-after{ position:absolute; inset:0; clip-path:inset(0 0 0 var(--wc-ba-x,50%)); }
html[dir="rtl"] .wc-ba .wc-ba-after{ clip-path:inset(0 var(--wc-ba-x,50%) 0 0); }
.wc-ba .wc-ba-handle{
  position:absolute; top:0; bottom:0; inset-inline-start:var(--wc-ba-x,50%);
  width:3px; background:#fff; transform:translateX(-50%); cursor:ew-resize;
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
.wc-ba .wc-ba-after img{ width:100%; height:100%; object-fit:cover; }
.wc-ba .wc-ba-knob{
  position:absolute; top:50%; inset-inline-start:var(--wc-ba-x,50%);
  width:44px; height:44px; border-radius:50%;
  background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center; cursor:ew-resize;
  color:#111; font-size:17px; letter-spacing:-2px;
  transform:translate(-50%,-50%);
}
html[dir="rtl"] .wc-ba .wc-ba-knob{ transform:translate(50%,-50%); }
.wc-ba .wc-ba-knob::before{ content:"\2039\203A"; }

/* ---------- 6b. utility ---------- */
/* donor furniture we deliberately keep out of the layout */
.wc-hide{ display:none !important; }

/* ---------- 7. Donor-CSS overrides (must win the cascade) ---------- */
/* 7a. fonts — donor CSS hard-codes Playfair/Montserrat which have no Arabic */
h1,h2,h3,h4,h5,h6,.et_pb_slide_title,.et_pb_toggle_title,
.why-us-box h2,.et_pb_promo h2,.et_pb_promo h1{
  font-family:'El Messiri','Tajawal',Georgia,serif !important;
}
body,input,textarea,select,button,
#main-header,#et-top-navigation,#footer-info,
.et_pb_button,.et_pb_blurb_content,.et_pb_text_inner,
.et_pb_toggle_content,.et_pb_promo_description,.dsm_icon_list_text{
  font-family:'Tajawal','Cairo','El Messiri',Helvetica,Arial,sans-serif !important;
}
h1,h2,h3,h4,h5,h6{ letter-spacing:0 !important; }

/* 7b. icon-font glyphs render as literal letters (P, 3, $) because the
       donor icon-font bundles were never saved. Hide every one of them. */
.dsm_icon_list_icon,
.et_pb_menu__menu li a:after,
.et_pb_menu__menu li a:before,
#et-top-navigation li a:after,
nav#top-menu li a:after,
.et_pb_blurb .et_pb_main_blurb_image .et-pb-icon,
.et-pb-icon{ font-family:inherit !important; content:none !important; display:none !important; }
/* keep social/brand icons visible if a real icon font is present */
.aow-social-footer .et-pb-icon,
.et-social-icons .et-pb-icon{ display:inline-block !important; }

/* 7c. the "promo" badge row was pulled up over the hero by a negative
       margin that only made sense with the donor's own images */
.et_pb_row.promo-row{ margin-top:0 !important; padding:26px 0 !important; }
.promo-row .et_pb_image{ text-align:center !important; }
.promo-row .et_pb_image img{
  width:auto !important; max-width:130px !important; max-height:130px !important;
  display:inline-block !important; border-radius:14px !important;
  box-shadow:0 10px 26px rgba(0,0,0,.10) !important;
}
@media (max-width:767px){
  .promo-row .et_pb_image img{ max-width:96px !important; max-height:96px !important; }
}

/* 7d. the smile-gallery category list (dsm_icon_list) — render as clean chips */
.dsm_icon_list_items{
  list-style:none !important; margin:0 !important; padding:0 !important;
  display:grid !important; grid-template-columns:1fr 1fr !important;
  gap:10px 22px !important; direction:rtl !important;
}
.dsm_icon_list_child{ margin:0 !important; }
.dsm_icon_list_child a{
  display:flex !important; align-items:center; gap:10px !important;
  color:inherit !important; text-decoration:none !important;
  font-size:17px !important; line-height:1.5 !important;
}
.dsm_icon_list_child a:before{
  content:"" !important; width:7px !important; height:7px !important;
  border-radius:50% !important; background:#6b7f5e !important;
  flex:0 0 auto !important; display:block !important;
}
@media (max-width:767px){
  .dsm_icon_list_items{ grid-template-columns:1fr !important; }
}

/* 7e. stray theme furniture that has no meaning here */
.select_page, .et_pb_widget select, .widget_search select,
.wp-block-search, .et_pb_search{ display:none !important; }

/* 7f. footer: keep it tidy in RTL */
#footer-widgets .footer-widget li{ padding-left:0 !important; padding-right:0 !important; }
/* 7g. footer RTL mirror — a6.css floats the widgets left (.footer-widget{float:left})
   and hangs the gutter on margin-RIGHT, so in RTL the column ORDER reads backwards
   and the copy stays left-aligned.  Mirror the float, the gutter and the alignment. */
html[dir="rtl"] #footer-widgets .footer-widget{
  float:right !important;
  margin:0 0 7.5% 7.5% !important;
  text-align:right !important;
}
html[dir="rtl"] #footer-widgets .footer-widget:nth-child(2n){ margin-left:0 !important; }
html[dir="rtl"] #footer-widgets .footer-widget .title,
html[dir="rtl"] #footer-widgets .footer-widget ul,
html[dir="rtl"] #footer-widgets .footer-widget li,
html[dir="rtl"] #footer-widgets .footer-widget .fwidget{ text-align:right !important; }
#footer-info{ text-align:center !important; }
.aow-social-footer{ display:flex !important; gap:12px !important; }
.aow-social-footer a{ padding:0 !important; }

/* ---------- 7h. donor furniture that only made sense with donor content ---------- */

/* row_17 (the donor's own why-us block) used to be hidden here.  It is now
   deleted by the builder - see build_site.py - so no rule is needed. */

/* the three service cards (section_7): a9.css pins the image WRAPPER to 80px
   (.et_pb_blurb_5/6/7 .et_pb_main_blurb_image .et_pb_image_wrap{width:80px})
   and Divi's own SVG rule (.et_pb_main_blurb_image img[src*=".svg"]{width:auto})
   then lets the <img> fill it — so an 800x600 placeholder landed at 80x60 in the
   middle of a 333px card.  Let the placeholder fill the card instead. */
.et_pb_blurb_5 .et_pb_main_blurb_image .et_pb_image_wrap,
.et_pb_blurb_6 .et_pb_main_blurb_image .et_pb_image_wrap,
.et_pb_blurb_7 .et_pb_main_blurb_image .et_pb_image_wrap{
  width:100% !important; max-width:100% !important;
}
.et_pb_blurb_5 .et_pb_main_blurb_image img,
.et_pb_blurb_6 .et_pb_main_blurb_image img,
.et_pb_blurb_7 .et_pb_main_blurb_image img{
  width:100% !important; height:200px !important;
  object-fit:cover !important; border-radius:12px !important;
}

/* the "meet the doctor" photo column is now 1_3 (333px wide) */
.et_pb_image_3 .et_pb_image_wrap{ overflow:hidden; border-radius:16px; }
.et_pb_image_3 .et_pb_image_wrap img{ border-radius:16px; }

/* ---------- 7i. RTL grid normalisation (the 61px outer gap) ---------- */

/* Divi's desktop grid is LTR: columns float RIGHT and the gutters hang off
   margin-RIGHT, with the no-gutter rule written as
   `.et_pb_row .et_pb_column:last-child{margin-right:0}` - i.e. it assumes the
   LAST column in DOM order is the visual RIGHT edge.
   In RTL that assumption is backwards: the DOM-last column is the visual LEFT
   edge.  So on every multi-column row the outer gutter lands on the right
   (a dead 61px strip) and the LAST inner gutter collapses to 0 - the photo
   touches the text.  Confirmed on R0/R3/R6/R7/R13/R16/R22.

   Note the margin comes from `.et_pb_gutters3 .et_pb_column` where the gutter
   class lives on Divi's `.et_builder_inner_content` WRAPPER, so it hits every
   column regardless of the row's own gutter class (which only sets widths).

   Fix without touching a single width: zero the float margins and let
   `space-between` hand the leftover space back as real gutters.  Since Divi
   always sizes columns at (100% - (n-1)*g)/n, the leftover is exactly
   (n-1)*g, so this reproduces the intended gutter for EVERY gutter class
   (gutters1/2/3) and leaves both edges flush:
     gutters3 3x1_3  -> 3x333 + 2x61  = 1121  (was: 0 + 61 outside)
     gutters2 3_5+2_5-> 659 + 428 + 34        (its own tighter gutter kept)
     gutters1 2x1_2  -> 50% + 50%, 0 gap      (gallery mosaic untouched)
   Scoped to desktop + `#main-content` (so the header/footer are untouched) and
   to DIRECT children (nested inner rows are untouched).  Abs-positioned
   parallax spans are not flex items, so `et_pb_section_parallax` rows are
   safe.  No `align-items` override: Divi's equal-height rows keep stretching. */
@media (min-width:981px){
  html[dir="rtl"] #main-content .et_pb_row{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:space-between !important;
  }
  html[dir="rtl"] #main-content .et_pb_row > .et_pb_column{
    float:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* The row's `::after` is Divi's clearfix (`content:""; display:block;
     width:0`).  Inside a FLEX container a pseudo-element that generates content
     is a real flex item, so `space-between` spent one whole gutter on it and the
     outer edge kept a gap.  Measured item count was always `columns + 1`:
       R0   2 cols -> 3 slots -> [31 inner, 31 left]  (not [62 inner, 0, 0])
       R13  3 cols -> 4 slots -> [41 right, 40, 41]   (not [0, 61, 61, 0])
       R3   5 cols -> 6 slots -> 5 gaps of 49         (not 4 gaps of 61.5)
     Flex items never float, so the clearfix is dead weight in this context -
     hide it and the leftover becomes exactly (n-1)*g split evenly between the
     real columns.  MUST stay inside the media query: below 981px the row is
     `display:block` again and the clearfix is genuinely needed to contain the
     floated columns. */
  html[dir="rtl"] #main-content .et_pb_row::before,
  html[dir="rtl"] #main-content .et_pb_row::after{
    display:none !important;
  }
}

/* ---------- 8. NAVIGATION ---------- */

/* The header is position:fixed (body.et_fixed_nav), so an anchored section
   slides under it. Reserve its height instead of letting the browser guess. */
html{ scroll-padding-top:88px; }

/* Donor menu: `#top-menu li{padding-right:22px}` plus
   `#top-menu>li:last-child{padding-right:0}`.  That pair is correct in LTR -
   items flow left to right, so the last one is already flush against the
   container's right edge and the rule only trims dead trailing space.
   Our pages are RTL: items flow right to left, so padding-right is the gutter
   facing the *previous* item and the last child is the leftmost one.  Zeroing
   it deletes a real gap and welds the final link into the second-to-last -
   "الأسئلة الشائعةاحجز موعد" rendered as one word.  Move the flush end to the
   first child, which is the item that actually meets the container edge here. */
#top-menu>li:last-child{ padding-right:22px !important; }
#top-menu>li:first-child{ padding-right:0 !important; }

/* The donor's hamburger is an ETmodules glyph in a span. Same missing font as
   the FAQ markers, so draw three bars and make the span a real control.
   The bars are painted in currentColor, and the inherited colour here is
   rgb(4,3,15) - the header background is rgb(0,0,0), so the control was
   invisible. Pin it to the same white the logo text uses. */
#et_mobile_nav_menu .mobile_menu_bar{
  display:block !important;
  position:relative;
  width:28px; height:22px;
  cursor:pointer;
  color:#fff;
  background:
    linear-gradient(currentColor,currentColor) 0 3px/28px 2.5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 10.5px/28px 2.5px no-repeat,
    linear-gradient(currentColor,currentColor) 0 18px/28px 2.5px no-repeat;
}
#et_mobile_nav_menu .mobile_nav{ float:none; }

/* The donor draws its hamburger with `.mobile_menu_bar:before{content:"\61"}` -
   an ETmodules codepoint.  That font is never loaded, so the escape falls back
   to its literal character and a serif "a" sits on top of the bars we just
   drew.  Same failure as the FAQ "P".  Take the pseudo-element out. */
.mobile_menu_bar:before, .et_toggle_slide_menu:after{ content:none !important; }

#et_mobile_nav_menu .mobile_menu_bar:focus-visible{
  outline:2px solid #6b7f5e; outline-offset:4px;
}

/* No shipped stylesheet - none of a1-a9, theme.css or graft.css - carried a
   single rule for #et_mobile_nav_menu or #top-menu-nav, which is why the phone
   layout showed nothing but a blank click target. The drawer is defined here. */
@media (min-width:981px){
  #et_mobile_nav_menu{ display:none !important; }
}
@media (max-width:980px){
  #et_mobile_nav_menu{ display:block !important; }
  #top-menu-nav{
    display:none;
    position:absolute !important;
    top:100%; left:0; right:0;
    background:#fff;
    box-shadow:0 14px 28px rgba(0,0,0,.14);
    padding:6px 0 12px;
    z-index:99991;
  }
  #main-header.wc-nav-open #top-menu-nav{ display:block; }
  #top-menu-nav ul,
  #top-menu-nav li{
    float:none !important;
    display:block !important;
    width:auto !important;
    margin:0 !important;
  }
  #top-menu-nav a{
    display:block !important;
    padding:13px 26px !important;
    border-bottom:1px solid rgba(0,0,0,.06);
    font-size:17px;
  }
  /* the drawer fades the accent in rather than snapping, and never animates
     height - transform/opacity only */
  #main-header.wc-nav-open #top-menu-nav{ animation:wcNavIn .22s var(--ease) both; }
}
@keyframes wcNavIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  #main-header.wc-nav-open #top-menu-nav{ animation:none; }
}