/** Shopify CDN: Minification failed

Line 372:14 Unexpected "{"
Line 372:24 Expected ":"
Line 372:52 Unexpected "{"

**/
/*
  TDE CRO Stylesheet
  thedailyedited.com — Dawn 15.4.1 — CRO Testing theme

  Contents:
  1. TDE Brand variables (also declared in css-custom-properties.liquid)
  2. Announcement bar — sticky
  3. Trust bar section
  4. ATC button upgrades
  5. Sticky ATC bar (PDP)
  6. Payment icons + Afterpay messaging
  7. Personalisation "Make It Yours" highlight box
  8. Social proof line
  9. Product card — personalisation badge
  10. Email capture popup
  11. Cart free shipping progress bar
*/

/* ========================================
   1. TDE Brand Variables
   ======================================== */

:root {
  --tde-black:   #221f20;
  --tde-feather: #F7F7F7;
  --tde-sand:    #F2E9DB;
  --tde-stone:   #ebe9e1;
  --tde-white:   #FFFFFF;
  --tde-sale:    #D05A00;  /* warm orange — not red, on-brand for promotions */

  --tde-font: 'Spartan', sans-serif;

  --tde-transition-fast: 200ms ease;
  --tde-atc-height-mobile: 68px;
}

/* ========================================
   2. Announcement Bar — Sticky
   ======================================== */

.shopify-section--announcement-bar {
  position: sticky;
  top: 0;
  z-index: 200;
}

.announcement-bar-wrap {
  background-color: var(--tde-black);
}

.announcement-bar {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-bar__message,
.announcement-bar__link {
  color: var(--tde-white) !important;
  font-family: var(--tde-font);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-align: center;
}

.announcement-bar__link:hover {
  opacity: 0.8;
}

/* ========================================
   3. Trust Bar Section
   ======================================== */

.tde-trust-bar {
  background-color: var(--tde-sand);
  padding: 14px 20px;
  width: 100%;
}

.tde-trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tde-trust-bar__inner::-webkit-scrollbar {
  display: none;
}

.tde-trust-bar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tde-trust-bar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--tde-black);
}

.tde-trust-bar__text {
  font-family: var(--tde-font);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--tde-black);
}

@media screen and (max-width: 749px) {
  .tde-trust-bar__inner {
    justify-content: flex-start;
    gap: 24px;
    padding-bottom: 4px;
  }

  .tde-trust-bar__text {
    font-size: 1.0rem;
  }
}

/* ========================================
   4. ATC Button Upgrades
   ======================================== */

/* Primary ATC button */
.product-form__submit.button--primary,
.product-form__submit.button.button--full-width.button--primary {
  background-color: var(--tde-black) !important;
  color: var(--tde-white) !important;
  border: none !important;
  border-radius: 0 !important;
  min-height: 52px;
  width: 100%;
  font-family: var(--tde-font);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color var(--tde-transition-fast), color var(--tde-transition-fast);
  cursor: pointer;
}

.product-form__submit.button--primary:hover:not([disabled]),
.product-form__submit.button.button--full-width.button--primary:hover:not([disabled]) {
  background-color: var(--tde-sand) !important;
  color: var(--tde-black) !important;
}

.product-form__submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Personalise button — intentionally unstyled; the monogram app controls its own styling */

/* ========================================
   5. Sticky ATC Bar (PDP)
   ======================================== */

.tde-sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background-color: var(--tde-white);
  border-top: 1px solid var(--tde-stone);
  padding: 10px 16px;
  transform: translateY(100%);
  transition: transform 300ms ease;
  box-shadow: 0 -4px 12px rgba(34, 31, 32, 0.08);
}

.tde-sticky-atc.is-visible {
  transform: translateY(0);
}

.tde-sticky-atc__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.tde-sticky-atc__info {
  flex: 1;
  min-width: 0;
}

.tde-sticky-atc__title {
  font-family: var(--tde-font);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--tde-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tde-sticky-atc__price {
  font-family: var(--tde-font);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--tde-black);
}

.tde-sticky-atc__btn {
  background-color: var(--tde-black);
  color: var(--tde-white);
  border: none;
  border-radius: 0;
  padding: 14px 24px;
  font-family: var(--tde-font);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--tde-transition-fast), color var(--tde-transition-fast);
}

.tde-sticky-atc__btn:hover {
  background-color: var(--tde-sand);
  color: var(--tde-black);
}

