/* =========================================================
   Oksana Miller — Natural Craft Studio
   First visual template: masthead, nav, hero+route, test video shelf, welcome block
   Palette revision: warm, noble cappuccino / beige / coffee — no lavender, no cool tones.
========================================================= */
:root{
  /* --- surfaces --- */
  --page-bg:#F3E7D8;        /* light cappuccino wash behind the section cards */
  --milk:#FBF6EF;           /* warm clean card surface */
  --cappuccino-light:#EADCC5; /* alternate card surface, a shade deeper than page-bg */

  /* --- warm beige/coffee scale --- */
  --beige-soft:#E2CBA5;      /* soft fills, hover backgrounds, dividers */
  --beige-mid:#C9A876;       /* icons, decorative accents, borders — large elements only */
  --coffee:#A5825A;          /* secondary interactive color, large text */
  --coffee-deep:#6B4E30;     /* primary fill — buttons, active nav pill (AA safe w/ white text) */
  --coffee-deep-hover:#5A4026;

  /* --- neutrals --- */
  --cream-fallback:#EDE1CE;  /* warm fallback surface (was a cool sage) */
  --ink:#3A2E22;
  --text-secondary:#6B5A47;
  --border-hairline:#E6D5BC;

  --font-heading:Arial, Helvetica, sans-serif;
  --font-body:Arial, Helvetica, sans-serif;
  --font-wordmark:'Chonburi', 'Times New Roman', serif;
  --handwritten-font:"Gveret Levin", cursive; /* reserved for already-established handwritten/script accents — never used for regular copy */
  --wordmark-color:#9C7F54; /* noble beige, deliberately close-in-tone to page-bg but readable */

  --radius:16px;
  --radius-lg:28px;
  --container-w:1280px;
  --ease:cubic-bezier(.25,.1,.25,1);

  --shadow-soft:0 20px 46px -30px rgba(107,78,48,0.28), 0 4px 12px -6px rgba(107,78,48,0.13);
  --shadow-pill:0 1px 0 rgba(255,255,255,0.85) inset, 0 8px 16px -10px rgba(107,78,48,0.28), 0 2px 5px -2px rgba(107,78,48,0.15);
  --shadow-pill-hover:0 1px 0 rgba(255,255,255,0.85) inset, 0 14px 24px -12px rgba(107,78,48,0.36), 0 4px 8px -3px rgba(107,78,48,0.2);
}

/* =========================================================
   Reset
========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}
body{
  margin:0;
  width:100%;
  background:var(--page-bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;min-width:0;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
h1,h2,h3{
  font-family:var(--font-heading);
  font-weight:500;
  margin:0 0 .4em;
  color:var(--ink);
}

/* Utility for the site's already-established handwritten/script accents
   (logo-adjacent hero titles etc.) — the selectors that already used
   "Gveret Levin" directly now reference this same variable instead, so
   the one reserved handwritten typeface is defined in exactly one place.
   Regular copy (paragraphs, lists, menus, buttons, prices, captions)
   must never use this class or variable. */
.handwritten{
  font-family:var(--handwritten-font);
}
p{margin:0 0 1em;color:var(--ink);}

/* Visible focus for keyboard users everywhere */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--coffee-deep);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute;
  right:12px;
  top:-60px;
  background:var(--coffee-deep);
  color:var(--milk);
  padding:12px 20px;
  border-radius:var(--radius);
  font-size:14px;
  z-index:2000;
  transition:top .2s ease;
}
.skip-link:focus{top:12px;}

.eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--coffee-deep);
  margin-bottom:10px;
}

/* =========================================================
   Buttons — min 48px tall, single fill color per brief
========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 26px;
  border-radius:14px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.01em;
  border:1.5px solid var(--coffee-deep);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.btn--solid{
  background:var(--coffee-deep);
  color:var(--milk);
  box-shadow:0 10px 22px -12px rgba(107,78,48,0.5);
}
.btn--solid:hover{background:var(--coffee-deep-hover);transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(107,78,48,0.55);}
.btn--outline{
  background:var(--milk);
  color:var(--coffee-deep);
}
.btn--outline:hover{background:var(--coffee-deep);color:var(--milk);transform:translateY(-2px);}
.btn--card{width:100%;min-height:48px;font-size:14px;padding:10px 16px;}
.btn--xl{padding:16px 34px;font-size:16px;}
.hero-actions{margin-top:28px;}

.icon-whatsapp{
  width:16px;height:16px;display:inline-block;flex:none;
  background:#3FA372;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.001 3C9.373 3 4 8.373 4 15c0 2.386.7 4.61 1.902 6.478L4 29l7.73-1.868A11.94 11.94 0 0 0 16.001 27C22.63 27 28 21.627 28 15S22.63 3 16.001 3zm7.03 17.144c-.297.836-1.47 1.53-2.404 1.727-.638.135-1.472.243-4.28-.918-3.594-1.487-5.906-5.13-6.087-5.37-.178-.24-1.455-1.94-1.455-3.7 0-1.76.918-2.625 1.246-2.984.328-.36.717-.45.956-.45.239 0 .478.002.687.013.22.012.517-.083.808.617.297.716 1.01 2.478 1.098 2.658.09.18.15.39.03.63-.12.24-.18.39-.36.6-.18.21-.378.468-.54.63-.18.18-.368.375-.158.735.21.36.933 1.54 2.005 2.494 1.377 1.226 2.538 1.605 2.898 1.785.36.18.57.15.78-.09.21-.24.9-1.05 1.14-1.41.24-.36.48-.3.81-.18.33.12 2.09.986 2.45 1.166.36.18.6.27.69.42.09.15.09.87-.207 1.706z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.001 3C9.373 3 4 8.373 4 15c0 2.386.7 4.61 1.902 6.478L4 29l7.73-1.868A11.94 11.94 0 0 0 16.001 27C22.63 27 28 21.627 28 15S22.63 3 16.001 3zm7.03 17.144c-.297.836-1.47 1.53-2.404 1.727-.638.135-1.472.243-4.28-.918-3.594-1.487-5.906-5.13-6.087-5.37-.178-.24-1.455-1.94-1.455-3.7 0-1.76.918-2.625 1.246-2.984.328-.36.717-.45.956-.45.239 0 .478.002.687.013.22.012.517-.083.808.617.297.716 1.01 2.478 1.098 2.658.09.18.15.39.03.63-.12.24-.18.39-.36.6-.18.21-.378.468-.54.63-.18.18-.368.375-.158.735.21.36.933 1.54 2.005 2.494 1.377 1.226 2.538 1.605 2.898 1.785.36.18.57.15.78-.09.21-.24.9-1.05 1.14-1.41.24-.36.48-.3.81-.18.33.12 2.09.986 2.45 1.166.36.18.6.27.69.42.09.15.09.87-.207 1.706z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---- Social icons — inline, monochrome versions of the same glyphs,
   used at the end of the welcome-block closing line further down
   this file (see .welcome__social). The colored masthead version of
   these icons was removed; social links now live in that one place
   only, so they aren't duplicated across the homepage. ---- */

/* =========================================================
   Masthead — round mark shifted left, wordmark stretched into
   one justified line that spans the rest of the field (no
   empty space at either end). dir="ltr": English brand lockup,
   independent of the page's own RTL flow.
========================================================= */
.masthead{
  background:var(--milk);
  display:flex;
  justify-content:center;
  padding:30px 16px;
}
.masthead__inner{
  width:100%;
  max-width:var(--container-w);
  display:flex;
  justify-content:center;
  direction:ltr;
}
.masthead__logo-link{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  gap:32px;
  padding:32px 88px;
  width:100%;
  max-width:920px;
  border:1.5px solid var(--beige-mid);
  border-radius:32px;
  background:linear-gradient(180deg,#FFFFFF,var(--milk));
  box-shadow:var(--shadow-pill), 0 22px 40px -28px rgba(107,78,48,0.35);
  transition:box-shadow .25s ease, transform .25s ease;
}
.masthead__logo-link:hover{
  box-shadow:var(--shadow-pill-hover), 0 26px 46px -26px rgba(107,78,48,0.4);
  transform:translateY(-2px);
}
.masthead__mark{
  flex:none;
  align-self:center;
  width:150px;
  height:150px;
  display:block;
}
.masthead__mark-img{width:100%;height:100%;object-fit:contain;}

/* one line: "Oksana Miller" and "DESIGN STUDIO" share the same size
   and sit close together, joined by a small dot separator. */
.masthead__wordline{
  display:flex;
  align-items:center;
  gap:26px;
  white-space:nowrap;
}
.masthead__name,
.masthead__sub{
  font-family:var(--font-wordmark);
  font-weight:400;
  line-height:1;
  color:var(--wordmark-color);
}
.masthead__name{
  font-size:clamp(34px,3.6vw,48px);
  letter-spacing:.03em;
}
.masthead__sub{
  font-size:clamp(14px,1.4vw,18px);
  letter-spacing:.16em;
  text-transform:uppercase;
  position:relative;
  padding-inline-start:32px;
  align-self:center;
}
.masthead__sub::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:50%;
  transform:translateY(-50%);
  width:9px;height:9px;
  border-radius:50%;
  background:var(--wordmark-color);
  opacity:.55;
}

@media (max-width:1024px){
  .masthead{padding:26px 16px;}
  .masthead__logo-link{gap:22px;padding:22px 40px;border-radius:24px;max-width:680px;}
  .masthead__mark{width:104px;height:104px;}
  .masthead__name{font-size:30px;}
  .masthead__sub{font-size:12px;padding-inline-start:22px;}
  .masthead__sub::before{width:7px;height:7px;}
}
@media (max-width:600px){
  .masthead{padding:20px 16px;}
  .masthead__logo-link{gap:12px;padding:16px 20px;border-radius:18px;}
  .masthead__mark{width:60px;height:60px;}
  .masthead__wordline{gap:8px;flex-wrap:wrap;}
  .masthead__name{font-size:18px;}
  .masthead__sub{font-size:8.5px;padding-inline-start:12px;}
  .masthead__sub::before{width:4px;height:4px;}
}

/* =========================================================
   Navigation — soft raised pill buttons
========================================================= */
.site-nav{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(251,246,239,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-hairline);
  transition:box-shadow .2s ease;
}
.site-nav.is-scrolled{box-shadow:0 6px 18px -16px rgba(107,78,48,0.32);}
.site-nav__inner{
  max-width:var(--container-w);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  position:relative;
}

