/* Shym product card. Design system B (Warm Nordic), rules in DESIGN.md.
   Every class starts with shym- and the tokens live on .shym-cards, so nothing here can
   touch the rest of the site, and the rest of the site cannot restyle the card. */

@font-face{font-family:"Albert Sans";src:url("../fonts/AlbertSans.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

.shym-cards,.shym-cards-more,.shym-cards-sort{
  --shym-ink:#26222F;--shym-body:#4A4451;--shym-muted:#645D6A;--shym-line:#E3DCD5;--shym-cream:#EEE9E5;
  --shym-white:#FFFFFF;--shym-orange:#B5412A;--shym-star:#F6BB06;--shym-green:#2F6B4F;
  font-family:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.shym-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;width:100%}
.shym-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shym-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shym-cards--1{grid-template-columns:minmax(0,1fr)}
.shym-cards *,.shym-cards *:before,.shym-cards *:after{box-sizing:border-box}

/* the card */
.shym-cards a.shym-card,.shym-cards a.shym-card:hover,.shym-cards a.shym-card:focus,.shym-cards a.shym-card:visited{
  display:flex;flex-direction:column;min-width:0;padding:10px 10px 18px;border-radius:18px;background:var(--shym-cream);
  color:var(--shym-ink);text-decoration:none;
  /* the site's link style sets its own font on every link, so the card says its font again here */
  font-family:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:normal;text-transform:none;
  transition:box-shadow .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1);
}
/* some pages carry a rule that sets the old font on every element (*), so each part of the card takes the card's font by name */
.shym-cards a.shym-card *{font-family:inherit}
.shym-cards a.shym-card:hover{box-shadow:0 16px 34px -20px rgba(38,34,47,.45);transform:translateY(-2px)}
.shym-cards a.shym-card:focus-visible{outline:2px solid var(--shym-ink);outline-offset:3px}
.shym-cards a.shym-card[hidden]{display:none}

/* photo well: each photo sits in its own slide, the slides sit side by side on a track that slides.
   The stack carries the multiply blend, so a photo on white melts into the cream and the slide stays clean. */
.shym-card__media{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;background:var(--shym-cream);overflow:hidden}
.shym-card__stack{position:absolute;inset:0;display:block;overflow:hidden;mix-blend-mode:multiply}
/* the 2px gap keeps the next photo from showing as a hairline when the well is a half-pixel wide */
.shym-card__track{display:flex;gap:2px;width:100%;height:100%;transition:transform .55s cubic-bezier(.25,1,.5,1);will-change:transform}
/* a slide clips its photo. A real photo carries a zoom (inline transform) that makes it fill the square,
   a product shot on white has none and shows whole. */
.shym-card__slide{flex:0 0 100%;display:block;position:relative;width:100%;height:100%;overflow:hidden}
.shym-cards .shym-card__slide img.shym-card__img{display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;object-fit:contain;opacity:1}

/* photos 2 to 4 stay hidden while the card is at rest, so an unloaded photo or a 1px edge of the next photo can never show.
   They hide again 0.6s after the pointer leaves, which lets the slide back finish first. */
.shym-cards .shym-card__slide:not(:first-child){visibility:hidden;transition:visibility 0s linear .6s}
.shym-cards .shym-card.is-ready .shym-card__media:hover .shym-card__slide{visibility:visible;transition-delay:0s}

/* one strip per extra photo. A strip only works once the photos have loaded (is-ready). */
.shym-card__zones{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(var(--n,1),1fr)}
.shym-card__zones i{display:block}
/* one dot per photo. With a pointer the dot of photo 1 is not shown, because photo 1 is the resting photo:
   strip 1 lights dot 2, strip 2 lights dot 3, strip 3 lights dot 4. */
.shym-card__dots{position:absolute;left:50%;bottom:14px;z-index:2;display:flex;gap:5px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.88);opacity:0;transform:translateX(-50%);transition:opacity .25s;pointer-events:none}
.shym-card__dots b{display:block;width:6px;height:6px;border-radius:3px;background:rgba(38,34,47,.28);transition:width .25s,background .25s}
@media (hover:hover){.shym-card__dots b:first-child{display:none}}
.shym-card.is-ready .shym-card__media:hover .shym-card__dots{opacity:1}
.shym-card.is-ready .shym-card__media:has(.shym-card__zones i:nth-child(1):hover) .shym-card__track{transform:translateX(calc(-100% - 2px))}
.shym-card.is-ready .shym-card__media:has(.shym-card__zones i:nth-child(2):hover) .shym-card__track{transform:translateX(calc(-200% - 4px))}
.shym-card.is-ready .shym-card__media:has(.shym-card__zones i:nth-child(3):hover) .shym-card__track{transform:translateX(calc(-300% - 6px))}
.shym-card.is-ready .shym-card__media:has(.shym-card__zones i:nth-child(1):hover) .shym-card__dots b:nth-child(2),
.shym-card.is-ready .shym-card__media:has(.shym-card__zones i:nth-child(2):hover) .shym-card__dots b:nth-child(3),
.shym-card.is-ready .shym-card__media:has(.shym-card__zones i:nth-child(3):hover) .shym-card__dots b:nth-child(4){width:16px;background:var(--shym-ink)}

