/* GW Product Recommendations — Figma 30:7761 (desktop 1440) / 30:10449 (mobile 393).
   Mobile-first: base = mobile 393 exact (2-row swipe track, square images,
   progress bar); >=768 tablet = the desktop composition at 3 cards per page
   with gw-new-arrivals' fluid padding and heading clamp (not in the design);
   >=1025 = desktop 1440 exact (4-up row + arrows, content capped at 1312).
   Line-heights are the Figma box heights in px (heading 52 mobile / 63
   desktop, title and price 21) — the frame's `normal`, measured.
   Card width is FLUID, not Figma's fixed 170: two fixed 170s plus the 16 gap
   overflow a 375 viewport. calc((100% - 16px) / 2) = 172.5 at 393.
   The host is display:block and carries no padding (the __wrap inside the
   fetched markup does), so while it waits for the fetch it occupies nothing.
   .__card needs margin:0 — the theme's li rule adds 4.5px of margin-bottom
   that a grid parent adds to its own height. */
gw-product-recommendations{display:block}
.gw-product-recommendations__wrap{padding:64px 16px;background-color:var(--gw-pr-bg,transparent)}
.gw-product-recommendations__body{display:flex;flex-direction:column;gap:32px;width:100%;max-width:1312px;min-width:0;margin-inline:auto}
.gw-product-recommendations__head{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;min-width:0}
.gw-product-recommendations__heading{min-width:0;margin:0;font-family:var(--header-font-stack);font-size:40px;font-style:normal;font-weight:400;line-height:52px;letter-spacing:0;text-transform:capitalize;color:#212529;overflow-wrap:break-word}
/* Arrows are drawn on desktop only; the 4px bar is their mobile counterpart.
   margin-left:auto keeps them right when the heading is blank. */
.gw-product-recommendations__arrows{display:none;flex:0 0 auto;align-items:center;gap:8px;margin-left:auto}
.gw-product-recommendations__arrow{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:0;background:none;color:#111111;cursor:pointer}
.gw-product-recommendations__arrow svg{display:block;width:24px;height:24px}
/* One down-chevron glyph, turned: +90deg reads "<", -90deg reads ">". */
.gw-product-recommendations__arrow--prev svg{transform:rotate(90deg)}
.gw-product-recommendations__arrow--next svg{transform:rotate(-90deg)}
.gw-product-recommendations__arrow[disabled]{opacity:.35;cursor:default}
.gw-product-recommendations__carousel{display:flex;flex-direction:column;gap:16px;min-width:0}
/* ONE grid for every breakpoint: columns flow sideways, the row count and
   column width are what change. Every page-opening card snaps. */
.gw-product-recommendations__track{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:calc((100% - 16px) / 2);gap:16px;margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.gw-product-recommendations__track::-webkit-scrollbar{display:none}
.gw-product-recommendations__card{min-width:0;margin:0}
.gw-product-recommendations__card:nth-child(4n+1){scroll-snap-align:start}
.gw-product-recommendations__link{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;color:inherit;text-decoration:none}
/* aspect-ratio gives the box real area before load, which is what makes
   loading="lazy" safe (the zero-area lazy bug recorded on gw-brand-story). */
.gw-product-recommendations__media{width:100%;aspect-ratio:1 / 1;overflow:hidden;border-radius:0;background-color:#e7e7e7}
.gw-product-recommendations__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.gw-product-recommendations__info{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:100%;min-width:0}
.gw-product-recommendations__price-row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:8px;width:100%;min-width:0}
.gw-product-recommendations__title,.gw-product-recommendations__price{font-size:16px;font-weight:400;line-height:21px;letter-spacing:0;color:#242424;white-space:nowrap}
/* The frame's one 21px row uses the short "Product Name"; a real title is
   clamped to that line rather than wrapping and unevening the cards. */
.gw-product-recommendations__title{min-width:0;overflow:hidden;text-overflow:ellipsis}
.gw-product-recommendations__price{flex:0 0 auto}
/* 5 x 17.037 + 4 x 1.7037 = 92.0 — the Figma Stars Wrapper exactly. */
.gw-product-recommendations__stars{display:flex;flex-direction:row;align-items:center;gap:1.7037px;height:17.037px}
.gw-product-recommendations__stars svg{display:block;flex:0 0 auto}
/* The thumb's 28.81% is Figma's 104/361, shown until the carousel reports the
   real visible share of the list (data-gwsc-thumb-auto). */
.gw-product-recommendations__indicator{position:relative;width:100%;height:4px;overflow:hidden;background-color:#e5e6e6}
.gw-product-recommendations__thumb{position:absolute;top:0;left:0;width:28.81%;height:4px;background-color:#252626}
/* Nothing overflows: the controls have nothing to drive, so they go. */
.gw-product-recommendations__body[data-gwsc-idle] .gw-product-recommendations__arrows,.gw-product-recommendations__body[data-gwsc-idle] .gw-product-recommendations__indicator{display:none}
.gw-product-recommendations__placeholder{box-sizing:border-box;width:100%;max-width:1312px;margin:0 auto;padding:24px;font-size:14px;line-height:21px;text-align:center;color:#6a5632;background-color:#fdfaf4;outline:1px dashed #a88e57;outline-offset:-1px}
@media screen and (min-width:768px){
.gw-product-recommendations__wrap{padding:80px clamp(24px,5vw,64px)}
.gw-product-recommendations__heading{font-size:clamp(40px,3.6vw,48px);line-height:1.3125;text-transform:none;color:#111111}
.gw-product-recommendations__arrows{display:flex}
.gw-product-recommendations__track{grid-template-rows:auto;grid-auto-columns:calc((100% - 64px) / 3);gap:32px}
.gw-product-recommendations__card:nth-child(4n+1){scroll-snap-align:none}
.gw-product-recommendations__card:nth-child(3n+1){scroll-snap-align:start}
.gw-product-recommendations__link{gap:16px}
.gw-product-recommendations__media{aspect-ratio:304 / 312}
.gw-product-recommendations__indicator{display:none}
}
@media screen and (min-width:1025px){
.gw-product-recommendations__wrap{padding:104px 64px}
.gw-product-recommendations__heading{font-size:48px;line-height:63px}
/* (1312 - 3 x 32) / 4 = 304, the frame's card exactly. */
.gw-product-recommendations__track{grid-auto-columns:calc((100% - 96px) / 4)}
.gw-product-recommendations__card:nth-child(3n+1){scroll-snap-align:none}
.gw-product-recommendations__card:nth-child(4n+1){scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){
.gw-product-recommendations__track{scroll-behavior:auto}
}