.elementor-110 .elementor-element.elementor-element-5bafb3a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-110 .elementor-element.elementor-element-5877103{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-bb9c0aa *//* =========================================================
   JRABAWY — SHOP PAGE CUSTOM CSS
========================================================= */

@import url(
  'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap'
);


/* =========================================================
   SHOP VARIABLES
========================================================= */

#jrShopPage {

  --jr-purple:
    #350990;

  --jr-purple-dark:
    #220066;

  --jr-purple-deep:
    #12002f;

  --jr-orange:
    #fe7e00;

  --jr-white:
    #fefefe;

  --jr-black:
    #050504;

  --jr-text:
    #17131f;

  --jr-muted:
    #817b8b;

  --jr-light:
    #f8f6fc;

  --jr-border:
    rgba(
      53,
      9,
      144,
      .10
    );

  --jr-container:
    1280px;

  width:
    100%;

  min-height:
    100vh;

  direction:
    rtl;

  color:
    var(--jr-text);

  background:
    var(--jr-white);

  font-family:
    "IBM Plex Sans Arabic",
    sans-serif;

  box-sizing:
    border-box;

}


#jrShopPage *,
#jrShopPage *::before,
#jrShopPage *::after {

  box-sizing:
    border-box;

}


#jrShopPage a {

  text-decoration:
    none;

}


#jrShopPage button,
#jrShopPage select {

  font-family:
    inherit;

}


.jr-shop-container {

  width:
    min(
      calc(100% - 48px),
      var(--jr-container)
    );

  margin-inline:
    auto;

}


/* =========================================================
   HIDE DEFAULT THEME / WOOCOMMERCE SHOP OUTPUT
========================================================= */

body.woocommerce-shop
.woocommerce-products-header,

body.woocommerce-shop
.woocommerce-result-count,

body.woocommerce-shop
.woocommerce-ordering,

body.woocommerce-shop
.woocommerce
ul.products,

body.woocommerce-shop
.woocommerce
nav.woocommerce-pagination,

body.woocommerce-shop
.woocommerce-breadcrumb {

  display:
    none !important;

}


/*
 * Hello Biz / common WordPress theme header-footer.
 * Our custom Jrabawy header/footer live inside #jrShopPage.
 */

body.woocommerce-shop
header.site-header,

body.woocommerce-shop
footer.site-footer,

body.woocommerce-shop
#site-header,

body.woocommerce-shop
#site-footer {

  display:
    none !important;

}


body.woocommerce-shop
.site-main {

  margin:
    0 !important;

  padding:
    0 !important;

  max-width:
    none !important;

}


body.woocommerce-shop
#content,

body.woocommerce-shop
.site-content {

  margin:
    0 !important;

  padding:
    0 !important;

  max-width:
    none !important;

}


body.jr-shop-no-scroll {

  overflow:
    hidden;

}


/* =========================================================
   HEADER
========================================================= */

.jr-shop-header {

  position:
    sticky;

  top:
    0;

  z-index:
    1000;

  height:
    78px;

  display:
    flex;

  align-items:
    center;

  background:
    rgba(
      254,
      254,
      254,
      .91
    );

  border-bottom:
    1px solid
    rgba(
      53,
      9,
      144,
      .07
    );

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  transition:
    box-shadow .3s ease,
    background .3s ease;

}


body.admin-bar
.jr-shop-header {

  top:
    32px;

}


.jr-shop-header.is-scrolled {

  background:
    rgba(
      254,
      254,
      254,
      .97
    );

  box-shadow:
    0 12px 40px
    rgba(
      23,
      4,
      68,
      .08
    );

}


.jr-shop-header__inner {

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

}


.jr-shop-logo {

  display:
    flex;

  align-items:
    center;

  flex:
    0 0 auto;

}


.jr-shop-logo img {

  display:
    block;

  width:
    auto;

  height:
    48px;

  object-fit:
    contain;

}


.jr-shop-nav {

  display:
    flex;

  align-items:
    center;

  gap:
    clamp(
      18px,
      2.2vw,
      34px
    );

}


.jr-shop-nav a {

  position:
    relative;

  padding:
    10px 0;

  color:
    #342e3f;

  font-size:
    14px;

  font-weight:
    600;

  transition:
    color .25s ease;

}


.jr-shop-nav a::after {

  content:
    "";

  position:
    absolute;

  right:
    0;

  left:
    100%;

  bottom:
    2px;

  height:
    2px;

  border-radius:
    30px;

  background:
    var(--jr-orange);

  transition:
    left .3s
    cubic-bezier(.2,.8,.2,1);

}


