/** Shopify CDN: Minification failed

Line 122:0 All "@import" rules must come first

**/
/* ============================================================
   MOWALOLA REPLICA — DAWN THEME
   ============================================================ */

/* ============================================================
   HOMEPAGE HERO BANNER — height keyed to viewport HEIGHT (vh), not a
   fixed px or the viewport width. Monitor widths vary wildly (a 1920
   and a 3440 ultrawide can share the same ~1080-1440px height), so
   sizing off width made ultrawide screens crop out most of the photo.
   Sizing off vh instead keeps the same proportion of the image visible
   on any monitor, matching the reference site's own hero mechanism.
   ============================================================ */
/* .banner__media is position:absolute, so constraining IT doesn't shrink the banner overall —
   the actual driver of the outer .banner's own height is .banner__content, the one child left in
   normal flow (media and the full-cover link are both absolute, removed from flow). .banner is
   display:flex, and content stretches to match .banner's own "auto" height, which in this
   "adapt" + empty-content setup circularly resolves to nearly the full viewport. Setting height
   directly on .banner grounds that circularity — media (height:100%, Dawn's own default) and
   content then both correctly resolve against it. object-fit:cover on the img keeps the crop
   clean at the new height instead of stretching. Scoped to this section only via an
   id-ends-with selector (Shopify's rendered id is "shopify-section-template--XXXX__image_banner",
   where the numeric part isn't stable across saves — matching the "__image_banner" suffix
   targets just this section, not the second, lower "SHOP ALL" banner, whose id ends in
   "__image_banner_xaL9q8" instead). */
@media screen and (min-width: 750px) {
  [id$="__image_banner"] .banner {
    height: 90vh !important;
  }

  [id$="__image_banner"] .banner__media img {
    object-fit: cover !important;
  }
}

@media screen and (max-width: 749px) {
  [id$="__image_banner"] .banner {
    /* svh, not vh or dvh. Plain 100vh is iOS Safari's LARGE size (toolbar collapsed) — taller than
       what's actually visible on load (toolbar showing), which left a gap under the sidebar strip
       (.pltm-sidebar__strip, position:fixed top:0/bottom:0, which fills the REAL visible area).
       100dvh fixed that gap by tracking the real visible area live, but "live" was the problem: it
       recalculates continuously as the toolbar hides/shows during scroll, so the banner's box kept
       resizing mid-scroll and object-fit:cover kept rescaling the image to match, reading as a
       "zoom". svh is static like vh (set once, no mid-scroll resize — no zoom) but uses the SMALL
       size (toolbar showing) instead of the large one, which is what's actually visible at rest —
       matching the sidebar's fixed top:0/bottom:0 in the normal, un-scrolled state screenshots are
       taken from. vh is kept first as a fallback for browsers without svh support. */
    height: 100vh !important;
    height: 100svh !important;
  }

  [id$="__image_banner"] .banner__media img {
    object-fit: cover !important;
  }
}

/* Optional separate mobile image on any image-banner section — set via the "Mobile image"
   picker. .pltm-banner-mobile-media is only rendered in the liquid when that setting has a
   value, and .pltm-has-mobile-image is only added to the section when it does, so on sections
   where no mobile image is set, none of this applies and both breakpoints just show the normal
   desktop image as before. */
.pltm-banner-mobile-media {
  display: none;
}

@media screen and (max-width: 749px) {
  .pltm-banner-mobile-media {
    display: block !important;
  }

  .banner.pltm-has-mobile-image > .banner__media:not(.pltm-banner-mobile-media) {
    display: none !important;
  }

  .pltm-banner-mobile-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}


/* ============================================================
   BOTTOM-RIGHT LOGO BOX (homepage only, scroll-to-top sticky)
   ============================================================ */
.pltm-logo-box {
  position: fixed;
  right: 0;
  z-index: 998;
  background: #430914;
  padding: 22px 90px 22px 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Was pointer-events:none, letting clicks pass straight through to whatever product card this
     floating box happened to be sitting over — visually you'd click the logo, but it would
     navigate to an unrelated product underneath. auto makes it properly block clicks instead. */
  pointer-events: auto;
}

