/* Theme 1.0.38 — Bottom of category pages (catalog/listing/category.tpl, .vvp-category-more).
   The whole area is one white band, so the background always changes after the gray product list (Sidney, 11/11).
   1. Explore: the brand and selection blocks of the filter module share one heading style and one card style.
   2. About: the editorial description (brand text) on the band, outside any box.
   3. Practical: custom content, calculators and other footer modules share one light gray panel, divided by rules (a text and a
      calculator side by side from 1100 px), whenever the area holds something else or a calculator (a tool keeps its frame);
      a lone text stays without a box.
   Sidney, 11/11: no box around a lone block, never two gray blocks in a row, no rule next to an edge a block already draws,
   but enough structure on rich pages (rules between the sections that no block delimits).
   Modules keep their markup and settings; only their presentation in this area is set here. */

body.page-category:has(#main .vvp-category-more) :is(#wrapper,#main) { padding-bottom: 0; }

body.page-category #wrapper #main .vvp-category-more {
  --vvp-cm-line: var(--vvp-ds-line,#dedfe3);
  --vvp-cm-gap: 24px;
  --vvp-cm-card-pad: clamp(20px,2.2vw,32px);
  --vvp-cm-title: var(--vvp-ds-action,#263b63);
  --vvp-cm-muted: var(--vvp-ds-muted,#62656a);
  --vvp-cm-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4-4 4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: relative; isolation: isolate; display: block; min-width: 0; margin: 0; padding: var(--vvp-ui-band-space,56px) 0;
  /* The band starts over the filter dock reserve (left untouched under the list), so no empty gray strip follows the pagination;
     its own top padding still keeps the content clear of the dock. */
  margin-top: calc(-1 * var(--skrupt-dock-reserve,0px));
}
body.page-category #wrapper #main .vvp-category-more::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--vvp-ui-panel-bg,#fff); box-shadow: 0 0 0 100vmax var(--vvp-ui-panel-bg,#fff); clip-path: inset(0 -100vmax);
}

/* Shared section heading: the product page section style (accent bar, 24/31 px, action blue). */
body.page-category #wrapper #main .vvp-category-more :is(.skcb__title,.scc-content .scc-text > h2:first-child,.vcal-title,#dmu_desc_category > h2:first-of-type,.skg-block .skg-item__title) {
  display: block; max-width: 40ch; margin: 0; padding: 0; font-size: 24px; line-height: 31px; font-weight: 600; letter-spacing: -.025em;
  text-transform: none; text-wrap: balance; color: var(--vvp-cm-title);
}
body.page-category #wrapper #main .vvp-category-more :is(.skcb__title,.scc-content .scc-text > h2:first-child,.vcal-title,#dmu_desc_category > h2:first-of-type,.skg-block .skg-item__title)::before {
  content: ''; display: block; width: 18px; height: 3px; margin-bottom: 12px; border-radius: 2px; background: var(--vvp-ds-accentText,#bd3e68);
}
body.page-category #wrapper #main .vvp-category-more :is(.skcb__title,.scc-content .scc-text > h2:first-child,.vcal-title,#dmu_desc_category > h2:first-of-type,.skg-block .skg-item__title)::after { content: none; }
body.page-category #wrapper #main .vvp-category-more :is(.skcb__intro,.vcal-intro) {
  max-width: 68ch; margin: 8px 0 0; color: var(--vvp-cm-muted); font-size: 15px; line-height: 1.6;
}

