/* Start custom CSS *//* 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);}


@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;
          }
  .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;}
/* shoplinks */

/* the country name carries the 24px clearance; hand it to the row so the flag centres on the
   TEXT rather than on the text plus its margin (same fix as .b2-c-hrow on wholesale) */


/* separated from the country name by a hairline, so the two read as different things */
.elementor.elementor-116912 .c-shop{margin:0;padding-left:12px;border-left:1px solid #CCCCCC;line-height:1; font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#666666;white-space:nowrap}
.elementor.elementor-116912 .c-shop:hover{color:#141414}
/* end shoplinks *//* End custom CSS */