@import '../../../skins/mobile/css/styles.css';

/**
 * @version 2026-07-01
 *
 * Skin "mobile"
 *
 * LEDINO_3
 */

:root {
  /** Colors **/
  /* compliance colors are marked with suffixes: b1, b2, ... - brighter; d1, d2, ... - darker */
  --ledino-color-blue: #0b5ed8;
  --ledino-color-blue-opposite: #fff;

  --ledino-color-light-gray: #EEEEEE;
  --ledino-color-light-gray-opposite: #000;

  --theme-color-black: #000;
  --theme-color-black-1: #333;
  --theme-color-white-1: #aaa;
  --theme-color-white: #fff;
  --theme-color-black-opposite: var(--theme-color-white);
  --theme-color-black-1-opposite: #eee;
  --theme-color-white-opposite: var(--theme-color-black);
  --theme-color-white-1-opposite: var(--theme-color-black-1);

  /* PARITY grey: #333333*/
  --theme-color-dark: var(--theme-color-black-1);
  /* PARITY grey: #333333*/
  --theme-color-dark-b1: #ededed;
  --theme-color-dark-b2: #d0d0d0;
  --theme-color-dark-b3: #f9f9f9;

  --theme-color-middle: var(--ledino-color-blue);
  /*PARITY yellow: #ffcd00 */

  --theme-color-bright: var(--ledino-color-blue);
  /*PARITY yellow: #ffcd00 */
  --theme-color-bright-d1: var(--ledino-color-blue);
  /*PARITY yellow: #ffcd00 */

  /* article voting colors */
  --theme-color-vote-star: var(--theme-color-bright);
  --theme-color-vote-star-opposite: var(--theme-color-dark);

  /* opposite colors */
  --theme-color-dark-opposite: var(--ledino-color-blue-opposite);
  --theme-color-dark-b1-opposite: var(--ledino-color-blue-opposite);
  --theme-color-dark-b2-opposite: var(--ledino-color-blue-opposite);
  --theme-color-middle-opposite: var(--ledino-color-blue-opposite);
  --theme-color-bright-opposite: var(--ledino-color-blue-opposite);

  /* messages colors */
  --message-color-default-icon: var(--theme-color-dark);
  --message-color-default: var(--theme-color-dark);
  --message-color-default-opposite: var(--theme-color-dark-opposite);

  --message-color-info-icon: #2d4dd8;
  --message-color-info: var(--theme-color-dark);
  --message-color-info-opposite: var(--theme-color-dark-b1);

  --message-color-error-icon: var(--theme-color-middle-opposite);
  --message-color-error: var(--theme-color-middle-opposite);
  --message-color-error-opposite: var(--theme-color-middle);

  --message-color-error-strong: #cc1a2a;
  --message-color-error-strong-opposite: #fff;

  --message-color-running-icon: var(var(--theme-color-white-1));
  --message-color-running: var(--theme-color-dark);
  --message-color-running-opposite: var(--theme-color-dark-b1);

  --message-color-success-icon: var(--theme-color-dark);
  --message-color-success: var(--theme-color-dark);
  --message-color-success-opposite: var(--theme-color-dark-b1);

  --message-color-warning-icon: var(--theme-color-middle);
  --message-color-warning: var(--theme-color-middle);
  --message-color-warning-opposite: var(--theme-color-middle-opposite);

  /* Buttons */
  --button-normal-height: 2.438rem;
  /* 39 for better vertical centering of the caption */
  --button-small-height: 1.875rem;

  --button-final-color: #019901;
  --button-final-color-opposite: #fff;

  /* Errors by form fields */
  --theme-color-input-invalid: var(--theme-color-bright);

  /** prices **/
  /* default */
  --theme-color-price-with-unit: var(--theme-color-dark);
  --theme-color-price-value: var(--theme-color-bright);
  /* action */
  --theme-color-action-price: #a00;
  --theme-color-action-price-opposite: #fff;
  --theme-color-action-price-with-unit: var(--theme-color-action-price);
  --theme-color-action-price-value: var(--theme-color-action-price-with-unit);

  /* focus */
  --theme-color-focus: #a00;
  --theme-color-focus-opposite: #fff;
}

:root[data-theme="contrast"] {
  --ledino-color-blue: var(--theme-color-dark);
	--theme-color-bright: var(--ledino-color-blue);
	--theme-color-middle: var(--ledino-color-blue);
	--theme-color-middle-opposite: var(--theme-color-dark-opposite);
	--message-color-info-icon: var(--theme-color-dark);
}


/** UI Spinners are now "+/-" Spinners, and they have not the jQuery UI styling, but the styling of Shop 3 **/
 :where(
	.ui-spinner-button,
	.ui-dialog > .ui-dialog-titlebar
 ) > :where(
	.ui-button:focus .ui-icon,
	.ui-button:active .ui-icon,
	.ui-button:hover .ui-icon,
	.ui-button .ui-icon
)  { /* because of the customized arrow */
	background-image: url("../../../skins/mobile/css/images/ui-icons_000000_256x240.png") !important;
}