/* 1. Explore */
body.page-category #wrapper #main .vvp-category-more__explore { padding: 0; }
body.page-category #wrapper #main .vvp-category-more__explore > .skcb {
  --skcb-ink: var(--vvp-ds-ink,#202124); --skcb-muted: var(--vvp-cm-muted); --skcb-line: var(--vvp-cm-line);
  --skcb-surface: var(--vvp-ui-band-gray,#f5f5f7); --skcb-card: #fff; --skcb-radius: 12px; --skcb-focus: var(--vvp-cm-title);
  margin: 0; padding: 0; color: var(--vvp-ds-ink,#202124);
}
body.page-category #wrapper #main .vvp-category-more__explore > .skcb ~ .skcb { margin-top: var(--vvp-ui-section-gap,40px); padding-top: var(--vvp-ui-section-gap,40px); border-top: 1px solid var(--vvp-cm-line); }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__head { margin: 0 0 24px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__sub {
  margin: 0 0 12px; color: var(--vvp-cm-muted); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
body.page-category #wrapper #main .vvp-category-more__explore .skcb__featured { gap: 12px; margin-bottom: 24px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__card {
  min-height: 104px; gap: 2px; padding: 12px; border-color: var(--vvp-cm-line); border-radius: 12px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.page-category #wrapper #main .vvp-category-more__explore .skcb__card:hover { border-color: var(--vvp-cm-title); box-shadow: 0 6px 18px rgba(38,59,99,.08); }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__logo { height: 44px; margin-bottom: 6px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__wordmark { min-height: 44px; margin-bottom: 6px; color: var(--vvp-cm-title); font-size: 17px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__name { color: var(--vvp-ds-ink,#202124); font-size: 14px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__count { color: var(--vvp-cm-muted); font-size: 12px; }

/* Brands from A to Z: a light outlined button sized to its text (Sidney 11/11: the full gray bar was too heavy), a compact
   letter bar, dense columns. */
body.page-category #wrapper #main .vvp-category-more__explore .skcb__az { border: 0; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__summary { box-sizing: border-box; display: inline-flex; width: auto; max-width: 100%; min-height: 44px; gap: 10px; padding: 8px 14px 8px 16px; border: 1px solid var(--vvp-cm-line); border-radius: 10px; background: #fff; color: var(--vvp-cm-title); font-size: 15px; transition: border-color .15s ease, background-color .15s ease; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__summary:hover { border-color: var(--vvp-cm-title); background: var(--vvp-ui-info-bg,#f5f7fb); }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__summary .skcb__chevron { margin-left: 2px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__az[open] > .skcb__summary { margin-bottom: 20px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__total { min-width: 0; height: auto; padding: 0; background: transparent; color: var(--vvp-cm-muted); font-weight: 500; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__letters ul { gap: 6px; margin-bottom: 20px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__letters a { min-width: 34px; height: 34px; border-color: var(--vvp-cm-line); color: var(--vvp-cm-title); font-size: 13px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__letters a:hover { border-color: var(--vvp-cm-title); background: var(--vvp-ui-info-bg,#f5f7fb); }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__letter { color: var(--vvp-cm-title); font-size: 13px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__list li { padding: 3px 0; font-size: 14px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__list a:hover { color: var(--vvp-cm-title); }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__all { margin: 16px 0 0; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb__all a { min-height: 0; color: var(--vvp-cm-title); font-size: 15px; }

/* Selections: left-aligned link tiles with an arrow, every link shown at every width; 2 columns, then 5 from 1100 px. */
body.page-category #wrapper #main .vvp-category-more__explore .skcb--pages .skcb__featured { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb--pages .skcb__card {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: center; justify-items: start; column-gap: 12px; row-gap: 2px;
  min-height: 72px; padding: 14px 16px; text-align: left; color: var(--vvp-cm-title);
}
body.page-category #wrapper #main .vvp-category-more__explore .skcb--pages .skcb__wordmark {
  display: block; grid-column: 1; min-height: 0; margin: 0; color: var(--vvp-cm-title); font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: 0; text-wrap: pretty;
}
body.page-category #wrapper #main .vvp-category-more__explore .skcb--pages .skcb__count { grid-column: 1; font-size: 13px; }
body.page-category #wrapper #main .vvp-category-more__explore .skcb--pages .skcb__card::after {
  content: ''; grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 18px; height: 18px; background: currentColor; opacity: .55;
  -webkit-mask: var(--vvp-cm-arrow) center/contain no-repeat; mask: var(--vvp-cm-arrow) center/contain no-repeat; transition: transform .15s ease, opacity .15s ease;
}
body.page-category #wrapper #main .vvp-category-more__explore .skcb--pages .skcb__card:hover::after { opacity: 1; transform: translateX(3px); }
@media (min-width:1100px) {
  body.page-category #wrapper #main .vvp-category-more__explore .skcb--pages .skcb__featured { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
  body.page-category #wrapper #main .vvp-category-more__explore .skcb__groups { columns: 6 9rem; column-gap: 32px; }
}

/* 3. Practical (after the description in the markup): a light gray panel, divided by rules, whenever the area holds
   something else (several contents, or the brand blocks or description above); a lone content stays without a box. */