.jr-shop-nav a:hover,
.jr-shop-nav a.active {

  color:
    var(--jr-purple);

}


.jr-shop-nav a:hover::after,
.jr-shop-nav a.active::after {

  left:
    0;

}


.jr-shop-header__actions {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.jr-shop-cart {

  position:
    relative;

  width:
    45px;

  height:
    45px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    var(--jr-border);

  border-radius:
    14px;

  color:
    var(--jr-purple);

  background:
    #fff;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    border-color .25s ease;

}


.jr-shop-cart:hover {

  transform:
    translateY(-2px);

  color:
    white;

  background:
    var(--jr-purple);

  border-color:
    var(--jr-purple);

}


.jr-shop-cart svg {

  width:
    21px;

  height:
    21px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linejoin:
    round;

}


.jr-shop-cart__count {

  position:
    absolute;

  top:
    -6px;

  left:
    -6px;

  min-width:
    20px;

  height:
    20px;

  padding:
    0 5px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    2px solid white;

  border-radius:
    999px;

  color:
    white;

  background:
    var(--jr-orange);

  font-family:
    Arial,
    sans-serif;

  font-size:
    10px;

  font-weight:
    700;

}


.jr-shop-header__custom {

  min-height:
    45px;

  padding:
    0 18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border-radius:
    13px;

  color:
    white;

  background:
    var(--jr-purple);

  font-size:
    13px;

  font-weight:
    700;

  box-shadow:
    0 9px 25px
    rgba(
      53,
      9,
      144,
      .14
    );

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}


.jr-shop-header__custom:hover {

  transform:
    translateY(-2px);

  background:
    var(--jr-orange);

  box-shadow:
    0 12px 30px
    rgba(
      254,
      126,
      0,
      .22
    );

}


.jr-shop-menu-button {

  display:
    none;

  width:
    43px;

  height:
    43px;

  padding:
    0;

  border:
    0;

  border-radius:
    12px;

  background:
    rgba(
      53,
      9,
      144,
      .06
    );

  cursor:
    pointer;

}


.jr-shop-menu-button span {

  display:
    block;

  width:
    20px;

  height:
    2px;

  margin:
    4px auto;

  border-radius:
    5px;

  background:
    var(--jr-purple);

}


/* =========================================================
   MOBILE MENU
========================================================= */

.jr-shop-mobile-menu {

  position:
    fixed;

  inset:
    0;

  z-index:
    2000;

  display:
    flex;

  justify-content:
    flex-start;

  visibility:
    hidden;

  opacity:
    0;

  background:
    rgba(
      5,
      5,
      4,
      .44
    );

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);

  transition:
    opacity .3s ease,
    visibility .3s ease;

}


.jr-shop-mobile-menu.active {

  visibility:
    visible;

  opacity:
    1;

}


.jr-shop-mobile-menu__panel {

  width:
    min(
      86vw,
      390px
    );

  height:
    100%;

  padding:
    24px;

  overflow-y:
    auto;

  background:
    #fff;

  transform:
    translateX(-105%);

  transition:
    transform .4s
    cubic-bezier(.2,.8,.2,1);

}


.jr-shop-mobile-menu.active
.jr-shop-mobile-menu__panel {

  transform:
    translateX(0);

}


.jr-shop-mobile-menu__head {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    35px;

}


.jr-shop-mobile-menu__head img {

  width:
    auto;

  height:
    46px;

}


.jr-shop-mobile-menu__head button {

  width:
    40px;

  height:
    40px;

  border:
    0;

  border-radius:
    12px;

  color:
    var(--jr-purple);

  background:
    rgba(
      53,
      9,
      144,
      .06
    );

  cursor:
    pointer;

  font-size:
    27px;

}


.jr-shop-mobile-menu nav {

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

}


.jr-shop-mobile-menu nav a {

  padding:
    14px 12px;

  border-bottom:
    1px solid
    rgba(
      53,
      9,
      144,
      .07
    );

  color:
    #282230;

  font-size:
    15px;

  font-weight:
    600;

}


.jr-shop-mobile-menu__cta {

  width:
    100%;

  min-height:
    52px;

  margin-top:
    26px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    14px;

  color:
    white;

  background:
    var(--jr-orange);

  font-size:
    14px;

  font-weight:
    700;

}


/* =========================================================
   HERO
========================================================= */

