/** Shopify CDN: Minification failed

Line 3782:0 Unexpected "`"

**/
/* =============================================================================
   Capsule Shop custom styles — Atlantic v19 rebuild
   Rules quarried per-feature from the v17 theme (docs/V19-REBUILD.md rule 2).
   Every rule here maps to a known customization; no bulk copies.
   ============================================================================= *//* =============================================================================
   Fonts — self-hosted Inter + Libre Bodoni (ported from v17 custom.css.liquid)
   ============================================================================= */

/* Inter */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/inter-v20-latin-regular.woff2?v=130199387642073463921783020232) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/inter-v20-latin-500.woff2?v=32299446914459139891783020232) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/inter-v20-latin-600.woff2?v=77446791126527229001783020232) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/inter-v20-latin-700.woff2?v=16906163426054526491783020232) format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/inter-v20-latin-900.woff2?v=120825113951263942281783020232) format('woff2');
}

/* Libre Bodoni */
@font-face {
  font-family: 'Libre Bodoni';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/libre-bodoni-v9-latin-regular.woff2?v=79340806009811701711783020232) format('woff2');
}
@font-face {
  font-family: 'Libre Bodoni';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/libre-bodoni-v9-latin-500.woff2?v=27860896177395129261783020232) format('woff2');
}
@font-face {
  font-family: 'Libre Bodoni';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/libre-bodoni-v9-latin-700.woff2?v=16329104754454823741783020232) format('woff2');
}

/* =============================================================================
   PREMIUM PDP — quarried from v17 custom_style.css, verified against v19 markup.
   .premium-pdp is set on the product-area section wrapper (snippets/product.liquid).
   Not yet ported from v17: size pills, ATC+wishlist submit row, KiwiSizing link,
   label/anniversary badge, gallery arrows, mobile snap gallery, quickshop rules.
   ============================================================================= */

.product-area {
  padding: 60px 0;
}

.premium-pdp {
  font-family: 'Inter', sans-serif;
}

/* v19 wraps every custom-liquid block in .custom-liquid { margin: 1rem 0 }
   (theme.css). The premium right column already spaces blocks with the
   .product-details flex gap, so the wrapper margins double the spacing. */
.premium-pdp .custom-liquid {
  margin: 0;
}
.premium-pdp button,
.premium-pdp input,
.premium-pdp select {
  font-family: inherit;
}

/* --- Breadcrumbs --- */
.premium-pdp .premium-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  line-height: 12px;
  color: #000;
  margin-bottom: 10px;
  letter-spacing: 0;
}

.premium-pdp .premium-breadcrumbs a {
  color: #000;
  text-decoration: none;
  text-transform: capitalize;
}

.premium-pdp .premium-breadcrumbs a:hover {
  text-decoration: underline;
}

/* --- Label / promo badge (ported from v17 custom_style.css:2262) --- */
.premium-pdp .premium-label {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: uppercase;
  height: 20px;
  padding: 5px 10px;
  margin-bottom: 12px;
  align-self: flex-start;
  border: 1.5px solid currentColor;
}

.premium-pdp .premium-label--padded {
  border: none;
  padding: 0px 18px 0px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
}

.premium-pdp .premium-label--anniversary {
  background-color: #EBB942;
  color: #000;
}

/* --- Vendor / Brand --- */
.premium-pdp .premium-vendor {
  font-family: 'Libre Bodoni', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: normal;
  color: #000;
  margin: 0;
  margin-bottom: 4px;
  line-height: 30px;
}

.premium-pdp .premium-vendor a {
  color: inherit;
  text-decoration: none;
}

/* --- Product title (v19: h1 uses .product__title inside the title block) --- */
.premium-pdp .product__title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  color: #000;
  margin: 0 0 8px;
  line-height: 15px;
}

/* --- Price (v19: .product__price block) --- */
/* margin-top pins the title→price gap to v17's 8px: the title's own 8px
   margin-bottom is killed by the legacy blanket
   `.product__title { margin-bottom: 0 !important }` further down. */
.premium-pdp .product__price {
  font-size: 13px;
  font-weight: 500;
  line-height: 15px;
  color: #000;
  margin-top: 8px;
  margin-bottom: 24px;
}

.premium-pdp .product__price .money.original {
  color: #797676;
  font-weight: 400;
  text-decoration: line-through;
}

/* --- Why We Love This --- */
.premium-pdp .premium-why-we-love {
  margin-bottom: 22px;
}

.premium-pdp .premium-why-we-love__heading {
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  color: #000;
  margin: 0 0 8px;
}

.premium-pdp .premium-why-we-love__text {
  margin: 0;
}

.premium-pdp .premium-why-we-love__text p {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #000;
  letter-spacing: normal;
}

/* --- Divider --- */
.premium-pdp .premium-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 0;
}

/* Why-we-love→options gap (James, July 9 audit follow-up). The divider's old
   16px bottom margin was collapsing into this 32px, so trimming the divider
   alone changed nothing — this margin is the real lever. 32px→16px halves
   the gap; the divider stays at margin 0 so it can't resurface. */
.premium-pdp .options {
  margin-top: 16px;
}

/* --- Option rows (Color: / Size: label + value) --- */
.premium-pdp .premium-option-row {
  font-size: 13px;
  line-height: 18px;
  color: #000;
  margin: 0 0 14px;
}

.premium-pdp .premium-option-row strong {
  font-weight: 700;
  margin-right: 2px;
}

/* --- Options wrapper: flex column so CSS order puts Color above Size.
       Stock theme.css sets display:grid via 3-class alignment selectors
       (.product-details-alignment-* .has-no-variants .product-form-grid-*);
       match that specificity so the flex layout wins. --- */
.premium-pdp .has-no-variants .product-form-grid,
.premium-pdp .product-form .product-form-grid,
.premium-pdp .product-form-grid {
  display: flex;
  flex-direction: column;
}

.premium-pdp .premium-option-group--color {
  order: -1;
}

/* Restore spacing below size label when pills are hidden (single-value products) */
.premium-pdp .premium-option-group--size:not(:has(.premium-size-options)) {
  margin-bottom: 30px;
}

/* --- Size pills grid --- */
.premium-pdp .premium-size-options {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 30px;
  position: relative;
}

.premium-pdp .premium-size-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px;
  height: 45px;
  padding: 0;
  border: 1px solid #c3c3c3 !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  position: relative;
  background: #fff !important;
  transition: border-width 0.1s ease;
  margin: 0;
}

.premium-pdp .premium-size-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.premium-pdp .premium-size-pill .option-value-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #000 !important;
  line-height: 18px !important;
  pointer-events: none;
  /* Strip theme's border and background — pill div handles all visual state */
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-width: 0 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* Override theme's checked/disabled/focus states on the span */
.premium-pdp .premium-size-pill .option-value-input:checked + .option-value-name,
.premium-pdp .premium-size-pill .option-value-input:disabled + .option-value-name,
.premium-pdp .premium-size-pill .option-value-input:focus + .option-value-name {
  border: none !important;
  background: transparent !important;
  color: inherit !important;
  outline: none !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

/* Selected state */
.premium-pdp .premium-size-pill:has(input:checked),
.premium-pdp .premium-size-pill.is-selected {
  border: 1px solid #000 !important;
}

/* Keyboard focus indicator — only on keyboard nav, not mouse clicks */
.premium-pdp .premium-size-pill:has(input:focus-visible) {
  outline: 2px solid #000 !important;
  outline-offset: 3px !important;
}

/* Out-of-stock state — diagonal line */
.premium-pdp .premium-size-pill:has(input:disabled) {
  cursor: default;
  border-color: #c3c3c3 !important;
  background: #f4f4f4 !important;
  color: #c3c3c3 !important;
}

.premium-pdp .premium-size-pill:has(input:disabled) input {
  cursor: default;
}

.premium-pdp .premium-size-pill:has(input:disabled) .option-value-name {
  color: #c3c3c3 !important;
}

.premium-pdp .premium-size-pill:has(input:disabled)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    #c3c3c3 calc(50% - 0.5px),
    #c3c3c3 calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
  pointer-events: none;
}

/* Wide variant for size values longer than 4 chars (e.g. ONE SIZE) */
.premium-pdp .premium-size-pill--wide {
  width: auto;
  min-width: 60px;
  padding: 0 16px;
}

/* --- Size option group: label left, Size Guide right, pills below --- */
.premium-pdp .premium-option-group--size {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
}

.premium-pdp .premium-option-group--size .premium-option-row {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.premium-pdp .premium-option-group--size .ks-chart-container {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0 !important;
}

.premium-pdp .premium-option-group--size .premium-size-options {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 15px;
}

/* --- KiwiSizing size guide link styling --- */
.premium-pdp .ks-chart-container {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 16px !important;
}

.premium-pdp .ks-chart-modal-link {
  font-size: 10px !important;
  line-height: 18px !important;
  letter-spacing: normal !important;
  color: #000 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
}

.premium-pdp .ks-chart-modal-link ._ks_text {
  border-bottom: 1px solid #000;
}

/* Hide any icon KiwiSizing injects inside the link to avoid duplicates */
.premium-pdp .ks-chart-modal-link img,
.premium-pdp .ks-chart-modal-link svg {
  display: none !important;
}

/* --- ATC + Wishlist row --- */
.premium-pdp .premium-submit-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  /* v17 has no top margin here (custom_style.css:2582) — the 15px added
     during the port opened the options→ATC gap James flagged. */
  margin: 0 0 10px;
}

/* v19 theme.css puts margin:15px 0 on the submit button, which pushed the
   button 15px below the heart — the row carries the rhythm instead */
.premium-pdp .premium-submit-row .premium-atc-btn {
  flex: 1;
  margin: 0;
}

.premium-pdp .premium-wishlist-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 50px !important;
  flex-shrink: 0 !important;
  border: 1px solid #000 !important;
  background: #fff !important;
  cursor: pointer;
  padding: 0 !important;
  margin-left: 10px !important;
}

.premium-pdp .premium-wishlist-btn svg,
.premium-pdp .premium-wishlist-btn img {
  pointer-events: none;
  display: block;
  width: 20px;
  height: 20px;
}

.premium-pdp .premium-submit-row .swym-btn-container {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide any Swym button that auto-injects elsewhere on premium PDP */
.premium-pdp .swym-btn-container[data-position="default"] {
  display: none !important;
}

/* --- Hide stock option headers (premium option rows replace them) --- */
.premium-pdp .product-form-grid .option-header {
  display: none;
}

/* --- ATC button (v19 stock form submit; v17 used .premium-atc-btn) --- */
.premium-pdp .product-submit {
  background: #000;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 50px;
  border-radius: 0;
  cursor: pointer;
}

.premium-pdp .product-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Surface pick-up: invisible but initialized so Atlantic wires the drawer.
       Trust badges carry the pickup message instead (v17 behavior). --- */
.premium-pdp .surface-pick-up,
.premium-pdp [data-surface-pick-up] {
  position: absolute;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* --- Trust badges --- */
.premium-pdp .premium-trust-badges {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 20px;
  padding-top: 4px;
}

.premium-pdp .premium-trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #222;
}

.premium-pdp .premium-trust-badge img {
  width: 20px;
  height: 20px;
}

.premium-pdp .premium-store-link {
  font-size: 10px;
  line-height: 18px;
  font-weight: 400;
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  margin-left: 32px;
}

/* --- Need Help --- */
.premium-pdp .premium-need-help {
  margin-bottom: 0;
}

.premium-pdp .premium-need-help__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.premium-pdp .premium-need-help__header img {
  width: 20px;
  height: 20px;
}

.premium-pdp .premium-need-help__header p {
  font-size: 13px;
  color: #222;
  margin: 0;
  line-height: 1.5;
}

.premium-pdp .premium-need-help a.premium-need-help__scroll-link {
  text-decoration: none;
  border-bottom: 1px solid #000;
  color: inherit;
}

/* --- Collapsible accordion typography --- */
.premium-pdp .collapsible-tab__heading {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

.premium-pdp .collapsible-tab__text p,
.premium-pdp .collapsible-tab__text li,
.premium-pdp .collapsible-tab__text ul,
.premium-pdp .collapsible-tab__text a {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: normal;
}

.premium-pdp .collapsible-tab__text a {
  text-decoration: none;
  border-bottom: 1px solid #000;
}

/* v19 theme.css adds 8px vertical margins on list items; live v17 has none */
.premium-pdp .collapsible-tab__text li {
  margin: 0;
}

.premium-pdp .shipping-returns {
  margin-top: 0;
}

/* --- Section titles below the PDP --- */
.template-product .how-to-wear__title,
.template-product .product-recommendations .section-title,
.template-product .recently-viewed .section-title,
.template-product #need-help-contact .section-title {
  font-size: 24px;
  line-height: 25px;
  font-weight: 400;
  margin-bottom: 40px;
}

/* --- How to Wear (base, from v17 custom.css.liquid; standalone section on v19) --- */
.how-to-wear {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.how-to-wear__item-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.how-to-wear__img-wrapper {
  width: 100%;
  max-width: 150px;
  aspect-ratio: 5 / 6;
  margin-bottom: 0.5rem;
}

.how-to-wear__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.how-to-wear__link {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.template-product .how-to-wear__item-title {
  font-size: 13px;
  line-height: 15px;
  text-transform: capitalize;
}

.premium-pdp .how-to-wear__caption {
  text-align: center;
}

.premium-pdp .how-to-wear__item-vendor {
  font-size: 14px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  margin-top: 6px;
  margin-bottom: 6px;
}

.premium-pdp .how-to-wear__item-title {
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  text-align: center;
}

/* =============================================================================
   Product cards — recommendations, recently viewed, and shared card typography
   (quarried from v17 custom.css.liquid + custom_style.css)
   ============================================================================= */

.product .brand,
.quick-shop-content .brand,
#product-area .brand,
.mobile-product-title .brand {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  margin: 0;
  color: #000000;
  text-transform: uppercase;
}

.product .brand {
  letter-spacing: normal;
  line-height: 15px;
  margin-bottom: 6px;
}

.product .brand a {
  color: #000000;
}

.product .title,
.quick-shop-content .title,
#product-area .title,
.mobile-product-title .title {
  font-size: 13px;
  margin: 0;
  text-transform: capitalize;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
}

.product .price,
.quick-shop-content .price,
#product-area .price,
.mobile-product-title .price {
  font-size: 13px;
  color: #000;
  margin: 0;
}

.product .product-item__price {
  font-size: 13px;
}

.price.sale,
.product-list .product-item__price,
.product-slider .product-item__price {
  display: flex;
  gap: 6px;
  justify-content: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: #2c2c2c;
}

.product-list .product-item__price .original,
.product-list .product-item__price .money--last,
.product-slider .product-item__price .original,
.product-slider .product-item__price .money--last {
  margin: 0;
}

/* Recommendations */
.template-product .product-recommendations {
  margin-bottom: 0;
}

.template-product .product-recommendations .product-inner {
  padding: 0;
}

.template-product .product-recommendations .product-card-figure {
  padding-bottom: 120%;
}

.product-recommendations .product-inner:hover figure img:first-of-type {
  display: block;
}

.template-product .product-recommendations .product-list .title {
  font-size: 13px;
  line-height: 15px;
  text-transform: capitalize;
  letter-spacing: normal;
  margin-bottom: 6px;
  height: auto;
}

.template-product .product-recommendations .product-list .brand {
  font-size: 14px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: normal;
  margin-bottom: 6px;
}

.template-product .product-recommendations .product-list .money,
.template-product .product-recommendations .product-list .product-item__price {
  margin: 0;
  font-size: 13px;
  line-height: 15px;
}

/* Recently viewed */
#recently-viewed-products {
  margin: auto;
  float: none;
}

#recently-viewed-list .product {
  text-align: center;
}

#recently-viewed-list .product .image img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: contain;
}

/* Need-help section: scroll offset for the sticky header anchor link */
.template-product #need-help-contact {
  scroll-margin-top: 120px;
}

/* --- Mobile: how-to-wear spacing --- */
@media screen and (max-width: 1024px) {
  .premium-pdp .how-to-wear {
    padding-top: 18px;
    margin-top: 10px;
  }
}

/* --- Desktop: thumbnails-left gallery, details right --- */
@media screen and (min-width: 1025px) {
  .premium-pdp .product-area__container {
    display: grid;
    align-items: flex-start;
    grid-template-columns: minmax(0, 660px) minmax(0, 450px);
    grid-template-rows: auto auto;
    column-gap: 40px;
    justify-content: center;
  }
  /* Neutralize stock float layout inside the grid */
  .premium-pdp .product-area__container > .product-gallery,
  .premium-pdp .product-area__container > .product-details-wrapper {
    float: none;
    width: 100%;
  }
  .premium-pdp .product-details-wrapper {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .premium-pdp .how-to-wear {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    max-width: 716px;
  }
  .premium-pdp .how-to-wear__item-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
  }
  .premium-pdp .how-to-wear .how-to-wear__link {
    width: 155px;
  }
  .premium-pdp .how-to-wear .how-to-wear__img-wrapper {
    max-width: 155px;
  }
  .premium-pdp .product-gallery {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
  .premium-pdp .product-gallery--navigation {
    order: 1;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 10px;
    width: 100px;
    margin: 0;
  }
  .premium-pdp .product-gallery--viewport {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }
  .premium-pdp .product-gallery--media-thumbnail {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .premium-pdp .product-gallery--media-thumbnail img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: contain;
    border: 1px solid #efefef;
    opacity: 0.75;
  }
  .premium-pdp .product-gallery--media-thumbnail[data-product-gallery-selected="true"] img,
  .premium-pdp .product-gallery--media-thumbnail:hover img {
    border-color: #999999;
    opacity: 1;
  }
  .premium-pdp .product-gallery--viewport--figure img {
    border: 1px solid #efefef;
  }
}

/* =============================================================================
   Collection page — banners, title, filter UI (ported from v17)
   ============================================================================= */

/* Collection banner images (custom.banner_image / mobile_banner_image
   metafields + sale banner section settings) */
.collection_featured_image img {
  max-width: 100%;
}

.collection_featured_image_mobile {
  display: none;
  width: auto;
  height: auto;
  margin: 0;
}

.collection_featured_image {
  width: 100%;
  height: auto;
  margin: 0;
}

.collection_featured_image img,
.collection_featured_image_mobile img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

@media (max-width: 991px) {
  .collection_featured_image_mobile {
    display: block;
  }

  .collection_featured_image {
    display: none;
  }
}

/* Collection / page titles — serif, uppercase */
.page-title .label,
.collection-title .label,
.template-collection .page-title.collection-title .label {
  font-family: 'Libre Bodoni', serif;
  color: #222;
  font-weight: 400;
  font-size: 30px;
  text-transform: uppercase;
}

/* Hide the chat launcher while the mobile filter drawer (or other modals) own the screen */
html.cs-filters-open #shopify-chat {
  display: none !important;
}

/* Native faceted-filter swatches (Search & Discovery swatch presentation) */
.faceted-filter-swatch {
  --faceted-filter-swatch-size: 1.375rem;
  flex-shrink: 0;
  width: var(--faceted-filter-swatch-size);
  height: var(--faceted-filter-swatch-size);
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
}
.search-filters__filter-link:not([data-disabled]):hover .faceted-filter-swatch,
.collection-filters__filter-link:not([data-disabled]):hover .faceted-filter-swatch {
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 3px rgba(30, 30, 30, 0.5);
}
.search-filters__filter-list-item--active .faceted-filter-swatch,
.collection-filters__filter-list-item--active .faceted-filter-swatch {
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 3px #1E1E1E;
}
.faceted-filter-swatch__color,
.faceted-filter-swatch__image {
  width: 100%;
  height: 100%;
  border: 1px solid #EBEBEB;
  border-radius: 50%;
}
.faceted-filter-swatch__color {
  background-color: var(--faceted-filter-swatch-color, transparent);
}
/* Values with no swatch data (Multicolor) get a muted color wheel
   instead of an invisible 22px gap */