/* badges and the arrow that shows on hover */
.shym-card__badges{position:absolute;top:12px;left:12px;right:12px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.shym-card__badge{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--shym-white);color:var(--shym-ink);font-size:12px;font-weight:600;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.06);white-space:nowrap}
.shym-card__badge--sale{background:var(--shym-orange);color:var(--shym-white);box-shadow:none}
.shym-card__badge--out{background:var(--shym-ink);color:var(--shym-white);box-shadow:none}
.shym-card__go{position:absolute;right:12px;bottom:12px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--shym-orange);color:var(--shym-white);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:none}
.shym-card__go svg{display:block;width:18px;height:18px}
.shym-cards a.shym-card:hover .shym-card__go,.shym-cards a.shym-card:focus-visible .shym-card__go{opacity:1;transform:none}

/* words */
.shym-card__body{display:flex;flex-direction:column;flex:1;padding:12px 8px 0}
.shym-card__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--shym-ink)}
.shym-card__spec{display:block;margin-top:5px;font-size:14px;font-weight:400;line-height:1.4;color:var(--shym-muted)}
.shym-cards .shym-card__spec-2 i{font-style:normal}
/* "In stock", a green dot and green words under the spec line */
.shym-card__stock{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:14px;font-weight:500;line-height:1.4;color:var(--shym-green)}
.shym-card__stock i{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.shym-card__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:14px}
.shym-card__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:18px;font-weight:700;line-height:1;color:var(--shym-ink)}
.shym-card__from{font-size:13px;font-weight:500;color:var(--shym-muted)}
.shym-cards .shym-card__price ins{background:none;color:var(--shym-orange);text-decoration:none;font-weight:700}
.shym-cards .shym-card__price del{font-size:14px;font-weight:500;color:var(--shym-muted);opacity:1;text-decoration:line-through}
.shym-card__rating{display:flex;align-items:center;gap:4px;font-size:13px;line-height:1;color:var(--shym-muted);white-space:nowrap}
.shym-card__rating svg{display:block;width:15px;height:15px;fill:var(--shym-star)}
.shym-card__rating b{font-weight:600;color:var(--shym-ink)}

/* "Show more", the outline pill button from the design system */
.shym-cards-more{display:flex;justify-content:center;margin:32px 0 0}
.shym-cards-more button.shym-more,.shym-cards-more button.shym-more:focus{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border:0;border-radius:999px;background:transparent !important;box-shadow:inset 0 0 0 1.5px var(--shym-ink);color:var(--shym-ink);font:600 15px/1 "Albert Sans",system-ui,sans-serif;cursor:pointer;transition:background .25s,color .25s}
.shym-cards-more button.shym-more:hover,.shym-cards-more button.shym-more:focus:hover{background:var(--shym-ink) !important;color:var(--shym-white)}
.shym-cards-more button.shym-more:focus-visible{outline:2px solid var(--shym-ink);outline-offset:3px}

/* The sort pill above a list, as in the style guide ("Chips, links and sorting"): a 42px pill with a 1.5px Line
   edge, "Sort by" in 14px Muted, the choice in Plum ink 600 and a 16px arrow. The site styles every button
   itself, so each value is said again here. */
