/* Kyom design system — source of truth. Relocated from Customizer Additional CSS (post 8088) on 2026-07-16.
   Already fully tokenized (:root below). Enqueued via kyom-design.php with filemtime cache-bust. */
/* ============ Kyom v4 design system (stage) — source: audit/redesign-proto/kyom-redesign-v4.html ============ */
:root{
  --k-paper:#FBF8F5;--k-paper2:#F4EEE9;--k-rose:#F7EDF1;--k-rose2:#F2E3EA;
  --k-ink:#221A1F;--k-muted:#75676E;--k-hair:#E8DFDA;
  --k-berry:#8E2E5E;--k-deep:#4A1531;--k-ondark:#F8F2F5;
  --k-r:18px;--k-rim:12px;
  --k-lift:0 16px 40px rgb(74 21 49 / .08);
}

/* ---- buttons: pill, arrow slides on hover ---- */
.kyom-btn .elementor-button,.kyom-btn-o .elementor-button{
  border-radius:999px;min-height:52px;padding:0 32px;display:inline-flex;align-items:center;gap:12px;
  font-family:"IBM Plex Sans Arabic",sans-serif;font-size:15px;font-weight:500;
  transition:background-color .18s ease-out,color .18s ease-out,border-color .18s ease-out;
}
.kyom-btn .elementor-button{background:var(--k-berry);color:var(--k-ondark)}
.kyom-btn .elementor-button:hover{background:var(--k-deep);color:var(--k-ondark)}
.kyom-btn-o .elementor-button{background:transparent;color:var(--k-ink);border:1px solid rgb(34 26 31 / .28)}
.kyom-btn-o .elementor-button:hover{border-color:var(--k-ink);background:#fff;color:var(--k-ink)}
.kyom-btn .elementor-button-icon{transition:transform .18s ease-out}
.kyom-btn .elementor-button:hover .elementor-button-icon{transform:translateX(-4px)}

/* ---- text link with sliding arrow ---- */
.kyom-tlink{color:var(--k-berry);font-weight:500;font-size:14px}
.kyom-tlink .ar-r{display:inline-block;transition:transform .18s ease-out}
a:hover .kyom-tlink .ar-r,.kyom-tlink:hover .ar-r{transform:translateX(-4px)}

/* ---- scroll reveal: fade + 12px rise, 220ms ease-out ---- */
@media (prefers-reduced-motion: no-preference){
  .kyom-rev{opacity:0;transform:translateY(12px);transition:opacity .22s ease-out,transform .22s ease-out}
  .kyom-rev.in{opacity:1;transform:none}
  .kyom-draw{stroke-dasharray:120;stroke-dashoffset:120;animation:kyomdraw 1.6s ease-out .4s forwards}
  @keyframes kyomdraw{to{stroke-dashoffset:0}}
}

/* ---- cards ---- */
.kyom-card{
  background:#fff;border:1px solid var(--k-hair);border-radius:var(--k-r);
  transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out;
}
.kyom-card:hover{transform:translateY(-3px);box-shadow:var(--k-lift);border-color:rgb(142 46 94 / .25)}
.kyom-card .elementor-widget-image img{border-radius:var(--k-rim);transition:transform .4s ease-out;aspect-ratio:4/3;object-fit:cover;width:100%}
.kyom-card:hover .elementor-widget-image img{transform:scale(1.02)}
.kyom-card .elementor-widget-image{overflow:hidden;border-radius:var(--k-rim)}
.kyom-rim img{border-radius:var(--k-r)}
.kyom-card .kyom-cfoot{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--k-hair);padding-top:12px;margin-top:4px;
}
.kyom-card .kyom-cfoot .tam{font-size:12px;color:var(--k-muted)}

/* ---- stats ---- */
.kyom-stat-v .elementor-heading-title{direction:ltr;font-variant-numeric:tabular-nums}
.kyom-stat{border-inline-start:1px solid rgb(142 46 94 / .14)}
.kyom-stat:first-child{border-inline-start:none}
@media (max-width:767px){.kyom-stat:nth-child(3){border-inline-start:none}}

/* ---- istanbul numbered list ---- */
.kyom-ol ol{list-style:none;margin:0;padding:0;counter-reset:c}
.kyom-ol li{
  counter-increment:c;display:flex;gap:24px;align-items:baseline;
  padding-block:14px;border-bottom:1px solid rgb(142 46 94 / .16);font-size:16px;color:var(--k-ink);
}
.kyom-ol li::before{
  content:counter(c,decimal-leading-zero);font-size:13px;color:var(--k-berry);min-width:24px;
  font-family:"Amiri",serif;direction:ltr;
}

/* ---- hero art: arch + lockup + flowers ---- */
.kyom-art{position:relative;min-height:480px}
.kyom-art .arch{
  position:absolute;inset-inline-end:24px;bottom:0;width:min(340px,80%);height:440px;
  background:var(--k-rose2);border-radius:999px 999px var(--k-r) var(--k-r);
  display:flex;align-items:center;justify-content:center;
}
.kyom-art .arch-o{
  position:absolute;inset-inline-end:-16px;bottom:36px;width:min(340px,80%);height:440px;
  border:1px solid rgb(142 46 94 / .30);border-radius:999px 999px var(--k-r) var(--k-r);
}
.kyom-art .lockup{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.kyom-art .lockup .lat{font-family:"Amiri",serif;letter-spacing:.28em;margin-inline-start:.28em;font-size:34px;color:var(--k-deep)}
.kyom-art .lockup .ar{font-size:13.5px;color:var(--k-berry)}
.kyom-art .flower{position:absolute;top:6%;inset-inline-start:4%;width:150px;height:150px;color:var(--k-berry);opacity:.85}
.kyom-art .flower-s{position:absolute;bottom:8%;inset-inline-start:16%;width:76px;height:76px;color:var(--k-berry);opacity:.45}
@media (max-width:900px){
  /* mobile hero art: centered arch, no absolute offsets, single tucked flower */
  .kyom-art{min-height:0;display:flex;justify-content:center;padding-top:8px}
  .kyom-art .arch{position:relative;inset-inline-end:auto;bottom:auto;height:280px;width:230px}
  .kyom-art .arch-o{display:none}
  .kyom-art .flower{width:92px;height:92px;top:-14px;inset-inline-start:calc(50% - 158px)}
  .kyom-art .flower-s{display:none}
}

/* ---- istanbul photo: arch mask + corner flower ---- */
.kyom-ph{position:relative}
.kyom-ph img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:999px 999px var(--k-r) var(--k-r)}
.kyom-ph .flower{position:absolute;top:-28px;inset-inline-start:-28px;width:120px;height:120px;color:var(--k-berry)}
@media (max-width:900px){
  .kyom-ph img{aspect-ratio:4/3;border-radius:var(--k-r)}
  .kyom-ph .flower{display:none} /* floats detached from the photo on narrow screens */
}

/* ---- decorative loops: gentle flower sway + arch breathe (barely-there, luxury) ---- */
@keyframes kyom-sway{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(2.5deg)}}
@keyframes kyom-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@keyframes kyom-glow{0%,100%{opacity:1}50%{opacity:.55}}
/* re-include kyomdraw so the one-time stroke draw still runs, then loop the sway forever;
   different durations/offset so the two flowers drift out of sync */
.kyom-art .flower,.kyom-ph .flower{animation:kyomdraw 1.6s ease-out .4s forwards,kyom-sway 8.5s ease-in-out infinite}
.kyom-art .flower-s{animation:kyomdraw 1.6s ease-out .4s forwards,kyom-sway 11s ease-in-out -3s infinite}
.kyom-art .arch{animation:kyom-breathe 12s ease-in-out infinite;transform-origin:bottom center}
.kyom-art .arch-o{animation:kyom-glow 12s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .kyom-art .flower,.kyom-ph .flower,.kyom-art .flower-s,.kyom-art .arch,.kyom-art .arch-o{animation:none}
}

/* ---- hero meta separators ---- */
.kyom-meta{display:flex;flex-wrap:wrap;font-size:13.5px;color:var(--k-muted)}
.kyom-meta span{padding-inline:24px;border-inline-start:1px solid var(--k-hair)}
.kyom-meta span:first-child{border-inline-start:none;padding-inline-start:0}
@media (max-width:767px){
  .kyom-meta{font-size:12.5px;row-gap:8px}
  .kyom-meta span{padding-inline:14px}
  /* 2-col cards are narrow: let the footer wrap instead of overflowing */
  .kyom-card .kyom-cfoot{flex-wrap:wrap;gap:2px 8px}
  .kyom-card .kyom-cfoot .tam{font-size:11px}
  .kyom-card .kyom-tlink{font-size:13px}
}

/* ---- footer link hover (EP template renders icon-lists) ---- */
.bdt-template-content-footer .elementor-icon-list-item a:hover .elementor-icon-list-text{color:var(--k-berry)}

/* ---- LTR overrides (EN mirror; AR pages carry dir=rtl on <html>) ---- */
html:not([dir=rtl]) .kyom-btn .elementor-button:hover .elementor-button-icon{transform:translateX(4px)}
html:not([dir=rtl]) a:hover .kyom-tlink .ar-r,
html:not([dir=rtl]) .kyom-tlink:hover .ar-r{transform:translateX(4px)}