.pltm-logo-box__img {
  display: block;
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@media screen and (max-width: 749px) {
  .pltm-logo-box {
    padding: 8px 28px 8px 10px;
  }
  .pltm-logo-box__img {
    height: 32px;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

/* Satoshi — uploaded to Shopify Files. Both weights are registered under the same family name so
   the browser auto-selects the right file based on computed font-weight: 400 (Regular) for normal
   text below, 700 (Bold) for the heading override further down. */
@font-face {
  font-family: 'Satoshi';
  src: url('/cdn/shop/files/Satoshi-Regular.woff2?v=1785025633') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('/cdn/shop/files/Satoshi-Bold.woff2?v=1785025524') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Satoshi everywhere — 'Play' kept as fallback in case either font file fails to load */
*, *::before, *::after {
  font-family: 'Satoshi', 'Play', sans-serif !important;
}

/* Headings/titles get the bold weight explicitly (h1-h5, .h0-.h5 — matches Dawn's own heading
   rule in base.css) so they render distinctly heavier than the regular body copy above. */
h1, h2, h3, h4, h5,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Satoshi', 'Play', sans-serif !important;
  font-weight: 700 !important;
}

/* Eliminate 300ms tap delay on all interactive elements */
a, button, input, select, textarea, label,
[role="button"], [type="button"], [type="submit"],
.pltm-accordion__trigger, .pltm-panel-trigger,
.pltm-panel-close, slider-component, .slider-button,
.swatch-input__label, .card-wrapper {
  touch-action: manipulation;
}

/* ============================================================
   COLORS — white background, black text
   ============================================================ */

body,
.gradient,
.color-background-1,
.color-scheme-1,
[class*="color-"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #000000 !important;
}

body {
  background-color: #ffffff;
  color: #000000;
}

/* ============================================================
   HEADER
   ============================================================ */

.header-wrapper,
.header,
.header__inner {
  background-color: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Remove divider line below header on all pages */
.shopify-section-header,
.section-header,
.header-wrapper {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Hide hamburger menu on mobile — we use our own sidebar */
.header__icon--menu,
.header__hamburger,
details.menu-drawer-container {
  display: none !important;
}

.header__heading-link,
.header__menu-item,
.header__menu-item span,
.header__icon,
.header__icon svg {
  color: #000000 !important;
  fill: #000000 !important;
}

.header__menu-item span {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.header__submenu,
.global-settings-popup {
  background-color: #ffffff !important;
  border-color: #e8e8e8 !important;
}

/* Sticky header — always on top */
.section-header,
sticky-header,
.header-wrapper {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: #ffffff !important;
}

/* Logo only — hide nav, search, account, cart */
.header__inline-menu,
.header__icon--cart,
.header__icon--search,
.header__icon--account,
.header__icons,
.header__menu {
  display: none !important;
}

/* Center the logo */
.header__heading {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */

.announcement-bar {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.announcement-bar__message,
.announcement-bar__message a,
.announcement-bar p {
  color: #ffffff !important;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================================
   MODEL VIEW TOGGLE — mowalola style
   ============================================================ */

.pltm-toggle-wrap {
  display: flex;
  align-items: center;
  padding: 0.5rem 0 0.5rem 0.5rem;
}

.pltm-view-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.pltm-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Toggle track — the pill itself. Black outline, transparent background in both states. */
.pltm-toggle-track {
  display: inline-block;
  width: 42px;
  height: 24px;
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid #000;
  border-radius: 100px;
  position: relative;
  flex-shrink: 0;
}

/* Knob is a real element (not ::after) so JS can put an icon inside it — the icon rides along
   with the knob as it slides, rather than living outside the pill as a separate element that has
   to be kept in sync with the knob's position (that's what caused the icon/knob desync bug). */
.pltm-toggle-knob {
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%) translateX(0);
  width: 16px;
  height: 16px;
  background: #000;
  border-radius: 50%;
  transition: transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.pltm-toggle-knob svg {
  width: 9px;
  height: 9px;
}

.pltm-toggle-input:checked + .pltm-toggle-track .pltm-toggle-knob {
  transform: translateY(-50%) translateX(19px);
}

/* When model view is on — show second image, hide first.
   Only applies to cards marked with has-secondary-image (set by JS) */
.product-grid.pltm-model-view .has-secondary-image .card__media img:first-child,
.product-grid.pltm-model-view .has-secondary-image .card__media .media img:first-child {
  opacity: 0 !important;
  transition: none !important;
}

.product-grid.pltm-model-view .has-secondary-image .card__media img:nth-child(2),
.product-grid.pltm-model-view .has-secondary-image .card__media img + img,
.product-grid.pltm-model-view .has-secondary-image .card__media .media img:nth-child(2),
.product-grid.pltm-model-view .has-secondary-image .card__media .media img + img {
  opacity: 1 !important;
  z-index: 2 !important;
  position: relative !important;
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */

/* No gap between grid cells */
.product-grid-container,
.page-width.product-grid-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* Zeroing the spacing variables (rather than hardcoding a flat width like 20% on .grid__item)
   lets Dawn's own per-class width calc — .grid--5-col-desktop, .grid--4-col-desktop, etc, in
   base.css — do the math for whichever column count each section's own setting/class actually
   specifies, instead of one blanket width silently overriding every .product-grid on the site
   regardless of section. That's what caused the collection page (4 cols) to render at the
   homepage's 5-col width — this class-scoped variable approach can't leak across sections. */
ul.product-grid,
.product-grid {
  --grid-desktop-horizontal-spacing: 0px;
  --grid-mobile-horizontal-spacing: 0px;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product-grid .grid__item {
  padding: 0 !important;
  margin: 0 !important;
  /* Dawn's base .grid__item has flex-grow:1 — fine when a row is full, but a lone item on the
     last page (nothing beside it to share the row with) stretches to fill the whole row's width
     instead of staying at its normal column width. Locking grow to 0 keeps every item at its
     calculated column width regardless of how many items land in that row. */
  flex-grow: 0 !important;
}

/* Dawn deliberately makes a lone leftover product on the last page of a mobile collection view
   span full width (.collection .grid__item:only-child in base.css, specificity (0,3,0) — higher
   than the rule above) as an intentional design choice. Here it should stay in the normal
   2-column grid like every other product instead, so this overrides it back to the same width. */
@media screen and (max-width: 749px) {
  .collection .grid__item:only-child {
    flex: 0 0 calc(50% - var(--grid-mobile-horizontal-spacing) / 2) !important;
    max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2) !important;
  }
}


/* Hide sale badge */
.card__badge,
.card .badge {
  display: none !important;
}

/* Product name and price — size + alignment */
.card__heading,
.card__heading.h5 {
  text-align: center !important;
  font-size: 11px !important;
}

.card-information,
.card__information {
  text-align: center !important;
}

.card-information .price,
.card__information .price,
.card-information .price-item,
.card__information .price-item {
  font-size: 10px !important;
  color: #000000 !important;
}

/* Sale price (the crossed-out original) stays grey — more specific than the black rule above,
   which would otherwise win for every price-item including this one. The actual discounted
   price customers pay stays black/prominent. */
.card-information .price__sale .price-item--regular,
.card__information .price__sale .price-item--regular {
  color: #999999 !important;
}

/* Banner full-cover link — Dawn's own base.css hides ALL empty elements (a:empty, div:empty,
   etc. — meant to clean up stray empty rich-text tags), which catches this anchor too since it's
   intentionally empty (just a full-cover clickable overlay with an aria-label, no visible
   content). That's why "Enable banner link" silently did nothing — the link was being hidden
   entirely (display:none, zero size) by that unrelated rule. Restoring display here fixes it. */
.banner__full-link {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Banner buttons stay clickable above the overlay. pointer-events:none on the container itself
   (re-enabled only on actual links/buttons inside it) lets clicks in its empty space — padding,
   unset heading/text, etc. — fall through to .banner__full-link below instead of being swallowed
   by this container's own box, which otherwise blocks the banner link whenever there's no visible
   button to distinguish "empty" area from "content" area. */
.banner__content {
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.banner__content a,
.banner__content button,
.banner__content summary,
.banner__content input,
.banner__content label {
  pointer-events: auto;
}

/* Collection page: match homepage full-width product grid */
.template-collection #ProductGridContainer .collection.page-width {
  max-width: none !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}


/* ============================================================
   COLLECTION HEADER
   ============================================================ */

.collection-hero {
  background: #ffffff !important;
}

/* Tighten collection banner padding so title sits close to the grid */
.collection-hero__inner {
  padding-top: 16px !important;
  padding-bottom: 8px !important;
}

.collection-hero__title {
  color: #000000 !important;
}

/* Hide filter/sort bar */
#main-collection-filters,
.facets-wrapper {
  display: none !important;
}

.main-collection-banner {
  background: #ffffff !important;
  padding: 1.5rem 1rem !important;
}

/* Section headings like "NEW ARRIVALS" */
.title-wrapper,
.title-wrapper-with-link {
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.title-wrapper .title,
.title-wrapper-with-link .title {
  font-size: 2rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #000000 !important;
}

@media screen and (min-width: 750px) {
  .title-wrapper .title,
  .title-wrapper-with-link .title {
    font-size: 3.2rem !important;
  }
}

/* ============================================================
   PRODUCT PAGE — MOWALOLA STYLE
   ============================================================ */

/* Remove page-width padding — scoped to product pages only */
.template-product .page-width:has(.product) {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Prevent horizontal overflow on mobile product page */
@media screen and (max-width: 749px) {
  body.template-product {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body.template-product .page-width {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* clip not hidden — clip doesn't create a scroll container so it won't cut positioned children */
    overflow-x: clip !important;
  }

  /* slider-component defaults to inline on some mobile browsers — force block + allow overflow for arrows */
  body.template-product slider-component,
  body.template-product .product__media-gallery {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    position: relative !important;
  }
}

/* Product grid: stack media on top, info below (info goes fixed) */
.product.grid {
  display: block !important;
  max-width: 100% !important;
}

/* Media wrapper: full page width */
.product__media-wrapper,
.product__media-wrapper.grid__item {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

/* THE FIX: correct selector — ul.product__media-list not .product-media-gallery */
ul.product__media-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

/* Each image cell: fixed portrait ratio — consistent on any monitor size */
li.product__media-item {
  grid-column: span 1 !important;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 40px 30px !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Single image: span both columns, centered */
li.product__media-item--single {
  grid-column: 1 / -1 !important;
}

/* ── MOBILE PRODUCT PAGE ── */
@media screen and (max-width: 749px) {
  /* Dawn's stock rule pulls the slider -1.5rem past its container to cancel out the mobile
     page-width gutter — but we already strip that gutter to 0 above, so with the gutter gone
     this negative margin just shifts the whole gallery left, crowding it against the sidebar
     strip. Zero it out so the gallery centers in the actual available space instead. */
  .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Slider: swipeable, one image at a time */
  ul.product__media-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: scroll !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    grid-template-columns: unset !important;
    width: 100% !important;
    /* Dawn's stock .slider--mobile rule sets scroll-padding-left: 1.5rem to match the page-width
       gutter it assumes exists (same assumption as the margin fix above). With that gutter gone,
       this insets every scroll-snap "start" alignment by 15px, so clicking the arrow lands 15px
       short of a clean slide-width scroll — Safari/WebKit enforces this strictly (reproduced via
       WebKit engine testing), landing each subsequent image visibly shifted right. Zero it out so
       snap alignment lands exactly on each slide boundary. */
    scroll-padding-left: 0 !important;
  }

  /* Neutralize the matching trailing spacer this same stock rule adds after the last slide */
  ul.product__media-list::after {
    padding-left: 0 !important;
  }

  ul.product__media-list::-webkit-scrollbar {
    display: none !important;
  }

  li.product__media-item,
  li.product__media-item--single {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: unset !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    padding: 20px !important;
    scroll-snap-align: start !important;
  }

  /* Product info: in-page section above footer */
  .product__info-wrapper,
  .product__info-wrapper.grid__item {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-top: 1px solid #e0e0e0 !important;
    background: #ffffff !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Arrows: overlay positioned relative to slider-component (which is now position:relative) */
  .product__media-wrapper {
    position: relative !important;
    overflow: visible !important;
  }

  /* Position slider buttons over the image — left:0/right:0 sets width, no width: 100% needed */
  slider-component .slider-buttons {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 12px !important;
    z-index: 50 !important;
    pointer-events: none !important;
  }

  /* Hide counter (1 / 2) */
  slider-component .slider-counter { display: none !important; }

  /* Mobile slider arrow buttons */
  slider-component .slider-button .svg-wrapper,
  slider-component .slider-button svg { display: none !important; }

  slider-component .slider-button {
    pointer-events: auto !important;
    background: none !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  slider-component .slider-button--prev::after {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }

  slider-component .slider-button--next::after {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }
}

/* Global slider arrows — SVG chevrons on every slider across the site */
.slider-button .svg-wrapper,
.slider-button svg { display: none !important; }

.slider-button {
  background: none !important;
  border: none !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.slider-button--prev::after,
.slider-button--next::after {
  content: '' !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}

.slider-button--prev::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

.slider-button--next::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* Media container and image */
.product__media-item .media {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product__media-item .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* No borders/zoom */
.product__media-item, .product__media-item *, .product__media-item .media {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  cursor: default !important;
}

.product__media-icon, .media__icon, .product__media-toggle { display: none !important; }
.thumbnail-list, .thumbnail-slider { display: none !important; }
product-modal, .media-modal, .product-popup-modal { display: none !important; }

/* Info card: fixed at bottom, lifted above the footer via a transform (not `bottom`) as you
   scroll — `bottom` is a layout property, so animating it forces a synchronous reflow on every
   scroll frame. `--info-lift` (set by custom.js) feeds a translateY instead, which the compositor
   handles without ever touching layout, so this stays smooth even on long product pages. */
.product__info-wrapper,
.product__info-wrapper.grid__item {
  position: fixed !important;
  bottom: 14px;
  left: 50% !important;
  transform: translateX(-50%) translateY(calc(-1 * var(--info-lift, 0px))) translateZ(0) !important;
  width: 360px !important;
  max-width: calc(100vw - 40px) !important;
  z-index: 300 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid #d0d0d0 !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.product__info-container,
.product__column-sticky {
  position: static !important;
  top: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Strip all extra space from every wrapper layer so ADD TO CART is flush */
.product__info-wrapper > *,
.product__info-wrapper .product__info-container > *,
.product__info-wrapper .shopify-section {
  margin-bottom: 0 !important;
}

.product-form,
product-form {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product-form > form,
product-form > form {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   MOWALOLA PRODUCT PANEL
   ============================================================ */

.pltm-panel {
  background: #ffffff !important;
  border: none !important;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Title + price row */
.pltm-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.8rem;
  /* Dawn's default heading margin bleeds through onto this row (~15px), pushing the whole panel
     taller and the title further from the top border than intended — zero it out for a tighter,
     Mowalola-style panel. */
  margin-top: 0 !important;
}

.pltm-title-row .product__title,
.pltm-title-row h1.product__title,
.pltm-title-row .product__title h1,
.pltm-title-row .product__title h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.pltm-title-row [id^="price-"] {
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

.pltm-title-row .price-item {
  font-size: 1rem !important;
  letter-spacing: 0.04em !important;
  color: #000000 !important;
}

/* Sale price (the crossed-out original) stays grey — more specific than the black rule above. */
.pltm-title-row .price__sale .price-item--regular {
  color: #999999 !important;
}

/* Accordion rows — each SIZE/DESCRIPTION box has its own border and a gap between them
   (not one shared box) — see .pltm-accordions-row below for the row-level width/spacing.
   The width transition is what makes opening/closing widen or shrink the box smoothly (the
   "text starts small, box widens" effect from the reference) instead of snapping instantly;
   overflow:hidden clips the label/border cleanly while it's mid-shrink on mobile. */
.pltm-accordion {
  border: 1px solid #d8d8d8;
  margin: 0 0 0.6rem;
  overflow: hidden;
  transition: width 0.3s ease, opacity 0.3s ease, border-width 0.3s ease;
}

.pltm-accordion:last-child {
  margin-bottom: 0;
}

/* Closed state: label centered independently, arrow pinned to the trigger's right edge (not
   grouped with the label) — matches the Mowalola reference. Open state shifts the label back to
   the left; the arrow/X stays pinned right via its own absolute position either way. */
.pltm-accordion__trigger {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 0.65rem 1.2rem;
  background: #f2f2f2;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: inherit;
}

.pltm-accordion.pltm-open .pltm-accordion__trigger {
  justify-content: flex-start !important;
}

.pltm-accordion__label {
  color: #000000;
}

/* Closed state: solid right-pointing triangle (not an outline chevron) */
.pltm-accordion__arrow {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #000000;
  background: none;
  transition: none;
}

/* Open state: swap to an X close icon at the same pinned position */
.pltm-accordion.pltm-open .pltm-accordion__arrow {
  width: 14px;
  height: 14px;
  border: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Accordion body height animation — this lives inside .product__info-wrapper, which is
   position:fixed, so the reflow this causes is already scoped to that small fixed panel rather
   than the whole page; contain: layout makes that boundary explicit to the browser. */
.pltm-accordion__body {
  height: 0;
  overflow: hidden;
  contain: layout;
  transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 0.9rem;
}

.pltm-accordion.pltm-open .pltm-accordion__body {
  padding: 0.5rem 0.9rem 0.9rem;
}

/* Hide SALE badge on product info panel */
.product__info-wrapper .price__badge-sale,
.product__info-wrapper .badge--sale,
.product__info-wrapper .badge[aria-label*="ale"] { display: none !important; }

/* Hide redundant SOLD OUT text next to the price on product page — the add-to-bag button
   already reads "SOLD OUT", so this text badge is duplicate information here (collection grid
   cards keep it, since there's no button there to convey it). */
.product__info-wrapper .price__badge-sold-out { display: none !important; }

/* Size buttons inside accordion */
.pltm-accordion__body .product-form__input {
  margin: 0 !important;
}

.pltm-accordion__body fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pltm-accordion__body .form__label {
  display: none !important;
}

/* Size guide button — sits above the size swatches inside the SIZE accordion body */
.pltm-size-guide-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #d8d8d8;
  padding: 0.5rem 1.2rem;
  margin: 0 0 0.8rem;
  font-size: 0.85rem;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000000;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.pltm-size-guide-link:hover {
  background: #f2f2f2;
  border-color: #b0b0b0;
}

/* Size guide modal — full-screen, dark, shows a single merchant-uploaded image */
.pltm-size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: #111111;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.pltm-size-guide-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.pltm-size-guide-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 1.2rem 1.5rem;
}

.pltm-size-guide-modal__brand {
  color: #ffffff;
  font-size: 1.4rem;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

.pltm-size-guide-modal__close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}

.pltm-size-guide-modal__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 0 1.5rem 1.5rem;
}

.pltm-size-guide-modal__body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Prevent background scroll while the size guide modal is open */
body.pltm-size-guide-open {
  overflow: hidden !important;
}

/* Size option buttons */
.pltm-accordion__body .swatch-input__label,
.pltm-accordion__body .product-form__input label {
  border: 1px solid #e2e2e2 !important;
  border-radius: 0 !important;
  background: #f8f8f8 !important;
  color: #b0b0b0 !important;
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  padding: 0.9rem 1.6rem !important;
  margin: 0.3rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 4rem !important;
  min-height: 3rem !important;
  position: relative !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.pltm-accordion__body .swatch-input__wrapper {
  display: inline-flex !important;
  position: relative !important;
}

/* Hover — slightly darker */
.pltm-accordion__body .swatch-input__label:hover,
.pltm-accordion__body .product-form__input label:hover {
  background: #eeeeee !important;
  color: #555555 !important;
  border-color: #cccccc !important;
}

/* Selected — dark grey fill, black border */
.pltm-accordion__body .swatch-input__label--active,
.pltm-accordion__body .swatch-input__input:checked + .swatch-input__label,
.pltm-accordion__body input[type="radio"]:checked + label {
  background: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* ============================================================
   CUSTOM CART POPUP — mowalola style
   ============================================================ */

#pltm-cart-popup {
  display: none;
  position: fixed;
  top: 60px;
  left: 60px;
  width: 420px;
  max-width: calc(100vw - 70px);
  background: #ffffff;
  border: 1px solid #d0d0d0;
  z-index: 10001;
  color: #000000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#pltm-cart-popup.is-open { display: block; }

/* Mobile: the 40px left strip (.pltm-sidebar__strip) isn't part of the "page" the popup should
   center in — using left:60px (a desktop value) left more room on the right than the left once
   the strip is subtracted. Center within the space after the strip instead. */
@media screen and (max-width: 749px) {
  #pltm-cart-popup {
    left: calc(40px + (100vw - 40px) / 2);
    transform: translateX(-50%);
    width: calc(100vw - 40px - 30px);
    max-width: 420px;
  }
}

#pltm-cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
}

#pltm-cart-overlay.is-open { display: block; }

/* X close — top right */
.pltm-cart__close {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  color: #000;
  z-index: 1;
}

/* Free shipping note — sits in normal flow above the cart body; margin-top clears the
   absolutely-positioned close button the same way the grid's own top padding does below. */
.pltm-cart__shipping-note {
  margin: 3.2rem 2rem 0;
  padding: 0;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #000;
}

/* Grid of items — 2 columns. Top padding must clear .pltm-cart__close (the drawer's own close
   button, top: 0.7rem/height ~15px) — the right column's own per-item remove-X sits at the same
   right edge as that close button, so without enough clearance here the two X's visually collide. */
.pltm-cart__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4rem 0.5rem 0.5rem;
}

.pltm-cart__grid--single {
  grid-template-columns: 1fr;
  max-width: 200px;
  margin: 0 auto;
}

.pltm-cart__grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.5rem 1rem;
  position: relative;
}

/* X remove button on each item */
.pltm-cart__item-x {
  position: absolute;
  top: -0.2rem;
  right: 0.2rem;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Product image */
.pltm-cart__item-img {
  width: 130px;
  height: 160px;
  object-fit: contain;
  display: block;
  margin-bottom: 0.7rem;
}

/* Nav arrows row (only shown when > 4 items) */
.pltm-cart__nav-row {
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem 0.5rem;
}

/* Quantity row: trash | number | + */
.pltm-cart__qty-row {
  display: flex;
  align-items: center;
  border: 1px solid #d0d0d0;
  margin-bottom: 0.7rem;
  width: 140px;
}

.pltm-cart__qty-del,
.pltm-cart__qty-minus,
.pltm-cart__qty-plus {
  background: none;
  border: none;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  font-size: 1rem;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pltm-cart__qty-del,
.pltm-cart__qty-minus { border-right: 1px solid #d0d0d0; font-size: 1.2rem; }
.pltm-cart__qty-plus { border-left: 1px solid #d0d0d0; font-size: 1.2rem; }

.pltm-cart__qty-num {
  flex: 1;
  text-align: center;
  font-size: 1rem;
}

/* Size chip */
.pltm-cart__size-chip {
  border: 1px solid #d0d0d0;
  padding: 0.3rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
  display: inline-block;
}

/* Item name and price */
.pltm-cart__item-name {
  font-size: 0.85rem;
  font-weight: 400;
  margin-bottom: 0.2rem;
  letter-spacing: 0.05em;
}

.pltm-cart__item-price {
  font-size: 0.85rem;
  color: #000;
}

/* Nav arrows */
.pltm-cart__nav {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  color: #000;
  line-height: 1;
}

/* Footer */
.pltm-cart__footer {
  padding: 0.8rem 1.2rem 1.2rem;
  border-top: 1px solid #e8e8e8;
}

.pltm-cart__total-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  letter-spacing: 0.08em;
}

.pltm-cart__checkout {
  display: block;
  width: 100%;
  padding: 0.9rem;
  background: #000;
  color: #fff;
  border: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-sizing: border-box;
}

.pltm-cart__checkout:hover { background: #333; color: #fff; }

/* Empty state */
.pltm-cart__empty {
  text-align: center;
  padding: 3rem 1.5rem;
}

.pltm-cart__empty p { font-size: 0.85rem; margin-bottom: 1.5rem; }

.pltm-cart__continue {
  display: block;
  width: 100%;
  padding: 0.8rem;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  text-align: center;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-sizing: border-box;
}

.pltm-cart__continue:hover { background: #000; color: #fff; }

/* Hide Dawn's built-in cart notification popup */
cart-notification,
.cart-notification,
.cart-notification-wrapper {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Sold out wrapper — red circle/slash cursor */
.pltm-accordion__body .swatch-input__wrapper:has(input:disabled),
.pltm-accordion__body .swatch-input__wrapper:has(input.disabled) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' stroke='%23cc0000' stroke-width='2.5' fill='none'/%3E%3Cline x1='7' y1='7' x2='25' y2='25' stroke='%23cc0000' stroke-width='2.5'/%3E%3C/svg%3E") 16 16, not-allowed !important;
}

/* Sold out label — faded */
.pltm-accordion__body .swatch-input__input:disabled + .swatch-input__label,
.pltm-accordion__body .swatch-input__input.disabled + .swatch-input__label,
.pltm-accordion__body input[type="radio"]:disabled + label,
.pltm-accordion__body input[type="radio"].disabled + label {
  position: relative !important;
  color: #cccccc !important;
  border-color: #ebebeb !important;
  background: #f8f8f8 !important;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' stroke='%23cc0000' stroke-width='2.5' fill='none'/%3E%3Cline x1='7' y1='7' x2='25' y2='25' stroke='%23cc0000' stroke-width='2.5'/%3E%3C/svg%3E") 16 16, not-allowed !important;
  overflow: hidden !important;
}

/* Sold out hover — keep faded, same cursor */
.pltm-accordion__body .swatch-input__input:disabled + .swatch-input__label:hover,
.pltm-accordion__body .swatch-input__input.disabled + .swatch-input__label:hover,
.pltm-accordion__body input[type="radio"]:disabled + label:hover {
  background: #f8f8f8 !important;
  color: #cccccc !important;
  border-color: #ebebeb !important;
}

/* Sold out diagonal — SVG vector line, crisp at any size */
.pltm-accordion__body .swatch-input__input:disabled + .swatch-input__label::after,
.pltm-accordion__body .swatch-input__input.disabled + .swatch-input__label::after,
.pltm-accordion__body input[type="radio"]:disabled + label::after,
.pltm-accordion__body input[type="radio"].disabled + label::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='100' x2='100' y2='0' stroke='%23cc0000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / 100% 100% !important;
}

/* ADD TO BAG — flush to bottom, zero everything */
.pltm-buy-row {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pltm-buy-row form,
.pltm-buy-row .product-form,
.pltm-buy-row .product-form__buttons {
  margin: 0 !important;
  padding: 0 !important;
}

/* Some nested element inside here (Dawn's own product-form internals) carries a bottom margin
   that isn't caught by the rules above — it collapses through and inflates the whole panel's
   height by ~10px, leaving a visible white gap below the button before the panel's own bottom
   edge instead of the button sitting flush against it. Zeroing every descendant's margin closes
   that gap without touching spacing elsewhere in the panel (title row, accordions, etc). */
.pltm-buy-row * {
  margin: 0 !important;
}

/* Hide Dawn's error message wrapper */
.pltm-buy-row .product-form__error-message-wrapper,
.pltm-buy-row [id*="error"],
.pltm-buy-row .form-status {
  display: none !important;
}

.product__info-wrapper {
  overflow: hidden !important;
}

/* Anti-flash: product-pltm.js restructures the info panel (accordions, buy row, etc.) via JS,
   which is deferred and runs a beat after first paint — without this, the browser briefly shows
   Dawn's raw untouched markup (plain "Size" label, pill swatches, shipping text, etc.) before the
   script rearranges it. Hiding the panel until product-pltm.js finishes (marked by it adding
   .pltm-panel to .product__info-container) skips straight to the finished layout instead.
   The 0.4s forced-reveal animation is a safety net only — normally product-pltm.js finishes and
   removes the hidden state well before this fires (it's now loaded right after global.js instead
   of last, so it isn't stuck waiting behind analytics/app scripts). Kept short so that even in the
   worst case (script genuinely fails), the panel doesn't stay blank for long. */
@keyframes pltm-force-reveal {
  to { visibility: visible; }
}

.template-product .product__info-wrapper:not(:has(.pltm-panel)) {
  visibility: hidden;
  animation: pltm-force-reveal 0s 0.4s forwards;
}

/* Description text — bigger and readable */
.pltm-accordion__body .product__description,
.pltm-accordion__body .product__description p,
.pltm-accordion__body .product__description * {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: #000000 !important;
}

.pltm-accordion__body .product__description {
  padding: 0.8rem 1rem !important;
}

/* SIZE + DESCRIPTION accordions — stacked on desktop, side by side on mobile. Each box keeps its
   own border (set on .pltm-accordion above) with a gap between them. The row itself matches the
   title row's left/right padding so it's not flush against the panel edge. */
.pltm-accordions-row {
  display: block !important;
  padding: 0 0.8rem !important;
  border: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* Same inherited-margin issue as .pltm-title-row above — closes the gap so SIZE/DESCRIPTION
     sit right under the title instead of floating ~15px below it. */
  margin-top: 0 !important;
}

/* Desktop only: closed boxes are narrower (don't span the row); opening one expands it to fill
   the row's full width, matching the reference — mobile keeps its own flex:1 equal-width tabs
   (see the media query below), so this is scoped out of mobile entirely rather than overridden.
   SIZE stays full-width/stacked on its own row (unchanged from before); DESCRIPTION and SHIPPING
   (accordion order is always SIZE, DESCRIPTION, SHIPPING, hence nth-child) sit side by side on
   the row below it, wrapping there via flex-wrap rather than needing a separate nested row. */
@media screen and (min-width: 750px) {
  .pltm-accordions-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    /* Same fix as mobile below: align-items defaults to stretch, which pads out whichever box
       has less bottom margin to match its taller sibling — DESCRIPTION (not :last-child) keeps
       its 0.6rem margin while SHIPPING (:last-child) doesn't, so SHIPPING was the one getting
       stretched with empty bordered space at the bottom. flex-start sizes each box to its own
       content instead. */
    align-items: flex-start !important;
  }

  .pltm-accordions-row .pltm-accordion {
    width: 100% !important;
  }

  .pltm-accordions-row .pltm-accordion:nth-child(2),
  .pltm-accordions-row .pltm-accordion:nth-child(3) {
    width: calc(50% - 0.2rem) !important;
  }

  .pltm-accordions-row .pltm-accordion.pltm-open {
    width: 100% !important;
  }
}

/* Mobile: side by side — must come after the block rule above. SIZE + DESCRIPTION keep their
   existing side-by-side pairing; SHIPPING (3rd) wraps onto its own full-width row below them. */
@media screen and (max-width: 749px) {
  .pltm-accordions-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    /* align-items defaults to stretch, which sizes each flex item to the row's cross-size MINUS
       that item's own margin-bottom. SIZE keeps its 0.6rem margin (for the desktop stacked gap)
       while DESCRIPTION's is reset to 0 via :last-child — under stretch that made them genuinely
       different heights (whichever isn't last-child loses 0.6rem of box height to its margin).
       flex-start makes each box size to its own content instead, independent of sibling margins. */
    align-items: flex-start !important;
    gap: 0.4rem !important;
    padding: 0.4rem !important;
    border: none !important;
    /* Desktop narrows the row to 75% — mobile keeps the full-width side-by-side tabs. */
    width: 100% !important;
  }

  /* SIZE (1st) is full width on its own row, matching desktop; DESCRIPTION + SHIPPING (2nd/3rd)
     pair up side by side on the row below it — same pairing as desktop now, not the mobile-only
     SIZE+DESCRIPTION pairing this used to have. */
  .pltm-accordions-row .pltm-accordion {
    flex: none !important;
    width: 100% !important;
  }

  .pltm-accordions-row .pltm-accordion:nth-child(2),
  .pltm-accordions-row .pltm-accordion:nth-child(3) {
    width: calc(50% - 0.2rem) !important;
  }

  .pltm-accordions-row .pltm-accordion__trigger {
    width: 100% !important;
    justify-content: center !important;
  }

  .pltm-accordions-row .pltm-accordion.pltm-open .pltm-accordion__trigger {
    justify-content: flex-start !important;
  }

  /* Mowalola-style, mobile only: opening SIZE or DESCRIPTION takes over the whole row, with the
     closed sibling shrinking away rather than vanishing instantly — this is the "text starts
     small, box widens" animation from the reference recording. display:none can't be animated at
     all (browsers snap it, no transition), so the sibling collapses to width:0 instead — width IS
     a reliably animatable property — while opacity fades it out and pointer-events keeps it
     unclickable the moment it starts shrinking. The transition itself lives on the base
     .pltm-accordion rule above so both directions (opening and closing) animate the same way. */
  .pltm-accordions-row:has(.pltm-accordion.pltm-open) .pltm-accordion:not(.pltm-open) {
    width: 0 !important;
    border-width: 0 !important;
    opacity: 0;
    pointer-events: none;
  }

  .pltm-accordions-row:has(.pltm-accordion.pltm-open) .pltm-accordion.pltm-open {
    width: 100% !important;
  }
}

/* ADD TO BAG button — Dawn's stock .button class carries min-height: 4.5rem (~72px) which
   otherwise overrides the padding below regardless of how it's set, since min-height always wins
   over padding-driven sizing, so it's neutralized here and height is fully padding-driven instead. */
.pltm-buy-row .button,
.pltm-buy-row button[name="add"],
.pltm-buy-row .product-form__submit {
  width: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.6rem 1rem !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  cursor: pointer;
  transition: background 0.2s ease !important;
}

.pltm-buy-row .button:hover,
.pltm-buy-row button[name="add"]:hover,
.pltm-buy-row .product-form__submit:hover {
  background: #888888 !important;
  color: #ffffff !important;
}

/* Hide Share everywhere on product page */
.product__share-summary,
share-button,
.share-button,
.product-form__buttons .share-button {
  display: none !important;
}

/* Hide dynamic checkout + quantity on product page */
.product-form .shopify-payment-button,
.product-form__quantity {
  display: none !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.button,
.button--primary,
.product-form__submit {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
}

.button:hover,
.button--primary:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
}

.button--secondary {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  border-radius: 0 !important;
  text-transform: uppercase;
}

/* ============================================================
   FORMS / INPUTS
   ============================================================ */

input,
textarea,
select,
.select__select,
.field__input {
  border-radius: 0 !important;
  border-color: #d0d0d0 !important;
  color: #000000 !important;
  background: #ffffff !important;
}

.field__label {
  color: #888888 !important;
  font-size: 0.75rem;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer,
.footer-block {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-top: 1px solid #e8e8e8 !important;
}

.footer__content-top,
.footer__content-bottom,
.footer-block__heading,
.footer-block p,
.footer-block a,
.footer-block li {
  color: #000000 !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-block a:hover {
  color: #555555 !important;
}

/* Hide "Powered by Shopify" */
.powered-by-link,
.footer__copyright .powered-by-link,
a[href*="shopify.com"]:not(.pltm-sidebar__footer-link) {
  display: none !important;
}

/* ============================================================
   CART DRAWER
   ============================================================ */

.cart-drawer,
.cart-notification {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.cart-drawer__header {
  border-bottom: 1px solid #e8e8e8 !important;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
  border-radius: 0 !important;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   MISC
   ============================================================ */

.shopify-policy__container {
  padding: 80px 1rem;
}

a {
  color: #000000;
}

a:hover {
  color: #555555;
}

/* ============================================================
   HIDE HEADER ON HOMEPAGE ONLY
   ============================================================ */

[data-template="index"] .section-header,
[data-template="index"] sticky-header,
[data-template="index"] .header-wrapper {
  display: none !important;
}

/* ============================================================
   PRODUCT CARD — hover arrow to cycle images
   ============================================================ */

.card-wrapper {
  position: relative !important;
}

/* Disable hover effect on single-image cards */
.card-wrapper .media--hover-effect > img:first-child { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Two things trap the slider arrows' z-index so it can never beat Dawn's invisible whole-card
   "stretched link" (.card__heading a::after, z-index: 1, which lives in a sibling of
   .card__inner): (1) .card__inner's `gradient` class applies `transform: perspective(0)`, and
   any transform unconditionally creates a new stacking context; (2) even past that, Dawn's own
   .card__media has `z-index: 0` (a Safari border-rendering fix in component-card.css) which
   ALSO creates its own stacking context, sealing the arrows off from ever competing outside it —
   no z-index value on the arrows themselves, however high, can escape either boundary.
   The only escape is to elevate .card__inner itself as a whole unit so IT (not the arrows
   individually) wins against the sibling stretched link. This necessarily also lifts the plain
   photo pixels above that same stretched link, so "click the photo to visit the product" is
   restored explicitly in JS instead (see assets/custom.js) rather than relying on the link. */
.card__inner:has(.pltm-card-slider) {
  z-index: 2;
}

/* For card--standard.card--media, Dawn hides the *contents* of .card__inner > .card__content
   (its title/badge get display:none — see component-card.css) but never disables pointer-events
   on the now-empty container itself. That empty box still sits in normal flow directly after
   .card__media (both children of .card__inner) and paints on top of it, so it silently swallows
   every click meant for our slider arrows underneath — no z-index involved, just DOM order. */
.card--standard.card--media .card__inner > .card__content {
  pointer-events: none !important;
}

/* Per-card image slider */
.pltm-card-slider {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* transform: translateZ(0) + will-change force this onto its own GPU compositing layer. Without
   it, scrolling this element (nested inside an absolutely-positioned ancestor, combined with
   scroll-snap-type below) hits a genuine Chromium rendering bug: scrollLeft updates, layout
   correctly recalculates every child's position (getBoundingClientRect reflects the new slide),
   but the browser never repaints the visible pixels — the displayed image stays frozen on
   whatever slide was showing at page load, even though every piece of DOM state says it changed.
   Confirmed via byte-identical before/after screenshots without this fix, and a genuinely
   different image once it's added. */
.pltm-card-slides {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  transform: translateZ(0) !important;
  will-change: scroll-position !important;
}
.pltm-card-slides::-webkit-scrollbar { display: none !important; }

.pltm-card-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  scroll-snap-align: start !important;
}

.pltm-card-media {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

.pltm-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
}

/* Position arrows — match old pltm-card-arrow position exactly */
/* isolation forces this element to be its own stacking context, so its z-index is compared
   directly against Dawn's invisible full-card "stretched link" overlay
   (.card__heading a::after, z-index: 1) at their shared ancestor context — without it, whether
   the arrows win a click depends on which ancestor establishes the stacking context, which is
   ambiguous here and was letting that invisible link swallow arrow clicks. This container still
   has pointer-events: none, so clicks in the gaps between the two buttons correctly fall through
   to the stretched link (photo tap still navigates to the product) — only the actual button
   hitboxes (pointer-events: auto below) intercept clicks. */
.pltm-card-slider .slider-buttons {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 !important;
  isolation: isolate !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.pltm-card-slider .slider-button {
  pointer-events: auto !important;
}

/* Card slider arrows — same style as old pltm-card-arrow */
/* Hit target is intentionally much larger than the visible glyph (min 44x44px per WCAG/Apple
   touch-target guidance) — the glyph alone was only a few px wide and easy to miss-tap on mobile. */
.pltm-card-slider .slider-button {
  width: auto !important;
  height: auto !important;
  min-width: 44px !important;
  min-height: 44px !important;
  background: none !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.15) !important;
}

.pltm-card-slider .slider-button[disabled] {
  /* Solid black even when disabled (nothing further in that direction) — still non-clickable
     via pointer-events/cursor, just no faded/grey visual distinction, per explicit preference. */
  opacity: 1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Arrows only reveal on hover — strictly hover, not :focus-within. A button that's been clicked
   keeps browser focus even after the mouse leaves, so :focus-within would keep that one card's
   arrows stuck visible until something else takes focus (visible as multiple unrelated cards
   showing arrows at once, whichever ones were last clicked). Pure :hover means arrows disappear
   the instant the cursor leaves the card, no residual focus state. Scoped to (hover: hover) so
   touch devices — which can't truly "hover" — keep the arrows visible instead of trapping them
   behind an unreachable hover state; touch users already have swipe on the gallery itself.
   NOTE: this uses a direct !important opacity override on the :hover rule, not a CSS animation —
   animations sit BELOW author !important declarations in the cascade, so an animation here would
   silently lose to the base "opacity: 0 !important" rule and never actually reveal anything. The
   fade is instead a plain `transition` on the base rule, which does respect whichever value wins
   the cascade. */
@media (hover: hover) and (pointer: fine) {
  /* Every card starts on slide 1, so "previous" is disabled from the very first paint (nothing
     to go back to). The old rule excluded [disabled] buttons from this default-hidden state,
     so the disabled "previous" arrow sat there permanently dimmed instead of hiding like "next"
     does — hiding ALL buttons by default here, then revealing disabled ones dimmed and enabled
     ones fully on hover, fixes that. */
  .pltm-card-slider .slider-button,
  .pltm-card-slider .slider-button[disabled] {
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
  }

  .card-wrapper:hover .pltm-card-slider .slider-button:not([disabled]),
  .card-wrapper:hover .pltm-card-slider .slider-button[disabled] {
    opacity: 1 !important;
  }
}

/* Touch devices get no arrows at all — swipe the photo itself to change images instead (native
   scroll-snap on .pltm-card-slides already handles this, no JS needed). Arrows only make sense
   as a hover affordance; there's no hover on touch, so per explicit preference they're removed
   entirely there rather than always-on or tap-to-reveal. */
@media (hover: none), (pointer: coarse) {
  .pltm-card-slider .slider-buttons {
    display: none !important;
  }
}

/* Clean SVG chevrons instead of '<'/'>' text glyphs — those render as flat, stretched-looking
   math-comparison symbols in this site's font at large sizes, not proper arrows. Matches the same
   chevron already used for the product-page image slider arrows. */
.pltm-card-slider .slider-button--prev::after {
  content: '' !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat !important;
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

.pltm-card-slider .slider-button--next::after {
  content: '' !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat !important;
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* ============================================================
   DARK SIDEBAR — mowalola style
   ============================================================ */

.pltm-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  max-width: 490px;
  background: #430914 !important;
  color: #ffffff !important;
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  font-family: 'Play', sans-serif;
}

.pltm-sidebar__layout {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
}

.pltm-sidebar__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 1.4rem 2rem 1.5rem;
  box-sizing: border-box;
  min-width: 0;
}

/* Dedicated X column — blank top to bottom, only the X centered */
.pltm-sidebar__close-col {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pltm-sidebar.is-open {
  transform: translateX(0);
}

/* Children: white text, transparent backgrounds */
.pltm-sidebar * {
  color: #ffffff !important;
  background-color: transparent !important;
  font-family: 'Play', sans-serif !important;
  border-color: rgba(255,255,255,0.2) !important;
}

/* Overlay behind sidebar */
.pltm-sidebar__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

.pltm-sidebar__overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Strip — full-height fixed left bar: contains cart icon at top + toggle button.
   No CSS viewport unit (vh/svh/dvh) reliably matches the hero banner's own rendered height on iOS
   Safari — vh/svh are static and can under- or overshoot depending on whether the toolbar happens
   to be showing when the page loads, and dvh tracks the toolbar live but resizes the banner
   mid-scroll, which visibly "zoomed" the cover-fit image. Instead, custom.js reads the hero's own
   getBoundingClientRect().height directly and writes it to --pltm-strip-height, so the strip always
   matches the hero's *actual* rendered height exactly, on any screen size, growing 1:1 with scroll
   distance until it covers the full viewport. The var's fallback (before JS runs, or if it can't
   find a hero — e.g. non-homepage pages) keeps the strip filling the visible screen. */
.pltm-sidebar__strip {
  position: fixed;
  left: 0;
  top: 0;
  width: 40px;
  height: var(--pltm-strip-height, 100svh);
  background: #430914;
  z-index: 1998;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  transition: height 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@media screen and (min-width: 750px) {
  .pltm-sidebar__strip {
    height: var(--pltm-strip-height, 100vh);
  }
}

/* Push page content right so strip doesn't overlap — excludes the password page, which uses a
   completely separate layout that never renders the sidebar strip at all, so this padding was
   just pushing everything right there with nothing on the left to justify it. */
body:not(.password) {
  padding-left: 40px !important;
}

.pltm-sidebar__overlay,
.pltm-sidebar__strip {
  left: 0 !important;
}

/* Hide strip when sidebar is open */
.pltm-sidebar.is-open ~ .pltm-sidebar__overlay ~ .pltm-sidebar__strip {
  opacity: 0;
  pointer-events: none;
}

/* BAG text cart at top of strip */
.pltm-strip__cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0 8px;
  color: #ffffff !important;
  text-decoration: none !important;
  flex-shrink: 0;
  background: transparent;
  border: none;
  appearance: none;
  gap: 2px;
}

.pltm-strip__bag-label {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff !important;
  letter-spacing: 0.12em;
  line-height: 1;
}

.pltm-strip__cart-count {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff !important;
  line-height: 1;
}

/* Toggle button — fills remaining strip height */
.pltm-sidebar__toggle {
  background: transparent !important;
  color: #ffffff !important;
  border: none;
  flex: 1;
  width: 100%;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  transition: opacity 0.2s;
}

/* Sidebar top row */
.pltm-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  gap: 0.5rem;
}

.pltm-sidebar__header-left {
  flex: 1;
}

.pltm-sidebar__header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pltm-sidebar__brand {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-decoration: none !important;
}

.pltm-sidebar__logo {
  max-height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}

.pltm-sidebar__header-icons {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.pltm-sidebar__icon {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none !important;
  font-size: 0.7rem;
}

.pltm-sidebar__bag-text {
  background: none !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.pltm-sidebar__icon svg {
  stroke: #ffffff !important;
}

.pltm-sidebar__cart-count {
  font-size: 0.7rem;
}

.pltm-sidebar__close {
  background: none !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 2.6rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important;
}

/* Search */
.pltm-sidebar__search {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.35) !important;
  margin-bottom: 1.2rem;
  background: none !important;
}

.pltm-sidebar__search-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.4rem 0;
  background: transparent !important;
}

.pltm-sidebar__search-input::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

.pltm-sidebar__search-btn {
  background: none !important;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 0 0 0 0.4rem;
}

/* Nav links */
.pltm-sidebar__nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pltm-sidebar__link {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.pltm-sidebar__link:hover {
  opacity: 0.75;
}

/* Parent row: the link text navigates normally, the chevron button (separately) toggles the
   sub-links — previously the whole row intercepted the click to toggle, which navigation. */
.pltm-sidebar__link--parent {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.pltm-sidebar__link--parent-text {
  flex: 1;
  color: inherit;
  text-decoration: none !important;
}

.pltm-sidebar__chevron-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0.5rem 0 0.5rem 0.75rem;
  margin: -0.5rem 0;
}

.pltm-sidebar__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.pltm-sidebar__nav-group.is-open .pltm-sidebar__chevron {
  transform: rotate(180deg);
}

/* Sub-links: collapsed until the parent row is tapped. sidebar.js sets max-height inline (to the
   content's real scrollHeight on open, 0 on close) so this animates smoothly regardless of how
   many items a group has — a plain display:none/block toggle can't transition at all. */
.pltm-sidebar__sub-links {
  padding-left: 0.75rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.pltm-sidebar__link--child {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  opacity: 0.85;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Footer section — sits directly below nav */
.pltm-sidebar__footer {
  margin-top: 1.5rem;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pltm-sidebar__footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pltm-sidebar__footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.pltm-sidebar__footer-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
  display: block;
}

.pltm-sidebar__footer-link {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  padding: 0.2rem 0;
  opacity: 0.85;
  line-height: 1.4;
  white-space: nowrap;
}

.pltm-sidebar__footer-link:hover {
  opacity: 1;
}

.pltm-sidebar__newsletter-label {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
  opacity: 0.85;
}

/* Newsletter */
.pltm-sidebar__newsletter {
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.2) !important;
  padding-top: 0.8rem;
}

.pltm-sidebar__email-row {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,0.35) !important;
}

.pltm-sidebar__email-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.4rem 0;
}

.pltm-sidebar__email-input::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

.pltm-sidebar__email-btn {
  background: none !important;
  border: none;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 0.4rem 0 0.4rem 0.5rem;
}

/* Social */
.pltm-sidebar__social {
  margin-top: 0.8rem;
  display: flex;
  gap: 1rem;
}

.pltm-sidebar__social-link {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-decoration: none !important;
}

.pltm-sidebar__copy {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ============================================================
   PRODUCT CARDS — sold out: hide price, show SOLD OUT in red
   ============================================================ */

/* Hide all price content for sold-out cards */
.card-wrapper .price--sold-out .price__container,
.card-wrapper .price--sold-out .price__badge-sold-out {
  display: none !important;
}

/* Inject SOLD OUT text — red + strikethrough */
.card-wrapper .price--sold-out::before {
  content: 'SOLD OUT';
  display: block;
  color: #cc0000 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: line-through !important;
}

/* Product title — red + strikethrough when sold out */
.card-wrapper:has(.price--sold-out) .card__heading a,
.card-wrapper:has(.price--sold-out) .card__heading {
  color: #cc0000 !important;
  text-decoration: line-through !important;
}

/* ============================================================
   FEATURED COLLECTION — align heading with full-width product grid
   ============================================================ */
@media screen and (max-width: 989px) {
  .collection__title,
  .collection__title .title,
  .collection__title h2 {
    text-align: center !important;
  }
}

@media screen and (min-width: 990px) {
  .collection--full-width .collection__title {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    text-align: left !important;
  }
  .collection--full-width .collection__title .title,
  .collection--full-width .collection__title h2 {
    text-align: left !important;
    margin-left: 0 !important;
  }
}

/* ============================================================
   FOOTER — mowalola style
   ============================================================ */

.pltm-footer {
  background: #fff;
  font-family: inherit;
  border-top: 0.5px solid #ddd;
}

/* Main row: stretches so brand + copyright share same height */
.pltm-footer__main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 32px 1.5rem 28px;
}

/* Brand: column, logo top → instagram pushed to bottom */
.pltm-footer__brand {
  flex: 0 0 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pltm-footer__logo-link {
  display: block;
  margin-bottom: 14px;
  text-decoration: none;
}

.pltm-footer__logo-img {
  max-height: 32px;
  width: auto;
}

.pltm-footer__logo-text {
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #111;
}

/* Socials stacked BELOW logo */
.pltm-footer__socials {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pltm-footer__social-link {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #111;
}

.pltm-footer__social-link:hover { opacity: 0.6; }

/* Right section: fills remaining space, centers newsletter + info + contact */
.pltm-footer__right-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 100px;
  flex: 1 1 auto;
}

/* Newsletter */
.pltm-footer__newsletter {
  width: 300px;
  flex-shrink: 0;
  text-align: center;
}

.pltm-footer__section-label {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  margin-bottom: 16px;
  font-weight: 400;
}

.pltm-footer__email-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pltm-footer__email-input {
  border: none;
  border-bottom: 1px solid #aaa;
  padding: 8px 0;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  background: transparent;
  outline: none;
  width: 100%;
  color: #111;
  font-family: inherit;
}

.pltm-footer__email-input::placeholder { color: #aaa; }

.pltm-footer__email-btn {
  background: #111;
  color: #fff;
  border: none;
  padding: 12px 0;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  transition: opacity 0.2s;
}

.pltm-footer__email-btn:hover { opacity: 0.75; }

.pltm-footer__success,
.pltm-footer__error {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  margin: 0;
}

.pltm-footer__col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pltm-footer__col-heading {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
}

.pltm-footer__col-link {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #111;
}

.pltm-footer__col-link:hover { opacity: 0.6; }

.pltm-footer__col-label {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
  display: block;
}

/* Copyright: sits in main row, self-aligns to bottom-right */
.pltm-footer__copy {
  align-self: flex-end;
  flex: 0 0 auto;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111;
}

.pltm-footer__copy a {
  color: #111;
  text-decoration: none;
}

.pltm-footer__copy a:hover { opacity: 0.6; }

/* Mobile footer */
@media screen and (max-width: 749px) {
  .pltm-footer {
    border-top: none !important;
  }

  .pltm-footer__main {
    flex-direction: column;
    align-items: center;
    padding: 28px 1.5rem 12px;
    gap: 20px;
  }

  /* Center brand block */
  .pltm-footer__brand {
    flex: none;
    width: 100%;
    text-align: center;
  }

  .pltm-footer__logo-link {
    display: flex;
    justify-content: center;
  }

  .pltm-footer__socials {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }

  /* Right section stacks, all centered */
  .pltm-footer__right-section {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    flex: none;
    width: 100%;
  }

  .pltm-footer__newsletter {
    width: 100%;
    text-align: center;
  }

  .pltm-footer__col {
    align-items: center;
    text-align: center;
  }

  .pltm-footer__col-label {
    text-align: center;
  }

  .pltm-footer__copy {
    align-self: center;
    margin-top: 8px;
  }
}

/* ── MOBILE PRODUCT INFO — override must come after desktop position:fixed rule ── */
@media screen and (max-width: 749px) {
  .product__info-wrapper,
  .product__info-wrapper.grid__item {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border: none !important;
    border-top: 1px solid #e0e0e0 !important;
    background: #ffffff !important;
    padding: 0 !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/* ============================================================
   INFO PAGE ACCORDION — mowalola style
   Scoped to this specific section instance (not .accordion/.collapsible-content generally),
   since other pages could reuse Dawn's native collapsible-content section with its default look.
   ============================================================ */

/* Full width, left-aligned — Dawn's own narrow-column wrapper otherwise centers this with a
   ~1174px max-width. */
[id$="__info_accordion"] .collapsible-content-wrapper-narrow {
  margin: 0 !important;
  max-width: 100% !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* No divider lines between/around rows */
[id$="__info_accordion"] .accordion {
  border-top: none !important;
  border-bottom: none !important;
  margin-top: 0 !important;
}

/* Body text inside each row — this theme's root font-size is 10px (not the usual 16px), so an
   0.85rem here previously rendered as an unreadable 8.5px; 1.3rem lands at a normal 13px,
   proportionate to the row heading's own 15px. */
[id$="__info_accordion"] .accordion__content,
[id$="__info_accordion"] .accordion__content p,
[id$="__info_accordion"] .accordion__content li {
  font-size: 1.3rem !important;
  line-height: 1.6 !important;
}

/* Bold emphasis explicit — at the tiny size this was rendering at before, 700 vs 400 was nearly
   imperceptible even though it computed correctly; making it explicit here is just extra
   insurance now that the text is large enough to actually show the weight difference. */
[id$="__info_accordion"] .accordion__content strong,
[id$="__info_accordion"] .accordion__content b {
  font-weight: 700 !important;
}

/* Caret → plus/× — hide Dawn's own chevron icon and draw a "+" that rotates into an "×" on open,
   instead of trying to reskin the inline SVG (which other sections also reuse). */
[id$="__info_accordion"] summary .icon-caret {
  display: none !important;
}

[id$="__info_accordion"] summary {
  position: relative;
}

[id$="__info_accordion"] summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

[id$="__info_accordion"] details[open] > summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* ============================================================
   PASSWORD / COMING SOON PAGE — countdown + sign-up button
   ============================================================ */

.pltm-countdown {
  margin: 0.5rem 0;
}

.pltm-countdown__value {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.pltm-countdown-signup-button {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0.9rem 2.8rem !important;
  margin-top: 0.5rem;
}

/* Password / coming-soon page — scoped directly to .email-signup-banner (a class this section
   itself always outputs) rather than body.password or .password-main. Those depend on which
   layout file actually wraps this template, which isn't reliably verifiable from here — repeated
   attempts scoped that way produced zero visible change across multiple independent checks
   (theme editor preview AND a plain incognito tab), which only makes sense if that assumption was
   wrong. Scoping to the section's own markup and making IT the full-height centering container
   sidesteps that entirely — it doesn't matter what wraps it. */
.email-signup-banner {
  /* --pltm-password-footer-height is set by custom.js from the footer's actual measured height —
     claiming a flat 100vh here pushed the footer (social icons) below the fold since the page
     total then exceeds one viewport. Subtracting the real footer height keeps everything —
     content plus footer — fitting together within a single viewport, centered as one group. */
  min-height: calc(100vh - var(--pltm-password-footer-height, 80px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.email-signup-banner .banner__content {
  width: 100%;
}

.email-signup-banner .banner--medium:not(.banner--adapt) {
  min-height: 0 !important;
}

/* No visual divider above the footer section */
.password__footer ~ hr,
hr + .password__footer,
.password-main ~ footer hr {
  display: none !important;
}

/* Logo — its own block now (was Dawn's separate main-password-header section, removed so
   everything lives in one unified section like the old theme). Bigger + a bit of breathing room
   above it, matching the old theme's more prominent wordmark placement. */
.pltm-password-logo-block {
  padding-top: 2rem;
  text-align: center;
}

.pltm-password-logo-block .password-logo {
  max-width: 220px !important;
}

/* Password link — a plain underlined text link instead of Dawn's default padlock-icon button.
   This is now a plain <details> (no custom element wrapper — see the section file for why),
   scoped via .pltm-password-modal. Deliberately not touching display on the <details> itself —
   it relies on its own native open/closed content-visibility behavior, and forcing a display
   value onto it risks interfering with that. Centering only happens on <summary>
   (.modal__toggle) and the div inside it, which carry no such special behavior. */
.email-signup-banner .pltm-password-modal {
  width: 100%;
  margin: 0.5rem 0;
}

.email-signup-banner .pltm-password-modal .modal__toggle {
  display: flex;
  width: 100%;
  justify-content: center;
}

.email-signup-banner .pltm-password-modal .modal__toggle-open {
  font-size: 0.95rem;
  display: flex;
  justify-content: center;
  width: auto;
}

.pltm-password-policy-links {
  text-align: center;
}

.pltm-password-policy-link {
  display: inline-block;
  font-size: 0.85rem;
  color: rgba(var(--color-foreground), 0.75);
}

/* Hide "Are you the store owner? Log in here" in the footer — not something customers need */
.password__footer-login {
  display: none !important;
}

/* Paragraph — center + lighter weight (was bolded to full <strong> weight) */
.email-signup-banner .newsletter__subheading,
.email-signup-banner .newsletter__subheading * {
  text-align: center !important;
  font-weight: 500 !important;
}

/* ============================================================
   PASSWORD ENTRY POPUP — reference-style: light grey input,
   plain-case "Submit" button
   ============================================================ */

.password-modal__content-heading {
  font-weight: 600 !important;
  font-size: 1.6rem !important;
}

.password-field .field__input {
  background-color: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
}

.password-button {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}