.shym-cards-sort{display:flex;justify-content:flex-end;margin:0 0 24px}
.shym-cards-sort .shym-sort{position:relative;z-index:5;display:inline-block;font-family:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
.shym-cards-sort .shym-sort *{box-sizing:border-box;font-family:inherit}
.shym-cards-sort button.shym-sort__btn,.shym-cards-sort button.shym-sort__btn:hover,.shym-cards-sort button.shym-sort__btn:focus{
  display:inline-flex;align-items:center;gap:8px;height:42px;margin:0;padding:0 16px;border:0;border-radius:999px;
  background:transparent !important;box-shadow:inset 0 0 0 1.5px var(--shym-line);outline:0;
  color:var(--shym-muted);font-family:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;
  cursor:pointer;transition:box-shadow .2s;
}
.shym-cards-sort button.shym-sort__btn b{font-weight:600;color:var(--shym-ink)}
.shym-cards-sort button.shym-sort__btn svg{display:block;flex:none;width:16px;height:16px;transition:transform .2s}
/* the edge turns Plum ink under the pointer, on keyboard focus and while the list is open (the Field focus rule) */
.shym-cards-sort button.shym-sort__btn:hover,.shym-cards-sort button.shym-sort__btn:focus-visible,.shym-cards-sort .shym-sort.is-open button.shym-sort__btn{box-shadow:inset 0 0 0 1.5px var(--shym-ink)}
.shym-cards-sort .shym-sort.is-open button.shym-sort__btn svg{transform:rotate(180deg)}

/* the list of choices, as in DESIGN.md (Sort pill) and the style guide: white, the Line edge, the card corner (18px)
   with the field corner (12px) on each row, cream under the pointer, the Open list shadow. */
.shym-cards-sort .shym-sort__list{position:absolute;top:calc(100% + 8px);right:0;z-index:6;min-width:100%;width:max-content;margin:0;padding:6px;border-radius:18px;background:var(--shym-white);box-shadow:inset 0 0 0 1.5px var(--shym-line),0 16px 34px -20px rgba(38,34,47,.45);outline:0}
.shym-cards-sort .shym-sort__list[hidden]{display:none}
.shym-cards-sort .shym-sort__option{display:flex;align-items:center;justify-content:space-between;gap:20px;height:40px;margin:0;padding:0 12px;border-radius:12px;font-size:14px;font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;color:var(--shym-body);white-space:nowrap;cursor:pointer}
.shym-cards-sort .shym-sort__option svg{display:block;flex:none;width:16px;height:16px;color:var(--shym-ink);visibility:hidden}
.shym-cards-sort .shym-sort__option.is-active{background:var(--shym-cream)}
.shym-cards-sort .shym-sort__option[aria-selected="true"]{font-weight:600;color:var(--shym-ink)}
.shym-cards-sort .shym-sort__option[aria-selected="true"] svg{visibility:visible}
@media (hover:none){.shym-cards-sort .shym-sort__option{height:44px}}
@media (prefers-reduced-motion:reduce){.shym-cards-sort button.shym-sort__btn,.shym-cards-sort button.shym-sort__btn svg{transition:none}}

/* Phones and tablets have no hover, so people swipe the photo. The stack scrolls sideways and stops on each photo,
   and the dots stay on show. It switches on only when the script has marked the card (is-touch), so a phone
   without the script keeps photo 1 and shows no dots. A photo shows once it has loaded (is-in). */
@media (hover:none){
  .shym-card__zones,.shym-card__go{display:none}
  .shym-cards a.shym-card:hover{box-shadow:none;transform:none}
  .shym-card.is-touch .shym-card__stack{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
  .shym-card.is-touch .shym-card__stack::-webkit-scrollbar{display:none}
  .shym-card.is-touch .shym-card__track{transition:none;will-change:auto}
  .shym-card.is-touch .shym-card__slide{scroll-snap-align:start;scroll-snap-stop:always}
  .shym-cards .shym-card.is-touch .shym-card__slide.is-in{visibility:visible;transition:none}
  .shym-card.is-touch .shym-card__dots{opacity:1}
  .shym-card.is-touch .shym-card__dots b.is-on{width:16px;background:var(--shym-ink)}
}
@media (prefers-reduced-motion:reduce){.shym-card__track,.shym-cards a.shym-card,.shym-card__go,.shym-card__dots,.shym-card__dots b{transition:none}}
@media (max-width:1024px){.shym-cards,.shym-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phones: 2 columns. A card is narrow there, so it is made as wide and as short as it can be:
   the words are a small grid, name, first spec fact, then "In stock" and the rating on one row, then the price. */
@media (max-width:640px){
  .shym-cards{gap:10px}
  .shym-cards a.shym-card,.shym-cards a.shym-card:hover,.shym-cards a.shym-card:focus,.shym-cards a.shym-card:visited{padding:8px 8px 14px}
  .shym-card__body{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:8px;padding:10px 6px 0}
  .shym-card__title,.shym-card__spec{grid-column:1/-1}
  .shym-card__title{font-size:15px}
  .shym-card__spec,.shym-card__stock{font-size:13px}
  /* a phone card shows 2 facts, one on each line: the people count, then the timber. A third fact shows on a computer only */
  .shym-card__spec-2{display:block}
  .shym-cards .shym-card__spec-2 i{display:none}
  .shym-card__spec-more{display:none}
  .shym-card__foot{display:contents}
  .shym-card__stock{grid-column:1;grid-row:3;white-space:nowrap}
  /* the rating sits at the right of the stock row. If the row is too tight it runs a little into the card's own padding */
  .shym-card__rating{grid-column:2;grid-row:3;align-self:center;margin:6px 0 0 auto}
  .shym-card__body:not(:has(.shym-card__stock)) .shym-card__rating{grid-column:1/-1;margin-left:0}
  .shym-card__price{grid-column:1/-1;grid-row:4;align-self:end;margin-top:12px}
  .shym-card__dots{bottom:8px}
  .shym-card__badges{top:8px;left:8px;right:8px}
  .shym-card__badge{height:24px;padding:0 8px;font-size:11.5px}
  /* the style guide puts the sort pill at the left on a phone */
  .shym-cards-sort{justify-content:flex-start;margin-bottom:16px}
  .shym-cards-sort .shym-sort__list{left:0;right:auto}
}
/* On a phone the grid runs to 12px from each screen edge, whatever padding the page section has.
   Touch devices only: there the scroll bar takes no room, so 100vw is the true screen width. */
@media (max-width:640px) and (hover:none){
  .shym-cards,.shym-cards-sort{width:calc(100vw - 24px);max-width:none;margin-left:calc(50% - 50vw + 12px);margin-right:0}
}