body.page-category #wrapper #main .vvp-category-more__practical {
  display: grid; grid-template-columns: minmax(0,1fr); gap: var(--vvp-ui-band-space,56px) clamp(32px,4.5vw,72px); align-items: start; min-width: 0; padding: 0;
}
body.page-category #wrapper #main .vvp-category-more__practical:has(> :not(style,script,link,[style*="display: none"]) ~ :not(style,script,link,[style*="display: none"])),
body.page-category #wrapper #main .vvp-category-more__explore ~ .vvp-category-more__practical,
body.page-category #wrapper #main .vvp-category-more__about ~ .vvp-category-more__practical,
body.page-category #wrapper #main .vvp-category-more__practical:has(> .vcal-calc) { gap: 0; align-items: stretch; border-radius: var(--vvp-confort-radius,18px); background: var(--vvp-ui-band-gray,#f5f5f7); overflow: hidden; }
body.page-category #wrapper #main :is(.vvp-category-more__explore,.vvp-category-more__about) + .vvp-category-more__practical { margin-top: var(--vvp-ui-band-space,56px); padding-top: 0; border-top: 0; }
body.page-category #wrapper #main .vvp-category-more__practical:has(> :not(style,script,link,[style*="display: none"]) ~ :not(style,script,link,[style*="display: none"])) > :not(style,script,link,[style*="display: none"]),
body.page-category #wrapper #main .vvp-category-more__explore ~ .vvp-category-more__practical > :not(style,script,link,[style*="display: none"]),
body.page-category #wrapper #main .vvp-category-more__about ~ .vvp-category-more__practical > :not(style,script,link,[style*="display: none"]),
body.page-category #wrapper #main .vvp-category-more__practical:has(> .vcal-calc) > :not(style,script,link,[style*="display: none"]) { padding: var(--vvp-cm-card-pad); }
body.page-category #wrapper #main .vvp-category-more__practical:has(> :not(style,script,link,[style*="display: none"]) ~ :not(style,script,link,[style*="display: none"])) > :not(style,script,link,[style*="display: none"]) ~ :not(style,script,link,[style*="display: none"]),
body.page-category #wrapper #main .vvp-category-more__explore ~ .vvp-category-more__practical > :not(style,script,link,[style*="display: none"]) ~ :not(style,script,link,[style*="display: none"]),
body.page-category #wrapper #main .vvp-category-more__about ~ .vvp-category-more__practical > :not(style,script,link,[style*="display: none"]) ~ :not(style,script,link,[style*="display: none"]) { border-top: 1px solid var(--vvp-cm-line); }
body.page-category #wrapper #main .vvp-category-more__practical > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
body.page-category #wrapper #main .vvp-category-more__practical > :is(style,script,link) { display: none; }
/* Reset of the module boxes (no id in the list, so the panel rules above keep the upper hand). */
body.page-category #wrapper #main .vvp-category-more__practical > :is(.scc-content,.vcal-calc,.skg-block) {
  position: static; isolation: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
body.page-category #wrapper #main .vvp-category-more__practical > .scc-content::before { content: none; }

/* Text (custom content). */
body.page-category #wrapper #main .vvp-category-more__practical > .scc-content > .scc-text { display: block; }
body.page-category #wrapper #main .vvp-category-more__practical > .scc-content > .scc-text > * { max-width: 72ch; margin: 0; }
body.page-category #wrapper #main .vvp-category-more__practical > .scc-content > .scc-text > * + * { margin-top: 12px; }
body.page-category #wrapper #main .vvp-category-more__practical > .scc-content > .scc-text > h2:first-child + * { margin-top: 16px; }
body.page-category #wrapper #main .vvp-category-more__practical > .scc-content > .scc-text > :is(p,ul,ol) { color: var(--vvp-cm-muted); font-size: 15px; line-height: 1.7; }
body.page-category #wrapper #main .vvp-category-more__practical > .scc-content a { color: var(--vvp-cm-title); text-decoration: underline; text-underline-offset: 3px; }
body.page-category #wrapper #main .vvp-category-more__practical > .scc-content a:hover { color: var(--vvp-ds-accentText,#bd3e68); }

/* Guide reminder (Skrupt Pages block, e.g. beside a lone calculator; Sidney 11/11: « un rappel de guide »). */
body.page-category #wrapper #main .vvp-category-more__practical > .skg-block :is(.skg-block__items,.skg-item,.skg-item__content) { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.page-category #wrapper #main .vvp-category-more__practical > .skg-block .skg-item__title a { color: inherit; text-decoration: none; }
body.page-category #wrapper #main .vvp-category-more__practical > .skg-block .skg-item__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
body.page-category #wrapper #main .vvp-category-more__practical > .skg-block .skg-item__excerpt { max-width: 60ch; margin: 16px 0 0; color: var(--vvp-cm-muted); font-size: 15px; line-height: 1.7; }
body.page-category #wrapper #main .vvp-category-more__practical > .skg-block .skg-item__link { display: inline-flex; gap: 6px; margin-top: 16px; color: var(--vvp-cm-title); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Calculator. */
body.page-category #wrapper #main .vvp-category-more__practical > .vcal-calc > .vcal-head { margin: 0 0 20px; }

/* 2. About: the editorial description (brand text) stays on the band, outside any box (Sidney, 11/11), above the practical
   panel; the site's editorial layout, title on the left and text on the right from 992 px. A rule separates it from the
   brand blocks, which no block delimits. */