.faceted-filter-swatch__color--fallback {
  background: conic-gradient(
    #d8a7a7,
    #e3cf9e,
    #a7bfa1,
    #9fb3cc,
    #b9a7c9,
    #d8a7a7
  );
}
.faceted-filter-swatch__image {
  object-fit: cover;
}

/* ==========================================================================
   Native search & filter restyle (spike/native-search)
   Atlantic-native styling: search-page card grid, sidebar accordion
   filters, results toolbar (tabs + sort), mobile filter drawer.
   Layout structure is custom; chrome leans on theme defaults.
   ========================================================================== */

/* --- Search page: card grid (theme grid CSS is .template-collection-scoped) --- */
.template-search .search-content {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.template-search .search-content__wrapper {
  width: 100%;
}

/* Portrait 4:5 product cards on the native collection + search grids only.
   Mirrors the theme's `tall` grid (padding-bottom:125%); the global product
   grid setting stays Square. The home product slider opts in too so its cards
   match the collection grid. */
.product-grid-square [data-section-type="static-collection"] .product-card-figure,
.product-grid-square [data-section-type="static-search"] .product-card-figure,
.product-slider .product-card-figure {
  padding-bottom: 125%;
}

.template-search .search-product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin-left: 0;
  list-style: none;
}

.template-search .search-product-grid .product {
  width: calc(25% - 20px);
  padding-left: 0;
  margin-bottom: 50px;
}

@media (max-width: 1200px) {
  .template-search .search-product-grid .product {
    width: calc(33.3333333333% - 15px);
  }
}

@media (max-width: 940px) {
  .template-search .search-product-grid .product {
    width: calc(50% - 7.5px);
    min-width: calc(50% - 7.5px);
    text-align: left;
  }
}

@media (max-width: 719px) {
  .template-search .search-product-grid .product {
    margin-bottom: 35px;
  }
}

/* Page/article results render as full-width rows inside the grid */
.template-search .search-result-row {
  width: 100%;
  list-style: none;
}

.template-search .search-result-row .result {
  width: 100%;
}

/* Price wrapper in product-item isn't .price — match the card price size */
.product .product-item__price {
  font-size: 13px;
}

/* --- Search page: compact form, tabs, results label --- */
.template-search .search-form--compact {
  margin: 1.5rem 0;
}

/* Full-width results bar: tabs left, filters/sort right (theme border style) */
.results-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  width: 100%;
  padding: 6px 8px;
  margin: 0 0 20px;
  border: 1px solid #EBEBEB;
  /* Theme is content-box; width:100% + padding + border overflowed the
     viewport on mobile without this. */
  box-sizing: border-box;
}

.results-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-tabs {
  display: flex;
  gap: 4px;
}

.search-tabs__tab {
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.search-tabs__tab--active {
  font-weight: 600;
  background-color: rgba(30, 30, 30, 0.06);
}

.template-search .results-label {
  align-self: flex-start;
  margin: 0 0 20px;
  font-size: 13px;
  text-align: left;
}

/* --- Sidebar dimensions (~225px, production parity) --- */
@media (min-width: 941px) {
  .template-collection .product-list-sidebar,
  .template-search .search-sidebar {
    width: 225px;
    flex: 0 0 225px;
  }

  .template-collection .product-list-withsidebar {
    width: calc(100% - 265px);
  }

  .template-search .search-sidebar ~ .search-content__wrapper {
    width: calc(100% - 265px);
  }

  /* Toolbar now sits above .search-content — columns share the same top edge */
  .template-search .search-sidebar {
    padding-top: 0;
  }
}

/* Stack filter groups vertically inside both sidebars
   (theme lays them out as a centered row / 2-col mobile grid) */
.search-sidebar .search__filters,
.product-list-sidebar .collection__filters {
  display: block;
}

/* Hide the "Filter by:" label inside sidebars (production omits it) */
.product-list-sidebar .collection__filters-title,
.search-sidebar .search__filters-title {
  display: none;
}

/* --- Accordion-in-place: neutralize the absolute dropdown positioning.
   Keeps theme display/opacity/height rules intact so the atlantic.js
   data-animation choreography still drives open/close. --- */
.product-list-sidebar .collection-filters__filter,
.search-sidebar .search-filters__filter {
  position: static;
  width: 100%;
  min-width: 0;
  max-height: none;
  padding: 4px 0 16px;
  margin-top: 0;
  border: none;
}

.product-list-sidebar .collection-filters__filter.filters--overflow-right,
.product-list-sidebar .collection-filters__filter.filters--overflow-left,
.search-sidebar .search-filters__filter.filters--overflow-right,
.search-sidebar .search-filters__filter.filters--overflow-left {
  right: auto;
  left: auto;
}

/* Group chrome: uppercase titles, thin dividers */
.product-list-sidebar .collection-filters__details-wrapper,
.search-sidebar .search-filters__details-wrapper {
  margin: 0;
  border-bottom: 1px solid #e5e5e5;
}

.product-list-sidebar .collection-filters__filter-group-title,
.search-sidebar .search-filters__filter-group-title {
  padding: 14px 0;
  padding-right: 2rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
}

/* Theme sets text-transform:none on the inner title span — override there,
   not just on the summary (the span blocks inheritance) */
.product-list-sidebar .collection-filters__filter-title,
.search-sidebar .search-filters__filter-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.product-list-sidebar .collection-filters__filter-chevron,
.search-sidebar .search-filters__filter-chevron {
  right: 4px;
}

/* Active filter pills: theme centers them on search pages
   (theme.css.liquid:15818) — left-align to match the results label
   and grid edge, same as collection pages */
.static-search .active-filter-group {
  justify-content: flex-start;
}

/* Active-filter chips: the price/value pills inherit 16px body text while
   CLEAR ALL carries .sidebar-title (14px uppercase) — different heights in
   the same row. Pin all chip text to the sidebar-title scale so the row is
   uniform. */
.active-filter-group .active-filter-text {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

/* CLEAR ALL is a reset action, not a value chip. The chips carry a 1px
   border-bottom underline; drop it here so the reset reads as a quiet
   secondary link (its inner text is already grey), distinct from the pills. */
.active-filter-group__item--clear {
  border-bottom: none;
}

/* Editorial badge (CT_editors-picks). The .badge base supplies font/padding/
   uppercase. Outline style (mirrors PDP .premium-label): transparent fill,
   black border + black text instead of a solid pill. */
.badge-editors {
  background-color: #fff;
  border: 1.5px solid #1E1E1E;
  color: #1E1E1E;
}

/* Collection-card badge: smaller pill + tighter inset so it reads as a corner
   tag, not slapped across the garment. Scoped to grid cards via
   .product-card-figure so PDP / quick-shop badges are untouched. */
.product-card-figure .badge {
  font-size: 10px;
  padding: 2px 5px;
  letter-spacing: 0.5px;
}
.product-card-figure .badges-wrapper {
  top: 6px;
  left: 6px;
}

/* Filter value rows: the theme's padding rule is broken (literal
   `padding: rem(3px)` — an unprocessed SCSS function — so the browser
   drops it) and rows sit cramped. Real padding, roomier line-height,
   top-aligned checkbox with a hanging indent so wrapped labels
   (ISABEL MARANT ETOILE) align under the text, not the checkbox. */
.product-list-sidebar .collection-filters__filter-link,
.search-sidebar .search-filters__filter-link {
  align-items: flex-start;
  padding: 3px 0;
  line-height: 1.4;
  width: 100%;
}

/* Theme spaces rows 12px apart on top of the link padding — too airy */
.product-list-sidebar .collection-filters__filter-list-item,
.search-sidebar .search-filters__filter-list-item {
  margin-top: 4px;
  font-size: 14px; /* was inheriting theme's 1rem/16px; sat above the 12px group header */
}

/* Left breathing room so the active swatch ring (3px box-shadow) isn't
   clipped by the list edge */
.product-list-sidebar .collection-filters__filter-list,
.search-sidebar .search-filters__filter-list {
  padding-left: 4px;
}

/* The label span carries the theme's line-height:1.15 (theme.css:15795),
   which sits the text visibly low in the flex-start filter row. Pin it to
   the link's 1.4 so it aligns with the checkbox/swatch. */
.product-list-sidebar .collection-filters__filter-list-item-text,
.search-sidebar .search-filters__filter-list-item-text {
  line-height: 1.4;
}

.product-list-sidebar .collection-filters__filter-checkbox,
.search-sidebar .search-filters__filter-checkbox {
  flex-shrink: 0;
  margin-top: 3px;
  margin-right: 8px;
}

/* Theme renders an 11px check SVG inside a 12px bordered box, so a white strip
   shows between fill and border. Stretch the SVG past the content box (the
   0 0 13 13 viewBox scales to ~10px content × 0.77, and iOS Safari leaves a
   faint antialiased light edge at that boundary). Bleed +1px each side under
   the border so no subpixel gap can show — dark fill over dark border. */
.product-list-sidebar .collection-filters__filter-checkbox svg,
.search-sidebar .search-filters__filter-checkbox svg {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: -1px;
}

/* Swatches get the same gap and never squash on wrapped labels */
.product-list-sidebar .faceted-filter-swatch,
.search-sidebar .faceted-filter-swatch {
  flex-shrink: 0;
}

/* Size facet: ~30 short numeric values made the group eat the whole
   sidebar — flow them into two columns (top-to-bottom, then across).
   Desktop only: the mobile drawer uses full-width divider rows with
   right-aligned counts, where columns turn unreadable. */
@media (min-width: 941px) {
  .product-list-sidebar [data-filter-param$=".size"] .collection-filters__filter-list,
  .search-sidebar [data-filter-param$=".size"] .search-filters__filter-list {
    columns: 2;
    column-gap: 16px;
  }

  /* No margins inside the columns: a margin-top at a column break is
     truncated by some browsers and kept by others, which left the two
     columns vertically misaligned. Symmetric link padding spaces the
     rows instead — identical in every fragment. */
  .product-list-sidebar [data-filter-param$=".size"] .collection-filters__filter-list-item,
  .search-sidebar [data-filter-param$=".size"] .search-filters__filter-list-item {
    break-inside: avoid;
    margin-top: 0;
  }

  .product-list-sidebar [data-filter-param$=".size"] .collection-filters__filter-link,
  .search-sidebar [data-filter-param$=".size"] .search-filters__filter-link {
    padding: 5px 0;
  }
}

/* Pages/articles in search results: source images come in arbitrary
   aspect ratios (squished/stretched at the theme's 32% figure width) —
   normalize to a 5:6 portrait crop */
.template-search .search-result-row .result figure img {
  aspect-ratio: 5 / 6;
  object-fit: cover;
  height: auto;
}

/* Title + excerpt read better ragged-right; theme centers them on
   mobile and the title on desktop */
.template-search .search-result-row .result .details,
.template-search .search-result-row .result .details .title,
.template-search .search-result-row .result .details .rte p {
  text-align: left;
}

/* Title should sit clearly above the body copy, and a long post excerpt
   shouldn't tower over its thumbnail — strengthen the title and cap the
   excerpt at 3 lines (truncatewords:25 in search-result.liquid is the
   first cut; the clamp guards wide viewports where 25 words still wrap tall). */
.template-search .search-result-row .result .details .title {
  font-weight: 600;
}

.template-search .search-result-row .result .details .rte p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Desktop: 32%-wide article images dominated the row — slim to 20% */
@media (min-width: 720px) {
  .template-search .search-result-row .result figure {
    width: 20%;
  }

  .template-search .search-result-row .result figure ~ .details {
    width: calc(80% - 30px);
  }
}

/* Grid dims while an AJAX filter/sort request is in flight
   (custom.js adds .cs-filtering to the section wrapper) */
.template-search .search-product-grid,
.template-collection .product-list {
  transition: opacity 0.15s ease;
}

.cs-filtering .search-product-grid,
.cs-filtering .product-list {
  opacity: 0.45;
  pointer-events: none;
}

/* Lock the sidebar mid-fetch too. A value link's href is a snapshot of the
   last-rendered state, so a click before the swap lands would navigate from
   stale params and drop the prior selection. custom.js already ignores the
   click; this also blocks atlantic's optimistic checkbox toggle, so no swatch
   shows a checked state the grid never actually applies. */
.cs-filtering .search-sidebar,
.cs-filtering .product-list-sidebar {
  pointer-events: none;
}

/* Price MIN/MAX inputs: side-by-side + compact (Searchanise parity).
   The theme forces a column in .product-list-sidebar at >=940px and gives
   --to a 1rem left margin for its row layout (only reset for the collection
   prefix, never search — hence the overflow). Override both, split the two
   halves evenly, and slim the .field's 14px padding. */
.product-list-sidebar .collection-filters__filter-range,
.search-sidebar .search-filters__filter-range {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.product-list-sidebar .collection-filters__filter-range--from,
.product-list-sidebar .collection-filters__filter-range--to,
.search-sidebar .search-filters__filter-range--from,
.search-sidebar .search-filters__filter-range--to {
  flex: 1 1 0;
  margin: 0;
}

.product-list-sidebar .collection-filters__filter-range-input,
.search-sidebar .search-filters__filter-range-input {
  width: 100%;
  min-width: 0;
  padding: 8px;
}

/* --- Listing toolbar (collection page): sort top right, FILTERS (mobile).
   Sort keeps the theme's default .select-wrapper styling — only slimmed. --- */
.listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 10px;
}

.results-toolbar .collection-sorter,
.listing-toolbar .collection-sorter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.results-toolbar .collection-sorter .sidebar-title,
.listing-toolbar .collection-sorter .sidebar-title {
  margin: 0;
  white-space: nowrap;
}

/* The select itself carries the padding (wrapper has none) so the whole
   bordered bar — not just the text — is one big click target. inline-flex
   + flex:1 on the select guarantee the select fills the wrapper to the
   chevron edge; inline-block left a dead zone on the right. */
.results-toolbar .collection-sorter .select-wrapper,
.listing-toolbar .collection-sorter .select-wrapper {
  display: inline-flex;
  align-items: center;
  height: 36px; /* match the FILTERS button so borders align */
  max-width: 170px; /* native <select> sizes to its widest option — cap it */
  padding: 0;
  box-sizing: border-box;
}

/* The chevron pseudo-elements sit on top of the select; without this,
   clicks on the chevron hit the wrapper and the dropdown never opens. */
.results-toolbar .collection-sorter .select-wrapper::before,
.results-toolbar .collection-sorter .select-wrapper::after,
.listing-toolbar .collection-sorter .select-wrapper::before,
.listing-toolbar .collection-sorter .select-wrapper::after {
  pointer-events: none;
}

/* Theme hides the raw select (opacity:0 + absolute) outside
   .product-list-sidebar/.collection-header, expecting a JS-driven
   label.select-text. Our toolbars are new contexts — show the select
   the same way the sidebar context does (theme.css.liquid:2078) */
.results-toolbar .collection-sorter .select-wrapper select,
.listing-toolbar .collection-sorter .select-wrapper select {
  position: static;
  flex: 1 1 auto;
  width: auto;
  height: 100%;
  padding: 8px 40px 8px 12px;
  font-size: 14px; /* theme forces 16px <=719px; match the toolbar scale */
  background-color: transparent;
  border: 0;
  opacity: 1;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* Drawer chrome hidden by default (desktop and closed mobile state) */
.filters-drawer__close,
.filters-drawer__apply {
  display: none;
}

.listing-toolbar__filters {
  display: none;
}

/* Active-filter count badge on the FILTERS button */
.listing-toolbar__filters-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  color: #ffffff;
  background-color: #1E1E1E;
  border-radius: 50%;
  box-sizing: border-box;
}

/* --- Mobile: FILTERS pill + full-screen drawer --- */
@media (max-width: 940px) {
  .listing-toolbar {
    justify-content: space-between;
  }

  /* Mobile toolbar: the enclosing border fought with the wrapped
     controls row (borders crossing buttons, select clipping at the
     edge). Drop the outer box — tabs keep their own border, the
     FILTERS button and sort select carry theirs. */
  .results-toolbar {
    padding: 0;
    border: none;
  }

  .search-tabs {
    width: 100%;
    border: 1px solid #EBEBEB;
    box-sizing: border-box;
  }

  /* Second row: FILTERS | sort, full width */
  .results-toolbar__controls {
    width: 100%;
    justify-content: space-between;
  }

  /* Sort must shrink instead of overflowing the viewport edge */
  .results-toolbar__controls .collection-sorter {
    flex: 0 1 auto;
    min-width: 0;
  }

  .results-toolbar__controls .collection-sorter .select-wrapper {
    max-width: 100%;
    min-width: 0;
  }

  .results-toolbar__controls .collection-sorter .select-wrapper select {
    max-width: 100%;
    min-width: 0;
  }

  .listing-toolbar__filters {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    height: 36px; /* match the sort select-wrapper so the two controls align */
    box-sizing: border-box;
    padding: 8px 20px;
    font-family: 'Inter', sans-serif; /* <button> doesn't inherit font-family */
    font-size: 14px; /* match the 14px sort label scale (was 12px) */
    font-weight: 500; /* uppercase already adds weight; 600 read too heavy at 14px */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid #EBEBEB;
    cursor: pointer;
  }

  /* Sidebar hidden until the drawer opens */
  .template-collection .product-list-sidebar,
  .template-search .search-sidebar {
    display: none;
  }

  html.cs-filters-open .template-collection .product-list-sidebar,
  html.cs-filters-open .template-search .search-sidebar {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6000;
    width: auto;
    padding: 24px 20px 100px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #ffffff;
  }

  /* Drawer heading: unhide the "Filter by" label and style as a title */
  html.cs-filters-open .product-list-sidebar .collection__filters-title,
  html.cs-filters-open .search-sidebar .search__filters-title {
    display: block;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
  }

  /* Drawer rows, Searchanise-style: full-width rows with hairline
     dividers, centered checkbox, bare count at the right edge */
  html.cs-filters-open .collection-filters__filter-list-item,
  html.cs-filters-open .search-filters__filter-list-item {
    margin-top: 0;
    border-bottom: 1px solid #ececec;
  }

  html.cs-filters-open .collection-filters__filter-list-item:last-child,
  html.cs-filters-open .search-filters__filter-list-item:last-child {
    border-bottom: none;
  }

  html.cs-filters-open .collection-filters__filter-link,
  html.cs-filters-open .search-filters__filter-link {
    align-items: center;
    padding: 12px 0;
  }

  html.cs-filters-open .collection-filters__filter-checkbox,
  html.cs-filters-open .search-filters__filter-checkbox {
    margin-top: 0;
  }

  html.cs-filters-open .filters-drawer__close {
    display: block;
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 6001;
    padding: 10px;
    line-height: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  html.cs-filters-open .filters-drawer__close .svg-icon {
    width: 18px;
    height: 18px;
  }

  html.cs-filters-open .filters-drawer__apply {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6001;
    padding: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #1E1E1E;
    border: none;
    cursor: pointer;
  }

  /* Scroll-lock while the drawer is open */
  html.cs-filters-open,
  html.cs-filters-open body {
    height: 100%;
    overflow: hidden;
  }
}

/* Phones (≤480px, incl. the 430px iPhone Pro Max): FILTERS + label + select
   don't all fit — with active filters the FILTERS badge widens the button and
   the select overflows/collides. The SORT BY label is redundant next to a
   visible select, so drop it. ≥481px has room and keeps the label. */
@media (max-width: 480px) {
  .results-toolbar .collection-sorter .sidebar-title,
  .listing-toolbar .collection-sorter .sidebar-title {
    display: none;
  }
}

/* --- Predictive search overlay: product suggestion rows --- */

/* The dropdown heading is a bare <h2>, so broad page rules like
   `.template-index h2 { font-size: 30px !important; padding-top: 5px;
   margin-bottom: 18px !important }` (custom_style.css) bleed in and blow up
   the title on the home page. Scope + !important so the component owns its own
   size and spacing regardless of any future broad h2 rule. Values mirror the
   theme's own .predictive-search__title (theme.css.liquid). */
.predictive-search .predictive-search__title {
  padding-top: 0;
  margin-bottom: 0.75rem !important;
  font-size: 12px !important;
}

/* Collections now render as their own titled group below the query
   suggestions (predictive-search.liquid). Space the second heading off the
   list above it; the theme's __title only carries bottom spacing. */
.predictive-search__title--collections {
  margin-top: 1.25rem;
}

/* Desktop: theme leaves .ls-results with overflow-y:auto but no height cap, so
   a full panel (queries + collections + products + footer) runs past the
   viewport bottom and the "Search for …" button is clipped (mobile already pins
   it). Cap the panel to the viewport so it scrolls internally, and make the
   footer sticky so the button stays visible without scrolling. */
/* The footer is pinned over the scrolling results — fixed on mobile (theme),
   sticky on desktop (below). Theme ships it transparent, so results scroll
   visibly behind the "Search for …" button. Give it the panel background at
   every width. */
.predictive-search__footer {
  background-color: #ffffff;
}

@media (min-width: 720px) {
  .ls-results {
    max-height: calc(100vh - 120px);
  }

  .predictive-search__footer {
    position: sticky;
    bottom: 0;
  }
}

/* The price div carries the global .price.sale classes; custom_style.css:1532
   centers those (flex, justify-content:center) for carousel cards, which
   strands the prices mid-row here. Three classes outrank that two-class rule
   despite custom_style loading later. */
.predictive-search .predictive-search__product-suggestion-price.price {
  justify-content: flex-start;
}

/* Product thumbs vary in aspect ratio; center each inside the fixed
   column so narrow images don't leave a ragged left edge. Theme sizes the
   column at 50px (1x on retina — dark dresses read as blobs); widen to 72px
   and request a 144x source so they stay crisp. */
.predictive-search__product-suggestion-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
}

/* Posts/pages render as a full-width row UNDER the products column, not a 50/50
   column beside it. A single article (the common case) used to leave half the
   panel empty and squeeze products into the narrow left half; as a row it reads
   intentional at any count and keeps products dominant. Matches the column
   chrome (top border + 1.25rem padding) so it looks like the same panel. */
.predictive-search__posts {
  width: 100%;
  padding: 1.25rem;
  border-top: 1px solid #EBEBEB;
}

.predictive-search__posts-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin-top: 0.75rem;
}
.predictive-search__posts-list > li {
  max-width: 360px;
}

/* =============================================================================
   Header — ported from v17 (New Navigation May 2026 + mini-cart + positioning)
   ============================================================================= */

.main-header__mini-cart {
  position: absolute;
  top: calc(100% + 1rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #fff;
  padding: 1rem;
  min-width: 240px;
  box-shadow: 0px 100px 185px rgba(0, 0, 0, 0.07),
  0px 22.3363px 41.3222px rgba(0, 0, 0, 0.0417275),
  0px 6.6501px 12.3027px rgba(0, 0, 0, 0.0282725);
  max-height: 350px;
  overflow-y: auto;
  text-align: center;
}

.main-header__mini-cart .brand {
  font-weight: bold;
  color: black;
  font-size: 14px;
}

.main-header__mini-cart .title {
  text-transform: uppercase;
}

.main-header__mini-cart .variant {
  display: none;
}

/* Client punchlist updates */
@media (min-width: 719px) {
  .main-header--centered .main-header--tools, .main-header--expanded .main-header--tools {
      float: none;
      width: 100%;
      max-width: none;
      margin-top: -50px;
      margin-bottom: 15px;
  }
  .main-header nav.full .nav-item>details .label:before {
    display: none;
  }
  .main-header nav.full .nav-item>.label:before {
    display: none;
  }
  .main-header nav.full .nav-item.dropdown>details .label:after {
   display: none !important;
  }
}

.main-header nav.full .nav-item .dropdown-wrap .dropdown-item a {
  font-size: 12px;
  font-weight: 400;
}

/* Live-final .page-title cascade collapsed to one rule: v17 custom.css set
   padding 0 + margins, then custom_style.css:2058 forced margin-top 2rem. */
.page-title {
    padding: 0;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
    border-bottom: 0px solid #ebebeb;
}

.product-gallery--viewport--figure .product-gallery--border-overlay {
  box-shadow: none;
}
.product-gallery--media-borders .product-gallery--media-thumbnail:after {
  box-shadow: none !important;
}
.product__price {
	font-size: 16px;
}
.option-value-input:checked+.option-value-name {
	color: #2c2c2c;
	background-color: #FFFFFF !important;
	border-color: #060606 !important;
}

.option-value-input:checked+.option-value-name.size-option {
	color: #ffffff;
	background-color: #172594 !important;
	border-color: #172594 !important;
}

.option-value-name.size-option:hover {
  	color: #ffffff;
	background-color: #172594 !important;
	border-color: #172594 !important;
}

.collapsible-tab__heading {
	font-size: 13px;
}

.product-details-alignment-left .product__description {
    margin-bottom: -18px;
}

.product-card-figure img {
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   New Navigation (May 2026)
   - Two-row desktop header (logo + tools above, nav row below)
   - Full-width hover mega-panel with text and image columns
   - Mobile single-row header + accordion drawer
   - Home-page transparent header, solid on scroll/panel-open
   ========================================================================== */

/* ---------- Desktop (min-width 1025px) ---------- */
@media (min-width: 1025px) {
  /* .mega-panel anchors to .main-header-wrap (full width); the positioned ancestor it
     needs is provided by the global `.main-header-wrap { position: sticky }` rule below. */

  .main-header-wrap > .main-header,
  .main-header nav.full,
  .main-header .main-header--nav-links,
  .main-header nav.full .main-header--nav-links .nav-item {
    position: static;
  }

  /* Two-row layout: logo+tools first, nav second.
     Shares the 1300px max-width and clamp() gutter with the mega-panel inner so the logo
     row, tools, and panel content edges line up. Gutter caps at 80px (>=1600px viewports)
     and shrinks to 40px near 1200px. */
  .main-header--centered .action-links {
    padding: 22px clamp(40px, 5vw, 80px) 8px;
    max-width: 1300px;
    margin: 0 auto;
  }

  .main-header--centered nav.full {
    /* No bottom padding on the nav row itself — keeps the hover region edge-to-edge with
       the panel so cursor doesn't pass through dead space. The visual breathing room
       below nav links is provided by the panel's top-anchor + the .has-mega-panel padding. */
    /* Nav row uses a tighter gutter than the logo row so the 8-9 item row fits on one
       line at laptop widths (the logo row keeps its wider gutter above). */
    padding: 0 clamp(24px, 4vw, 120px) 0;
    max-width: 1300px;
    margin: 0 auto;
  }

  /* Add 14px below nav links via padding INSIDE the UL so the UL's hover area extends
     to the wrap bottom. Avoids the dead-zone gap that closed the panel on mousedown. */
  .main-header--centered nav.full .main-header--nav-links {
    padding-bottom: 14px;
  }

  /* Desktop tools (search | account | cart): ~8px apart, top-right of the logo row. */
  .main-header--centered .main-header--tools-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .main-header--centered .main-header--tools-right .tool-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Nav row */
  .main-header--nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.4vw, 36px);
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
  }

  .main-header--nav-links .nav-item {
    padding: 0;
    margin: 0;
    list-style: none;
    flex-shrink: 0;
  }

  /* custom_style.css sets `.main-header nav.full .nav-item > .label { padding: 0 !important }`
     globally; this block re-asserts the desktop nav padding (6px 0) with higher specificity
     to beat that !important. The extra .main-header--centered selectors are required to
     exceed the source rule's specificity — they are not redundant. */
  .main-header.main-header--centered nav.full .nav-item > .label,
  .main-header.main-header--centered nav.full .nav-item > details .label,
  .main-header.main-header--centered nav.full .nav-item > details > summary,
  .main-header nav.full .main-header--nav-links .nav-item .label,
  .main-header nav.full .main-header--nav-links .nav-item details summary,
  .main-header nav.full .main-header--nav-links .nav-item details summary .icon-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000;
    cursor: pointer;
    line-height: 12px;
    padding: 6px 0 !important;
    list-style: none;
    display: inline-block;
    white-space: nowrap;
  }

  .main-header--nav-links .nav-item details summary {
    list-style: none;
    outline: none;
  }

  .main-header--nav-links .nav-item details summary::-webkit-details-marker {
    display: none;
  }

  .main-header--nav-links .nav-item details summary::marker {
    content: '';
  }

  /* Plain links hold their text directly in the .label anchor, so target that.
     Mega-panel items wrap the text in an inline-block .icon-wrapper inside the
     summary — underline/weight must hit the icon-wrapper itself, because
     text-decoration doesn't reach inline-block children and the icon-wrapper
     carries its own explicit font-weight that would otherwise win. */
  .main-header nav.full .main-header--nav-links .nav-item a.label:hover,
  .main-header nav.full .main-header--nav-links .nav-item details summary:hover .icon-wrapper,
  .main-header nav.full .main-header--nav-links .nav-item.has-mega-panel.is-open .icon-wrapper {
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  /* Mega panel: open snappy (100ms), close softer (150ms). Grace delay before close
     handled in JS so brushing past nav doesn't flicker the panel open/closed. */
  .main-header-wrap .mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.04), 0 12px 24px rgba(0, 0, 0, 0.06);
    padding: 20px clamp(40px, 5vw, 80px) 48px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease-out, visibility 150ms ease-out;
    min-height: 400px;
    box-sizing: border-box;
    /* Skip rendering the closed panel's subtree so its lazy tile images aren't
       fetched on initial page load (the panel sits just below the header, within
       the lazy-load viewport threshold). Flipped to visible when the panel opens. */
    content-visibility: hidden;
  }

  /* Transparent hover bridge spanning the gap between the nav row and the panel,
     so moving the cursor down into the panel never crosses dead space (which would
     schedule the close). Sits directly above the panel, full width. Inherits the
     panel's pointer-events, so it's inert while the panel is closed. If a larger gap
     appears, increase the height; if it ever shadows the nav labels, decrease it. */
  .main-header-wrap .mega-panel::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 18px;
  }

  /* Open state is JS-controlled only (.is-open). CSS :hover and :has(details[open])
     are NOT used here so the open state has a single source of truth. */
  .main-header-wrap.main-header--panel-open .main-header--nav-links .nav-item.has-mega-panel.is-open .mega-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 100ms ease-out, visibility 0ms;
    content-visibility: visible;
  }

  /* Image tile hover polish */
  .mega-panel--image-col-link {
    overflow: hidden;
  }
  .mega-panel--image-col-image,
  .mega-panel--image-col-link img {
    transition: transform 350ms ease-out, filter 350ms ease-out;
  }
  .mega-panel--image-col-link:hover .mega-panel--image-col-image,
  .mega-panel--image-col-link:hover img {
    filter: saturate(1.08);
  }

  /* Compressed (scroll-past-hero) state — hairline + background shift only.
     Logo is intentionally left at full size (no shrink). */
  .main-header,
  .main-header-wrap {
    transition: background-color 200ms ease, color 200ms ease;
  }

  .main-header--compress {
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  .mega-panel--inner {
    display: flex;
    align-items: flex-start;
    column-gap: clamp(40px, 5vw, 80px);
    /* Narrower than the 1300px header band so the fill-images render a bit smaller while
       keeping the balanced, edge-to-edge look (capping image size directly would reopen the
       text↔image gap). Lower this number for smaller images, raise it for larger. */
    max-width: 1100px;
    margin: 0 auto;
  }

  /* Two-level flat menu rendering: children render as a flat <ul> inside .mega-panel--text-cols.
     CSS column-count handles visual splitting (max 3 columns, ~10 items per column). */
  .mega-panel--text-cols {
    flex: 0 0 auto;
    width: 364px;
    margin: 0;
    padding: 0;
  }

  /* Text-region width is held constant at 364px (the 2-column footprint) so the image grid,
     which fills the leftover space, renders at the same size whether there are 1 or 2 text
     columns. On 1-column panels the single 170px link column sits left and the remaining
     ~194px becomes a gap before the images (see .mega-panel--text-flat cap below). */
  .mega-panel[data-text-cols="1"] .mega-panel--text-cols { width: 364px; }
  .mega-panel[data-text-cols="2"] .mega-panel--text-cols { width: 364px; }

  .mega-panel--text-flat {
    list-style: none;
    padding: 0;
    margin: 0;
    column-gap: 24px;
    column-fill: balance;
  }

  .mega-panel[data-text-cols="1"] .mega-panel--text-flat { column-count: 1; width: 170px; }
  .mega-panel[data-text-cols="2"] .mega-panel--text-flat { column-count: 2; }

  .mega-panel--text-flat li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .mega-panel--text-col-link {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    margin-bottom: 14px;
  }

  .mega-panel--text-col-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Blog text list (e.g. Trend Report): single column, leftmost cell. Width is held at the
     364px 2-column footprint — same as .mega-panel--text-cols — so blog-post images render at
     the same smaller size. The 170px link column sits left; the remaining ~194px is a gap
     before the images. */
  .mega-panel--blog-text-list {
    flex: 0 0 auto;
    width: 364px;
  }

  .mega-panel--blog-text-flat {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 170px;
  }

  .mega-panel--blog-text-flat li {
    break-inside: avoid;
  }

  .mega-panel--blog-text-link {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    margin-bottom: 14px;
  }

  .mega-panel--blog-text-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Images fill the width left over after the text columns (Tuckernuck model): fewer text
     columns → wider images, more columns → narrower. flex:1 + 1fr columns means the image row
     always runs to the right edge, so there's no empty band on single-column panels. Because
     images take whatever space remains, they also can't overflow the panel. The panel is
     capped at 1300px, so images top out ~330px even at 1920. */
  .mega-panel--image-cols {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    padding: 0;
    list-style: none;
  }

  /* Edge cases (1–2 image tiles): don't stretch a lone tile across the whole row — keep it
     capped and sitting beside the text instead of filling. */
  .mega-panel[data-image-cols="1"] .mega-panel--image-cols {
    flex: 0 0 auto;
    grid-template-columns: clamp(195px, 17vw, 300px);
  }

  .mega-panel[data-image-cols="2"] .mega-panel--image-cols {
    flex: 0 0 auto;
    grid-template-columns: repeat(2, clamp(195px, 17vw, 300px));
  }

  .mega-panel--image-col {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mega-panel--image-col-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .mega-panel--image-col-image,
  .mega-panel--image-col-link img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 6; /* ~250x300 source ratio; height follows width */
    height: auto;
    object-fit: cover;
  }

  /* Blog tiles whose article has no image fall back to a neutral block that
     holds the same footprint, so the image-column grid stays aligned. */
  .mega-panel--image-col-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 6;
    background: #f5f5f5;
  }

  .mega-panel--image-col-text {
    margin-top: 12px;
    text-align: left;
  }

  .mega-panel--image-col-heading {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
  }

  .mega-panel--image-col-subheading {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #000;
  }

  .mega-panel--image-col-subheading:hover {
    font-weight: 600;
    text-decoration: underline;
  }

  /* Solid header bg only when a panel is actually open. The previous :has(.mega-panel)
     rule fired permanently because the panel exists in DOM regardless of open state. */
  .main-header-wrap.main-header--panel-open {
    background: #fff;
  }
}

