.ygh-slider{--gap:24px;--visible:3;width:100%}
.ygh-slider__viewport{overflow: visible;width:100%}
.ygh-slider__track{touch-action: pan-y;display:flex;gap:var(--gap);will-change:transform;transition:transform 450ms ease;padding:10px 6px 24px}
.ygh-card{flex:0 0 calc((100% - (var(--gap)*(var(--visible) - 1))) / var(--visible));border-radius:22px;padding:28px 28px 22px;background:#2d2d2d;color:rgba(255,255,255,.86);box-shadow:0 8px 22px rgba(0,0,0,.20);transform:scale(.94);opacity:.55;filter:grayscale(.15);transition:transform 450ms ease,opacity 450ms ease,background 450ms ease,filter 450ms ease,box-shadow 450ms ease}
.ygh-card.is-active{background:#e7e7e7;color:#151515;opacity:1;filter:none;transform:scale(1.02);box-shadow:0 18px 45px rgba(0,0,0,.28)}
.ygh-card__title{margin:0 0 12px;font-size:32px;line-height:1.15;font-weight:700}
.ygh-card__text{margin:0 0 22px;font-size:15px;line-height:1.55;opacity:.9}
.ygh-card__btn{
  background: var(--btn-bg, #000000) !important;
  border: 2px solid var(--btn-border, #000000);
  color: var(--btn-text, #FFFFFF);
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  gap: 10px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.ygh-card.is-active .ygh-card__btn{background:#FA530D;border-color:#FA530D;color:#fff}
.ygh-card__btn:hover{transform:translateY(-1px)}
.ygh-card__btn--disabled{opacity:.55;cursor:not-allowed}
.ygh-slider__nav{display:flex;justify-content:center;gap:14px;margin-top:8px}
.ygh-slider__btn{width:44px;height:44px;border-radius:14px;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:26px;cursor:pointer;transition:transform 150ms ease,background 150ms ease}
.ygh-slider__btn:hover{transform:translateY(-1px);background:rgba(0,0,0,.65)}
@media (max-width:860px){.ygh-card__title{font-size:24px}.ygh-card{padding:22px 20px 18px}}

.ygh-card__image-wrap{margin:-6px -6px 16px;border-radius:18px;overflow:hidden}
.ygh-card__image{display:block;width:100%;height:180px;object-fit:cover}
.ygh-card.is-active .ygh-card__image{height:200px}
@media (max-width:1024px){
  .ygh-card__title{font-size:26px}
  .ygh-card__image{height:160px}
}
@media (max-width:640px){
  .ygh-card__title{font-size:22px}
  .ygh-card__image{height:150px}
}

/* Button pinned to bottom-left */
.ygh-card{
  position: relative;
  display: flex;
  flex-direction: column;
}

.ygh-card__text{
  flex-grow: 1;
}

.ygh-card__btn{
  align-self: flex-start;
  margin-top: 16px;
  margin-bottom: 18px;
}

/* Dots navigation */
.ygh-slider__dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}
.ygh-slider__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,.35);
  cursor:pointer;
  padding:0;
}
.ygh-slider__dot.is-active{
  background:#FA530D;
}

/* ===== Yagoodinhouse-like style preset ===== */
.ygh-slider{
  --card-radius: 18px;
  --card-bg-inactive: rgba(255,255,255,.10);
  --card-bg-active: rgba(245,245,245,1);
  --text-inactive: rgba(255,255,255,.55);
  --title-inactive: rgba(255,255,255,.55);
  --text-active: rgba(0,0,0,.85);
  --title-active: rgba(0,0,0,.92);
}

/* Cards */
.ygh-card{
  border-radius: var(--card-radius);
  background: var(--card-bg-inactive);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  transition: transform .35s ease, opacity .35s ease, background .35s ease, box-shadow .35s ease;
  overflow:hidden;
}

.ygh-card:not(.is-active){
  opacity: .35;
  transform: scale(.92);
  filter: saturate(.9);
}

.ygh-card.is-active{
  background: var(--card-bg-active);
  opacity: 1;
  transform: scale(var(--active-scale, 1));
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

/* Typography colors */
.ygh-card__title{color: var(--title-inactive);}
.ygh-card__text{color: var(--text-inactive);}
.ygh-card.is-active .ygh-card__title{color: var(--title-active);}
.ygh-card.is-active .ygh-card__text{color: var(--text-active);}

/* Image */
.ygh-card__image-wrap{margin:0 0 16px 0;border-radius:0;overflow:hidden}
.ygh-card__image{height:190px}
.ygh-card.is-active .ygh-card__image{height:210px}

/* Button: pill outline like reference */
.ygh-card__btn{
  background: transparent !important;
  border: 2px solid rgba(0,0,0,.75);
  color: rgba(0,0,0,.85);
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  gap: 10px;
}
.ygh-card__btn .ygh-card__arrow{display:inline-flex; transform: translateY(1px);}

.ygh-card:not(.is-active) .ygh-card__btn{
  border-color: rgba(255,255,255,.45);
  color: rgba(255,255,255,.55);
}
.ygh-card:not(.is-active) .ygh-card__btn .ygh-card__arrow{color: rgba(255,255,255,.55);}

/* Slider nav buttons (bottom center) */
.ygh-slider__nav{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:18px;
}
.ygh-slider__btn{
  width:56px;
  height:56px;
  border-radius:18px;
  background: rgba(0,0,0,.55);
  color:#fff;
  border:0;
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  font-size:28px;
}
.ygh-slider__btn:hover{background: rgba(0,0,0,.70);}

/* Dots (optional) */
.ygh-slider__dot{background: rgba(255,255,255,.35);}
.ygh-slider__dot.is-active{background: rgba(255,255,255,.90);}

/* Responsive tweaks */
@media (max-width:1024px){
  .ygh-card__image{height:170px}
  .ygh-card.is-active .ygh-card__image{height:190px}
}
@media (max-width:640px){
  .ygh-card:not(.is-active){opacity:.25; transform:scale(.94)}
  .ygh-card__btn{padding: 11px 18px}
}

.ygh-card:not(.is-active) .ygh-card__btn{
  background: rgba(0,0,0,.65) !important;
  border-color: rgba(0,0,0,.65);
  color:#ffffff;
}

/* Side padding to prevent edge cropping (show full side cards) */
.ygh-slider{
  padding-left: 90px;
  padding-right: 90px;
  box-sizing: border-box;
}
@media (max-width: 1024px){
  .ygh-slider{ padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 640px){
  .ygh-slider{ padding-left: 18px; padding-right: 18px; }
}

/* Overflow visible to avoid edge cropping of side cards */
.ygh-slider{ overflow: visible; }
.ygh-slider__viewport{ overflow: visible; }

/* === Button bottom alignment fix (even if description is empty) === */
.ygh-card{
  display: flex;
  flex-direction: column;
}

.ygh-card__content{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.ygh-card__btn{
  margin-top: auto;
}
/* === end fix === */

/* === Text alignment options (title + description) === */
.ygh-slider.ygh-align-left .ygh-card__title,
.ygh-slider.ygh-align-left .ygh-card__text{
  text-align: left;
}

.ygh-slider.ygh-align-center .ygh-card__title,
.ygh-slider.ygh-align-center .ygh-card__text{
  text-align: center;
}

.ygh-slider.ygh-align-right .ygh-card__title,
.ygh-slider.ygh-align-right .ygh-card__text{
  text-align: right;
}
/* === end alignment === */

/* === Text alignment options (global) === */
.ygh-slider.ygh-align-left .ygh-card__title,
.ygh-slider.ygh-align-left .ygh-card__desc{ text-align:left; }

.ygh-slider.ygh-align-center .ygh-card__title,
.ygh-slider.ygh-align-center .ygh-card__desc{ text-align:center; }

.ygh-slider.ygh-align-right .ygh-card__title,
.ygh-slider.ygh-align-right .ygh-card__desc{ text-align:right; }
/* === end alignment === */



/* === Separate alignment options (global) === */
.ygh-slider.ygh-title-left .ygh-card__title{ text-align:left; }
.ygh-slider.ygh-title-center .ygh-card__title{ text-align:center; }
.ygh-slider.ygh-title-right .ygh-card__title{ text-align:right; }

.ygh-slider.ygh-desc-left .ygh-card__text{ text-align:left; }
.ygh-slider.ygh-desc-center .ygh-card__text{ text-align:center; }
.ygh-slider.ygh-desc-right .ygh-card__text{ text-align:right; }

.ygh-slider.ygh-btn-left .ygh-card__btn{ align-self:flex-start; }
.ygh-slider.ygh-btn-center .ygh-card__btn{ align-self:center; }
.ygh-slider.ygh-btn-right .ygh-card__btn{ align-self:flex-end; }
/* === end === */

/* === Spacing between description and button (works with bottom-pinned button) === */
.ygh-slider .ygh-card{
  display:flex;
  flex-direction:column;
}
.ygh-slider .ygh-card__text{
  margin-bottom: 18px !important;
}
.ygh-slider .ygh-card__btn{
  margin-top:auto;
}
/* === end spacing === */


/* === Core sizing rules (respect cards-per-view) === */
.ygh-slider__viewport{ overflow: visible; }
.ygh-slider.ygh-peek-off .ygh-slider__viewport{ overflow: hidden; }

.ygh-slider__track{
  display: flex;
  gap: var(--gap, 24px);
  will-change: transform;
}

.ygh-card{
  flex: 0 0 calc((100% - (var(--visible, 1) - 1) * var(--gap, 24px)) / var(--visible, 1));
  box-sizing: border-box;
}
/* === end core sizing === */

/* === Typography variables (from module settings) === */
.ygh-slider .ygh-card__title{
  font-family: var(--title-ff, inherit);
  font-size: var(--title-fs, 22px);
  font-weight: var(--title-fw, 700);
}
.ygh-slider .ygh-card__text{
  font-family: var(--desc-ff, inherit);
  font-size: var(--desc-fs, 14px);
  font-weight: var(--desc-fw, 400);
}
/* === end typography === */

/* === Card background & opacity (global settings) === */
.ygh-slider .ygh-card{
  background-color: var(--card-inactive-bg, #ffffff) !important;
  opacity: var(--card-inactive-op, 0.4) !important;
}

.ygh-slider .ygh-card.is-active{
  background-color: var(--card-active-bg, #ffffff) !important;
  opacity: var(--card-active-op, 1) !important;
}
/* === end card bg === */

/* === Typography spacing & line-height (global settings) === */
.ygh-slider .ygh-card__title{
  line-height: var(--title-lh, 1.15);
  margin-bottom: var(--title-mb, 10px);
}
.ygh-slider .ygh-card__text{
  line-height: var(--desc-lh, 1.45);
}
/* === end === */

/* === Responsive typography overrides (optional) === */
@media (max-width: 1024px){
  .ygh-slider{
    --title-fs: var(--title-fs-t, var(--title-fs, 22px));
    --desc-fs: var(--desc-fs-t, var(--desc-fs, 14px));
  }
}
@media (max-width: 640px){
  .ygh-slider{
    --title-fs: var(--title-fs-m, var(--title-fs, 22px));
    --desc-fs: var(--desc-fs-m, var(--desc-fs, 14px));
  }
}
/* === end responsive === */

/* === Title & description colors === */
.ygh-slider .ygh-card__title{
  color: var(--title-color, #000000) !important;
}
.ygh-slider .ygh-card__text{
  color: var(--desc-color, #333333) !important;
}
.ygh-slider .ygh-card.is-active .ygh-card__title{
  color: var(--title-color-active, var(--title-color, #000000)) !important;
}
.ygh-slider .ygh-card.is-active .ygh-card__text{
  color: var(--desc-color-active, var(--desc-color, #333333)) !important;
}
/* === end colors === */

/* === Title margin-bottom from setting (override) === */
.ygh-slider .ygh-card__title{
  margin-top: 0 !important;
  margin-bottom: var(--title-mb, 10px) !important;
}
/* === end === */


/* === Prevent horizontal page scroll (Gridbox/desktop fix) === */
.ygh-slider{
  /* keep side cards visible inside the module without causing body horizontal scroll */
  box-sizing: border-box;
  max-width: 100%;
  padding-left: var(--slider-pad-d, 90px);
  padding-right: var(--slider-pad-d, 90px);
overflow-x: clip;
}
@supports not (overflow: clip){
  .ygh-slider{ overflow-x: hidden; }
}
.ygh-slider *{ box-sizing: border-box; }
/* === end === */

/* === Slider side padding responsive === */
@media (max-width: 1024px){
  .ygh-slider{ padding-left: var(--slider-pad-t, 40px); padding-right: var(--slider-pad-t, 40px); }
}
@media (max-width: 640px){
  .ygh-slider{ padding-left: var(--slider-pad-m, 16px); padding-right: var(--slider-pad-m, 16px); }
}
/* === end === */

/* === Global horizontal scroll suppression during lightbox/modal === */
html.ygh-no-hscroll, body.ygh-no-hscroll{
  overflow-x: hidden !important;
}
/* === end === */