body.page-category #wrapper #main .vvp-category-more__explore + .vvp-category-more__about { margin-top: var(--vvp-ui-section-gap,40px); padding-top: var(--vvp-ui-section-gap,40px); border-top: 1px solid var(--vvp-cm-line); }
body.page-category #wrapper #main .vvp-category-more__about > #dmu_desc_category { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.page-category #wrapper #main .vvp-category-more__about > #dmu_desc_category { text-align: left; }
body.page-category #wrapper #main .vvp-category-more__about > #dmu_desc_category > * { max-width: 72ch; margin: 0; text-align: left; }
body.page-category #wrapper #main .vvp-category-more__about > #dmu_desc_category > :is(p,ul,ol) { margin-top: 12px; color: var(--vvp-cm-muted); font-size: 15px; line-height: 1.75; }
body.page-category #wrapper #main .vvp-category-more__about > #dmu_desc_category > h2:first-of-type + * { margin-top: 16px; }
body.page-category #wrapper #main .vvp-category-more__about > #dmu_desc_category > :is(h2,h3):not(h2:first-of-type) {
  margin-top: 28px; color: var(--vvp-cm-title); font-size: 19px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; text-transform: none;
}
@media (min-width:992px) {
  body.page-category #wrapper #main .vvp-category-more__about > #dmu_desc_category { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.8fr); column-gap: clamp(32px,5vw,80px); align-items: start; }
  body.page-category #wrapper #main .vvp-category-more__about > #dmu_desc_category > * { grid-column: 2; }
  body.page-category #wrapper #main .vvp-category-more__about > #dmu_desc_category > h2:first-of-type { grid-column: 1; grid-row: 1 / span 40; }
  body.page-category #wrapper #main .vvp-category-more__about > #dmu_desc_category > h2:first-of-type + * { margin-top: 0; }
}

/* A full-width text uses the same editorial layout as the brand text: title on the left, text on the right. */
@media (min-width:992px) {
  body.page-category #wrapper #main .vvp-category-more__practical > .scc-content > .scc-text:has(> h2:first-child) { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.8fr); column-gap: clamp(32px,5vw,80px); align-items: start; }
  body.page-category #wrapper #main .vvp-category-more__practical > .scc-content > .scc-text:has(> h2:first-child) > * { grid-column: 2; }
  body.page-category #wrapper #main .vvp-category-more__practical > .scc-content > .scc-text:has(> h2:first-child) > h2:first-child { grid-column: 1; grid-row: 1 / span 40; }
  body.page-category #wrapper #main .vvp-category-more__practical > .scc-content > .scc-text:has(> h2:first-child) > h2:first-child + * { margin-top: 0; }
}

/* A text (custom content or guide reminder) and a calculator side by side; any other content keeps the full width. Custom content shown on the first
   page only is hidden with an inline display:none after an AJAX page change: the calculator then takes the full width. */
@media (min-width:1100px) {
  body.page-category #wrapper #main .vvp-category-more__practical:has(> :is(.scc-content:not([style*="display: none"]),.skg-block) ~ .vcal-calc) { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
  body.page-category #wrapper #main .vvp-category-more__practical > :is(.scc-content,.skg-block,.vcal-calc) { grid-column: auto; }
  body.page-category #wrapper #main .vvp-category-more__practical:has(> :is(.scc-content:not([style*="display: none"]),.skg-block) ~ .vcal-calc) > :is(.scc-content:not([style*="display: none"]),.skg-block) ~ .vcal-calc { border-top: 0; border-left: 1px solid var(--vvp-cm-line); }
  body.page-category #wrapper #main .vvp-category-more__practical:has(> .scc-content:not([style*="display: none"]) ~ .vcal-calc) > .scc-content > .scc-text:has(> h2:first-child) { display: block; }
  body.page-category #wrapper #main .vvp-category-more__practical:has(> .scc-content:not([style*="display: none"]) ~ .vcal-calc) > .scc-content > .scc-text:has(> h2:first-child) > h2:first-child + * { margin-top: 16px; }
}

@media (max-width:767.98px) {
  body.page-category #wrapper #main .vvp-category-more :is(.skcb__title,.scc-content .scc-text > h2:first-child,.vcal-title,#dmu_desc_category > h2:first-of-type,.skg-block .skg-item__title) { font-size: 22px; line-height: 28px; }
  body.page-category #wrapper #main .vvp-category-more__explore .skcb__card { min-height: 96px; }
  body.page-category #wrapper #main .vvp-category-more__explore .skcb--pages .skcb__card { min-height: 64px; padding: 12px 14px; }
  body.page-category #wrapper #main .vvp-category-more__explore .skcb--pages .skcb__wordmark { font-size: 14px; }
  body.page-category #wrapper #main .vvp-category-more__practical > .scc-content > .scc-text > :is(p,ul,ol) { font-size: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  body.page-category #wrapper #main .vvp-category-more__explore :is(.skcb__card,.skcb__card::after) { transition: none; }
}