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

/**
 * @version 2026-03-10
 *
 * Skin "mobile"
 *
 * WARMBIER_3
 */
:root {
  /** Colors **/
  /*PARITY Gelb: #ffcd00 PARITY Grau: #333333*/
  /* compliance colors are marked with suffixes: b1, b2, ... - brighter; d1, d2, ... - darker */
  --warmbier-color-black: #181818;
  --warmbier-color-yellow: #FABA00;
  --warmbier-color-yellow-opposite: var(--warmbier-color-black);

  --theme-color-black: var(--warmbier-color-black);
  --theme-color-black-1: var(--warmbier-color-black);
  --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(--warmbier-color-yellow);
  /*PARITY yellow: #ffcd00 */

  --theme-color-bright: var(--warmbier-color-yellow);
  /*PARITY yellow: #ffcd00 */
  --theme-color-bright-d1: var(--warmbier-color-yellow);
  /*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(--theme-color-white);
  --theme-color-dark-b1-opposite: var(--theme-color-dark);
  --theme-color-dark-b2-opposite: var(--theme-color-dark);
  --theme-color-middle-opposite: var(--theme-color-dark);
  --theme-color-bright-opposite: var(--theme-color-dark);

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

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



/**** header ****/
header {
	background: var(--warmbier-color-yellow);
}
html.touch-mode-off div.mm-slideout#intro, html.touch-mode-off header.mm-slideout {
	/* z-index: 2000 !important; */
	border-bottom: 2px solid var(--warmbier-color-yellow);
}
nav#menuPrimaryTouchScreen {
	background: var(--warmbier-color-yellow);
}
nav#menuPrimaryTouchScreen ul > li.logo {
	background: none;
}
nav#menuPrimaryTouchScreen ul > li > div.open-shopcart-touch-screen,
nav#menuPrimaryTouchScreen ul > li > div.is-ready {
	color: var(--warmbier-color-yellow-opposite);
}

/*** footer.additional ***/
footer.additional {
  /* --footer-additional-height: 50px; */
  --company-logo-width: 216px;
}

/*** section.accessibilityToolbar ***/
section.accessibilityToolbar {
	background: none;
}

section.accessibilityToolbar[data-switcher="on"] {
	background: var(--theme-color-white);
}

/*** language selector ***/
section.language-selector > div.indicators {
    border: 1px solid var(--warmbier-color-yellow);
}
section.language-selector > div.indicators.ui-state-hover {
    border: 1px solid var(--warmbier-color-yellow);
}

/** Navigation **/
nav.primary ul li a:hover {
    color: var(--warmbier-color-black);
}

nav#menuPrimaryTouchScreen a .fa-duotone.fa-cart-plus,
nav.primary a .fa-duotone.fa-cart-plus {
	--fa-primary-color: var(--warmbier-color-black);
	--fa-secondary-color: var(--theme-color-white);
}
html.touch-mode-off nav.primary a:hover .fa-duotone.fa-cart-plus {
	--fa-primary-color: var(--warmbier-color-black);
	--fa-secondary-color: var(--theme-color-white);
}

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

/* 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(--warmbier-color-black);
	background: var(--warmbier-color-yellow);
}

/* html.touch-mode-off .mm-menu .mm-panels a:hover,
html.touch-mode-off nav.menuMobileTouchScreen.mm-menu .mm-panels a:hover {
  font-weight: 400;
} */


html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected-parent .mm-btn::before,
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected-parent .mm-btn::after,
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected .mm-btn::before,
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected .mm-btn::after,
nav.menuMobileTouchScreen.mm-menu .mm-listitem.mm-listitem_selected-parent .mm-btn::before,
nav.menuMobileTouchScreen.mm-menu .mm-listitem.mm-listitem_selected-parent .mm-btn::after,
nav.menuMobileTouchScreen.mm-menu .mm-listitem.mm-listitem_selected .mm-btn::before,
nav.menuMobileTouchScreen.mm-menu .mm-listitem.mm-listitem_selected .mm-btn::after {
	border: 2px solid var(--warmbier-color-black);
	border-bottom: none;
	border-right: none;
}

/**** Footer ****/
/*** Footer: site links ***/
footer.additional .layout-footer.additional > div.site-links > section.site-links {
	max-width: 44em;
}