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

/**
 * @version 2026-06-17
 *
 * Skin "mobile"
 *
 * HDG_3
 */

:root {
  /*--font-family: Roboto, Tahoma, "Trebuchet MS";*/ /* Primary font family. [may be imported font] */
  /*--font-family: Arial, Verdana; */ /* Primary font family. [may be imported font] */
  /*--font-size: 16px;*/ /* default font size for certainly areas */

  /* Layout settings */
  /*--wrapper-max-width: 1140px;
	--layout-column-1-width: 250px;
	--layout-columns-gap: 25px;
	--layout-column-3-margin: calc(var(--layout-column-1-width) + var(--layout-columns-gap));*/

  /** Border radius settings **/
  /*--theme-border-radius: 4px;*/

  /** Colors **/
  /* compliance colors are marked with suffixes: b1, b2, ... - brighter; d1, d2, ... - darker */

  --hdg-dark: #00377a;
  --hdg-middle: #153378;
  --hdg-bright: #038ec4;
  --hdg-light: #7fd7fb;

  --hdg-color-red: #db002f;
  --hdg-color-red-opposite: #fff;

  --theme-color-dark: var(--hdg-dark);
  --theme-color-middle: var(--hdg-middle);
  --theme-color-bright: var(--hdg-middle);
  --theme-color-bright-opposite: var(--theme-color-white);

  --message-color-error: var(--hdg-color-red);
  --message-color-error-icon: var(--theme-color-error);
  --message-color-error-opposite: var(--theme-color-white);

  --theme-color-price-value: var(--theme-color-dark);

  --theme-color-action-price-with-unit: var(--hdg-color-red);
  --theme-color-action-price-value: var(--theme-color-action-price-with-unit);

  --theme-color-input-invalid: var(--hdg-color-red);

  --theme-color-white-d1: #aaa;
  --theme-color-white: #fff;

  --hdg-color-red: #db002f;

  /*--theme-color-dark: #0d3579; */ /* H+DG "4 Squares stand alone icon  blue" */
  /*--theme-color-dark: #00377a; */ /* H+DG "4 Squares updated icon blue" */
  --theme-color-dark-b1: #ededed; /* gray */
  --theme-color-dark-b2: #ededed; /* H+DG "4 Squares updated icon blue" */
  --theme-color-dark-b3: #f9f9f9;

  --theme-color-middle: var(--theme-color-dark); /*PARITY yellow: #f5c534 */

  --theme-color-bright: var(--theme-color-dark);
  --theme-color-bright-d1: var(--theme-color-dark);

  /* 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-white);
  --theme-color-bright-opposite: var(--theme-color-white);

  /* 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:        #00a;
	--message-color-info:             var(--theme-color-dark);
	--message-color-info-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);

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

  /* Buttons */
  /*--button-normal-height: 39px;*/ /* 39 for better vertical centering of the caption */
  /*--button-small-height: 30px;*/

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

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

  /** prices **/
  /* default */
  /*--theme-color-price-with-unit: var(--theme-color-dark);
	--theme-color-price-value: var(--theme-color-bright);*/
  /* action */
  --theme-color-action-price-with-unit: var(--hdg-color-red);
  --theme-color-action-price-value: var(--theme-color-action-price-with-unit);
}

/** 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-dialog > .ui-dialog-titlebar > .ui-button .ui-icon.ui-icon-closethick {
  background: url("../img/icons/close.png");
  opacity: 0.7;
  background-size: contain;
}

/**** @package Accessibility ****/
:root[data-theme="contrast"] {
  --theme-color-dark: var(--theme-color-black); /* 23.06.2025 EXPERIMENTAL ON */
	--theme-color-black-1: var(--theme-color-black);
	--theme-color-white-1: #eee;
	/* --theme-color-black-1-opposite: var(--theme-color-white); */
	/* --theme-color-white-1-opposite: var(--theme-color-black); */
	--theme-color-bright: var(--theme-color-dark);
	--theme-color-bright-opposite: #fff;
	--theme-color-middle: var(--theme-color-dark);
	--theme-color-middle-opposite: var(--theme-color-dark-opposite);
	/* --message-color-error-icon: ; */
}

:root[data-theme="contrast"] .ui-widget-content {
  color: var(--theme-color-black);
}

/**** Font Awesome ****/
i.fa.fa-refresh {
  color: var(--theme-color-dark);
}

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

html.touch-mode-off a.dotted:hover > span {
  border-bottom: 1px solid var(--hdg-color-red);
}

html.touch-mode-off footer a.dotted:hover {
  text-decoration: none;
}

/**** header ****/
/*** header logo ***/
header ul.layout-header {
  --li-logo-width: 18%;
}
header ul.layout-header > li.logo > a.container-center {
  justify-items: start;
}
header ul.layout-header > li.logo img {
  width: auto;
  height: auto;
}

/*header ul.layout-header.logo-updated {*/
/*--li-logo-width: 80px;
	--li-search-width: 63%;*/ /* 19.09.2023 OFF because if user begins to search, then the search input and the autocomplete are making optical problems */
/*}*/

/**** burger menu items ****/
/* 2026-06-03 ON and OFF (demonstartion of the underlines).
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected-parent,
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected {
  text-decoration: underline;
}

html.touch-mode-off .mm-menu #mm-1 .mm-listitem.mm-listitem_selected-parent,
html.touch-mode-off .mm-menu #mm-1 .mm-listitem.mm-listitem_selected {
  text-decoration: none;
}

html.touch-mode-off .mm-menu #mm-1 .mm-listitem.mm-listitem_selected-parent > a > span,
html.touch-mode-off .mm-menu #mm-1 .mm-listitem.mm-listitem_selected > a > span {
  text-decoration: underline;
} */

html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected-parent > a,
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected > a {
	font-weight: 600;
	color: var(--hdg-color-red);
	background: none;
}

nav#menuPrimaryTouchScreen ul > li,
nav#menuPrimaryTouchScreen ul > li > div.is-ready,
nav#menuPrimaryTouchScreen ul > li.shopcart > div a,
nav#menuPrimaryTouchScreen ul > li.shopcart > div > div.label a {
  color: var(--theme-color-dark);
}

/**** Sliders ****/
/*** page teaser is not wide now. ***/
.ym-wrapper.wide.page-wide-teaser,
.ym-wrapper.wide.page-wide-teaser > .ym-wbox,
.ym-wrapper.wide.page-teaser,
.ym-wrapper.wide.page-teaser > .ym-wbox {
	max-width: var(--wrapper-max-width);
}

/**** List items cells ****/
ul.mode-cells > li.item {
  --section-description-height: 60px;
}

/**** footer ****/
/*** footer prefix ***/
/*
.ym-wrapper.wide.layout-footer-prefix > .ym-wbox {
	position: absolute;
	bottom: 40px;
	width: 100%;
	max-width: none;
}*/

.ym-wrapper.wide.layout-footer-prefix div.content div.title-small {
  text-transform: none;
}
.ym-wrapper.wide.layout-footer-prefix div.content div.title-big div {
  text-transform: none;
}

footer.additional {
  background: var(--theme-color-white);
  --company-logo-width: 280px;
}


footer.additional .layout-footer.additional > div.site-links > section.site-links > div.revocationForm > a {
  --theme-color-bright: var(--hdg-color-red);
  --theme-color-bright-opposite: var(--hdg-color-red-opposite);

  font-weight: 400;
}

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