/* ==== inner pages (legal / blog / contact) ==== */
/* .elementor-location-single scopes to page CONTENT — the shared EP header/footer
   templates render in the same body, so their heading widgets must be spared. */

/* --- shared page title: legacy decorative purple -> Amiri ink (beats generated widget color) --- */
.page-id-8 .elementor-location-single .elementor-heading-title,
.page-id-3069 .elementor-location-single .elementor-heading-title,
.page-id-7630 .elementor-location-single .elementor-heading-title,
.page-id-28 .elementor-location-single .elementor-heading-title,
.page-id-7661 .elementor-location-single .elementor-heading-title,
.page-id-246 .elementor-location-single .elementor-heading-title,
.page-id-7639 .elementor-location-single .elementor-heading-title{
  font-family:"Amiri",serif!important;color:var(--k-ink)!important;
  font-size:clamp(30px,4.5vw,42px)!important;font-weight:700!important;line-height:1.3!important;
}

/* --- shared: breathing room before the footer --- */
.page-id-8 .elementor-location-single,
.page-id-3069 .elementor-location-single,
.page-id-7630 .elementor-location-single,
.page-id-28 .elementor-location-single,
.page-id-7661 .elementor-location-single,
.page-id-246 .elementor-location-single,
.page-id-7639 .elementor-location-single{padding-bottom:96px}

/* --- prose / legal typography (Change 1) --- */
.page-id-8 .elementor-location-single .elementor-widget-text-editor,
.page-id-3069 .elementor-location-single .elementor-widget-text-editor,
.page-id-7630 .elementor-location-single .elementor-widget-text-editor{max-width:76ch;margin-inline:auto}
.page-id-8 .elementor-location-single .elementor-widget-text-editor h3,
.page-id-3069 .elementor-location-single .elementor-widget-text-editor h3,
.page-id-7630 .elementor-location-single .elementor-widget-text-editor h3{
  font-family:"Amiri",serif;color:var(--k-ink);font-size:24px;font-weight:400;
  line-height:1.4;margin-top:40px;margin-bottom:12px;
}
.page-id-8 .elementor-location-single .elementor-widget-text-editor h4,
.page-id-3069 .elementor-location-single .elementor-widget-text-editor h4,
.page-id-7630 .elementor-location-single .elementor-widget-text-editor h4{
  font-family:"Amiri",serif;color:var(--k-ink);font-size:19px;font-weight:400;margin-top:28px;margin-bottom:8px;
}
.page-id-8 .elementor-location-single .elementor-widget-text-editor p,
.page-id-8 .elementor-location-single .elementor-widget-text-editor li,
.page-id-3069 .elementor-location-single .elementor-widget-text-editor p,
.page-id-3069 .elementor-location-single .elementor-widget-text-editor li,
.page-id-7630 .elementor-location-single .elementor-widget-text-editor p,
.page-id-7630 .elementor-location-single .elementor-widget-text-editor li{
  font-size:16px;line-height:1.9;color:rgb(34 26 31 / .82);
}
.page-id-8 .elementor-location-single .elementor-widget-text-editor ul,
.page-id-3069 .elementor-location-single .elementor-widget-text-editor ul,
.page-id-7630 .elementor-location-single .elementor-widget-text-editor ul{padding-inline-start:1.4em;margin:12px 0}
.page-id-8 .elementor-location-single .elementor-widget-text-editor li,
.page-id-3069 .elementor-location-single .elementor-widget-text-editor li,
.page-id-7630 .elementor-location-single .elementor-widget-text-editor li{margin-bottom:8px}

/* --- blog cards (Change 2): kill bright-blue category, card radius, Amiri titles --- */
.page-id-28 .bdt-post-grid-category a,
.page-id-7661 .bdt-post-grid-category a{
  background:var(--k-berry);color:#fff;border-radius:999px;
  font-size:12px;padding:4px 12px;text-decoration:none;line-height:1.4;
}
.page-id-28 .bdt-post-grid-item,
.page-id-7661 .bdt-post-grid-item{border-radius:var(--k-r);overflow:hidden}
.page-id-28 .bdt-post-grid-title,.page-id-28 .bdt-post-grid-title a,
.page-id-7661 .bdt-post-grid-title,.page-id-7661 .bdt-post-grid-title a{font-family:"Amiri",serif;color:var(--k-ink)}
.page-id-28 .bdt-post-grid-meta,.page-id-28 .bdt-post-grid-meta *,
.page-id-7661 .bdt-post-grid-meta,.page-id-7661 .bdt-post-grid-meta *{font-size:13px;color:var(--k-muted)}

/* --- contact form (Change 3) --- */
.page-id-246 .elementor-location-single .elementor-field-group .elementor-field-label,
.page-id-7639 .elementor-location-single .elementor-field-group .elementor-field-label{font-size:14px;color:var(--k-ink)}
.page-id-246 .elementor-location-single .elementor-field-textual,
.page-id-246 .elementor-location-single textarea.elementor-field,
.page-id-7639 .elementor-location-single .elementor-field-textual,
.page-id-7639 .elementor-location-single textarea.elementor-field{
  background:#fff;border:1px solid var(--k-hair);border-radius:var(--k-rim);
  padding:12px 16px;font-size:15px;color:var(--k-ink);box-shadow:none;
}
.page-id-246 .elementor-location-single .elementor-field-textual:focus,
.page-id-246 .elementor-location-single textarea.elementor-field:focus,
.page-id-7639 .elementor-location-single .elementor-field-textual:focus,
.page-id-7639 .elementor-location-single textarea.elementor-field:focus{
  border-color:var(--k-berry);outline:none;box-shadow:none;
}
.page-id-246 .elementor-location-single .e-form__buttons .elementor-button,
.page-id-246 .elementor-location-single button[type=submit].elementor-button,
.page-id-7639 .elementor-location-single .e-form__buttons .elementor-button,
.page-id-7639 .elementor-location-single button[type=submit].elementor-button{
  background:var(--k-berry);color:#fff;border:none;border-radius:999px;padding:14px 28px;
  transition:background-color .18s ease-out;
}
.page-id-246 .elementor-location-single .e-form__buttons .elementor-button:hover,
.page-id-246 .elementor-location-single button[type=submit].elementor-button:hover,
.page-id-7639 .elementor-location-single .e-form__buttons .elementor-button:hover,
.page-id-7639 .elementor-location-single button[type=submit].elementor-button:hover{background:var(--k-deep)}
/* icon-box map-pin / whatsapp: legacy purple -> berry (framed border + glyph) */
.page-id-246 .elementor-location-single .elementor-widget-icon-box .elementor-icon,
.page-id-7639 .elementor-location-single .elementor-widget-icon-box .elementor-icon{color:var(--k-berry)!important;border-color:var(--k-berry)!important;fill:var(--k-berry)!important}
.page-id-246 .elementor-location-single .elementor-widget-icon-box .elementor-icon svg,
.page-id-7639 .elementor-location-single .elementor-widget-icon-box .elementor-icon svg{fill:var(--k-berry)!important}

/* --- inner pages mobile --- */
@media (max-width:767px){
  /* pad the inner boxed content (border-box, stays in viewport) — NOT the
     location-single wrapper: its children include full-bleed 100vw sections
     that overflow the right edge if the wrapper itself is padded. */
  .page-id-8 .elementor-location-single .e-con-boxed>.e-con-inner,
  .page-id-3069 .elementor-location-single .e-con-boxed>.e-con-inner,
  .page-id-7630 .elementor-location-single .e-con-boxed>.e-con-inner,
  .page-id-28 .elementor-location-single .e-con-boxed>.e-con-inner,
  .page-id-7661 .elementor-location-single .e-con-boxed>.e-con-inner,
  .page-id-246 .elementor-location-single .e-con-boxed>.e-con-inner,
  .page-id-7639 .elementor-location-single .e-con-boxed>.e-con-inner{padding-inline:20px}
  .page-id-8 .elementor-location-single .elementor-heading-title,
  .page-id-3069 .elementor-location-single .elementor-heading-title,
  .page-id-7630 .elementor-location-single .elementor-heading-title,
  .page-id-28 .elementor-location-single .elementor-heading-title,
  .page-id-7661 .elementor-location-single .elementor-heading-title,
  .page-id-246 .elementor-location-single .elementor-heading-title,
  .page-id-7639 .elementor-location-single .elementor-heading-title{font-size:27px!important}
  .page-id-8 .elementor-location-single .elementor-widget-text-editor p,
  .page-id-8 .elementor-location-single .elementor-widget-text-editor li,
  .page-id-3069 .elementor-location-single .elementor-widget-text-editor p,
  .page-id-3069 .elementor-location-single .elementor-widget-text-editor li,
  .page-id-7630 .elementor-location-single .elementor-widget-text-editor p,
  .page-id-7630 .elementor-location-single .elementor-widget-text-editor li{font-size:15px}
  .page-id-246 .elementor-location-single .elementor-field-textual,
  .page-id-7639 .elementor-location-single .elementor-field-textual{width:100%}
}
/* ==== courses archive (Tutor) ==== */
.kyom-arch-head{padding:56px 0 8px}
.kyom-arch-head .kicker{display:block;font-size:13px;font-weight:600;color:var(--k-berry);margin-bottom:10px}
.kyom-arch-head h1{margin:0;color:var(--k-ink)}
.kyom-arch-head p{color:var(--k-muted);font-size:17px;margin:12px 0 0;max-width:58ch}
.kyom-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.kyom-tabs a{
  border:1px solid var(--k-hair);border-radius:999px;padding:9px 20px;font-size:14px;color:var(--k-ink);
  text-decoration:none;transition:color .18s ease-out,border-color .18s ease-out,background-color .18s ease-out;
}
.kyom-tabs a:hover{border-color:var(--k-berry);color:var(--k-berry)}
.kyom-tabs a.on{background:var(--k-berry);border-color:var(--k-berry);color:var(--k-ondark)}