.jr-shop-hero {

  position:
    relative;

  min-height:
    380px;

  overflow:
    hidden;

  isolation:
    isolate;

  display:
    flex;

  align-items:
    stretch;

  background:
    linear-gradient(
      135deg,
      #fbfaff 0%,
      #f7f3ff 55%,
      #fff9f2 100%
    );

  border-bottom:
    1px solid
    rgba(
      53,
      9,
      144,
      .07
    );

}


.jr-shop-hero::before {

  content:
    "J";

  position:
    absolute;

  left:
    clamp(
      30px,
      7vw,
      120px
    );

  bottom:
    -115px;

  z-index:
    -1;

  color:
    rgba(
      53,
      9,
      144,
      .035
    );

  font-family:
    Arial,
    sans-serif;

  font-size:
    clamp(
      260px,
      28vw,
      450px
    );

  font-weight:
    900;

  line-height:
    1;

}


.jr-shop-hero__glow {

  position:
    absolute;

  border-radius:
    50%;

  filter:
    blur(20px);

  pointer-events:
    none;

  z-index:
    -2;

}


.jr-shop-hero__glow--1 {

  width:
    350px;

  height:
    350px;

  right:
    -120px;

  top:
    -170px;

  background:
    rgba(
      53,
      9,
      144,
      .09
    );

}


.jr-shop-hero__glow--2 {

  width:
    280px;

  height:
    280px;

  left:
    10%;

  bottom:
    -190px;

  background:
    rgba(
      254,
      126,
      0,
      .09
    );

}


.jr-shop-breadcrumb {

  padding-top:
    31px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #908a98;

  font-size:
    12px;

  font-weight:
    500;

}


.jr-shop-breadcrumb a {

  color:
    #746e7c;

  transition:
    color .25s ease;

}


.jr-shop-breadcrumb a:hover {

  color:
    var(--jr-purple);

}


.jr-shop-breadcrumb span:not(:last-child) {

  opacity:
    .45;

}


.jr-shop-hero__layout {

  min-height:
    365px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    clamp(
      40px,
      7vw,
      100px
    );

  padding:
    30px 0 55px;

}


.jr-shop-hero__copy {

  max-width:
    780px;

}


.jr-shop-eyebrow {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    15px;

  color:
    var(--jr-orange);

  font-family:
    Arial,
    sans-serif;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    3px;

}


.jr-shop-eyebrow::before {

  content:
    "";

  width:
    34px;

  height:
    2px;

  border-radius:
    50px;

  background:
    var(--jr-orange);

}


.jr-shop-hero h1 {

  margin:
    0;

  color:
    var(--jr-black);

  font-size:
    clamp(
      45px,
      6vw,
      78px
    );

  font-weight:
    700;

  line-height:
    1.15;

  letter-spacing:
    -2px;

}


.jr-shop-hero__copy p {

  max-width:
    670px;

  margin:
    22px 0 0;

  color:
    #6f6877;

  font-size:
    clamp(
      15px,
      1.5vw,
      19px
    );

  line-height:
    1.95;

}


.jr-shop-hero__visual {

  position:
    relative;

  flex:
    0 1 500px;

  min-width:
    360px;

  height:
    345px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.jr-shop-hero__visual-glow {

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    360px;

  height:
    250px;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(
        53,
        9,
        144,
        .17
      ) 0%,
      rgba(
        53,
        9,
        144,
        .07
      ) 46%,
      transparent 73%
    );

  filter:
    blur(15px);

  pointer-events:
    none;

}


.jr-shop-hero__visual-float {

  position:
    relative;

  z-index:
    2;

  width:
    100%;

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  animation:
    jrShopHeroFloat
    6s
    ease-in-out
    infinite;

  will-change:
    transform;

}


.jr-shop-hero__image {

  display:
    block;

  width:
    auto;

  height:
    auto;

  max-width:
    100%;

  max-height:
    345px;

  object-fit:
    contain;

  object-position:
    center;

  user-select:
    none;

  -webkit-user-drag:
    none;

  filter:
    drop-shadow(
      0 30px 32px
      rgba(
        32,
        5,
        85,
        .18
      )
    );

}


@keyframes jrShopHeroFloat {

  0%,
  100% {

    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(-1deg);

  }

  50% {

    transform:
      translate3d(
        0,
        -14px,
        0
      )
      rotate(1deg);

  }

}


/* =========================================================
   PRODUCTS SECTION
========================================================= */

.jr-shop-products {

  padding:
    85px 0 110px;

  background:
    var(--jr-white);

}


.jr-shop-section-head {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  margin-bottom:
    35px;

}


.jr-shop-section-label {

  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--jr-orange);

  font-size:
    13px;

  font-weight:
    700;

}


.jr-shop-section-head h2 {

  margin:
    0;

  color:
    var(--jr-black);

  font-size:
    clamp(
      32px,
      4vw,
      50px
    );

  line-height:
    1.25;

  letter-spacing:
    -1.3px;

}


.jr-shop-results-text {

  color:
    var(--jr-muted);

  font-size:
    13px;

  font-weight:
    500;

}


/* =========================================================
   TOOLBAR
========================================================= */

.jr-shop-toolbar {

  position:
    relative;

  z-index:
    20;

  margin-bottom:
    42px;

  padding:
    15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    22px;

  border:
    1px solid
    rgba(
      53,
      9,
      144,
      .08
    );

  border-radius:
    20px;

  background:
    #fbfaff;

}


.jr-shop-filter-area {

  min-width:
    0;

  flex:
    1 1 auto;

}


.jr-shop-filter-track {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  overflow-x:
    auto;

  overscroll-behavior-inline:
    contain;

  scrollbar-width:
    none;

  scroll-behavior:
    smooth;

  padding:
    1px;

}


.jr-shop-filter-track::-webkit-scrollbar {

  display:
    none;

}


.jr-shop-filter {

  flex:
    0 0 auto;

  min-height:
    41px;

  padding:
    0 16px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border:
    1px solid
    rgba(
      53,
      9,
      144,
      .08
    );

  border-radius:
    12px;

  color:
    #4e4758;

  background:
    white;

  cursor:
    pointer;

  font-size:
    12px;

  font-weight:
    600;

  white-space:
    nowrap;

  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;

}


.jr-shop-filter span {

  min-width:
    20px;

  height:
    20px;

  padding:
    0 5px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    100px;

  color:
    var(--jr-purple);

  background:
    rgba(
      53,
      9,
      144,
      .07
    );

  font-family:
    Arial,
    sans-serif;

  font-size:
    9px;

  font-weight:
    700;

}


.jr-shop-filter:hover {

  transform:
    translateY(-2px);

  color:
    var(--jr-purple);

  border-color:
    rgba(
      53,
      9,
      144,
      .18
    );

}


.jr-shop-filter.active {

  color:
    white;

  background:
    var(--jr-purple);

  border-color:
    var(--jr-purple);

  box-shadow:
    0 8px 22px
    rgba(
      53,
      9,
      144,
      .16
    );

}


.jr-shop-filter.active span {

  color:
    white;

  background:
    rgba(
      255,
      255,
      255,
      .16
    );

}


.jr-shop-sort {

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

}


.jr-shop-sort label {

  color:
    #766f7e;

  font-size:
    11px;

  font-weight:
    600;

  white-space:
    nowrap;

}


.jr-shop-sort__select {

  position:
    relative;

  min-width:
    190px;

}


.jr-shop-sort select {

  width:
    100%;

  height:
    42px;

  padding:
    0 15px 0 40px;

  appearance:
    none;

  -webkit-appearance:
    none;

  border:
    1px solid
    rgba(
      53,
      9,
      144,
      .10
    );

  outline:
    none;

  border-radius:
    12px;

  color:
    #3e3748;

  background:
    white;

  cursor:
    pointer;

  font-size:
    12px;

  font-weight:
    600;

}


.jr-shop-sort__select svg {

  position:
    absolute;

  left:
    13px;

  top:
    50%;

  width:
    16px;

  height:
    16px;

  pointer-events:
    none;

  transform:
    translateY(-50%);

  fill:
    none;

  stroke:
    var(--jr-purple);

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


/* =========================================================
   PRODUCTS GRID
========================================================= */

.jr-shop-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    26px 20px;

}


/* =========================================================
   PRODUCT CARD
========================================================= */

.jr-shop-product {

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      53,
      9,
      144,
      .09
    );

  border-radius:
    22px;

  background:
    white;

  box-shadow:
    0 5px 20px
    rgba(
      53,
      9,
      144,
      .025
    );

  opacity:
    0;

  transform:
    translateY(18px);

  transition:
    opacity .6s
    cubic-bezier(.2,.8,.2,1),
    transform .6s
    cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    border-color .35s ease;

}


.jr-shop-product.jr-shop-revealed {

  opacity:
    1;

  transform:
    translateY(0);

}


.jr-shop-product:hover {

  border-color:
    rgba(
      53,
      9,
      144,
      .17
    );

  box-shadow:
    0 24px 55px
    rgba(
      38,
      7,
      102,
      .10
    );

}


.jr-shop-product__image {

  position:
    relative;

  display:
    block;

  width:
    100%;

  aspect-ratio:
    1 / 1.08;

  overflow:
    hidden;

  background:
    #180b70;

}


.jr-shop-product__image img {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform .7s
    cubic-bezier(.2,.8,.2,1);

}


.jr-shop-product:hover
.jr-shop-product__image img {

  transform:
    scale(1.035);

}


.jr-shop-product__badge {

  position:
    absolute;

  top:
    14px;

  right:
    14px;

  z-index:
    5;

  min-height:
    30px;

  padding:
    0 11px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    100px;

  color:
    white;

  background:
    var(--jr-orange);

  font-size:
    10px;

  font-weight:
    700;

  box-shadow:
    0 7px 20px
    rgba(
      254,
      126,
      0,
      .25
    );

}


.jr-shop-product__placeholder {

  position:
    absolute;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    white;

  background:
    var(--jr-purple);

  font-family:
    Arial,
    sans-serif;

  font-size:
    70px;

  font-weight:
    800;

}


.jr-shop-product__body {

  padding:
    18px 18px 20px;

}


.jr-shop-product__category {

  display:
    inline-block;

  margin-bottom:
    7px;

  color:
    var(--jr-purple);

  font-size:
    10px;

  font-weight:
    600;

}


.jr-shop-product h3 {

  min-height:
    52px;

  margin:
    0;

  font-size:
    15px;

  font-weight:
    600;

  line-height:
    1.7;

}


.jr-shop-product h3 a {

  display:
    -webkit-box;

  overflow:
    hidden;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;

  color:
    var(--jr-black);

  transition:
    color .25s ease;

}


.jr-shop-product:hover
h3 a {

  color:
    var(--jr-purple);

}


.jr-shop-product__availability {

  margin:
    8px 0 0;

  color:
    #9a94a2;

  font-size:
    10px;

  line-height:
    1.6;

}


.jr-shop-product__price {

  min-height:
    35px;

  margin:
    11px 0 15px;

  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    7px;

}


.jr-shop-product__price del {

  color:
    #aaa5af;

  font-size:
    11px;

  font-weight:
    500;

}


.jr-shop-product__price strong {

  color:
    var(--jr-purple);

  font-size:
    16px;

  font-weight:
    700;

}


.jr-shop-product__button {

  width:
    100%;

  min-height:
    46px;

  padding:
    0 14px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  border-radius:
    13px;

  color:
    white;

  background:
    linear-gradient(
      90deg,
      #8121ea 0%,
      var(--jr-purple) 100%
    );

  font-size:
    12px;

  font-weight:
    700;

  box-shadow:
    0 9px 24px
    rgba(
      53,
      9,
      144,
      .14
    );

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;

}


.jr-shop-product__button:hover {

  transform:
    translateY(-2px);

  background:
    var(--jr-orange);

  box-shadow:
    0 12px 30px
    rgba(
      254,
      126,
      0,
      .22
    );

}


.jr-shop-product__button-arrow {

  width:
    27px;

  height:
    27px;

  flex:
    0 0 27px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  color:
    white;

  background:
    rgba(
      255,
      255,
      255,
      .14
    );

  transition:
    transform .28s ease,
    background .28s ease;

}


.jr-shop-product__button:hover
.jr-shop-product__button-arrow {

  transform:
    translateX(-3px);

  background:
    rgba(
      255,
      255,
      255,
      .20
    );

}


.jr-shop-product__button svg {

  width:
    13px;

  height:
    13px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


/* =========================================================
   SKELETON
========================================================= */

.jr-shop-skeleton {

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      53,
      9,
      144,
      .06
    );

  border-radius:
    22px;

  background:
    white;

}


.jr-shop-skeleton__image,
.jr-shop-skeleton__line,
.jr-shop-skeleton__button {

  position:
    relative;

  overflow:
    hidden;

  background:
    #f0edf5;

}


.jr-shop-skeleton__image {

  aspect-ratio:
    1 / 1.08;

}


.jr-shop-skeleton__line {

  width:
    calc(100% - 36px);

  height:
    13px;

  margin:
    12px 18px 0;

  border-radius:
    100px;

}


.jr-shop-skeleton__line--short {

  width:
    40%;

  height:
    9px;

  margin-top:
    18px;

}


.jr-shop-skeleton__line--small {

  width:
    55%;

  height:
    10px;

}


.jr-shop-skeleton__button {

  height:
    45px;

  margin:
    17px 18px 20px;

  border-radius:
    13px;

}


.jr-shop-skeleton__image::after,
.jr-shop-skeleton__line::after,
.jr-shop-skeleton__button::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  transform:
    translateX(100%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        255,
        255,
        .9
      ),
      transparent
    );

  animation:
    jrShopSkeleton
    1.5s
    infinite;

}


@keyframes jrShopSkeleton {

  to {

    transform:
      translateX(-100%);

  }

}


/* =========================================================
   EMPTY MESSAGE
========================================================= */

.jr-shop-message {

  margin-top:
    20px;

  padding:
    75px 25px;

  text-align:
    center;

  border:
    1px solid
    var(--jr-border);

  border-radius:
    25px;

  background:
    var(--jr-light);

}


.jr-shop-message__icon {

  width:
    68px;

  height:
    68px;

  margin:
    0 auto 18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    19px;

  color:
    white;

  background:
    var(--jr-purple);

  font-family:
    Arial,
    sans-serif;

  font-size:
    38px;

  font-weight:
    800;

}


.jr-shop-message h3 {

  margin:
    0 0 8px;

  color:
    var(--jr-black);

  font-size:
    21px;

}


.jr-shop-message p {

  margin:
    0;

  color:
    var(--jr-muted);

  font-size:
    13px;

}


/* =========================================================
   LOAD MORE
========================================================= */

.jr-shop-load-more-wrap {

  margin-top:
    48px;

  text-align:
    center;

}


.jr-shop-load-more {

  min-height:
    50px;

  padding:
    0 23px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  border:
    0;

  border-radius:
    13px;

  color:
    white;

  background:
    var(--jr-purple);

  cursor:
    pointer;

  font-size:
    13px;

  font-weight:
    700;

  box-shadow:
    0 10px 28px
    rgba(
      53,
      9,
      144,
      .15
    );

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;

}


.jr-shop-load-more:hover {

  transform:
    translateY(-3px);

  background:
    var(--jr-orange);

  box-shadow:
    0 14px 35px
    rgba(
      254,
      126,
      0,
      .23
    );

}


.jr-shop-load-more svg {

  width:
    16px;

  height:
    16px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


/* =========================================================
   CUSTOM CTA
========================================================= */

.jr-shop-custom-cta {

  padding:
    0 0 100px;

  background:
    white;

}


.jr-shop-custom-cta__box {

  position:
    relative;

  min-height:
    345px;

  padding:
    65px
    clamp(
      30px,
      6vw,
      90px
    );

  overflow:
    hidden;

  isolation:
    isolate;

  display:
    flex;

  align-items:
    center;

  border-radius:
    32px;

  color:
    white;

  background:
    linear-gradient(
      120deg,
      #130033 0%,
      #26006d 45%,
      var(--jr-purple) 100%
    );

}


.jr-shop-custom-cta__content {

  position:
    relative;

  z-index:
    3;

  max-width:
    680px;

}


.jr-shop-custom-cta__content > span {

  color:
    var(--jr-orange);

  font-size:
    13px;

  font-weight:
    700;

}


.jr-shop-custom-cta h2 {

  margin:
    8px 0 12px;

  font-size:
    clamp(
      33px,
      4.5vw,
      53px
    );

  font-weight:
    700;

  line-height:
    1.35;

  letter-spacing:
    -1.4px;

}


.jr-shop-custom-cta p {

  max-width:
    560px;

  margin:
    0 0 28px;

  color:
    rgba(
      255,
      255,
      255,
      .67
    );

  font-size:
    15px;

  line-height:
    1.9;

}


.jr-shop-custom-cta__button {

  min-height:
    52px;

  padding:
    0 24px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

  border-radius:
    12px;

  color:
    white;

  background:
    var(--jr-orange);

  font-size:
    13px;

  font-weight:
    700;

  box-shadow:
    0 12px 32px
    rgba(
      254,
      126,
      0,
      .20
    );

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.jr-shop-custom-cta__button:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 17px 40px
    rgba(
      254,
      126,
      0,
      .31
    );

}


.jr-shop-custom-cta__button svg {

  width:
    17px;

  height:
    17px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.jr-shop-custom-cta__ring {

  position:
    absolute;

  border-radius:
    50%;

  pointer-events:
    none;

  z-index:
    -1;

}


.jr-shop-custom-cta__ring--1 {

  width:
    430px;

  height:
    430px;

  left:
    -100px;

  top:
    -130px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .08
    );

}


.jr-shop-custom-cta__ring--2 {

  width:
    290px;

  height:
    290px;

  left:
    -20px;

  top:
    -55px;

  border:
    1px solid
    rgba(
      254,
      126,
      0,
      .22
    );

}


/* =========================================================
   FOOTER
========================================================= */

.jr-shop-footer {

  padding:
    75px 0 25px;

  color:
    rgba(
      255,
      255,
      255,
      .74
    );

  background:
    #08020e;

}


.jr-shop-footer__grid {

  display:
    grid;

  grid-template-columns:
    minmax(
      300px,
      1.7fr
    )
    repeat(
      3,
      minmax(
        150px,
        1fr
      )
    );

  gap:
    55px;

}


.jr-shop-footer__logo {

  display:
    inline-flex;

  margin-bottom:
    20px;

}


.jr-shop-footer__logo img {

  width:
    auto;

  height:
    64px;

  display:
    block;

  object-fit:
    contain;

}


.jr-shop-footer__brand p {

  max-width:
    390px;

  margin:
    0;

  color:
    rgba(
      255,
      255,
      255,
      .56
    );

  font-size:
    13px;

  line-height:
    1.95;

}


.jr-shop-socials {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-top:
    23px;

}


.jr-shop-socials a {

  width:
    38px;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .10
    );

  border-radius:
    11px;

  color:
    rgba(
      255,
      255,
      255,
      .72
    );

  background:
    rgba(
      255,
      255,
      255,
      .03
    );

  font-family:
    Arial,
    sans-serif;

  font-size:
    10px;

  font-weight:
    700;

  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;

}


