/** Shopify CDN: Minification failed

Line 335:0 Unexpected "}"

**/
/* ============================================================
   ZFoldCases Brand Overrides — SAFE Layer
   Only: fonts, colors, hover effects, custom sections
   Does NOT touch: padding, margin, border-radius, layout
   ============================================================ */

/* ---- Brand Tokens ---- */
:root {
  --brand-black: #000000;
  --brand-gold: #FFD929;
  --brand-gold-hover: #E5C225;
  --brand-white: #FFFFFF;
  --brand-text: #1d1d1f;
  --brand-text-secondary: #6e6e73;
  --brand-text-muted: #b5b5b9;
  --brand-border: rgba(0, 0, 0, 0.08);

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ---- Global Font ---- */
body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font);
}

/* Selection */
::selection {
  background-color: var(--brand-gold);
  color: var(--brand-black);
}

/* ============================================
   UNIFORM SECTION SPACING & TITLES
   ============================================ */
/* All section titles — same size across homepage */
.section-header .title,
.title-wrapper-with-link .title,
.featured-collection .title,
h2.title {
  font-family: var(--font) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--brand-text) !important;
  line-height: 1.3 !important;
}

@media (min-width: 768px) {

  .section-header .title,
  .title-wrapper-with-link .title,
  .featured-collection .title,
  h2.title {
    font-size: 26px !important;
  }
}

/* Section descriptions */
.collection__description p,
.section-header__text,
.title-wrapper-with-link .subtitle {
  font-family: var(--font);
  font-size: 14px !important;
  color: var(--brand-text-secondary) !important;
  line-height: 1.6;
}

/* Uniform section vertical rhythm */
.section-template--index,
.shopify-section-template--index {
  margin-bottom: 0;
}

/* ============================================
   HEADER — Frosted glass on scroll
   ============================================ */
.scrolled-past-header .header-wrapper {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.82) !important;
}

/* Cart count badge — hidden */
.cart-count-bubble {
  display: none !important;
}

/* Header icons hover */
.header__icon {
  transition: background 0.25s var(--ease);
}

.header__icon:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */
.announcement-bar__message strong,
.announcement-bar__message b {
  color: var(--brand-gold);
  font-weight: 600;
}

/* ============================================
   PRODUCT CARDS — Clean & Minimal (Apple/Samsung Style)
   ============================================ */

/* Main Card Wrapper */
.card-wrapper.product-card-wrapper {
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  /* Force no border radius */
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
  height: 100% !important;
}

.card-wrapper.product-card-wrapper:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06) !important;
}

/* Internal Card structure */
.card-wrapper.product-card-wrapper .card,
.card-wrapper.product-card-wrapper .card--card {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Image container — solid soft light grey background */
.card-wrapper.product-card-wrapper .card__inner,
.card-wrapper.product-card-wrapper .card__media,
.card-wrapper.product-card-wrapper .media,
.card-wrapper.product-card-wrapper .media--transparent,
.card-wrapper.product-card-wrapper .card--standard .card__inner {
  background: #f4f4f4 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* Force no border radius */
  filter: none !important;
  /* Disable brightness dimming filter to show true #f4f4f4 color */
}

/* Disable absolute border/shadow pseudo-elements on card inner to prevent double-border/displacement issues */
.card-wrapper.product-card-wrapper .card--card:after,
.card-wrapper.product-card-wrapper .card--standard .card__inner:after {
  display: none !important;
}

.card-wrapper.product-card-wrapper .card__inner {
  border-bottom: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  position: relative !important;
}

/* Media area inside card */
.card-wrapper.product-card-wrapper .card__media {
  width: 100% !important;
  border-radius: 0 !important;
  /* Force no border radius */
}

.card-wrapper.product-card-wrapper .card__media img {
  mix-blend-mode: multiply !important;
  object-fit: contain !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  padding: 12px !important;
  border-radius: 0 !important;
  /* Force no border radius */
}

.card-wrapper.product-card-wrapper:hover .card__media img {
  transform: none !important;
  /* Disable hover zoom effect */
}

/* Card Body Content */
.card-wrapper.product-card-wrapper .card__content {
  padding: 16px !important;
  text-align: left !important;
  background: transparent !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100% !important;
}

/* Hide duplicate floating text inside image area */
.card-wrapper.product-card-wrapper .card__inner .card__content {
  display: none !important;
}

.card-wrapper.product-card-wrapper .card__information {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.card-wrapper.product-card-wrapper .card-information {
  margin-top: auto !important;
  /* Push swatches and price to the bottom of the card */
}

/* Title Styling */
.card-wrapper.product-card-wrapper .card__heading,
.card-wrapper.product-card-wrapper .card__heading a,
.card-wrapper.product-card-wrapper .card__heading .full-unstyled-link {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #1d1d1f !important;
  text-decoration: none !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  display: block !important;
  width: 100% !important;
}

.card-wrapper.product-card-wrapper .card__heading a:hover {
  color: #1d1d1f !important;
  text-decoration: none !important;
}

/* Pricing block */
.card-wrapper.product-card-wrapper .price,
.card-wrapper.product-card-wrapper .price--center,
.card-wrapper.product-card-wrapper .price__container {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  margin: 0 0 8px 0 !important;
  justify-content: flex-start !important;
  text-align: left !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

.card-wrapper.product-card-wrapper .price * {
  text-align: left !important;
  color: #1d1d1f !important;
}

.card-wrapper.product-card-wrapper .price-item--regular,
.card-wrapper.product-card-wrapper .price-item--sale {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
}

.card-wrapper.product-card-wrapper .price-item--regular s {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #86868b !important;
}

/* Badges (Sale, Sold Out) */
.card-wrapper.product-card-wrapper .card__badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
}

.card-wrapper.product-card-wrapper .badge {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

.card-wrapper.product-card-wrapper .badge.badge--bottom-left {
  background: #000000 !important;
  color: #FFD929 !important;
  border: 1px solid rgba(255, 217, 41, 0.3) !important;
}

/* Device/Color label hiding */
.card-wrapper.product-card-wrapper .product__device,
.card-wrapper.product-card-wrapper .product__color {
  display: none !important;
}
}

/* Badge — black pill */
.card__badge .badge {
  background: var(--brand-black) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font);
}

/* Add to Cart — black pill */
.quick-add__submit,
.card .quick-add button,
button[name="add"] {
  background: var(--brand-black) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  min-height: 38px;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.2s var(--ease) !important;
}

.quick-add__submit:hover,
.card .quick-add button:hover {
  background: #333 !important;
}

/* Card styles handled in PRODUCT CARDS section above */

/* ============================================
   COLLECTION CARDS — Hover only
   ============================================ */
.collection-list__item .card-wrapper {
  transition: transform 0.35s var(--ease-spring);
}

.collection-list__item .card-wrapper:hover {
  transform: translateY(-4px);
}

/* ============================================
   NEWSLETTER — Gold accents
   ============================================ */
.newsletter .newsletter-form__button {
  background-color: var(--brand-gold) !important;
  color: var(--brand-black) !important;
  font-weight: 700;
}

.newsletter .newsletter-form__button:hover {
  background-color: var(--brand-gold-hover) !important;
}

/* Newsletter title + text — uniform */
.newsletter h2 {
  font-family: var(--font) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

@media (min-width: 768px) {
  .newsletter h2 {
    font-size: 26px !important;
  }
}

.newsletter .rte p,
.newsletter p {
  font-family: var(--font);
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.6;
}

/* ============================================
   FOOTER — Premium Dark
   ============================================ */
.section-footer {
  border-top: none;
}

.footer {
  font-family: var(--font);
}

/* Headings — small uppercase pro style */
.footer h2,
.footer .footer-block__heading {
  font-family: var(--font);
  font-weight: 600;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-gold) !important;
  margin-bottom: 16px;
}

/* Footer links */
.footer .footer__list-social,
.footer a {
  transition: color 0.25s var(--ease);
}

.footer a:hover {
  color: #fff !important;
}

/* Text blocks (Independent Retailer, Business Operations) */
.footer .footer-block__details-content.rte,
.footer .footer-block__details-content.rte p,
.footer .footer-block__details-content,
.footer .footer-block__details-content p {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.footer .footer-block__details-content.rte strong,
.footer .footer-block__details-content.rte b,
.footer .footer-block__details-content strong,
.footer .footer-block__details-content b {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer link lists */
.footer-block--menu a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7) !important;
}

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

/* Bottom bar */
.footer__content-bottom {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Social icons */
.footer .list-social__link svg {
  fill: rgba(255, 255, 255, 0.6);
  transition: fill 0.2s ease;
}

.footer .list-social__link:hover svg {
  fill: var(--brand-gold);
}

/* Payment icons */
.footer .list-payment .payment-icon {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.footer .list-payment .payment-icon:hover {
  opacity: 1;
}

/* Country selector on dark bg */
.footer .disclosure__button,
.footer .localization-selector {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================
   TRUST BADGES
   ============================================ */
/* ============================================
   PRODUCT FEATURES — Premium trust bar
   ============================================ */
.product-features-wrapper {
  background: #f9f9fb !important;
  width: 100% !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 32px 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.product-features-wrapper .product-features {
  background: transparent !important;
  background-color: transparent !important;
  max-width: var(--page-width, 1200px) !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  box-sizing: border-box !important;
}

.feature-item {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-align: left !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
}

.feature-item:hover {
  transform: none !important;
  box-shadow: none !important;
}

.feature-icon {
  flex-shrink: 0 !important;
  width: 70px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.feature-icon img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  filter: none !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}

.feature-text {
  flex: 1 !important;
}

.feature-text h4 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 0 2px 0 !important;
  color: #1d1d1f !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

.feature-text p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  color: #6e6e73 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

@media screen and (max-width: 1024px) {
  .product-features-wrapper {
    padding: 24px 0 !important;
  }

  .product-features-wrapper .product-features {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px 16px !important;
    padding: 0 20px !important;
  }
}

@media screen and (max-width: 640px) {
  .product-features-wrapper {
    padding: 20px 0 !important;
  }

  .product-features-wrapper .product-features {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
}

/* ============================================
   TESTIMONIALS — Slider
   ============================================ */
.zfc-reviews {
  padding: 56px 0;
  background: #fafafa;
  border-top: 1px solid var(--brand-border);
}

.zfc-reviews__header {
  text-align: center;
  margin-bottom: 36px;
}

.zfc-reviews__rating {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-text);
  margin-left: 4px;
}

.zfc-reviews__stars {
  font-size: 18px;
  color: #FFC107;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.zfc-reviews__title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-text);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

@media (min-width: 768px) {
  .zfc-reviews__title {
    font-size: 26px;
  }
}

.zfc-reviews__sub {
  font-family: var(--font);
  font-size: 14px;
  color: var(--brand-text-secondary);
  margin: 0;
}

/* Slider track */
.zfc-slider {
  overflow: hidden;
  position: relative;
}

.zfc-slider__track {
  display: flex;
  will-change: transform;
}

/* Cards */
.zfc-review-card {
  flex: 0 0 calc(100% - 16px);
  margin: 0 8px;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 220px;
  box-sizing: border-box;
}

@media (min-width: 750px) {
  .zfc-review-card {
    flex: 0 0 calc(33.333% - 16px);
  }
}

.zfc-review-card__stars {
  font-size: 13px;
  color: #FFC107;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.zfc-review-card__text {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.65;
  color: var(--brand-text-secondary);
  margin: 0 0 auto;
  padding-bottom: 16px;
}

.zfc-review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--brand-border);
}

.zfc-review-card__author img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.zfc-review-card__author strong {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text);
  display: block;
}

.zfc-review-card__author span {
  font-family: var(--font);
  font-size: 12px;
  color: var(--brand-text-muted);
}

/* Nav: arrows + dots */
.zfc-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 28px;
}

.zfc-slider__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--brand-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--brand-text);
  transition: all 0.2s var(--ease);
}