@media screen and (max-width: 749px) {
  .tde-sticky-atc {
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .tde-sticky-atc__btn {
    padding: 14px 16px;
    font-size: 1.1rem;
  }
}

@media screen and (min-width: 750px) {
  .tde-sticky-atc {
    display: none;
  }
}

/* ========================================
   6. Payment Icons + Afterpay Messaging
   ======================================== */

.tde-payment-info {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--tde-stone);
}

.tde-payment-info__afterpay {
  font-family: var(--tde-font);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--tde-black);
  margin-bottom: 10px;
  text-align: center;
}

.tde-payment-info__icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tde-payment-info__icons svg {
  height: 24px;
  width: auto;
  display: block;
}

/* ========================================
   7. Personalisation "Make It Yours" Box
   ======================================== */

.tde-personalise-cta {
  background-color: var(--tde-sand);
  border: 1px solid var(--tde-black);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.tde-personalise-cta__heading {
  font-family: var(--tde-font);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--tde-black);
  margin: 0 0 4px;
  letter-spacing: 0.04em;
}

.tde-personalise-cta__sub {
  font-family: var(--tde-font);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--tde-black);
  margin: 0;
}

/* ========================================
   8. Social Proof Line
   ======================================== */

.tde-social-proof {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.tde-social-proof__stars {
  color: #c0a060;  /* warm gold — premium feel */
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

.tde-social-proof__text {
  font-family: var(--tde-font);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--tde-black);
}

/* ========================================
   9. Product Card — Personalisation Badge
   ======================================== */

.tde-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  background-color: var(--tde-sand);
  color: var(--tde-black);
  font-family: var(--tde-font);
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  pointer-events: none;
}

/* Sale badge overrides — use warm orange, not red */
.badge.color-{{ settings.sale_badge_color_scheme }} {
  background-color: var(--tde-sale) !important;
  color: var(--tde-white) !important;
}

/* ========================================
   10. Email Capture Popup
   ======================================== */

.tde-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(34, 31, 32, 0.5);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  padding: 16px;
}

.tde-popup-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.tde-popup {
  background-color: var(--tde-feather);
  max-width: 480px;
  width: 100%;
  padding: 40px 32px 32px;
  position: relative;
  transform: translateY(16px);
  transition: transform 300ms ease;
}

.tde-popup-overlay.is-visible .tde-popup {
  transform: translateY(0);
}

.tde-popup__close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
  color: var(--tde-black);
  padding: 4px 8px;
  font-family: var(--tde-font);
  font-weight: 300;
}

.tde-popup__close:hover {
  opacity: 0.6;
}

.tde-popup__heading {
  font-family: var(--tde-font);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--tde-black);
  letter-spacing: 0.02em;
  margin: 0 0 10px;
  line-height: 1.2;
}

.tde-popup__sub {
  font-family: var(--tde-font);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--tde-black);
  margin: 0 0 24px;
  line-height: 1.5;
}

.tde-popup__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tde-popup__input {
  border: 1.5px solid var(--tde-black);
  border-radius: 0;
  padding: 13px 16px;
  font-family: var(--tde-font);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--tde-black);
  background: var(--tde-white);
  width: 100%;
  outline: none;
}

.tde-popup__input:focus {
  border-color: var(--tde-black);
  box-shadow: 0 0 0 2px rgba(34,31,32,0.12);
}

.tde-popup__submit {
  background-color: var(--tde-black);
  color: var(--tde-white);
  border: none;
  border-radius: 0;
  padding: 14px 16px;
  font-family: var(--tde-font);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  width: 100%;
  transition: background-color var(--tde-transition-fast), color var(--tde-transition-fast);
}

.tde-popup__submit:hover {
  background-color: var(--tde-sand);
  color: var(--tde-black);
}

.tde-popup__dismiss {
  display: block;
  text-align: center;
  font-family: var(--tde-font);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--tde-black);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  padding: 8px 0 0;
}

.tde-popup__dismiss:hover {
  opacity: 0.6;
}

@media screen and (max-width: 480px) {
  .tde-popup {
    padding: 36px 20px 24px;
  }

  .tde-popup__heading {
    font-size: 1.8rem;
  }
}

/* ========================================
   11. Cart Free Shipping Progress Bar
   ======================================== */

.tde-shipping-bar {
  background-color: var(--tde-feather);
  padding: 14px 16px;
  border-bottom: 1px solid var(--tde-stone);
}

.tde-shipping-bar__msg {
  font-family: var(--tde-font);
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--tde-black);
  text-align: center;
  margin: 0 0 8px;
}

.tde-shipping-bar__msg strong {
  font-weight: 700;
}