/* ---------- Mobile (max-width breakmd) ---------- */
@media (max-width: 1024px) {

  /* Hide the desktop nav row below the desktop breakpoint. Atlantic only hides
     it below 720px, leaving 720–1024 with both desktop nav and hamburger visible. */
  .main-header nav.full {
    display: none;
  }

  /* === Single-row mobile header: hamburger | search | LOGO | account | cart === */
  .main-header--centered .action-links {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px;
    height: 55px;
  }

  /* Logo wrapper is .store-title (not .header-store-title — that was a misnamed selector).
     Absolutely center any visible store-title; theme.css already hides the
     desktop variant below 720px, so this safely centers the mobile logo. */
  .main-header--centered .action-links > .store-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 1;
    pointer-events: none;
    /* Reserve ~75px each side for the hamburger (left) and account/cart icons (right)
       so the centered logo can't overlap them. */
    max-width: calc(100vw - 150px);
  }

  .main-header--centered .action-links > .store-title a,
  .main-header--centered .action-links > .store-title img {
    pointer-events: auto;
  }

  /* The logo is an IMAGE (header-group.json -> capsule-1200px.png), so font-size has
     no effect. It's a wide wordmark, so width was the limiter and it rendered short.
     Drive height directly to make it taller; !important beats the inline max-width
     (logo_width: 400px) and Atlantic's max-height: 200px / height: auto (theme.css:3260).
     This is the single knob for the mobile logo height. */
  .main-header--centered .action-links > .store-title img {
    height: 20px !important;
    width: auto !important;
    max-height: none !important;
    /* Cap to the space between the hamburger and the right-side icons; object-fit:
       contain shrinks the wide wordmark to fit without cropping or overlapping. */
    max-width: calc(100vw - 150px) !important;
    object-fit: contain !important;
  }

  /* Tools group spans full width below the absolutely-positioned logo */
  .main-header--centered .main-header--tools {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-header--centered .main-header--tools-group {
    display: flex !important;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    /* Height is set on .action-links, not via margins here. */
    margin: 0;
  }

  /* display: contents flattens tools-left/right children into tools-group, so flex
     order can rearrange them across the original DOM structure. */
  .main-header--centered .main-header--tools-left,
  .main-header--centered .main-header--tools-right {
    display: contents;
  }

  /* Order: hamburger (1) | search (2) | [logo absolute centered] | account+cart (5). */
  .main-header--centered .main-header--tools-left > .tool-container { order: 1; margin: 0; }
  .main-header--centered .main-header--tools-right > .tool-container { order: 5; margin-left: auto; }

  /* Native live search trigger sits just right of the hamburger, left of the
     centered logo. The .live-search container is wider than the icon (it holds the
     hidden form), so flex: 0 0 auto keeps the icon at the container's left edge,
     right next to the hamburger, instead of drifting toward the logo. The
     .live-search container, #ls-form, and data-live-search hooks stay in the DOM —
     atlantic.js owns the open/close + full predictive results. */
  .main-header--centered .main-header--tools-right > .live-search {
    order: 2;
    flex: 0 0 auto;
    /* !important overrides the global `.live-search { margin: 0 !important }` reset in
       custom_style.css:123 — gives a 4px gap between the hamburger and the search icon. */
    margin: 0 0 0 4px !important;
  }

  .main-header--centered .ls-button-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .main-header--centered .main-header--tools-left > .tool-container .menu,
  .main-header--centered .main-header--tools-right > .tool-container > * {
    margin: 0 4px;
  }

  /* !important overrides the `.mini-cart-wrap { margin: 0 !important }` reset in
     custom_style.css:973 — gives a 4px gap between the account and cart icons. */
  .main-header--centered .main-header--tools-right > .tool-container > .mini-cart-wrap {
    margin-left: 4px !important;
  }

  /* === Mobile drawer === */

  /* Atlantic theme.css gives .mobile-dropdown--content align-items: flex-start, which
     makes block children shrink to content width. Force full width on rows + items. */
  .mobile-dropdown--accordion .mobile-dropdown--content {
    padding: 12px 30px 24px;
    align-items: stretch;
  }

  .mobile-dropdown--close-row,
  .mobile-dropdown--list,
  .mobile-dropdown--support {
    width: 100%;
  }

  /* X close: own row, top-right, comfortable tap target */
  .mobile-dropdown--close-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
  }

  .mobile-dropdown--close {
    background: transparent;
    border: 0;
    padding: 0;
    width: auto;
    height: 44px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
  }

  .mobile-dropdown--close svg {
    width: 16px;
    height: 16px;
  }

  /* Accordion list */
  .mobile-dropdown--list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
  }

  .mobile-dropdown--item {
    border-bottom: 1px solid #f0f0f0;
  }

  .mobile-dropdown--trigger,
  .mobile-dropdown--leaf {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 20px 4px;
    background: transparent;
    border: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
  }

  .mobile-dropdown--item.has-children[aria-expanded="true"] .mobile-dropdown--trigger-label {
    font-weight: 700;
  }

  .mobile-dropdown--chevron {
    display: inline-flex;
    align-items: center;
    transition: transform 200ms ease;
    color: #111;
  }

  .mobile-dropdown--chevron svg {
    width: 12px;
    height: 12px;
  }

  .mobile-dropdown--item.has-children[aria-expanded="true"] .mobile-dropdown--chevron {
    transform: rotate(180deg);
  }

  .mobile-dropdown--panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 250ms ease;
  }

  .mobile-dropdown--item.has-children[aria-expanded="true"] .mobile-dropdown--panel {
    max-height: 200vh;
  }

  .mobile-dropdown--children {
    list-style: none;
    padding: 0 0 16px 20px;
    margin: 0;
  }

  .mobile-dropdown--child a {
    display: block;
    padding: 8px 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111;
    text-decoration: none;
  }

  /* Bottom support links */
  .mobile-dropdown--support {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
  }

  .mobile-dropdown--support-item a {
    display: block;
    padding: 6px 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111;
    text-decoration: none;
  }

  /* Hide desktop mega panel on mobile (mobile uses accordion instead) */
  .main-header .mega-panel {
    display: none;
  }
}