.post-type-archive-courses .tutor-course-list.tutor-grid{grid-template-columns:repeat(3,1fr);gap:32px}
.post-type-archive-courses .tutor-wrap{padding-bottom:96px} /* breathing room before the footer */
@media (max-width:991px){.post-type-archive-courses .tutor-course-list.tutor-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .post-type-archive-courses .tutor-course-list.tutor-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .tutor-course-name a{font-size:16px}
  .tutor-course-card .tutor-card-footer{flex-wrap:wrap;gap:4px;font-size:13px}
  .kyom-arch-head{padding-inline:4px}
}
@media (max-width:767px){
  /* head renders huge on phones — bring type down to the homepage mobile scale */
  .kyom-arch-head{padding:32px 0 4px}
  .kyom-arch-head .kicker{font-size:12px;margin-bottom:8px}
  .kyom-arch-head h1{font-size:27px;line-height:1.25}
  .kyom-arch-head p{font-size:14px;margin-top:10px}
  .kyom-tabs{margin-top:20px;gap:8px}
  .kyom-tabs a{font-size:13px;padding:8px 14px}
}

.tutor-course-card{
  border:1px solid var(--k-hair);border-radius:var(--k-r);background:#fff;box-shadow:none;overflow:hidden;
  transition:transform .2s ease-out,box-shadow .2s ease-out,border-color .2s ease-out;
}
.tutor-course-card:hover{transform:translateY(-3px);box-shadow:var(--k-lift);border-color:rgb(142 46 94 / .25)}
.tutor-course-card .tutor-course-bookmark,
.tutor-course-card .tutor-meta{display:none} /* hides the raw admin display names on cards */
.tutor-course-card .tutor-card-image-top{transition:transform .4s ease-out}
.tutor-course-card:hover .tutor-card-image-top{transform:scale(1.02)}
.tutor-course-name{margin:0}
.tutor-course-name a{font-family:"Amiri",serif;font-size:21px;font-weight:400;color:var(--k-ink);line-height:1.5}
.tutor-course-name a:hover{color:var(--k-berry)}
.tutor-course-card .tutor-card-footer{border-top:1px solid var(--k-hair);background:transparent}
.tutor-course-card .price,.tutor-course-card .woocommerce-Price-amount{color:var(--k-ink)!important}
.tutor-course-card .tutor-btn-outline-primary{
  border-radius:999px;border-color:rgb(34 26 31 / .28);color:var(--k-ink);
  transition:border-color .18s ease-out,background-color .18s ease-out,color .18s ease-out;
}
.tutor-course-card .tutor-btn-outline-primary:hover{border-color:var(--k-ink);background:#fff;color:var(--k-ink)}
.post-type-archive-courses .tutor-course-filter{display:none} /* sort bar: one page of courses, adds noise above the strip */
/* ==== course single (Tutor) ==== */
.tutor-course-details-page{
  /* recolor Tutor's own palette instead of chasing every class */
  --tutor-color-primary:var(--k-berry);
  --tutor-color-primary-hover:var(--k-deep);
  --tutor-color-black:var(--k-ink);
  padding-top:16px;padding-bottom:96px;
}
.tutor-course-details-title{font-family:"Amiri",serif;font-weight:400;color:var(--k-ink)}
.tutor-course-details-info a{color:var(--k-berry)}

/* hero media: portrait uploads were rendering 1100px+ tall */
.tutor-course-details-page .tutor-course-thumbnail img{aspect-ratio:16/10;object-fit:cover;width:100%;border-radius:var(--k-r)}

.tutor-course-details-tab h2,.tutor-course-details-tab h3{color:var(--k-ink)}

/* purchase card */
.tutor-sidebar-card{border:1px solid var(--k-hair);border-radius:var(--k-r);box-shadow:none;overflow:hidden}
.tutor-sidebar-card .tutor-card-body{background:#fff}
.tutor-sidebar-card .tutor-fs-4{font-family:"Amiri",serif;font-weight:400;color:var(--k-ink)}
.tutor-sidebar-card form .tutor-btn{
  width:100%;border-radius:999px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--k-berry);border:1px solid var(--k-berry);color:var(--k-ondark);font-weight:500;
  transition:background-color .18s ease-out,border-color .18s ease-out;
}
.tutor-sidebar-card form .tutor-btn:hover{background:var(--k-deep);border-color:var(--k-deep);color:var(--k-ondark)}
.tutor-sidebar-card .tutor-card-footer{background:transparent;border-top:1px solid var(--k-hair)}

/* tags -> chips */
.tutor-tag-list li a{border:1px solid var(--k-hair);border-radius:999px;padding:6px 16px;color:var(--k-ink);font-size:13.5px;transition:color .18s ease-out,border-color .18s ease-out}
.tutor-tag-list li a:hover{border-color:var(--k-berry);color:var(--k-berry)}
.tutor-course-details-widget-title{color:var(--k-ink)}

/* curriculum accordion */
.tutor-accordion-item{border:1px solid var(--k-hair);border-radius:12px;overflow:hidden;background:#fff}
.tutor-accordion-item + .tutor-accordion-item{margin-top:12px}
.tutor-accordion-item-header{background:#fff;color:var(--k-ink);font-family:"Amiri",serif;font-weight:400;font-size:19px}
.tutor-accordion-item-header.is-active{background:var(--k-rose)}
.tutor-course-content-list-item{border-top:1px solid var(--k-hair)}

@media (max-width:767px){
  /* .tutor-row uses -8px gutters; container needs >=8px padding each side or content bleeds off-viewport */
  .tutor-course-details-page{padding-inline:20px;padding-bottom:64px}
  .tutor-course-details-page .tutor-course-thumbnail img{aspect-ratio:4/3}
}
/* ==== kyom logo ==== */
.kyom-logo img{height:30px;width:auto;display:block}
.kyom-logo-ft img{height:34px;width:auto;display:block}
.kyom-logo,.kyom-logo-ft{width:auto;flex-shrink:0}
@media (max-width:767px){.kyom-logo img{height:24px}}


/* ==== kyom v4.5 punch-list ==== */

/* #7 arch: kill pink-arch breathe + container glow; draw the outline arch (SVG) like the flowers */
.kyom-art .arch{animation:none!important}
/* v5 Phase 3: arch-o outline restored — the v4.8 flatten had killed its border/bg here, hiding the
   offset berry-outline arch defined above (~L80). Base border + kyom-glow (L114, reduced-motion-safe
   via L116) now apply. arch-o was always a CSS-border outline, never an inline SVG path. */
.kyom-art .arch-o path{fill:none;stroke:rgb(142 46 94 / .34);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:kyomdraw-arch 2.4s ease-out .3s forwards}
@keyframes kyomdraw-arch{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.kyom-art .arch-o path{animation:none;stroke-dashoffset:0}}
@media (max-width:900px){
  .kyom-art{position:relative}
  .kyom-art .arch-o{display:block;position:absolute;inset-inline-end:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%);width:250px;height:300px}
}

/* #10 logo larger (subtitle removed) */
.kyom-logo img{height:44px}
@media (max-width:767px){.kyom-logo img{height:36px}}

/* #11 cart optical alignment with the login text */
.kyom-hact{align-items:center}
.kyom-hact .elementor-heading-title{margin:0;line-height:1}
.kyom-cart{display:inline-flex;align-items:center}
.kyom-cart svg{display:block}

/* #3 testimonials */
.kyom-testi>.e-con-inner>.elementor-widget-heading .elementor-heading-title,.kyom-testi .elementor-heading-title{text-align:center}
.kyom-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.kyom-testi-card{background:#fff;border:1px solid var(--k-hair);border-radius:var(--k-r);padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.kyom-testi-card blockquote{margin:0;font-family:"Amiri",serif;font-size:18px;line-height:1.75;color:var(--k-ink)}
.kyom-testi-card figcaption{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--k-hair);padding-top:14px}
.kyom-testi-card .n{font-weight:600;font-size:14px;color:var(--k-berry)}
.kyom-testi-card .r{font-size:12.5px;color:var(--k-muted)}
@media (max-width:900px){.kyom-testi-grid{grid-template-columns:1fr}}

/* #5 in-person: photo first on mobile */
@media (max-width:767px){.kyom-ist .e-con-inner>.e-con:has(.kyom-ph){order:-1}}

/* #6 contact: LTR phone (so + reads on the left) + centered intro paragraph */
.kyom-phone .elementor-icon-box-description{direction:ltr}
.page-id-246 .elementor-location-single .elementor-widget-text-editor,
.page-id-246 .elementor-location-single .elementor-widget-text-editor *,
.page-id-7639 .elementor-location-single .elementor-widget-text-editor,
.page-id-7639 .elementor-location-single .elementor-widget-text-editor *{text-align:center!important}

/* #4 contact submit: white label on the berry button */
.page-id-246 button[type=submit].elementor-button,.page-id-246 button[type=submit].elementor-button *,
.page-id-7639 button[type=submit].elementor-button,.page-id-7639 button[type=submit].elementor-button *{color:#fff!important;fill:#fff!important}

/* #4 blog cards: text overlays the image -> white on a bottom scrim (was dark/invisible) */
.page-id-28 .bdt-custom-overlay,.page-id-7661 .bdt-custom-overlay{
  background:linear-gradient(to top,rgb(34 26 31 / .9) 0%,rgb(34 26 31 / .55) 48%,rgb(34 26 31 / 0) 100%)!important;
  display:flex;flex-direction:column;justify-content:flex-end}
.page-id-28 .bdt-post-grid-title,.page-id-28 .bdt-post-grid-title a,
.page-id-7661 .bdt-post-grid-title,.page-id-7661 .bdt-post-grid-title a{color:#fff!important;font-size:16px!important;line-height:1.45!important}
.page-id-28 .bdt-post-grid-meta,.page-id-28 .bdt-post-grid-meta *,
.page-id-7661 .bdt-post-grid-meta,.page-id-7661 .bdt-post-grid-meta *{color:rgb(255 255 255 / .82)!important}

/* #8 blog mobile card spacing */
@media (max-width:767px){.page-id-28 .bdt-post-grid-item,.page-id-7661 .bdt-post-grid-item{margin-bottom:20px}}

/* #2 courses add-to-cart button smaller on mobile (post-type-archive-courses, tutor cards) */
@media (max-width:767px){
  .post-type-archive-courses .tutor-course-card .tutor-btn{font-size:13px!important;padding:8px 10px!important;line-height:1.3!important}
}

/* #12 calendly wider on desktop: its html-widget wrapper sits in a flex/align:center parent
   and shrinks to content (~300px). Force the wrapper full width so the embed fills it. */
.page-id-6618 .elementor-widget-html:has(.calendly-inline-widget){width:100%!important}
.page-id-6618 .calendly-inline-widget{width:100%!important;min-width:0!important}

/* #14 register: RTL-align Arabic fields (Arabic password was LTR-aligned) */
html[dir=rtl] .tutor-form-group input,html[dir=rtl] .tutor-frontend-dashboard input,
html[dir=rtl] .tutor-login-form-wrapper input{text-align:right}

/* #13a account (tutor login/register) vertical spacing to match other pages */
.page-id-2466 .tutor-wrap.tutor-page-wrap,.page-id-2467 .tutor-wrap.tutor-page-wrap{padding-block:64px}

/* #2 EN hero: meta (3 items) wrapped at <=900; compact it on tablet so the row holds */
@media (min-width:600px) and (max-width:1000px){
  html:not([dir=rtl]) .kyom-meta{font-size:11.5px}
  html:not([dir=rtl]) .kyom-meta span{padding-inline:9px}
}

/* __V45_TAIL__ */

/* ==== kyom v4.6 refinements ==== */

/* #1 hero arch: real logo image, larger, centered in the arch */
.kyom-art .arch-logo{width:64%;max-width:212px;height:auto;display:block}
@media (max-width:900px){.kyom-art .arch-logo{width:60%;max-width:152px}}

/* #2 hero motion: bigger, more graceful flower float + arch-o shimmer (pink arch stays still, per prior req) */
@media (prefers-reduced-motion: no-preference){
  @keyframes kyom-sway{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-14px) rotate(4.5deg)}}
  @keyframes kyom-float-s{0%,100%{transform:translateY(0) rotate(3deg) scale(1)}50%{transform:translateY(-11px) rotate(-3deg) scale(1.07)}}
  @keyframes kyom-archglow{0%,100%{opacity:.95}50%{opacity:.42}}
  .kyom-art .flower,.kyom-ph .flower{animation:kyomdraw 1.6s ease-out .4s forwards,kyom-sway 6.5s ease-in-out .8s infinite}
  .kyom-art .flower-s{animation:kyomdraw 1.6s ease-out .4s forwards,kyom-float-s 8s ease-in-out -2s infinite}
  .kyom-art .arch-o path{animation:kyomdraw-arch 2.4s ease-out .3s forwards,kyom-archglow 6s ease-in-out 3s infinite}
  /* soft rose halo breathing behind the arch — atmosphere without moving the arch itself */
  @keyframes kyom-halo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
  .kyom-art::before{
    content:"";position:absolute;inset-inline-end:-40px;bottom:-60px;width:440px;height:440px;
    border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgb(142 46 94 / .12),rgb(142 46 94 / .05) 45%,transparent 68%);
    animation:kyom-halo 7s ease-in-out infinite;
  }
  /* mobile: halo must not exceed .kyom-art's box (pseudo-elements widen scrollWidth silently) */
  @media (max-width:900px){.kyom-art::before{inset-inline-end:auto;left:50%;width:min(330px,100%);height:330px;bottom:-30px;transform:translateX(-50%);animation-name:kyom-halo-m}}
  @keyframes kyom-halo-m{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
}
@media (prefers-reduced-motion: reduce){.kyom-art::before{display:none}}

/* #3 courses cards mobile: stop the add-to-cart wrap; stack price over a full-width pill button */
@media (max-width:767px){
  .tutor-course-card .tutor-card-footer{display:flex;flex-direction:column;gap:10px;padding:12px 12px 14px}
  .tutor-course-card .tutor-card-footer>*{width:100%}
  .tutor-course-card .tutor-card-footer .tutor-btn{
    width:100%;white-space:nowrap;font-size:13px;padding:9px 8px;border-radius:999px;
  }
  .tutor-course-card .list-item-price{justify-content:flex-start;gap:8px;font-size:15px}
  .tutor-course-card .tutor-card-body{padding:14px 12px 4px}
  .tutor-course-name a{font-size:15px;line-height:1.45}
  /* breathing room between the 2-col cards */
  .tutor-courses{gap:16px 12px}
}

/* #4 footer mobile: link columns 2-up, ecosystem list 2-col grid — structural selectors so the EN twin matches */
@media (max-width:767px){
  .bdt-template-content-footer .e-con:has(> .elementor-widget-heading + .elementor-widget-icon-list){
    width:48%;--width:48%;
  }
  /* the ecosystem/socials column (6 items, contains the WhatsApp link): full row, list as 2-col grid */
  .bdt-template-content-footer .e-con:has(.elementor-icon-list-item a[href*="wa.me"]){width:100%;--width:100%}
  .bdt-template-content-footer .e-con:has(.elementor-icon-list-item a[href*="wa.me"]) .elementor-icon-list-items{
    display:grid;grid-template-columns:repeat(2,1fr);column-gap:18px;
  }
  .bdt-template-content-footer .elementor-icon-list-item{padding-block:4px}
  .bdt-template-content-footer .elementor-widget-heading .elementor-heading-title{margin-bottom:2px}
  /* footer vertical budget: desktop paddings/gaps leak to mobile (96/64 pad + 48 row-gap
     on the main row, 10px default padding per column) — tighten them */
  .bdt-template-content-footer .e-con:has(.elementor-widget-icon-list)>.e-con-inner{
    padding-top:48px;padding-bottom:36px;row-gap:28px;
  }
  .bdt-template-content-footer .e-con-inner>.e-con{padding-block:4px}
  /* decorative animations must never widen the page on phones (clip ≠ scroll container) */
  body{overflow-x:clip}
}

/* ==== kyom v4.7 ==== */
/* #2 account (Tutor login/register/dashboard) vertical spacing — structural, not page-id-scoped,
   so the English account pages (own page-ids) get the same breathing room as every other page. */
.tutor-wrap.tutor-page-wrap{padding-block:64px}
@media (max-width:767px){.tutor-wrap.tutor-page-wrap{padding-block:44px}}
/* #3 harden: Arabic Tutor form fields (incl. the password-strength input) stay right-aligned */
html[dir=rtl] .tutor-form-group input,html[dir=rtl] input.password-checker{text-align:right;direction:rtl}

/* ==== kyom v4.8 ==== */
/* ---- #3 Tutor login + registration → Kyom design system (scoped to auth wrappers) ---- */
/* card */
.tutor-login-wrap,#tutor-registration-form{
  background:#fff;border:1px solid var(--k-hair);border-radius:var(--k-r);box-shadow:var(--k-lift);
  padding:40px;max-width:540px;margin-inline:auto;
}
@media (max-width:767px){.tutor-login-wrap,#tutor-registration-form{padding:26px 20px}}
/* headings → Amiri ink */
.tutor-login-wrap .tutor-fs-heading,.tutor-login-wrap h2,.tutor-login-wrap h3,
#tutor-registration-form h2,#tutor-registration-form h3,.tutor-registration-page-title,
.tutor-wrap.tutor-page-wrap .tutor-color-black{font-family:"Amiri",serif!important;color:var(--k-ink)!important;font-weight:700}
/* labels + body */
.tutor-login-wrap label,#tutor-registration-form label,.tutor-form-group label{
  font-family:"IBM Plex Sans Arabic",sans-serif!important;color:var(--k-ink)!important;font-size:14px!important;margin-bottom:6px}
/* fields → rounded, hairline, berry focus */
.tutor-login-wrap input:not([type=checkbox]):not([type=submit]),
#tutor-registration-form input:not([type=checkbox]):not([type=submit]),.tutor-form-group input{
  border:1px solid var(--k-hair)!important;border-radius:var(--k-rim)!important;background:#fff!important;
  padding:12px 16px!important;min-height:48px!important;font-family:"IBM Plex Sans Arabic",sans-serif!important;
  font-size:15px!important;color:var(--k-ink)!important;box-shadow:none!important;}