.zfc-slider__btn:hover {
  background: var(--brand-text);
  color: #fff;
  border-color: var(--brand-text);
}

.zfc-slider__dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.zfc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}

.zfc-dot.active {
  background: var(--brand-gold);
  width: 20px;
  border-radius: 4px;
}

/* ============================================
   PRODUCT PAGE — Title font
   ============================================ */
.product__title h1 {
  font-family: var(--font);
  letter-spacing: -0.02em;
}

/* ============================================
   COLLECTION GRID — Section Header
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.zfc-grid-header {
  margin-top: 56px;
  margin-bottom: 32px;
}

.zfc-grid-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(28px, 3.5vw, 44px) !important;
  line-height: 1.08 !important;
  color: #1d1d1f !important;
  margin: 0 0 8px 0 !important;
  letter-spacing: -.025em !important;
}

.zfc-grid-desc {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: #86868b !important;
  margin: 0 !important;
  max-width: 560px !important;
}

@media screen and (max-width: 749px) {
  .zfc-grid-header {
    margin-top: 36px;
    margin-bottom: 24px;
  }
}

/* ============================================
   GLOBAL NEWSLETTER SECTION OVERRIDES — Apple/Samsung Style
   ============================================ */
.newsletter-form {
  max-width: 480px !important;
  margin: 0 auto !important;
}

.newsletter-form__field-wrapper {
  max-width: 100% !important;
}

/* Container becomes a clean white pill */
.newsletter-form__field-wrapper .field {
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #e5e5e7 !important;
  border-radius: 999px !important;
  height: 52px !important;
  padding: 0 4px 0 16px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.25s ease !important;
}

.newsletter-form__field-wrapper .field:focus-within {
  border-color: #1d1d1f !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}

/* Remove default borders and backgrounds from the input field */
.newsletter-form__field-wrapper .field__input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 100% !important;
  padding: 12px 8px 0 8px !important;
  /* Top padding for the floating label */
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  color: #1d1d1f !important;
  flex: 1 !important;
  margin: 0 !important;
}

/* Align floating label nicely inside our pill */
.newsletter-form__field-wrapper .field__label {
  left: 24px !important;
  top: 15px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  color: #86868b !important;
  transition: all 0.2s ease !important;
}

.newsletter-form__field-wrapper .field__input:focus~.field__label,
.newsletter-form__field-wrapper .field__input:not(:placeholder-shown)~.field__label {
  top: 6px !important;
  font-size: 10px !important;
  left: 24px !important;
  color: #86868b !important;
}

/* Style button to look like a premium solid yellow pill button inside the input container */
.newsletter-form__field-wrapper .field__button {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  height: 44px !important;
  width: 64px !important;
  background: #FFD929 !important;
  color: #000000 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.newsletter-form__field-wrapper .field__button:hover {
  background: #E5C225 !important;
  transform: scale(1.04) !important;
}

.newsletter-form__field-wrapper .field__button svg {
  width: 16px !important;
  height: 16px !important;
  color: #000000 !important;
}

/* Staggered entrance animations for product cards grid */
@media screen and (min-width: 990px) {
  .grid__item:nth-child(4n+1) .product-card-wrapper.reveal {
    transition-delay: 0ms !important;
  }

  .grid__item:nth-child(4n+2) .product-card-wrapper.reveal {
    transition-delay: 80ms !important;
  }

  .grid__item:nth-child(4n+3) .product-card-wrapper.reveal {
    transition-delay: 160ms !important;
  }

  .grid__item:nth-child(4n+4) .product-card-wrapper.reveal {
    transition-delay: 240ms !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .grid__item:nth-child(3n+1) .product-card-wrapper.reveal {
    transition-delay: 0ms !important;
  }

  .grid__item:nth-child(3n+2) .product-card-wrapper.reveal {
    transition-delay: 80ms !important;
  }

  .grid__item:nth-child(3n+3) .product-card-wrapper.reveal {
    transition-delay: 160ms !important;
  }
}

@media screen and (max-width: 749px) {
  .grid__item:nth-child(2n+1) .product-card-wrapper.reveal {
    transition-delay: 0ms !important;
  }

  .grid__item:nth-child(2n+2) .product-card-wrapper.reveal {
    transition-delay: 80ms !important;
  }
}

/* Card Device Badge */
.card-device-badge {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #86868b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
  display: block !important;
  text-align: left !important;
  width: 100% !important;
}

/* Swatches styling inside card */
.card-swatches-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 12px 0 10px 0 !important;
  width: 100% !important;
  padding: 0 4px !important;
  position: relative !important;
  z-index: 2 !important;
  gap: 8px !important;
}

.card__heading a::after {
  display: none !important;
}

.card__media-link,
.card_media-link {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.card-swatches {
  display: flex !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.card-swatch {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.card-swatch:hover {
  transform: scale(1.2) !important;
}

.card-swatch.active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #1c1d21 !important;
}

.card-swatch-label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  color: #86868b !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  max-width: 45% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 0 !important;
}

/* Quick Add button overrides */
.card-wrapper.product-card-wrapper .quick-add {
  margin-top: auto !important;
  padding-top: 12px !important;
  width: 100% !important;
}

.card-wrapper.product-card-wrapper .quick-add__submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 40px !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: none !important;
  padding: 10px 18px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 !important;
}

.card-wrapper.product-card-wrapper .quick-add__submit:hover {
  background: #2b2b2b !important;
}

/* Hide default icons inside l-button */
.card-wrapper.product-card-wrapper .quick-add__submit .icon-wrap,
.card-wrapper.product-card-wrapper .quick-add__submit .sold-out-message.hidden {
  display: none !important;
}

/* Display shopping cart icon next to Add to Cart */
.card-wrapper.product-card-wrapper .quick-add__submit::before {
  content: "" !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.5%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%206h15l-1.5%209h-12z%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2220%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2220%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%206%205%203H2%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
}

.card-wrapper.product-card-wrapper .quick-add__submit[disabled]::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20stroke%3D%22%2386868b%22%20stroke-width%3D%222.5%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%206h15l-1.5%209h-12z%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2220%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2220%22%20r%3D%221%22%2F%3E%3Cpath%20d%3D%22M6%206%205%203H2%22%2F%3E%3C%2Fsvg%3E") !important;
}

.card-wrapper.product-card-wrapper .quick-add__submit[disabled] {
  background: #f5f5f7 !important;
  color: #86868b !important;
  cursor: not-allowed !important;
  border: 1px solid #e5e5e7 !important;
}

/* ============================================
   PAGINATION STYLES — Mockup HTML style
   ============================================ */
.pagination-wrapper {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
  width: 100% !important;
}