/* ==========================================================================
   Header positioning. Sticky throughout, every template including home — no
   in-flow → out-of-flow swap, so no ~120px content jump on compress.
   ========================================================================== */
.main-header-wrap {
  position: sticky;
  top: 0;
  z-index: 5000;
}

/* When a drawer (mini-cart) opens, Atlantic's ScrollLock adds .scroll-locked to
   <html>, which sets overflow:hidden on both <html> and <body> (theme.css).
   That collapses the sticky header's scroll container, so it snaps to
   document-top and vanishes when the page is scrolled down. Pin it to the
   viewport while locked; it reverts to sticky on close. */
html.scroll-locked .main-header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* The compressed (scrolled) header carries backdrop-filter: blur (custom_style.css),
   which makes it the containing block for any position:fixed descendant. The
   predictive-search overlay (.ls-form + .ls-results) is fixed-to-viewport; with the
   blur active it anchors to the ~80px header box instead and renders mostly above
   the fold, so a search opened after scrolling lands off-screen. Drop the blur while
   search is open — the overlay covers the header anyway, so it's never seen. */
html.live-search-visible .main-header-wrap.main-header--compress,
html.live-search-visible .main-header--compress {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Solid white header in the default (non-compressed) state, every template
   including home. The compress state keeps its translucent blur (custom_style.css).
   Paints white from the first frame and stops content showing through the sticky
   header before compress kicks in. */
.main-header-wrap:not(.main-header--compress),
.main-header-wrap:not(.main-header--compress) .main-header {
  background: #fff;
}

/* On mobile, Atlantic added padding-top to .page-body-content to compensate for
   the in-flow → fixed header swap. With sticky throughout, that's no longer needed. */
@media (max-width: 1024px) {
  .page-body-content {
    padding-top: 0 !important;
  }

  /* Atlantic theme.css:3314 paints a 1px x 100vw pseudo-element at bottom: -14px
     on .main-header--tools (intended as a mobile divider). Hide it. */
  .main-header--normal .main-header--tools::after,
  .main-header--expanded .main-header--tools::after,
  .main-header--centered .main-header--tools::after {
    display: none !important;
    content: none !important;
  }
}

/* ---------- Default header tool icon color: dark ----------
   Atlantic uses settings.header-action-link-colour, which the merchant typically sets
   to white (left over from the old home-over-hero design). The header is now solid
   white on every template, so force dark icons everywhere. */
.main-header--tools svg,
.main-header--tools .menu,
.main-header--tools .account-options,
.main-header--tools .mini-cart-wrap,
.main-header__account-icon,
.main-header__mini-cart-icon {
  color: #111;
}

/* Zero out header tool spacing on all viewports (Atlantic core adds margin/padding
   in theme.css; custom_style.css only zeroed these at <=1024.5px). */
.main-header--tools .mini-cart-wrap,
.main-header--tools .account-options {
  margin: 0;
  padding: 0;
}

/* Hide the account/person icon on mobile to free up header space.
   Account/Sign in lives in the hamburger menu on mobile. Hidden, not removed,
   so the element stays present for atlantic.js and remains easy to restore. */
@media (max-width: 800px) {
  .main-header--tools .account-options {
    display: none;
  }
}

/* Header search icon sized to 24px (overrides the shared 20px svg-icon rule
   in theme.css). Scoped to the header search button only. */
#ls-button-search .svg-icon,
.ls-form-button-search .svg-icon {
  width: 24px;
  height: 24px;
}

/* =============================================================================
   Home page sections — sliders (splide), featured sections, capsule banner,
   what-to-wear, lookbook, store-services, slideshow tweaks (ported from v17)
   ============================================================================= */



.overline {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}



/* ==========================================================================
Sliders
========================================================================== */

.splide__slide .product {
  width: 100%;
  display: block;
}



.large-slider,
.three-up-slider,
.four-up-slider {
  visibility: hidden;
  pointer-events: none;
}



.large-slider.is-initialized,
.three-up-slider.is-initialized,
.four-up-slider.is-initialized {
  visibility: visible;
  pointer-events: unset;
}



.featured-section.-four-up {
  flex-direction: column;
}



.featured-section__overline {
  text-align: center;
}



.featured-slider.-four-up {
  position: relative;
  width: 100%;
}



.featured-section.-four-up .featured-section__title {
  font-size: 30px;
  text-align: center;
  padding: 0;
  margin-bottom: 2rem;
}



.featured-section.-four-up .featured-section__title-wrapper {
  width: 100%;
}



.featured-slider.-three-up {
  position: relative;
  width: 75%;
}



.featured-slider__item-wrapper > .splide__track {
  padding-bottom: 1rem;
}



@media screen and (max-width: 1440px) {
  .featured-slider.-three-up {
    width: 75%;
  }
}



@media screen and (max-width: 800px) {
  .featured-slider.-three-up {
    width: 100%;
  }
}



.featured-section.-three-up .featured-section__title-wrapper {
  width: 25%;
}



@media screen and (max-width: 800px) {
  .featured-section.-three-up .featured-section__title-wrapper {
    width: 100%;
  }
}



.featured-section.-three-up .featured-section__title {
  text-align: right;
  font-size: 32px !important;
  padding: 0 1rem 0;
  margin: 0 0 2.2rem;
}



@media screen and (max-width: 800px) {
  .featured-section.-three-up .featured-section__title {
    width: 100%;
    font-size: 2rem !important;
    text-align: center;
  }
}



.featured-section.-three-up .featured-section__name {
  width: 100%;
  text-align: right;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}



.large-slider__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 4rem;
}



.large-slider__title-wrapper {
  position: relative;
}



.large-slider__title {
  text-transform: uppercase;
}



.large-slider__subtitle {
  font-family: 'Libre Bodoni', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-size: 2.625rem;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate3d(80%, 10%, 0);
}



.large-slider {
  position: relative;
  width: 100%;
}



.large-slider--bespoke img.large-slider__img {
  margin: 0 auto;
}



@media screen and (max-width: 800px) {
  .large-slider--bespoke img.large-slider__img {
    display: none;
  }
}



.large-slider--bespoke img.large-slider__img--mobile {
  display: none;
}



@media screen and (max-width: 800px) {
  .large-slider--bespoke img.large-slider__img--mobile {
    display: block;
  }
}



/* large-slider arrows */
.large-slider .splide__arrow {
  font-size: 0;
  border: none;
  white-space: pre;
  font-family: 'Libre Bodoni', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  background: none;
  transform: translateY(-50%);
  height: auto;
  width: auto;
  border-radius: 0;
}



.large-slider .splide__arrow svg {
  display: none;
}



.large-slider .splide__arrow--next {
  right: 0;
}



.large-slider .splide__arrow--prev {
  left: 0;
}



.large-slider .splide__arrow--next::before {
  content: 'Next \a Capsule \a' url("data:image/svg+xml,%3Csvg width='33' height='7' viewBox='0 0 33 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 4H0V3H0.5V4ZM32.5 3.5L27.5 6.38675V0.613249L32.5 3.5ZM0.5 3H28V4H0.5V3Z' fill='currentColor'/%3E%3C/svg%3E");
  font-size: 1rem;
}



.large-slider .splide__arrow--prev::before {
  content: 'Previous \a Capsule \a' url("data:image/svg+xml,%3Csvg width='33' height='7' viewBox='0 0 33 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32.5 4H33V3H32.5V4ZM0.5 3.5L5.5 6.38675V0.613249L0.5 3.5ZM32.5 3H5V4H32.5V3Z' fill='currentColor'/%3E%3C/svg%3E");
  font-size: 1rem;
}



/* pagination dots */
.splide__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}



.splide__pagination__page {
  border: 0;
  border-radius: 999px;
  font-size: 0;
  width: 7px;
  height: 7px;
  padding: 0;
  margin: 0.2rem;
  background-color: #000;
  opacity: 0.2;
  transition: opacity 200ms;
  cursor: pointer;
}



.splide__pagination__page.is-active {
  opacity: 1;
}



/* product carousel arrows */
[class*="-up-slider"] .splide__arrow--prev,
[class*="-up-slider"] .splide__arrow--next {
  position: absolute;
  top: -3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  color: transparent;
  padding: 0;
  border: none;
  outline: none;
  opacity: 1;
  transition: opacity 200ms;
  background: rgba(0,0,0,0.1);
  border-radius: 0;
  transform: none;
}



[class*="-up-slider"] .splide__arrow svg {
  display: none;
}



@media (max-width: 800px) {
  [class*="-up-slider"] .splide__arrow--prev,
  [class*="-up-slider"] .splide__arrow--next {
    top: auto;
    bottom: -3rem;
  }
}



[class*="-up-slider"] .splide__arrow--prev:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E");
}



[class*="-up-slider"] .splide__arrow--next:after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
}



[class*="-up-slider"] .splide__arrow--prev:hover,
[class*="-up-slider"] .splide__arrow--next:hover {
  opacity: 1;
}



[class*="-up-slider"] .splide__arrow.is-disabled {
  opacity: 0.25;
}



[class*="-up-slider"] .splide__arrow--prev {
  left: calc(100% - 6rem);
}



@media (max-width: 800px) {
  [class*="-up-slider"] .splide__arrow--prev {
    left: calc(50% - 3rem);
  }
}



[class*="-up-slider"] .splide__arrow--next {
  left: calc(100% - 3rem);
}



@media (max-width: 800px) {
  [class*="-up-slider"] .splide__arrow--next {
    left: auto;
    right: calc(50% - 3rem);
  }
}



.product-slider__title-wrapper {
  width: 25%;
  min-width: 250px;
  padding-left: 1rem;
  padding-right: 1rem;
  flex-shrink: 0;
}




@media (max-width: 800px) {
  .product-slider__title-wrapper {
    width: 100%;
    margin-right: 0;
    text-align: center;
    padding-bottom: 2rem;
    padding-left: 0;
    padding-right: 0;
  }
}



.product-slider__wrapper {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 50px 0;
}




@media (max-width: 800px) {
  .product-slider__wrapper {
    flex-direction: column;
    padding: 0 0 50px;
  }
}



.product-slider__item-wrapper {
  position: relative;
  width: 75%;
  flex: 1;
  min-width: 0;
}



@media (max-width: 800px) {
  .product-slider__item-wrapper {
    width: 100%;
  }
}



.product-slider__title {
  font-family: 'Libre Bodoni', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-size: 2rem;
  text-transform: uppercase;
  margin: 0;
}



.product-slider__cta {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 16px;
  background: #2e2a26;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
}



.product-slider__cta:hover {
  color: #fff;
}



/* Product tiles: match the Editor's Picks slider brand
   (carousel .overline has no tracking; theme.css:1014 sets 0.08em on .product .brand).
   Global so dynamic-collection + PDP-rec tiles stay consistent with the sale-first price. */
.product .brand {
  letter-spacing: normal;
  line-height: 15px;
  margin-bottom: 6px;
}



/* theme.css:14710/14839 put margin-right on these spans; kill it so only the
   .price.sale flex gap:3px separates them, matching the slider */
.product-list .product-item__price .original,
.product-list .product-item__price .money--last,
.product-slider .product-item__price .original,
.product-slider .product-item__price .money--last {
  margin: 0;
}



/* Base hide for mobile-only variants; media queries below re-show them at
   mobile widths. Must stay ABOVE those media queries — same specificity,
   order decides (v17 had this at custom_style.css:105, before its 767px
   block; the port concat inverted the order and killed slideshow mobile
   text, mobile banner image, and feat-collection mobile styling). */
.article-meta > div:after,
.banner-mobile,
.blog-sidebar-tags,
.comments-wrap,
.content-outer-wrap.content_mobile_view,
.feat-collection__wrapper .show_mobile,
.image-wrap.image_mobile_view,
.main-header nav.full .nav-item .svg-icon {
  display: none;
}



@media (min-width: 719px) {
  .home-section.slideshow:not(.content-area):not(.marquee.marquee--is-wide-false):not(.collection-title-header) {
    padding-top: 0;
    z-index: 3;
}
}



/* Portrait 4:5 product cards on the native collection + search grids only.
   Mirrors the theme's `tall` grid (padding-bottom:125%); the global product
   grid setting stays Square. The home product slider opts in too so its cards
   match the collection grid. */
.product-grid-square [data-section-type="static-collection"] .product-card-figure,
.product-grid-square [data-section-type="static-search"] .product-card-figure,
.product-slider .product-card-figure {
  padding-bottom: 125%;
}



/* Editorial badge (CT_editors-picks). The .badge base supplies font/padding/
   uppercase. Outline style (mirrors PDP .premium-label): transparent fill,
   black border + black text instead of a solid pill. */
.badge-editors {
  background-color: #fff;
  border: 1.5px solid #1E1E1E;
  color: #1E1E1E;
}



/* Center the slideshow text container consistently across all viewport widths */
.slide .content-outer-wrap {
  left: 4% !important;
  right: 4% !important;
  width: auto !important;
}



.slide .content-inner-wrap {
  left: 0 !important;
}



.slide .content-inner-wrap.bottom {
  bottom: 10%;
}



@media (max-width: 1024.5px) {
  .ls-button-search,
  .ls-label,
  .main-header nav.full .nav-item.dropdown:hover > .label,
  .main-header nav.full .nav-item.dropdown:hover > details .label,
  .main-header nav.full .nav-item.has-mega-nav.active > .label,
  .main-header nav.full .nav-item.has-mega-nav.active > details .label,
  .main-header nav.full .nav-item > .label:hover,
  .main-header nav.full .nav-item > details .label:hover,
  .main-header nav.full .nav-item > details[open] > .label,
  .main-header nav.full .nav-item > details[open] > details .label,
  .main-header--tools .account-options,
  .main-header__mini-cart-icon,
  .template-index .ls-button-search .svg-icon,
  .template-index .ls-form-button-close .svg-icon,
  .template-index .ls-form-button-search .svg-icon,
  .template-index .ls-input,
  .template-index .main-header--tools-label,
  .template-index .main-header__mini-cart-icon,
    .template-index nav.full .nav-item > .label,
  .template-index nav.full .nav-item > details .label,
  .tool-container a {
    color: #000;
  }

  .banner-desktop,
  .main-header nav.full {
    display: none;
  }

  .main-header--tools .menu {
    display: block;
  }

  .extra-image,
  .home-section.slideshow:not(.content-area):not(.marquee.marquee--is-wide-false):not(.collection-title-header) {
    margin-top: 0;
  }

  .main-header--compress {
    position: fixed !important;
    width: 100%;
    top: 0;
  }

  .banner-mobile {
    display: block;
    width: 100%;
  }

}



.featured-blog {
  padding-bottom: 70px;
  margin-bottom: 0;
  margin-top: 0;
}



.featured-blog__articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1180px;
  margin: 40px auto 0;
}



.featured-blog__article-rte img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  object-fit: cover;
}



.featured-blog__article-rte {
  text-align: left;
}



.featured-blog__article-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #000;
  line-height: 22px;
  margin-bottom: 0;
}



.featured-blog__article-continue-reading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 10px;
  letter-spacing: 0;
  text-align: left;
  text-decoration: underline !important;
  margin-top: 20px;
}



@media (max-width: 767px) {
  .featured-blog__article {
    width: 100%;
  }

  .login-register-div {
    flex-direction: column;
  }

  .login_form_wrapper,
  .register_form_wrapper {
    width: 100% !important;
  }

  .register_form_wrapper {
    padding-left: 0;
    border-top: 2px solid #000;
    padding-top: 15px;
  }

  .customer .account-form .submit-button {
    width: 57%;
    margin-right: 20px;
  }

  .register_form_wrapper:before {
    display: none;
  }

  .customer .account-form .helper {
    margin: 0 !important;
  }

  .log-btn-area {
    align-items: center;
  }

  .section-collection-designers .rte {
    column-count: 2 !important;
  }
}



@media (max-width: 991px) {
  .collection_featured_image_mobile {
    display: block;
  }

  .collection_featured_image {
    display: none;
  }

  .featured-blog__articles {
    grid-template-columns: repeat(2, 1fr);
  }
}



.shopify-section--lookbook {
  padding-top: 40px !important;
}



/* Trend Report blog list: spacing to match featured-blog styles */
.cap-author-article-image {
  margin-bottom: 0.75rem;
}



@media (max-width: 719px) {
  .main-header--tools-label {
    display: block !important;
  }

  .slide .content-inner-wrap.left .content,
  .slide .content-inner-wrap.right .content,
  .slide .content-inner-wrap.center .content {
    text-align: center;
    margin-top: 75% !important;
  }

  /* True vertical centering for the "Center" alignment (no margin hack) */
  .content-outer-wrap.content_mobile_view .content-inner-wrap.center-center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slide .content-inner-wrap.left .content {
    text-align: left;
  }
}



.large-slider--bespoke img.large-slider__img {
  margin: 0 auto;
  width: 100%;
  height: auto;
}



