/* ==================== roxy-urban.css ==================== */

/* ─── Theme overrides: product cards ───────────────────────────── */
body.dm-light .product-item__box {
  background-color: #ffffff;
}
body.dm-dark .product-item__box {
  background-color: #2a2727;
}

/* ─── Product cards: equal height ──────────────────────────────── */
.product-item {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.product-item__box {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-item__intro {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-item__not-active {
  flex: 1;
}
.product-item__info {
  margin-top: auto;
}

/* ─── Special offers: equal height grid ────────────────────────── */
.equal-height-grid > * {
  display: flex;
}
.equal-height-card {
  display: flex;
  width: 100%;
}
.equal-height-card .product-item__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.equal-height-card .product-item__intro {
  flex: 1;
}
.equal-height-card .product-item__info {
  margin-top: auto;
}

/* ─── Cart: sticky checkout button (mobile) ─────────────────────── */
.mobile-sticky-button-wrapper {
  display: none;
}
.desktop-checkout-btn {
  display: block;
}

@media (max-width: 959px) {
  .desktop-checkout-btn {
    display: none;
  }

  .mobile-sticky-button-wrapper {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 1000;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 20px;
  }
  body.dm-dark .mobile-sticky-button-wrapper {
    background: rgba(42, 39, 39, 0.96);
    border-top-color: rgba(255, 255, 255, 0.05);
  }
  .mobile-sticky-button-wrapper .floating-checkout-btn {
    margin: 0;
    padding: 14px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s;
  }
  .mobile-sticky-button-wrapper .floating-checkout-btn:active {
    transform: scale(0.98);
  }
  .page-content {
    padding-bottom: 100px;
  }
}

@media (min-width: 960px) {
  .desktop-checkout-btn {
    display: block;
  }
  .mobile-sticky-button-wrapper {
    display: none;
  }
}

/* ─── Checkout: scrollable summary & sticky place-order button ──── */
.summary-scrollable {
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.summary-scrollable::-webkit-scrollbar {
  display: none;
}

@media (min-width: 960px) {
  .summary-scrollable {
    max-height: calc(100vh - 100px);
  }
  .sticky-button-wrapper {
    position: static;
    padding: 0;
  }
  .sticky-button-wrapper .place-order-btn {
    margin-top: 20px;
  }
}

@media (max-width: 959px) {
  .summary-scrollable {
    max-height: 50vh;
    margin-bottom: 20px;
  }

  .sticky-button-wrapper {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 20px;
  }
  body.dm-dark .sticky-button-wrapper {
    background: rgba(42, 39, 39, 0.96);
    border-top-color: rgba(255, 255, 255, 0.05);
  }
  .sticky-button-wrapper .place-order-btn {
    margin: 0;
    padding: 14px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease;
  }
  .sticky-button-wrapper .place-order-btn:active {
    transform: scale(0.98);
  }
  .page-content {
    padding-bottom: 100px;
  }
}

/* ───────────────────────────────────────────────────────────────────
   FIX: Logo alignment in navbar
   .logo__box uses aspect-ratio 1/1 on a wide clamp width, inflating
   the navbar row and misaligning nav links. Constrained here to sit
   flush inside the 60 px navbar min-height.
─────────────────────────────────────────────────────────────────── */
@media (min-width: 960px) {
  .page-header__top .logo {
    width: clamp(52px, 5.5vw, 66px);
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  .page-header__top .logo {
    width: clamp(46px, 7vw, 58px);
  }
}

.page-header__top .uk-navbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ───────────────────────────────────────────────────────────────────
   FIX: White strip below the navbar
   Root causes:
   a) .sticky-container had uk-background-default (#fff) in the HTML —
      removed from the template, but kept transparent here as a safety
      net in case the class is ever re-added.
   b) .page-header has background-color:#ffffff in main.css and is only
      overridden for dm-dark/dm-light *after* JS runs. Setting it to
      #333230 on mobile ensures the correct colour on first paint, before
      the darkmode script fires.
   c) .page-header__bottom had margin-top:30px in main.css — zeroed out.
   d) main.css has a typo: background-color:##211e1e (double hash) on
      .page-header__pre, making it transparent — corrected below.
─────────────────────────────────────────────────────────────────── */

/* (a) sticky container — never white */
.sticky-container {
  background-color: transparent !important;
}
body.dm-dark .sticky-container,
body.dm-dark .uk-navbar-sticky {
  background-color: #1a1a1a !important;
}
body.dm-light .sticky-container,
body.dm-light .uk-navbar-sticky {
  background-color: #f5f5f5 !important;
}

/* (b) page-header — correct colour on first paint (no dm- class yet) */
.page-header {
  background-color: #333230;
} /* dark default */
body.dm-dark .page-header {
  background-color: #1a1a1a;
}
body.dm-light .page-header {
  background-color: #f5f5f5;
}

@media (max-width: 639px) {
  /* Reinforce on mobile where the strip was most visible */
  .page-header {
    background-color: #333230;
  }
  body.dm-dark .page-header {
    background-color: #1a1a1a;
  }
  body.dm-light .page-header {
    background-color: #f5f5f5;
  }
}

/* (c) page-header__pre — typo fix + correct colours */
.page-header__pre {
  background-color: transparent;
}
body.dm-dark .page-header__pre {
  background-color: #1a1a1a;
}
body.dm-light .page-header__pre {
  background-color: #f5f5f5;
}

/* (d) page-header__bottom — remove stray top margin */
.page-header__bottom {
  margin-top: 0;
}
body.dm-dark .page-header__bottom {
  background-color: #1a1a1a;
  padding: 8px 0;
}
body.dm-light .page-header__bottom {
  padding: 8px 0;
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media only screen and (max-width: 1440px) {
  body.dm-dark .uk-slidenav {
    background-color: #222222;
  }
}

@media only screen and (max-width: 959px) {
  body.dm-dark .product-full-card__info-list li {
    border-bottom: 1px solid #3e3c3c;
  }
  body.dm-light .product-full-card__info-list li {
    border-bottom: 1px solid rgba(62, 60, 60, 0.15);
  }
}

@media only screen and (max-width: 959px) {
  body.dm-light .logo__box {
    background-color: #f5f5f5;
    box-shadow: 0 7px 37px 3px rgba(0, 0, 0, 0.06);
  }
}