@layer theme, reset, layout, hiwood, dialog;
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('/font/open-sans-v44-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/font/open-sans-v44-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('/font/open-sans-v44-italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('/font/open-sans-v44-700.woff2') format('woff2');
}
@layer reset {
  *, *::before, *::after { box-sizing: border-box; background-repeat: no-repeat; }
  * { padding: 0; margin: 0; }
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    block-size: 100%;
  }
  body { min-block-size: 100%; }
  img, iframe, audio, video, canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  svg { max-inline-size: 100%; }
  svg:not([fill]) { fill: currentColor; }
  input, button, textarea, select { font: inherit; }
  textarea { resize: vertical; }
  fieldset, iframe { border: none; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  p { text-wrap: pretty; font-variant-numeric: proportional-nums; }
  h1, h2, h3, h4, h5, h6 { font-variant-numeric: lining-nums; }
  p, blockquote, q, figcaption, li { hanging-punctuation: first allow-end last; }
  input, label, button, h1, h2, h3, h4, h5, h6 { line-height: 1.1; }
  math, time, table { font-variant-numeric: tabular-nums lining-nums slashed-zero; }
  code { font-variant-numeric: slashed-zero; }
  table { border-collapse: collapse; }
  abbr { font-variant-caps: all-small-caps; text-decoration: none;
    &[title] { cursor: help; text-decoration: underline dotted; }
  }
  sup, sub { line-height: 0; }
  :disabled { opacity: .8; cursor: not-allowed; }
  :focus-visible { outline-offset: .2rem; }
}
:root { --brand-color: #f68712; --brand-grey: #4f4c4d; accent-color: var(--brand-color); }
html {
  font-size: 16px;
  height: -webkit-fill-available;
  scrollbar-color: #f68712 transparent;
  scrollbar-width: thin;
  color-scheme: light dark;
}

body {
  font-family: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  color: #666;
  font-size: 16px;
  background-color: #eee;
  background-color: light-dark(#eee, #ccc);
  caret: var(--brand-color) block;
  -webkit-font-smoothing: antialiased;
  scrollbar-gutter: stable;
}
.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap; 
}
@layer layout {
  /* Создаем общую структуру страницы */
  body {
    display: grid;
    /* Создаем 3 колонки: отступ, центр (max 1200px), отступ */
    grid-template-columns:
      [full-start] minmax(1em, 1fr)
      [content-start] min(calc(100% - 2em), 75em) [content-end]
      minmax(1em, 1fr) [full-end];
  }

  /* Все прямые потомки body по умолчанию центрируются */
  body > * {
    grid-column: content;
    display: grid !important;
    /* Внутренняя сетка для элементов внутри блоков */
    grid-template-columns: subgrid;
  }

  /* РАСТЯГИВАЕМ ФОНЫ: Теперь header и footer могут иметь фон на весь экран */
  body > div:first-child, #spinner, #top, body > footer, dialog, [popover] {
    grid-column: full; /* Занимает всё пространство от края до края */
  }

  /* Но контент внутри них остается в границах content-start/end */
  body > div:first-child > *, #top > *, body > footer > * {
    grid-column: content;
  }
