/* 1R Reactor — frontend-base.css
 * Canonical structure: foundations → layout/components → context UI → states → responsive.
 */

/* === Foundations & Base === */
body.r1-page-title-hidden .entry-header > .entry-title,
body.r1-page-title-hidden main > .entry-title,
body.r1-page-title-hidden .wp-block-post-title,
body.r1-page-title-hidden .r1-page-title{display:none;}

/* === Layout & Components === */
.r1-has-bg-video,.r1-has-overlay{position:relative;isolation:isolate;}

/* === Animations === */
@keyframes reactor-search-spin{to{transform:rotate(360deg);}}

/* === Responsive & Conditional === */
@media (min-width:1025px){.r1-hide-desktop{display:none;}}
@media (min-width:768px) and (max-width:1024px){.r1-hide-tablet{display:none;}}
@media (max-width:767px){.r1-hide-mobile{display:none;}.r1-bg-parallax{background-attachment:scroll;}}
@media (max-width: 767px){div .products .product,
            div .columns-5 .products .product{padding: 0 !important;}}

/* === Structural layout: equal-height column rows and fullwidth inner alignment === */
.r1-fullwidth--boxed > .r1-reactor-common-content{width:min(calc(100% - 40px),var(--r1-fullwidth-content-max,1200px));max-width:100%;margin-inline:auto;}
/* Respect independent fractions on tablet/phone, including equal-height rows. */
@media(min-width:768px) and (max-width:989px){
.r1-layout-tablet-1-1{width:100%}.r1-layout-tablet-1-2{width:50%}.r1-layout-tablet-1-3{width:33.333333%}.r1-layout-tablet-2-3{width:66.666667%}.r1-layout-tablet-1-4{width:25%}.r1-layout-tablet-3-4{width:75%}.r1-layout-tablet-1-5{width:20%}.r1-layout-tablet-2-5{width:40%}.r1-layout-tablet-3-5{width:60%}.r1-layout-tablet-4-5{width:80%}
}
@media(max-width:767px){
.r1-layout-mobile-1-1{width:100%}.r1-layout-mobile-1-2{width:50%}.r1-layout-mobile-1-3{width:33.333333%}.r1-layout-mobile-2-3{width:66.666667%}.r1-layout-mobile-1-4{width:25%}.r1-layout-mobile-3-4{width:75%}.r1-layout-mobile-1-5{width:20%}.r1-layout-mobile-2-5{width:40%}.r1-layout-mobile-3-5{width:60%}.r1-layout-mobile-4-5{width:80%}
}
/* === Shared image parallax: keeps video layers untouched === */
[data-r1-parallax="1"] :is(.r1-reactor-hero__image,.r1-reactor-banner__image),
[data-r1-parallax="1"] :is(.reactor-wide-slider__media,.reactor-fullscreen-slider__media) > img{
 transform:translate3d(0,var(--r1-parallax-offset,0px),0) scale(1.15);transform-origin:center center;
}
@media(max-width:767px){
 [data-r1-parallax-mobile="0"] :is(.r1-reactor-hero__image,.r1-reactor-banner__image),
 [data-r1-parallax-mobile="0"] :is(.reactor-wide-slider__media,.reactor-fullscreen-slider__media) > img{transform:none;}
}
@media(prefers-reduced-motion:reduce){
 [data-r1-parallax="1"] :is(.r1-reactor-hero__image,.r1-reactor-banner__image),
 [data-r1-parallax="1"] :is(.reactor-wide-slider__media,.reactor-fullscreen-slider__media) > img{transform:none;}
}

/* Shared Builder Size: only explicit device values activate these selectors.
 * Empty fields emit no class/property and retain the element's native defaults. */
@media (max-width:989px){
  html body .r1rb-size-tablet-width{--r1rb-active-width:var(--r1rb-tablet-width);width:var(--r1rb-tablet-width)}
  html body .r1rb-size-tablet-max-width{--r1rb-active-max-width:var(--r1rb-tablet-max-width);max-width:var(--r1rb-tablet-max-width)}
  html body .r1rb-size-tablet-height{--r1rb-active-height:var(--r1rb-tablet-height);height:var(--r1rb-tablet-height)}
  html body .r1rb-size-tablet-min-height{--r1rb-active-min-height:var(--r1rb-tablet-min-height);min-height:var(--r1rb-tablet-min-height)}
}
@media (max-width:767px){
  html body .r1rb-size-mobile-width{--r1rb-active-width:var(--r1rb-mobile-width);width:var(--r1rb-mobile-width)}
  html body .r1rb-size-mobile-max-width{--r1rb-active-max-width:var(--r1rb-mobile-max-width);max-width:var(--r1rb-mobile-max-width)}
  html body .r1rb-size-mobile-height{--r1rb-active-height:var(--r1rb-mobile-height);height:var(--r1rb-mobile-height)}
  html body .r1rb-size-mobile-min-height{--r1rb-active-min-height:var(--r1rb-mobile-min-height);min-height:var(--r1rb-mobile-min-height)}
}


