/* ==========================================================================
   Homepage (front page) — Olive Oil "homepage-2" layout
   ========================================================================== */
.home{ font-size:14px; line-height:1.5; color:#666e74; background:#fff; }
.home h1,.home h2,.home h4,.home h5{ font-family:var(--font-head); font-weight:700; color:var(--heading); margin:0; }
.home p{ margin:0; }

.oo-wrap{ max-width:1200px; margin:0 auto; padding:0 15px; }
.oo-wrap--narrow{ max-width:800px; text-align:center; }
.oo-center{ text-align:center; margin-top:34px; }
.oo-cols{ display:grid; gap:30px; }
.oo-cols--3{ grid-template-columns:repeat(3,1fr); }
.oo-cols--4{ grid-template-columns:repeat(4,1fr); }

/* ---- Buttons ---- */
.oo-btn{
  display:inline-block; padding:1.25em 2.6em; background:var(--yellow); color:var(--dark);
  font:500 12px/1.2857 var(--font-btn); text-transform:uppercase; letter-spacing:.06em;
  border:0; cursor:pointer; transition:background .25s, color .25s;
}
.oo-btn:hover{ background:var(--heading); color:var(--yellow); }
.oo-btn--small{ padding:1em 1.9em; font-size:11px; }

/* ---- Section frame / titles ---- */
.oo-section{ padding:60px 0 100px; position:relative; }
.oo-section--cream{ background:var(--cream-alt); --pat-bg:var(--cream-alt); }
.oo-section--white{ background:#fff; --pat-bg:#fff; }
/* Olive ornament: a round tab in the section's own colour that rises into the block above */
.oo-pattern::before{
  content:""; position:absolute; z-index:2; left:50%; top:-29px; width:84px; height:87px; margin-left:-42px;
  border-radius:50%; background:var(--pat-bg,#fff) url('../img/logo-notch.png') center center no-repeat;
  background-size:75px auto;
}
.oo-title{
  position:relative; isolation:isolate; text-align:center; font-size:2.643em; line-height:1;
  padding:0; margin:45px 0 88px !important;
}
.oo-title__orn{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:139px; height:105px; z-index:-1; }
.oo-title__orn img{ width:100%; height:auto; opacity:.9; }
.oo-section--white .oo-title__orn img{ opacity:.55; }

/* ---- Slider (shared) ---- */
.oo-slider{ position:relative; overflow:hidden; }
.oo-slider__track{ position:relative; width:100%; height:100%; }
.oo-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; visibility:hidden; transition:opacity .9s ease, visibility .9s;
}
.oo-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
.oo-slider__arrow{
  position:absolute; top:50%; z-index:5; width:50px; height:50px; margin-top:-25px;
  background:color-mix(in srgb, var(--dark) calc(.55*100%), transparent); border:0; cursor:pointer; transition:background .25s;
}
.oo-slider__arrow:hover{ background:var(--yellow); }
.oo-slider__arrow::before{
  content:""; position:absolute; top:50%; left:50%; width:12px; height:12px;
  border:solid #fff; border-width:0 0 2px 2px; margin:-6px 0 0 -3px; transform:rotate(45deg);
}
.oo-slider__arrow:hover::before{ border-color:var(--dark); }
.oo-slider__arrow--prev{ left:0; }
.oo-slider__arrow--next{ right:0; }
.oo-slider__arrow--next::before{ transform:rotate(-135deg); margin-left:-9px; }
.oo-slider__arrow--sq{ background:var(--yellow); }
.oo-slider__arrow--sq::before{ border-color:var(--heading); }
.oo-slider__arrow--sq:hover{ background:rgba(55,62,68,.3); }

/* ---- Hero ---- */
.oo-hero{ height:min(100vh,860px); min-height:560px; background:#33393d; }
/* Slider Revolution sizes itself: the wrapper must follow the module height, not the fixed hero box */
.oo-hero.oo-hero--rev{ height:auto; min-height:0; background:none; position:relative; overflow:hidden; }
.oo-hero .oo-slide{ display:flex; align-items:center; justify-content:center; text-align:center; }
.oo-slide__inner{ position:relative; padding:60px 24px 0; max-width:900px; }
.oo-slide__pre{
  font:400 1.6em/1.3 var(--font-head); font-style:italic; color:var(--cream); letter-spacing:.02em;
  opacity:0; transform:translateY(-24px); transition:all .8s ease .3s;
}
.oo-slide__title{
  font-size:5.2em !important; line-height:1.1 !important; color:#fff !important; margin:.15em 0 .8em !important;
  opacity:0; transform:translateY(24px); transition:all .8s ease .5s;
}
.oo-slide .oo-btn{ opacity:0; transform:translateY(24px); transition:all .8s ease .8s, background .25s, color .25s; }
.oo-slide.is-active .oo-slide__pre,
.oo-slide.is-active .oo-slide__title,
.oo-slide.is-active .oo-btn{ opacity:1; transform:none; }
/* Category slides: real <img> (indexable, has alt) under a dark overlay so the text stays readable */
.oo-slide--cat{ background:#33393d; }
.oo-slide__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.oo-slide--cat::after{ content:""; position:absolute; inset:0; background:rgba(20,24,27,.12); }
.oo-slide--cat .oo-slide__inner{ z-index:2; }
.oo-slide__title.oo-slide__title--cat{ font-size:3.8em !important; margin:.15em 0 .4em !important; }
.oo-slide__title--cat a{ color:inherit; }
.oo-slide__text{ max-width:640px; margin:0 auto 1.8em !important; font-size:1.25em; line-height:1.6; color:#fff; opacity:0; transform:translateY(24px); transition:all .8s ease .65s; }
.oo-slide.is-active .oo-slide__text{ opacity:1; transform:none; }
.oo-slider__dots{ position:absolute; left:0; right:0; bottom:28px; z-index:5; display:flex; justify-content:center; gap:0; }
.oo-slider__dot{ position:relative; width:24px; height:24px; border:0; background:transparent; padding:0; cursor:pointer; }
.oo-slider__dot::before{ content:""; position:absolute; inset:5px; border-radius:50%; border:2px solid var(--cream); background:transparent; transition:background .25s; }
.oo-slider__dot.is-active::before, .oo-slider__dot:hover::before{ background:var(--yellow); border-color:var(--yellow); }

/* ---- Service items ---- */
.oo-svc a{ color:inherit; }
.oo-svc h4{ font-size:1.429em; line-height:1.3; margin-bottom:.9em; }
.oo-svc h4::after, .oo-card h4::after{ content:""; display:block; width:30px; height:2px; background:var(--heading); margin:.45em auto 0; }
.oo-svc--2 h4::after{ margin-left:0; }
.oo-svc__icon{
  display:flex; align-items:center; justify-content:center; flex:none;
  width:84px; height:84px; border-radius:50%; transition:all .25s;
}
.oo-svc__icon svg{ width:34px; height:34px; }

.oo-services-strip{ background:var(--yellow); padding:65px 0 70px; }
.oo-svc--1{ text-align:center; }
.oo-svc--1 .oo-svc__icon{ background:var(--heading); color:var(--yellow); margin:0 auto 22px; }
.oo-svc--1 .oo-svc__icon:hover{ background:#fff; color:var(--heading); }
.oo-svc--1 h4 a{ color:var(--heading); }
.oo-svc--1 p{ color:#584b08; }

.oo-svc--2{ display:flex; gap:22px; align-items:flex-start; }
.oo-svc--2 .oo-svc__icon{ width:72px; height:72px; background:#efede9; color:var(--heading); }
.oo-svc--2 .oo-svc__icon svg{ width:30px; height:30px; }
.oo-svc--2 .oo-svc__icon:hover{ background:var(--yellow); color:#fff; }
.oo-svc--2 h4{ margin-top:6px; }
.oo-svc--2 h4 a:hover{ color:var(--yellow-dark); }

/* ---- What we do cards ---- */
.oo-card{ text-align:center; }
.oo-card__img{ display:block; overflow:hidden; margin-bottom:24px; }
.oo-card__img img{ width:100%; height:auto; transition:transform .5s ease; }
.oo-card__img:hover img{ transform:scale(1.06); }
.oo-card h4{ font-size:1.429em; margin-bottom:.9em; }
.oo-card h4 a:hover{ color:var(--yellow-dark); }

/* ---- Our story ---- */
.oo-story__grid{ display:grid; grid-template-columns:5fr 7fr; gap:40px; align-items:center; padding:40px 40px 20px; border:2px solid var(--yellow); }
.oo-story__img{ text-align:center; }
.oo-story__img img{ display:inline-block; max-width:100%; height:auto; }
.oo-timeline__box{ background:#efede9; position:relative; padding:0 0 30px; margin-bottom:40px; border-radius:6px; overflow:visible; }
.oo-timeline__box::after{
  content:""; position:absolute; left:50px; bottom:-14px; border:14px solid transparent; border-top-color:#efede9; border-bottom:0;
}
.oo-timeline__panel{ display:none; }
.oo-timeline__panel.is-active{ display:block; animation:ooFade .5s ease; }
.oo-timeline__label{ border-radius:6px 6px 0 0; background:var(--yellow); color:var(--heading); font:700 1.1em/1 var(--font-head); padding:16px 26px; margin-bottom:24px; }
.oo-timeline__panel p{ padding:0 26px; }
.oo-timeline__bar{ position:relative; display:flex; justify-content:space-between; padding:0 6px; }
.oo-timeline__bar::before{ content:""; position:absolute; left:6px; right:6px; top:20px; height:3px; background:#e5e4e3; }
.oo-timeline__stop{ position:relative; background:none; border:0; padding:0; cursor:pointer; text-align:center; color:#656d74; font:inherit; }
.oo-timeline__dot{
  display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin:0 auto 8px; border-radius:50%;
  background:var(--yellow); color:var(--heading); transition:background .25s;
}
.oo-timeline__dot svg{ width:20px; height:20px; }
.oo-timeline__stop{ font:500 16px/1.2 var(--font-btn); }
.oo-timeline__stop.is-active .oo-timeline__dot, .oo-timeline__stop:hover .oo-timeline__dot{ background:var(--dark); color:var(--yellow); }
@keyframes ooFade{ from{ opacity:0; } to{ opacity:1; } }

/* ---- Banners ---- */
.oo-banner{ background-size:cover; background-position:center; padding:4.4em 15px 5.2em; text-align:center; }
.oo-banner h1, .oo-banner h2{ font-size:4.429em; line-height:1.2; color:var(--cream) !important; margin:1.2em 0; }
.oo-banner--short h1{ margin:1em 0; }

/* ---- Our range ---- */
.oo-range__grid{ display:grid; grid-template-columns:2fr 1fr; }
.oo-cover{ height:390px; }
.oo-range__grid .oo-cover .oo-slider__track{ left:40px; width:calc(100% - 40px); }
.oo-range__grid .oo-slider__arrow{ width:40px; height:40px; margin:0; left:0; right:auto; }
.oo-range__grid .oo-slider__arrow--prev{ top:0; }
.oo-range__grid .oo-slider__arrow--next{ top:40px; }
.oo-range__grid .oo-slider__arrow--next::before{ margin-left:-6px; }
.oo-range__promo{
  background-color:var(--yellow); background-size:cover; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:30px 34px; min-height:390px;
}
.oo-range__promo h4{ font-size:1.6em; color:var(--heading); margin-top:22px; line-height:1.35; }
.oo-range__items{ padding:56px 0 6px; gap:44px 30px; }

/* ---- Products ---- */
.oo-product{ text-align:center; background:#fff; border:2px solid #e6e2d6; padding:36px 20px 40px; }
.oo-product__img{ display:block; overflow:hidden; margin:0 auto 24px; background:#fff; }
.oo-product__img img{ width:100%; height:auto; transition:transform .5s; }
.oo-product__img:hover img{ transform:scale(1.06); }
.oo-product h4{ font:400 12px/1.4 var(--font-btn); color:var(--heading); margin-bottom:.5em !important; }
.oo-product h4 a:hover{ color:var(--yellow-dark); }
.oo-product__price{ font:700 22px/1 var(--font-head); color:var(--heading); margin-bottom:24px; }
.oo-product__price::after{ content:""; display:block; width:30px; height:2px; background:var(--heading); margin:10px auto 0; }
.oo-product .oo-btn{ background:#dfdbd0; color:var(--heading); }
.oo-product .oo-btn:hover{ background:var(--yellow); }
.oo-product__price ins{ text-decoration:none; }

/* ---- Health ---- */
.oo-health{ background-size:cover; background-position:center; padding:2.4em 0 4em; }
.oo-health__title{ text-align:center; font-size:4.429em !important; color:var(--cream) !important; line-height:1.1; margin:1.1em 0 .9em !important; }
.oo-health__grid{ display:grid; grid-template-columns:1fr 370px 1fr; gap:36px; align-items:center; }
.oo-health__col{ display:flex; flex-direction:column; gap:38px; }
.oo-health__item{ display:flex; gap:18px; align-items:flex-start; color:var(--cream); }
.oo-health__col:first-child .oo-health__item{ flex-direction:row-reverse; text-align:right; }
.oo-health__num{ flex:none; font:700 3.2em/1 var(--font-head); color:var(--yellow); }
.oo-health__item h4{ color:#fff !important; font-size:1.429em; margin-bottom:.4em !important; }
.oo-health__item p{ color:#d6d2c0; }
.oo-health__img img{ width:100%; height:auto; border-radius:50%; }

/* ---- Team ---- */
.oo-team{ text-align:center; }
.oo-team__img{ overflow:hidden; margin-bottom:18px; }
.oo-team__img img{ width:100%; height:auto; transition:transform .5s; }
.oo-team:hover .oo-team__img img{ transform:scale(1.06); }
.oo-team h5{ font-size:1.429em; margin-bottom:.25em !important; }
.oo-team__role{ font-style:italic; margin-bottom:12px; }
.oo-social{ display:flex; justify-content:center; gap:8px; }
.oo-social a{ width:30px; height:30px; border:1px solid #d6d6d6; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--heading); transition:all .25s; }
.oo-social a:hover{ background:var(--yellow); border-color:var(--yellow); }
.oo-social svg{ width:13px; height:13px; }

/* ---- Tasting ---- */
.oo-tasting{ padding-bottom:70px; }
.oo-video{ position:relative; display:block; margin-bottom:34px; overflow:hidden; }
.oo-video img{ width:100%; height:auto; }
.oo-video::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.22); transition:background .25s; }
.oo-video:hover::after{ background:rgba(0,0,0,.4); }
.oo-video__play{
  position:absolute; left:50%; top:50%; z-index:2; width:78px; height:78px; margin:-39px 0 0 -39px; border-radius:50%; background:var(--yellow);
}
.oo-video__play::before{ content:""; position:absolute; left:50%; top:50%; margin:-10px 0 0 -6px; border:10px solid transparent; border-left:16px solid var(--heading); border-right:0; }
.oo-underlined{ display:inline-block; position:relative; font-size:1.429em; padding-bottom:12px; margin-bottom:18px !important; }
.oo-underlined::after{ content:""; position:absolute; left:50%; bottom:0; width:40px; height:2px; margin-left:-20px; background:var(--yellow); }
.oo-tasting p{ margin-bottom:26px; font-size:15px; }

/* ---- Blog ---- */
.oo-blog{ background-color:#fff; background-size:cover; background-position:center bottom; background-repeat:no-repeat; padding:60px 0 220px; }
.oo-post__img{ display:block; overflow:hidden; margin-bottom:18px; }
.oo-post__img img{ width:100%; height:auto; transition:transform .5s; }
.oo-post__img:hover img{ transform:scale(1.06); }
.oo-blog .oo-cols{ display:flex; flex-wrap:wrap; justify-content:center; }
.oo-blog .oo-post{ flex:0 1 calc((100% - 60px) / 3); }
.oo-post{ text-align:center; }
.oo-post__img{ margin-bottom:26px; }
.oo-post__date{ font:400 11px/1 var(--font-btn); text-transform:uppercase; color:#8a6b00; margin-bottom:22px; }
.oo-post h5{ font-size:1.429em; line-height:1.3; margin-bottom:.9em !important; }
.oo-post h5::after{ content:""; display:block; width:30px; height:2px; background:var(--heading); margin:.5em auto 0; }
.oo-post h5 a:hover{ color:var(--yellow-dark); }
.oo-post p{ margin-bottom:26px; color:#5f676d; }

/* ---- Clients carousel ---- */
.oo-clients{ background:var(--dark); padding:46px 0; }
.oo-carousel{ display:flex; align-items:center; gap:16px; }
.oo-carousel__viewport{ flex:1; overflow:hidden; }
.oo-carousel__track{ display:flex; transition:transform .5s ease; }
.oo-carousel__item{ flex:none; width:calc(100% / var(--per,5)); display:flex; align-items:center; justify-content:center; padding:0 10px; }
.oo-carousel__item img{ max-height:80px; width:auto; opacity:.85; transition:opacity .25s; }
.oo-carousel__item img:hover{ opacity:1; }
.oo-carousel__arrow{ flex:none; width:36px; height:36px; border:0; background:var(--yellow); cursor:pointer; position:relative; }
.oo-carousel__arrow::before{ content:""; position:absolute; top:50%; left:50%; width:9px; height:9px; border:solid var(--heading); border-width:0 0 2px 2px; margin:-5px 0 0 -3px; transform:rotate(45deg); }
.oo-carousel__arrow--next::before{ transform:rotate(-135deg); margin-left:-6px; }
.oo-carousel__arrow:hover{ background:#fff; }

/* ---- Responsive ---- */
@media (max-width:1000px){
  .oo-cols--4{ grid-template-columns:repeat(2,1fr); }
  .oo-slide__title, .oo-banner h1, .oo-banner h2, .oo-health__title{ font-size:3.4em !important; }
  .oo-slide__title.oo-slide__title--cat{ font-size:2.8em !important; }
  .oo-health__grid{ grid-template-columns:1fr; }
  .oo-health__img{ max-width:300px; margin:0 auto; order:-1; }
  .oo-health__col:first-child .oo-health__item{ flex-direction:row; text-align:left; }
}
@media (max-width:760px){
  .oo-blog .oo-post{ flex-basis:100%; }
  .oo-cols--3{ grid-template-columns:1fr; }
  .oo-story__grid, .oo-range__grid{ grid-template-columns:1fr; }
  .oo-cover{ height:260px; }
  .oo-slide__title, .oo-banner h1, .oo-banner h2, .oo-health__title{ font-size:2.4em !important; }
  .oo-slide__title.oo-slide__title--cat{ font-size:2em !important; }
  .oo-slide__text{ font-size:1em; }
  .oo-slide__pre{ font-size:1.2em; }
  .oo-hero{ min-height:480px; }
}
@media (max-width:480px){ .oo-cols--4{ grid-template-columns:1fr; } }

/* ---- Keep shared footer styling intact on the home page ---- */
.home .site-footer h4{ color:var(--yellow); font-size:20px; margin:0 0 20px; }
.home .site-footer p{ margin:0 0 14px; }
.footer-newsletter label{ display:block !important; }
.footer-newsletter label input{ margin:0 8px 0 0; vertical-align:middle; }
.oo-cols > *, .oo-story__grid > *, .oo-range__grid > *, .oo-health__grid > *{ min-width:0; }
.home{ overflow-x:hidden; }

/* ---- Shop by category grid (built from product categories) ---- */
.oo-catgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.oo-cat{ background:#fff; border:1px solid var(--cream); display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.oo-cat:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(66,73,78,.12); }
.oo-cat__media{ display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; background:var(--cream-alt); color:var(--heading); overflow:hidden; }
.oo-cat__media{ position:relative; }
.oo-cat__media img{ width:100%; height:100%; object-fit:cover; display:block; animation:oo-kenburns 14s ease-in-out infinite alternate; transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; will-change:transform,scale; }
.oo-cat:nth-child(even) .oo-cat__media img{ animation-direction:alternate-reverse; animation-duration:17s; }
.oo-cat:hover .oo-cat__media img{ transform:scale(1.08); filter:saturate(1.15) contrast(1.04); }
.oo-cat__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,24,27,.45), rgba(20,24,27,0) 45%); opacity:0; transition:opacity .4s; pointer-events:none; }
.oo-cat:hover .oo-cat__media::after{ opacity:1; }
.oo-cat__shine{ position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(105deg, transparent 0, rgba(255,255,255,.55) 50%, transparent 100%); transform:skewX(-18deg); pointer-events:none; z-index:2; }
.oo-cat:hover .oo-cat__shine{ animation:oo-shine 1s ease; }
.oo-cat__cta{ position:absolute; left:50%; bottom:16px; z-index:3; transform:translate(-50%,14px); opacity:0; padding:.75em 1.5em; background:var(--yellow); color:var(--heading); font:600 11px/1 var(--font-btn); letter-spacing:.08em; text-transform:uppercase; transition:opacity .35s, transform .35s; pointer-events:none; }
.oo-cat:hover .oo-cat__cta, .oo-cat:focus-within .oo-cat__cta{ opacity:1; transform:translate(-50%,0); }
.oo-cat{ animation:oo-cat-in .7s cubic-bezier(.2,.7,.2,1) backwards; }
.oo-cat:nth-child(2){ animation-delay:.08s; } .oo-cat:nth-child(3){ animation-delay:.16s; } .oo-cat:nth-child(4){ animation-delay:.24s; }
.oo-cat:nth-child(5){ animation-delay:.32s; } .oo-cat:nth-child(6){ animation-delay:.4s; } .oo-cat:nth-child(7){ animation-delay:.48s; }
@keyframes oo-kenburns{ from{ scale:1.02; translate:0 0; } to{ scale:1.12; translate:-2% -1.5%; } }
@keyframes oo-shine{ from{ left:-60%; } to{ left:130%; } }
@keyframes oo-cat-in{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .oo-cat, .oo-cat__media img{ animation:none; } .oo-cat:hover .oo-cat__shine{ animation:none; } }
.oo-cat__icon{ display:flex; align-items:center; justify-content:center; width:92px; height:92px; border-radius:50%; background:var(--heading); color:var(--yellow); transition:background .25s, color .25s; }
.oo-cat__icon svg{ width:44px; height:44px; }
.oo-cat:hover .oo-cat__icon{ background:var(--yellow); color:var(--heading); }
.oo-cat__body{ padding:22px 22px 24px; text-align:center; flex:1; display:flex; flex-direction:column; gap:10px; }
.oo-cat__body h4{ font-size:1.35em; line-height:1.25; }
.oo-cat__body h4 a{ color:inherit; }
.oo-cat__subs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; }
.oo-cat__subs a{ color:var(--text-muted); font-size:13px; }
.oo-cat__subs a:hover{ color:var(--yellow-dark); }
.oo-cat__count{ margin-top:auto; padding-top:6px; font:500 11px/1 var(--font-btn); letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); }
@media (max-width:1000px){ .oo-catgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .oo-catgrid{ grid-template-columns:1fr; } }

/* Banners over category photos: dark overlay keeps the headline readable */
.oo-banner{ position:relative; }
.oo-banner::before{ content:""; position:absolute; inset:0; background:rgba(20,24,27,.55); }
.oo-banner > *{ position:relative; }

/* ---- New Arrivals: one tab per category ---- */
.oo-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 36px; }
.oo-tabs__btn{ font:600 11px/1 var(--font-btn); letter-spacing:.08em; text-transform:uppercase; padding:1em 1.6em; background:#fff; color:var(--heading); border:2px solid #e6e2d6; cursor:pointer; transition:background .25s, border-color .25s; }
.oo-tabs__btn:hover, .oo-tabs__btn.is-active{ background:var(--yellow); border-color:var(--yellow); }
[data-product-tabs] .oo-tabpanel{ display:none; }
[data-product-tabs] .oo-tabpanel.is-active{ display:grid; }
[data-product-tabs] + .oo-center, .oo-center{ margin-top:36px; }

/* Loader — same look as the shop page */
.oo-results{ position:relative; min-height:260px; }
.oo-results .oo-tabpanel{ transition:opacity .3s, filter .3s, transform .3s; }
.oo-results.is-loading .oo-tabpanel{ opacity:.25; filter:blur(3px) saturate(.8); pointer-events:none; }
.oo-results.is-revealing .oo-tabpanel > *{ animation:shopIn .5s both; }
.oo-results.is-revealing .oo-tabpanel > :nth-child(2){ animation-delay:.06s; }
.oo-results.is-revealing .oo-tabpanel > :nth-child(3){ animation-delay:.12s; }
.oo-results.is-revealing .oo-tabpanel > :nth-child(4){ animation-delay:.18s; }
.oo-results.is-revealing .oo-tabpanel > :nth-child(n+5){ animation-delay:.24s; }
@keyframes shopIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.oo-results .shop-loader{
  position:absolute; inset:0; z-index:5; display:flex; align-items:flex-start; justify-content:center; padding-top:80px;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; pointer-events:none;
}
.oo-results.is-loading .shop-loader{ opacity:1; visibility:visible; pointer-events:auto; }
.oo-results .shop-loader__card{
  display:flex; flex-direction:column; align-items:center; gap:18px; padding:30px 44px;
  background:rgba(255,255,255,.92); border:1px solid #eee2bd; box-shadow:0 20px 60px color-mix(in srgb, var(--dark) calc(.18*100%), transparent);
  border-radius:8px; transform:translateY(10px) scale(.96); transition:transform .3s;
}
.oo-results.is-loading .shop-loader__card{ transform:none; }
.oo-results .shop-loader__ring{ position:relative; width:64px; height:64px; }
.oo-results .shop-loader__ring span{ position:absolute; inset:0; border-radius:50%; border:4px solid transparent; }
.oo-results .shop-loader__ring span:nth-child(1){ border-top-color:var(--yellow); border-right-color:var(--yellow); animation:shopSpin 1s linear infinite; }
.oo-results .shop-loader__ring span:nth-child(2){ inset:10px; border-bottom-color:var(--dark); border-left-color:var(--dark); animation:shopSpin .8s linear infinite reverse; }
.oo-results .shop-loader__ring i{
  position:absolute; left:50%; top:50%; width:12px; height:16px; margin:-8px 0 0 -6px; background:var(--yellow);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; animation:shopPulse 1s ease-in-out infinite;
}
.oo-results .shop-loader__text{ font:600 12.5px var(--font-btn); letter-spacing:.08em; text-transform:uppercase; color:var(--dark); white-space:nowrap; }
.oo-results .shop-loader__text b{ animation:shopDot 1.2s infinite both; }
.oo-results .shop-loader__text b:nth-of-type(2){ animation-delay:.2s; }
.oo-results .shop-loader__text b:nth-of-type(3){ animation-delay:.4s; }
@keyframes shopSpin{ to{ transform:rotate(360deg); } }
@keyframes shopPulse{ 50%{ transform:scale(1.35); opacity:.7; } }
@keyframes shopDot{ 0%,80%,100%{ opacity:.15; } 40%{ opacity:1; } }
.oo-results::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--yellow); z-index:6; opacity:0; }
.oo-results.is-loading::before{ opacity:1; animation:shopBar 1.4s ease-in-out infinite; }
@keyframes shopBar{ 0%{ left:0; width:0; } 50%{ left:0; width:70%; } 100%{ left:100%; width:0; } }
@media (prefers-reduced-motion:reduce){
  .oo-results .shop-loader__ring span, .oo-results .shop-loader__ring i, .oo-results .shop-loader__text b, .oo-results::before{ animation-duration:2.4s !important; }
  .oo-results.is-revealing .oo-tabpanel > *{ animation:none; }
}

/* Visually hidden, still read by search engines and screen readers (the page's single H1). */
.oo-sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }