/* Start custom CSS */.si-card{position:relative;}
.si-card .si-name a::after{content:'';position:absolute;inset:0;z-index:1;}
/* Elementor gives EVERY container position:relative, so .si-nrow - not .si-card - was the
   nearest positioned ancestor and the overlay only covered the name row (250x27 of a 300x154
   card). Making the row static hands the containing block back to .si-card. */
.si-card .si-nrow{position:static;}
.si-card:hover .si-arrow{opacity:1;}
.si-card a{text-decoration:none;color:inherit;}

/* Ruled grid — cards own every border so short rows leave empty cells blank. */
/* .elementor prefix needed: the global class is (0,2,0) and would otherwise win on source order. */
.elementor .si-card:nth-child(-n+3){border-block-start:1px solid #EEEEEE;}
.elementor .si-card:nth-child(3n+1){border-inline-start:1px solid #EEEEEE;}

.si-nav{align-items:center;}
.si-nav > *:not(:last-child)::after{content:'·';color:#CCCCCC;display:inline-block;
  line-height:1;vertical-align:middle;margin:0 13px;transform:translateY(-1px);}

@property --si-fl{syntax:'<length>';inherits:false;initial-value:0px;}
@property --si-fr{syntax:'<length>';inherits:false;initial-value:0px;}
@keyframes si-nav-fade{0%{--si-fl:0px;--si-fr:28px;}8%{--si-fl:28px;--si-fr:28px;}
  92%{--si-fl:28px;--si-fr:28px;}100%{--si-fl:28px;--si-fr:0px;}}

@media (max-width:1024px){
  .elementor .si-card:nth-child(-n+3){border-block-start:0;}
  .elementor .si-card:nth-child(3n+1){border-inline-start:0;}
  .elementor .si-card:nth-child(-n+2){border-block-start:1px solid #EEEEEE;}
  .elementor .si-card:nth-child(2n+1){border-inline-start:1px solid #EEEEEE;}
  .si-nav{margin-inline:-32px;padding-inline:32px;
          -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
          scrollbar-width:none;-ms-overflow-style:none;--si-fl:0px;--si-fr:28px;
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--si-fl),#000 calc(100% - var(--si-fr)),transparent 100%);
          animation:si-nav-fade linear both;animation-timeline:scroll(self inline);}
  .si-nav::-webkit-scrollbar{display:none;}
  .si-nav > *{flex:0 0 auto;scroll-snap-align:start;padding:14px 0;}
  .si-nav > *:not(:last-child)::after{margin:0 10px;}
}
@media (max-width:767px){
  .elementor .si-card:nth-child(-n+2){border-block-start:0;}
  .elementor .si-card:nth-child(2n+1){border-inline-start:0;}
  .elementor .si-card:first-child{border-block-start:1px solid #EEEEEE;}
  .elementor .si-card:nth-child(n){border-inline-start:1px solid #EEEEEE;}
  .si-nav{margin-inline:-20px;padding-inline:20px;}
}

/* --- Geo: pin the visitor's own country first ---------------------------
   The body gets `geo-<iso>` from the child theme (inc/oska-geo-store-order.php).
   Reorder is flex `order` only: DOM order stays alphabetical, so the Elementor
   element cache stays valid and one cached HTML blob serves every country.
   si-head and si-nav keep the default order 0, so they stay above. */
.si-country{order:2;}
.si-nav > *{order:2;}
body.geo-au #c-au, body.geo-au .si-nav-au,
body.geo-at #c-at, body.geo-at .si-nav-at,
body.geo-ca #c-ca, body.geo-ca .si-nav-ca,
body.geo-cn #c-cn, body.geo-cn .si-nav-cn,
body.geo-cz #c-cz, body.geo-cz .si-nav-cz,
body.geo-dk #c-dk, body.geo-dk .si-nav-dk,
body.geo-fr #c-fr, body.geo-fr .si-nav-fr,
body.geo-de #c-de, body.geo-de .si-nav-de,
body.geo-gb #c-gb, body.geo-gb .si-nav-gb,
body.geo-ie #c-ie, body.geo-ie .si-nav-ie,
body.geo-nl #c-nl, body.geo-nl .si-nav-nl,
body.geo-ch #c-ch, body.geo-ch .si-nav-ch,
body.geo-us #c-us, body.geo-us .si-nav-us{order:1;}

/* The separator is :not(:last-child), i.e. DOM-based. Pinning the United
   States - the last item in the DOM - is the one case where visual and DOM
   last differ, so hand it the separator and take it off Switzerland. */
body.geo-us .si-nav .si-nav-us::after{content:'·';}
body.geo-us .si-nav .si-nav-ch::after{content:none;}/* End custom CSS */