/*!
 * Oyolloo Elements — J10 Categories widget.
 *
 * Every rule is scoped to .oo-cats-sec. There is no element selector and no
 * :root block, so nothing here can reach the theme or any other widget.
 */

.oo-cats-sec{
  --ooc-maxw:1220px;
  --ooc-pad:clamp(18px,4.5vw,44px);
  --ooc-r:12px;

  --ooc-yellow:#F7BE27;
  --ooc-red:#E3000E;
  --ooc-brown:#642F21;
  --ooc-ink:#212121;
  --ooc-muted:#757575;
  --ooc-dark:#0E0E0E;
  --ooc-border-2:#D9D9D9;

  --ooc-f-display:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --ooc-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --ooc-f-body:'Roboto','Roboto Fallback','Segoe UI',Helvetica,Arial,sans-serif;

  --ooc-ease:cubic-bezier(.22,.61,.36,1);
  --ooc-shadow:0 6px 16px rgba(100,47,33,.10), 0 34px 62px -30px rgba(100,47,33,.5);

  position:relative;
  padding:clamp(50px,6.5vw,92px) 0;
  background:#FFFFFF; color:var(--ooc-ink);
  font-family:var(--ooc-f-body); font-size:16px; line-height:1.7; font-weight:400;
}

/* box-sizing is set on the widget's own subtree, never globally */
.oo-cats-sec,.oo-cats-sec *,.oo-cats-sec *::before,.oo-cats-sec *::after{ box-sizing:border-box; }

.oo-cats-sec--alt{ background:#F7F7F7; }
.oo-cats-sec--cool{ background:#EFF6F8; }

/* a hairline where the ground changes tone */
.oo-cats-sec--alt::before,
.oo-cats-sec--cool::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--ooc-border-2),transparent);
}

.oo-cats-sec__in{
  max-width:var(--ooc-maxw); margin-inline:auto;
  padding-inline:var(--ooc-pad);
}

/* ================= section head ================= */
.oo-cats-sec__head{ margin-bottom:34px; text-align:center; }

.oo-cats-sec__eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font-family:var(--ooc-f-head); font-weight:600; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ooc-brown);
}
.oo-cats-sec__eyebrow::before{
  content:""; flex:none; width:22px; height:2px;
  background:currentColor; opacity:.5;
}

.oo-cats-sec__title{
  position:relative; margin:14px 0 0; padding-bottom:18px;
  font-family:var(--ooc-f-display); font-weight:700;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1;
  letter-spacing:.012em; text-transform:uppercase; color:var(--ooc-red);
}
.oo-cats-sec__title::after{
  content:""; position:absolute; left:50%; bottom:0;
  transform:translateX(-50%);
  width:58px; height:3px; border-radius:3px; background:var(--ooc-yellow);
}

.oo-cats-sec__lede{
  margin:16px auto 0; max-width:64ch;
  color:var(--ooc-muted); font-size:1rem;
}

/* the leading dash only reads right on one line; a centred eyebrow that wraps
   drops it */
@media (max-width:620px){
  .oo-cats-sec__eyebrow::before{ display:none; }
}

/* ================= tiles ================= */
.oo-cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .oo-cats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .oo-cats{ grid-template-columns:1fr; } }

.oo-cat{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3; border:0; padding:0;
  border-radius:var(--ooc-r); background:var(--ooc-dark);
  text-align:left; text-decoration:none; cursor:pointer;
  box-shadow:none;
  transition:transform .28s ease, box-shadow .28s ease;
}
.oo-cat:hover{ transform:translateY(-4px); box-shadow:var(--ooc-shadow); }

.oo-cat img{
  width:100%; height:100%; max-width:none; display:block;
  object-fit:cover; opacity:.9; border:0; border-radius:0;
  transition:transform .5s ease, opacity .3s ease;
}
.oo-cat:hover img{ transform:scale(1.06); opacity:1; }

/* a yellow edge wipes in along the foot of a hovered tile */
.oo-cat::after{
  content:""; position:absolute; inset:auto 0 0 0; z-index:2;
  height:3px; background:var(--ooc-yellow);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ooc-ease);
}
.oo-cat:hover::after,
.oo-cat:focus-visible::after{ transform:scaleX(1); }

.oo-cat__cap{
  position:absolute; inset:auto 0 0 0; z-index:1; padding:20px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  background:linear-gradient(to top,rgba(10,9,8,.93) 15%,rgba(10,9,8,.5) 58%,transparent);
}
.oo-cat__name{
  min-width:0;
  font-family:var(--ooc-f-display); font-weight:700; font-size:1.35rem;
  line-height:1.08; letter-spacing:.018em; text-transform:uppercase; color:#FFF;
}
.oo-cat__meta{
  flex:none; text-align:right; white-space:nowrap;
  font-family:var(--ooc-f-head); font-weight:500; font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ooc-yellow);
}
/* WooCommerce wraps a formatted price in its own spans; they inherit here */
.oo-cat__meta .amount,
.oo-cat__meta bdi,
.oo-cat__meta .woocommerce-Price-currencySymbol{ color:inherit; font:inherit; }

.oo-cats-sec :focus-visible{
  outline:3px solid var(--ooc-yellow); outline-offset:2px; border-radius:2px;
}

/* ================= reveal ================= */
.oo-js .oo-cats-sec .oo-reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.oo-js .oo-cats-sec .oo-reveal.oo-is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .oo-js .oo-cats-sec .oo-reveal{ opacity:1; transform:none; transition:none; }
  .oo-cat,.oo-cat img,.oo-cat::after{ transition:none; }
}

/* ================= theme hardening =================
   A WordPress theme styles bare elements — h2, p, a, img. Those rules beat
   inheritance however low their specificity, so anything a theme is likely to
   set is declared here rather than left to inherit. */
.oo-cats-sec__eyebrow,
.oo-cats-sec__title,
.oo-cats-sec__lede{ margin-block-end:0; }

/* the observer never fires for something already on screen in the editor, so
   the grid would sit at opacity 0 while it is being edited */
body.elementor-editor-active .oo-cats-sec .oo-reveal{ opacity:1; transform:none; }