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

/**
 * @version 2026-09-21
 *
 * Skin "mobile"
 *
 * LEDINO_3
 */

/**** Articles Group ****/

/**** Articles Group: Teaser ****/
div.id-teaser.visible,
section.articles-group-container > div:first-child {
	container-type: inline-size;
	container-name: containerCurrentGroupLedino;
}
article.teaser.article-group {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto auto;
	grid-template-areas: "text picture";
    gap: 0;
	height: auto;
	padding: 0;
	border: 1px solid #ccc;
	margin-bottom: 1.5em;
}

article.teaser.article-group > section.text {
	grid-area: text;
	padding: 1em 1em 1em 1em;
	position: static;
	text-align: left;
	background: none;
}

article.teaser.article-group > section.text ul {
	margin-bottom: 0.1em;
}

article.teaser.article-group > section.picture {
	grid-area: picture;
	justify-self: end;
	padding: 0;
	float: none;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	align-items: center;
	justify-items: center;

    width: auto;
}

@container containerCurrentGroupLedino (width < 53.125rem) { /* ~ 850px */
  div > article {
	grid-template-columns: 1fr !important;
	grid-template-areas: "picture" "text" !important;
  }
}

@container containerCurrentGroupLedino (width < 46.875rem) { /* ~ 750px */
   div > article > .picture {
	justify-self: center !important;
   }
}

/**** Articles Group: Slider "Introduction" (placed here because of the customization). ****/
/* :root[data-font-size="big"] #SliderJssor_introduction {
	border: 1px solid red;
	width: var(--wrapper-max-width) !important;
	height: 325.525px !important;
} */

article.teaser.article-group > section.picture > img {
	width: auto;
	height: auto;
	max-width: 100% !important;
	max-height: 100% !important;
}

/**** Articles Group: Inventory ****/

section.subgroups-inventory.mode-cells {
	grid-template-columns: 1fr;
}

@container containerMainContent (width < 59.375rem) { /* ~ 950px */
  div.ym-column > div > div.ym-cbox section.subgroups-inventory.mode-cells {
    grid-template-columns: 1fr;
  }
}

section.subgroups-inventory.mode-cells > div {
	--subgroups-inventory-min-height: 202px;
}

section.subgroups-inventory.mode-cells > div {
	container-type: inline-size;
	container-name: containerSubgroupsInventoryLedino;
}

section.subgroups-inventory.mode-cells > div > article {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas: "text picture";
	height: auto;
	padding: 0;
	background-color: #0b5ed8;
	background-image: linear-gradient(90deg,#333 0,#999 100%);
	background-repeat: repeat;
	background-attachment: scroll;
	background-position: 0 0;
}

@container containerSubgroupsInventoryLedino (width < 53.125rem) { /* ~ 850px */
  div > article {
	grid-template-columns: 1fr !important;
	grid-template-areas: "picture" "text" !important;
  }
}

@container containerSubgroupsInventoryLedino (width < 46.875rem) { /* ~ 750px */
   div > article > .picture {
	justify-self: center !important;
   }
}

section.subgroups-inventory.mode-cells > div > article > .text {
    grid-area: text;

    padding: 1em;
    position: static;
    text-align: left;
    background: none;
}

section.subgroups-inventory.mode-cells > div > article > .text div.wrap {
	line-height: 1.4em;
}
:root[data-focus-outline="visible"] section.subgroups-inventory.mode-cells :focus {
	--accessibility-focus-width: 0px;
	--theme-color-focus: transparent;
}
:root[data-focus-outline="visible"] section.subgroups-inventory.mode-cells a.group-name:focus {
	--accessibility-focus-width: 3px;
    --theme-color-focus: var(--theme-color-white);
}

section.subgroups-inventory.mode-cells > div > article > .text {
	color: var(--theme-color-white);
}
section.subgroups-inventory.mode-cells > div > article > .text p {
	margin: 0;
	padding: 0;
}
section.subgroups-inventory.mode-cells > div > article > .text :where(a, span) {
	font-size: 1rem;
	font-weight: normal;
	color: inherit !important;
}
html.touch-mode-off section.subgroups-inventory.mode-cells > div > article > .text a:hover,
html.touch-mode-off section.subgroups-inventory.mode-cells > div > article > .text a:hover * {
	text-decoration: none;
}
section.subgroups-inventory.mode-cells > div > article > .text a.group-name {
	font-size: 1.625em;
}

section.subgroups-inventory.mode-cells > div > article > .text div.agroup-txt {
	font-size: 0.9rem;
	padding-top: 10px;
	font-weight: normal;
	line-height: 1.3;

	color: inherit;
}

section.subgroups-inventory.mode-cells > div > article > .text div.agroup-txt *,
section.subgroups-inventory.mode-cells > div > article > .text div.agroup-txt ul,
section.subgroups-inventory.mode-cells > div > article > .text div.agroup-txt ul li {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}


section.subgroups-inventory.mode-cells > div > article > .text div.wrap ul {
    /* font-size: 1.075em; */

	margin-bottom: 0.1em;
}

section.subgroups-inventory.mode-cells > div > article > .picture {
    grid-area: picture;
    justify-self: stretch;

	margin: 0;
	text-align: right;
	padding: 0;
	height: unset;
}

section.subgroups-inventory.mode-cells > div > article > .picture a.container-center {
	justify-items: end;
}

/**** .groups-index-append ****/
main section.articles-group-container > div.groups-index-append {
	font-size: 1rem;
}
main section.articles-group-container > div.groups-index-append h1 {
	font-size: 2em;
}
main section.articles-group-container > div.groups-index-append :where(h1, h2, h3, h4, h5, h6),
.longTextArticle :where(h1, h2, h3, h4, h5, h6) {
    /* margin: 0.9375rem 0 0 0; */
	margin: 0.9375rem 0 0.5em 0;
	line-height: 1.2;
}
:where(main section.articles-group-container > div.groups-index-append, .longTextArticle) h1 + h2 {
    margin-top: 0.9375rem !important;
}
:where(main section.articles-group-container > div.groups-index-append, .longTextArticle) h2 {
    font-size: 1.75em !important;
}
:where(main section.articles-group-container > div.groups-index-append, .longTextArticle) h3 {
    font-size: 1.5em !important;
}

main section.articles-group-container > div.groups-index-append p {
	padding: 0.5em 0 0 0;
}

/**** filters aggregator ****/
/* 2026-03-19 EXPERIMENTAL padding-top: 0 */
section.filters-aggregator {
	padding-top: 0px;
}

/**** Details ****/
/*** Details: layout ***/
article.view-details {
	--width-left: 50%;
	--width-right: 49%;
}

:root[data-font-size="big"] article.view-details {
	--width-left: 40%;
	--width-right: 59%;
}

article.view-details.variants.view-table > .ym-grid.block-picture-panel > div > .col-picture,
article.view-details > .ym-grid.block-picture-panel > div > .col-picture {
	width: var(--width-left);
}
article.view-details.variants.view-table > .ym-grid.block-picture-panel > div > .col-panel,
article.view-details > .ym-grid.block-picture-panel > div > .col-panel {
	width: var(--width-right);
}


/*** Details: additional pictures ****/


article.view-details ul.pictures {
  --li-pictures-additional-width: 56px;
}

article.view-details ul.pictures > li.picture {
  width: calc(100% - 6px - var(--li-pictures-additional-width));
  /* border: 1px solid; */
}

/*** Details: message "This article is not available, though it may be not put into shopcart." ***/

.ym-fbox.row-customized-block-3 .message {
  font-weight: 600;

  padding: 1em 0;

  color: var(--message-color-error-strong);
}