/** UI selectmenu ("dropdown list") **/
.ui-front.ui-selectmenu-open .ui-menu-item:last-child .ui-menu-item-wrapper.ui-state-active {
	border-bottom: 1px solid var(--theme-color-white);
}

/** a **/
main a {
	color: var(--ledino-color-blue);
}

html.touch-mode-off main a:hover {
  text-decoration: underline;
}

:root[data-theme="contrast"] header a,
:root[data-theme="contrast"] .ui-autocomplete a {
	text-decoration: none;
}

/** buttons A-B-C **/
button.group-c:hover, button.group-c:active {
	color: var(--theme-color-dark-opposite);
}

/**** Header ****/
body {
  --intro-height: 0px;
  --header-menu-ledino-height: 2.5rem;
  --main-top: calc(var(--header-top) + var(--header-height) + var(--header-menu-ledino-height));
}
header ul.layout-header {
	list-style-type: none;
	--layout-header-height: 72px;
	--li-logo-width: 50%;
	--li-languages-width: 0%;
	--li-languages-padding: 0;
	--li-search-width: 20%;
	--li-search-padding: 0 0 0 var(--layout-columns-gap);
	--li-navigation-width: 30%;
	--li-navigation-padding: 0 0 0 var(--layout-columns-gap);
}

:root[data-font-size="big"] header ul.layout-header {
	--li-logo-width: 58%;
  --li-navigation-width: 21%;
}

/*** Header: Primary navigation ***/
nav.primary ul.menuPrimary > li.profile {
  /*display: none;*/ /* off, because we have 4 logos on the left. */
  /* 2026-03-26 on, because the 4 logos are smaller now */
}

/* width: var(--li-logo-width);
margin: 0; */
nav#menuPrimaryTouchScreen > .prefix > .logo,
header ul.layout-header > li.logo {
	display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 0.5%;

  container-type: inline-size;
}

nav#menuPrimaryTouchScreen > .prefix > .logo {
  justify-content: space-around;
}

nav#menuPrimaryTouchScreen > .prefix > .logo {
  padding-top: 10px;
}

nav#menuPrimaryTouchScreen > .prefix > .logo > .ledino > a > img {
  max-height: 42px !important;
}

nav#menuPrimaryTouchScreen > .prefix > .logo > div,
header ul.layout-header > li.logo > div {
	display: flex;
  justify-content: flex-end;
}

header ul.layout-header > li.logo > div > img {
	width: auto;
	height: 32px;
}

nav#menuPrimaryTouchScreen > .prefix > .logo > div img {
  width: auto;
  height: auto;
  max-height: 28px !important;
}

@container (width < 420px) {
  nav#menuPrimaryTouchScreen > .prefix > .logo > div img {
    width: 90%;
  }
}

@container (width < 670px) {
  header ul.layout-header > li.logo > div > img {
    width: 70%;
    height: auto;
  }
  header ul.layout-header > li.logo > div.ledino > img {
    width: 80%;
  }
}


/**** nav#menuPrimaryTouchScreen: menu items ****/
/* > 2026-07-01 EXPERIMENTAL spaces around items > */
nav#menuPrimaryTouchScreen > .ym-grid {
  display: flex;
  justify-content: space-around;
}

nav#menuPrimaryTouchScreen ul > li {
  padding: 10px 0;
}
/* < 2026-07-01 EXPERIMENTAL spaces around items < */

/*** mmenu: PC ***/
/* mmenu: pre-selected item */
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected-parent > a {
	font-weight: 600;
	color: var(--ledino-color-blue);
	background: var(--ledino-color-blue-opposite);
}

/* mmenu: active item */
/* html.touch-mode-off .mm-menu .mm-panels a:hover,  */
/* html.touch-mode-off nav.menuMobileTouchScreen.mm-menu .mm-panels a:hover, */
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected > a {
  font-weight: 600;
  color: var(--ledino-color-blue);
	background: var(--ledino-color-blue-opposite);
}

/*** Header: Menu Ledino ***/
footer.additional, /* the additional footer has the same background */
header > .wide.menu-ledino {
  --color-background-darkest: #333;
  --color-background-lightest: #999;
  --color-foreground: #ddd;

  --color-hover-background-darkest: #9f9f9f;
  --color-hover-background-lightest: #e5e5e5;
  --color-hover-foreground: #555;


	height: var(--header-menu-ledino-height);
	padding: 0;
	overflow: hidden;

  background-image: linear-gradient(0deg,var(--color-background-darkest) 0,var(--color-background-lightest) 100%);
	background-image: -webkit-linear-gradient(90deg,var(--color-background-darkest) 0,var(--color-background-lightest) 100%);
	/* background-image: -o-linear-gradient(90deg,var(--color-background-darkest) 0,var(--color-background-lightest) 100%);
	background-image: -ms-linear-gradient(90deg,var(--color-background-darkest) 0,var(--color-background-lightest) 100%);
	background-image: -moz-linear-gradient(90deg,var(--color-background-darkest) 0,var(--color-background-lightest) 100%); */
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0 0;
}

