/* Roxoss tweaks 0.3.0 - product cards everywhere (archives .products, Flatsome UX builder product rows/grids and
   .row-slider / flickity sliders on the home page): every card in a row is as tall as the row and its text column
   grows, so the "Visa produkt" / add-to-cart button sits at the bottom whatever the title length, price lines or
   variation swatches above it. Archives (.products, flex rows) do it in CSS; sliders (flickity places the cells
   absolutely) and block/inline-block rows get the tallest card's height per visual row from tweaks.js. */
.product-small.col > .col-inner { display: flex; flex-direction: column; }
/* 0.6.4: the card fills its grid cell by flex (not height:100%, which needs a definite parent height) */
.products > .product-small.col { display: flex; flex-direction: column; }
.products > .product-small.col > .col-inner { flex: 1 0 auto; }
.product-small.col > .col-inner > .product-small.box { flex: 1 1 auto; display: flex; flex-direction: column; }
.product-small.box > .box-text { flex: 1 1 auto; display: flex; flex-direction: column; }
/* from the bottom up: button, swatch block (.rxtw-swb, made by tweaks.js), price; the title takes the free space, so
   prices and swatch rows start at the same height in a row (tweaks.js gives price and swatch block the row's height) */
.product-small.box > .box-text > .title-wrapper { flex: 1 0 auto; }
.rxtw-swb > .rxa-archive:last-child { margin-bottom: 0; }
.product-small.box > .box-text > .custom-visa-produkt-button,
.product-small.box > .box-text > .add-to-cart-button,
.product-small.box > .box-text > a.button { margin-top: auto !important; align-self: flex-start; }
.product-small.box > .box-text.text-center > .custom-visa-produkt-button,
.product-small.box > .box-text.text-center > a.button { align-self: center; }
/* Flatsome's equalize-box sets a fixed height on .box-text by script; the flex column above makes it unnecessary */
.equalize-box .product-small.box > .box-text { height: auto !important; }
/* the same gap above the button on every card (price or swatch row right above it) */
.product-small.box > .box-text > :not(.rxa-cardsw):has(+ .custom-visa-produkt-button, + .add-to-cart-button, + a.button) { margin-bottom: 10px !important; }

