/** Shopify CDN: Minification failed

Line 300:18 Unexpected "{"
Line 300:27 Expected ":"
Line 308:18 Unexpected "{"
Line 308:27 Expected ":"

**/
/* ==========================================================
   SURF NAKED PXM — Tab Collections Section
   Save to: assets/tab-collections.css
   Link in sections/tab-collections.liquid, or globally in
   theme.liquid: {{ 'tab-collections.css' | asset_url | stylesheet_tag }}

   Uses your brand tokens. Update var() names if yours differ.
   ========================================================== */

.tab-collections {
  overflow: hidden;
}

.tab-collections__heading {
  text-align: center;
  margin-bottom: 24px;
  font-family: var(--font-heading, 'Archivo Black', sans-serif);
  color: var(--color-deep-navy, #fff);
}

/* --- Tabs nav --- */
.sn-tabs__nav-wrapper {
  position: relative;
  border-bottom: 2px solid var(--color-deep-navy, #1A1A2E);
  margin-bottom: 32px;
}

.sn-tabs__nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sn-tabs__nav::-webkit-scrollbar {
  display: none;
}

.sn-tabs__nav-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px 16px;
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-deep-navy, #fff);
  opacity: 0.5;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.sn-tabs__nav-link.is-current {
  opacity: 1;
}

.sn-tabs__nav-indicator {
  position: absolute;
  bottom: -2px;
  height: 3px;
  background: var(--color-hot-pink, #f5c842);
  transition: left 0.2s ease, width 0.2s ease;
}

/* --- Panels --- */
.sn-tabs__panel[hidden] {
  display: none;
}

/* --- Carousel (native scroll-snap, no external library) --- */
.sn-carousel {
  position: relative;
}

.sn-carousel__track {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 4px 4px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sn-carousel__track::-webkit-scrollbar {
  display: none;
}

.sn-carousel__slide {
  flex: 0 0 auto;
  width: calc((100% - 32px) / 3);
  scroll-snap-align: start;
}

.sn-carousel__slide--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 40px;
  color: var(--color-deep-navy, #1A1A2E);
  opacity: 0.6;
}

@media screen and (max-width: 989px) {
  .sn-carousel__slide {
    width: 240px;
  }
}

@media screen and (max-width: 749px) {
  .sn-carousel__slide {
    width: 200px;
  }
}

.sn-carousel__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-deep-navy, #1A1A2E);
  background: var(--color-cream, #F9E8D0);
  opacity: 0.6;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  transition: background 0.15s ease;
}

.sn-carousel__arrow:hover {
  background: var(--color-sun-yellow, #F5C842);
  opacity: 1;
}

.sn-carousel__arrow--prev {
  left: -44px;
}

.sn-carousel__arrow--next {
  right: -44px;
}

@media screen and (max-width: 989px) {
  .sn-carousel__arrow {
    display: none;
  }
}

.sn-tabs__view-all {
  text-align: center;
  margin-top: 16px;
}

/* Checkerboard product card frame — bypasses Dawn's internal
   ratio/flex card layout entirely and forces plain, predictable
   block stacking: image on top, content box below, never overlapping.
   Dawn's own card system uses absolute-positioned media inside a
   flex/ratio container, which in this carousel's non-grid context
   was causing the content box to render over the image instead of
   below it — these !important overrides are deliberate, to win
   against Dawn's own card CSS regardless of load order. */

.sn-carousel__slide .card,
.sn-carousel__slide .card-wrapper {
  display: block !important;
  height: auto !important;
}

.sn-carousel__slide .card__inner {
  display: block !important;
  position: static !important;
  height: auto !important;
  padding-bottom: 0 !important;
}

/* Square image frame — every product photo is cropped to a centred square,
   whatever shape it was uploaded as */
.sn-carousel__slide .card__media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.sn-carousel__slide .card__media .media {
  position: absolute !important;
  inset: 0;
  height: 100% !important;
  padding: 0 !important;
}

.sn-carousel__slide .card__media img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

.sn-carousel__slide .card > .card__content {
  position: static !important;
  height: auto !important;
  margin-top: 14px !important;
}


.sn-carousel__slide .card__inner > .card__content {
  display: none !important;
}

.sn-carousel__slide .card__badge {
  display: none !important;
}

.sn-carousel__slide {
  padding: 10px;
  border-radius: 20px;
  border: 3px solid var(--color-deep-navy, #1A1A2E);
  background-color: var(--color-cream, #F9E8D0);
  background-image:
    linear-gradient(45deg, var(--color-cobalt, #3B5BDB) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-cobalt, #3B5BDB) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-cobalt, #3B5BDB) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-cobalt, #3B5BDB) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
}

/* Single box, not two nested ones. Previously .card / .card-wrapper
   had their own background + border-radius sitting inside the slide's
   padding — two separately-rounded rectangles that never lined up
   exactly, which is what caused the pale sliver peeking out at the
   corners. Now the slide above is the only rounded/bordered box;
   .card and .card-wrapper are fully transparent pass-throughs with
   no radius of their own, so there is nothing left to misalign. */
.sn-carousel__slide .card,
.sn-carousel__slide .card-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Black border frame around the image itself */
.sn-carousel__slide .card__media {
  border: 2px solid var(--color-deep-navy, #1A1A2E);
  border-radius: 8px;
  overflow: hidden;
}

/* Title + price pill — no stroke here regardless of the section's
   "Title / price box → Outline width" customizer setting; the pill
   background color still comes through from that setting inline,
   this just guarantees the outline stays off. If you want an outline
   back later, remove this rule rather than raising the width setting
   back up, or the two will fight each other. */
.sn-carousel__slide .card__content {
  border-radius: 4px;
  padding: 12px 14px;
  border: none !important;
}

.sn-carousel__slide .card__heading {
  font-family: var(--font-body, 'DM Sans', sans-serif);
  font-weight: 700;
  color: var(--color-deep-navy, #1A1A2E);
  margin: 0 0 4px;
}

.sn-carousel__slide .price {
  color: var(--color-deep-navy, #1A1A2E);
  font-weight: 600;
}

#shopify-section-{{ section.id }} .tab-collections__heading-image-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 32px;
  text-align: center;
}

#shopify-section-{{ section.id }} .tab-collections__heading-image {
  display: block;
  width: min(
    {{ section.settings.heading_image_width }}px,
    90vw
  );
  max-width: 50%;
  height: auto;
}

.sn-carousel__slide .sn-carousel__cta {
  margin-top: 12px;
  border-radius: 999px;
  background: var(--color-sun-yellow, #F5C842);
  color: var(--color-deep-navy, #1A1A2E);
  border: 2px solid var(--color-deep-navy, #1A1A2E);
  position: relative;
  z-index: 2;
}

.sn-carousel__slide .sn-carousel__cta::after,
.sn-carousel__slide .sn-carousel__cta::before {
  display: none;
}

.sn-carousel__slide .sn-carousel__cta {
  white-space: nowrap;
}

@media screen and (max-width: 749px) {
  .sn-carousel__slide .sn-carousel__cta {
    padding: 0 12px;
    min-height: 40px;
    font-size: 13px;
    letter-spacing: 0.02em;
  }
}