.tutor-login-wrap input:focus,#tutor-registration-form input:focus,.tutor-form-group input:focus{
  border-color:var(--k-berry)!important;outline:none!important;box-shadow:none!important}
/* submit (.tutor-btn-primary) → solid berry pill; scoped so /courses/ add-to-cart .tutor-btn stays as-is */
.tutor-login-wrap .tutor-btn-primary,#tutor-registration-form .tutor-btn-primary,
.tutor-login-wrap button[type=submit],#tutor-registration-form button[type=submit]{
  background:var(--k-berry)!important;color:#fff!important;border:1px solid var(--k-berry)!important;border-radius:999px!important;
  padding:13px 34px!important;min-height:52px!important;font-family:"IBM Plex Sans Arabic",sans-serif!important;
  font-weight:500!important;font-size:15px!important;box-shadow:none!important;transition:background-color .18s ease-out!important}
.tutor-login-wrap .tutor-btn-primary:hover,#tutor-registration-form .tutor-btn-primary:hover,
.tutor-login-wrap button[type=submit]:hover,#tutor-registration-form button[type=submit]:hover{
  background:var(--k-deep)!important;border-color:var(--k-deep)!important}
/* ghost/link buttons (forgot password, register now) → plain berry text links, not pills */
.tutor-login-wrap .tutor-btn-ghost,.tutor-login-wrap .tutor-btn-link,
#tutor-registration-form .tutor-btn-ghost,#tutor-registration-form .tutor-btn-link{
  background:transparent!important;border:none!important;color:var(--k-berry)!important;border-radius:0!important;
  padding:0 4px!important;min-height:0!important;box-shadow:none!important;font-weight:500!important;width:auto!important}