.nav__list{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
.nav__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:500;
  color:var(--ink);
  padding:12px 22px;
  border-radius:14px;
  background:linear-gradient(180deg,#FFFFFF,#FAF1E4);
  box-shadow:var(--shadow-pill);
  transition:color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nav__link:hover{
  color:var(--coffee-deep);
  background:linear-gradient(180deg,#FFFFFF,var(--cappuccino-light));
  box-shadow:var(--shadow-pill-hover);
  transform:translateY(-2px);
}
.nav__link.is-active{
  background:linear-gradient(180deg,var(--coffee),var(--coffee-deep));
  color:var(--milk);
  box-shadow:0 10px 22px -10px rgba(107,78,48,0.5);
}
.nav__link.is-active:hover{color:var(--milk);transform:translateY(-2px);}
.nav__link--contact{
  background:linear-gradient(180deg,var(--coffee),var(--coffee-deep));
  color:var(--milk);
}
.nav__link--contact:hover{color:var(--milk);background:linear-gradient(180deg,var(--coffee-deep),var(--coffee-deep-hover));}
.nav__link--contact .icon-whatsapp{background:var(--milk);}

/* Mobile hamburger button. Two bugs fixed here (2026-10-05):
   1. The three icon bars were direct flex children of .nav-toggle, which
      is display:flex with the browser default flex-direction:row — so
      they rendered as three bars SIDE BY SIDE instead of stacked into a
      ☰ glyph. Fix: the three bars now live in their own
      .nav-toggle__icon box with flex-direction:column, independent of
      the outer button's own row layout (icon box + "תפריט" label).
   2. The button was pinned to the literal CSS `left:0`, which ignores
      the page's dir="rtl" — on a right-to-left layout the button must
      sit on the visual RIGHT, under the logo, matching where
      .site-nav__inner already reserves room via padding-inline-start.
      Fix: `inset-inline-start:0` (the RTL-aware equivalent) instead of
      a hardcoded physical `left:0`. */
.nav-toggle{
  display:none;
  align-items:center;
  gap:10px;
  padding:11px 16px;
  min-height:48px;
  min-width:48px;
  position:absolute;
  inset-inline-start:0;
  top:50%;
  transform:translateY(-50%);
  color:var(--ink);
  background:var(--milk);
  border-radius:14px;
  box-shadow:var(--shadow-pill);
  cursor:pointer;
}
.nav-toggle:hover{box-shadow:var(--shadow-pill-hover);}
.nav-toggle__icon{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  flex:none;
  width:22px;
  height:15px;
}
.nav-toggle__icon span{
  display:block;
  width:100%;
  height:2.5px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle.is-open .nav-toggle__icon span:nth-child(1){transform:translateY(6.25px) rotate(45deg);}
.nav-toggle.is-open .nav-toggle__icon span:nth-child(2){opacity:0;}
.nav-toggle.is-open .nav-toggle__icon span:nth-child(3){transform:translateY(-6.25px) rotate(-45deg);}
.nav-toggle__label{font-size:14.5px;font-weight:600;}

/* Desktop only — keep every pill (including the WhatsApp contact button)
   on a single horizontal row instead of wrapping to a second line. Mobile
   (≤860px, see the next media block) keeps its existing slide-down panel
   untouched: gap/padding/font-size there still come from the base
   .nav__list/.nav__link rules above, exactly as before this change.
   Two tiers: 861–1279px is the tightest (narrowest room before the panel
   turns into the mobile hamburger), 1280px+ (the container's own max-width,
   so wider viewports never get more room than this) can afford to be a
   touch more spacious while still comfortably fitting one row. */
@media (min-width:861px){
  .nav__list{flex-wrap:nowrap;gap:2px;}
  .nav__link{
    padding:10px 6px;
    font-size:12px;
    white-space:nowrap;
  }
}
@media (min-width:1024px){
  .nav__list{gap:5px;}
  .nav__link{
    padding:11px 11px;
    font-size:13px;
  }
}
@media (min-width:1280px){
  .nav__list{gap:7px;}
  .nav__link{
    padding:12px 15px;
    font-size:14.5px;
  }
}

@media (max-width:860px){
  .site-nav__inner{justify-content:flex-start;padding-inline-start:130px;}
  .nav-toggle{display:flex;}
  .nav__list{
    position:absolute;
    inset-inline-start:0;
    top:100%;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    background:var(--milk);
    border-bottom:1px solid var(--border-hairline);
    max-height:0;
    overflow:hidden;
    padding:0 16px;
    transition:max-height .3s ease, padding .3s ease;
    box-shadow:0 16px 30px -20px rgba(107,78,48,0.28);
  }
  .nav__list.is-open{max-height:520px;padding:14px 16px 18px;}
  .nav__link{
    justify-content:flex-start;
    font-size:16.5px;
  }
}

/* =========================================================
   Hero — unified card: photo + headline, then route strip
========================================================= */
.hero{
  max-width:var(--container-w);
  margin:24px auto 0;
  padding:36px 36px 40px;
  background:var(--milk);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.hero__top{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:52px;
  align-items:center;
}
.hero__media,
.hero__text{min-width:0;}
.hero__media{position:relative;}
.hero__media img{
  width:100%;
  height:clamp(200px,34vh,360px);
  object-fit:cover;
  /* organic, hand-knit silhouette — not a plain uniform rounded rect */
  border-radius:56px 18px 56px 18px;
}
.hero__text h1{
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.28;
  margin-bottom:.35em;
}
.hero__lead{
  font-size:16.5px;
  color:var(--text-secondary);
  max-width:440px;
}

/* Hero intro copy — a light, generously-spaced paragraph block under
   the expressive h1 headline. Lighter weight + roomy line-height on
   purpose, distinct from the bolder headline above it; kept as
   separate <p> tags (never merged into one block) so each thought
   gets its own breathing room. Darker ink (not the muted secondary
   tone) so it stays comfortably readable at this light weight. */
.hero__intro-body{max-width:480px;margin-top:14px;}
.hero__intro-body p{
  font-family:var(--handwritten-font);
  font-weight:500;
  font-style:normal;
  font-size:19px;
  line-height:2.15;
  /* warm light-brown, solid (not an opacity trick) — scoped to just
     these four paragraphs, not a change to the site's shared palette */
  color:#7A6655;
  margin:0 0 22px;
}
.hero__intro-body p:last-child{margin-bottom:0;}

.hero__route{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--border-hairline);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.route-item{
  padding:0 22px;
  border-inline-start:1px solid var(--border-hairline);
  /* vertical flex column so every card can align on the same three
     horizontal lines (number / title / description) with the link
     pinned to a shared bottom line via margin-top:auto below */
  display:flex;
  flex-direction:column;
}
.route-item:first-child{border-inline-start:none;padding-inline-start:0;}
.route-item__eyebrow{
  display:block;
  font-family:var(--font-heading);
  font-size:14px;
  color:var(--coffee-deep);
  margin-bottom:8px;
}
/* fixed two-line height regardless of whether a given title actually
   wraps to one or two lines, so every description below it — across
   all four cards — starts at the same height */
.route-item__title{font-size:18px;line-height:1.3;min-height:2.6em;margin-bottom:6px;}
.route-item__desc{font-size:13.5px;color:var(--text-secondary);margin-bottom:12px;}
.route-item__action{
  display:inline-block;
  align-self:flex-start;
  margin-top:auto;
  font-size:14px;
  font-weight:600;
  color:var(--coffee-deep);
  border-bottom:1.5px solid var(--beige-mid);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.route-item__action:hover{color:var(--coffee-deep-hover);border-color:var(--coffee-deep);}

@media (max-width:1024px){
  .hero{margin-top:18px;padding:28px 24px 32px;border-radius:22px;}
}
@media (max-width:1000px){
  .hero__top{grid-template-columns:1fr;gap:24px;}
  /* text reads above the photo once the layout stacks to one column */
  .hero__text{order:1;}
  .hero__media{order:2;}
  .hero__media img{height:clamp(200px,38vh,300px);}
  .hero__route{grid-template-columns:1fr 1fr;row-gap:26px;}
  .route-item{border-inline-start:none;padding-inline-start:0;}
  .route-item:nth-child(odd){border-inline-start:none;}
  .route-item:nth-child(even){border-inline-start:1px solid var(--border-hairline);padding-inline-start:22px;}
}
@media (max-width:600px){
  .hero{padding:20px 16px 26px;border-radius:20px;margin-top:14px;}
  .hero__route{grid-template-columns:1fr;row-gap:24px;margin-top:26px;padding-top:20px;}
  .route-item:nth-child(even){border-inline-start:none;padding-inline-start:0;}
  .route-item{padding-bottom:20px;border-bottom:1px solid var(--border-hairline);}
  .route-item:last-child{border-bottom:none;padding-bottom:0;}
}

/* =========================================================
   Reveal — gentle, functional only, respects reduced motion
========================================================= */
@media (prefers-reduced-motion: no-preference){
  .reveal.is-pending{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .reveal.is-pending.is-visible{opacity:1;transform:translateY(0);}
}

/* =========================================================
   Section spacing rhythm — cards float on the page wash
========================================================= */
section{margin:0 auto;}

/* =========================================================
   Test video shelf — its own cappuccino card
========================================================= */
.classes{
  max-width:var(--container-w);
  margin:32px auto 0;
  background:var(--cappuccino-light);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:44px 36px 48px;
}
.classes__head{margin:0 0 26px;}
.classes__head h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:8px;}
.classes__lead{font-size:15.5px;color:var(--text-secondary);max-width:480px;margin:0;}

.shelf-controls{
  margin:0 0 14px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.shelf-arrow{
  width:48px;height:48px;
  border:none;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--coffee-deep);
  background:var(--milk);
  box-shadow:var(--shadow-pill);
  transition:box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.shelf-arrow svg{width:18px;height:18px;}
.shelf-arrow:hover{background:linear-gradient(180deg,#FFFFFF,var(--beige-soft));box-shadow:var(--shadow-pill-hover);transform:translateY(-2px);}

.shelf{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  padding-bottom:8px;
  scrollbar-width:thin;
  scrollbar-color:var(--beige-mid) transparent;
}
.shelf:focus-visible{outline:2px solid var(--coffee-deep);outline-offset:4px;}
.shelf::-webkit-scrollbar{height:8px;}
.shelf::-webkit-scrollbar-thumb{background:var(--beige-mid);border-radius:4px;}

.class-card{
  flex:0 0 clamp(420px,34vw,480px);
  min-width:0;
  scroll-snap-align:start;
  background:var(--milk);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:0 14px 28px -22px rgba(107,78,48,0.32);
  display:flex;
  flex-direction:column;
}
.class-card__media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:30px 8px 30px 8px;
}
.class-card__media img{width:100%;height:100%;object-fit:cover;}
.class-card__play{
  position:absolute;
  inset:0;
  margin:auto;
  width:52px;height:52px;
  border-radius:50%;
  background:rgba(251,246,239,0.94);
  color:var(--coffee-deep);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -8px rgba(107,78,48,0.38);
  transition:background .2s ease, transform .2s ease;
}
.class-card__play svg{width:20px;height:20px;margin-inline-start:2px;}
.class-card__play:hover{background:var(--milk);transform:scale(1.08);}

.class-card__body{padding-top:14px;display:flex;flex-direction:column;flex:1;}
.class-card__body h3{font-size:17px;margin-bottom:6px;}
.class-card__meta{font-size:13px;color:var(--text-secondary);margin-bottom:8px;}
.class-card__price{margin-bottom:14px;}
.class-card__desc{font-size:13.5px;line-height:1.55;color:var(--text-secondary);margin-bottom:14px;}

/* button (or its wrapper) is always the last child of the body — this
   pins it to the bottom of the card via the flex-column above, so
   every card in the shelf lines up evenly regardless of how much
   text a given card has, with no leftover empty space beneath it */
.class-card__body > a{margin-top:auto;}

/* ---- first shelf slot only: a real playable lesson, 16:9 —
   everything else about .class-card / .class-card__media stays
   the shared 4:3 photo-card rule above, untouched ---- */
.class-card__media--video{aspect-ratio:16/9;width:100%;}
.class-card__media--video iframe{width:100%;height:100%;border:0;display:block;}

/* ---- full lesson description, video card only — sits directly on
   the card's existing surface, no panel/border/shadow of its own ---- */
.class-card__full-desc{margin-bottom:14px;}
.class-card__full-desc p{
  font-family:Arial, Helvetica, sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:17px;
  line-height:1.55;
  letter-spacing:normal;
  color:var(--text-secondary);
  margin:0 0 8px;
}
.class-card__full-desc p:last-child{margin-bottom:0;}
.class-card__full-desc-list{
  list-style:none;
  margin:0 0 8px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.class-card__full-desc-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:15.5px;
  line-height:1.5;
  color:var(--text-secondary);
}
.class-card__full-desc-list li::before{
  content:'';
  flex:none;
  width:6px;height:6px;
  margin-top:8px;
  border-radius:50%;
  background:var(--coffee-deep);
}

.price-tag{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:15px;
  color:var(--coffee-deep);
  border:1px dashed var(--beige-mid);
  border-radius:8px;
  padding:3px 12px;
  background:var(--cappuccino-light);
}

/* Skill-level badge — same small-pill shape/sizing as .price-tag (site's
   established "modest inline tag" pattern) but solid coffee-deep on milk
   text, so it reads as a distinct marker rather than a second price.
   First lesson to use it is the crescent-bag advanced master class;
   reusable for any future lesson that needs a difficulty label. */
.level-tag{
  display:inline-block;
  font-family:var(--font-heading);
  font-size:14px;
  font-weight:600;
  color:var(--milk);
  border-radius:8px;
  padding:3px 12px;
  background:var(--coffee-deep);
}

@media (max-width:1024px){
  .classes{margin-top:24px;padding:32px 24px 36px;border-radius:22px;}
}
@media (max-width:600px){
  .classes{padding:26px 16px 30px;border-radius:20px;}
  .shelf{scroll-snap-type:x mandatory;gap:16px;}
  .class-card{flex:0 0 calc(100vw - 32px);max-width:480px;}
  .shelf-controls{display:none;}
}

/* =========================================================
   Personal video welcome — its own white card
========================================================= */
.welcome{
  max-width:var(--container-w);
  margin:32px auto 40px;
  padding:48px 36px;
  background:var(--milk);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:52px;
  align-items:center;
}
.welcome__media,
.welcome__content{min-width:0;}
.welcome__media{
  position:relative;
  aspect-ratio:16/9;
  border-radius:44px 14px 44px 14px;
  overflow:hidden;
  background:var(--cream-fallback);
}
/* real iframe embed now (see index.html) — same iframe-sizing pattern as
   .class-card__media--video iframe; the box itself (aspect-ratio 16/9,
   rounded corners, overflow:hidden) is unchanged from before, so the
   video fits and adapts on desktop and mobile exactly like the photo
   placeholder it replaced. */
.welcome__media iframe{width:100%;height:100%;border:0;display:block;}
.welcome__content h2{font-size:clamp(24px,2.6vw,32px);}
.welcome__content p{color:var(--wordmark-color);max-width:400px;margin-bottom:.65em;}
.welcome__content p:last-child{margin-bottom:0;}

/* ---- welcome block — soft handwritten Hebrew script (the site's one
   reserved handwritten face, already used for the hero intro and the
   course pages' own accents), heading sized up since script faces
   read smaller than a sans at the same px; body kept a touch lighter
   so it stays a calm "letter", never heavy ---- */
.home-page main .welcome__content h2{
  font-family:var(--handwritten-font);
  font-weight:500;
  font-size:clamp(32px,3.6vw,44px);
  line-height:1.3;
}
.home-page main .welcome__content p{
  font-family:var(--handwritten-font);
  font-weight:500;
  font-size:21px;
  line-height:1.6;
  color:var(--wordmark-color);
}

/* ---- closing line + its social icons — icons sit inline right after
   the sentence, as a natural continuation of the text rather than a
   separate boxed component: no background/border/shadow, small,
   monochrome in the same accent used for the heading. The two stay
   glued together as one unit (nowrap) so they never split apart,
   including once this paragraph wraps on a narrow screen. ---- */
.welcome__social{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  margin-inline-start:8px;
  vertical-align:middle;
}
.welcome__social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;height:22px;
  flex:none;
  border-radius:50%;
  transition:transform .2s ease, opacity .2s ease;
}
.welcome__social-link:hover{transform:translateY(-2px);opacity:.75;}
.icon-facebook-mono,
.icon-instagram-mono{
  width:17px;height:17px;display:inline-block;flex:none;
  background:var(--wordmark-color);
}
.icon-facebook-mono{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 1 0-11.5 9.87v-6.98H7.9V12h2.6V9.8c0-2.6 1.53-4 3.87-4 1.12 0 2.3.2 2.3.2v2.5h-1.3c-1.24 0-1.63.78-1.63 1.58V12h2.78l-.44 2.89h-2.34v6.98A10 10 0 0 0 22 12Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 12a10 10 0 1 0-11.5 9.87v-6.98H7.9V12h2.6V9.8c0-2.6 1.53-4 3.87-4 1.12 0 2.3.2 2.3.2v2.5h-1.3c-1.24 0-1.63.78-1.63 1.58V12h2.78l-.44 2.89h-2.34v6.98A10 10 0 0 0 22 12Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.icon-instagram-mono{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 3.5A5.5 5.5 0 1 1 6.5 13 5.5 5.5 0 0 1 12 7.5Zm0 2A3.5 3.5 0 1 0 15.5 13 3.5 3.5 0 0 0 12 9.5ZM17.75 6a1 1 0 1 1-1 1 1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7Zm5 3.5A5.5 5.5 0 1 1 6.5 13 5.5 5.5 0 0 1 12 7.5Zm0 2A3.5 3.5 0 1 0 15.5 13 3.5 3.5 0 0 0 12 9.5ZM17.75 6a1 1 0 1 1-1 1 1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media (max-width:1024px){
  .welcome{margin-top:24px;padding:32px 24px;border-radius:22px;}
}
@media (max-width:900px){
  .welcome{grid-template-columns:1fr;gap:24px;}
}
@media (max-width:600px){
  .welcome{padding:24px 16px;border-radius:20px;margin-bottom:28px;}
}

/* =========================================================
   Home page — Arial typography for all visible text inside <main>.
   Scoped strictly to <body class="home-page">. The masthead (logo +
   "Oksana Miller Design Studio") and the main nav both live OUTSIDE
   <main> in the markup, so this block cannot reach them — they keep
   their Chonburi brand lockup exactly as before.
   No handwritten/script face anywhere here, no italic, no shadow,
   no stroke. Colors are UNCHANGED from the previously approved
   values (var(--wordmark-color) for headings, #3E2E26 for body) —
   only font-family/weight/line-height/size move to Arial below.
========================================================= */
.home-page main{
  font-family:Arial, Helvetica, sans-serif;
  font-weight:400;
  font-style:normal;
  color:#3E2E26;
  line-height:1.55;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:normal;
}
.home-page main h1,
.home-page main h2,
.home-page main h3{
  font-family:Arial, Helvetica, sans-serif;
  font-weight:500;
  font-style:normal;
  text-shadow:none;
  line-height:1.2;
  letter-spacing:normal;
  color:var(--wordmark-color);
}
/* main headline weight is set further down, together with its
   handwritten font-family override — kept in one place */

/* a few elements set their OWN font-family (and, for eyebrow/price,
   their own established accent color, which is kept as-is — only
   the typeface changes for these) further down this file —
   inheritance from .home-page main can't reach past that, so they
   need a direct (but still page-scoped) override */
.home-page main .eyebrow,
.home-page main .route-item__eyebrow,
.home-page main .price-tag,
.home-page main .level-tag{
  font-family:Arial, Helvetica, sans-serif;
  font-style:normal;
}

/* ---- main headline — soft handwritten Hebrew script (the site's one
   reserved handwritten face, already used for the course pages' own
   accents), sized up since script faces read smaller than a sans at
   the same px, kept at a medium weight so it stays soft, never heavy/bold ---- */
.home-page main .hero__text h1{
  font-family:var(--handwritten-font);
  font-weight:500;
  font-size:clamp(36px,4.6vw,58px);
  line-height:1.3;
}

/* ---- section / video-card / direction headings — weight 500,
   sized to their own context so the shelf and card widths stay
   exactly as they are ---- */
.home-page main #classesTitle{font-size:clamp(28px,3vw,38px);line-height:1.2;}
.home-page main .class-card__body h3{font-size:21px;line-height:1.2;}
.home-page main .route-item__title{font-size:20px;line-height:1.2;}

/* ---- body text / descriptions — weight 400, calm 1.55 line-height,
   at least 17px so nothing needs to shrink to fit ---- */
.home-page main .hero__lead,
.home-page main .classes__lead{
  font-weight:400;
  font-size:20px;
  line-height:1.55;
  color:#3E2E26;
}
.home-page main .route-item__desc,
.home-page main .class-card__desc{
  font-weight:400;
  font-size:17px;
  line-height:1.55;
}

/* ---- names / buttons — weight 500, buttons never below 16px ---- */
.home-page main .route-item__action{font-weight:500;font-size:16px;line-height:1.2;}
.home-page main .btn--card{font-weight:500;font-size:16px;line-height:1.2;}

/* ---- short meta info — weight 300, still comfortably above 13px ---- */
.home-page main .eyebrow{font-weight:300;font-size:15px;}
.home-page main .route-item__eyebrow{font-weight:300;font-size:16px;}
.home-page main .class-card__meta{font-weight:300;font-size:15px;}
.home-page main .price-tag{font-weight:300;font-size:16px;}
.home-page main .welcome__note{font-weight:300;font-size:14.5px;}

/* =========================================================
   Generic info card — reusable content block for secondary pages
   (e.g. the course page), matching the hero/classes/welcome cards
========================================================= */
.info-card{
  max-width:var(--container-w);
  margin:32px auto 0;
  padding:44px 36px;
  background:var(--milk);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.info-card--tint{background:var(--cappuccino-light);}
.info-card:last-of-type{margin-bottom:40px;}
.info-card__head{max-width:640px;margin:0 0 26px;}
.info-card__head h1,
.info-card__head h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:8px;}
.info-card__lead{font-size:15.5px;color:var(--text-secondary);max-width:520px;margin:0;}

/* intro paragraphs for a text-only secondary page (e.g. a "coming
   soon" collection page) — same card, no new visual language */
.info-card__body{max-width:640px;margin:0;}
.info-card__body p{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 14px;}
.info-card__body p:last-child{margin-bottom:0;}

/* =========================================================
   .info-card__intro — an optional photo wrapper around ONLY the
   head+body of an .info-card, used so far only on the "preparation"
   page. It bleeds out to the card's own edges/top corners via a
   negative margin that exactly matches .info-card's own padding at
   each breakpoint, and stops completely before whatever comes after
   it (e.g. .hero__route) — that next block keeps the card's plain
   solid background untouched, because the photo lives only inside
   this wrapper's own box.
========================================================= */
.info-card__intro{
  position:relative;
  overflow:hidden;
  margin:-44px -36px 0;
  padding:40px 36px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.info-card__intro::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to left, rgba(251,246,239,0.88) 0%, rgba(251,246,239,0.72) 34%, rgba(251,246,239,0) 62%),
    url("assets/images/knitting-preparation-hero.png");
  background-repeat:no-repeat;
  background-position:center center, center center;
  background-size:cover, cover;
  z-index:0;
}
.info-card__intro .info-card__head,
.info-card__intro .info-card__body{
  position:relative;
  z-index:1;
  max-width:52%;
  margin-left:auto;
  margin-right:0;
}

@media (max-width:1024px){
  .info-card__intro{
    margin:-32px -24px 0;
    padding:32px 24px 170px;
    aspect-ratio:auto;
    min-height:0;
  }
  .info-card__intro::before{
    inset:auto 0 0 0;
    height:150px;
    background-position:center bottom, left bottom;
  }
  .info-card__intro .info-card__head,
  .info-card__intro .info-card__body{
    max-width:100%;
    margin-left:0;
  }
}
@media (max-width:640px){
  .info-card__intro{
    margin:-26px -18px 0;
    padding:26px 18px 150px;
  }
  .info-card__intro::before{
    height:130px;
  }
}

.info-card__list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px 32px;
}
.info-card__list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:16px;
  color:var(--ink);
  padding-inline-start:0;
}
.info-card__list li::before{
  content:'';
  flex:none;
  width:9px;height:9px;
  margin-top:8px;
  border-radius:50%;
  background:var(--coffee-deep);
  opacity:.7;
}

.info-card__cta{text-align:center;}
.info-card__cta p{max-width:480px;margin:0 auto 26px;color:var(--text-secondary);}

@media (max-width:1024px){
  .info-card{margin-top:24px;padding:32px 24px;border-radius:22px;}
}
@media (max-width:640px){
  .info-card{padding:26px 18px;border-radius:20px;}
  .info-card__list{grid-template-columns:1fr;}
}

/* =========================================================
   Lesson catalog — קטלוג שיעורי הסריגה (lessons-catalog.html only).
   One milk-on-cappuccino shell, same surface/radius/shadow language
   as every other card on the site, split into two vertical columns
   with a hairline divider — same divider technique as .hero__route/
   .route-item (border-inline-start, first child gets none, switches
   to a horizontal border-bottom divider once columns stack on mobile).
   RTL note: the FIRST column in the markup lands on the right, the
   second on the left — no extra CSS ordering needed.
   Each .lesson-card reuses existing site components untouched
   (.eyebrow, .price-tag, .btn/.btn--outline/.btn--solid/.btn--card,
   .icon-whatsapp, .js-whatsapp) so new lessons can be added by copying
   one <article class="lesson-card"> block, no new CSS required.
========================================================= */
.lesson-catalog{
  max-width:var(--container-w);
  margin:32px auto 40px;
  background:var(--cappuccino-light);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:44px 36px 48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.lesson-catalog__col{
  min-width:0;
  padding:0 32px;
  border-inline-start:1px solid var(--border-hairline);
}
.lesson-catalog__col:first-child{border-inline-start:none;padding-inline-start:0;}
.lesson-catalog__col:last-child{padding-inline-end:0;}
.lesson-catalog__col-head{margin-bottom:22px;}
.lesson-catalog__col-head h2{font-size:clamp(20px,2.2vw,26px);margin:0;}

.lesson-catalog__cards{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.lesson-card{
  background:var(--milk);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 14px 28px -22px rgba(107,78,48,0.32);
  display:flex;
  flex-direction:column;
}
/* strictly identical size/proportions for every lesson photo, whatever
   the source image's own dimensions happen to be — a portrait 2:3 box,
   cropped (never stretched) via object-fit:cover */
.lesson-card__media{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  border-radius:26px 8px 26px 8px;
}
.lesson-card__media img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}
/* one photo (the hoodie lesson) has its own logo watermark sitting right
   at the top-left corner — a plain center crop nibbles into it, so this
   modifier shifts the crop to keep that corner fully in frame instead of
   cropping evenly from both sides. Scoped to this image only. */
img.lesson-card__media-img--start{object-position:left center;}

/* modifier for a photo whose proportions don't match the shared 2:3
   card box — shows the whole photo uncropped (letterboxed on a soft
   milk background) instead of cropping it via object-fit:cover.
   Scoped to whichever image needs it, same pattern as the modifier
   above. */
img.lesson-card__media-img--contain{object-fit:contain;background:var(--milk);}

.lesson-card__body{padding-top:16px;display:flex;flex-direction:column;flex:1;}
.lesson-card__body h3{font-size:18px;margin-bottom:8px;}
.lesson-card__desc{font-size:14.5px;line-height:1.55;color:var(--text-secondary);margin-bottom:14px;}

.lesson-card__learn{margin-bottom:14px;}
.lesson-card__learn-title{font-size:13.5px;font-weight:600;color:var(--coffee-deep);margin-bottom:8px;}
.lesson-card__learn ul{margin:0;}
.lesson-card__learn li{
  position:relative;
  padding-inline-end:20px;
  margin-bottom:6px;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink);
}
.lesson-card__learn li:last-child{margin-bottom:0;}
.lesson-card__learn li::before{
  content:'';
  position:absolute;
  inset-inline-end:0;
  top:8px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--coffee-deep);
  opacity:.7;
}

.lesson-card__meta{font-size:13px;color:var(--text-secondary);margin-bottom:10px;}
.lesson-card__price{margin-bottom:16px;}

.lesson-card__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:auto;
}
.lesson-card__actions .icon-whatsapp{margin-inline-end:8px;}

/* row modifier — same two buttons, but side by side on desktop/tablet
   (equal width via flex:1), stacking back to the default column once
   there isn't room. Opt-in per lesson page; the base class above
   (used by the other lesson detail pages) is untouched. */
.lesson-card__actions--row{flex-direction:row;flex-wrap:wrap;}
.lesson-card__actions--row > a{flex:1 1 220px;}
@media (max-width:600px){
  .lesson-card__actions--row{flex-direction:column;}
  .lesson-card__actions--row > a{flex:1 1 auto;}
}

@media (max-width:1024px){
  .lesson-catalog{margin-top:24px;padding:32px 24px 36px;border-radius:22px;}
  .lesson-catalog__col{padding:0 20px;}
}
@media (max-width:800px){
  .lesson-catalog{grid-template-columns:1fr;gap:0;}
  .lesson-catalog__col{
    border-inline-start:none;
    padding-inline-start:0;
    padding-inline-end:0;
    padding-bottom:36px;
    margin-bottom:36px;
    border-bottom:1px solid var(--border-hairline);
  }
  .lesson-catalog__col:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none;}
}
@media (max-width:640px){
  .lesson-catalog{padding:26px 18px 30px;border-radius:20px;}
}

/* =========================================================
   Catalog grid — modern product-grid layout used by the two
   technique-specific catalogs (knitting-lessons-catalog.html,
   crochet-lessons-catalog.html). Uniform cards, 3 per row on desktop,
   2 on tablet, 1 on mobile — see .catalog-grid media queries below.

   Accessibility: the ENTIRE card (photo + text + the "לפרטי השיעור"
   visual button) is one single real <a>, so keyboard users get exactly
   one stop per lesson (Tab → Enter opens it) instead of several
   overlapping targets. The accessible name comes from the link's own
   aria-label ("לפרטי השיעור: <full lesson title>"); the little pill
   that LOOKS like a button inside it is a plain <span aria-hidden="true">
   — purely visual, never a second nested interactive element (real
   <a>/<button> cannot legally nest inside another <a>).
========================================================= */
.catalog-grid{
  max-width:var(--container-w);
  margin:32px auto 40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  /* explicit (grid's own initial value is already stretch, but this is the
     one rule that guarantees every card in a row shares the row's full
     height, however many cards or how much text each one carries) */
  align-items:stretch;
}
.catalog-card{
  background:var(--milk);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  /* belt-and-braces alongside the grid's align-items:stretch above, so the
     card always fills its stretched grid-cell height even if this
     component is ever reused outside a grid (e.g. a flex row) */
  height:100%;
  display:flex;
  flex-direction:column;
}
.catalog-card__link{
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.catalog-card__link:hover,
.catalog-card__link:focus-visible{
  transform:translateY(-4px);
}
.catalog-card__link:focus-visible{
  outline:2px solid var(--coffee-deep);
  outline-offset:4px;
  border-radius:var(--radius-lg);
}
/* strictly identical size/proportions for every catalog photo — one fixed
   portrait 2:3 box (no padding of its own, no separate height rule per
   card), photo always cropped — never letterboxed and never stretched —
   via object-fit:cover. This box's own overflow:hidden is what gives the
   photo the card's rounded top corners (the card itself carries the
   border-radius + overflow:hidden that clips it), so every catalog photo
   starts flush at the very top edge of its card with no white strip above
   it, whatever that image's original aspect ratio is.
   NOTE: catalog-card thumbnails intentionally never use
   .lesson-card__media-img--contain (that modifier is for the *lesson
   detail* pages' single big photo, where letterboxing is fine) — inside
   a catalog card, contain+milk-background is exactly what used to leave a
   blank bar above the striped-top photo, since its 1105×1423 photo is
   wider than this 2:3 box and contain shrank it down to fit instead of
   cropping it. */
.catalog-card__media{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  padding:0;
}
.catalog-card__media img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform .3s ease;}
.catalog-card__link:hover .catalog-card__media img,
.catalog-card__link:focus-visible .catalog-card__media img{transform:scale(1.045);}
/* still used by the OTHER technique catalog's sweater-braid card
   (knitting-lessons-catalog.html) — untouched by this fix, kept only for
   that page's photo, which still needs letterboxing to avoid cropping its
   logo/cuffs. Not used by any card in this crochet catalog any more. */
.catalog-card__media img.lesson-card__media-img--contain{object-fit:contain;background:var(--milk);}
/* baby-knitted-bonnet-main.png was replaced (2026-10-02) with a new,
   tighter photo (941×1672, ≈0.563) — the old .gallery-photo--baby-bonnet-
   catalog zoom class above was tuned to the PREVIOUS photo's geometry
   (1241×1267, nearly square) and is now removed: the new photo's content
   already touches the left and right frame edges on its own (the tie
   loop runs edge-to-edge), so plain object-fit:contain (no extra scale)
   is the safe choice here — any added zoom would immediately clip the
   tie. Contain alone already fills the box closely (only ~8% pillarbox
   gap per side) since this photo's own crop is already tight. */
/* the striped-top photo (1105×1423, wider than this box's 2:3) is checked
   individually: cover only ever trims its left/right margin around the
   mannequin at object-position:center — the top, straps and side tie stay
   fully inside the frame, so center is the deliberate, verified choice
   here, not just an unset default. */
.catalog-card__media img.catalog-card-photo--striped-top{object-position:center;}
/* neon-green top photo (1084×1220, notably wider than this box's 2:3) —
   checked individually: the garment is horizontally centered in the
   original photo, so cover's larger side crop (~13% each side at this
   ratio) still lands entirely on the plain background, well clear of the
   straps; center confirmed safe. */
.catalog-card__media img.catalog-card-photo--neon-green{object-position:center;}
/* baby booties photo (1086×1448 ≈0.75, wider than this box's 2:3) — same
   photo/same fix as .lesson-detail__media's copy of it below: center would
   clip the "OKSANA MILLER" watermark in the top-left corner, so the crop
   is shifted right (25%) to keep it in frame; the booties themselves sit
   centered in the lower two-thirds and stay fully in frame either way. */
.catalog-card__media img.lesson-photo--baby-booties-bow{object-position:25% center;}
/* square basket main photo (1023×1537 ≈2:3) matches this box almost
   exactly — center confirmed safe, same value as its gallery copy. */
.catalog-card__media img.gallery-photo--square-basket-main{object-position:center;}

.catalog-card__body{padding:20px;display:flex;flex-direction:column;flex:1;}
/* fixed-height title zone — every card reserves the same 2-line block for
   its heading, however short or long the actual title is, so the caption
   below always starts at the same y regardless of neighboring cards */
.catalog-card__body h3{
  font-size:18px;
  line-height:1.2;
  margin-bottom:8px;
  min-height:2.4em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* fixed-height description zone — same idea: reserved 3-line block, longer
   captions are clamped (never shrunk in font-size) so it never grows past
   this, shorter ones just leave the extra reserved space blank. Together
   with the title rule above this is what keeps the "לפרטי השיעור" button
   sitting on the same line across every card in a row, on top of (not
   instead of) the grid's own align-items:stretch + margin-top:auto below. */
.catalog-card__caption{
  font-size:14.5px;
  line-height:1.55;
  color:var(--text-secondary);
  margin-bottom:14px;
  min-height:4.65em;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* bullet list for a fuller catalog-card description — same size/color/
   spacing rhythm as .catalog-card__caption above, just structured as a
   list. Scoped to this component only. */
.catalog-card__desc-list{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.catalog-card__desc-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14.5px;
  line-height:1.55;
  color:var(--text-secondary);
}
.catalog-card__desc-list li::before{
  content:'';
  flex:none;
  width:6px;height:6px;
  margin-top:8px;
  border-radius:50%;
  background:var(--coffee-deep);
}
.catalog-card__level{margin:0 0 10px;}
.catalog-card__price{margin:0 0 16px;}
.catalog-card__price .price-value{margin-bottom:0;}
/* Row-alignment placeholders — every catalog card now always carries BOTH
   a .catalog-card__level and a .catalog-card__price paragraph in its DOM,
   whether or not that lesson actually has a skill-level badge or a price
   yet. A card that doesn't gets the --placeholder modifier instead of
   real content: same markup/text (so it renders at the exact same height
   as a real one), just invisible via visibility:hidden — which removes it
   visually and from the accessibility tree while still reserving its
   layout space. This is what keeps the price row (and, in turn, the
   "לפרטי השיעור" button below it, via .catalog-card__cta's own
   margin-top:auto) sitting on the same horizontal line across every card
   in a row, regardless of which cards have a level badge or a price and
   which don't. */
.catalog-card__level--placeholder,
.catalog-card__price--placeholder{visibility:hidden;}
.catalog-card__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 26px;
  border-radius:14px;
  font-size:15px;
  font-weight:500;
  margin-top:auto;
  background:var(--coffee-deep);
  color:var(--milk);
  box-shadow:0 10px 22px -12px rgba(107,78,48,0.5);
  transition:background .2s ease;
}
.catalog-card__link:hover .catalog-card__cta,
.catalog-card__link:focus-visible .catalog-card__cta{background:var(--coffee-deep-hover);}

@media (max-width:1000px){
  .catalog-grid{grid-template-columns:repeat(2,1fr);gap:22px;}
}
@media (max-width:640px){
  .catalog-grid{grid-template-columns:1fr;gap:20px;}
}

/* Hide every page but 1 by default (before script.js runs) so there's no
   flash of a 10th+ card on first paint; script.js is what makes the page
   buttons switch this. Graceful without JS too: page 1's 9 cards still
   show, only the pagination buttons themselves would do nothing. */
.catalog-card[data-page]:not([data-page="1"]){display:none;}

/* Catalog pagination — page numbers below the grid (script.js shows only
   the 9 cards matching the selected data-page and toggles .is-active
   here). Real, clickable pages use <button>; pages with no cards yet are
   plain <span>s carrying --disabled instead, so they're visibly present
   (the structure is ready) but inert — never a link to an empty page. */
.catalog-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  max-width:var(--container-w);
  margin:8px auto 0;
  flex-wrap:wrap;
}
.catalog-pagination__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:none;
  border-radius:50%;
  font-family:var(--font-heading);
  font-size:15px;
  font-weight:600;
  color:var(--text-secondary);
  background:var(--milk);
  border:1px solid var(--border-hairline);
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
button.catalog-pagination__btn:hover:not(.is-active){
  background:var(--cappuccino-light);
  color:var(--ink);
}
.catalog-pagination__btn:focus-visible{
  outline:2px solid var(--coffee-deep);
  outline-offset:2px;
}
.catalog-pagination__btn.is-active{
  background:var(--coffee-deep);
  border-color:var(--coffee-deep);
  color:var(--milk);
  box-shadow:0 8px 18px -10px rgba(107,78,48,.5);
  cursor:default;
}
.catalog-pagination__btn--disabled{
  background:transparent;
  border-color:transparent;
  color:var(--beige-mid);
  cursor:default;
}
@media (max-width:480px){
  .catalog-pagination{gap:8px;}
  .catalog-pagination__btn{width:38px;height:38px;font-size:14px;}
}

/* =========================================================
   Lesson detail page — one full page per lesson (e.g.
   lesson-sweater-braid.html, square-basket-lesson.html,
   lesson-kids-hoodie-cardigan.html), reached from a catalog card.
   Reuses the site's existing .info-card shell/typography and the
   already-established .lesson-card__actions/.btn/.icon-whatsapp
   components — only the large photo treatment below is new.
========================================================= */
.lesson-detail__media{
  max-width:420px;
  margin:0 auto 28px;
  aspect-ratio:2/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.lesson-detail__media img{width:100%;height:100%;object-fit:cover;display:block;}
/* higher specificity than the cover rule above, so the --contain
   modifier reliably wins (equal-specificity source order was letting
   the base rule win before, cropping a bit off the top and bottom) */
.lesson-detail__media img.lesson-card__media-img--contain{object-fit:contain;background:var(--milk);}
/* single-photo lesson pages that wire the photo up to .js-lightbox
   (script.js supports a bare <img>, not just the gallery's buttons) get
   the same "click to enlarge" cursor as the multi-photo galleries */
.lesson-detail__media img.js-lightbox{cursor:zoom-in;}
/* baby booties photo (1086×1448 ≈0.75, wider than this box's 2:3) — cover
   trims only the left/right margin around the flat-lay. Checked
   individually: at object-position:center the crop clips the "OKSANA
   MILLER" wordmark watermark in the top-left corner, while the right
   side is just empty background/plant with room to spare — so the crop
   is shifted toward the right (25% instead of 50%) to keep the watermark
   fully in frame; all four booties stay comfortably inside the frame
   either way, since they sit centered in the lower two-thirds. */
.lesson-detail__media img.lesson-photo--baby-booties-bow{object-position:25% center;}
.lesson-detail__level{margin:22px 0 10px;}
.lesson-detail__price{margin:22px 0 10px;}

/* Two-photo gallery (front + back) for a lesson that has both — same
   rounded-corner/shadow treatment as .lesson-detail__media above, two
   strictly equal-size boxes (same aspect-ratio, same width/height), aligned
   on one row with an even gap between them. Every image inside also gets
   .js-lightbox so script.js wires up click-to-enlarge.
   Opt-in — only used where a lesson has two photos.
   Both photos are cover-cropped (never stretched) to this identical 2:3
   box. Each photo's own aspect ratio was checked against the box ratio
   individually: the back photo (1023×1537 ≈ 2:3) already matches the box
   almost exactly, so cover crops next to nothing; the front photo
   (1105×1423, visibly wider than 2:3) is height-driven under `cover`, so
   the crop lands entirely on the left/right margin around the mannequin —
   the garment, straps and side tie stay fully inside the frame at
   object-position:center for both. */
.lesson-detail__gallery{
  display:flex;
  gap:16px;
  max-width:620px;
  margin:0 auto 28px;
}
.lesson-detail__gallery-item{
  flex:1 1 0;
  aspect-ratio:2/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  background:var(--milk);
  border:0;
  padding:0;
  cursor:zoom-in;
}
.lesson-detail__gallery-item img{width:100%;height:100%;object-fit:cover;display:block;}
/* higher specificity than the cover rule above, so the --contain modifier
   reliably wins (equal-specificity source order was letting the base
   cover rule win instead — same bug already fixed once for
   .lesson-detail__media, just never carried over to the gallery variant;
   this is what was cropping the left/right edge off the baby-romper
   lesson's landscape measurements photo, whose arrows and numbers need
   to stay fully visible, never cropped). Centered, letterboxed on a
   milk background, exactly like every other --contain photo on the
   site. */
.lesson-detail__gallery-item img.lesson-card__media-img--contain{object-fit:contain;object-position:center;background:var(--milk);}
.lesson-detail__gallery-item img.gallery-photo--front{object-position:center;}
.lesson-detail__gallery-item img.gallery-photo--back{object-position:center;}
/* lace summer-set gallery (3 photos, all ~1023×1537 ≈ this box's own 2:3 —
   each one checked individually against the box ratio: virtually no crop
   on any of them, so center is the deliberate value for all three) */
.lesson-detail__gallery-item img.gallery-photo--lace-full{object-position:center;}
.lesson-detail__gallery-item img.gallery-photo--lace-front{object-position:center;}
.lesson-detail__gallery-item img.gallery-photo--lace-back{object-position:center;}
/* white cross-neck top gallery: front (1023×1537 ≈ this box's 2:3) crops
   next to nothing; back (1122×1402, visibly wider than 2:3) is
   height-driven under cover, so it only ever trims the mannequin's outer
   shoulders — the crossed straps, collar and tie all sit centered in the
   frame and stay fully inside it, so center was checked and confirmed
   safe for both. */
.lesson-detail__gallery-item img.gallery-photo--cross-neck-front{object-position:center;}
.lesson-detail__gallery-item img.gallery-photo--cross-neck-back{object-position:center;}
/* neon-green open-back top gallery: front (1084×1220) and back
   (1084×1194) are both notably wider than this box's 2:3, so cover crops
   a larger side margin (~13-14% each side) than most of this site's other
   lesson photos — checked individually against each photo: the garment
   and, on the back photo, the crossed straps/tie are all horizontally
   centered well clear of that crop line, so center is confirmed safe for
   both rather than an unchecked default. */
.lesson-detail__gallery-item img.gallery-photo--neon-green-front{object-position:center;}
.lesson-detail__gallery-item img.gallery-photo--neon-green-back{object-position:center;}
/* kids hooded-cardigan gallery: the flatlay (1122×1402) is a diagonal
   flat-lay with the logo watermark and cuff in the top-left corner — same
   photo/same concern this catalog already solved once for its old catalog
   card via .lesson-card__media-img--start (object-position:left center),
   so the gallery reuses that exact same checked value here instead of a
   plain center that would risk the top-left cuff. The worn photo
   (996×996, a wide square well past 2:3) has the child centered in frame,
   so cover's larger side crop lands only on the blurred street background
   either side — center confirmed safe. */
.lesson-detail__gallery-item img.gallery-photo--kids-hoodie-flatlay{object-position:left center;}
.lesson-detail__gallery-item img.gallery-photo--kids-hoodie-worn{object-position:center;}
/* lace summer blouse gallery: front (1113×1414) and back (1082×1184) are
   both wider than this box's 2:3, so cover's crop lands mostly at the
   shoulders — checked individually against each photo: the garment is
   horizontally centered with the shoulders just inside the crop margin on
   both photos, so center is the confirmed value for both. */
.lesson-detail__gallery-item img.gallery-photo--blouse-front{object-position:center;}
.lesson-detail__gallery-item img.gallery-photo--blouse-back{object-position:center;}
/* square basket (knitted-bottom) gallery — 3 photos. Main (1023×1537
   ≈2:3) matches the box almost exactly, next to no crop. The other two
   are landscape and much wider than this portrait 2:3 box, so cover
   crops a large side margin (~26% left/right each on the front shot,
   1466×1073; ~25% each on the gift-wrap shot, 1448×1086) — checked
   individually: the basket sits horizontally centered in both original
   photos with even background/wrapping either side, so center keeps the
   whole basket (incl. the logo charm on front) fully in frame on both. */
.lesson-detail__gallery-item img.gallery-photo--square-basket-main{object-position:center;}
.lesson-detail__gallery-item img.gallery-photo--square-basket-front{object-position:center;}
.lesson-detail__gallery-item img.gallery-photo--square-basket-gift{object-position:center;}
/* the card this gallery's lesson is linked to from the homepage's first
   video card (#square-basket-knitted-bottom, see baby... no, see
   bags-baskets-lessons-catalog.html) needs enough top clearance that a
   direct #-anchor landing (no JS smooth-scroll offset runs on a fresh
   page load, only on same-page clicks — see script.js) doesn't tuck the
   card under the sticky .site-nav (78px desktop / 41px mobile tall). */
#square-basket-knitted-bottom{scroll-margin-top:100px;}
/* pompom hat + neck-warmer gallery — 2 photos, shared by both catalog
   cards (crochet catalog + baby/kids catalog) that link to this one
   lesson page. The old main photo (1086×1448, the one with the
   "OKSANA MILLER" watermark top-left that needed the 25% shift below) was
   removed site-wide per explicit request; the former "side" photo
   (1536×1024, landscape, much wider than this box's 2:3) is now the main/
   first photo instead — still uses plain object-position:center, exactly
   as it already did in its old "side" slot (checked there: height-driven
   cover crop, ~44% off each side, but the head+hat stay horizontally
   centered with plain background either side, so center keeps the whole
   hat, incl. the pompom, fully in frame). The closeup photo (also
   1536×1024) is unchanged, still second, still plain center. */
.lesson-detail__gallery-item img.gallery-photo--pompom-hat-main{object-position:center;}
.lesson-detail__gallery-item img.gallery-photo--pompom-hat-closeup{object-position:center;}
.catalog-card__media img.gallery-photo--pompom-hat-main{object-position:center;}
/* this lesson's card at the END of the crochet catalog (see that page's
   comments — this is the one exception to "newest goes first" there) is
   also the direct target of the homepage's HAT-POMPOM-SCARF-001 video
   card; same top-clearance need as #square-basket-knitted-bottom above. */
#pompom-hat-scarf{scroll-margin-top:100px;}
/* festive table doily gallery — 2 photos, shared by both catalog cards
   (bags/baskets catalog + general crochet catalog) that link to this one
   lesson page. 2026-08-30: replaced with new "-v2" portrait photos supplied
   by Oksana (1024×1536 and 1023×1537, both ≈2:3) — this matches the
   standard portrait 2:3 box every other lesson gallery/card uses almost
   exactly, so plain cover/center is back (the earlier landscape pair and
   its dedicated contain/letterbox box are no longer used anywhere —
   checked individually: cover crops next to nothing off either new photo,
   both doilies, the watermark/logo and all four place settings stay fully
   in frame). */
.lesson-detail__gallery-item img.gallery-photo--festive-doily-main-v2{object-position:center;}
.lesson-detail__gallery-item img.gallery-photo--festive-doily-table-v2{object-position:center;}
.catalog-card__media img.gallery-photo--festive-doily-main-v2{object-position:center;}
/* this lesson's card lives on page 2 of the crochet catalog (see that
   page's pagination) and is also the direct target of the homepage's
   FESTIVE-DOILY-001 video card and of the WhatsApp purchase message's
   direct lesson link; same top-clearance need as the ids above. */
#festive-table-doily{scroll-margin-top:100px;}
/* teddy bear sweater gallery — 3 photos, shared by THREE catalog cards
   (knitting catalog + crochet catalog + baby/kids catalog) that link to
   this one lesson page. The two detail photos (1536×1024, landscape, much
   wider than this box's portrait 2:3) are far worse under cover (~28% each
   side crops off the sleeve on the blue photo), so on the LESSON DETAIL
   PAGE's own gallery all three photos still use contain — full,
   undistorted photo, letterboxed on the card's own --milk background.
   The CATALOG CARD thumbnail (all three catalogs) is a different context:
   2026-08-30, fixed at Oksana's request — contain there was shrinking the
   image and leaving a blank strip above it, breaking the catalog's shared
   card height/alignment with its neighbors, which every other card in
   every catalog gets from a plain cover-filled 2:3 box. Switched the
   thumbnail back to that same standard cover box; main photo (1122×1402
   ≈0.8, wider than 2:3) needs an ~8% each-side crop under cover — checked
   individually at several object-position values: centered (50%) clips
   the "OKSANA MILLER" logo's left edge and the blue sweater's left cuff,
   so shifted to 20% instead — both sweaters, the bear appliqué, the
   buttons and the full logo all stay in frame; only the plain beige
   background is trimmed off each side. */
.lesson-detail__gallery-item img.gallery-photo--teddy-sweater-main,
.lesson-detail__gallery-item img.gallery-photo--teddy-sweater-blue,
.lesson-detail__gallery-item img.gallery-photo--teddy-sweater-purple{object-fit:contain;object-position:center;background:var(--milk);}
.catalog-card__media img.gallery-photo--teddy-sweater-main{object-position:20% center;}
/* this lesson's primary catalog card (knitting-lessons-catalog.html) is
   also the direct target of the homepage's TEDDY-BEAR-SWEATER-001 video
   card and of the WhatsApp purchase message's direct lesson link; same
   top-clearance need as the ids above. */
#teddy-bear-sweater{scroll-margin-top:100px;}
/* three-color crochet crop top — 3 photos (single listing, crochet
   catalog only). Main (1277×1232 ≈1.04), front (same) and back (1149×1369
   ≈0.84) are all checked individually against this box's portrait 2:3:
   plain cover/center crops only the mannequin's shoulders/neck and
   background on every one of them, the whole crop top and all three
   colors stay fully in frame, so no object-fit/object-position override
   was needed — the default .catalog-card__media / .lesson-detail__gallery
   -item rules apply as-is. This lesson's card is also the direct target
   of the homepage's THREE-COLOR-CROP-TOP-001 video card and of the
   WhatsApp purchase message's direct lesson link, both via
   #three-color-crochet-crop-top; same top-clearance need as the ids
   above. */
#three-color-crochet-crop-top{scroll-margin-top:100px;}
/* crochet bus basket — 3 photos (single listing, bags/baskets catalog
   only). All three are exactly 1024×1536 (2:3), matching this box's own
   ratio exactly — plain cover/center shows the whole bus basket (windows,
   headlights, wipers, wheels, logo charm) with no meaningful crop, so no
   object-fit/object-position override was needed here. This lesson's card
   is also the direct target of the homepage's BUS-BASKET-001 video card
   and of the WhatsApp purchase message's direct lesson link, both via
   #crochet-bus-basket; same top-clearance need as the ids above. */
#crochet-bus-basket{scroll-margin-top:100px;}
/* elegant leaf sweater — single photo (single listing, knitting catalog
   only). 1024×1536, exactly 2:3, matching both this box and
   .lesson-detail__media exactly — no crop at all, so no object-fit/
   object-position override was needed. No homepage video card links here
   (explicitly not added per this lesson's brief), so this id only serves
   the WhatsApp purchase message's direct lesson link. */
#elegant-leaf-sweater{scroll-margin-top:100px;}
/* 2026-09-10: prices added/corrected for 9 pre-existing crochet catalog
   lessons (page 1) — each got a permanent id matching its lesson filename
   so its WhatsApp purchase message's direct lesson link can target the
   exact card; same top-clearance need as every other id on this page. */
#white-cross-neck-top,
#summer-set-mesh-top-skirt,
#striped-summer-top,
#lace-summer-set,
#neon-green-open-back-top,
#lace-short-sleeve-top,
#white-turquoise-bikini-top,
#lace-summer-blouse{scroll-margin-top:100px;}
/* blue-white crochet sweater — 3 photos (single listing, crochet catalog
   only, page 2). All three are 941×1672 (≈0.56, narrower/taller than this
   box's portrait 2:3) — checked individually: cover crops ~130px off top
   and bottom of each (empty background above the head, legs below the
   hem), the sweater itself — collar, off-shoulder neckline, sleeves/cuffs
   and hem — stays fully in frame on all three, so center is the
   confirmed, deliberate value (same one CSS's own default already uses,
   restated here per this site's convention of documenting every checked
   photo). This lesson's card is also the direct target of the WhatsApp
   purchase message's direct lesson link via #blue-white-crochet-sweater
   (it has no homepage video card, so no other direct-link source);
   same top-clearance need as every other id on this page. */
.lesson-detail__gallery-item img.gallery-photo--blue-white-sweater,
.catalog-card__media img.gallery-photo--blue-white-sweater{object-position:center;}
#blue-white-crochet-sweater{scroll-margin-top:100px;}
#sweater-braid,
#baby-booties-bow,
#kids-hoodie-cardigan,
#pink-wave-turtleneck-sweater,
#round-marshmallow-basket,
#black-white-leather-base-basket,
#pink-three-compartment-backpack,
#crocheted-doll-cradle-basket,
#crochet-bobble-designer-bag,
#light-yarn-tassel-designer-bag,
#two-tone-v-neck-crochet-top,
#lavender-tunisian-bag,
#crochet-star-stitch-child-hat,
#crochet-crescent-bag,
#handmade-flower-crochet-bag,
#macrame-bobble-ring-handle-bag,
#plush-crochet-bunny,
#lace-clutch-bag,
#milli-bag,
#two-color-cable-baby-romper,
#baby-knitted-booties,
#baby-knitted-bonnet{scroll-margin-top:100px;}
@media (max-width:640px){
  .lesson-detail__gallery{flex-direction:column;max-width:320px;}
  /* the row layout's flex:1 1 0 relies on the row's own width constraint to
     size each item — under column direction that basis resolves against an
     unconstrained auto height and collapses items to 0px tall, so switch to
     a plain full-width box and let aspect-ratio set the height instead */
  .lesson-detail__gallery-item{flex:none;width:100%;}
}

/* Three-photo gallery modifier (full-length + front detail + back detail)
   — reuses .lesson-detail__gallery/-item's box styling (same rounded
   corners, shadow, aspect-ratio, cover-crop, lightbox) but swaps the
   container to a CSS grid so it stays one neat, symmetric row of 3 on
   desktop, shrinks fluidly through tablet widths, and only drops to a
   single column on mobile. Opt-in via .lesson-detail__gallery--triple
   alongside the base class — the plain 2-photo pages above are
   untouched by this. All three photos here are ~1023×1537 (≈2:3), so
   object-position:center on each was checked individually and crops
   next to nothing on any of them. */
.lesson-detail__gallery--triple{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:900px;
}
@media (max-width:640px){
  .lesson-detail__gallery--triple{grid-template-columns:1fr;max-width:320px;}
}

/* Multi-part video lesson structure — for a lesson sold as several
   numbered video parts (חלק א׳/ב׳/ג׳...) instead of one single
   mini-lesson video. First use: lesson-two-color-cable-baby-romper.html
   (3 parts, no links supplied yet). Reuses the site's established warm
   card-surface language (--cappuccino-light background, dashed
   --border-hairline, --radius-lg) rather than introducing a new visual
   style. Each .lesson-video-part is a placeholder box until a real
   video link is supplied — swap its .lesson-video-part__placeholder
   <span> for a real <a class="btn btn--outline btn--card"
   href="https://youtu.be/...">...</a> (or an embedded <iframe>, matching
   how the homepage's own .class-card__media--video embeds work) with no
   other structural change needed; the part number label stays as-is. */
.lesson-video-parts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:22px 0;
}
.lesson-video-part{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  padding:22px 16px;
  background:var(--cappuccino-light);
  border:1px dashed var(--beige-mid);
  border-radius:var(--radius-lg);
}
.lesson-video-part__label{
  font-family:var(--font-heading);
  font-weight:600;
  font-size:16px;
  color:var(--coffee-deep);
}
.lesson-video-part__placeholder{
  font-size:13.5px;
  color:var(--text-secondary);
}
@media (max-width:640px){
  .lesson-video-parts{grid-template-columns:1fr;}
}

/* Lightbox — click any .js-lightbox image (or button wrapping one) to view
   it enlarged. Generic and reusable on any page; script.js only creates the
   overlay when a .js-lightbox element actually exists on the page, and
   appends it directly onto <body> (not nested inside .info-card/.main/etc.)
   so no ancestor's own stacking context can trap it underneath the sticky
   nav (.site-nav is z-index:1000) — this z-index is the top layer of the
   site on purpose, above the masthead/nav/skip-link. */
.lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(58,46,34,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease;
}
.lightbox-overlay.is-open{opacity:1;visibility:visible;}
/* blocks background scroll while the lightbox is open (script.js toggles
   this on <body>); scroll is restored the moment the overlay is closed */
body.lightbox-open{overflow:hidden;}
.lightbox-overlay img{max-width:100%;max-height:100%;border-radius:var(--radius);box-shadow:var(--shadow-soft);display:block;}
.lightbox-overlay__close{
  position:absolute;
  top:20px;
  inset-inline-end:24px;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--milk);
  color:var(--ink);
  font-size:22px;
  line-height:1;
  border:0;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:1;
}

/* =========================================================
   Course page — scoped strictly to <body class="course-page"> so the
   shared masthead/nav (outside this scope's "main" rules) and every
   other page stay completely untouched.
========================================================= */
body.course-page{
  background:#E8D8C8; /* page background — this page only */
}
/* Arial typographic pair for all page CONTENT (everything inside
   <main> here) — never applied to the masthead, which lives outside
   <main> and keeps its Chonburi brand lockup exactly as-is.
   Headings: Arial at 600 for a bit more weight/distinction. */
.course-page main{
  --course-ink:#3E2E26;      /* body text */
  --course-heading:#34251F;  /* headings */
  --course-surface:#F7F1EB;  /* light accents for later stages */
  --course-accent:#B89478;   /* accent for later stages */
  font-family:Arial, Helvetica, sans-serif;
  font-weight:400;
  color:var(--course-ink);
}
.course-page main h2,
.course-page main h3{
  font-family:Arial, Helvetica, sans-serif;
  font-weight:600;
}

/* =========================================================
   Course page — intro block. Compact, boxed section — the photo is
   the background of THIS container only (not the full page width),
   sized to its own text content, not the viewport.
========================================================= */
.course-intro{
  box-sizing:border-box;
  width:calc(100% - 48px);
  max-width:1100px;
  margin:32px auto;
  padding:48px 70px 60px;
  border-radius:28px;
  overflow:hidden;
  background-image:url("assets/images/temp/course-intro-bg.png");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.course-intro__inner{
  max-width:820px;
  margin:0 auto;
  text-align:right;
  /* text sits directly on the photo — no panel, no scrim, no border */
  background:transparent;
  box-shadow:none;
  border:none;
  outline:none;
  border-radius:0;
  backdrop-filter:none;
  padding:0;
}
.course-intro__inner::before,
.course-intro__inner::after{content:none;}
.course-intro__inner h1{
  font-family:var(--handwritten-font);
  font-weight:600;
  text-shadow:none;
  font-size:clamp(32px,4.4vw,52px);
  line-height:1.2;
  color:var(--wordmark-color); /* same variable as the logo mark and "Oksana Miller Design Studio" */
  margin-bottom:.35em;
}
/* Handwritten body copy — Gveret Levin. Plain weight 500, no stroke. */
.course-intro__inner p{
  font-family:var(--handwritten-font);
  font-weight:500;
  font-style:normal;
  text-transform:none;
  text-shadow:none;
  font-size:20px;
  line-height:1.5;
  color:var(--course-ink);
  margin-bottom:14px;
}
.course-intro__inner p:last-child{margin-bottom:0;}

@media (max-width:1024px){
  .course-intro{padding:40px 40px 48px;}
}
@media (max-width:600px){
  .course-intro{
    width:calc(100% - 24px);
    margin:16px auto;
    padding:30px 20px 38px;
    border-radius:20px;
    background-position:center bottom;
  }
  .course-intro__inner h1{font-size:clamp(32px,8vw,36px);}
  .course-intro__inner p{font-size:18px;line-height:1.5;}
}

/* =========================================================
   Course page — stage 3: two separate rounded windows side
   by side. Right = two-needle knitting (photo background).
   Left = crochet, plain milk/cappuccino for now — its photo
   comes in a later stage. Descriptions, price and buttons
   are a later stage too.
========================================================= */
.course-picker{
  box-sizing:border-box;
  width:calc(100% - 48px);
  max-width:1100px;
  margin:32px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.course-picker__half{
  box-sizing:border-box;
  position:relative;
  min-height:520px;
  border-radius:26px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:22px;
  padding:48px 32px 32px;
  text-align:center;
  background:var(--milk);
}
.course-picker__half:first-child{
  background-image:url("assets/images/temp/course-picker-needles-bg.png");
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
}
.course-picker__half:last-child{
  background-image:url("assets/images/temp/course-picker-crochet-bg.png");
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
}
.course-picker .course-picker__half h2{
  font-family:var(--handwritten-font);
  font-weight:600;
  font-style:normal;
  text-shadow:none;
  font-size:clamp(38px,3vw,42px);
  line-height:1.3;
  color:var(--wordmark-color);
  margin:0;
}

/* ---- stage 4: description, subheads, list, button — added
   directly over the existing photo, no card/panel behind them ---- */
.course-picker__body{
  width:100%;
  max-width:460px;
  text-align:right;
  direction:rtl;
}
.course-picker .course-picker__half .course-picker__body p,
.course-picker .course-picker__half .course-picker__body li{
  font-family:var(--handwritten-font);
  font-weight:500;
  font-style:normal;
  text-shadow:none;
  font-size:18px;
  line-height:1.45;
  color:#3E2E26;
  margin:0 0 10px;
}
.course-picker__body p:last-child,
.course-picker__body ul:last-child{margin-bottom:0;}
.course-picker .course-picker__half .course-picker__body h3{
  font-family:var(--handwritten-font);
  font-weight:600;
  font-style:normal;
  text-shadow:none;
  font-size:clamp(23px,2vw,25px);
  line-height:1.3;
  color:var(--wordmark-color);
  margin:18px 0 8px;
}
.course-picker__body h3:first-child{margin-top:0;}
.course-picker__list{
  list-style:disc;
  list-style-position:outside;
  padding-inline-start:22px;
  margin:0 0 10px;
}
.course-picker__list li{margin-bottom:6px;}
.course-picker__list li:last-child{margin-bottom:0;}
.course-picker__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 30px;
  border-radius:14px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:500;
  color:var(--milk);
  background:linear-gradient(180deg,var(--coffee),var(--coffee-deep));
  box-shadow:0 10px 22px -10px rgba(107,78,48,0.5);
  text-decoration:none;
  white-space:nowrap;
  margin-top:auto;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.course-picker__btn:hover{
  color:var(--milk);
  background:linear-gradient(180deg,var(--coffee-deep),var(--coffee-deep-hover));
  transform:translateY(-2px);
}

@media (max-width:1024px){
  .course-picker__half{min-height:460px;padding:40px 28px 28px;}
}
@media (max-width:700px){
  .course-picker{
    width:calc(100% - 24px);
    margin:20px auto 0;
    grid-template-columns:1fr;
    gap:16px;
  }
  .course-picker__half{
    min-height:430px;
    padding:36px 24px 24px;
  }
  .course-picker__half:first-child{
    background-position:center bottom;
  }
}

/* =========================================================
   Knitting / crochet sub-pages — stage 1 stub. Header, logo,
   nav and the course title only; full content is a later stage.
========================================================= */
.course-stub{
  box-sizing:border-box;
  width:calc(100% - 48px);
  max-width:1100px;
  margin:64px auto;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 40px;
  border-radius:28px;
  background:var(--milk);
  box-shadow:var(--shadow-soft);
}
.course-stub__inner h1{
  font-family:var(--handwritten-font);
  font-weight:600;
  font-style:normal;
  text-shadow:none;
  font-size:clamp(32px,4.4vw,52px);
  line-height:1.2;
  color:var(--wordmark-color);
  margin:0;
}
.course-stub__inner p{
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.6;
  color:var(--text-secondary);
  margin:18px 0 0;
}
@media (max-width:600px){
  .course-stub{width:calc(100% - 24px);margin:32px auto;padding:44px 24px;min-height:240px;}
}

/* =========================================================
   Knitting course — full sales page. Reuses only existing
   tokens/patterns already established across the site:
   - card shell = same milk/cappuccino surface, --radius-lg,
     var(--shadow-soft) as .hero / .classes / .welcome / .info-card
   - hairline dividers = var(--border-hairline), same technique
     as .hero__route / .route-item
   - button = identical fill, radius, shadow, hover as the filled
     nav pill (.nav__link.is-active / .nav__link--contact) and the
     .course-picker__btn already approved on the picker page
   - heading font = var(--font-heading) (Arial), same as elsewhere
   - body copy = var(--font-body) (Arial), for sustained readability;
     the handwritten accent (var(--handwritten-font)) stays reserved
     for the short titles on the intro/picker page, per the brief
========================================================= */
.knitting-page main,
.crochet-page main{
  font-family:var(--font-body);
}
.knitting-page main h2,
.knitting-page main h3,
.crochet-page main h2,
.crochet-page main h3{
  font-family:var(--font-heading);
}

/* ---- shared button, identical to the filled nav pill ---- */
.course-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 30px;
  border-radius:14px;
  font-family:var(--font-body);
  font-size:16px;
  font-weight:500;
  color:var(--milk);
  background:linear-gradient(180deg,var(--coffee),var(--coffee-deep));
  box-shadow:0 10px 22px -10px rgba(107,78,48,0.5);
  text-decoration:none;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.course-btn:hover{
  color:var(--milk);
  background:linear-gradient(180deg,var(--coffee-deep),var(--coffee-deep-hover));
  transform:translateY(-2px);
}

/* ---- shared card shell, reused by the hero and the two grouped
   content cards — same visual language as .hero/.classes/.welcome ---- */
.course-hero,
.course-card,
.course-program{
  box-sizing:border-box;
  width:calc(100% - 48px);
  max-width:1100px;
  margin:32px auto 0;
  padding:48px 56px;
  border-radius:var(--radius-lg);
  background:var(--milk);
  box-shadow:var(--shadow-soft);
}
.knitting-page main .course-hero:first-child,
.crochet-page main .course-hero:first-child{margin-top:32px;}
.course-program{background:var(--cappuccino-light);}

/* ---- first screen ---- */
.course-hero__inner{max-width:760px;margin:0 auto;text-align:center;}
.course-hero__inner h1{
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.32;
  margin-bottom:.4em;
}
.course-hero__lead{
  font-size:18px;
  line-height:1.6;
  color:var(--text-secondary);
  max-width:560px;
  margin:0 auto 28px;
}
.course-hero__video{
  margin:0 auto 28px;
  max-width:520px;
  height:200px;
  border-radius:var(--radius);
  border:1.5px dashed var(--beige-mid);
  background:var(--cappuccino-light);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  text-align:center;
}
.course-hero__video span{font-size:14px;color:var(--text-secondary);}

/* ---- grouped text sections inside .course-card: intro / audience /
   includes, then support / results / about — separated by a hairline
   and spacing only, never as separate boxes ---- */
.course-card > section{
  max-width:760px;
  margin:0 auto;
  padding:32px 0;
  border-top:1px solid var(--border-hairline);
}
.course-card > section:first-child{padding-top:0;border-top:none;}
.course-card > section:last-child{padding-bottom:0;}
.course-introduction h2,
.course-audience h2,
.course-includes h2,
.personal-support h2,
.course-results h2,
.about-instructor h2{
  font-size:clamp(22px,2.4vw,28px);
  margin-bottom:.6em;
}
.course-introduction p,
.course-audience p,
.course-includes p,
.personal-support p,
.course-results p,
.about-instructor p{
  font-size:16.5px;
  line-height:1.7;
  color:var(--ink);
}
.course-audience ul,
.course-includes ul,
.course-results ul{margin:0 0 1em;}
.course-audience li,
.course-includes li,
.course-results li{
  position:relative;
  padding-inline-end:22px;
  margin-bottom:10px;
  font-size:16.5px;
  line-height:1.6;
  color:var(--ink);
}
.course-audience li::before,
.course-includes li::before,
.course-results li::before{
  content:'';
  position:absolute;
  inset-inline-end:0;
  top:9px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--coffee-deep);
  opacity:.7;
}
.emotional-closing{
  font-size:18px;
  font-weight:500;
  color:var(--coffee-deep);
}

/* ---- program: all ten lessons in one card, hairline-separated rows;
   the two personal-meeting lessons and the personal video lesson get
   a soft tint using the same accent already used for price tags ---- */
.course-program h2{
  font-size:clamp(24px,2.6vw,32px);
  text-align:center;
  margin-bottom:34px;
}
.course-lesson{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:20px;
  padding:26px 0;
  border-top:1px solid var(--border-hairline);
}
.course-lesson:first-of-type{padding-top:0;border-top:none;}
.course-lesson:last-of-type{padding-bottom:0;}
.lesson-number{
  font-family:var(--font-heading);
  font-size:34px;
  font-weight:600;
  color:var(--coffee);
  line-height:1;
}
.course-lesson h3{font-size:19px;margin-bottom:.5em;}
.course-lesson p{font-size:16px;line-height:1.65;color:var(--ink);margin-bottom:.7em;}
.course-lesson p:last-child{margin-bottom:0;}
.course-lesson.personal-lesson,
.course-lesson.personal-video{
  background:var(--milk);
  border-radius:var(--radius);
  padding:26px 24px;
  border-top:none;
  margin-top:6px;
}
.course-lesson.personal-lesson .lesson-number,
.course-lesson.personal-video .lesson-number{color:var(--coffee-deep);}

/* ---- mid-page WhatsApp nudge — no card, air + typography only ---- */
.course-followup{
  max-width:640px;
  margin:40px auto 0;
  padding:0 24px;
  text-align:center;
}
.course-followup h2{font-size:clamp(20px,2.2vw,26px);margin-bottom:.5em;}
.course-followup p{font-size:16px;color:var(--text-secondary);margin-bottom:22px;}

/* ---- price ---- */
.course-price{
  max-width:640px;
  margin:40px auto 0;
  padding:0 24px;
  text-align:center;
}
.course-price h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:.5em;}
.price-value{
  font-family:var(--font-heading);
  font-size:clamp(22px,2.6vw,28px);
  font-weight:600;
  color:var(--coffee-deep);
  margin-bottom:.5em;
}
.course-price p:not(.price-value){font-size:15.5px;color:var(--text-secondary);}

/* ---- final CTA ---- */
.course-cta{
  max-width:640px;
  margin:40px auto 56px;
  padding:0 24px;
  text-align:center;
}
.course-cta h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:.5em;}
.course-cta p{font-size:16px;color:var(--text-secondary);margin-bottom:24px;}

@media (max-width:1024px){
  .course-hero,.course-card,.course-program{padding:36px 28px;border-radius:22px;}
}
@media (max-width:600px){
  .course-hero,.course-card,.course-program{width:calc(100% - 24px);padding:28px 18px;border-radius:20px;margin-top:20px;}
  .course-hero__video{height:160px;}
  .course-lesson{grid-template-columns:44px 1fr;gap:14px;padding:20px 0;}
  .lesson-number{font-size:24px;}
  .course-lesson.personal-lesson,.course-lesson.personal-video{padding:18px 14px;}
}

/* =========================================================
   Global width safety
========================================================= */
@media (max-width:359px){
  .hero__text h1{font-size:26px;}
}