.tde-shipping-bar__track {
  background-color: var(--tde-stone);
  height: 4px;
  width: 100%;
  overflow: hidden;
}

.tde-shipping-bar__fill {
  height: 100%;
  background-color: var(--tde-black);
  transition: width 400ms ease;
}

/* ========================================
   PLP Colour Swatches
   ======================================== */

.tde-plp-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 0 2px;
}

.tde-plp-swatch {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid transparent;
  outline: 1.5px solid transparent;
  outline-offset: 1px;
  transition: outline-color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.tde-plp-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.tde-plp-swatch:hover {
  outline-color: var(--tde-black, #221f20);
}

.tde-plp-swatch.is-active {
  outline-color: var(--tde-black, #221f20);
}

/* Overflow indicator — shows "+N more" when > 6 swatches */
.tde-plp-swatches__more {
  font-family: var(--tde-font, sans-serif);
  font-size: 1.0rem;
  color: var(--tde-stone, #888);
  line-height: 20px;
  align-self: center;
}

/* Cart trust line */
.tde-cart-trust {
  text-align: center;
  padding: 12px 16px;
  font-family: var(--tde-font);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--tde-black);
  letter-spacing: 0.03em;
  border-top: 1px solid var(--tde-stone);
}

/* ========================================
   12. Product media — white background
   Override Dawn's default grey placeholder on product images
   ======================================== */
.product__media-wrapper .media {
  background-color: #ffffff;
}

/* ========================================
   13. Product section — mobile top padding
   Desktop keeps padding_top: 28px from section settings.
   On mobile, remove the scaled-down (21px) version so the
   image sits flush with the header spacer, matching the
   tighter feel preferred on small screens.
   ======================================== */
@media screen and (max-width: 749px) {
  .vue-product {
    padding-top: 0 !important;
  }
}

/* ========================================
   14. Product gallery — reveal desktop thumbnail nav
   The Vue Gallery component already builds a fully synced
   Splide thumbnail nav, but hardcodes it hidden via inline
   style regardless of the section's "Thumbnails" layout
   setting. Splide destroys the thumbnail instance below
   640px on its own, so this is scoped to match — mobile is
   intentionally left untouched (single swipeable image).
   ======================================== */
@media screen and (min-width: 641px) {
  .product--thumbnail .gallery__thumbnails {
    display: block !important;
  }
}

/* Force 3:4 thumbnail crop — Splide otherwise sizes the slide box to each
   source image's natural aspect ratio, so mixed image shapes produce
   inconsistent thumbnail heights. */
.gallery__thumbnails .slide--thumbnail {
  aspect-ratio: 3 / 4;
  height: auto;
  overflow: hidden;
}

/* Halve the gap above the thumbnail strip — Shopify's auto-injected
   template.product.css sets margin: 1rem 0 2rem here by default. */
.gallery__thumbnails {
  margin-top: 0.5rem !important;
}

.gallery__thumbnails .slide--thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========================================
   15. Product gallery — mobile thumbnail nav
   The native thumbnail Splide instance is hard-destroyed by
   the Vue bundle below 640px, so mobile gets its own
   scroll-snap thumbnail strip (Dawn's slider-component),
   driven by the same click-to-navigate sync engine as the
   desktop thumbnails (assets/tde-gallery-thumbnails.js).
   ======================================== */
.tde-mobile-thumbnails {
  margin: 3px 0 0;
}

.tde-mobile-thumbnails__list {
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tde-mobile-thumbnails__item {
  flex: 0 0 64px;
  width: 64px;
  aspect-ratio: 3 / 4;
  height: auto;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
  scroll-snap-align: start;
}

.tde-mobile-thumbnails__item.is-active {
  opacity: 1;
}

.tde-mobile-thumbnails__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (min-width: 641px) {
  .tde-mobile-thumbnails {
    display: none;
  }
}

/* ========================================
   16. Desktop thumbnail nav — allow scroll past 6 items
   The native thumbnail Splide instance is configured with
   perPage: 6, arrows: false, drag: false — so products with
   more than 6 images have no way to reach the rest, since the
   track clips overflow with no scroll/drag/arrow affordance.
   Enabling native overflow scroll is independent of Splide's
   own transform-based paging (which stays inert at 0), so this
   is a safe, isolated way to make every thumbnail reachable.
   ======================================== */
@media screen and (min-width: 641px) {
  .gallery__thumbnails .splide__track {
    overflow-x: auto !important;
    scroll-behavior: smooth;
  }
}