.slide .content .title,
.slideshow--loaded .slide.active .title {
  font-family: 'Libre Bodoni', serif;
  font-weight: 400;
  font-size: var(--slide-title-size, 30px);
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
  color: #000;
  opacity: 1 !important;
  margin: 0 0 var(--slide-title-mb, 6px) !important;
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
  overflow: hidden;
}



/* Center alignment only: constrain the text column (so long headings stack), center
   the column, and center the text. Scoped to center-center so Left/Right/bottom/top
   keep the theme's default box behavior. */
.slide .content-inner-wrap.center-center .content {
  max-width: var(--slide-content-width, 520px);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}



/* Atlantic pins the outer wrap to left:4% with a 1430px cap, which shoves the text
   column left of center on wide screens. For Center alignment, let it span full width
   so the column's auto margins center it on the true viewport center. */
.slide .content-outer-wrap:has(.content-inner-wrap.center-center) {
  left: 0 !important;
  right: 0 !important;
  max-width: none !important;
}



.slide .content .tagline,
.slideshow--loaded .slide.active .tagline {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  font-size: var(--slide-sub-size, 15px);
  line-height: 1.3;
  letter-spacing: normal;
  vertical-align: middle;
  text-transform: uppercase;
  color: #000;
  opacity: 1 !important;
  padding-bottom: 30px;
  margin: 0;
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
}



.slide .content .call-to-action-wrap {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition: none !important;
}



.slide .content .call-to-action {
  margin-top: 0;
  font-weight: 700;
  background-color: #000;
  border: 1px solid #000;
  font-size: 15px !important;
  line-height: 18px !important;
  letter-spacing: normal;
}



.product-slider__title,
.template-index .home-slider-text,
.template-index .section-title {
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
}



.product-slider__title-wrapper .overline {
  font-size: 15px;
  line-height: 20px;
  margin: 0;
}



.feat-collection__subtitle.overline {
  border: 1px solid #000;
  width: fit-content;
  padding: 10px;
}



.what-to-wear-wrapper .page-width {
  max-width: 1024px;
  padding: 0 1rem;
  gap: 1rem;
  margin: 0 auto;
  text-align: center;
}



.what-to-wear-wrapper .what-to-wear-title {
  font-weight: 400;
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0;
  padding-top: 60px;
  margin-bottom: 0;
}

/* Home "Top 5" header (what-to-wear title + subtitle settings) —
   subtitle sits flush under the title, spacing lives on the wrapper. */
.what-to-wear-header {
  margin-bottom: 30px;
}
.what-to-wear-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
}

/* Home "Top 5" header CTA (what-to-wear section button_text/button_url
   settings) — links the block to the monthly trend report article.
   Same styling as .product-slider__cta. */
.what-to-wear-cta {
  display: block;
  width: fit-content;
  margin: 12px auto 0;
  padding: 16px;
  background: #2e2a26;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
}
.what-to-wear-cta:hover {
  color: #fff;
}



.what-to-wear-heading {
  font-family: 'Libre Bodoni', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 25px;
  letter-spacing: 0;
  text-align: left;
}



.what-to-wear-product h3,
.what-to-wear-product h4,
.what-to-wear-subheading {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
}



.what-to-wear-subheading {
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 25px;
  text-align: left;
  margin: 0 0 15px 0;
}



.what-to-wear-blocks {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  padding-bottom: 3rem;
}



.template-index .what-to-wear-blocks {
  justify-content: center !important;
}



.what-to-wear-product img {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  object-fit: contain;
  margin-bottom: 20px;
}



.what-to-wear-product-block {
  width: calc(25% - 15px);
}



.what-to-wear-gallery-block {
  width: calc(50% - 10px);
}



.what-to-wear-gallery-block img {
  width: 100%;
  height: 100%;
  aspect-ratio: 20 / 23;
  overflow: hidden;
  object-fit: cover;
}



.what-to-wear-product h3 {
  font-weight: 700;
  font-size: 14px;
  line-height: 15px;
  margin: 0 0 6px 0 !important;
}



.what-to-wear-product h4 {
  font-weight: 400;
  font-size: 13px;
  line-height: 15px;
  text-transform: capitalize;
  margin: 0 0 6px 0 !important;
}



.product-slider {
  padding-top: 70px;
}



/* product-item reused inside the splide slider: card gutters
   (was previously the figure's horizontal padding; width:100% comes from the
   shared .splide__slide .product rule in custom.css.liquid) */
.product-slider .splide__slide .product {
  padding: 0 1rem;
}

