/* GW Social Strip — Figma 32:892 (desktop 1440) / 32:1850 (mobile 390).
   Three flush full-bleed bands, gap 0: tagline marquee (66px) · image strip
   (337px) · Instagram handle bar (66px). Section padding 64px/0 mobile,
   80px/0 desktop. Height check: 64+66+337+66+64=597 and 80+66+337+66+80=629.
   Mobile-first: base = mobile 390 exact, >=1025 desktop 1440 exact — the
   breakpoint every other gw-* section uses.

   NO font-family is declared: the section uses semantic tags and inherits the
   merchant's type settings, ebgaramond_n4, which is the design's only family.
   The gw-faq / gw-why-us precedent.
   line-height is `normal` throughout — the Figma text nodes emit
   leading-[normal] and render an 18px box at 14px, which is what makes the
   66px bars (24 + 18 + 24) come out exact.
   Band A carries NO letter-spacing (its nodes emit no tracking class); band C
   carries 2.52px (it alone uses the file's "Tagline" text style). That
   difference is in the design, not an oversight here.
   Border-radius is 0 everywhere — no tile emits one.

   BAND B: mobile is a swipe scroll track. Desktop (>=1025) is a fluid
   5-up row, no scroll: tiles flex:1 1 0 with gap 17.5px inside a 1440 max
   track, so at 1440 each is exactly 274 (5x274 + 4x17.5 = 1440) and below it
   they shrink instead of cropping the last tile. Viewports <1440 (or 1440
   minus a scrollbar) used to overflow and clip tile 5.

   Tile 2's desktop inset square (274x274 at 1440, 31.5px above and below)
   comes from `align-items:center` plus aspect-ratio:1 so it tracks tile width,
   and is driven by the tile's own `gw_inset` setting rather than
   :nth-child(2), so reordering tiles in the editor cannot misapply it.

   Colours reach CSS as --gw-ss-* from the section's scoped <style>; every one
   carries its Figma value as the var() fallback, so the section renders
   correctly with all colour settings blank. */
.gw-ss{padding:64px 0;background-color:var(--gw-ss-bg,transparent)}
.gw-ss__tagline{width:100%;padding:24px 17px;overflow:hidden;background-color:var(--gw-ss-band-bg,#f6f3ef)}
.gw-ss__marquee{display:grid;grid:auto/auto-flow max-content;column-gap:16px;justify-content:start}
.gw-ss--reverse .gw-ss__marquee{justify-content:end}
.gw-ss__marquee-copy{display:flex;flex-direction:row;align-items:center;column-gap:16px;margin:0;padding:0;list-style:none}
.gw-ss__phrase,.gw-ss__bullet{margin:0;font-size:14px;font-weight:400;line-height:normal;letter-spacing:0;text-transform:uppercase;white-space:nowrap;color:var(--gw-ss-tagline-color,#3d3d3d)}
.gw-ss__strip{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;background-color:var(--gw-ss-band-bg,#f6f3ef)}
.gw-ss__strip::-webkit-scrollbar{display:none}
.gw-ss__track{display:flex;flex-direction:row;align-items:center;column-gap:16px;width:max-content;height:337px;margin:0;padding:0;list-style:none}
.gw-ss__tile{flex:0 0 266px;height:337px;margin:0;overflow:hidden;border-radius:0;scroll-snap-align:start;background-color:var(--gw-ss-band-bg,#f6f3ef)}
.gw-ss__tile-inner{display:block;width:100%;height:100%}
.gw-ss__tile img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.gw-ss__handle{display:flex;align-items:center;justify-content:center;width:100%;padding:24px 17px;background-color:var(--gw-ss-handle-bg,#fdfaf4)}
.gw-ss__handle-link{font-size:14px;font-weight:600;line-height:normal;letter-spacing:2.52px;text-transform:uppercase;text-decoration-line:underline;text-decoration-style:solid;text-underline-position:from-font;color:var(--gw-ss-handle-color,#242424)}
.gw-ss__placeholder{width:100%;padding:24px;font-size:14px;line-height:21px;text-align:center;color:#6a5632;background-color:#fdfaf4;outline:1px dashed #a88e57;outline-offset:-1px}
.gw-ss__tile .gw-ss__placeholder{display:flex;align-items:center;justify-content:center;height:100%}
@media (prefers-reduced-motion:no-preference){.gw-ss__marquee-copy{animation:gw-ss-marquee var(--gw-ss-marquee-speed,40s) linear infinite}.gw-ss--reverse .gw-ss__marquee-copy{animation-name:gw-ss-marquee-reverse}.gw-ss__tagline:hover .gw-ss__marquee-copy{animation-play-state:paused}}
@media (prefers-reduced-motion:reduce){.gw-ss__marquee-copy[aria-hidden="true"]{display:none}}
@keyframes gw-ss-marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes gw-ss-marquee-reverse{from{transform:translateX(0)}to{transform:translateX(100%)}}
@media screen and (min-width:1025px){.gw-ss{padding:80px 0}.gw-ss__strip{overflow-x:hidden;scroll-snap-type:none}.gw-ss__track{column-gap:17.5px;width:100%;max-width:1440px;margin-inline:auto}.gw-ss__tile{flex:1 1 0;min-width:0}.gw-ss__tile--inset{height:auto;aspect-ratio:1;align-self:center}}