/* @package Accessibility */
:root[data-theme="contrast"] footer.additional,
:root[data-theme="contrast"] header > .wide.menu-ledino {
  background: var(--color-background-darkest);
  --color-foreground: var(--theme-color-white);
  --color-hover-foreground: var(--theme-color-black);
}

header > .wide.menu-ledino nav {
  display: flex;
  justify-content: flex-start;

  width: 100%;

  --items-padding-x: 0.75em;
  margin-left: calc(-1 * var(--items-padding-x));

  background: none;
}

header > .wide.menu-ledino nav > a {
  /* display: flex;
  align-content: center; */

  line-height: var(--header-menu-ledino-height);

  padding: 0 var(--items-padding-x);

  white-space: nowrap;

  color: var(--color-foreground);

  border: 0px solid white;
}

:root[data-focus-outline="visible"] header > .wide.menu-ledino nav > a:focus,
header > .wide.menu-ledino nav > a:hover {
  color: var(--color-hover-foreground);

	background-image: linear-gradient(90deg, var(--color-hover-background-darkest) 0, var(--color-hover-background-lightest) 100%);
	background-image: -webkit-linear-gradient(90deg, var(--color-hover-background-darkest) 0, var(--color-hover-background-lightest) 100%);
	background-image: -o-linear-gradient(90deg, var(--color-hover-background-darkest) 0, var(--color-hover-background-lightest) 100%);
	background-image: -ms-linear-gradient(90deg, var(--color-hover-background-darkest) 0, var(--color-hover-background-lightest) 100%);
	background-image: -moz-linear-gradient(90deg, var(--color-hover-background-darkest) 0, var(--color-hover-background-lightest) 100%);
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0 0;
}

:root[data-focus-outline="visible"] header > .wide.menu-ledino nav > a:focus {
  --accessibility-focus-width: 3px;
  --theme-color-focus: var(--theme-color-white);
}

:root[data-focus-outline="visible"][data-theme="contrast"] header > .wide.menu-ledino nav > a:focus,
:root[data-theme="contrast"] header > .wide.menu-ledino nav > a:hover {
  background: var(--color-hover-background-lightest);
}

/**** Main-Line ****/
div.main-line h1.layout-title.default {
    --this-font-size: 2rem;
}

/**** Login ****/
/*** Login: popup form ***/
.tooltip-popup.form-login {
	max-width: 22rem;

}

/**** mode-cells ****/
section.articles-bundle-list.mode-cells > div.item {
  --section-prices-price_value-height: 1.5rem;
  --section-description-height: 3.5rem;
}
section.articles-bundle-list.mode-cells > div.item .prices.has-item-number {
	grid-template-columns: 55% 45%;
}
section.articles-bundle-list.mode-cells > div.item .prices.has-item-number div.article-number > .article-number {
	display: block;
}
section.articles-bundle-list.mode-cells > div > article .price-block > .price-value > .value {
	/* font: normal normal normal 1.5rem/1.25rem var(--font-family); */
  font-size: 1rem;
  line-height: 1rem;
}

/**** Footer ****/
footer {
  margin-top: 4em;
}

/*** footer.additional ***/
div.footers {
  padding-bottom: 0px;
}
div.footers.at-bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
}
footer.additional div.layout-footer.additional {
  grid-template-areas: "links";
  grid-template-columns: 1fr;

}

footer.additional div.layout-footer.additional,
footer.additional {
  height: auto;
  min-height: calc(1.7 * var(--header-menu-ledino-height));
}

footer.additional .layout-footer.additional > div.site-links {
  align-content: center;
}

footer.additional .layout-footer.additional > div.site-links > section.site-links {
  font-size: 0.9rem;

  margin: auto 0;


  max-width: none;

  justify-content: space-around;
  align-content: center;
}

footer.additional .layout-footer.additional > div.site-links > section.site-links :where(div, a) {
	color: var(--theme-color-white);
	display: flex;
	align-items: center;
}


:root[data-focus-outline="visible"] footer.additional .layout-footer.additional > div.site-links > section.site-links a:focus {
  --accessibility-focus-width: 3px;
  --theme-color-focus: var(--theme-color-white);
}

footer.additional .layout-footer.additional > div.site-links > section.site-links > div > div.social {
  display: flex;
  justify-content: space-between;
}
footer.additional .layout-footer.additional > div.site-links > section.site-links > div > div.social > div.delimiter {
  width: 1.1em;
}
footer.additional .layout-footer.additional > div.site-links > section.site-links > div > div.social img {
  height: 1.5em;
}


footer.additional .layout-footer.additional > div.site-links > section.site-links > div.delimiter {
  display: none;
}