`
   leaks onto it. Restore the collection card spacing. */
.product-slider .product-card-details .title {
  margin-bottom: 6px !important;
  padding-top: 0;
}



.price.sale,
.product-list .product-item__price,
.product-slider .product-item__price {
  display: flex;
  gap: 6px;
  justify-content: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: #2c2c2c;
}



@media screen and (max-width: 800px) {
  .large-slider--bespoke img.large-slider__img--mobile {
    display: block;
    width: 100%;
    height: auto;
  }

  .feat-collection__wrapper .show_desktop {
    justify-content: space-around;
    align-items: flex-start;
  }

  .feat-collection-heading-wrapper h2 {
    font-weight: 400;
    font-size: 28px;
    line-height: 28px;
    letter-spacing: 0;
  }
}



@media (min-width: 2000px) {
  .template-index .product-slider__title {
    font-size: 34px;
  }

  .trend-blog .image-block {
    height: auto;
  }
}



@media screen and (max-width: 1180px) {
  .product-slider__title {
    font-size: 1.2rem;
  }
}



@media (min-width: 768px) and (max-width: 991px) {
  .product-card-interaction {
    font-size: 9px;
  }

  .product-slider__title {
    font-size: 1rem;
  }

  .featured-collections .collection-wrap {
    aspect-ratio: 5 / 6;
  }

  .featured-collections .collection-btn-label {
    height: 50px;
    font-size: 13px;
    padding: 0 20px;
  }
}



@media (max-width: 767px) {
  /* Trim brand tracking on mobile so long names (LOVESHACKFANCY) stay one line down to 320px */
  .product-card-details .brand {
    letter-spacing: 0.5px;
  }

  .carousel__text,
  .what-to-wear-gallery-block img,
  .what-to-wear-product img {
    height: auto;
  }

  .design_column:first-child {
    order: 1;
  }

  .design_column:nth-child(2) {
    order: 3;
  }

  .design_column:nth-child(3) {
    order: 2;
  }

  .design_column:nth-child(4) {
    order: 4;
  }

  #hubspot-messages-iframe-container.widget-align-right {
    right: 0 !important;
    margin-bottom: 60px;
  }

  #ls-form,
  .template-index #ls-form {
    background: #fff !important;
  }

  .what-to-wear-heading {
    font-size: 26px !important;
    padding-top: 0;
    margin-top: 0;
    line-height: 31px;
  }

  .template-index h2 {
    font-size: 30px !important;
    padding-top: 5px;
    margin-bottom: 18px !important;
  }

  /* Exception: what-to-wear subtitle sits flush under the title */
  .template-index .what-to-wear-title {
    margin-bottom: 0 !important;
  }

  .content-outer-wrap,
  .featured-collections .wrap.wrap--4,
  .image-wrap,
  .what-to-wear-blocks .what-to-wear-gallery-block:nth-child(2) {
    display: none;
  }

  .content-outer-wrap.content_mobile_view,
  .image-wrap.image_mobile_view,
  .image-wrap.slideshow__image-wrap,
  .template-cart .image-wrap {
    display: block;
  }

  .content-outer-wrap.content_mobile_view {
    position: absolute;
  }

  .slide .content .title,
  .slideshow--loaded .slide.active .title {
    font-size: var(--slide-title-size, 30px) !important;
  }

  .slide .content .tagline,
  .slideshow--loaded .slide.active .tagline {
    font-size: var(--slide-sub-size, 15px);
    margin-top: 0;
  }

  .slide .content .call-to-action {
    padding: 10px 18px;
    margin-top: 0;
  }

  .featured-collections .collection-wrap {
    width: 47%;
    margin-bottom: 20px;
  }

  .featured-collections .collection {
    height: auto;
  }

  .featured-collections .wrap {
    flex-wrap: wrap;
  }

  .collection-slide h3,
  .section-title {
    font-size: 28px;
  }

  .capsule-footer#main-footer .connect {
    text-align: left;
    flex-direction: column;
    justify-content: center;
  }

  .product-card-interaction {
    margin-bottom: 0;
    display: block;
  }

  .product-card-overlay {
    display: none !important;
  }

  .product-inner:hover figure img:first-of-type,
  .product-card-figure:hover img:first-of-type {
    display: block !important;
    opacity: 1 !important;
  }

  .product-inner:hover figure img:last-of-type,
  .product-card-figure:hover img:last-of-type {
    display: none !important;
    opacity: 0 !important;
  }

  .product-inner {
    padding: 0 16px;
  }

  .splide__slide .product-inner {
    padding: 0;
  }

  .template-index .splide__slide .product {
    margin-bottom: 0;
  }

  .feat-collection-heading-wrapper {
    margin-top: 40px;
  }

  .what-to-wear-product-block {
    width: calc(50% - 10px);
  }

  .what-to-wear-gallery-block {
    width: 100%;
  }

  .collection-link {
    position: relative;
    display: block !important;
  }

  .mobile-slider .collection-slide-btn-wrap {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-top: -25px;
  }

  .mobile-slider .collection-slide .collection-btn-label {
    height: 50px;
    font-size: 13px;
  }

  .featured-collections {
    padding-bottom: 25px !important;
  }

  .featured-collections .mobile-slider .splide__track {
    padding-bottom: 0;
  }

  /* Recently viewed: 2x2 grid on mobile */
  #recently-viewed-list.product-list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100% !important;
  }

  #recently-viewed-list .product {
    width: calc(50% - 7.5px) !important;
    min-width: auto !important;
    margin-bottom: 20px;
  }
}



.featured-blog__article-excerpt {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal;
  font-size: 13px !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  margin-bottom: 10px;
  margin-top: 1.25rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}



.is-initialized .splide__slide {
  margin-top: 0;
}



.featured-blog__article-title {
  display: flex;
  flex-direction: column;
}



@media (max-width: 767px) {
  .template-blog .featured-blog__article-title {
    line-height: 20px !important;
    font-size: 22px !important;
  }
}



@media (max-width: 600px) {
  .featured-blog__articles {
    grid-template-columns: 1fr;
  }

  .featured-blog__article-title {
    min-height: auto;
  }

  .featured-blog__article-rte img {
    height: auto;
  }
}

/* =============================================================================
   Footer — ported from v17 (capsule-footer styles)
   ============================================================================= */



/* Footer overrides */
.static-footer {
  background: #1E1E1E
}



.sub-footer {
  padding-bottom: 30px;
  margin-bottom: 0px;
}



.main-footer .connect > li,
#main-footer .connect,
#main-footer input {
  border-color: rgb(255 255 255 / 20%);
}



#main-footer input {
  color: #ffffff;
}



#main-footer .footer-newsletter-banner__form input {
  color: #000;
}



#main-footer .newsletter a, 
#main-footer .contact a, 
#main-footer .footer-menu a, 
#main-footer:not(.main-footer-alt) .social a {
  color: #ffffff;
  transition-property: opacity;
  transition-duration: 200ms;
  font-size: 12px;
}



.main-footer .connect .title {
  color: #ffffff;
}



#main-footer .newsletter a:hover, 
#main-footer .contact a:hover, 
#main-footer .footer-menu a:hover, 
#main-footer:not(.main-footer-alt) .social a:hover {
  color: #ffffff;
  opacity: 0.8;
}



.main-footer {
  margin-top: 0;
}



/* Custom Capsule Footer */
.footer-column-title {
  font-size: .825rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}



.capsule-footer .title {
  font-weight: 700 !important;
  text-align: inherit;
  margin-bottom: 1rem;
}



/* Footer newsletter banner — full-width above link columns */
.footer-newsletter-banner {
  width: 100%;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}



.footer-newsletter-banner__text {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}



.capsule-footer .footer-newsletter-banner h2.footer-newsletter-banner__title {
  font-family: 'Inter', sans-serif;
  font-weight: 700 !important;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
}



.footer-newsletter-banner__subtext {
  color: #ffffff;
  font-size: 0.825rem;
  text-transform: none;
}



.footer-newsletter-banner__form {
  flex: 1;
  min-width: 0;
  max-width: 500px;
}



/* Override Klaviyo's inline min-height inside the banner */
.footer-newsletter-banner__form .klaviyo-form form > div {
  min-height: auto !important;
}



@media screen and (max-width: 1280px) {
  .capsule-footer#main-footer .connect > li {
    padding-left: 0;
    padding-right: 0;
  }
}



@media screen and (max-width: 1025px) {
  .footer-newsletter-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer-newsletter-banner__form {
    width: 100%;
  }
}



.capsule-footer#main-footer {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
}



.capsule-footer#main-footer .connect {
  display: flex;
  text-align: left;
  gap: 3rem;
  border: none;
}



@media screen and (max-width: 1280px) {
  .capsule-footer#main-footer .connect {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    text-align: left;
    gap: 1rem;
  }
}



@media screen and (max-width: 800px) {
  .capsule-footer#main-footer .connect {
    grid-template-columns: 1fr;
  }
}



.capsule-footer#main-footer .connect > li {
  font-size: .825rem;
  text-align: inherit;
  text-transform: uppercase;
  vertical-align: top;
  height: auto;
}



.capsule-footer#main-footer .newsletter li, #main-footer .contact li, #main-footer .footer-menu li, #main-footer:not(.main-footer-alt) .social li {
  font-size: 12px;
}



.capsule-footer .footer-additional-text {
  font-size: .825rem;
  text-align: inherit;
  margin-top: 1rem;
  color: #ffffff;
}



.capsule-footer .footer-newsletter-text {
  font-size: .825rem;
  text-align: inherit;
  margin-bottom: 1rem;
  text-transform: none;
  color: #ffffff;
}



.capsule-footer .footer-social-links {
  margin-top: 1rem;
  font-size: .825rem;
  text-align: inherit;
  color: #ffffff;
}



.capsule-footer#main-footer .connect>li {
  width: 100%;
  max-width: 100%;
}



@media (min-width: 1280px) {
  .capsule-footer#main-footer .connect>li:not(.newsletter) {
      padding-right: 0;
      padding-left: 0;
  }

  .capsule-footer#main-footer .connect>li.newsletter {
    padding-left: 0px;
    padding-right: 0px;
    justify-content: flex-start;
  }
}



.capsule-footer .newsletter-wrap {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}



.capsule-footer.main-footer .connect>li,
.capsule-footer#main-footer {
  border: none;
}



.capsule-footer.main-footer-alt .module-count-3>li:not(.first) {
  width: 100%;
}



.capsule-footer.main-footer .connect .social .social-link svg {
  color: #ffffff;
}



.capsule-footer .sub-footer__row {
  text-align: center;
}



.capsule-footer#main-footer .footer-menu {
  padding-bottom: 0px;
}



@media (max-width: 1280px) {
  .capsule-footer.main-footer .connect>li, .capsule-footer#main-footer {
    padding-top: 40px;
  }
}



.capsule-footer .sub-footer__copyright {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* v19 stock added `.sub-footer .sub-footer__copyright { color: text-colour }`
     (theme.css ~2562, no v17 counterpart) — dark-on-dark on our footer, so the
     line was invisible. Inherit the sub-footer's 50% mix (~#8f8f8f) like v17. */
  color: inherit;
}



.sub-footer__logo {
  width: 100%;
  max-width: 40px;
  margin-bottom: 10px;
}



.main-footer .connect .title {
    font-size: 13px;
}



/* Desktop: theme leaves .ls-results with overflow-y:auto but no height cap, so
   a full panel (queries + collections + products + footer) runs past the
   viewport bottom and the "Search for …" button is clipped (mobile already pins
   it). Cap the panel to the viewport so it scrolls internally, and make the
   footer sticky so the button stays visible without scrolling. */
/* The footer is pinned over the scrolling results — fixed on mobile (theme),
   sticky on desktop (below). Theme ships it transparent, so results scroll
   visibly behind the "Search for …" button. Give it the panel background at
   every width. */
.predictive-search__footer {
  background-color: #ffffff;
}



@media (min-width: 720px) {
  .ls-results {
    max-height: calc(100vh - 120px);
  }

  .predictive-search__footer {
    position: sticky;
    bottom: 0;
  }
}



.capsule-footer .sub-footer__copyright,
.footer-additional-text {
  font-size: 12px !important;
}



.footer-linklist-one li,
.footer-linklist-one li a {
  font-size: 13px !important;
  line-height: 18px;
}



#main-footer .footer-linklist-one.footer-linklist-one--slim li,
#main-footer .footer-linklist-one.footer-linklist-one--slim li a {
  line-height: 18px;
}



.footer-additional-text {
  font-weight: 400 !important;
}



.footer-additional-text p + p {
  margin: 0;
}



.footer-additional-text p {
  margin-bottom: 3px;
  line-height: 16px;
}



/* Back to top: prevent footer overlap on mobile */
.back-to-top--mobile {
  position: relative;
  z-index: 2;
}



.newsletter .footer-newsletter-text {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  margin-top: 8px;
  margin-bottom: 0;
}



.capsule-footer#main-footer .connect {
  align-items: baseline;
}



@media screen and (max-width: 1280px) {
  .capsule-footer#main-footer .connect {
    display: flex;
    flex-direction: row;
    text-align: left;
  }

}



@media (max-width: 767px) {
  /* Trim brand tracking on mobile so long names (LOVESHACKFANCY) stay one line down to 320px */
  .product-card-details .brand {
    letter-spacing: 0.5px;
  }

  .carousel__text,
  .what-to-wear-gallery-block img,
  .what-to-wear-product img {
    height: auto;
  }

  .design_column:first-child {
    order: 1;
  }

  .design_column:nth-child(2) {
    order: 3;
  }

  .design_column:nth-child(3) {
    order: 2;
  }

  .design_column:nth-child(4) {
    order: 4;
  }

  #hubspot-messages-iframe-container.widget-align-right {
    right: 0 !important;
    margin-bottom: 60px;
  }

  #ls-form,
  .template-index #ls-form {
    background: #fff !important;
  }

  .what-to-wear-heading {
    font-size: 26px !important;
    padding-top: 0;
    margin-top: 0;
    line-height: 31px;
  }

  .template-index h2 {
    font-size: 30px !important;
    padding-top: 5px;
    margin-bottom: 18px !important;
  }

  /* Exception: what-to-wear subtitle sits flush under the title */
  .template-index .what-to-wear-title {
    margin-bottom: 0 !important;
  }

  .content-outer-wrap,
  .featured-collections .wrap.wrap--4,
  .image-wrap,
  .what-to-wear-blocks .what-to-wear-gallery-block:nth-child(2) {
    display: none;
  }

  .content-outer-wrap.content_mobile_view,
  .image-wrap.image_mobile_view,
  .image-wrap.slideshow__image-wrap,
  .template-cart .image-wrap {
    display: block;
  }

  .content-outer-wrap.content_mobile_view {
    position: absolute;
  }

  .slide .content .title,
  .slideshow--loaded .slide.active .title {
    font-size: var(--slide-title-size, 30px) !important;
  }

  .slide .content .tagline,
  .slideshow--loaded .slide.active .tagline {
    font-size: var(--slide-sub-size, 15px);
    margin-top: 0;
  }

  .slide .content .call-to-action {
    padding: 10px 18px;
    margin-top: 0;
  }

  .featured-collections .collection-wrap {
    width: 47%;
    margin-bottom: 20px;
  }

  .featured-collections .collection {
    height: auto;
  }

  .featured-collections .wrap {
    flex-wrap: wrap;
  }

  .collection-slide h3,
  .section-title {
    font-size: 28px;
  }

  .capsule-footer#main-footer .connect {
    text-align: left;
    flex-direction: column;
    justify-content: center;
  }

  .product-card-interaction {
    margin-bottom: 0;
    display: block;
  }

  .product-card-overlay {
    display: none !important;
  }

  .product-inner:hover figure img:first-of-type,
  .product-card-figure:hover img:first-of-type {
    display: block !important;
    opacity: 1 !important;
  }

  .product-inner:hover figure img:last-of-type,
  .product-card-figure:hover img:last-of-type {
    display: none !important;
    opacity: 0 !important;
  }

  .product-inner {
    padding: 0 16px;
  }

  .splide__slide .product-inner {
    padding: 0;
  }

  .template-index .splide__slide .product {
    margin-bottom: 0;
  }

  .feat-collection-heading-wrapper {
    margin-top: 40px;
  }

  .what-to-wear-product-block {
    width: calc(50% - 10px);
  }

  .what-to-wear-gallery-block {
    width: 100%;
  }

  .collection-link {
    position: relative;
    display: block !important;
  }

  .mobile-slider .collection-slide-btn-wrap {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
    margin-top: -25px;
  }

  .mobile-slider .collection-slide .collection-btn-label {
    height: 50px;
    font-size: 13px;
  }

  .featured-collections {
    padding-bottom: 25px !important;
  }

  .featured-collections .mobile-slider .splide__track {
    padding-bottom: 0;
  }

  /* Recently viewed: 2x2 grid on mobile */
  #recently-viewed-list.product-list {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100% !important;
  }

  #recently-viewed-list .product {
    width: calc(50% - 7.5px) !important;
    min-width: auto !important;
    margin-bottom: 20px;
  }
}

/* --- Store services banner + featured shops (home/collection) --- */



/*  SERVICES BANNER */
.services-banner__container {
  display: flex;
  align-items: stretch;
  padding: 70px 40px;
  gap: 90px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}



@media (max-width: 1024px) {
  .services-banner__container {
    flex-direction: column;
    padding: 40px 20px;
    gap: 30px;
  }
}



.services-banner__media {
  flex: 0 0 50%;
  max-width: 50%;
  overflow: hidden;
  max-height: 400px;
}



.services-banner__media img,
.services-banner__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: 600px;
}



@media (max-width: 1024px) {
  .services-banner__media {
    flex: none;
    max-width: 100%;
  }
}



.services-banner__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}



.services-banner__title {
  font-family: 'Libre Bodoni', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 40px;
  text-transform: uppercase;
}



.services-banner__address {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  margin: 0 0 14px;
}



.services-banner__hours {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 30px;
}



.services-banner__hours-row {
  display: flex;
  gap: 10px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
}



.services-banner__hours-days {
  min-width: 160px;
}



.services-banner__subtitle {
  font-family: 'Libre Bodoni', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 40px;
  text-transform: uppercase;
}



.services-banner__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}



.services-banner__list-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 25px;
  text-transform: uppercase;
}



.services-banner__list-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* =============================================================================
   Blog system — trend report, editorial layouts, authors (ported from v17)
   ============================================================================= */


.article-date{
  display:none;
}



/* H1 inherits collection/trend-report styling via .page-title .label */
.sitemap-page .page-title {
  margin-bottom: 40px;
}



.article-meta > div:nth-child(2):before,
.article-meta > div:nth-child(3):before,
.main-header nav,
.main-header nav.bordered {
  border: none !important;
}



.article-content > *,
.collection_featured_image img {
  max-width: 100%;
}



.trend-home-heading {
  margin-bottom: 0px;
}



.author-name {
  font-size: 12px;
  line-height: 18px !important;
  font-weight: 400;
}


.template-index .author-name {
  display: none;
}



.author-name a {
  text-decoration: underline !important;
}



@media (min-width: 768px) and (max-width: 991px) {
  .section-collection-designers .rte {
    column-count: 3 !important;
  }

  .blog-sidebar-active .article-meta {
    align-items: flex-start;
  }

  .blog-sidebar-active .article-author {
    display: flex;
  }

  .blog-article .article-title {
    text-align: left;
  }

  .trend-report {
    margin: 0 auto;
  }
}



.cap-author-article-image + div h3,
.cap-author-article-image ~ h3 {
  margin-bottom: 3px;
}



.author-article-name {
  font-size: 12px;
}



.shopify-section--blog-posts,
.shopify-section--collections-list {
  background: #f6f6f6;
  overflow: visible;
}



.blog-article .article-content h2,
.blog-article .article-content h3 {
  font-family: 'Libre Bodoni', serif;
  font-size: 25px;
  font-weight: 400;
  text-transform: uppercase;
  font-style: normal;
  margin: 0;
  color: #000;
}



.article-author,
.article-meta > div {
  padding-bottom: 0;
}



.blog-article .article-title {
  color: #000;
  font-family: 'Libre Bodoni', serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 35px;
  text-transform: uppercase;
  margin-bottom: 0 !important;
}



.blog-article .article-content h2 {
  line-height: 25px;
  padding-bottom: 24px;
}



.blog-article .article-content h3 {
  line-height: 40px;
  padding-bottom: 12px;
}



.article-rte ul li,
.blog-article .article-content p,
.trend-report__content ul li {
  color: #000;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
}



.blog-article .article-content .rte img {
  max-width: 100%;
  padding-bottom: 0;
  height: 200px !important;
  width: 100% !important;
  object-fit: contain !important;
  margin-bottom: 5px !important;
}



.blog-article .article {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  padding-bottom: 10px;
  flex-direction: column-reverse;
  width: 100%;
}



.blog-sidebar-active .page-title .label a {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase !important;
  font-size: 16px !important;
  line-height: 23px;
  font-weight: 400 !important;
}



.blog-sidebar-active .article-content,
.blog-sidebar-active .article-meta {
  width: 100%;
  padding-left: 0 !important;
}



.blog-sidebar-active .article-meta {
  border-top: 1px solid #bebebe;
  border-bottom: 1px solid #bebebe;
  padding: 30px 0;
  margin: 40px 0;
}



.article-author {
  position: relative;
  margin-bottom: 35px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}



.article-author-avatar {
  margin-bottom: 0;
}



.blog {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100px;
}



.blog-article {
  width: 60%;
  margin: 0 auto;
}



.blog-sidebar {
  padding-left: 0;
  width: 100%;
}



@media (max-width: 767px) {
  .blog-sidebar {
    padding-left: 20px;
    padding-right: 20px;
  }
}



.blog-sidebar-recentposts-posts {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-wrap: wrap;
}



.blog-sidebar-recentposts-post {
  width: 31.33%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
}



.blog-sidebar-recentposts-title {
  font-family: 'Libre Bodoni', serif !important;
  font-weight: 400 !important;
  font-size: 25px !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin-bottom: 40px !important;
}



.blog-sidebar-recentposts-post-title,
.rte a {
  font-size: 16px;
}



.blog-sidebar-recentposts-post-date,
.blog-sidebar-recentposts-post-title {
  font-family: 'Inter', sans-serif;
  line-height: 18px;
  letter-spacing: 0;
  text-align: left;
  font-style: normal;
  font-weight: 400;
}



.blog-sidebar-recentposts-post-date {
  font-size: 11px;
}



.blog-sidebar-recentposts-post-title .blog-image-wrapper .image-block img {
  width: 100%;
}



.blog-sidebar-recentposts-post-title .blog-image-wrapper {
  display: block;
}



.article-header .article-author,
.blog-article .article-content h3 br {
  display: none !important;
}



.trend-home-subheading {
  font-size: 15px;
  font-weight: 700;
  margin-top: 2px;
  line-height: 20px;
}



.article-author-writtenby {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}



.article-author-writtenby {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  line-height: 18px;
  color: #000 !important;
}



.article-author-name a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
  color: #000 !important;
}



@media (max-width: 767px) {
  .blog-sidebar-recentposts-post,
  .three_product_sec a {
    width: 100% !important;
  }

  .article-meta,
  .blog-article .article-title {
    text-align: left;
  }

  .article-meta {
    align-items: flex-start;
  }

  .three_product_sec a {
    margin: 0 auto;
  }

  .blog-article .article-content .rte img {
    margin-bottom: 21px !important;
    width: 100%;
    height: 200px;
  }

  .three_product_sec {
    flex-direction: column;
  }

  .blog-article {
    width: 100%;
  }

  .blog-sidebar-active .article-author {
    display: flex;
  }

  .blog-sidebar-active .article-meta {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .blog-sidebar-active .article-meta > div:nth-child(2),
  .blog-sidebar-active .article-meta > div:nth-child(3) {
    padding-top: 0;
    margin-top: 0;
  }

  .article-header .article-author {
    display: none !important;
  }

  .template-article .page-title {
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 0;
  }

  .breadcrumb-navigation {
    padding: 40px 20px 0 !important;
  }

  .blog-article .article-content h3 {
    line-height: 29px;
  }
}

/* =============================================================================
   v17 parity remainder — every remaining live rule from v17 custom.css.liquid
   + custom_style.css not already ported above. Known-dead Searchanise/
   MagicZoom rules excluded. Ported wholesale July 2, 2026 after per-feature
   quarry left gaps (selectors do not always carry feature names).
   ============================================================================= */

/* ==========================================================================
Fonts
========================================================================== */

@font-face {
  font-family: 'icons';
  src: url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/atlantic-icons.eot?v=10151495640851826001783013242?#iefix) format('embedded-opentype'),
  url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/atlantic-icons.woff?v=75156632991815219611783013242) format('woff'),
  url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/atlantic-icons.ttf?v=146308269215394365301783013242) format('truetype'),
  url(//www.capsuleshoponline.com/cdn/shop/t/130/assets/atlantic-icons.svg?v=39734#atlantic-icons) format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}




/* ==========================================================================
Variables
========================================================================== */


/* ==========================================================================
Base Styles & Overrides
========================================================================== */
h1,
h2,
h3 {
  font-family: 'Libre Bodoni', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  color: #222;
  font-weight: 400;
  line-height: 1;
}



h4,
h5,
h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
  color: #222;
}



h1 {
  font-size: 32px;
}




.featured-section {
  padding: 3rem 0 2rem;
  display: flex;
  align-items: flex-end;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 1rem;
}



@media (max-width: 800px) {
  .featured-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 0 5rem;
  }
}



.featured-section__wrapper {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  justify-content: center;
}



@media (max-width: 800px) {
  .featured-section__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}



.featured-section__link {
  display: flex;
  flex-direction: column;
  text-align: right;
  align-items: stretch;
}



.featured-section__figure {
  width: 100%;
  height: 230px;
  overflow: hidden;
}



.featured-section__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



@media (max-width: 800px) {
  .featured-section__img {
    object-position: top;
  }
}



.featured-section__text {
  margin: 0;
}



.featured-section__caption {
  text-align: center;
}



.featured-section__title {
  text-transform: uppercase;
}



.featured-section__item {
  padding: 0 15px;
}



.featured-section__caption {
  width: 100%;
}



.featured-section__figure-slide {
  overflow: hidden;
  position: relative;
}



.featured-section__link .featured-section__caption {
  display: flex;
  justify-content: center;
  margin-top: -30px;
  position: relative;
  z-index: 2;
}



.featured-section__link .featured-section__name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 230px;
  background: #fff;
  border: 2px solid #000;
  color: #000;
  padding: 0 20px;
  font-size: 15px;
  line-height: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
}



.product-inner {
  text-align: center;
}



.product-inner figure img:first-of-type {
  display: block;
}



.template-product .product-inner figure img:last-of-type {
  display: block;
}


.template-index .product-inner figure img:last-of-type {
  display: none;
}


.product-inner:hover figure img:first-of-type {
  display: none;
}



.product-inner:hover figure img:last-of-type {
  display: block;
}



.product figure>img {
  width: 100%;
}



.product figure>a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
}



@media (max-width: 800px) {
  .carousel__text {
    font-size: 13px !important;
    font-weight: 400;
    line-height: 15px;
    margin: 0 0 6px 0 !important;
    font-family: 'Inter', sans-serif;
  }
}



.carousel__text {
  font-size: 13px !important;
  font-weight: 400;
  line-height: 15px;
  margin: 0 0 6px 0 !important;
  font-family: 'Inter', sans-serif;
  padding:0 4px;
}



.feat-collection__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 800px;
  padding: 3rem 1rem;
  gap: 1rem;
}



@media (max-width: 800px) {
  .feat-collection__wrapper {
    justify-content: space-around;
    align-items: flex-start;
    padding: 2rem 1rem;
  }
}



@media (max-width: 600px) {
  .feat-collection__wrapper {
    padding: 2rem 1rem;
  }
}



.feat-collection__wrapper--row-reverse {
  flex-direction: row-reverse;
}



h2.feat-collection__title {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.04rem;
  text-transform: uppercase;
  max-width: 300px;
}



.feat-collection__img-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}



.feat-collection__img-wrapper:hover .feat-collection__img {
  transform: scale(1.05);
}



.feat-collection__figure {
  width: 100%;
}



.feat-collection__figure--01 {
  max-width: 300px;
  height: 420px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}



@media (max-width: 800px) {
  .feat-collection__figure--01 {
    margin-bottom: 2.5rem;
    padding-top: 30px;
    height: auto;
  }
}



.feat-collection__figure--02 {
  max-width: 300px;
  height: 550px;
}



@media (max-width: 800px) {
  .feat-collection__figure--02 {
    height: auto;
  }
}



.feat-collection__img {
  transition: transform 200ms;
  width: 100%;
  height: 100%;
  object-fit: cover;
}



@media (max-width: 800px) {
  .feat-collection__img {
    object-fit: contain;
  }
}



#recently-viewed-products {
  margin: auto;
  float: none !important;
}


#recently-viewed-list .product{
  text-align: center !important;
}



.product .title,
.quick-shop-content .title,
#product-area .title,
.mobile-product-title .title {
  font-size: 13px;
  margin: 0px;
}



@media only screen and (max-width: 799px) {
  .product-list {
    display: block;
    width: 80%;
    margin: 0 auto 35px;
    padding-left: 0px;
    text-align: center;
  }
  
  #recently-viewed-products {
    width: 100% !important;
  }
}



._ks_text {
  font-size: 12px !important;
}



.product .title {
  font-size: 13px !important;
  text-transform: capitalize !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
}



.h3 {
  font-family: inherit !important;
  color: #222;
  font-weight: 600;
}



@media screen and (max-width: 800px) {
  .template-index h2 {
    font-size: 28px;
    padding-top: 5px;
  }
}


@media screen and (max-width: 800px) {
  .template-index p {
    font-size: 14px !important;
    line-height: 1.4;
  }
}


.action-button {
  background-color: #000000;
}



.flickity-page-dots {
  display: none;
}



.original {
  text-decoration: line-through;
}



.page-title .label,
.collection-title .label,
.template-collection .page-title.collection-title .label {
  font-family: 'Libre Bodoni', serif;
  color: #222;
  font-weight: 400;
  font-size: 30px;
}



.disclosure__toggle {
  color: #ffffff;
}



.disclosure__toggle:after {
  background-color: #ffffff;
}




/* Product Detail Page */

.product-gallery--media-thumbnail[data-product-gallery-selected=true]:after {
  display: none;
}



summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  line-height: 1;
  transition: color .2s;
}



.product-details__desc-wrapper {
  padding-bottom: 20px;
}



.product-details__rec-title, .product-details__desc-title {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .01em;
  display: inline-flex;
  padding-bottom: 20px;
}



.product-details__sizefit-wrapper {
  text-transform: uppercase;
  font-weight: 600;
}



.product-details__desc-content ul {
  list-style: circle;
  padding-left: 1rem;
}



.product__vendor {
  font-family: 'Libre Bodoni', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  color: #222;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  font-size: 1.17em;
}



.product__title {
  font-size: 1rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir, 'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica, 'Helvetica Neue', sans-serif;
  font-weight: 500;
  margin-top: 1rem;
}



.product-form .product-submit {
  font-weight: 700;
}



.option-name {
  font-weight: 500;
}



.product-area__container {
  display: grid;
  align-items: flex-start;
  grid-template-columns: .5fr 1.5fr 1fr;
  gap: 1.5rem;
  margin-bottom: 0;
}



.premium-pdp .product-details-wrapper {
  width: 100%;
  padding: 0;
}



.premium-pdp .product-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}



.premium-pdp .product-gallery {
  width: 100%;
  grid-template-columns: 15% 85%;
  grid-template-rows: auto auto;
  display: block;
}

/* Quickshop modal: premium typography/blocks apply, but the 100%-width
   rules above assume the PDP page grid (product-area__container), which
   quickshop doesn't render — restore the stock 55/45 float columns
   inside the modal (theme.css values). Mobile keeps stock 100% stacking. */
@media (min-width: 720px) {
  .quickshop .premium-pdp .product-gallery {
    float: left;
    width: 55%;
  }
  .quickshop .premium-pdp .product-details-wrapper {
    float: left;
    width: 45%;
    padding: 0 0 0 50px;
  }
}



/* Quickshop overlay sits flush to the image bottom (was 14px gap). */
.product-card-overlay {
    padding-top: 0;
}



.section-title {
    font-family: 'Libre Bodoni', serif;
    font-style: normal;
    font-weight: 400;
    padding: 50px 0 0;
    margin: 0 0 40px;
    font-size: 30px;
    letter-spacing: .1em;
    color: #1e1e1e;
    text-align: center;
    text-transform: uppercase;
}



.template-cart .table td.product-item .label.title a {
    color: inherit;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    margin-top: 1rem;
    font-weight: 400;
}

/* v17 theme.css pairs this selector with height:auto; v19 stock dropped it
   (stock rimg carried no width/height attrs). With the CLS attrs restored
   (5e6e75fa) the height="160" attribute wins without this, squashing the
   thumb to 99x160 and adding ~37px per cart row. */
.template-cart .table td.product-image .image-wrap .image img {
  height: auto;
}



.product__description {
    margin-top: 0px;
}



.product__app {
    margin-top: 0px;
}


.share__icons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.3rem;
}


.product-card-details .title {
  font-weight: 400;
}


.product .brand a {
  color: #000000 !important;
}



/* Designers List Page */
.collections > ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0;
}


.collections > ul > li {
  flex: 0 0 25%;
  box-sizing: border-box;
  padding: 10px;
}


.collections ul ul {
  list-style-type: none;
  padding: 0;
}


.collections .alphabet {
  font-weight: bold;
}


@media (max-width: 800px) {
    .collections > ul > li {
        flex: 0 0 50%;
    }
}




.page-title {
  padding: 0;
  margin-top: 3rem;
  margin-bottom: 1rem;
}



/* How to wear styles */
.how-to-wear {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}



@media screen and (max-width: 1024px) {
  .product-area__container {
      display: flex;
      flex-direction: column;
  }
  .how-to-wear {
    order: 3;
  }

  .how-to-wear__item-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

}



.how-to-wear__item-title {
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  padding-bottom: 5px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.3;
}



/* Custom cart css */
.template-cart .table td.product-item .label.vendor {
  margin-bottom: 3px;
  font-size: 10px;
  color: #000000;
  word-break: break-word;
}



.cart-item__product-options {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  margin: 0;
  font-size: 12px;
  color: #000000;
}



/* Product Page Custom Text - Shipping Policy */
.rte a, .pxs-newsletter-text a {
    color: #14259a;
}




/* Newsletter signup pages */
.newsletter-pages .column-container {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  background: #F9F9F9;
  margin-top: 70px;
  margin-bottom: 80px;
}



.newsletter-pages .left-column,
.newsletter-pages .right-column {
  width: 50%;
  margin: auto 0;
}



.newsletter-pages .right-column {
  width: 60%;
}



.newsletter-pages .left-column {
  padding-left: 80px;
}



.newsletter-pages .sign-up .left-column {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  background-color: #fff;
}



.newsletter-pages .sign-up .right-column img {
  width: 100%;
}



.newsletter-pages .left-column .border-box {
  padding: 50%;
  box-sizing: border-box;
  position: relative;
}



.newsletter-pages .left-column .border-box:before {
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 5px solid #ffffff;
  box-sizing: border-box;
  position: absolute;
  pointer-events: none;
}



.newsletter-pages .left-column .border-box .vert-center {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  transform: translate(0, -50%);
}



.newsletter-pages .column-container h2 {
  font-family: 'Inter', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
  font-size: 16px;
  line-height: 1;
  margin-bottom: 10px;
}



.newsletter-pages .sign-up .column-container h3 {
  width: 250px;
  margin: 0 auto;
  max-width: 100%;
}



.newsletter-pages .thank-you .column-container h3 {
  width: 270px;
  margin: 0 auto;
  max-width: 100%;
}



.newsletter-pages .column-container h3 {
  font-weight: normal;
  text-transform: uppercase;
  text-align: center;
  font-size: 30px;
  line-height: 1;
}



.newsletter-pages .column-container h3 strong {
  font-family: 'Libre Bodoni', serif;
}



.newsletter-pages .form-wrap {
  margin: 20px 0;
}



.newsletter-pages .thank-you .right-column {
  display: none;
}



.newsletter-pages .left-column {
  max-width: 100%;
  width: 450px;
  padding-left: 0;
  margin-right: 54px;
}



.newsletter-pages .thank-you .left-column {
  margin: auto;
}



.newsletter-pages .thank-you a {
  text-transform: uppercase;
  text-align: center;
  margin: 0 auto;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 0px;
  border-bottom: 1px solid #000;
  display: block;
  width: 118px;
}



@media screen and (max-width: 767px) {
  .newsletter-pages .column-container {
    flex-wrap: wrap;
  }

  .newsletter-pages .left-column,
  .newsletter-pages .right-column {
    width: 100%;
  }

  .newsletter-pages .right-column {
    width: 100%;
  }

  .newsletter-pages .left-column {
    padding-right: 0px;
  }

  .newsletter-pages .sign-up .left-column {
    padding-right: 0px;
    margin: auto;
    right: 50%;
    transform: translate(50%, -50%);
  }

  .newsletter-pages .sign-up .right-column {
    position: static;
    width: 100%;
    transform: none;
  }

  .newsletter-pages .sign-up .left-column {
    position: static;
    width: 100%;
    transform: none;
  }

  .newsletter-pages .sign-up .column-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
  }
}



.rte, .pxs-newsletter-text {
    font-size: 14px;
}



/* Instagram Feed */
.featured-section__name {
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  margin-top: .5rem;
  text-transform: uppercase;
}



#insta-feed h2 {
    display: block;
    text-align: center;
    font-family: 'Libre Bodoni', serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 40px;
    text-transform: uppercase;
    margin-bottom: 10px;
}



#insta-feed h2::before {
    content: "FOLLOW US AND GET INSPIRED";
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 5px;
}



#insta-feed {
  padding: 0 15px;
  margin: 50px 0;
}




.block-heading {
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  text-align: left;
  margin-top: 20px;
  padding-left: 28px;
  padding-right: 28px;
  margin-bottom: -30px;
}


.block-heading-wrapper {
  width: 100%;
  flex-basis: 100%;
  text-align: center;
  margin-bottom: 1.5rem;
}


@media screen and (max-width: 800px) {
  .block-heading {
    font-size: 16px !important;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    text-align: left;
    margin-top: 20px;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: -30px;
  }
}



/* Mobile snap gallery — premium PDP only */
.mobile-snap-gallery {
  display: none;
}



@media (max-width: 767px) {
  .page-body-content:has(.premium-pdp) {
    padding-top: 0;
  }

  .content.content-area:has(.premium-pdp) {
    padding-left: 0;
    padding-right: 0;
  }

  .product-area.premium-pdp {
    padding-top: 0 !important;
  }

  .premium-pdp .product-details-wrapper,
  .premium-pdp .how-to-wear {
    padding-left: 15px;
    padding-right: 15px;
  }

  .premium-pdp .product-gallery--viewport,
  .premium-pdp .product-gallery--navigation {
    display: none !important;
  }

  /* Quick Shop has no mobile-snap gallery; keep its native gallery visible */
  .quickshop .premium-pdp .product-gallery--viewport,
  .quickshop .premium-pdp .product-gallery--navigation {
    display: block !important;
  }

  .premium-pdp .mobile-snap-gallery {
    display: block;
    position: relative;
    width: 100%;
  }

  .mobile-snap-gallery__track {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mobile-snap-gallery__track::-webkit-scrollbar {
    display: none;
  }

  .mobile-snap-gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .mobile-snap-gallery__slide img,
  .mobile-snap-gallery__slide video {
    width: 100%;
    height: auto;
    display: block;
  }

  .mobile-snap-gallery__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px 0 0;
  }

  .mobile-snap-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #000;
    opacity: 0.2;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 200ms;
  }

  .mobile-snap-gallery__dot.is-active {
    opacity: 1;
  }
}



/* Zoom modal */
.zoom-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
}



.zoom-modal--open {
  display: block;
}



.zoom-modal__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}



.zoom-modal__item {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}



.zoom-modal__item--active {
  display: flex;
}



.zoom-modal__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}



.zoom-modal__close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}



.zoom-modal__count {
  position: absolute;
  top: calc(22px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  letter-spacing: 0.08em;
  pointer-events: none;
  white-space: nowrap;
}



.zoom-modal__prev,
.zoom-modal__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(40, 40, 40, 0.75);
  border: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  width: 36px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
}



.zoom-modal__prev { left: 10px; }


.zoom-modal__next { right: 10px; }



.zoom-modal__prev:disabled,
.zoom-modal__next:disabled {
  opacity: 0;
  pointer-events: none;
}



.sharethis-link.sharethis-x svg {
  width: 20px;
  height: 20px;
}



html.kiwi-sizing-modal-visible #shopify-chat,
html.scroll-locked #shopify-chat,
html.live-search-visible #shopify-chat,
html.cs-filters-open #shopify-chat,
body:has(.zoom-modal--open) #shopify-chat {
  display: none !important;
}



/* ---- HTML sitemap page (sections/sitemap.liquid) ---- */
.sitemap-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px 50px;
}



.sitemap-page__top-links {
  list-style: none;
  margin: 0 0 50px;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  text-align: center;
}



.sitemap-page__top-links a {
  font-weight: 700;
  text-decoration: underline;
}



.sitemap-page__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}



.sitemap-page__column-heading {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
}



.sitemap-page__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}



.sitemap-page__list li {
  margin-bottom: 16px;
}



.sitemap-page__list a {
  text-decoration: underline;
}



@media (max-width: 800px) {
  .sitemap-page__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}



@media (max-width: 480px) {
  .sitemap-page__columns {
    grid-template-columns: 1fr;
  }
}



/* Product grid (collection + search): white lazy-load placeholder instead of grey pulse */
.product-card-figure img[data-rimg=lazy],
.product-card-figure img[data-rimg=loading] {
  background-color: #fff;
  animation: none;
}



/* PDP need-help section: no page container of its own — add mobile side
   gutter; scroll-margin offsets the sticky header for #need-help-contact
   anchor links (premium PDP "Text, call, email…" link). */
.template-product #need-help-contact {
  scroll-margin-top: 120px;
}



@media only screen and (max-width: 719px) {
  .template-product #need-help-contact {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.main-header__mini-cart-icon,
.tool-container {
  font-size: 0.825rem !important;
}



.section-collection-designers .text-content-wrap {
  max-width: 1180px !important;
}



.section-collection-designers .rte,
.section-collection-designers .rte .clearfix {
  column-count: 4;
  column-gap: 16%;
}



/* v17 used overflow-x: hidden here, but v19 stock sets body { position:
   absolute } (theme.css ~2857) and hidden turns body into its own scroll
   container — window.scrollY stays 0, breaking scroll listeners (header
   compress) and programmatic scrolling. clip clips without scrolling. */
body {
  overflow-x: clip;
}



.main-header--compress .ls-button-search .svg-icon,
.main-header--compress .ls-form-button-close .svg-icon,
.main-header--compress .ls-form-button-search .svg-icon,
.main-header--compress .ls-input,
.main-header--compress .main-header--tools-label,
.main-header--compress .main-header__mini-cart-icon,
.main-header--compress nav.full .nav-item > .label,
.main-header--compress nav.full .nav-item > details .label {
  color: var(--all-page-nav-color);
}



.main-header--compress .ls-input::-ms-input-placeholder,
.main-header--compress .ls-input::placeholder {
  color: var(--all-page-nav-color);
}



.main-header--compress #ls-form {
  border-bottom: 1px solid var(--all-page-nav-color);
}



.dropdown-wrap.primary .main-header__item .main-header__nav-link,
.main-header--compress .ls-label,
.main-header--compress .main-header nav.full .nav-item > .label,
.main-header--compress .main-header nav.full .nav-item > details .label,
.main-header--compress .main-header__mini-cart-icon,
.main-header--compress .tool-container a,
.main-header--compress svg {
  color: #000;
}




.main-header-wrap .main-header {
  background: transparent;
}



.main-header nav.full .nav-item.dropdown:hover,
.main-header nav.full .nav-item.has-mega-nav.active,
.main-header nav.full .nav-item > details[open] {
  background: 0 0 !important;
}



.template-index .main-header-wrap {
  z-index: 5000;
  width: 100%;
  top: 0;
}



#main-header {
  transition: background-color 0.3s ease, color 0.3s ease;
}



.template-index .main-header-wrap.main-header--compress {
  padding-top: 0;
}



.fixed-menu {
  background: rgba(252, 252, 252, 0.5);
}



.main-header--tools-group {
  justify-content: flex-end;
}



.live-search,
.pitem {
  margin: 0 !important;
}



.main-header--centered .main-header--tools,
.main-header--expanded .main-header--tools,
.product__title,
.rte ul li p,
h3 {
  margin-bottom: 0 !important;
}



.main-header nav.full .nav-item > .label,
.main-header nav.full .nav-item > details .label {
  padding: 0 !important;
  font-size: 12px;
}



.store-title {
  margin: 10px 0 12px;
}



.ls-input {
  padding-right: 6px;
  padding-left: 6px;
}



@media (min-width: 1024.5px) {
  .main-header--centered .main-header--tools,
  .main-header--expanded .main-header--tools {
    margin-top: 0;
    position: absolute;
    right: 5px;
    top: 40%;
    width: auto;
  }
}



@media (min-width: 720px) {
  #ls-form {
    position: relative !important;
    border-bottom: 1px solid #1e1e1e !important;
  }

  html:not(.header-layout-minimal) .live-search-hidden .ls-form {
    width: 0;
    padding: 0;
  }

  html:not(.header-layout-minimal) .ls-form {
    padding: 0;
    top: 0;
    transform: none;
  }
}



.main-header--compress {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  position: sticky;
  width: 100%;
  top: 0;
}



.tool-container {
  align-items: center;
}



.banner-desktop,
.banner-mobile,
.extra-imag img {
  width: 100% !important;
  max-width: 100% !important;
}



.js body:not(.user-is-tabbing) a:focus,
a:focus {
  outline: 0 !important;
  border: none !important;
}



:focus-within {
  outline: 0 !important;
}



.action-links {
  border: none;
}



.mobile-dropdown .list.primary {
  padding-bottom: 30px;
}



.mobile-dropdown.active {
  z-index: 11111111111111;
}



@media (min-width: 1025px) and (max-width: 1200px) {
  .main-header nav.full .nav-item > .label,
  .main-header nav.full .nav-item > details .label {
    padding: 20px 17px !important;
  }
}



.collection-title-header {
  width: 100% !important;
  padding: 0 !important;
}



.login-register-div {
  display: flex;
  width: 100%;
  margin: 50px 0;
}



.customer .account-form,
.instafeed-new-layout-container {
  width: 100% !important;
}



.login_form_wrapper {
  width: 48%;
  margin-right: 30px;
}



.register_form_wrapper {
  width: 48%;
  padding-left: 30px;
  position: relative;
}



.register_form_wrapper:before {
  content: "";
  width: 2px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
}



.login-register-div .page-title {
  text-align: left !important;
  margin-top: 0;
}



.login .breadcrumb-navigation {
  padding: 40px 0 0 !important;
  text-align: left !important;
}



.log-btn-area {
  display: flex;
  align-items: baseline;
  margin: 30px 0;
}



.customer .account-form .submit-button {
  margin-top: 0 !important;
}



.redirect_to_login {
  margin: 40px 0;
  text-align: center;
}



.redirect_to_login a {
  text-decoration: underline;
}



.customer .account-form .field-wrap .field:focus-within {
  border: 2px solid #ebebeb !important;
}



#label-email-c0e95431-21df-40cd-beac-f12fb5de66d9,
.hs-main-font-element,
.submitted-message {
  color: #fff !important;
}



.collection_alphabet {
  margin-bottom: 10px;
}



.collection_alphabet span {
  padding-bottom: 10px;
  position: relative;
  font-size: 28px;
  font-weight: 400;
  font-family: 'Libre Bodoni', serif;
}



.collection_alphabet span::after {
  content: "";
  width: 100px;
  height: 1px;
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-bottom: 10px;
}



.pitem a {
  color: #000;
  font-size: 14px;
  text-transform: uppercase;
}



.shopify-challenge__container .g-recaptcha {
  margin: 30px 0;
}



.shopify-challenge__button {
  margin-bottom: 30px !important;
}



.product-area {
  padding: 60px 0 !important;
}



#view-collection-button {
  display: inline-block;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #fff;
  background-color: #2c2c2c;
  font-style: normal;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  position: relative;
  cursor: pointer;
  font-weight: 400;
  padding: 10px 18px;
  text-align: center;
  border: 1px solid #2c2c2c;
  border-radius: 0;
  transition:
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}



@media (min-width: 1025px) {
  .newsletter-pages .right-column {
    width: 50% !important;
  }

  .newsletter-pages .left-column {
    width: 50% !important;
    margin-right: 0 !important;
  }

  .newsletter-pages .sign-up .left-column {
    position: relative !important;
    top: 0 !important;
    right: 0;
    transform: none !important;
    background-color: transparent !important;
  }

  .newsletter-pages .left-column .border-box:after,
  .newsletter-pages .left-column .border-box:before {
    display: none;
  }

  .newsletter-pages .column-container h3 {
    font-weight: 600 !important;
    font-size: 30px;
    line-height: 34px !important;
    margin: 20px auto !important;
  }
}



@media (max-width: 1024.5px) {
  .main-header--expanded .store-title.store-title--hidden-on-mobile,
  .main-header--normal .store-title.store-title--hidden-on-mobile,
  .newsletter-pages .left-column .border-box:before,
  .right-column,
  nav.bordered {
    display: none;
  }

  .main-header--expanded .store-title.store-title--hidden-on-desktop,
  .main-header--normal .store-title.store-title--hidden-on-desktop,
  .main-header--tools .menu {
    display: block;
  }

  .main-header--expanded .main-header--tools:after,
  .main-header--normal .main-header--tools:after {
    position: absolute;
    right: -15px;
    bottom: -14px;
    width: 100vw;
    height: 1px;
    background: #ebebeb;
    content: "";
  }

  .main-header--tools-group {
    justify-content: space-between;
  }

  .main-header--centered .main-header--tools,
  .main-header--expanded .main-header--tools {
    margin-top: 0;
  }

  .product-area {
    padding: 15px 0 !important;
  }

  .newsletter-pages .sign-up .left-column {
    left: 0;
    position: relative !important;
    top: 0 !important;
    right: 0;
    transform: none !important;
    background-color: transparent !important;
  }

  .newsletter-pages .left-column {
    width: 100% !important;
    margin-right: 0 !important;
  }

  .newsletter-pages .column-container {
    padding: 20px 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}



.newsletter-pages .sign-up .column-container h3 {
  font-family: 'Libre Bodoni', serif;
  font-weight: 400 !important;
}



.product-details {
  gap: 0 !important;
}



.newsletter-pages .sign-up .left-column {
  background: url(/cdn/shop/t/95/assets/20240416_SignUp_BackgroundPanel.jpg?v=1716445857)
    center/100% no-repeat;
  height: 100%;
  background-color: transparent !important;
}



.newsletter-pages .left-column .border-box .vert-center {
  top: 56% !important;
}



.newsletter-pages .column-container {
  background: 0 0 !important;
  height: 650px;
  overflow: hidden;
}



.newsletter-pages .right-column {
  height: 100%;
}



.newsletter-pages .sign-up .right-column img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.product-details .shopify-product-form {
  padding-top: 15px;
}



.product-card-details .title {
  line-height: 15px; /* match Editor's Picks slider .carousel__text */
  margin: 0 0 6px; /* match slider title spacing; replaces removed fixed heights/min-height */
}



/* Brand name must not break mid-word. Atlantic's base sets word-break: break-word,
   which orphans a single letter ("LOVESHACKFANC / Y") when a card column gets
   narrow. Keep it on one line; trim the tracking on mobile so long brands still fit. */
.product-card-details .brand {
  word-break: normal;
  overflow-wrap: normal;
}




@media (min-width: 1360px) {
  .newsletter-pages .column-container {
    height: 800px !important;
  }
}



.product-recommendations .product-inner:hover figure img:first-of-type {
  display: block !important;
}



.template-product .how-to-wear__title,
.template-product .product-recommendations .section-title,
.template-product .recently-viewed .section-title,
.template-product #need-help-contact .section-title {
  font-size: 24px;
  line-height: 25px;
  font-weight: 400;
  margin-bottom: 40px !important;
}



/* PDP: remove extra product-inner padding on recs */
.template-product .product-recommendations .product-inner {
  padding: 0;
}



/* How to Wear: gap between grid items */
.how-to-wear__item-wrapper {
  gap: 15px;
}



/* Quickshop: smaller How to Wear heading */
.quickshop-content .how-to-wear__title {
  font-size: 18px;
  margin-bottom: 20px;
}



/* Quickshop: wider modal and premium layout columns */
.quickshop-content {
  max-width: 1200px;
}


.quickshop-content .premium-pdp .product-area__container {
  grid-template-columns: minmax(0, 660px) minmax(0, 450px);
  column-gap: 40px;
}



/* Quickshop: visit product page callout */
.quickshop .product-callout {
  letter-spacing: normal;
  font-family: Inter;
  font-weight: 400;
  text-transform: capitalize;
}



/* PDP: Swym wishlist button styling */
.swym-wishlist-cta,
.swym-fave-count {
  font-size: 13px !important;
  height: auto !important;
  min-height: auto !important;
}



.swym-wishlist-cta::after {
  font-size: 13px !important;
  height: auto !important;
  min-height: auto !important;
}



/* PDP: item title styling */
.template-product .how-to-wear__item-title {
  font-size: 13px;
  line-height: 15px;
  text-transform: capitalize;
}



.template-product .product-recommendations .product-list .title {
  font-size: 13px !important;
  line-height: 15px;
  text-transform: capitalize !important;
  letter-spacing: normal;
  margin-bottom: 6px;
  height: auto;
}



@media (max-width: 1024.5px) {
  .newsletter-pages .column-container {
    height: auto;
  }

  .newsletter-pages .sign-up .left-column {
    padding: 25px 0;
  }

  #ls-button-search svg,
  .mini-cart-wrap svg {
    stroke: #000 !important;
  }

  .account-options label {
    color: #000 !important;
  }

  .main-header--tools .account-options,
  .main-header--tools .menu,
  .main-header--tools .mini-cart-wrap,
  .main-header--tools .search {
    margin: 0 !important;
  }

  .main-header--tools .mini-cart-wrap {
    padding: 0;
  }

  .main-header--tools-label {
    margin-right: 0 !important;
  }
}



.social-media_wrapper {
  display: flex;
  align-items: center;
  margin: 10px 0;
}



.social-media_wrapper a {
  margin-right: 8px;
}



.social-media_wrapper a img {
  width: 80%;
}



.swym-button-bar {
  margin: 10px 0 !important;
}



.swym-btn-container[data-position="default"] .swym-add-to-wishlist.swym-iconbtnlink {
  padding: 0 !important;
}



.swym-btn-container[data-position="default"] .swym-add-to-wishlist.swym-iconbtnlink:after {
  width: 20px !important;
}



h4.feat-collection__title {
  display: block;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}



.feat-collection__wrapper .show_desktop {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}



.feat-collection__wrapper--row-reverse .show_desktop {
  flex-direction: row-reverse;
}



@media screen and (max-width: 767px) {
  .feat-collection__wrapper,
  .feat-collection__wrapper--row-reverse {
    flex-direction: column;
  }

  .feat-collection__wrapper .show_desktop .feat-collection__subtitle,
  .feat-collection__wrapper .show_desktop h2.feat-collection__title,
  .feat-collection__wrapper .show_desktop h4.feat-collection__title {
    display: none;
  }

  .feat-collection__wrapper .show_mobile {
    display: block;
  }
}



@media (min-width: 767px) {
  .newsletter-pages .column-container {
    padding: 0 !important;
  }
}



.hs-form-f9beb7cb-a355-4f9a-8eb3-35c7be24b44a_3c9e030e-d4c2-491c-bf20-b6c4a9231a56.submitted-message {
  font-size: 2px;
  color: #000;
  text-align: center !important;
}



.shipping-returns {
  margin-top: 18px;
}



#thank-you-message {
  text-align: center;
  margin-top: 20px;
}



.subscribed-thankyou {
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  text-align: center;
}



.menu_item a,
.size-message-text {
  font-size: 14px;
}



.size-messaging {
  font-size: 14px;
  font-weight: 700;
}



.template-contact .text-content-wrap,
.template-page .text-content-wrap {
  max-width: 90% !important;
}



.menu_item,
.rte li {
  margin: 0;
}



.menu_item a {
  color: #000;
  text-transform: uppercase;
  line-height: 22px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
}



@media (min-width: 1025px) and (max-width: 1199px) {
  html:not(.header-layout-minimal) .ls-form {
    width: 138px;
  }
}



.product-label {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 0;
  display: inline-block;
  max-width: fit-content;
  margin-top: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Unified collection button label */
.featured-collections .collection .collection-btn-link {
  position: absolute;
  top: auto !important;
  right: auto !important;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  z-index: 2001;
  text-decoration: none !important;
  background-color: transparent !important;
  background-image: none !important;
  width: auto;
  height: auto;
  display: inline-flex;
}



.collection-btn-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 30px;
  background: #fff;
  border: 2px solid #000;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 15px;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  width: 230px;
}



.product-label--padded {
  padding: 0.5rem 1rem;
  text-align: center;
  width: auto;
}



@media (min-width: 768px) and (max-width: 1024px) {
  #ls-form,
  .template-index #ls-form {
    margin-top: 14px;
  }
}



.featured-collections .wrap {
  display: flex;
  flex-wrap: inherit;
  justify-content: space-between;
  font-size: 0;
  column-gap: 22px;
}



/* Mobile: hide grid, show slider */
.featured-collections .mobile-slider.only-mobile {
  display: none;
}



@media (max-width: 767px) {
  .featured-collections .wrap {
    display: none !important;
  }

  .featured-collections .mobile-slider.only-mobile {
    display: block;
    margin-top: 40px;
  }
}



.featured-collections .collection-wrap {
  aspect-ratio: 5 / 6;
  overflow: visible;
}



.featured-collections .collection {
  height: 100%;
  padding-bottom: 0;
  position: relative;
  overflow: visible;
}



.section-title {
  font-size: 36px;
  letter-spacing: 0;
  margin: 10px;
}



.featured-collections .section-title {
  margin-bottom: 50px;
}



.featured-collections .collection-wrap:hover .collection-wrap-image {
  transform: none !important;
}



.featured-collections {
  padding-bottom: 70px !important;
  position: relative;
  z-index: 1;
  margin-top: 0;
}



.collection-slide .collection-image {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
}



.collection-slide .collection-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}



.mobile-slider .collection-slide h3 {
  font-family: 'Inter', sans-serif;
  background: rgba(252, 252, 252, 0.5);
  width: 250px !important;
  height: 85px;
  position: absolute;
  z-index: 111;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  right: inherit;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}



.mobile-slider .collection-link {
  position: relative;
}



.lookbok-button-wrapper {
  margin-top: 10px;
}



.feat-collection__wrapper {
  display: flex;
  flex-wrap: wrap;
}



.block-heading {
  margin-bottom: -22px;
}



.feat-collection-heading-wrapper h2 {
  font-weight: 400;
  font-size: 36px;
  line-height: 28px;
  letter-spacing: 0;
}



/* The card title is an <h2>, so the mobile section-heading rule
   `.template-index h2 { margin-bottom:18px !important; padding-top:5px }`
   leaks onto it. Restore the collection card spacing. */
.product-slider .product-card-details .title {
  margin-bottom: 6px !important;
  padding-top: 0;
}



@media (min-width: 768px) {
  .collection-slide {
    display: none !important;
  }

  .feat-collection-heading-wrapper h2 {
    line-height: 36px !important;
  }
}



@media (max-width: 300px) {
  .featured-collections .collection-wrap {
    width: 46%;
    margin-bottom: 65px;
  }

  .featured-collections .collection-btn-label {
    height: 45px;
    font-size: 11px;
    padding: 0 15px;
  }
}



.b_img {
  width: 49%;
}



.three_product_sec {
  margin-bottom: 30px;
  align-items: flex-start;
  display: flex;
}



.three_product_sec img {
  height: 200px;
  overflow: hidden;
  width: 100%;
  object-fit: contain;
}



.three_product_sec a {
  width: 33.33%;
}



.three_product_sec h4 {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 0;
  text-align: center;
}



.three_product_sec p {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-style: normal;
  font-size: 12px !important;
  line-height: 15px !important;
  letter-spacing: 0;
  text-align: center;
  margin: 0;
}



.blo-title {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px !important;
  line-height: 18px !important;
}



.page-title {
  margin-top: 2rem !important;
}



.page-title .label {
  text-transform: uppercase;
}



.rte a {
  color: #000;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
  cursor: pointer;
  text-decoration: underline;
}



.rte h4 {
  font-family: 'Libre Bodoni', serif;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 28px;
  margin-top: 5px;
}



.section-product a {
  text-decoration: none !important;
}



.page-body-content {
  min-height: 65vh;
}



.carousel__text,
.collections .collection .label,
.featured-collections .collection .label,
body {
  font-family: 'Inter', sans-serif !important;
}



/* =============================================================================
   PREMIUM PDP — product.premium-pdp template
   Scoped to .premium-pdp (applied by section schema class)
   ============================================================================= */

.premium-pdp {
  font-family: 'Inter', sans-serif;
}


.premium-pdp .premium-breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}


.premium-pdp .premium-breadcrumbs__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


@media (max-width: 768px) {
  .premium-pdp .premium-breadcrumbs {
    font-size: 12px;
    line-height: 16px;
  }
}



/* --- Label badge --- */
.premium-pdp .premium-label {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: uppercase;
  height: 20px;
  padding: 5px 10px;
  margin-bottom: 12px;
  align-self: flex-start;
  border: 1.5px solid currentColor;
}


.premium-pdp .premium-label--padded {
  border: none;
  padding: 0px 18px 0px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%);
}


.premium-pdp .premium-label--anniversary {
  background-color: #EBB942;
  color: #000;
}



/* --- Product title --- */
.premium-pdp .premium-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  color: #000;
  margin: 0 0 8px;
  line-height: 15px;
}



/* --- Price --- */
.premium-pdp .premium-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}


.premium-pdp .premium-price__sale {
  font-size: 13px;
  font-weight: 500;
  line-height: 15px;
  color: #000;
}


.premium-pdp .premium-price__regular {
  font-size: 13px;
  font-weight: 500;
  line-height: 15px;
  color: #000;
}


.premium-pdp .premium-price__compare {
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  color: #797676;
  text-decoration: line-through;
}



/* --- Options wrapper: flex column so CSS order can reposition Color above Size --- */
.premium-pdp .premium-options-wrapper {
  display: flex;
  flex-direction: column;
}


.premium-pdp .ks-chart-modal-link::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='%23000' d='M22.96 7.404L16.596 1.04a.5.5 0 0 0-.707 0L1.04 15.889a.5.5 0 0 0 0 .707l6.364 6.364a.5.5 0 0 0 .707 0l3.18-3.18l.002-.002l2.827-2.827h.001v-.002l2.829-2.827v-.001l2.828-2.828l3.182-3.182a.5.5 0 0 0 0-.707m-3.535 2.828l-1.768-1.767l-.007-.007a.5.5 0 0 0-.7.714l1.768 1.767l-2.122 2.122l-3.182-3.182l-.007-.007a.5.5 0 0 0-.7.714l3.182 3.182l-2.121 2.121L12 14.121a.5.5 0 0 0-.707.707l1.767 1.768l-2.12 2.122l-3.183-3.183l-.007-.007a.5.5 0 1 0-.7.714l3.182 3.183l-2.475 2.474l-5.656-5.657L16.242 2.101L21.9 7.758z'/></svg>");
}




/* --- Surface pick-up: invisible but initialized so Atlantic wires up the drawer --- */
.premium-pdp .surface-pick-up,
.premium-pdp [data-surface-pick-up] {
  position: absolute;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}



/* --- ATC + Wishlist row --- */
.premium-pdp .premium-submit-row {
  display: flex;
  gap: 0;
  align-items: stretch;
  margin-bottom: 10px;
}



.premium-pdp .premium-atc-btn {
  flex: 1;
  background: #000 !important;
  color: #fff !important;
  border: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  min-height: 50px !important;
  border-radius: 0 !important;
  cursor: pointer;
}


.premium-pdp .premium-atc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.premium-pdp .premium-wishlist-btn svg {
  pointer-events: none;
}


.premium-pdp .premium-store-link {
  font-size: 10px;
  line-height: 18px;
  font-weight: 400;
  color: #000;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  margin-left: 32px;
}



/* --- Need Help Premium --- */
.premium-pdp .premium-need-help {
  margin-bottom: 0;
}


/* --- Mobile: hide thumbnails, keep swipe --- */
@media (max-width: 719px) {
  .premium-pdp .product-gallery--navigation {
    display: none !important;
  }

  /* Size pills: fixed dimensions on mobile */
  .premium-pdp .premium-size-pill {
    flex: 0 0 auto;
    width: 75px;
    height: 55px;
    padding: 0;
  }
  .premium-pdp .premium-size-pill--wide {
    width: auto;
    min-width: 75px;
    padding: 0 14px;
  }

}



/* --- How to Wear item captions --- */
.premium-pdp .how-to-wear__caption {
  text-align: center;
}



/* --- Mobile: how-to-wear top spacing to match section-title section-border --- */
@media screen and (max-width: 1024px) {
  .premium-pdp .how-to-wear {
    padding-top: 18px;
    margin-top: 10px;
  }
}



/* --- Desktop: thumbnails-left layout, how-to-wear below gallery --- */
@media screen and (min-width: 1025px) {
  .premium-pdp .product-area__container {
    grid-template-columns: minmax(0, 660px) minmax(0, 450px);
    grid-template-rows: auto auto;
    column-gap: 40px;
    justify-content: center;
  }
  /* Details spans both rows so row-1 height is set by gallery, not details */
  .premium-pdp .product-details-wrapper {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  .premium-pdp .how-to-wear {
    grid-column: 1;
    grid-row: 2;
    align-items: flex-start;
    max-width: 716px;
  }
  .premium-pdp .how-to-wear__item-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .premium-pdp .how-to-wear .how-to-wear__link {
    width: 155px;
  }
  .premium-pdp .how-to-wear .how-to-wear__img-wrapper {
    max-width: 155px;
  }
  /* Native gallery: vertical thumbnail rail on the left, featured image center */
  .premium-pdp .product-gallery {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
  .premium-pdp .product-gallery--navigation {
    order: 1;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 10px;
    width: 100px;
    margin: 0;
  }
  .premium-pdp .product-gallery--viewport {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
  }
  .premium-pdp .product-gallery--media-thumbnail {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
  }
  .premium-pdp .product-gallery--media-thumbnail img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: contain;
    border: 1px solid #efefef;
    opacity: 0.75;
  }
  .premium-pdp .product-gallery--media-thumbnail[data-product-gallery-selected="true"] img,
  .premium-pdp .product-gallery--media-thumbnail:hover img {
    border-color: #999999;
    opacity: 1;
  }
  .premium-pdp .product-gallery--viewport--figure img {
    border: 1px solid #efefef;
  }
}



/* --- Native gallery prev/next arrows over the featured image --- */
.premium-pdp .product-gallery--viewport {
  position: relative;
}


.premium-pdp .product-gallery--arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  color: #cccccc;
  cursor: pointer;
}


.premium-pdp .product-gallery--arrow-prev {
  left: 12px;
}


.premium-pdp .product-gallery--arrow-next {
  right: 12px;
}


.premium-pdp .product-gallery--arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: scale(0.9);
}



/* --- PhotoSwipe zoom — light, minimal lightbox (white bg, thin close + chevrons) --- */
.pswp__bg {
  background: #fff;
}


.pswp__button--share,
.pswp__button--fs,
.pswp__button--zoom,
.pswp__counter,
.pswp__caption {
  display: none !important;
}


.pswp__button--close {
  color: #1e1e1e;
  opacity: 1;
}


.pswp__button--close .svg-icon {
  color: #1e1e1e;
}


.pswp__button.pswp__button--arrow--left,
.pswp__button.pswp__button--arrow--right {
  background: none !important;
  box-shadow: none !important;
  opacity: 1;
}


.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  display: none !important;
}


.pswp__button.pswp__button--arrow--left .svg-icon,
.pswp__button.pswp__button--arrow--right .svg-icon {
  z-index: 1;
  width: 22px;
  height: 22px;
  color: #1e1e1e;
}


/* Let clicks fall through the SVG to the button — PhotoSwipe v4 reads
   e.target.className as a string, which breaks when an SVG is the target */
.pswp__button svg,
.pswp__button .svg-icon {
  pointer-events: none;
}



/* --- Hide original product-form elements we don't want on premium PDP --- */
.premium-pdp .size-messaging,
.premium-pdp .size-message-text,
.premium-pdp .share__icons,
.premium-pdp .social-media_wrapper {
  display: none !important;
}



@media (max-width: 767px) {
  .product-details.premium-details {
    margin-top: 0;
  }
}



/* =============================================================================
   PREMIUM PDP — Collapsible accordion typography
   ============================================================================= */
.premium-pdp .collapsible-tab__heading {
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}



/* Need Help inline scroll link */
.premium-pdp .premium-need-help a.premium-need-help__scroll-link {
  text-decoration: none !important;
  border-bottom: 1px solid #000;
  color: inherit;
}



/* Flat designer list */
.section-collection-designers .designers-flat-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 450px;
  margin: 0 auto;
  padding: 20px;
}



.section-collection-designers .designer-list-item {
  margin: 0;
  font-size: 15px;
  line-height: 25px;
  font-family: Inter, sans-serif;
  font-weight: 400;
  text-align: center;
}



@media (max-width: 768px) {
  .section-collection-designers .designer-list-item {
    line-height: 30px;
  }
}




.section-collection-designers .designer-list-item a {
  color: inherit;
  text-decoration: none;
}



.section-collection-designers .designer-list-item a:hover,
.section-collection-designers .designer-list-item a:focus-visible {
  text-decoration: underline;
}



/* Featured Designers section */
.featured-section__title {
  margin: 0 25px 2rem;
  line-height: 40px;
}



.section-featured-designers .featured-section {
  padding: 30px 0;
}



.section-featured-designers .text-content-wrap {
  padding: 0;
}



/* Designers page text-content-wrap */
.section-collection-designers .text-content-wrap {
  padding: 0;
}



.section-collection-designers .page-title .label {
  font-size: 30px;
  line-height: 1;
}



/* =============================================================================
   July 3 mobile punch list (James) — v17-parity fixes
   ============================================================================= */

/* v19 stock sets .store-logo line-height:1 under 720px (v17: 0); the extra
   inline-box leading pushed the mobile logo down. */
@media (max-width: 719px) {
  .store-logo {
    line-height: 0;
  }
}

/* v19 stock widened this to 1.25rem; live uses v17's 0.75rem. */
.featured-blog__article-image {
  margin-bottom: 0.75rem;
}

/* Footer legal/notice text — from v17 custom_style.css:429-558. */
.capsule-footer .sub-footer__copyright,
.footer-additional-text {
  font-size: 12px !important;
}

.footer-additional-text {
  font-weight: 400 !important;
}

.footer-additional-text p {
  margin-bottom: 3px;
  line-height: 16px;
}

.footer-additional-text p + p {
  margin: 0;
}

/* Live premium PDP shows the sale price first, compare-at struck after
   (v17 premium-price markup order); reorder the stock block with flex. */
.premium-pdp .product__price.sale,
.quickshop .product__price.sale {
  gap: 6px;
}

.premium-pdp .product__price .original,
.quickshop .product__price .original {
  order: 1;
}

/* Stock puts margin-right:14px on .money--last (theme.css ~10188); with the
   flex reorder above that margin lands between sale and compare-at and stacks
   onto the 6px gap. The gap alone is the intended spacing. */
.premium-pdp .product__price .money--last,
.quickshop .product__price .money--last {
  margin-right: 0;
}

/* Mobile PDP: the container's 24px flex row-gap opened a band between the
   header and the snap gallery; keep the image flush and move the spacing
   onto the blocks below instead. */
@media (max-width: 767px) {
  .premium-pdp .product-area__container {
    row-gap: 0;
  }

  .premium-pdp .product-details-wrapper,
  .premium-pdp .how-to-wear {
    margin-top: 24px;
  }
}

/* v19 stock enlarged the filter checkbox to 1rem (v17: 12px) and added a
   10px column-gap + flex:1 to the row; restore v17 metrics. The sidebar
   overrides above still win where they're meant to (higher specificity).
   Search twins carry the same stock rules (theme.css ~15669/15781) and were
   missed when this block was written for the collection sidebar. */
.collection-filters__filter-link,
.search-filters__filter-link {
  flex: none;
  column-gap: 0;
}

.collection-filters__filter-checkbox,
.search-filters__filter-checkbox {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}