dialog, body > [popover] {
  /* grid-column: full !important;
  position: fixed !important;
  inset: 0 !important; */
  width: auto;
  margin: auto; /* Вернет центрирование, если не нужен полноэкранный блок */
}
#top {
  background-color: #eee;
  > div {
    display: flex;
    justify-content: space-between;
    color: #333;
    ul {
      margin: 0 !important;
      padding: 0;
      list-style: none;
      li {
        display: inline-flex;
        a {
          padding: .25em;
          svg { width: 1.5em; height: 1.5em; }
          &:hover {
            text-decoration: none;
            svg {
              &.max, &.vk {color: #07f;}
              &.tg {color: #26a5e4;}
              &.wa {color: #25d366;}
              &.ig {color: #e4405f;}
            }
          }
        }
      }
    }
  }
}
body > header { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1em; margin-block: 1em; place-items: center;
  @media (width < 48rem) { grid-template-columns: 1fr; }

> button {
  background: transparent;
  border: none;
  corner-shape: squircle;
svg {
  color: #333;
  width: 2em !important;
  height: 2em !important;
}
}
#tel {
  display: flex;
  font-weight: 700;
  flex-direction: column;
  a { color: #f68712; }
}
}

  /* ОСНОВНОЙ КОНТЕНТ (Main с сайдбарами) */
  main {
    grid-column: content;
    display: grid;
    gap: 2em;
    padding: 2em 0;
    align-content: start;
  }

  /* Логика сайдбаров (Desktop) */
  @media (min-width: 50em) {
    main { grid-template-columns: 1fr; } /* Сброс */
    main:has(aside:first-child) { grid-template-columns: 16em 1fr; }
    main:has(aside:last-child) { grid-template-columns: 1fr 16em; }
    main:has(aside:first-child):has(aside:last-child) {
      grid-template-columns: 16em 1fr 16em;
    }
  }

  /* Футер: сетка колонок внутри центрированного контента */
  footer .footer-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
    gap: 2em;
    padding: 3em 0;
  }
  .flexrow {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  a {
    color: #333;
    text-decoration: none;
    outline: none;
  }
}
.icon {
position: relative;
top: .125em;
flex-shrink: 0;
height: 1em;
width: 1em;
fill: currentColor;
transition: fill .5s;
margin: 0 .125em;
}
button:not(.btn-xs) > svg.icon, .input-group svg.icon, .form-group svg.icon {
height: 24px;
width: 24px;
margin: -5px 0;
}
@keyframes scroll-in-out {
  entry 0% { opacity: .5; transform: scale(.75); }
  entry 50% { opacity: 1; transform: scale(1); }
  exit 50% { opacity: 1; transform: scale(1); }
  exit 100% { opacity: .5; transform: scale(.75); }
}
#menu ul {
  display: flex;
  flex-flow: row wrap;
  flex-wrap: balance;
  justify-content: space-around;
  text-transform: uppercase;
  border: 1px solid #ddd;
  border-color: #ddd transparent;
  margin: 1em 0;
  width: 100%;
  padding: 1em 0;
  list-style: none;
  > li {
    padding-block: .5em;
    @media (width >= 62rem) { font-size: 2em; }
    @media (39rem <= width < 62rem) { font-size: 1.5em; }
    a {
      color: #444;
      text-decoration: none;
      overflow: hidden;
      white-space: nowrap;
      padding: .5em;
    }
  }
  ul { display: none; }
}
#menu li:hover, #menu li:focus-within { cursor: pointer; }
#menu li a:hover, #menu li a:focus-within { color: #ef7618; }
#menu li:focus-within a { outline: none; }
#menu #category {
  float: left;
  padding-left: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
#menu .btn-navbar {
  font-size: 15px;
  font-stretch: expanded;
  color: #fff;
  padding: 2px 18px;
  float: right;
  background-color: #229ac8;
  background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
  background-repeat: repeat-x;
  border-color: #1f90bb #1f90bb #145e7a;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
  color: #fff;
  background-color: #229ac8;
}

