/*
 * Webino Elementor Addons 8.4 — canonical stability layer.
 *
 * This file is deliberately compact and loaded after the historical component
 * stylesheet. It centralizes shared primitives without changing legacy widget
 * class names or saved Elementor settings.
 */

:where(.webino-slider,.webino-product-card,.webino-quick-view,.webino-single-cart-shell,.webino-single-sticky),
:where(.webino-slider,.webino-product-card,.webino-quick-view,.webino-single-cart-shell,.webino-single-sticky) *{
  box-sizing:border-box;
}

/* Product cards keep equal-height alignment without leaving empty space below price. */
.webino-product-card:not(.webino-product-card--horizontal):not(.webino-product-card--ranked){
  display:flex;
  flex-direction:column;
}
.webino-product-card__body{
  display:flex;
  width:100%;
  min-width:0;
  min-height:0;
  flex:1 1 auto;
  flex-direction:column;
}
.webino-product-card__price-wrap,
.webino-product-card__price{margin-top:auto}
.webino-product-card__actions{flex:0 0 auto}

/* Product tool icons are independent from theme SVG defaults. */
.webino-product-card__tool{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.webino-product-card__tool :where(svg,i){
  display:block;
  width:var(--webino-tool-icon-width,18px);
  height:var(--webino-tool-icon-height,18px);
  flex:0 0 auto;
}
.webino-product-card__tool svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Shared quantity controller: deterministic columns and equal side buttons. */
.webino-cart-quantity{
  display:grid;
  grid-template-columns:var(--webino-cart-side-width,42px) minmax(var(--webino-cart-value-width,48px),1fr) var(--webino-cart-side-width,42px);
  width:var(--webino-cart-qty-width,100%);
  min-height:var(--webino-cart-qty-height,42px);
  overflow:hidden;
}
.webino-cart-quantity__button{
  display:flex;
  width:100%;
  min-width:0;
  min-height:inherit;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.webino-cart-quantity__button :where(svg,.webino-cart-quantity__icon){
  display:block;
  width:var(--webino-cart-icon-size,18px);
  height:var(--webino-cart-icon-size,18px);
  flex:0 0 auto;
}
.webino-cart-quantity__value{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Quick View modal primitives. */
.webino-quick-view__close{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.webino-quick-view__close>span{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  line-height:1;
  transform:none;
}
.webino-quick-view__body,
.webino-quick-view__product,
.webino-quick-view__content,
.webino-quick-view__media{min-width:0;max-width:100%}
@media(max-width:767px){
  .webino-quick-view__product[class*="qv-layout-"]{
    grid-template-columns:minmax(0,1fr);
    width:100%;
  }
}

/* Hero navigation remains inside the clipping context unless explicitly set outside. */
.webino-hero-slider{position:relative;isolation:isolate}
.webino-hero-slider .webino-slider__dots{
  z-index:8;
  max-width:calc(100% - 24px);
}
@media(max-width:767px){
  .webino-hero-slider:not([class*="webino-hero-dots-mobile-outside"]) .webino-slider__dots{
    position:absolute;
  }
}

/* Focus visibility and screen-reader utility shared by all modules. */
.webino-sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
:where(.webino-slider,.webino-product-card,.webino-quick-view,.webino-single-cart-shell) :focus-visible{
  outline:2px solid var(--webino-focus-ring,#5b4df7);
  outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  :where(.webino-slider,.webino-product-card,.webino-quick-view,.webino-single-cart-shell,.webino-single-sticky) *,
  :where(.webino-slider,.webino-product-card,.webino-quick-view,.webino-single-cart-shell,.webino-single-sticky) *::before,
  :where(.webino-slider,.webino-product-card,.webino-quick-view,.webino-single-cart-shell,.webino-single-sticky) *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* ========================================================================
   Webino 8.4.3 — universal plus/minus quantity controls
   ======================================================================== */
.webino-cart-quantity__icon{
  display:inline-flex!important;
  width:var(--webino-cart-icon-size,18px)!important;
  height:var(--webino-cart-icon-size,18px)!important;
  align-items:center;
  justify-content:center;
}
.webino-cart-quantity__icon--minus{display:inline-flex!important}
.webino-cart-quantity__icon--trash,
.webino-cart-quantity__selected-remove-icon{display:none!important}

/* The carousel viewport uses a negative top/bottom margin to preserve card
   shadows. Keep it behind the section header so it cannot capture clicks on
   the lower half of the View All button. */
.elementor-widget-webino-product-carousel .webino-product-showcase{
  position:relative;
  isolation:isolate;
}
.elementor-widget-webino-product-carousel .webino-product-showcase > .webino-section-header{
  position:relative!important;
  z-index:60!important;
}
.elementor-widget-webino-product-carousel .webino-product-showcase > .webino-section-header .webino-section-header__action,
.elementor-widget-webino-product-carousel .webino-product-showcase > .webino-section-header .webino-section-header__more{
  position:relative!important;
  z-index:61!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.elementor-widget-webino-product-carousel .webino-product-showcase > .webino-product-carousel{
  position:relative!important;
  z-index:1!important;
}

/* ========================================================================
   Webino 9.3.0 — stable variable-product controls
   ======================================================================== */
.webino-product-card__button--variable{cursor:pointer}
.webino-single-cart__variations{--webino-variable-gap:10px;width:100%;min-width:0}
.webino-single-cart__variations-title{margin:0 0 10px;color:#111827;font-size:15px;font-weight:900;line-height:1.7}
.webino-single-cart__variations form.variations_form{width:100%;margin:0!important}
.webino-single-cart__variations .variations{display:grid!important;width:100%;gap:var(--webino-variable-gap);margin:0 0 8px!important}
.webino-single-cart__variations--grid .variations{grid-template-columns:repeat(2,minmax(0,1fr))}
.webino-single-cart__variations--inline .variations{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.webino-single-cart__variations .variations tbody,
.webino-single-cart__variations .variations tr{display:contents!important}
.webino-single-cart__variations .variations th,
.webino-single-cart__variations .variations td{display:flex!important;width:auto!important;min-width:0;flex-direction:column;gap:6px;padding:0!important;text-align:start!important}
.webino-single-cart__variations .variations .label{font-size:12px;font-weight:800}
.webino-single-cart__variations select{width:100%;min-width:0;box-sizing:border-box;outline:0;transition:border-color .2s ease,box-shadow .2s ease}
.webino-single-cart__variations .reset_variations{width:max-content;margin-top:2px!important;font-size:12px;font-weight:800;text-decoration:none}
.webino-single-cart__variations .woocommerce-variation{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.webino-single-cart-shell[data-product-type="variable"] .webino-cart-control:not(.has-variation) .webino-single-cart__add{cursor:pointer}
.webino-single-cart-shell[data-product-type="variable"] .webino-cart-control:not(.has-variation) .webino-single-cart__add::after{content:"";position:absolute;inset:auto 12px 6px;height:2px;border-radius:999px;background:currentColor;opacity:.22;transform:scaleX(.35);transition:transform .2s ease}
.webino-single-cart-shell[data-product-type="variable"] .webino-cart-control:not(.has-variation) .webino-single-cart__add:hover::after{transform:scaleX(.62)}
@media(max-width:600px){.webino-single-cart__variations--grid .variations{grid-template-columns:1fr}}
.webino-single-cart-shell[data-product-type="variable"] .webino-cart-control:not(.has-variation) .webino-single-cart__add{position:relative}

/* ========================================================================
   Webino 11.0.2 — Elementor container and editor layout guardrails
   ======================================================================== */
.elementor-element[class*="elementor-widget-webino-"] {
  min-width:0;
  max-width:100%;
}
.elementor-element[class*="elementor-widget-webino-"] > .elementor-widget-container {
  width:100%;
  max-width:100%;
  min-width:0;
}
.elementor-element[class*="elementor-widget-webino-"] :where(
  .webino-slider,
  .webino-product-showcase,
  .webino-products-grid,
  .webino-products-shell,
  .webino-shop-archive,
  .webino-single-product,
  .webino-single-cart-shell,
  .webino-product-details,
  .webino-bundle,
  .webino-compare-table,
  .webino-checkout-page,
  .webino-cart-page
){
  max-width:100%;
  min-width:0;
}
.elementor-editor-active .elementor-element[class*="elementor-widget-webino-"] :where(img,svg,video,iframe){
  max-width:100%;
}

/* ========================================================================
   Webino 11.0.3 — Hero Slider responsive element controls
   ======================================================================== */
.webino-hero-slider--title-gradient .webino-hero-slider__title{
  background-image:linear-gradient(
    var(--webino-hero-title-gradient-angle,90deg),
    var(--webino-hero-title-gradient-start,#fff),
    var(--webino-hero-title-gradient-end,#8b5cf6)
  );
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent!important;
  -webkit-text-fill-color:transparent;
}

@media(max-width:767px){
  .webino-hero-mobile-hide-content .webino-hero-slider__content,
  .webino-hero-mobile-hide-eyebrow .webino-hero-slider__eyebrow,
  .webino-hero-mobile-hide-title .webino-hero-slider__title,
  .webino-hero-mobile-hide-description .webino-hero-slider__description,
  .webino-hero-mobile-hide-primary-button .webino-hero-slider__button--primary,
  .webino-hero-mobile-hide-secondary-button .webino-hero-slider__button--secondary,
  .webino-hero-mobile-hide-foreground .webino-hero-slider__foreground{
    display:none!important;
  }
  .webino-hero-mobile-hide-primary-button.webino-hero-mobile-hide-secondary-button .webino-hero-slider__actions{
    display:none!important;
  }
}


/* ========================================================================
   Webino 11.0.4 — Hero Slider badge width controls
   ======================================================================== */
.webino-hero-slider__eyebrow{
  box-sizing:border-box;
  width:fit-content;
  inline-size:fit-content;
  max-width:100%;
  align-self:flex-start;
  justify-content:center;
  overflow-wrap:anywhere;
}
.webino-align--right .webino-hero-slider__eyebrow{align-self:flex-start}
.webino-align--center .webino-hero-slider__eyebrow{align-self:center}
.webino-align--left .webino-hero-slider__eyebrow{align-self:flex-end}
.webino-hero-eyebrow-width-full .webino-hero-slider__eyebrow{
  width:100%;
  inline-size:100%;
  align-self:stretch;
}
.webino-hero-eyebrow-width-custom .webino-hero-slider__eyebrow{
  flex:0 0 auto;
}

/* ========================================================================
   Webino 11.0.5 — Hero Slider button typography and mobile content layout
   ======================================================================== */
/* Complete the two missing desktop placement presets while retaining all
   historical position classes and RTL/LTR behavior. */
.webino-position--top-center{align-items:flex-start;justify-content:center}
.webino-position--bottom-center{align-items:flex-end;justify-content:center}
.webino-position--center-right:dir(rtl),
.webino-position--top-right:dir(rtl),
.webino-position--bottom-right:dir(rtl){justify-content:flex-start}
.webino-position--center-right:dir(ltr),
.webino-position--top-right:dir(ltr),
.webino-position--bottom-right:dir(ltr){justify-content:flex-end}
.webino-position--center-left:dir(rtl),
.webino-position--top-left:dir(rtl),
.webino-position--bottom-left:dir(rtl){justify-content:flex-end}
.webino-position--center-left:dir(ltr),
.webino-position--top-left:dir(ltr),
.webino-position--bottom-left:dir(ltr){justify-content:flex-start}

@media(max-width:767px){
  /* The legacy frontend rule used max-width:100%!important, which prevented
     Elementor's mobile width value from becoming smaller. The variable below
     gives mobile its own deterministic width without affecting old sliders. */
  .webino-hero-slider__content{
    box-sizing:border-box;
    width:var(--webino-hero-mobile-content-width,100%);
    max-width:min(var(--webino-hero-mobile-content-width,100%),100%)!important;
    position:relative;
    left:var(--webino-hero-mobile-content-offset-x,0px);
    top:var(--webino-hero-mobile-content-offset-y,0px);
  }

  .webino-mobile-position--top-right,
  .webino-mobile-position--top-center,
  .webino-mobile-position--top-left{align-items:flex-start}
  .webino-mobile-position--center-right,
  .webino-mobile-position--center,
  .webino-mobile-position--center-left{align-items:center}
  .webino-mobile-position--bottom-right,
  .webino-mobile-position--bottom-center,
  .webino-mobile-position--bottom-left{align-items:flex-end}

  .webino-mobile-position--top-center,
  .webino-mobile-position--center,
  .webino-mobile-position--bottom-center{justify-content:center}

  .webino-mobile-position--top-right:dir(rtl),
  .webino-mobile-position--center-right:dir(rtl),
  .webino-mobile-position--bottom-right:dir(rtl){justify-content:flex-start}
  .webino-mobile-position--top-right:dir(ltr),
  .webino-mobile-position--center-right:dir(ltr),
  .webino-mobile-position--bottom-right:dir(ltr){justify-content:flex-end}

  .webino-mobile-position--top-left:dir(rtl),
  .webino-mobile-position--center-left:dir(rtl),
  .webino-mobile-position--bottom-left:dir(rtl){justify-content:flex-end}
  .webino-mobile-position--top-left:dir(ltr),
  .webino-mobile-position--center-left:dir(ltr),
  .webino-mobile-position--bottom-left:dir(ltr){justify-content:flex-start}

  .webino-mobile-align--right .webino-hero-slider__content{text-align:right}
  .webino-mobile-align--center .webino-hero-slider__content{text-align:center}
  .webino-mobile-align--left .webino-hero-slider__content{text-align:left}

  .webino-mobile-align--right .webino-hero-slider__eyebrow{align-self:flex-start}
  .webino-mobile-align--center .webino-hero-slider__eyebrow{align-self:center}
  .webino-mobile-align--left .webino-hero-slider__eyebrow{align-self:flex-end}

  .webino-mobile-align--right .webino-hero-slider__actions{justify-content:flex-start}
  .webino-mobile-align--center .webino-hero-slider__actions{justify-content:center}
  .webino-mobile-align--left .webino-hero-slider__actions{justify-content:flex-end}
}