/* bestsellers.css v7c (BRIEF-V7C part B), prefix bs-: the essentials, right under the hero, on the clean warm white.
   Each product stands on its own colour field (the tn- classes of product.css) on a drawn floor: a lit top surface, a bright
   line, the front falling into the ground's own deep tone. Four across from 1100 px, three from 761, a snap rail on phones.
   The tile heights follow the screen's height, so the head and two rows sit inside one desktop screen. */
.bs{position:relative;z-index:2;overflow:clip;background:var(--paper);color:var(--ink);padding-block:clamp(36px,6svh,72px) clamp(40px,7svh,88px)}
.bs .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin-bottom:clamp(18px,3svh,32px)}
.bs-head h2{margin-top:10px;font-size:clamp(34px,min(4.4vw,7svh),64px)}
.bs-line{font-size:17px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.bs-line .link{color:var(--ink)}
.bs-grid{list-style:none;margin:0 auto;padding:0;width:min(100% - 2*var(--gutter),var(--max));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px) clamp(12px,1.6vw,24px)}
.bs-rail{position:relative}
.bs-item{position:relative;display:flex;flex-direction:column;min-width:0}
.bs-stage{--floor-at:84%;position:relative;display:flex;align-items:flex-end;justify-content:center;height:clamp(150px,23svh,290px);border-radius:var(--r-lg);overflow:hidden;
  background-image:linear-gradient(180deg,rgb(var(--light-warm) / 0) calc(var(--floor-at) - 26px),rgb(var(--light-warm) / .2) calc(var(--floor-at) - 1px),rgb(255 255 255 / .55) var(--floor-at) calc(var(--floor-at) + 1.5px),rgb(var(--light-warm) / .14) calc(var(--floor-at) + 1.5px),rgb(var(--shade) / .12) 100%)}
.bs-cut{position:absolute;left:50%;bottom:calc(100% - var(--floor-at) - 3%);height:76%;width:auto;max-width:86%;object-fit:contain;object-position:50% 100%;translate:-50% 0}
.bs-tag{position:absolute;top:8px;left:8px;z-index:2;background:var(--paper);color:var(--ink)}
.bs-info{display:flex;flex-direction:column;flex:1 1 auto;padding-top:12px}
.bs-name{font-family:var(--font-sans);font-weight:700;font-size:16px;line-height:1.3;letter-spacing:0;font-variation-settings:normal}
.bs-name a:hover{text-decoration:underline;text-underline-offset:3px}
.bs-sub{margin-top:2px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.bs-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.bs-price{font-family:var(--font-display);font-size:24px;line-height:1;font-weight:380;font-variation-settings:"SOFT" 40}
.bs .bs-shop{min-height:44px;padding:0 20px;font-size:15px}
/* the zellige and terracotta fields take the lighter floor line */
.bs-stage:is(.tn-umber,.tn-umber-2,.tn-terracotta,.tn-terracotta-2){--lit-hi:.18}
@media (min-width:761px) and (max-width:1099px){.bs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.bs-item:nth-child(n+7){display:none}}
/* phones: one snap rail, a little over one and a half tiles in view so the next one shows */
@media (max-width:760px){
  .bs-rail{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .bs-rail::-webkit-scrollbar{display:none}
  .bs-grid{display:flex;width:max-content;margin:0;gap:12px;padding:0 var(--gutter) 4px}
  .bs-item{width:min(58vw,240px);scroll-snap-align:start}
  .bs-stage{height:clamp(150px,26svh,230px)}
  .bs-line{font-size:15px}
}
/* the compact path: short desktop screens, so the head and both rows still sit on one screen */
@media (min-width:761px) and (max-height:820px){
  .bs{padding-block:clamp(20px,4svh,48px)}
  .bs-stage{height:clamp(120px,19svh,220px)}
  .bs-info{padding-top:8px}
  .bs-buy{padding-top:6px}
}
@media (min-width:600px) and (max-height:500px){.bs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.bs-item:nth-child(n+5){display:none}.bs-stage{height:clamp(90px,24svh,140px)}}