.product-layout {
display: grid;
/* grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); */
grid-template-columns: repeat(auto-fill, minmax(min(15rem, 50%), 1fr));
gap: 2em;
margin-bottom: 1rem;
pointer-events: none;
  @media (prefers-reduced-motion: no-preference) {
    & .product-thumb {
      animation: scroll-in-out linear both;
      animation-timeline: view();
    }
  }
}
.product-thumb {
  display: flex;
  flex-direction: column;
  flex: 0 0 15rem;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
  backface-visibility: hidden;
  pointer-events: auto;
  &:hover {
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12);
  }
  a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    outline: none;
    img {
      width: 100%;
      height: auto;
    }
    h4 {
      margin-top: auto;
      padding: 0 .5em;
      font-size: 1em;
      flex-grow: 1;
    }
    .dims {
      padding-inline: 1em .5em;
      overflow: hidden;
      color: #444;
      text-transform: lowercase;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      font-size: .875em;
      white-space: nowrap;
      line-height: 1;
      position: relative;
      >span:nth-child(2) {
        margin-inline-start: auto;
        margin-block-start: .0625em;
      }
      &::before {
        content: '';
        position: absolute;
        top: .3125em;
        left: .25em;
        height: .5em;
        width: .5em;
        background-color: #3c3;
        border-radius: .25em;
      }
    }
    & .red::before {
      background-color: #c33;
    }
    & .red span:first-of-type {
      background-color: #c333;
      border-radius: .5em;
      padding: 0 .25em .125em .875em;
      margin-left: -1em;
    }
    & .yellow::before {
      background-color: #cc3;
    }
    .options {
      position: absolute;
      top: .5em;
      right: .5em;
      font-size: .625em;
      line-height: 1;
      text-align: right;
    }
  }
  button {
    text-transform: uppercase;
    background-color: #fff;
    background-image: linear-gradient(to bottom, #fff, #eee);
    border: none;
    padding: .5em;
    border-top: #eee 1px solid;
    &:hover { color: #333; background-image: none; }
  }
}
@media (prefers-reduced-motion: no-preference) {
html, body {scroll-behavior: smooth;}
.product-thumb {
  opacity: 1;
  transition: box-shadow 280ms cubic-bezier(.4,0,.2,1), opacity .25s linear;
  transition-delay: calc(sibling-index() * .05s);
  @starting-style { opacity: 0; }
}
.product-thumb:hover img {transform: scale(1.1);}
.product-thumb > a img {
object-fit: cover;
object-position: 50% 50%;
transition: transform 2s ease-in-out .5s, filter .2s;
transform-origin: bottom center;
-webkit-box-reflect: below 0 linear-gradient(transparent 75%, #fff3);
aspect-ratio: 4/3;
}
@view-transition { navigation: auto; }
@keyframes transition-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes transition-in { from { opacity: 0; translate: 0 -8rem; } to { opacity: 1; translate: 0; } }
::view-transition-old(root) { animation: .4s ease-in both transition-out; }
::view-transition-new(root) { animation: .4s ease-in both transition-in; }
}
.product-thumb .red::before {
background-color: #c33;
}
.product-thumb .red span:first-of-type {
background-color: #c333;
border-radius: .5em;
padding: 0 .25em .125em .875em;
margin-left: -1em;
}
.product-thumb .yellow::before {
background-color: #cc3;
}
.product-thumb:not(:hover) > a:has(.red) img {filter: grayscale(.5) opacity(.5);}

.product-label {position:absolute;padding:.5em .25em;top:2em;left:0;writing-mode:sideways-lr;color:#fff;font-weight:700;line-height:1;text-transform:uppercase;}
.new {background-color:#33cc;font-size:.875em;}
.sale {background-color:#c33c;font-size:1em;letter-spacing:1px;}
.price {
  font-size: 1.5em;
  color: #111;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  overflow: hidden;
  padding: .125em .5em;
  white-space: nowrap;
  word-spacing: -.125em;
  .price-new {
    color: #c33;
    font-weight: 400;
    text-shadow: 1px 1px #999;
    margin-left: .125em;
  }
  .price-old {
    color: #666;
    font-size: smaller;
    font-weight: 300;
    text-decoration: line-through double #c33c;
  }
  .price-im {
    font-size: .5em;
    width: 2em;
    text-align: center;
    line-height: .75;
    white-space: normal;
  }
  .price-zpm {
    display: flex;
    flex-flow: column wrap;
    text-align: center;
    line-height: .875;
    font-size: .375em;
    margin: .375em .5em 0;
  }
  .price-tx {
    font-size: 1em;
  }
}

#product ~ div {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 1rem;
  margin-bottom: 1rem;
  > div { text-align: center; text-wrap-style: pretty; }
}

.product-wrapper {
position: relative;
margin: 2em -.75em;
> h3 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
position: absolute;
writing-mode: sideways-lr;
max-width: 20ch;
letter-spacing: .125em;
font-size: 1em;
background-color: #3339;
border-radius: 1em;
padding: 1em .25em;
top: 1em;
left: -1em;
color: #eee;
z-index: 3;
text-transform: uppercase;
&:empty {
  display: none;
}
}
}
.product-slider {
display: grid;
grid-auto-flow: column dense;
overflow-x: auto;
gap: 2rem;
/* prevent accidentally going back or triggering other swipe events */
/* overscroll-behavior: contain; */
/* momentum scroll on iOS */
-webkit-overflow-scrolling: touch;
/* disable vertical scroll for touch */
/* touch-action: pan-x; */
/* ! */
scroll-snap-type: x mandatory;
/* стилизация скроллбара для Firefox */
scrollbar-color: #f68712 transparent;
scrollbar-width: thin;
transition: scrollbar-color .5s ease-out;
/* width: 100%;
border-radius: 1rem;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12); */
list-style: none;
scroll-padding: .75em;
padding-block-end: .5em;
justify-content: start;
/* mask-image: linear-gradient(to right, transparent, black .75em, black calc(100% - .75em), transparent); */
&:has(.product-thumb:nth-last-child(n + 2)) {
container-type: scroll-state;
scroll-behavior: smooth;
anchor-name: --carousel;
&::scroll-button(*) {
position-anchor: --carousel;
position: absolute;
width: 3rem;
height: 3rem;
border-radius: 50%;
margin-inline: -3rem;
border: none;
background: center / 3rem 3rem no-repeat #333c;
z-index: 4;
cursor: pointer;
opacity: .7;
@media (width > 80em) { margin-inline: 0; }
}
&::scroll-button(*):hover, &::scroll-button(*):focus { opacity: 1; }
&::scroll-button(*):active { translate: 0 1px; }
&::scroll-button(*):disabled { opacity: .3; cursor: unset; display: none; }
&::scroll-button(inline-start) {
content: '';
background-image: url(sprite_bg.svg#left);
position-area: left center;
box-shadow: -1px 1px 2px #3339;
}
&::scroll-button(inline-end) {
content: '';
background-image: url(sprite_bg.svg#right);
position-area: right center;
box-shadow: 1px 1px 2px #3339;
}
&::before, &::after {
opacity: 0;
transition: opacity .25s ease-out;
content: '';
position: absolute;
top: 0;
width: .75em;
height: 99%;
pointer-events: none;
z-index: 2;
}
&::before {
left: 0;
background: linear-gradient(to left, transparent, light-dark(#eee, #ccc));
}
&::after {
right: 0;
background: linear-gradient(to right, transparent, light-dark(#eee, #ccc));
}
@media (prefers-reduced-motion: no-preference) {
  .product-thumb {
    animation: scroll-in-out linear both;
    animation-timeline: view(inline);
  }
  @container scroll-state(scrollable: left) { &::before { opacity: 1; } }
  @container scroll-state(scrollable: right) { &::after { opacity: 1; } }
}
}
}
@keyframes scroll-in-out {
  entry 0% { opacity: .5; transform: scale(.75); }
  entry 50% { opacity: 1; transform: scale(1); }
  exit 50% { opacity: 1; transform: scale(1); }
  exit 100% { opacity: .5; transform: scale(.75); }
}

@media (max-width: 48em) {
.product-slider {gap: 1rem;}
.product-slider>div {width: 12em; scroll-snap-align: center; }
}
.product-slider:hover {
scrollbar-color: #f68712;
}
/* .product-slider>li{ scroll-snap-align: center; flex: 1 0 10rem; } */
.product-slider>div {
width: 15em;
/* scroll-snap-align: center; */
scroll-snap-align: start;
/* flex: 1 0 240px; */
/* transition: width .25s; */
}
.product-slider>div:first-of-type {
/* Allow users to fully scroll to the start */
scroll-snap-align: start;
margin-left: .75em;
}
.product-slider>div:last-of-type {
/* Allow users to fully scroll to the end */
scroll-snap-align: end;
margin-right: .75em;
}
.product-slider>a>picture {
object-fit: cover;
object-position: center;
width: 100%;
}
/* стилизация скроллбара для Webkit */
.product-slider::-webkit-scrollbar {
height: 4px;
}
.product-slider::-webkit-scrollbar-track {
background-color: transparent;
border-radius: .25em;
margin: 0 2rem;
}
.product-slider::-webkit-scrollbar-thumb {
border: 2px solid transparent;
background-color: #f68712;
border-radius: .25em;
background-clip: content-box;
}
.product-slider::-webkit-scrollbar-thumb:hover {
background-color: #ccc;
}

@layer dialog {
#spinner {
  inset: unset;
  border: none;
  background: transparent;
  position: fixed;
  top: 1rem;
  left: 1rem;
}
.toast {translate: 0 -1rem;}
.toast:popover-open { translate: 0 0; }
/* enable transitions */
[popover], dialog, ::backdrop {
  --timing: .25s;
  opacity: 0;
  transition:
    bottom var(--timing) ease-out,
    opacity var(--timing) ease,
    translate var(--timing) ease-out,
    display var(--timing) ease allow-discrete,
    overlay var(--timing) ease allow-discrete;
}
/* IN */
:popover-open, /* :popover-open::backdrop, */ [open], [open]::backdrop { opacity: 1; }
/* OUT */
@starting-style {
  :popover-open, /* :popover-open::backdrop, */ [open], [open]::backdrop { opacity: 0; }
  .toast:popover-open { translate: 0 2rem; }
}
dialog {
  background-color: #ccc;
  background-color: light-dark(#ccc, #999);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  border: 1px outset #fff9;
  border-radius: 1.75rem;
  padding: 0;
  overflow-y: hidden;
  overscroll-behavior: contain;
}
dialog > div:only-child, dialog > form:only-child {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  max-block-size: 90vh;
  max-block-size: 90dvb;
}
dialog header {
  display: flex !important;
  gap: 1ch;
  justify-content: space-between;
  align-items: flex-start;
  /* padding: .5em .5em .5em 1em;
  background: linear-gradient(to bottom, #fff3, transparent);
  border-block-end: 1px solid #0003; */
  padding: 1rem;
}
dialog header > button {
  border: none;
  border-radius: 50%;
  padding: .75ch;
  aspect-ratio: 1;
  flex-shrink: 0;
  place-items: center;
  /* stroke: currentColor;
  stroke-width: 3px; */
}
dialog article {
  overflow-y: auto;
  max-block-size: 100%; /* safari */
  overscroll-behavior-y: contain;
  display: grid;
  justify-items: flex-start;
  gap: 1em;
  /* padding: 1em;
  border-block-start: 1px solid #fff3; */
  padding: .5rem;
  scrollbar-width: thin;
}
dialog article p {
  text-align: justify;
}
dialog article .checkbox { line-height: .875; font-size: .75em; }
dialog footer {
  /* background: var(--surface-2); */
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1em;
  /* background: linear-gradient(to top, #fff3, transparent); */
}
dialog footer > menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding-inline-start: 0;
}
dialog footer > menu:only-child {
  margin-inline-start: auto;
}
body:has(dialog:modal) { overflow: hidden; }
/* html:has(dialog[open]) {
  overflow: auto;
} */
.toast {
  display: grid !important;
  grid-template-columns: min-content 1fr;
  width: fit-content;
  gap: 1rem;
  font-size: 1rem;/* 14pt */
  line-height: 20pt;
  letter-spacing: .25pt;
  color: #f5eff7;
  min-width: 16rem;
  max-width: 48rem;
  border: none;
  inset: auto 1rem 0;
  padding: 8pt 1rem;
  margin: .375rem auto;
  border-radius: .25rem;
  box-shadow: 0 1px 2px 0 #3339;
  background-color: #322f35;
  cursor: default;
  overflow: hidden;
  svg {
    all: unset;
    margin-inline: -.25rem -.5rem;
    flex-shrink: 0;
    height: 1.5rem !important;
    width: 1.5rem !important;
    fill: currentColor;
    line-height: 1;
    top: .125em;
    position: relative;
  }
  button { all: unset; }
  .action {
    all: unset;
    color: #d0bcff;
    letter-spacing: .1pt;
    font-weight: 500;
    cursor: pointer;
    margin-inline: .5rem;
  }
  .close {
    /* all: unset; */
    cursor: pointer;
    margin-inline: -.25rem;
    line-height: 1;
  }
}
@media (prefers-color-scheme: dark) {
  .toast {
    color: #322f35;
    background-color: #e6e0e9;
    .action {
      color: #6750a4;
    }
  }
}
}
::backdrop {
  background: linear-gradient(#0003, #0006);
  backdrop-filter: blur(1px) grayscale(.5);
  overflow: hidden;
  overscroll-behavior: contain;
}
@media (prefers-color-scheme: dark) {
  body {background-color: #ccc;}
  #search input {color: #ccc; background-color: #333;}
	.product-slider::before {background: linear-gradient(to left, transparent, #ccc);}
	.product-slider::after {background: linear-gradient(to right, transparent, #ccc);}
  dialog {background-color: #999;}
}



.hw_accordion {
  details {
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: .5em;
    margin: .5em 0;
    background-color: #eee;
    transition: all .5s ease;
    &:hover { box-shadow: 0 1px 2px 0 #3339; }
    summary {
      padding: .5em 1em;
      cursor: pointer;
      user-select: none;
      outline: none;
      border-radius: .5em;
      transition: all .5s ease;
      display: flex;
      justify-content: space-between;
      list-style: none;
      align-items: center;
      &::-webkit-details-marker { display: none; }
      &::marker { content: ''; }
      &::after {
        margin: -.25em;
        flex-shrink: 0;
        content: '';
        background: center / 1.5em 1.5em no-repeat transparent;
        background-image: url(sprite_bg.svg#caret);
        width: 1.5em;
        aspect-ratio: 1;
        display: block;
        transition: transform .5s ease;
        transform-origin: 50% 50%;
      }
      [open] &::after { transform: rotate(180deg); }
      &:hover { color: #666; }
      [open] & { padding: 1em; }
      & + * {
        padding: .5em 1em;
        margin: 0;
        background-color: #fff;
        border-bottom-left-radius: .5em;
        border-bottom-right-radius: .5em;
        border-block-start: 1px solid #ddd;
      }
    }
  }
  ::details-content {
    transition: all .5s ease, content-visibility .5s allow-discrete;
    height: 0;
    overflow: clip;
  }
}
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  [open]::details-content { height: auto; }
}
@supports not (interpolate-size: allow-keywords) {
  [open]::details-content {
    height: 16em; /* In the future to be replaced by `height: auto` */
    overflow-y: scroll; /* In case the contents should be taller than 150px */
  }
}

.feature-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  margin-block: 1em;
}
/* .feature-layout {
    display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 1em;
  margin: 1em 0;
} */
.feature-layout>a {
    position: relative;
    aspect-ratio: 16/9;
    justify-content: center;
    display: flex;
    align-items: flex-end;
    padding: 0 .5em;
    text-decoration: none;
}
.feature-layout>a:last-of-type {
  aspect-ratio: 48 / 9;
  grid-column: 1 / -1; /* grid-column: span 2; */
}
.feature-layout>a:link:hover {
    box-shadow: 0 5px 5px -3px #0000001a,0 8px 8px 1px #00000012,0 3px 8px 2px #00000014,0 0 0 2px #f68712;
    transition: transform .2s linear,box-shadow .2s linear,background .4s ease,border-color .4s ease;
}
.feature-layout>a>:not(img) {z-index: 1;}
.feature-layout>a>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.feature-layout>a>h3 {
    color: #eee;
    background-color: #1119;
    text-transform: uppercase;
    margin-bottom: 0;
    padding-inline: .25em;
    padding-block-start: .1em;
    padding-block-end: .2em;
}
nav>.feature-layout>a>h3 {font-size: 2em;}
@media (max-width: 767px) {
.feature-layout {
grid-template-columns: 1fr 1fr;
gap: .5em;
}
.feature-layout>a {flex-basis: 8em;}
.feature-layout>a>h3 {font-size: 1em;}
.product-layout {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem;}
.product-thumb {flex: 1 1 140px; border-radius: 1rem;}
.product-thumb h4,.product-thumb button {font-size: 1em;}
.product-thumb .price {font-size: 1.5em;}
.product-thumb .price .price-tx {font-size: .875em;}
/* #content .flexrow div:last-child {order: -1;} */
}
/* @media (max-width: 25rem) {
.imgrid figure:nth-child(5), .imgrid figure:nth-child(6), .imgrid figure:nth-child(7) { display: none; }
.feature-layout {grid-template-columns: 1fr;}
.feature-layout>a {aspect-ratio: 21/9;}
} */
@media (min-width: 64rem) {
.feature-layout>a>h3 {font-size: 2.5em;}
}
.imgrid {
  display: grid;
  gap: .25em;
  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
  grid-auto-rows: 18em;
}
.imgrid figure {
  background: center / contain no-repeat url(image/no_image.svg) #ccc;
  margin: 0;
  position: relative;
}
.imgrid figure:hover figcaption {
  opacity: 1;
}
.imgrid figcaption {
  background-color: #3336;
  position: absolute;
  left: .5em;
  bottom: .5em;
  opacity: 0;
  padding-inline: .5em;
  text-shadow: 0 1px 2px #333;
  transition: opacity .25s;
}
.imgrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imgrid figure:first-child {
  grid-area: span 2 / span 2;
}
.imgrid figure:nth-child(3) {
  grid-row: span 2;
}
.imgrid figure:nth-child(7) {
  grid-column: span 2;
}
@media (min-width: 62rem) {
  .imgrid figcaption {
    font-size: 1.5em;
  }
}
@media (min-width: 30rem) and (max-width: 62rem) {
  .imgrid {
    grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    grid-auto-rows: 14em;
  }
}
@media (max-width: 30rem) {
  .imgrid {
    gap: .125em;
    grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
    grid-auto-rows: 10em;
  }
}
.flexture-layout {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: .25em;
margin: 1em 0;
padding: .25em;
border-radius: .125em;
background-color: #f68712;
background-image: linear-gradient(345deg, #f68712, #f93);
}
.flexture-layout>a {
background: center / contain no-repeat url(image/no_image.svg) #ccc;
aspect-ratio: 16/9;
flex: 1 1 240px;
position: relative;
}
.flexture-layout>a h3 {
background-color: #3336;
position: absolute;
left: .5em;
bottom: 0;
padding-inline: .5em;
padding-block: .25em;
color: #eee;
}
.flexture-layout>a img {
width: 100%;
height: 100%;
object-fit: cover;
}

#cookiebanner {
  position: fixed;
  inset: auto 0 0;
  padding: .5rem 1rem;
  background-color: #3339;
  color: #eee;
  border: none;
  border-top: 1px solid #3336;
  display: flex;
  gap: .5rem;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(1rem);
  translate: 0 100%;
  svg {
    width: 2rem;
    height: 2rem;
    top: 0;
  }
  a {
    color: #ddd;
    font-style: italic;
    font-size: .875rem;
  }
  &:popover-open {
    translate: 0 0;
  }
  &:not(:focus-within) {
    translate: 0 0;
    @container scroll-state(scrolled: top) {
      translate: 0 100%;
    }
  }
  @starting-style {
    translate: 0 100%;
  }
  @media (max-width: 30rem) {
    flex-direction: column;
    gap: 0;
    svg { display: none; }
  }
}

.pagination>li>a:has(svg) { padding: 5px 6px; }
.pagination>li>a>svg { width: 16px; height: 16px; }





/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}
/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
/* logo */
#logo {
	margin: 0 0 10px 0;
}
#logo h1 {
  margin-top: -5px;
}
/* search */
form[name="search"] {
  display: inline-flex;
  margin-block: .5em;
  width: 100%;
svg {
  flex-shrink: 0;
  height: 2em;
  width: 2em;
  fill: currentColor;
  transition: fill 1s;
  padding: 0;
  margin: .25em -2.5em 0 .5em;
  z-index: 2;
}
}
input#search {
  anchor-name: --anchor-search;
  width: 100%;
  font-size: 1.25em;
  border-radius: 1em;
  border: 1px solid #ccc;
  outline: 3px solid #ccc3;
  margin: 0;
  padding: 0 .5em 0 2em;
  color: #333;
  background-color: #ccc;
  color: light-dark(#333, #ccc);
  background-color: light-dark(#ccc, #333);
}
input#search:focus {
  border-color: #ef7618;
  outline-color: #ef761899;
}
input#search::-webkit-search-cancel-button { appearance: auto; font-size: 1rem; }
#searchlist {
  position: absolute;
  inset: unset;
  top: 3em;
  left: 3em;
  position-anchor: --anchor-search;
  top: anchor(bottom);
  left: calc(anchor(left) + 2em);
  background-color: #ccce;
  border-radius: .25em;
  box-shadow: 0 .25em .5em #3339;
  margin: 0;
  padding: 0;
  border: none;
}
#searchlist ul {
  padding: .25em 0;
  margin: 0;
  list-style: none;
}
#searchlist a {
  display: block;
  padding: 0 .5em;
  color: #333;
  font-size: 1.25em;
  line-height: 1.25;
}
#searchlist a:hover {
  color: #111;
  background-color: #eee;
}
/* cart */
#cart > .btn {
	color: #fff;
  sup {
    margin-inline-end: 1em;
  }
}
#cart.open > .btn {
	background-image: none;
	background-color: #FFFFFF;
	border: 1px solid #E6E6E6;
	color: #666;
	box-shadow: none;
	text-shadow: none;
}
#cart.open > .btn:hover {
	color: #444;
}
#cart .dropdown-menu {
	background: #eee;
	z-index: 1001;
}
#cart .dropdown-menu {
	min-width: 100%;
	overflow-y: auto;
	max-height: 800px;
	scrollbar-width: thin;
	overflow-x: hidden;
}
@media (max-width: 478px) {
	#cart .dropdown-menu {
		width: 100%;
	}
}
#cart .dropdown-menu table {
	margin-bottom: 10px;
}
#cart .dropdown-menu li > div {
	min-width: 427px;
	padding: 0 10px;
}
@media (max-width: 478px) {
	#cart .dropdown-menu li > div {
		min-width: 100%;
	}
}
#cart .dropdown-menu li p {
	margin: 20px 0;
}
#cart .dropdown-menu li:nth-child(1)>table a:has(>img) {
  box-shadow: inset 0 1px 2px 0 #333;
  border-radius: 50%;
  background-color: #fff;
  display: block;
  width: fit-content;
  overflow: clip;
  min-width: 2em;
}
/* content */
#content {
	min-height: 600px;
}
/* footer */
body > footer {
position: sticky;
top: 100vh;
margin-top: 1em;
padding-top: 1em;
background-color: #333;
border-top: 1px solid #ddd;
color: #eee;
background-image: conic-gradient(from 180deg at 50% 120%, #637d96, #1f3855);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
  a {
    color: #ccc;
    &:hover { color: #eee; }
  }
  h5 {
    font-size: 14px;
    font-weight: bold;
    color: #eee;
  }
}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
.alert > .close {
	position: relative;
	top: -2px;
	right: 0px;
	color: inherit;
}
/* buttons */
/* .buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 12px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn-xs {
	font-size: 9px;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #777;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
}
.btn-primary {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background-color: #1f90bb;
	background-position: 0 -15px;
}
.btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x;
	border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
	background-image: none;
	background-color: #df5c39;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: #23A1D1;
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
} */
.btn-inverse {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #444444, #222222);
	background-repeat: repeat-x;
	border-color: #222222 #222222 #000000;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #444444;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}

.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout, #column-right .product-layout {
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39;
}

@media (width < 48em) {
  #top, #search, #cart { margin-bottom: 0; }
  #menu ul { border: none; margin: 0; }
  .breadcrumb {
    padding: 0 .5em;
    margin-bottom: .5em;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    text-overflow: ellipsis;
    font-size: .75em;
  }
  .breadcrumb>li+li:before { padding-inline: .25em 0; }
  .breadcrumb::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1em;
    height: 100%;
    background: linear-gradient(to right, transparent, white);
  }
}
ol.breadcrumb-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content;
  gap: .5rem;
  li {
    display: grid;
    grid-auto-flow: column;
    gap: .5rem;
    align-items: center;
    &:not(:last-child)::after {
      content: '/';
      color: #999;
    }
    a {
      color: #333;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
ol.breadcrumb-flex {
  display: flex;
  list-style: none;
  overflow: hidden;
  li {
    &:not(:last-child)::after {
      content: '/';
      color: #999;
    }
    &:first-child a { padding-inline-start: 0; }
    &:last-child a { padding-inline-end: 0; }
    &:not(:first-child) a {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    a {
      white-space: nowrap;
      text-decoration: none;
      padding-inline: .5em;
      color: #666;
      &:hover { color: #333; }
    }
  }
}