/* links + accents berry */
.tutor-login-wrap a,#tutor-registration-form a,.tutor-wrap.tutor-page-wrap a{color:var(--k-berry)}
.tutor-login-wrap input[type=checkbox]:checked,#tutor-registration-form input[type=checkbox]:checked{accent-color:var(--k-berry)}
/* Arabic: every field (incl. the password-strength input) right-aligned so كلمة المرور matches */
html[dir=rtl] .tutor-login-wrap input,html[dir=rtl] #tutor-registration-form input,
html[dir=rtl] .tutor-form-group input,html[dir=rtl] input.password-checker{text-align:right!important;direction:rtl!important}
html[dir=rtl] .tutor-password-strength-checker .tutor-password-field{text-align:right!important;direction:rtl!important}

/* v5 Phase 2 — header auth label swaps with login state. WP prints body.logged-in server-side
   (LiteSpeed serves logged-in users uncached, so the class is accurate). k-auth-login / k-auth-dash
   are on the two header login-heading widgets (both link to /dashboard/). */
body.logged-in .k-auth-login{display:none}
body:not(.logged-in) .k-auth-dash{display:none}

/* v5 Phase 4 — CTA micro-interaction + staged hero entrance.
   Focus ring is ALWAYS on (accessibility, outside the motion guard). Hover-lift + entrance are motion,
   so they live inside prefers-reduced-motion:no-preference. Entrance is scoped to the two home pages
   (page-id-1046 AR / 7557 EN) and only to hookable elements, so no CTA can be hidden site-wide; reduced-motion
   users see everything at full opacity immediately. Animates transform/opacity only → no layout shift. */
.kyom-btn .elementor-button,.kyom-btn-o .elementor-button{transition:transform .15s ease-out,box-shadow .15s ease-out}
.kyom-btn .elementor-button:focus-visible,.kyom-btn-o .elementor-button:focus-visible{outline:2px solid var(--k-berry);outline-offset:3px}
@media (prefers-reduced-motion: no-preference){
  .kyom-btn .elementor-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgb(142 46 94 / .28)}
  .kyom-btn-o .elementor-button:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgb(142 46 94 / .16)}
  @keyframes kyom-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .page-id-1046 .kyom-btn,.page-id-7557 .kyom-btn{opacity:0;animation:kyom-rise .55s ease-out 1s forwards}
  .page-id-1046 .kyom-meta,.page-id-7557 .kyom-meta{opacity:0;animation:kyom-rise .55s ease-out 1.15s forwards}
}

/* v5 Phase 6 — WooCommerce buttons adopt the design system (were unstyled theme grey — e.g. the cart
   "return to shop" button). Base .button = outline pill (secondary); .alt/checkout/add-to-cart = filled
   berry pill (primary), mirroring Woo's own primary/secondary convention. Tokens only, no new hex. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce .wc-block-components-button{
  border-radius:999px;padding:.7em 1.8em;font-weight:600;line-height:1.2;
  background:transparent;color:var(--k-berry);border:1px solid rgb(142 46 94 / .28);
  transition:transform .15s ease-out,box-shadow .15s ease-out,background .15s ease-out;
}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:rgb(142 46 94 / .06)}
.woocommerce .button.alt,.woocommerce .checkout-button,.woocommerce button.single_add_to_cart_button,
.wc-proceed-to-checkout .checkout-button,.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button{
  background:var(--k-berry);color:var(--k-ondark);border-color:var(--k-berry)
}
.woocommerce .button.alt:hover,.woocommerce .checkout-button:hover,.woocommerce button.single_add_to_cart_button:hover{
  background:var(--k-deep);color:var(--k-ondark)
}
.woocommerce a.button:focus-visible,.woocommerce button.button:focus-visible,.woocommerce input.button:focus-visible{outline:2px solid var(--k-berry);outline-offset:3px}
@media (prefers-reduced-motion: no-preference){
  .woocommerce .button.alt:hover,.woocommerce .checkout-button:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgb(142 46 94 / .28)}
}
/* v6 — icon system */
.kyom-i{display:inline-block;vertical-align:-.18em;stroke-width:1.8}
.kyom-i-lead{margin-inline-end:.45em} /* logical property: flips for RTL */

/* v6 — flora draw-in: handled by the pre-existing .kyom-draw class on the visible
   <use> svgs (its stroke-dashoffset animation inherits into the injected flora).
   No extra rule needed — the injector only swaps geometry + viewBox. */

/* v6 — arch outline draw-in (issue 5). .arch-o is a CSS-bordered div (not an SVG
   stroke), so "draw-in" = a conic-gradient mask sweeping the border clockwise.
   Scoped to .kyom-art .arch-o to beat the existing kyom-glow rule on specificity;
   glow is preserved alongside the sweep. */