.pagination__list {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pagination__list>li {
  flex: none !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Remove default Dawn underline pseudo-elements */
.pagination__item--current::after,
.pagination__item:hover::after {
  display: none !important;
}

.pagination__item {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  color: #1d1d1f !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

/* Active current page item */
.pagination__item--current,
.pagination__item.light {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* Hover effects */
a.pagination__item:hover {
  border-color: #FFD929 !important;
  background: rgba(255, 217, 41, 0.06) !important;
  color: #000000 !important;
}

/* Icon styling inside pagination arrows */
.pagination__item .icon-caret {
  height: 10px !important;
  width: 10px !important;
  display: block !important;
  transition: transform 0.25s ease !important;
}

/* Retain correct caret rotation from Dawn */
.pagination__item--next .icon-caret {
  transform: rotate(90deg) !important;
  margin-left: 0 !important;
}

.pagination__item--next:hover .icon-caret {
  transform: rotate(90deg) scale(1.1) !important;
}

.pagination__item--prev .icon-caret {
  transform: rotate(-90deg) !important;
  margin-right: 0 !important;
}

.pagination__item--prev:hover .icon-caret {
  transform: rotate(-90deg) scale(1.1) !important;
}

/* ============================================
   PRODUCT PAGE OVERRIDES — Premium Apple/Casetify Style
   ============================================ */

/* Main Product Layout spacing (Prevent desktop wrapping) */
.product {
  gap: 20px !important;
}

@media (min-width: 750px) {
  .product {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    /* Decreased gap between columns */
    align-items: flex-start !important;
    /* Needed for child position: sticky */
  }

  .product__media-wrapper {
    flex: 0 0 52% !important;
    width: 52% !important;
    max-width: 52% !important;
    position: sticky !important;
    top: 120px !important;
    /* Position below sticky header */
    z-index: 2 !important;
    height: auto !important;
    align-self: flex-start !important;
  }

  .product__info-wrapper {
    flex: 0 0 45% !important;
    /* Widened info container */
    width: 45% !important;
    max-width: 45% !important;
  }
}

@media (min-width: 990px) {
  .product {
    gap: 32px !important;
    align-items: flex-start !important;
  }

  .product__media-wrapper {
    flex: 0 0 51% !important;
    width: 51% !important;
    max-width: 51% !important;
    position: sticky !important;
    top: 120px !important;
    z-index: 2 !important;
    height: auto !important;
    align-self: flex-start !important;
  }

  .product__info-wrapper {
    flex: 0 0 46% !important;
    /* Widened info container on larger screens */
    width: 46% !important;
    max-width: 46% !important;
  }
}

/* Product Media Showcase (Squircles with shadows) */
.product__media-item,
.product-media-container {
  border-radius: 20px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.product__media-item img {
  border-radius: 20px !important;
  transition: transform 0.35s ease !important;
}

.product__media-item:hover img {
  transform: scale(1.02) !important;
}

/* Thumbnails list items */
.thumbnail-list__item {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

.thumbnail-list__item.is-active,
.thumbnail-list__item:hover {
  border-color: #d4ae00 !important;
}

/* Product info titles & tags */
.product__info-container .product__title h1 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  color: #1d1d1f !important;
  letter-spacing: -0.03em !important;
  line-height: 1.25 !important;
  margin-bottom: 0 !important;
}

.product__info-container .product__title {
  margin-bottom: 0 !important;
}

.product__info-container .price {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: #1d1d1f !important;
  letter-spacing: -0.02em !important;
  margin-top: -8px !important;
  margin-bottom: 0 !important;
}

.product__info-container .price--on-sale .price-item--regular {
  font-size: 16px !important;
  color: #86868b !important;
  font-weight: 500 !important;
}

/* Variant choice swatches / pills override */
.product-form__input input[type='radio']+label {
  border-radius: 999px !important;
  /* Pill shape! */
  border: 1px solid #e5e5e7 !important;
  padding: 10px 22px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  background: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  margin: 0 !important;
}

.product-form__input input[type='radio']:checked+label {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

.product-form__input input[type='radio']+label:hover {
  border-color: #d4ae00 !important;
  color: #d4ae00 !important;
}

/* Color swatches inside Product Page */
.product-form__input.product-form__input--swatch .swatch-input+label {
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
  transition: transform 0.2s ease !important;
  padding: 0 !important;
}

.product-form__input.product-form__input--swatch .swatch-input:checked+label {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #1d1d1f !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* Quantity Selector Override */
.product-form__input .quantity {
  border-radius: 999px !important;
  /* Pill! */
  background: #f5f5f7 !important;
  border: none !important;
  min-height: 48px !important;
  width: 140px !important;
  box-shadow: none !important;
}

.product-form__input .quantity__input {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* Buy buttons (Premium Rounded overrides) */
.product-form__submit.button,
.product-form__submit.button--secondary,
.product-form__submit.button--primary,
.product-form__submit {
  min-height: 48px !important;
  /* Height unified to 48px */
  border-radius: 999px !important;
  /* Capsule/Pill shape */
  background: #FFD929 !important;
  color: #000000 !important;
  font-family: var(--font-body-family) !important;
  font-weight: 700 !important;
  /* Clean bold */
  font-size: 15px !important;
  box-shadow: 0 4px 14px rgba(255, 217, 41, 0.2) !important;
  border: none !important;
  letter-spacing: -0.01em !important;
  /* Tight letter spacing */
  text-transform: none !important;
  /* Sentence case: "Add to cart - ..." */
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.product-form__submit:hover {
  background: #E5C225 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(255, 217, 41, 0.35) !important;
}


/* Dynamic Buy Dynamic Checkout Buttons */
.shopify-payment-button__button {
  border-radius: 999px !important;
  /* Pill! */
  min-height: 48px !important;
  font-family: var(--font-body-family) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all 0.25s ease !important;
}

/* Product Accordions / FAQ Collapsible sections */
.product__accordion {
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-bottom: none !important;
  background: transparent !important;
}




.product__accordion details summary h2.summary__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  color: #1d1d1f !important;
  letter-spacing: -0.01em !important;
}

.product__accordion details summary .icon-caret {
  right: 4px !important;
  transition: transform 0.25s ease !important;
}

.product__accordion details[open] summary h2.summary__title {
  color: #d4ae00 !important;
  /* Gold active highlights! */
}

.product__accordion .accordion__content {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  color: #515154 !important;
  line-height: 1.6 !important;
  padding-bottom: 16px !important;
}

/* Align product info elements to the left globally (desktop & mobile) */
.product__info-container {
  text-align: left !important;
}

.product__title,
.product__title h1,
.product__title span,
.price,
.product__description,
.product__description rte,
.product__description div,
.product__description p,
.product__text,
.volume-pricing-note,
.product__tax,
.color-label,
.device-label,
.device-variant-wrapper,
.color-variant-wrapper {
  text-align: left !important;
}

/* Style product metafield indicators */
.product__title h1 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Confusing redundant static color subtitle -> Hide */
.product__color {
  display: none !important;
}

/* Brand Device Label above title */
.product__device {
  order: -1 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #d4ae00 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 4px !important;
  display: inline-block !important;
}

/* Premium Select Dropdown Box */
.product-form__input .select {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  max-width: 100% !important;
  box-shadow: none !important;
}

.product-form__input .select__select {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: #1d1d1f !important;
  padding: 10px 36px 10px 16px !important;
  height: 46px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Color variant swatches styled as squircles */
.product-form__input .variant-input-wrapper {
  display: inline-block !important;
  margin-right: 8px !important;
  margin-bottom: 8px !important;
}

/* Target the image swatches labels */
.product-form__input input[type="radio"]+label.swatch,
.product-form__input input[type="radio"]+label img,
.product-form__input input[type="radio"]+label:has(img) {
  border-radius: 12px !important;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Highlight the active swatch with the gold brand accent outline */
.product-form__input input[type="radio"]:checked+label.swatch,
.product-form__input input[type="radio"]:checked+label:has(img),
.product-form__input.product-form__input--swatch input[type="radio"]:checked+label {
  background: transparent !important;
  color: inherit !important;
  border-color: #d4ae00 !important;
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 3px #d4ae00 !important;
}

.product-form__input input[type="radio"]+label.swatch:hover,
.product-form__input input[type="radio"]+label:has(img):hover,
.product-form__input.product-form__input--swatch input[type="radio"]+label:hover {
  border-color: #d4ae00 !important;
}

/* ============================================
   CUSTOM COLOR & DEVICE VARIANTS OVERRIDES (Metafields)
   ============================================ */

/* Product description / overview text */
.product__info-container .product__text {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14.5px !important;
  color: #515154 !important;
  line-height: 1.65 !important;
  text-align: left !important;
  margin-top: 12px !important;
  margin-bottom: 24px !important;
}

/* No mobile centering for description overview */

/* Color variant wrapper */
.color-variant-wrapper {
  margin: 0 !important;
  text-align: left !important;
}

/* Color label title */
.color-label {
  font-family: var(--font-body-family) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 10px !important;
  text-align: left !important;
  display: block !important;
}

.color-label strong {
  font-weight: 700 !important;
}

/* Swatches list wrapped rail styling (No horizontal scroll) */
.color-variant-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 6px 0 !important;
  text-align: left !important;
  overflow: visible !important;
}

.color-variant-list::-webkit-scrollbar {
  display: none !important;
}

/* Swatch item card layout */
.color-variant-item {
  flex: 0 0 auto !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  padding: 2px !important;
  width: 68px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Swatch Image Squircles */
.color-variant-item img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background-color: #f7f7f7 !important;
  filter: brightness(0.98) !important;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-sizing: border-box !important;
}

/* Hover border highlight */
.color-variant-item:hover img {
  transform: scale(1.05) !important;
  border-color: #d4ae00 !important;
}

/* Selected active color swatch - Gold outline */
.color-variant-item.current img {
  border: 2px solid #d4ae00 !important;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #d4ae00 !important;
  cursor: default !important;
}

/* Sub-labels f swatches names */
.color-name {
  display: block !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #86868b !important;
  margin-top: 6px !important;
  text-align: center !important;
  text-transform: capitalize !important;
}

.color-variant-item.current .color-name {
  color: #1d1d1f !important;
  font-weight: 700 !important;
}

/* Device variant wrapper */
.device-variant-wrapper {
  margin: 0 !important;
  text-align: left !important;
  padding-top: 16px !important;
  margin-top: 12px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.device-label {
  font-family: var(--font-body-family) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 10px !important;
  text-align: left !important;
  display: block !important;
}

.device-label strong {
  font-weight: 700 !important;
}

/* Select Dropdown wrapper styling */
.dropdown-container {
  text-align: left !important;
  margin: 0 !important;
  position: relative !important;
}

.dropdown-container::after {
  content: "" !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 10px !important;
  height: 6px !important;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%231d1d1f%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
}

.device-dropdown {
  display: block !important;
  width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: #1d1d1f !important;
  padding: 12px 36px 12px 16px !important;
  height: 48px !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015) !important;
  transition: all 0.2s ease !important;
  background-image: none !important;
}

.device-dropdown:hover {
  border-color: #d4ae00 !important;
}

.device-dropdown:focus {
  outline: none !important;
  border-color: #d4ae00 !important;
}

/* ============================================
   MOBILE PRODUCT GALLERY OPTIMIZATIONS (Swipe & Square)
   ============================================ */
@media screen and (max-width: 749px) {

  /* Hide the clunky thumbnail bar on mobile */
  .product__media-wrapper .thumbnail-slider {
    display: none !important;
  }

  /* Give the mobile gallery wrapper clean margins */
  .product__media-wrapper {
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Relative container for absolute counter positioning */
  .product__media-wrapper slider-component {
    position: relative !important;
    display: block !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  /* Squircle container with aspect ratio forcing a square */
  .product__media-item {
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .product__media-item .media {
    position: relative !important;
    padding-top: 100% !important;
    /* Forces perfect square container */
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.015) !important;
    overflow: hidden !important;
    display: block !important;
  }

  /* Prevent phone case image crop by fitting it fully f container */
  .product__media-item .media img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    /* Full image visible, no crop! */
    padding: 24px !important;
    /* Elegant inset padding around case */
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  /* Absolute positioned translucent black pill f counter progress */
  .product__media-wrapper .slider-buttons {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    background: rgba(0, 0, 0, 0.6) !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 44px !important;
    border: none !important;
    z-index: 10 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }

  /* Hide caret buttons on mobile (swipe takes precedence) */
  .product__media-wrapper .slider-buttons .slider-button--prev,
  .product__media-wrapper .slider-buttons .slider-button--next {
    display: none !important;
  }

  /* Style text counter inside black pill */
  .product__media-wrapper .slider-buttons .slider-counter {
    color: #ffffff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    margin: 0 !important;
    display: inline-block !important;
  }
}

/* ==========================================================================
   PRODUCT PAGE REDESIGN — Minimalist & Premium Style Overrides
   ========================================================================== */


/* Trust line — single clean line above Add to Cart */
.shop-info-line {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 0 12px 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #515154 !important;
  text-align: center !important;
}

.shop-info-line strong {
  font-weight: 600 !important;
  color: #1d1d1f !important;
}

.shop-info-line__sep {
  color: #d1d1d6 !important;
  margin: 0 2px !important;
}

.shop-info-line__icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.shop-info {
  margin: 0 0 12px 0 !important;
  text-align: center !important;
}

.shop-info__shipping {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: #515154 !important;
}

.shop-info__icon {
  width: 18px !important;
  height: 18px !important;
}

.shop-info__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.shop-info__item {
  flex: none !important;
  width: 100% !important;
  background: transparent !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.shop-info__item:last-child {
  border-bottom: none !important;
}

.shop-info__icon-large {
  width: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  opacity: 0.5 !important;
}

.shop-info__item p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #515154 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.shop-info__item p strong {
  color: #1d1d1f !important;
  font-weight: 600 !important;
}

/* Minimalist Accordion (Details/Summary) Style */
.product__accordion {
  border-top: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  margin: 0 !important;
}

.product__accordion:last-of-type {
  border-bottom: none !important;
}

.product__accordion:first-of-type {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.product__accordion details {
  padding: 16px 0 !important;
}

.product__accordion summary {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.product__accordion .accordion__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #1d1d1f !important;
  margin: 0 !important;
}

.product__accordion summary .icon-caret {
  right: 0 !important;
  position: relative !important;
  width: 12px !important;
  height: 12px !important;
}

.product__accordion .accordion__content {
  padding: 12px 0 4px 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: #1d1d1f !important;
}

.product__accordion .accordion__content p,
.product__accordion .accordion__content ul,
.product__accordion .accordion__content ol,
.product__accordion .accordion__content li,
.product__accordion .accordion__content span,
.product__accordion .accordion__content div,
.product__accordion .accordion__content a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: #1d1d1f !important;
}

.product__accordion .accordion__content h1,
.product__accordion .accordion__content h2,
.product__accordion .accordion__content h3,
.product__accordion .accordion__content h4,
.product__accordion .accordion__content h5,
.product__accordion .accordion__content h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  margin: 12px 0 6px 0 !important;
  font-size: 14px !important;
}

.product__accordion .accordion__content p {
  margin: 0 0 8px 0 !important;
}

.product__accordion .accordion__content ul,
.product__accordion .accordion__content ol {
  margin: 0 0 8px 0 !important;
  padding-left: 20px !important;
}

.product__accordion .accordion__content li {
  margin-bottom: 4px !important;
}

/* Variant selectors clean layout */
.device-dropdown {
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid #d2d2d7 !important;
  background: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14.5px !important;
  color: #1d1d1f !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231d1d1f' d='M0.646 0.646a.5.5 0 01.708 0L5 4.293 8.646 0.646a.5.5 0 11.708.708l-4 4a.5.5 0 01-.708 0l-4-4a.5.5 0 010-.708z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 10px 6px !important;
}

.device-dropdown:focus {
  outline: none !important;
  border-color: #ffd929 !important;
}

/* Gallery rounded corners */
.mycustom-slider-container,
.mycustom-slide,
.mycustom-slide img,
.product__media-item img,
.product-media-container img {
  border-radius: 28px !important;
}

/* Sticky Mobile Checkout Bar */
.zfc-sticky-mobile-bar {
  display: none;
}

@media (max-width: 767px) {
  .zfc-sticky-mobile-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: transparent !important;
    /* Fully transparent container */
    border: none !important;
    padding: 0 !important;
    /* No padding */
    margin: 0 !important;
    z-index: 999 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    /* Allow clicks to pass through transparent areas */
  }

  body {
    padding-bottom: 52px !important;
    /* Matches the 48px height */
  }

  .zfc-sticky-mobile-submit {
    background: #FFD929 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    /* Clean bold */
    font-size: 15px !important;
    border-radius: 20px 20px 0 0 !important;
    /* 20px rounded top corners, flat bottom */
    border: none !important;
    padding: 0 !important;
    height: 48px !important;
    /* 48px height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    /* Full screen width edge-to-edge */
    max-width: 100vw !important;
    min-width: 100vw !important;
    text-transform: none !important;
    margin: 0 !important;
    pointer-events: auto !important;
    /* Enable clicks on the button itself */
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    /* Shadow on the button itself */
    font-family: var(--font-body-family) !important;
    letter-spacing: -0.01em !important;
  }

  .zfc-sticky-mobile-submit:disabled {
    background: #e5e5e7 !important;
    color: #86868b !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
  }
}

/* Global Sticky Mobile button colors override */
.zfc-sticky-mobile-submit,
button.zfc-sticky-mobile-submit,
.zfc-sticky-mobile-bar .zfc-sticky-mobile-submit {
  background: #FFD929 !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Breadcrumbs Overrides (Goal Style) */
.breadcrumb {
  font-family: var(--font-body-family) !important;
  font-size: 13px !important;
  color: #777777 !important;
  text-align: left !important;
  text-transform: none !important;
  padding: 20px 0 !important;
  max-width: var(--page-width, 1200px) !important;
  margin: 0 auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.breadcrumb a {
  font-family: var(--font-body-family) !important;
  font-size: 13px !important;
  color: #777777 !important;
  text-transform: none !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: color 0.2s ease !important;
}

.breadcrumb a:hover {
  color: #1d1d1f !important;
}

.breadcrumb .separator {
  color: #777777 !important;
  padding: 0 2px !important;
  font-size: 12px !important;
}

.breadcrumb-text {
  color: #1d1d1f !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* ==========================================================================
   PREMIUM PRODUCT MEDIA GALLERY STYLE OVERRIDES
   ========================================================================== */
.zfc-gallery-wrapper {
  display: block !important;
  width: 100% !important;
}

.zfc-gallery-layout {
  display: flex !important;
  flex-direction: row !important;
  position: relative !important;
  padding-left: 88px !important;
  /* 72px thumbnails + 16px gap */
  width: 100% !important;
}

/* Left side: Vertical Thumbnails list (Desktop) */
.zfc-gallery-thumbnails {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 72px !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  /* Firefox */
}

.zfc-gallery-thumbnails::-webkit-scrollbar {
  display: none !important;
  /* Webkit */
}

.zfc-gallery-thumbnails-track {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.zfc-thumbnail-item {
  width: 72px !important;
  height: 72px !important;
  padding: 0 !important;
  background: #f5f5f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.zfc-thumbnail-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.zfc-thumbnail-item:hover {
  transform: scale(1.02) !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.zfc-thumbnail-item.active {
  border-color: #FFD929 !important;
  box-shadow: 0 4px 12px rgba(255, 217, 41, 0.15) !important;
}

/* Right side/Main gallery viewport */
.zfc-gallery-main {
  flex-grow: 1 !important;
  position: relative !important;
  width: 100% !important;
}

.zfc-gallery-viewport {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  border-radius: 16px !important;
  /* Clean soft corner radius */
  width: 100% !important;
  background: #ffffff !important;
  scrollbar-width: none !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  aspect-ratio: 1 / 1 !important;
  /* Reverted to 1:1 Square */
}

.zfc-gallery-viewport::-webkit-scrollbar {
  display: none !important;
}

.zfc-gallery-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  scroll-snap-align: start !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  /* Reverted to 1:1 Square */
  overflow: hidden !important;
  border-radius: 16px !important;
}

.zfc-gallery-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 16px !important;
  transition: transform 0.5s ease !important;
}

/* Hide indicators and dots on desktop by default */
.zfc-gallery-counter,
.zfc-gallery-dots {
  display: none !important;
}

/* Mobile responsive layout overrides */
@media (max-width: 749px) {
  .product {
    gap: 0 !important;
  }

  .product__media-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }

  .product__info-wrapper {
    margin-top: 4px !important;
    padding-top: 0 !important;
  }

  .zfc-gallery-layout {
    padding-left: 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .zfc-gallery-viewport {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    aspect-ratio: 1 / 1 !important;
  }

  .zfc-gallery-slide {
    border-radius: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }

  .zfc-gallery-slide img {
    border-radius: 0 !important;
  }

  /* Show indicators on mobile */
  .zfc-gallery-counter {
    display: block !important;
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .zfc-gallery-dots {
    display: flex !important;
    position: static !important;
    /* Position below viewport naturally */
    transform: none !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 8px auto 2px auto !important;
    /* Top space to slide, centered */
    width: 100% !important;
    z-index: 1 !important;
  }

  .zfc-gallery-dot {
    width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.12) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  .zfc-gallery-dot.active {
    background: #FFD929 !important;
    /* Brand Gold */
    width: 20px !important;
    border-radius: 4px !important;
  }
}

/* Stars Reviews Badge Above Price */
.zfc-product-reviews-badge {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  font-family: var(--font-body-family) !important;
  font-size: 14px !important;
  color: #1d1d1f !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

.zfc-product-reviews-badge .zfc-stars {
  color: #FFD929 !important;
  /* Brand Gold/Yellow */
  font-size: 16px !important;
  letter-spacing: 1px !important;
}

.zfc-product-reviews-badge .zfc-rating-text {
  font-weight: 600 !important;
  color: #1d1d1f !important;
}

.zfc-product-reviews-badge .zfc-dot-separator {
  color: #1d1d1f !important;
}

.zfc-product-reviews-badge .zfc-reviews-count {
  color: #1d1d1f !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

/* Color Swatches Grid & Double Ring Outline Styles */
.color-swatch-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  padding: 8px 0 !important;
  text-align: left !important;
  align-items: center !important;
}

.color-swatch-item {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  display: block !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.color-swatch-item:hover {
  transform: scale(1.1) !important;
}

/* Selected active color swatch - Double Ring Outline */
.color-swatch-item.active {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #1d1d1f !important;
  transform: scale(0.95) !important;
  /* Keep overall size balanced with outline */
  cursor: default !important;
}

/* Sidebar blocks spacing overrides for a clean, tight look */
.product__info-container>*+* {
  margin-top: 16px !important;
}

/* Also ensure labels have a tighter bottom margin */
.device-label,
.color-label {
  margin-bottom: 8px !important;
}

/* Reduce margins on buttons area */
.product-form {
  margin-top: 0 !important;
}

/* Sync pseudo-element outlines for rounded buttons */
.product-form__submit {
  height: 48px !important;
  border-radius: 999px !important;
}

.product-form__submit::after {
  border-radius: 999px !important;
}

.zfc-sticky-mobile-submit {
  height: 48px !important;
  border-radius: 20px 20px 0 0 !important;
}

.zfc-sticky-mobile-submit::after {
  border-radius: 20px 20px 0 0 !important;
}

/* User-requested button outline overrides */
.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  border-radius: 20px 20px 0px 0px !important;
}

/* Force 20px border-radius for mobile sticky button and its outline */
html body #ProductSubmitButton-Sticky,
html body button#ProductSubmitButton-Sticky,
html body .zfc-sticky-mobile-submit,
html body button.zfc-sticky-mobile-submit,
.zfc-sticky-mobile-bar button,
.zfc-sticky-mobile-bar .button {
  border-radius: 20px 20px 0 0 !important;
}

html body #ProductSubmitButton-Sticky::after,
html body button#ProductSubmitButton-Sticky::after,
html body .zfc-sticky-mobile-submit::after,
html body button.zfc-sticky-mobile-submit::after,
.zfc-sticky-mobile-bar button::after,
.zfc-sticky-mobile-bar .button::after {
  border-radius: 20px 20px 0 0 !important;
}

/* Enforce 100% identical typography and case styles f both Add to Cart buttons */
.product-form__submit,
.product-form__submit span,
.zfc-sticky-mobile-submit,
.zfc-sticky-mobile-submit span {
  font-family: var(--font-body-family) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}

/* ============================================================
   Accessories Upsell Section Styling
   ============================================================ */
/* ═══════ ZFC Upsell Widget — Premium Tiered Discount ═══════ */
.zfc-upsells-container {
  position: relative !important;
  margin-top: 16px !important;
  margin-bottom: 24px !important;
  border: 1.5px solid #e5e5e7 !important;
  /* Default premium gray border */
  border-radius: 16px !important;
  padding: 24px !important;
  background-color: #f8f8f8 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Active Container Border State */
.zfc-upsells-container.offer-active {
  border-color: #FFD929 !important;
  /* Brand yellow border when selected */
  box-shadow: 0 4px 15px rgba(255, 217, 41, 0.05) !important;
  /* Soft gold glow shadow */
}

.zfc-upsells-badge-wrapper {
  position: absolute !important;
  top: 0 !important;
  right: 24px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  z-index: 10 !important;
}

.zfc-upsells-badge {
  display: inline-flex !important;
  background: #000000 !important;
  /* Premium solid black badge */
  color: #ffffff !important;
  /* Clean white text */
  border: none !important;
  /* Remove yellow border */
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  /* Rounded rectangle */
  line-height: 1.2 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.zfc-upsells-offer-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  /* Premium charcoal black */
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
  transition: color 0.3s ease !important;
}

/* — Offer Message — */
.zfc-upsells-offer-msg {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  /* Increased from 14px */
  font-weight: 500 !important;
  color: #515154 !important;
  /* Darker gray for high contrast/readability */
  margin: 0 0 20px 0 !important;
  line-height: 1.45 !important;
}

.zfc-upsells-offer-msg strong {
  font-weight: 700 !important;
  color: #1d1d1f !important;
}

.zfc-upsells-offer-msg .zfc-offer-remaining {
  color: #c9a800 !important;
  /* Brand gold indicators */
  font-weight: 700 !important;
}

.zfc-upsells-offer-msg .zfc-offer-saved {
  color: #c9a800 !important;
  /* Brand gold indicators */
  font-weight: 700 !important;
}

.zfc-title-highlight {
  color: #c9a800 !important;
  /* Brand gold discount percentage in title */
  font-weight: 700 !important;
}

/* — Tier Tabs — */
.zfc-upsells-tiers {
  position: relative !important;
  height: 24px !important;
  /* Fixed height for absolute children positioning */
  margin-bottom: 8px !important;
  width: 100% !important;
}

.zfc-tier {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #86868b !important;
  /* Soft graphite gray */
  transition: all 0.3s ease !important;
  position: absolute !important;
  top: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 1 !important;
  white-space: nowrap !important;
}

.zfc-tier.tier-1 {
  left: 33.3% !important;
  transform: translateX(-50%) !important;
}

.zfc-tier.tier-2 {
  left: 66.6% !important;
  transform: translateX(-50%) !important;
}

.zfc-tier.tier-3 {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

.zfc-tier.reached {
  color: #1d1d1f !important;
  font-weight: 800 !important;
}

.zfc-tier.active {
  color: #c9a800 !important;
  /* Highlight gold on active */
}

/* — Stepper Progress Track — */
.zfc-tier-progress {
  position: relative !important;
  margin: 0 0 12px 0 !important;
  height: 6px !important;
  background: #f5f5f7 !important;
  border-radius: 999px !important;
  overflow: visible !important;
  width: 100% !important;
}

/* — Stepper Progress Fill — */
.zfc-progress-bar-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 0%;
  background: #c9a800 !important;
  /* Brand gold progress fill */
  border-radius: 999px !important;
  transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* — Product Cards — */
.zfc-upsells-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  /* Spacing between distinct cards */
  margin-top: 8px !important;
}

.zfc-upsell-card {
  display: flex !important;
  align-items: center !important;
  padding: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  gap: 14px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative !important;
}

/* Best Seller / custom badge */
.zfc-upsell-badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  background: #2d8a4e;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 5px 12px !important;
  border-radius: 0 12px 0 8px !important;
  line-height: 1.2 !important;
  z-index: 2 !important;
  white-space: nowrap !important;
}


.zfc-upsell-card:hover {
  background: #fafafb !important;
  border-color: #e5e5e7 !important;
}


.zfc-upsell-card-media {
  flex: none !important;
  width: 76px !important;
  height: 76px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #f5f5f7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

.zfc-upsell-card-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.zfc-upsell-card-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding-right: 10px !important;
}

.zfc-upsell-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.zfc-upsell-card-price-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.zfc-upsell-card-price {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
}

.zfc-upsell-card-price.discounted {
  color: #d12525 !important;
  /* Premium sale red for discounted price */
}

.zfc-upsell-card-original-price {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #6e6e73 !important;
  /* Darker gray for better visibility */
  text-decoration: line-through !important;
}

/* — Premium Action Button — */
.zfc-upsell-action-wrapper {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
}

.zfc-upsell-add-btn {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  background: #1d1d1f !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  height: 28px !important;
  min-height: 28px !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
}

.zfc-upsell-add-btn:hover {
  background: #333333 !important;
  color: #ffffff !important;
}

.zfc-upsell-add-btn.selected {
  background: #000000 !important;
  color: #FFD929 !important;
  border-color: rgba(255, 217, 41, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Product page upsell qty picker — hidden initially, JS shows via inline style */
.zfc-upsell-qty-picker {
  align-items: center !important;
  border: 1.2px solid #d2d2d7 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  width: 90px !important;
  height: 34px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;
}

.zfc-upsell-qty-picker .zfc-qty-adjust {
  width: 28px !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #1d1d1f !important;
  padding: 0 !important;
}

.zfc-upsell-qty-picker .zfc-qty-adjust.decrease {
  color: #d2d2d7 !important;
}

.zfc-upsell-qty-picker .zfc-qty-display {
  flex: 1 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  user-select: none !important;
}

/* Selected Card background */
.zfc-upsell-card.selected {
  background: #fffdf0 !important;
  /* Warm brand gold/yellow tint background */
  border-color: #FFD929 !important;
  /* Brand gold/yellow border */
  box-shadow: 0 4px 12px rgba(255, 217, 41, 0.05) !important;
}

.zfc-upsell-card.selected .zfc-upsell-card-media {
  background: #ffffff !important;
  /* White contrast thumbnail background on selection */
  border-color: rgba(255, 217, 41, 0.25) !important;
}

/* — Active Quantity Picker Borders — */
.zfc-upsell-qty-picker.active-picker {
  border-color: #c9a800 !important;
}

/* — Savings Banner — */
.zfc-upsells-savings {
  margin-top: 18px !important;
  padding: 12px 18px !important;
  background: #f5f5f7 !important;
  /* Soft premium gray background */
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  /* Extremely soft border */
  border-radius: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  /* Dark premium charcoal text */
  text-align: center !important;
  box-shadow: none !important;
  animation: zfc-fadeSlideUp 0.3s ease-out !important;
}

.zfc-upsells-savings strong {
  color: #1d1d1f !important;
  /* Premium charcoal text instead of gold */
  font-weight: 700 !important;
}

@keyframes zfc-fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* — Active Offer State — */
.zfc-upsells-container.offer-unlocked {
  border-color: #000000 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05) !important;
}



/* — Responsive — */
@media (max-width: 749px) {
  .zfc-upsells-container {
    padding: 20px 16px !important;
  }

  .zfc-upsells-offer-title {
    font-size: 20px !important;
  }

  .zfc-upsell-card {
    padding: 10px !important;
    gap: 12px !important;
  }

  .zfc-upsell-card-media {
    width: 80px !important;
    height: 80px !important;
  }

  .zfc-upsell-card-title {
    font-size: 12px !important;
  }
}



/* Hide Reconvert app slot blocks/widgets inside the cart and cart drawer */
[class*="reconvert"],
[id*="reconvert"],
.reconvert-app,
.reconvert-widget,
.reconvert-cart-drawer {
  display: none !important;
}

/* Hide floating vendor elements in drawer items details */
.cart-item__details p.light,
.cart-item__details .caption-with-letter-spacing.light {
  display: none !important;
}

/* Cart Header Close Button */
.drawer__header .drawer__close {
  background: #f5f5f7 !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background 0.2s ease !important;
}

.drawer__header .drawer__close:hover {
  background: #e5e5e7 !important;
}

.drawer__header .drawer__close svg {
  position: static !important;
  width: 10px !important;
  height: 10px !important;
  color: #1d1d1f !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Free Shipping progress banner */
.zfc-shipping-progress-banner {
  background: #FFD929 !important;
  /* Brand Yellow/Gold */
  color: #000000 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  margin: 0 16px 16px 16px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 12px rgba(255, 217, 41, 0.1) !important;
}

/* Cart Drawer Progress Widget (Borderless & Dynamic Background) */
.drawer-upsell-widget {
  border: none !important;
  border-top: 1px solid #f1f1f1 !important;
  /* Soft top anchor line */
  border-bottom: 1px solid #e5e5e7 !important;
  /* Bottom anchor divider line */
  background: #f8f8f8 !important;
  /* Premium light gray deck background when empty */
  box-shadow: none !important;
  margin: 0 0 24px 0 !important;
  /* Stretch to full width */
  border-radius: 0 !important;
  /* Squared off to touch sides */
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.drawer-upsell-widget.offer-active {
  background: #fffdf0 !important;
  /* Warm gold/yellow tint background when active */
  border-top: 1px solid #f1f1f1 !important;
  border-bottom: 1px solid #e5e5e7 !important;
  box-shadow: none !important;
}

.drawer-upsell-widget .zfc-tier-progress {
  background: #e1e1e1 !important;
  /* Make track line visible against container background */
  height: 4px !important;
  margin: 0 0 4px 0 !important;
}

.drawer-upsell-widget .zfc-upsells-tiers {
  height: 12px !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

@media screen and (max-width: 480px) {
  .drawer-upsell-widget .zfc-upsells-tiers .zfc-tier {
    font-size: 8.5px !important;
    letter-spacing: -0.01em !important;
  }
}

/* ============================================================
   GYMSHARK-INSPIRED CART DRAWER REDESIGN
   ============================================================ */
/* Drawer inner — flex column to push footer to bottom */
.cart-drawer .drawer__inner {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Footer stays pinned at the bottom */
.cart-drawer .drawer__footer {
  flex-shrink: 0 !important;
  border-top: none !important;
  padding: 0 0px 5px 0px !important;
  max-height: 55vh !important;
  overflow-y: auto !important;
}

/* Scrollable middle area */
.zfc-drawer-scrollable {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}


/* ---- Gymshark-style Progress Widget ---- */
.zfc-progress-widget {
  padding: 8px 16px 6px 16px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: none !important;
}

.zfc-progress-widget__submsg {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #1d1d1f !important;
  line-height: 1.3 !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}

/* Progress bar track — Gymshark thick style */
.zfc-progress-widget__bar {
  position: relative !important;
  width: 100% !important;
  height: 5px !important;
  background: #e8e8ed !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-bottom: 4px !important;
}

/* Progress bar fill */
.zfc-progress-widget__fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  min-height: 5px !important;
  background: linear-gradient(90deg, #FFD929, #f5c800) !important;
  border-radius: 999px !important;
  transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  display: block !important;
}

/* Tier labels row — positioned at bar milestones */
.zfc-progress-widget__tiers {
  position: relative !important;
  width: 100% !important;
  height: 14px !important;
}

.zfc-progress-widget__tier {
  position: absolute !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #86868b !important;
  transition: color 0.3s ease !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
}

.zfc-progress-widget__tier:nth-child(1) {
  left: 33.3% !important;
}

.zfc-progress-widget__tier:nth-child(2) {
  left: 66.6% !important;
}

.zfc-progress-widget__tier:nth-child(3) {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

.zfc-progress-widget__tier.reached {
  color: #1d1d1f !important;
}

.zfc-progress-widget__tier.current {
  color: #c9a800 !important;
}




.zfc-offer-saved {
  color: #c9a800 !important;
}

.zfc-offer-remaining {
  color: #1d1d1f !important;
}

/* Bag Header */
.zfc-bag-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  min-height: auto !important;
  box-sizing: border-box !important;
}

.zfc-bag-header__left {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
}

.zfc-bag-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #1d1d1f !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.zfc-bag-count {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #86868b !important;
  line-height: 1.2 !important;
}

.zfc-bag-close {
  background: #f5f5f7 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: #1d1d1f !important;
  transition: background 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  flex-shrink: 0 !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
}

.zfc-bag-close:hover {
  background: #e5e5e7 !important;
}

.zfc-bag-close svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  position: static !important;
}

/* Urgency Banner — Gymshark clean style */
.zfc-urgency-banner {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
  padding: 6px 16px !important;
  margin: 0 !important;
  border: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

.zfc-urgency-banner svg {
  color: #86868b !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}

.zfc-urgency-banner strong {
  font-weight: 600 !important;
}

/* ---- Cart Items Styling ---- */

/* Cart item row — tighter spacing */
.cart-drawer .cart-item {
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.cart-drawer .cart-item:first-child {
  border-top: none !important;
}

.cart-drawer .cart-item:last-child {
  border-bottom: none !important;
}

/* Cart items table — compact */
.cart-drawer .cart-items {
  padding: 0 16px !important;
}

/* Discount badge — light green */
.cart-drawer .discounts__discount {
  background: rgba(45, 138, 78, 0.08) !important;
  color: #2d8a4e !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.cart-drawer .discounts__discount .icon-discount {
  color: #2d8a4e !important;
  fill: #2d8a4e !important;
  stroke: #2d8a4e !important;
  width: 12px !important;
  height: 12px !important;
}

/* Product image — fill container perfectly */
.cart-drawer .cart-item__media {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  margin: 0 !important;
  vertical-align: top !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border: none !important;
}

.cart-drawer td.cart-item__media {
  border: none !important;
}

.cart-drawer .cart-item__media .cart-item__link {
  display: block !important;
  width: 80px !important;
  height: 80px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.cart-drawer .cart-item__image {
  width: 80px !important;
  min-width: 80px !important;
  height: 80px !important;
  min-height: 80px !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  border: none !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Details column */
.cart-drawer .cart-item__details {
  padding: 0 0 0 12px !important;
  vertical-align: top !important;
}

/* ---- Cart Item Typography System ---- */

/* Title + Remove row */
.zfc-cart-item-title-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
}

/* Product title */
.zfc-item-title {
  flex-grow: 1 !important;
  padding-right: 10px !important;
  margin: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
}

/* Remove button */
.zfc-remove-btn {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 2px !important;
  margin: 0 !important;
  cursor: pointer !important;
  color: #86868b !important;
  transition: color 0.2s ease !important;
}

.zfc-remove-btn:hover {
  color: #1d1d1f !important;
}

/* Variant text */
.zfc-item-variant {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #86868b !important;
  margin-top: 0px !important;
  line-height: 1.3 !important;
}

/* Price + Quantity row */
.zfc-cart-item-middle-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 2px !important;
}

.zfc-cart-item-prices-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

/* Price */
.zfc-item-price {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  line-height: 1.3 !important;
}

/* Old (struck) price */
.zfc-item-old-price {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #86868b !important;
  text-decoration: line-through !important;
  line-height: 1.3 !important;
}

/* Quantity selector — product page style */
.cart-drawer quantity-input.cart-quantity {
  border: none !important;
  border-radius: 8px !important;
  width: 100px !important;
  height: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 8px !important;
  background: #ffffff !important;
}

.cart-drawer quantity-input.cart-quantity .quantity__button {
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1d1d1f !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.cart-drawer quantity-input.cart-quantity .quantity__input {
  width: 32px !important;
  height: 24px !important;
  min-height: 24px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 0 !important;
  text-align: center !important;
  color: #1d1d1f !important;
  background: transparent !important;
}

/* Discount Code Section */
.zfc-discount-code {
  padding: 16px 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 0 !important;
}

.zfc-discount-code__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #1d1d1f !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 10px 0 !important;
}

.zfc-discount-code__row {
  display: flex !important;
  gap: 0 !important;
  width: 100% !important;
}

.zfc-discount-code__input {
  flex: 1 !important;
  border: 1px solid #e5e5e7 !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  padding: 12px 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #1d1d1f !important;
  background: #ffffff !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

.zfc-discount-code__input:focus {
  border-color: #1d1d1f !important;
}

.zfc-discount-code__input::placeholder {
  color: #86868b !important;
}

.zfc-discount-code__btn {
  background: #1d1d1f !important;
  color: #ffffff !important;
  border: 1px solid #1d1d1f !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 20px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.zfc-discount-code__btn:hover {
  background: #333333 !important;
}

/* Discount applied state — hidden by default */
.zfc-discount-code__applied {
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
}

.zfc-discount-code__applied.is-visible {
  display: flex !important;
}

.zfc-discount-code__applied-tag {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #2d8a4e !important;
  background: rgba(45, 138, 78, 0.08) !important;
  border: 1px solid rgba(45, 138, 78, 0.2) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.zfc-discount-code__remove {
  background: none !important;
  border: none !important;
  font-size: 18px !important;
  color: #86868b !important;
  cursor: pointer !important;
  padding: 0 4px !important;
  line-height: 1 !important;
  transition: color 0.2s ease !important;
}

.zfc-discount-code__remove:hover {
  color: #ff3b30 !important;
}

/* Coupon row in order summary — hidden by default */
.zfc-totals__row.zfc-totals__row--coupon {
  display: none !important;
  align-items: center !important;
}

.zfc-totals__row.zfc-totals__row--coupon.is-visible {
  display: flex !important;
}

.zfc-totals__row--coupon .zfc-totals__label {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Order Summary Section */
.cart-drawer .cart-drawer__footer {
  padding: 10px 30px !important;
  border-top: 1px solid #d2d2d7 !important;
}

.zfc-order-summary-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

.zfc-totals {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 0 10px 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border-top: none !important;
  padding: 0 !important;
}

.zfc-totals__row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

.zfc-totals__label {
  color: #86868b !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.zfc-totals__value {
  color: #86868b !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.zfc-totals__label--savings {
  color: #e85d3a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-style: normal !important;
}

.zfc-totals__value--savings {
  color: #e85d3a !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.zfc-original-price {
  color: #86868b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  margin-right: 4px !important;
}

/* Subtotal total row */
.zfc-totals__row--total {
  padding-top: 4px !important;
  border-top: none !important;
}

.zfc-totals__label--total {
  color: #1d1d1f !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.zfc-totals__value--total {
  color: #1d1d1f !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Checkout CTA container — stacked column */
.zfc-cart-ctas {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 0 14px !important;
}

/* Checkout Button — Gymshark Black (Unified size with product page Add to Cart button: 48px height, 15px font-size) */
.zfc-checkout-btn,
.cart__checkout-button,
#checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  background: #1d1d1f !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0 20px !important;
  min-height: 48px !important;
  height: 48px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

#CartDrawer-Checkout {
  padding: 0 20px !important;
  min-height: 48px !important;
  height: 48px !important;
  line-height: 1.2 !important;
  margin-bottom: 5px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.zfc-checkout-btn:hover {
  background: #333333 !important;
  color: #ffffff !important;
}

.zfc-checkout-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #ffffff !important;
  fill: none !important;
}

/* Cart Drawer — small payment icons */
.zfc-cart-payment-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  list-style: none !important;
  margin: 6px 0 0 0 !important;
  padding: 0px 30px !important;
}

.zfc-cart-payment-icon {
  display: flex !important;
  align-items: center !important;
}

.zfc-cart-payment-icon .icon {
  width: 28px !important;
  height: 18px !important;
}

/* Payment Icons Row */
/* Product page payment icons (SVG-based like footer) */
.zfc-product-payment-icons {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
}

.zfc-product-payment-icon {
  display: flex !important;
  align-items: center !important;
}

.zfc-product-payment-icon .icon {
  width: 34px !important;
  height: 22px !important;
}

/* Product page trust badges */
.zfc-product-trust-badges {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0px !important;
  margin: 20px 0 0 0 !important;
  background: #fafafc !important;
  border: 1px solid #e5e5e7 !important;
  padding: 16px 12px !important;
  border-radius: 12px !important;
}

.zfc-trust-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
  flex: 1 !important;
}

.zfc-trust-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
  opacity: 0.85 !important;
}

.zfc-trust-item p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #1d1d1f !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.zfc-trust-item p strong {
  font-weight: 700 !important;
}

/* Recommendations subtitle */
.zfc-drawer-recommendations-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #86868b !important;
  margin: 2px 0 0 0 !important;
  line-height: 1.3 !important;
}

/* Cart Drawer Recommendations Section */
.zfc-drawer-recommendations {
  padding: 6px 12px 4px 12px !important;
  background: #f5f5f7 !important;
  border-top: none !important;
}

.zfc-drawer-recommendations-header {
  margin-bottom: 4px !important;
  padding: 0 !important;
}

.zfc-drawer-recommendations-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  color: #1d1d1f !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Carousel wrapper */
.zfc-drawer-recs-carousel-wrapper {
  overflow: hidden !important;
  width: 100% !important;
  cursor: grab !important;
}

.zfc-drawer-recs-carousel-wrapper:active {
  cursor: grabbing !important;
}

/* Dots nav for cart drawer recommendations */
.zfc-drawer-recommendations .zfc-slider__dots {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 8px !important;
  gap: 6px !important;
}

.zfc-drawer-recommendations .zfc-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #d2d2d7 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.zfc-drawer-recommendations .zfc-dot.active {
  width: 16px !important;
  border-radius: 999px !important;
  background: #FFD929 !important;
}

.zfc-drawer-recs-carousel-wrapper {
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
}

/* Horizontal Recommendation Slider */
.zfc-drawer-recommendations-slider {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 4px 10px 4px !important;
  scrollbar-width: none !important;
  width: 100% !important;
}

.zfc-drawer-recommendations-slider::-webkit-scrollbar {
  display: none !important;
}

/* Ensure drawer cards don't inherit block display */
.zfc-drawer-recommendations-slider>* {
  flex-shrink: 0 !important;
  scroll-snap-align: start !important;
}

/* Carousel card */
.zfc-drawer-upsell-carousel-card {
  flex: 0 0 280px !important;
  width: 280px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  padding: 14px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 90px !important;
}

.zfc-drawer-upsell-carousel-card:hover {
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* Drawer upsell badge — inside card, top-right corner */
.zfc-drawer-upsell-badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  background: #2d8a4e !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 4px 10px !important;
  border-radius: 0 12px 0 8px !important;
  line-height: 1.2 !important;
  z-index: 2 !important;
  white-space: nowrap !important;
}

.zfc-drawer-upsell-carousel-card-media {
  width: 76px !important;
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f5f5f7 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.zfc-drawer-upsell-carousel-card-media img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.zfc-drawer-upsell-carousel-card-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.zfc-drawer-upsell-carousel-card-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  line-height: 1.3 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 0 !important;
}

.zfc-drawer-upsell-carousel-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 2px !important;
}

.zfc-drawer-upsell-carousel-card-price {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
}

.zfc-drawer-upsell-carousel-add-btn {
  background: #1d1d1f !important;
  border: none !important;
  border-radius: 6px !important;
  width: auto !important;
  min-width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

.zfc-drawer-upsell-carousel-add-btn:hover {
  background: #333333 !important;
  color: #ffffff !important;
}

.zfc-drawer-upsell-carousel-add-btn.loading {
  color: transparent !important;
  position: relative !important;
  pointer-events: none !important;
}

.zfc-drawer-upsell-carousel-add-btn.loading::after {
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  border: 2px solid rgba(255, 255, 255, 0.35) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: zfc-spin 0.6s linear infinite !important;
  top: 50% !important;
  left: 50% !important;
  margin-top: -7px !important;
  margin-left: -7px !important;
}

/* ============================================================
   Premium Cart Drawer Item Cards Layout Refinement
   ============================================================ */
.cart-drawer .cart-items,
.cart-drawer .cart-items thead,
.cart-drawer .cart-items tbody,
.cart-drawer .cart-items tr,
.cart-drawer .cart-items td,
.cart-drawer .cart-items th {
  display: block !important;
  width: 100% !important;
}

.cart-drawer .cart-items thead {
  display: none !important;
  /* Hide column header titles like PRODUCT/TOTAL */
}

.cart-drawer tr.cart-item {
  display: flex !important;
  flex-direction: row !important;
  gap: 16px !important;
  padding: 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
  position: relative !important;
}

.cart-drawer td.cart-item__media {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 12px !important;
  border: none !important;
  overflow: hidden !important;
  background: #f5f5f7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cart-drawer td.cart-item__media img {
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
}

.cart-drawer td.cart-item__details {
  flex-grow: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  justify-content: center !important;
}

.cart-drawer .cart-item__name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  margin: 0 !important;
  padding-right: 32px !important;
  /* reserve space for absolute trash icon */
  line-height: 1.3 !important;
  text-decoration: none !important;
}

.cart-drawer .cart-item__name:hover {
  text-decoration: none !important;
}

.cart-drawer .zfc-cart-item-variants {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #86868b !important;
  margin-top: 2px !important;
}

.cart-drawer td.cart-item__quantity {
  width: auto !important;
  padding: 0 !important;
  margin: 8px 0 0 0 !important;
  display: flex !important;
  align-items: center !important;
}

.cart-drawer .cart-item__quantity-wrapper {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
}

/* Position Cart Item Price and Trash bin */
.cart-drawer td.cart-item__totals {
  display: none !important;
  /* Hide old separate totals td */
}

/* Absolute trash button positioning */
.cart-drawer cart-remove-button {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  margin: 0 !important;
  z-index: 5 !important;
  display: block !important;
}

.cart-drawer cart-remove-button .button {
  background: transparent !important;
  border: none !important;
  color: #86868b !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

.cart-drawer cart-remove-button .button:hover {
  background: #f5f5f7 !important;
  color: #e63946 !important;
}

.cart-drawer cart-remove-button svg {
  width: 14px !important;
  height: 14px !important;
}

/* Quantity Pill styling input-popover */
.cart-drawer quantity-input.quantity {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 999px !important;
  width: 90px !important;
  height: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 6px !important;
  background: #f5f5f7 !important;
  /* Premium light gray background */
}

.cart-drawer quantity-input.quantity button.quantity__button {
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: #1d1d1f !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: background 0.2s ease !important;
}

.cart-drawer quantity-input.quantity button.quantity__button:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.cart-drawer quantity-input.quantity button.quantity__button svg {
  width: 9px !important;
  height: 9px !important;
  color: #1d1d1f !important;
}

.cart-drawer quantity-input.quantity input.quantity__input {
  width: 30px !important;
  height: 24px !important;
  min-height: 24px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 0 !important;
  text-align: center !important;
  color: #1d1d1f !important;
  background: transparent !important;
}

/* ============================================
   MOBILE & TABLET SLIDER CARD OPTIMIZATIONS
   ============================================ */

/* Force product card images to be fit inside container (contain, no cropping) */
.card-wrapper.product-card-wrapper .card__inner .card__media .media img,
.card-wrapper.product-card-wrapper .card__media .media img,
.card-wrapper.product-card-wrapper .media img,
.card-wrapper.product-card-wrapper img {
  object-fit: contain !important;
  padding: 12px !important;
}

/* Responsive mobile/tablet slider card width adjustments */
@media screen and (max-width: 749px) {

  /* Prevent the slider from overriding the page-width padding, so it matches the collection page container width */
  .featured-collection .slider-mobile-gutter .slider--tablet,
  .featured-collection .slider-mobile-gutter .slider--mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* On mobile, show exactly two cards side by side, filling the page-width container */
  .slider.slider--tablet.grid--peek .grid__item,
  .slider.slider--mobile.grid--peek .grid__item {
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    margin-right: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {

  /* On tablet, show exactly three cards side by side */
  .slider.slider--tablet.grid--peek .grid__item {
    width: calc(33.33% - 10.66px) !important;
    min-width: calc(33.33% - 10.66px) !important;
    margin-right: 16px !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* Ensure all slides in standard sliders flex their heights correctly and stretch */
.slider {
  align-items: stretch !important;
}

.slider .slider__slide,
.slider .grid__item {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

.slider .card-wrapper.product-card-wrapper {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Hide default Dawn slider counter and arrows on mobile/tablet for collection/featured collection sliders */
@media screen and (max-width: 989px) {

  .featured-collection .slider-buttons,
  .collection .slider-buttons {
    display: none !important;
  }
}

/* Align card link font with the brand system font */
.full-unstyled-link {
  font-family: var(--font) !important;
  text-align: inherit !important;
}

/* Swatches mobile wrapping & label clipping prevention */
@media screen and (max-width: 989px) {
  .card-swatches-wrapper {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    margin: 8px 0 !important;
  }

  .card-swatches {
    margin-right: auto !important;
  }

  .card-swatch-label {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
}

/* Force square aspect ratio (1:1) on mobile/tablet sliders to match the collection page cards */
@media screen and (max-width: 989px) {

  .slider .card-wrapper.product-card-wrapper .card__inner.ratio::before,
  .slider .card-wrapper.product-card-wrapper .ratio::before {
    padding-bottom: 100% !important;
  }
}

/* Custom slider dots styling */
.zfc-slider__dots {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  width: 100% !important;
}

/* Hide dots in announcement/utility bar */
.announcement-bar .zfc-slider__dots,
.utility-bar .zfc-slider__dots,
.shopify-section-group-header-group .announcement-bar-section .zfc-slider__dots {
  display: none !important;
}

/* Image overlay quick add button */
.card-image-quick-add {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
}

.card-image-quick-add__btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  color: #121212 !important;
  padding: 0 !important;
  position: relative !important;
}

.card-image-quick-add__btn:hover {
  background: #121212 !important;
  color: #ffffff !important;
  border-color: #121212 !important;
  transform: scale(1.15) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24) !important;
}

.card-image-quick-add__btn[disabled] {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  background: #f5f5f7 !important;
  color: #86868b !important;
  border-color: rgba(0, 0, 0, 0.05) !important;
}

.card-image-quick-add__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.card-image-quick-add__btn .loading-spinner {
  width: 16px !important;
  height: 16px !important;
  position: absolute !important;
}

/* ============================================================
   Custom Layout Adjustments
   ============================================================ */

/* 1 & 3. Decrease grid spacing between product cards and card details margin/paddings */
.grid,
.product-grid {
  --grid-desktop-horizontal-spacing: 6px !important;
  --grid-desktop-vertical-spacing: 10px !important;
  --grid-mobile-horizontal-spacing: 4px !important;
  --grid-mobile-vertical-spacing: 8px !important;
}

/* Make product card image bigger by reducing padding inside the background box */
.card-wrapper.product-card-wrapper .card__media img,
.card-wrapper.product-card-wrapper .card__inner .card__media .media img,
.card-wrapper.product-card-wrapper .card__media .media img,
.card-wrapper.product-card-wrapper .media img,
.card-wrapper.product-card-wrapper img {
  padding: 6px !important;
}

/* Card Body padding and margins adjustments to prioritize image size */
.card-wrapper.product-card-wrapper .card__content {
  padding: 12px 10px !important;
}

/* Card Heading (Title) margin */
.card-wrapper.product-card-wrapper .card__heading {
  margin: 0 0 4px 0 !important;
}

/* Swatch Label (Color Name) styling above swatches */
.card-wrapper.product-card-wrapper .card-swatch-label {
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: 10.5px !important;
  color: #86868b !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
}

/* Reduce margin of swatches container */
.card-wrapper.product-card-wrapper .card-swatches-wrapper {
  margin: 6px 0 6px 0 !important;
}

/* On mobile/tablet, adjust product card content padding */
@media screen and (max-width: 749px) {
  .card-wrapper.product-card-wrapper .card__content {
    padding: 8px 6px !important;
  }
}

/* ============================================================
   Circular Quick Add Button Overlaid on Image
   ============================================================ */

.card-wrapper.product-card-wrapper .quick-add {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5 !important;
}

/* Circular quick-add button overlaid on the image */
.card-wrapper.product-card-wrapper .quick-add__submit {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  position: relative !important;
  margin: 0 !important;
}

.card-wrapper.product-card-wrapper .quick-add__submit:hover {
  background: #ffffff !important;
  color: #000000 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.card-wrapper.product-card-wrapper .quick-add__submit::before {
  display: none !important;
}

/* Pulsing halo ring animation (circle on top of circle) */
.card-wrapper.product-card-wrapper .quick-add__submit::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite !important;
  pointer-events: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }

  80%,
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

/* Disabled/Sold Out styling */
.card-wrapper.product-card-wrapper .quick-add__submit[disabled] {
  background: #f5f5f7 !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.card-wrapper.product-card-wrapper .quick-add__submit[disabled]::after {
  display: none !important;
}

/* Style the price under the swatches */
.card-wrapper.product-card-wrapper .card-price-wrapper {
  margin-top: 6px !important;
  display: block !important;
}

.card-wrapper.product-card-wrapper .card-price-wrapper .price {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

.card-wrapper.product-card-wrapper .card-price-wrapper .price-item--regular {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

.card-wrapper.product-card-wrapper .card-price-wrapper .price-item--compare {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #86868b !important;
}

/* ---- Card elements size & spacing adjustments (making them smaller and bringing them closer) ---- */
.card-wrapper.product-card-wrapper .card-device-badge {
  font-size: 9.5px !important;
  margin-bottom: 2px !important;
}

.card-wrapper.product-card-wrapper .card__heading,
.card-wrapper.product-card-wrapper .card__heading a,
.card-wrapper.product-card-wrapper .card__heading .full-unstyled-link {
  font-size: 13px !important;
  margin: 0 0 2px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.card-wrapper.product-card-wrapper .card-swatch-label {
  font-size: 9px !important;
  margin-bottom: 4px !important;
}

.card-wrapper.product-card-wrapper .card-swatches-wrapper {
  margin: 4px 0 4px 0 !important;
}

.card-wrapper.product-card-wrapper .card-swatch {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
}

.card-wrapper.product-card-wrapper .quick-add__submit .btn-icon-custom {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

.card-wrapper.product-card-wrapper .quick-add__submit .icon-bag-plus,
.card-wrapper.product-card-wrapper .quick-add__submit .icon-cart {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  stroke: #000000 !important;
}

.card-wrapper.product-card-wrapper .quick-add__submit[disabled] .icon-bag-plus,
.card-wrapper.product-card-wrapper .quick-add__submit[disabled] .icon-cart {
  stroke: #86868b !important;
}

/* Force portrait aspect ratio on all product card images (slightly shorter than 3:4) */
.card-wrapper.product-card-wrapper .card__inner.ratio::before,
.card-wrapper.product-card-wrapper .ratio::before {
  padding-bottom: 120% !important;
  /* Slightly shorter portrait ratio */
}

/* ============================================================
   Product Page: Custom Image Color Variant Picker (Metafields-based)
   ============================================================ */

.product-image-picker-wrapper {
  margin: 20px 0 !important;
}

.product-image-picker-wrapper .color-label {
  font-family: var(--font-body-family) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 10px !important;
  display: block !important;
  text-align: left !important;
}

.product-variant-image-picker-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 6px !important;
  scrollbar-width: none !important;
  /* Firefox */
  padding-bottom: 6px !important;
  width: 100% !important;
}

.product-variant-image-picker-list::-webkit-scrollbar {
  display: none !important;
  /* Safari/Chrome */
}

/* Card base style (grey background, transparent border, no border radius) */
.product-variant-image-card {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 84px !important;
  padding: 2px !important;
  border-radius: 8px !important;
  background: #f5f5f7 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  /* Prevent shrinking in scroll container */
}

.product-variant-image-card .variant-image-wrapper {
  width: 76px !important;
  height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}

.product-variant-image-card .variant-image-wrapper img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  mix-blend-mode: multiply !important;
}

.product-variant-image-card .variant-label-text {
  display: none !important;
}

/* Active/Selected state (white background, solid black border, black label text) */
.product-variant-image-card.active {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  cursor: default !important;
}

/* Menu NEW badge styling */
.menu-badge-new {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FFD929 !important;
  color: #000000 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  margin-left: 6px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  box-shadow: 0 2px 6px rgba(255, 217, 41, 0.3) !important;
  pointer-events: none !important;
}

/* Upsell Variant Select Styling (Product Page & Cart Drawer) */
.zfc-upsell-variant-select,
.zfc-drawer-upsell-variant-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231d1d1f%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 10px 10px !important;
  border: 1px solid #d2d2d7 !important;
  border-radius: 6px !important;
  color: #1d1d1f !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 22px 2px 8px !important;
  height: 26px !important;
  margin: 0 !important;
  cursor: pointer !important;
  outline: none !important;
  max-width: 100% !important;
  line-height: 1.2 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.zfc-upsell-variant-select:hover,
.zfc-drawer-upsell-variant-select:hover {
  border-color: #86868b !important;
}

.zfc-upsell-variant-select:focus,
.zfc-drawer-upsell-variant-select:focus {
  border-color: #000000 !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
}

/* Empty Cart Drawer Styling */
.zfc-empty-cart-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 24px 40px 24px !important;
  text-align: center !important;
  flex: 1 !important;
  min-height: 380px !important;
}

.zfc-empty-cart-icon {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: #f5f5f7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}

.zfc-empty-cart-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2 !important;
}

.zfc-empty-cart-msg {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  color: #86868b !important;
  margin: 0 0 28px 0 !important;
  max-width: 280px !important;
  line-height: 1.4 !important;
}

.zfc-empty-cart-btn {
  background: #000000 !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 0 32px !important;
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
}

.zfc-empty-cart-btn:hover {
  background: #2d2d2f !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

.zfc-empty-cart-login {
  margin-top: 36px !important;
  padding-top: 24px !important;
  border-top: 1px solid #e5e5e7 !important;
  width: 100% !important;
  max-width: 280px !important;
}

.zfc-empty-cart-login .cart__login-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  margin: 0 0 4px 0 !important;
}

.zfc-empty-cart-login .cart__login-paragraph {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  color: #86868b !important;
  margin: 0 !important;
}

.zfc-empty-cart-login a {
  color: #000000 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* Hide raw loading warning text in cart drawer */
.cart-item__warning,
#CartDrawer-CartWarning {
  display: none !important;
}

/* Cart Drawer Upsell Quantity Pill Selector */
.zfc-drawer-upsell-qty {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 0 4px !important;
  height: 26px !important;
  min-width: 62px !important;
  border: 1px solid #d2d2d7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.zfc-drawer-upsell-qty-btn {
  background: transparent !important;
  border: none !important;
  color: #1d1d1f !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.zfc-drawer-upsell-qty-value {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  margin: 0 2px !important;
}

/* Cart Drawer Loading Overlay */
.zfc-cart-loading-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}

/* When cart-drawer is loading, show overlay */
cart-drawer.loading .zfc-cart-loading-overlay,
.cart-drawer.loading .zfc-cart-loading-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.zfc-loading-spinner {
  width: 34px !important;
  height: 34px !important;
  border: 3.5px solid #e5e5e7 !important;
  border-top-color: #000000 !important;
  border-radius: 50% !important;
  animation: zfc-spin 0.75s linear infinite !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

@keyframes zfc-spin {
  to { transform: rotate(360deg); }
}