.jr-shop-socials a:hover {

  transform:
    translateY(-2px);

  color:
    white;

  background:
    var(--jr-purple);

  border-color:
    var(--jr-purple);

}


.jr-shop-footer__column {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    11px;

}


.jr-shop-footer__column h3 {

  margin:
    0 0 8px;

  color:
    white;

  font-size:
    15px;

  font-weight:
    700;

}


.jr-shop-footer__column a {

  color:
    rgba(
      255,
      255,
      255,
      .52
    );

  font-size:
    12px;

  transition:
    color .25s ease,
    transform .25s ease;

}


.jr-shop-footer__column a:hover {

  transform:
    translateX(-3px);

  color:
    var(--jr-orange);

}


.jr-shop-footer__bottom {

  margin-top:
    60px;

  padding-top:
    22px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      .08
    );

  color:
    rgba(
      255,
      255,
      255,
      .37
    );

  font-size:
    11px;

}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (
  max-width: 1180px
) {

  .jr-shop-grid {

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );

  }


  .jr-shop-nav {

    gap:
      18px;

  }


  .jr-shop-header__custom {

    display:
      none;

  }

}


/* =========================================================
   TABLET
========================================================= */

@media (
  max-width: 900px
) {

  .jr-shop-nav,
  .jr-shop-header__actions {

    display:
      none;

  }


  .jr-shop-menu-button {

    display:
      block;

  }


  .jr-shop-header__inner {

    gap:
      15px;

  }


  .jr-shop-hero__layout {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      30px;

  }


  .jr-shop-hero__visual {

    width:
      100%;

    min-width:
      0;

    flex-basis:
      auto;

    height:
      310px;

  }


  .jr-shop-hero__image {

    max-height:
      300px;

  }


  .jr-shop-toolbar {

    align-items:
      stretch;

    flex-direction:
      column;

  }


  .jr-shop-sort {

    justify-content:
      space-between;

  }


  .jr-shop-sort__select {

    width:
      min(
        100%,
        250px
      );

  }


  .jr-shop-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

  }


  .jr-shop-footer__grid {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

  }


  .jr-shop-footer__brand {

    grid-column:
      1 / -1;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width: 767px
) {

  body.admin-bar
  .jr-shop-header {

    top:
      46px;

  }


  .jr-shop-container {

    width:
      min(
        calc(
          100% - 28px
        ),
        var(
          --jr-container
        )
      );

  }


  .jr-shop-header {

    height:
      68px;

  }


  .jr-shop-logo img {

    height:
      42px;

  }


  .jr-shop-hero {

    min-height:
      auto;

  }


  .jr-shop-breadcrumb {

    padding-top:
      22px;

    font-size:
      10px;

  }


  .jr-shop-hero__layout {

    min-height:
      auto;

    padding:
      40px 0 55px;

  }


  .jr-shop-eyebrow {

    font-size:
      9px;

    letter-spacing:
      2px;

  }


  .jr-shop-hero h1 {

    font-size:
      clamp(
        39px,
        12vw,
        54px
      );

    letter-spacing:
      -1px;

  }


  .jr-shop-hero__copy p {

    margin-top:
      16px;

    font-size:
      14px;

    line-height:
      1.85;

  }


  .jr-shop-hero__visual {

    width:
      100%;

    min-width:
      0;

    height:
      270px;

    margin-top:
      4px;

  }


  .jr-shop-hero__visual-float {

    height:
      260px;

  }


  .jr-shop-hero__image {

    max-width:
      96%;

    max-height:
      255px;

  }


  .jr-shop-hero__visual-glow {

    width:
      260px;

    height:
      195px;

  }


  .jr-shop-products {

    padding:
      58px 0 75px;

  }


  .jr-shop-section-head {

    align-items:
      flex-start;

    margin-bottom:
      25px;

  }


  .jr-shop-section-head h2 {

    font-size:
      31px;

  }


  .jr-shop-results-text {

    padding-top:
      7px;

    font-size:
      10px;

  }


  .jr-shop-toolbar {

    margin-bottom:
      28px;

    padding:
      10px;

    border-radius:
      16px;

  }


  .jr-shop-filter {

    min-height:
      37px;

    padding:
      0 13px;

    font-size:
      10px;

  }


  .jr-shop-sort label {

    display:
      none;

  }


  .jr-shop-sort__select {

    width:
      100%;

    max-width:
      none;

  }


  .jr-shop-grid {

    column-gap:
      10px;

    row-gap:
      22px;

  }


  .jr-shop-product {

    border-radius:
      15px;

  }


  .jr-shop-product__image {

    aspect-ratio:
      1 / 1.12;

  }


  .jr-shop-product__badge {

    top:
      8px;

    right:
      8px;

    min-height:
      24px;

    padding:
      0 8px;

    font-size:
      8px;

  }


  .jr-shop-product__body {

    padding:
      12px 10px 13px;

  }


  .jr-shop-product__category {

    margin-bottom:
      5px;

    font-size:
      8px;

  }


  .jr-shop-product h3 {

    min-height:
      43px;

    font-size:
      11px;

    line-height:
      1.7;

  }


  .jr-shop-product__availability {

    margin-top:
      6px;

    font-size:
      8px;

  }


  .jr-shop-product__price {

    min-height:
      31px;

    margin:
      8px 0 10px;

    gap:
      5px;

  }


  .jr-shop-product__price del {

    font-size:
      8px;

  }


  .jr-shop-product__price strong {

    font-size:
      12px;

  }


  .jr-shop-product__button {

    min-height:
      39px;

    padding:
      0 9px;

    gap:
      7px;

    border-radius:
      10px;

    font-size:
      9px;

  }


  .jr-shop-product__button-arrow {

    width:
      23px;

    height:
      23px;

    flex-basis:
      23px;

  }


  .jr-shop-product__button svg {

    width:
      11px;

    height:
      11px;

  }


  .jr-shop-load-more-wrap {

    margin-top:
      35px;

  }


  .jr-shop-custom-cta {

    padding-bottom:
      60px;

  }


  .jr-shop-custom-cta__box {

    min-height:
      320px;

    padding:
      45px 24px;

    border-radius:
      23px;

  }


  .jr-shop-custom-cta h2 {

    font-size:
      33px;

  }


  .jr-shop-custom-cta p {

    font-size:
      13px;

  }


  .jr-shop-footer {

    padding-top:
      55px;

  }


  .jr-shop-footer__grid {

    grid-template-columns:
      1fr;

    gap:
      35px;

  }


  .jr-shop-footer__brand {

    grid-column:
      auto;

  }


  .jr-shop-footer__bottom {

    margin-top:
      40px;

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      6px;

  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
  max-width: 370px
) {

  .jr-shop-grid {

    column-gap:
      7px;

  }


  .jr-shop-product__body {

    padding-inline:
      8px;

  }


  .jr-shop-product__button {

    padding-inline:
      7px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  #jrShopPage *,
  #jrShopPage *::before,
  #jrShopPage *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}/* End custom CSS */
/* Start custom CSS for woocommerce-archive-description, class: .elementor-element-8533914 */.jr-shop-required-archive {
    display: none !important;
}/* End custom CSS */