@property --k-arch-sweep { syntax: '<angle>'; inherits: false; initial-value: 360deg; }
@media (prefers-reduced-motion: no-preference){
  .kyom-art .arch-o{
    --k-arch-sweep: 0deg;
    -webkit-mask: conic-gradient(from 180deg, #000 var(--k-arch-sweep), transparent 0);
            mask: conic-gradient(from 180deg, #000 var(--k-arch-sweep), transparent 0);
    animation: k-arch-sweep 1.2s ease-out .3s forwards, kyom-glow 12s ease-in-out infinite;
  }
  @keyframes k-arch-sweep { to { --k-arch-sweep: 360deg; } }
}
/* initial-value:360deg → no-@property browsers + reduced-motion users get the full
   arch statically (no invisible-arch failure mode). */

/* v7 — Crafted Curriculum hero. The hero copy remains in Elementor; this only
   replaces the old decorative flora with one editorial art asset. The asset owns
   the double arch, berry accent, radial rays, and the intentional brush breakout,
   avoiding a fragile stack of CSS-drawn ornament. */
.page-id-1046 .kyom-art,.page-id-7557 .kyom-art{min-height:560px;isolation:isolate}
.page-id-1046 .kyom-art::before,.page-id-7557 .kyom-art::before{display:none}
.page-id-1046 .kyom-art .arch,.page-id-7557 .kyom-art .arch{
  inset-inline-end:0;bottom:0;width:min(440px,100%);height:560px;
  display:block;background:transparent;border-radius:0;overflow:visible;animation:none!important
}
.page-id-1046 .kyom-art .arch-o,.page-id-7557 .kyom-art .arch-o{display:none}
.kyom-hero-curriculum{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
/* The old floral SVGs remain in legacy page markup until its next dedicated data
   migration. They are hidden immediately so there is neither a flash nor any
   residual floral treatment on the home hero or Istanbul photo. */
.flower,.flower-s{display:none!important}
@media (prefers-reduced-motion:no-preference){
  @keyframes kyom-curriculum-enter{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes kyom-curriculum-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-5px,0) scale(1.012)}}
  .page-id-1046 .kyom-art,.page-id-7557 .kyom-art{opacity:0;animation:kyom-curriculum-enter .7s cubic-bezier(.2,.7,.2,1) .15s forwards}
  .page-id-1046 .kyom-hero-curriculum,.page-id-7557 .kyom-hero-curriculum{animation:kyom-curriculum-drift 11s ease-in-out 1s infinite}
}
@media (max-width:900px){
  .page-id-1046 .kyom-art,.page-id-7557 .kyom-art{min-height:0;padding-top:0}
  .page-id-1046 .kyom-art .arch,.page-id-7557 .kyom-art .arch{width:min(360px,100%);height:auto;aspect-ratio:4/5}
}

/* v6 — Istanbul section arch (issue 6): frame the in-person-training photo to match
   the hero/about arch language — arch-shaped photo + berry hairline outline with the
   same conic-mask draw-in. Scoped to the SPECIFIC Elementor image block (data-id
   21767b1) — NOT .kyom-rev, which is the generic scroll-reveal class on 40 elements. */
.elementor-element-21767b1{position:relative}
.elementor-element-21767b1 img{border-radius:999px 999px var(--k-r) var(--k-r)}
.elementor-element-21767b1::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  border:1px solid rgb(142 46 94 / .30);
  border-radius:999px 999px var(--k-r) var(--k-r);
}
@media (prefers-reduced-motion: no-preference){
  .elementor-element-21767b1::before{
    --k-arch-sweep:0deg;
    -webkit-mask: conic-gradient(from 180deg,#000 var(--k-arch-sweep),transparent 0);
            mask: conic-gradient(from 180deg,#000 var(--k-arch-sweep),transparent 0);
    animation:k-arch-sweep 1.2s ease-out .3s forwards;
  }
}

/* v6 — course single */
.tutor-course-details-page .tutor-btn-primary,
.tutor-course-details-page .tutor-btn.tutor-btn-primary{
  background:var(--k-berry);color:var(--k-ondark);border:0;border-radius:999px;
}
.tutor-course-details-page .tutor-btn-primary:hover{filter:brightness(1.08)}
.tutor-course-details-page .tutor-btn-outline,
.tutor-course-details-page .tutor-btn.tutor-btn-outline-primary,
.tutor-course-details-page .tutor_submit_review_btn{ /* audited: this one is off-token #CC3366 */
  background:transparent;color:var(--k-berry);border:1px solid var(--k-berry);border-radius:999px;
}
.tutor-course-details-page .tutor-btn:focus-visible{outline:2px solid var(--k-berry);outline-offset:2px}

/* 4.2 — kill dead header stars (reviews-tab .tutor-ratings untouched) */
.tutor-course-details-page .tutor-course-details-ratings .tutor-ratings{display:none}

/* 4.3 — meta row icons: broken Tutor glyph font replaced with masked Lucide icons.
   Mapped by icon class (position-independent) with a safe default, so ANY row Tutor
   emits (duration, students, lessons, language…) gets a real icon — never a solid
   square from an undefined mask var. Hide every tutor glyph in these rows, not just two. */
.tutor-course-details-page ul.tutor-ul li.tutor-d-flex [class*="tutor-icon-"]{display:none}
.tutor-course-details-page ul.tutor-ul li.tutor-d-flex{
  display:flex;align-items:center;gap:.5em;
  /* default = info circle on the LI so ::before inherits it; the :has() rules below
     override this per row. (Declaring the default on ::before would shadow the
     inherited mapped value and every row would show the fallback.) */
  --k-mi:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
}
.tutor-course-details-page ul.tutor-ul li.tutor-d-flex::before{
  content:"";width:18px;height:18px;flex:none;background:var(--k-berry);
  -webkit-mask:var(--k-mi) center/contain no-repeat;mask:var(--k-mi) center/contain no-repeat;
}
.tutor-course-details-page ul.tutor-ul li.tutor-d-flex:has(.tutor-icon-level){
  --k-mi:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m12 14 4-4'/><path d='M3.34 19a10 10 0 1 1 17.32 0'/></svg>");
}
.tutor-course-details-page ul.tutor-ul li.tutor-d-flex:has([class*="tutor-icon-clock"]){
  --k-mi:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>");
}
.tutor-course-details-page ul.tutor-ul li.tutor-course-certificate-meta,
.tutor-course-details-page ul.tutor-ul li.tutor-d-flex:has(.tutor-icon-ribbon-o){
  --k-mi:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='6'/><path d='M15.477 12.89 17 22l-5-3-5 3 1.523-9.12'/></svg>");
}

/* 4.4 — tags: pill list, section chrome removed (widget-tags scope only) */
/* the tags widget title (الوسوم) is a SIBLING of .tutor-course-details-widget-tags,
   both inside .tutor-course-details-widget — scope the hide to that widget only. */
.tutor-course-details-page .tutor-course-details-widget:has(.tutor-course-details-widget-tags) .tutor-course-details-widget-title{display:none}
.tutor-course-details-page .tutor-tag-list li a{
  display:inline-block;padding:.3em .9em;border:1px solid var(--k-berry);border-radius:999px;
  color:var(--k-berry);font-size:.85em;text-decoration:none;margin-inline-end:.4em;margin-block-end:.4em;
}
.tutor-course-details-page .tutor-tag-list li a:hover{background:var(--k-berry);color:var(--k-ondark)}

/* 4.5 — description clamp: real mask fade + styled toggle (toggle selector UNVERIFIED, see report) */
.tutor-course-details-page .tutor-toggle-more-content.tutor-toggle-more-collapsed{
  -webkit-mask:linear-gradient(to top, transparent 0, #000 56px);
          mask:linear-gradient(to top, transparent 0, #000 56px);
}
.tutor-course-details-page .tutor-toggle-more-content::after{display:none} /* kill theme white gradient if any */
.tutor-course-details-page .tutor-toggle-btn,
.tutor-course-details-page [data-tutor-toggle-more]{
  background:none;border:0;color:var(--k-berry);font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35em;
}
.tutor-course-details-page .tutor-toggle-btn::after,
.tutor-course-details-page [data-tutor-toggle-more]::after{
  content:"";width:16px;height:16px;background:var(--k-berry);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;
  transition:transform .25s ease;
}
.tutor-course-details-page .tutor-toggle-btn[aria-expanded="true"]::after,
.tutor-course-details-page [data-tutor-toggle-more][aria-expanded="true"]::after{transform:rotate(180deg)}

/* 4.7 — add-review button: routed through the outline-pill selector list above
   (.tutor_submit_review_btn) for visual consistency with 4.1; .write-course-review-link-btn
   left untouched (currently white-on-berry, acceptable per audit). */

/* v6 — dashboard */
.tutor-dashboard{background:var(--k-paper)}
.tutor-dashboard .tutor-card,.tutor-dashboard .tutor-course-card{
  border-radius:var(--k-r);border:1px solid var(--k-hair);background:#fff;box-shadow:none}
.tutor-dashboard .tutor-btn-primary,.tutor-dashboard .tutor-btn.tutor-btn-primary{
  background:var(--k-berry);color:var(--k-ondark);border:0;border-radius:999px}
.tutor-dashboard .tutor-btn-outline,.tutor-dashboard .tutor-btn.tutor-btn-outline-primary{
  background:transparent;color:var(--k-berry);border:1px solid var(--k-berry);border-radius:999px}
/* default/unclassed .tutor-btn (audited: deep-purple #621244 / pink #CC3366 off-token fills) */
.tutor-dashboard .tutor-btn:not(.tutor-btn-primary):not(.tutor-btn-outline):not(.tutor-btn-outline-primary){
  background:var(--k-berry);color:var(--k-ondark);border:0;border-radius:999px}
.tutor-dashboard .tutor-btn-sm{padding:6px 16px;font-size:13px}
.tutor-dashboard .tutor-btn:hover{filter:brightness(1.08)}
.tutor-dashboard .tutor-dashboard-left-menu a{border-radius:var(--k-rim)}
.tutor-dashboard .tutor-dashboard-left-menu li.active a,
.tutor-dashboard .tutor-dashboard-left-menu a:hover{color:var(--k-berry)}
.tutor-dashboard input,.tutor-dashboard select,.tutor-dashboard textarea{border-radius:var(--k-rim);border:1px solid var(--k-hair)}
@media (max-width:767px){
  .tutor-dashboard .tutor-dashboard-left-menu{margin-block-end:1rem}
  .tutor-dashboard{padding-inline:12px}
}

/* v6.1 — dashboard palette + iconic buttons + notification dropdown.
   Root cause: Tutor's palette vars ship off-token — primary #621244 (not berry)
   and a stray BLUE primary-hover #8fafc4 that flashes on any primary hover. Re-token
   to Kyom berry inside Tutor's own var scopes so every variable-driven control aligns
   in one place. The offcanvas is a <body>-level sibling of .tutor-dashboard, so it
   needs its OWN scope for the vars to reach the notification panel. */
.tutor-dashboard,
.tutor-offcanvas{
  --tutor-color-primary:var(--k-berry);
  --tutor-color-primary-hover:var(--k-deep);
  --tutor-color-secondary:var(--k-deep);
}
/* iconic buttons (notification bell + offcanvas close) hardcode #CC3366, bypassing the
   var — re-token directly and center the glyph (default baseline align sits it off). */
.tutor-iconic-btn-secondary,
.tutor-offcanvas .tutor-iconic-btn{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--k-berry);border:1px solid var(--k-hair);border-radius:var(--k-rim);background:transparent;
}
.tutor-iconic-btn-secondary:hover,
.tutor-iconic-btn-secondary:focus-visible,
.tutor-offcanvas .tutor-iconic-btn:hover,
.tutor-offcanvas .tutor-iconic-btn:focus-visible{
  color:var(--k-ondark);background:var(--k-berry);border-color:var(--k-berry);
}
/* notification popup: Tutor's near-black dark dropdown clashes with the light theme */
.tutor-dashboard .tutor-dropdown-dark,
.tutor-offcanvas .tutor-dropdown-dark{
  background:#fff;border:1px solid var(--k-hair);box-shadow:var(--k-lift,0 16px 40px rgb(74 21 49 / .08))}
.tutor-dashboard .tutor-dropdown-dark .tutor-dropdown-item,
.tutor-offcanvas .tutor-dropdown-dark .tutor-dropdown-item{color:var(--k-ink)}
.tutor-dashboard .tutor-dropdown-dark .tutor-dropdown-item:hover,
.tutor-offcanvas .tutor-dropdown-dark .tutor-dropdown-item:hover{background:var(--k-rose);color:var(--k-berry)}
/* offcanvas header title uses the same off-token primary — inherit berry from the var above */
.tutor-offcanvas .tutor-offcanvas-header{border-block-end:1px solid var(--k-hair)}

/* v6 — issue 1/2: suppress Tutor Pro's browser-push opt-in banner (tutor-notifications addon).
   It auto-shows on load and covers content (esp. mobile). Louay approved 2026-07-18: hide the
   auto-prompt (keeps the addon/in-app notifications; browser-push opt-in no longer offered). */
#tutor-pn-permission{display:none!important}

/* v8 — mobile-surface remediation. These rules use the live Tutor and Elementor
   contracts captured on stage, rather than styling lookalike elements globally. */

/* Homepage: the asset's paper corner is #FCF9F4. Keep its field continuous from
   the copy through the art, while leaving every other page on the normal paper. */
body.page-id-1046,body.page-id-7557,
.page-id-1046 .elementor-location-single,.page-id-7557 .elementor-location-single{background:#FAF4F0}
.page-id-1046 .kyom-art,.page-id-7557 .kyom-art{--k-hero-paper:#FAF4F0;background:var(--k-hero-paper)}
@media (max-width:900px){
  .page-id-1046 .kyom-art,.page-id-7557 .kyom-art{margin-block-start:12px}
  .page-id-1046 .kyom-art .arch,.page-id-7557 .kyom-art .arch{width:min(420px,calc(100vw - 40px))}
}

/* Course archive: equal card anatomy makes the price and action land on one line. */
.post-type-archive-courses .tutor-course-list.tutor-grid{align-items:stretch}
.post-type-archive-courses .tutor-course-card{display:flex;flex-direction:column;height:100%;min-width:0}
.post-type-archive-courses .tutor-course-card .tutor-card-image-top{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.post-type-archive-courses .tutor-course-card .tutor-card-body{display:flex;flex:1 1 auto;flex-direction:column;gap:14px;min-width:0;padding:20px}
.post-type-archive-courses .tutor-course-card .tutor-course-name{min-height:4.5em}
.post-type-archive-courses .tutor-course-card .tutor-course-name a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.post-type-archive-courses .tutor-course-card .tutor-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;min-height:68px;padding:14px 20px}
.post-type-archive-courses .tutor-course-card .tutor-btn-outline-primary{min-height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
@media (max-width:640px){
  .post-type-archive-courses .tutor-course-list.tutor-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .post-type-archive-courses .tutor-course-card .tutor-card-body{padding:18px}
  .post-type-archive-courses .tutor-course-card .tutor-course-name{min-height:0}
  .post-type-archive-courses .tutor-course-card .tutor-course-name a{font-size:16px;line-height:1.45}
  .post-type-archive-courses .tutor-course-card .tutor-card-footer{align-items:stretch;flex-direction:column;min-height:0;padding:12px 14px 14px}
  .post-type-archive-courses .tutor-course-card .tutor-btn-outline-primary{width:100%}
}
@media (max-width:359px){.post-type-archive-courses .tutor-course-list.tutor-grid{grid-template-columns:minmax(0,1fr)}}

/* Course detail: establish a compact, readable purchase hierarchy rather than
   letting Tutor's default rows float independently. */
.tutor-course-details-page{padding-block:28px 96px}
.tutor-course-details-page .tutor-course-details-title{line-height:1.2;margin-block:0 16px}
.tutor-course-details-page .tutor-course-details-info{margin-block-end:24px}
.tutor-course-details-page ul.tutor-ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:20px 0;padding:0}
.tutor-course-details-page ul.tutor-ul li.tutor-d-flex{min-width:0;margin:0;padding:10px 12px;border:1px solid var(--k-hair);border-radius:var(--k-rim);background:var(--k-paper)}
.tutor-course-details-page .tutor-sidebar-card{position:relative}
.tutor-course-details-page .tutor-sidebar-card .tutor-card-body{padding:24px}
.tutor-course-details-page .tutor-sidebar-card .tutor-btn{min-height:52px}
.tutor-course-details-page .tutor-course-details-widget{margin-block:28px}
.tutor-course-details-page .tutor-tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tutor-course-details-page .tutor-tag-list li{margin:0}
.tutor-course-details-page .tutor-tag-list li a{display:inline-flex;align-items:center;min-height:36px;margin:0}
.tutor-course-details-page .tutor-accordion-item-header{min-height:56px;padding:16px 18px;display:flex;align-items:center}
@media (max-width:767px){
  .tutor-course-details-page{padding-block:20px 64px}
  .tutor-course-details-page ul.tutor-ul{grid-template-columns:minmax(0,1fr);gap:8px}
  .tutor-course-details-page .tutor-sidebar-card .tutor-card-body{padding:20px}
}

/* Dashboard: Tutor's sidebar becomes an intentional menu strip on mobile and
   retains a stable touch target at every breakpoint. */
.tutor-dashboard{padding:32px;min-width:0}
.tutor-dashboard .tutor-dashboard-left-menu{border:1px solid var(--k-hair);border-radius:var(--k-r);background:#fff;padding:8px}
.tutor-dashboard .tutor-dashboard-left-menu a{display:flex;align-items:center;min-height:44px;padding:10px 12px;color:var(--k-ink)}
.tutor-dashboard .tutor-dashboard-left-menu li.active a{background:var(--k-rose);color:var(--k-berry);font-weight:600}
.tutor-dashboard .tutor-card,.tutor-dashboard .tutor-course-card{min-width:0;overflow:hidden}
@media (max-width:767px){
  .tutor-dashboard{padding:20px 16px}
  .tutor-dashboard .tutor-dashboard-left-menu{display:block;overflow:visible;margin:0;padding:8px}
  .tutor-dashboard .tutor-dashboard-left-menu li{display:block}
  .tutor-dashboard .tutor-dashboard-left-menu a{white-space:normal}
}

/* Blog: target the captured title widget only; no generic heading reset. */
.page-id-28 .elementor-element-6fe07a2,.page-id-7661 .elementor-element-6fe07a2{background:transparent!important;padding-block:24px 12px}
.page-id-28 .elementor-element-6fe07a2 .elementor-heading-title,.page-id-7661 .elementor-element-6fe07a2 .elementor-heading-title{background:transparent!important;color:var(--k-ink)}
.page-id-28 .elementor-element-db0ae56,.page-id-7661 .elementor-element-db0ae56,
.page-id-28 .elementor-element-db0ae56:has(.elementor-element-6fe07a2),.page-id-7661 .elementor-element-db0ae56:has(.elementor-element-6fe07a2){background:transparent!important}
.page-id-28 .bdt-post-grid-image,.page-id-7661 .bdt-post-grid-image{aspect-ratio:4/3}
.page-id-28 .bdt-post-grid-image img,.page-id-7661 .bdt-post-grid-image img{width:100%;height:100%;object-fit:cover}

/* ==== kyom v9 — course detail and dashboard interaction repair ==== */
/* Tutor already supplies the expansion glyph. The previous decorative pseudo-icon
   duplicated it, while the reference tooltip was being mistaken for a second control. */
.tutor-course-details-page .tutor-toggle-more-content.tutor-toggle-more-collapsed{
  -webkit-mask:none!important;mask:none!important;
}
.tutor-course-details-page .tutor-toggle-btn::after,
.tutor-course-details-page [data-tutor-toggle-more]::after{content:none!important;display:none!important}
.tutor-course-details-page .tutor-accordion-item-header .tooltip-wrap.tooltip-icon{display:none!important}

/* Keep utility copy legible in the sans face; reserve the editorial face for headings. */
.tutor-course-details-page .tutor-course-details-content,
.tutor-course-details-page .tutor-course-details-content .tutor-fs-6,
.tutor-course-details-page .tutor-course-details-content p,
.tutor-course-details-page .tutor-course-details-content li,
.tutor-course-details-page .tutor-course-content-list-item-title,
.tutor-course-details-page .tutor-course-details-info,
.tutor-course-details-page .tutor-course-details-actions{
  font-family:"IBM Plex Sans Arabic",sans-serif!important;font-weight:400;
}
.tutor-course-details-page .tutor-course-details-content{max-height:none!important;height:auto!important;overflow:visible!important;color:var(--k-ink);font-size:16px;line-height:1.95}
.tutor-course-details-page .tutor-course-details-content p{margin-block:0 14px;line-height:1.95}
.tutor-course-details-page .tutor-course-details-content h2,
.tutor-course-details-page .tutor-course-details-tab h2,
.tutor-course-details-page .tutor-course-details-tab h3,
.tutor-course-details-page .tutor-course-content-title{font-family:"Amiri",serif!important;font-weight:700}

/* Category and save/share actions are one deliberate metadata row, including on RTL mobile. */
.tutor-course-details-page .tutor-course-details-top .tutor-row{align-items:center;row-gap:12px}
.tutor-course-details-page .tutor-course-details-info{margin:0!important;line-height:1.7}
.tutor-course-details-page .tutor-course-details-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0!important}
.tutor-course-details-page .tutor-course-details-actions .tutor-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:40px!important;margin:0!important;padding:8px 4px!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;color:var(--k-berry)!important;white-space:nowrap!important}
.tutor-course-details-page .tutor-course-details-actions [class*="tutor-mr-"]{margin-right:0!important;margin-inline-end:6px!important}
@media (max-width:767px){
  .tutor-course-details-page .tutor-course-details-top .tutor-col,
  .tutor-course-details-page .tutor-course-details-top .tutor-col-auto{flex:0 0 100%;max-width:100%}
  .tutor-course-details-page .tutor-course-details-actions{justify-content:flex-start}
}

/* Tutor's stock click handler scrolls the page before showing the menu. On phones,
   present it as a compact, fixed sheet; kyom-art.js owns the no-scroll toggle. */
@media (max-width:767px){
  .tutor-dashboard .tutor-dashboard-left-menu{display:none!important;position:fixed;inset:auto 12px calc(76px + env(safe-area-inset-bottom)) 12px;z-index:9998;max-height:min(70dvh,560px);overflow:auto;margin:0!important;padding:8px!important;border:1px solid var(--k-hair);border-radius:20px;background:#fff;box-shadow:0 18px 46px rgb(74 21 49 / .20)}
  .tutor-dashboard.is-sidebar-expanded .tutor-dashboard-left-menu{display:block!important;animation:kyom-dashboard-sheet-in .2s ease-out both}
  .tutor-dashboard .tutor-dashboard-permalinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0!important;padding:0!important;list-style:none}
  .tutor-dashboard .tutor-dashboard-menu-item{margin:0!important;min-width:0}
  .tutor-dashboard .tutor-dashboard-menu-item-link{display:flex!important;align-items:center!important;gap:9px;min-height:48px!important;padding:10px 12px!important;border-radius:12px!important;color:var(--k-ink)!important;white-space:normal!important}
  .tutor-dashboard .tutor-dashboard-menu-item-icon{flex:0 0 22px;color:var(--k-berry)!important;font-size:20px!important}
  .tutor-dashboard .tutor-dashboard-menu-item-text{margin:0!important;min-width:0;overflow-wrap:anywhere}
  .tutor-dashboard .tutor-dashboard-menu-item.active a{background:var(--k-berry)!important;color:#fff!important}
  .tutor-dashboard .tutor-dashboard-menu-item.active .tutor-dashboard-menu-item-icon{color:#fff!important}
  .tutor-dashboard .tutor-dashboard-menu-divider{grid-column:1/-1;margin:4px 0!important;border-color:var(--k-hair)}
  .tutor-dashboard .tutor-dashboard-menu-divider-header{grid-column:1/-1;padding:10px 12px 2px;color:var(--k-muted);font-size:13px}
}
@keyframes kyom-dashboard-sheet-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Tutor's script uses the collapsed class as its source of truth. Keep its
   200px preview height, but without the previous mask that faded real text. */
.tutor-course-details-page .tutor-toggle-more-content.tutor-toggle-more-collapsed{height:200px!important;max-height:none!important;overflow:hidden!important}
.tutor-course-details-page .tutor-toggle-more-content:not(.tutor-toggle-more-collapsed){height:auto!important;overflow:visible!important}

/* Motion: editorial entrance and a slow, elegant art drift. It is deliberately
   subtle—movement supports the premium imagery instead of competing with it. */
@media (prefers-reduced-motion:no-preference){
  @keyframes kyom-hero-copy-in{from{opacity:0;transform:translate3d(0,18px,0);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
  @keyframes kyom-hero-cta-settle{0%{box-shadow:0 0 0 0 rgb(142 46 94 / .20)}55%{box-shadow:0 0 0 12px rgb(142 46 94 / 0)}100%{box-shadow:0 0 0 0 rgb(142 46 94 / 0)}}
  @keyframes kyom-hero-art-float{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-8px,0) rotate(.25deg)}}
  .page-id-1046 .kyom-hero-copy>.elementor-element,.page-id-7557 .kyom-hero-copy>.elementor-element{opacity:0;animation:kyom-hero-copy-in .72s cubic-bezier(.2,.75,.25,1) forwards}
  .page-id-1046 .kyom-hero-copy>.elementor-element:nth-child(1),.page-id-7557 .kyom-hero-copy>.elementor-element:nth-child(1){animation-delay:.10s}
  .page-id-1046 .kyom-hero-copy>.elementor-element:nth-child(2),.page-id-7557 .kyom-hero-copy>.elementor-element:nth-child(2){animation-delay:.20s}
  .page-id-1046 .kyom-hero-copy>.elementor-element:nth-child(3),.page-id-7557 .kyom-hero-copy>.elementor-element:nth-child(3){animation-delay:.30s}
  .page-id-1046 .kyom-hero-copy>.elementor-element:nth-child(4),.page-id-7557 .kyom-hero-copy>.elementor-element:nth-child(4){animation-delay:.40s}
  .page-id-1046 .kyom-home-hero .kyom-btn .elementor-button,.page-id-7557 .kyom-home-hero .kyom-btn .elementor-button{animation:kyom-hero-cta-settle 1.5s ease-out 1.1s both}
  .page-id-1046 .kyom-hero-curriculum,.page-id-7557 .kyom-hero-curriculum{animation:kyom-hero-art-float 9s ease-in-out 1s infinite}
}

/* ==== kyom v11 — shell parity and compact mobile support ==== */
.kyom-account{display:inline-flex;align-items:center;justify-content:center;padding:4px;color:var(--k-ink,#221A1F);text-decoration:none}
.kyom-account:hover,.kyom-account:focus-visible{color:var(--k-berry,#8E2E5E)}
.kyom-account svg{display:block;stroke:currentColor}

body.page-id-246 .elementor-form .elementor-button[type=submit],
body.page-id-7639 .elementor-form .elementor-button[type=submit]{
	background:var(--k-berry,#8E2E5E)!important;
	border-color:var(--k-berry,#8E2E5E)!important;
	color:#fff!important;
}
body.page-id-246 .elementor-form .elementor-button[type=submit] *,
body.page-id-7639 .elementor-form .elementor-button[type=submit] *{color:#fff!important;fill:#fff!important}

@media (max-width:767px){
	.wa__btn_popup_txt{display:none!important}
}

/* ==== kyom v10 — course archive mobile: stack card action, scroll filter pills, drop empty stars ==== */
/* Q1: the real price+button row is Tutor's inner div, not .tutor-card-footer (which has a single child),
   so earlier .tutor-card-footer{flex-direction:column} rules never stacked. Target the inner row. */
@media (max-width:640px){
  .post-type-archive-courses .tutor-course-card .tutor-card-footer>div.tutor-d-flex{
    flex-direction:column;align-items:stretch;gap:8px;
  }
  .post-type-archive-courses .tutor-course-card .list-item-price{
    font-size:16px;font-weight:600;color:var(--k-ink);
  }
  .post-type-archive-courses .tutor-course-card .list-item-button,
  .post-type-archive-courses .tutor-course-card .list-item-button a.tutor-btn{
    width:100%;font-size:14px;
  }
}
/* Q2: track filter pills — single scrolling row on mobile instead of wrapping to two lines.
   Native overflow respects dir=rtl scroll direction; mask uses physical 'to left' for the RTL leading edge. */
@media (max-width:767px){
  .kyom-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-inline:16px; /* inner inset only — no negative-margin bleed: .kyom-arch-head has 0 pad, so a bleed overflowed the viewport (border-box keeps padding inside width) */
    mask-image:linear-gradient(to left,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
  }
  .kyom-tabs::-webkit-scrollbar{display:none}
  .kyom-tabs a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}
/* Q3: every archive card shows 5 empty outline stars (0 reviews site-wide) — pure negative trust signal.
   Scoped to archive cards only; the course-detail reviews tab (line ~703) is untouched. */
.post-type-archive-courses .tutor-course-card .tutor-course-ratings{display:none}