/* === Shared Size > Block alignment (not text/content alignment) ===
 * CSS margins position the element in ordinary flow and Flex; justify-self
 * handles Grid. Explicit per-side inline margins retain priority. Empty
 * selection sets no class, preserving the element's natural layout. */
html body .r1rb-block-align-desktop-left{margin-left:0;margin-right:auto;justify-self:start;}
html body .r1rb-block-align-desktop-center{margin-left:auto;margin-right:auto;justify-self:center;}
html body .r1rb-block-align-desktop-right{margin-left:auto;margin-right:0;justify-self:end;}
@media(max-width:989px){
 html body .r1rb-block-align-tablet-left{margin-left:0;margin-right:auto;justify-self:start;}
 html body .r1rb-block-align-tablet-center{margin-left:auto;margin-right:auto;justify-self:center;}
 html body .r1rb-block-align-tablet-right{margin-left:auto;margin-right:0;justify-self:end;}
}
@media(max-width:767px){
 html body .r1rb-block-align-mobile-left{margin-left:0;margin-right:auto;justify-self:start;}
 html body .r1rb-block-align-mobile-center{margin-left:auto;margin-right:auto;justify-self:center;}
 html body .r1rb-block-align-mobile-right{margin-left:auto;margin-right:0;justify-self:end;}
}

/* Fractional layout columns nested directly inside fullwidth sections. */
.r1-fullwidth>.r1-reactor-common-content:has(>.r1-layout){display:flex;flex-wrap:wrap;align-content:flex-start;align-items:stretch;}
.r1-fullwidth>.r1-reactor-common-content>.r1-layout{flex:0 0 auto;min-width:0;}
.r1-fullwidth>.r1-reactor-common-content>.r1-layout~.r1-layout{margin-top:0;}
@media(max-width:767px){.r1-fullwidth>.r1-reactor-common-content>.r1-layout:not([class*="r1-layout-mobile-"]){width:100%;}}
/* Do not let generic stacked-element margins break adjacent section columns. */
body.r1-reactor-styles-theme .entry-content > .r1-fullwidth > .r1-reactor-common-content > .r1-layout{margin-top:0;}

/* Shared typography: only elements with explicit device sizes opt in.
 * Legacy pages do not receive this class and are unaffected. */
@media (min-width:768px) and (max-width:1024px){
 html body .r1rb-typography-responsive{font-size:var(--r1rb-type-font-tablet,var(--r1rb-type-font-desktop,inherit))!important;}
}
@media (max-width:767px){
 html body .r1rb-typography-responsive{font-size:var(--r1rb-type-font-mobile,var(--r1rb-type-font-tablet,var(--r1rb-type-font-desktop,inherit)))!important;}
}

/* Universal content alignment: axes are independent, defaults retain native layout.
 * The outer layout dimensions are never changed by the alignment component. */
:is(.r1-layout,.r1-fullwidth,.r1-reactor-grid-cell,.r1-reactor-tab-panel-block):is([class*="r1rb-layout-v-"],[class*="r1rb-layout-h-"]){display:flex;flex-direction:column;}
:is(.r1-layout,.r1-fullwidth,.r1-reactor-grid-cell,.r1-reactor-tab-panel-block):is([class*="r1rb-layout-v-"],[class*="r1rb-layout-h-"]) > .r1-reactor-common-content{flex:1 1 auto;min-height:0;min-width:0;display:flex;flex-direction:column;justify-content:var(--r1rb-layout-vertical,flex-start);align-items:var(--r1rb-layout-horizontal,stretch);}
.r1rb-layout-v-start{--r1rb-layout-vertical:flex-start;}
.r1rb-layout-v-center{--r1rb-layout-vertical:center;}
.r1rb-layout-v-end{--r1rb-layout-vertical:flex-end;}
.r1rb-layout-h-start{--r1rb-layout-horizontal:flex-start;}
.r1rb-layout-h-center{--r1rb-layout-horizontal:center;}
.r1rb-layout-h-end{--r1rb-layout-horizontal:flex-end;}
/* Fractional child columns must remain horizontally arranged and retain their widths.
 * Horizontal alignment targets row distribution, vertical alignment targets rows. */
.r1-fullwidth:is([class*="r1rb-layout-v-"],[class*="r1rb-layout-h-"]) > .r1-reactor-common-content:has(> .r1-layout){flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:var(--r1rb-layout-horizontal,flex-start);align-content:var(--r1rb-layout-vertical,flex-start);}