/* product page head (inc/product-head.php): brand kicker above the H1, one compact code row */
.rxtw-brand { margin: 0 0 4px; font-size: .78em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.rxtw-brand a { color: #555; text-decoration: none; display: inline-flex; flex-direction: column; gap: 6px; }
.rxtw-brand a:hover .rxtw-brand-name { text-decoration: underline; }
.rxtw-brand-logo { display: block; max-height: 32px; width: auto; margin: 0; }
.rxtw-codes { display: flex; flex-wrap: wrap; gap: 2px 0; padding: 5px 0; border-top: 1px dotted #ddd; font-size: .9em; color: #777; line-height: 1.5; }
.rxtw-code[hidden] { display: none; }
.rxtw-codes:not(:has(.rxtw-code:not([hidden]))) { display: none; }
.rxtw-code:not([hidden]) ~ .rxtw-code:not([hidden])::before { content: "\00b7"; margin: 0 8px; color: #999; }
.rxtw-code-label { font-weight: 600; color: #333; }
.product_meta .rx-mpn-wrapper { display: none; }
/* 0.3.2: with a swatch block above it the button had 10px + the swatch row's own margin + the reserved name line:
   too much air (Alex 2026-10-22). The 10px stays for cards without swatches. */
.product-small.box > .box-text > :is(.rxa-archive, :has(.rxa-archive)):has(+ .custom-visa-produkt-button, + .add-to-cart-button, + a.button) { margin-bottom: 4px !important; }
.product-small.box .rxa-archive { margin-bottom: 0 !important; }

/* 0.4.0 - news/blog boxes (Flatsome blog_posts rows, the blog archive, related posts): every box in a row is as tall
   as the row, the image area keeps its ratio (Flatsome image-cover crops it, object-fit cover), titles stop at 2 lines
   (3 on phones), so boxes with long titles or excerpts no longer differ in height (Alex 2026-10-22). */
.row > .post-item > .col-inner { height: 100%; }
.post-item .box-blog-post { height: 100%; display: flex; flex-direction: column; }
.post-item .box-blog-post > .box-image { width: 100%; flex: 0 0 auto; }
.post-item .box-blog-post > .box-text { flex: 1 1 auto; }
.post-item .box-blog-post .box-image .image-cover img { object-fit: cover; object-position: 50% 50%; }
.post-item .box-blog-post .post-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.post-item .box-blog-post .from_the_blog_excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
@media (max-width: 549px) { .post-item .box-blog-post .post-title { -webkit-line-clamp: 3; line-clamp: 3; } }

/* 0.4.0 - home page (expertfoto UX builder page): trust row under the hero and compact category tiles */
.rx-home-hero h1 { font-size: 2.1em; margin-bottom: .3em; }
.rx-home-hero .lead { margin-bottom: 1em; }
.rx-home-hero .button { margin: 0 6px 6px 0; }
.rx-trust { margin-top: 12px !important; margin-bottom: 4px !important; }
.rx-trust > .col { padding: 6px 12px !important; }
.rx-trust > .col > .col-inner { padding: 0 !important; }
.rx-trust .rx-trust-item p { margin: 0; font-size: .85em; font-weight: 600; line-height: 1.35; }
.rx-trust .rx-trust-item .icon-checkmark { color: #1f8a3b; margin-right: 4px; }
.rx-cat-tiles .box-category .box-text { padding-top: 6px; padding-bottom: 4px; }
.rx-cat-tiles .box-category .header-title { font-size: .85em; text-transform: none; letter-spacing: 0; line-height: 1.25; }
@media (max-width: 549px) {
  .rx-home-hero h1 { font-size: 1.55em; }
  .rx-home-hero .lead { font-size: 15px; line-height: 1.45; }
  .rx-trust .rx-trust-item p { font-size: .8em; }
  .rx-cat-tiles .box-category .header-title { font-size: .75em; }
}

/* 0.5.0 - home page extension under the old front page content: H1 title (Flatsome title style), intro and trust list */
.rx-home-h1 h1, .rx-home-sec h2 { font-size: 1.25em; margin-bottom: 0; }
.rx-home-intro { max-width: 760px; margin-bottom: .6em; }
.rx-trust-list { list-style: none; margin: 0 0 .5em !important; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.rx-trust-list li { margin: 0 !important; padding: 0; font-size: .9em; font-weight: 600; line-height: 1.35; }
.rx-trust-list li::before { content: "\2713"; color: #1f8a3b; margin-right: 6px; font-weight: 700; }
@media (max-width: 549px) {
  .rx-home-h1 h1, .rx-home-sec h2 { font-size: 1.1em; }
  .rx-trust-list { gap: 4px 14px; }
  .rx-trust-list li { font-size: .82em; flex: 0 0 calc(50% - 7px); }
}

/* 0.6.0 - phones/tablets: categories via the hamburger drawer, not inline above the page content (desktop unchanged) */
@media (max-width: 849px) {
  .page-left-sidebar > .row > .col-first.col-divided { display: none; }
}
@media (max-width: 549px) {
  .header-main .rxt-lang { display: none; }   /* no room next to account + cart; SV|EN is in the drawer */
}
#main-menu.mobile-sidebar, .off-canvas #main-menu { background: #fff; }
#main-menu .rx-menu-extras { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0; }
#main-menu .rx-menu-extras .rxt-lang { margin: 0; font-size: .95em; }
#main-menu .rx-menu-extras .rxt-lang a { padding: 4px 6px; }
#main-menu .rx-menu-extras .rx-menu-cookies { font-size: .85em; text-decoration: underline; color: #555; }

/* 0.6.1 - product images never cut off (Alex 2026-10-22: "all product images get cut off in Flatsome"): WooCommerce
   thumbnails are uncropped now (were cropped 4:3, square packshots lost top and bottom); every product image sits whole
   in an even 4:3 white box so grids stay aligned. Applies to shop cards, ux_products, related/upsell rows and widgets. */
.product-small .box-image img, .products .box-image img, .related .box-image img, .upsells .box-image img,
.ux-products .box-image img, .rx-article .box-image img {
  width: 100%; aspect-ratio: 4 / 3; height: auto !important; object-fit: contain; object-position: 50% 50%; background: #fff;
}
.product-small .box-image .image-cover, .products .box-image .image-cover { padding-top: 75% !important; }
.product-small .box-image .image-cover img, .products .box-image .image-cover img { object-fit: contain !important; }
.product_list_widget img, .widget_products img, .widget_recently_viewed_products img { object-fit: contain; aspect-ratio: 1 / 1; background: #fff; }

/* 0.6.2 - menu dropdowns as content boxes like nisifilter (Alex 2026-10-22): the same box as the sidebar
   (#f7f8f9, 2px blue right edge), so every dropdown reads as one family */
.header-nav .nav-dropdown, .nav-dropdown.nav-dropdown-default, .nav-dropdown.nav-dropdown-simple {
  background-color: #f7f8f9; border-style: solid; border-color: transparent #11519b transparent transparent;
  border-width: 0 2px 0 0; padding: 10px 5px 6px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.nav-dropdown-has-arrow .nav-dropdown::before, .nav-dropdown-has-arrow .nav-dropdown::after { border-bottom-color: #f7f8f9; }
.nav-dropdown > li > a, .nav-dropdown .nav-dropdown-col > a { border-bottom-color: #e6e8eb; }

/* 0.6.4 - one gap above the button for every card in a grid: the swatch area (.rxa-cardsw, roxoss-attributes 0.2.7,
   on every card, empty without swatches) sits right above it; 4px when the grid has swatches, 10px when it has none
   (it was 10px on cards without and 4px on cards with swatches, so prices in mixed rows were 6px apart) */
.product-small.box > .box-text > .rxa-cardsw { margin: 0 0 4px !important; }
:is(.products, .row, .flickity-slider):not(:has(> .product-small.col .rxa-archive)) > .product-small.col .box-text > .rxa-cardsw { margin-bottom: 10px !important; }

/* 0.6.4 - back to top on every width (theme mod back_to_top_mobile = 1; it was hide-for-medium), bottom right; on
   phones the open cookie prompt spans the width, so the button waits above it until the prompt is answered */
@media (max-width: 849px) { .back-to-top { right: 12px; bottom: 12px; } }
@media (max-width: 600px) { body:has(.rxc:not([hidden])) .back-to-top { bottom: 72px; } }