/* DUNEUS · Components (card, PDP, collection, cart, footer) — split further per phase
 * Part of the modular DUNEUS presentation layer. Load order:
 * tokens -> base -> forms -> header -> footer -> product-card ->
 * product -> collection -> cart -> sections -> responsive
 * ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
 * 09 · BADGES
 * ------------------------------------------------------------------------ */
body .badge,
body .product-badge,
body .preorder-badge {
  font-family: var(--d-display);
  font-size: var(--d-fs-micro);
  font-weight: 700;
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: var(--d-radius-ctl) !important;
  line-height: 1;
}
[dir='rtl'] body .badge,
[dir='rtl'] body .preorder-badge { letter-spacing: 0; text-transform: none; }
body .preorder-badge {
  background-color: var(--d-orange);
  color: var(--d-white);
}
body .preorder-badge--product-card {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 3;
}
/* ---------------------------------------------------------------------------
 * 10 · PRODUCT DETAIL PAGE
 * ------------------------------------------------------------------------ */
body .products-details-page { padding-block-start: 2rem; }
body .products-details-page h1 {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  margin-block-end: 0.75rem;
}
body .product-formatted-price {
  font-family: var(--d-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 800;
  color: var(--duneus-fg, #111111);
  margin: 0;
}
body .product-formatted-price-old {
  color: var(--d-faint);
  font-weight: 500;
  margin-inline-end: 0.6rem;
}
body .product-formatted-price-discount {
  color: var(--d-orange) !important;
  font-weight: 700;
  font-size: var(--d-fs-sm);
}
/* Spec rows (SKU, weight) read as a technical sheet. */
body .div-product-sku,
body .div-product-weight {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--d-line-soft);
  margin-bottom: 0 !important;
}
body .div-product-sku .product-title,
body .div-product-weight .product-title {
  flex: 0 0 auto;
  min-width: 96px;
  font-size: var(--d-fs-micro);
  font-weight: 700;
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-faint);
  margin: 0;
}
body .product-sku,
body .product-weight { color: var(--duneus-fg, #111111); font-size: var(--d-fs-sm); }
/* Variant / option controls rendered by Zid's variants_list include. */
body .size-box .product-title,
body .select-quantity-div .product-title {
  font-size: var(--d-fs-micro);
  font-weight: 700;
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-faint);
  margin-block-end: 0.75rem;
}
[dir='rtl'] body .size-box .product-title,
[dir='rtl'] body .select-quantity-div .product-title { letter-spacing: 0; text-transform: none; }
/* Option pills — square, bordered, orange when active. Zid controls state. */
body .product-options__list { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
body .product-options__item {
  border: 1px solid var(--d-line);
  color: var(--duneus-fg, #111111);
  padding: 0.7rem 1.1rem;
  font-family: var(--d-display);
  font-size: var(--d-fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--d-fast) var(--d-ease), background-color var(--d-fast) var(--d-ease);
}
body .product-options__item:hover { border-color: var(--d-ink); }
body .product-options__item.active {
  /* Solid fill, matching the reference: an outline reads as "hovered", a fill
     reads as "chosen". */
  border-color: var(--pp-var-on-bg, #111111);
  background-color: var(--pp-var-on-bg, #111111);
  color: var(--pp-var-on-fg, #FFFFFF);
}
/* Colour / image choices keep the swatch visible — never a solid fill. */
body .product-options__item--color,
body .product-options__item--icon { padding: 0.375rem; }
body .product-options__swatch {
  display: block; width: 34px; height: 34px; box-sizing: border-box;
  border: 1px solid var(--d-line); border-radius: 999px;
}
body .product-options__thumb {
  display: block; width: 2.75rem; height: 2.75rem; object-fit: cover;
}
body .product-options__item--color.active,
body .product-options__item--icon.active {
  background: transparent;
  border-color: var(--d-orange);
  box-shadow: 0 0 0 2px var(--d-orange) !important;
}
body .product-options__item-text--sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Buy column */
body .product-buttons .d-flex { flex-wrap: wrap; gap: 0.65rem; }
body .product-buttons .btn { flex: 1 1 100%; }
body .low-quantity-section {
  font-family: var(--d-display);
  font-size: var(--d-fs-micro);
  font-weight: 700;
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-orange);
}
[dir='rtl'] body .low-quantity-section { letter-spacing: 0; text-transform: none; }
body .section-out-of-stock-notify-me {
  background-color: var(--d-surface);
  border: 1px solid var(--d-line);
  padding: 1.5rem;
  margin-block-start: 1.25rem;
}
body .preorder-countdown-wrapper {
  border: 1px solid var(--d-orange);
  padding: 1rem 1.25rem;
  margin-block: 1rem;
}
/* Gallery */
body .product-images-carousel,
body .product-images-empty { background-color: var(--d-surface); }
body .lg-thumbs img { opacity: 0.5; transition: opacity var(--d-fast) var(--d-ease); }
body .lg-thumbs img:hover,
body .lg-thumbs .slick-current img { opacity: 1; }
/* ---------------------------------------------------------------------------
 * 11 · LISTING / COLLECTION
 * ------------------------------------------------------------------------ */
body .products-title-section,
body .category-title { margin-block: var(--d-section) 2rem; }
body .form-products-filter,
body .filters-section {
  background-color: transparent;
  border: 0;
  border-inline-end: 1px solid var(--d-line);
  padding-inline-end: 1.75rem;
}
body .filters-section h4,
body .form-products-filter h4 {
  font-size: var(--d-fs-micro);
  font-weight: 700;
  letter-spacing: var(--d-track-micro);
  text-transform: uppercase;
  color: var(--d-faint);
  padding-block: 1rem;
  border-bottom: 1px solid var(--d-line-soft);
}
[dir='rtl'] body .filters-section h4 { letter-spacing: 0; text-transform: none; }
/* Pagination — square, hairline. */
body .pagination .page-link {
  background-color: transparent;
  border: 1px solid var(--d-line);
  color: var(--duneus-fg, #111111);
  font-family: var(--d-display);
  font-size: var(--d-fs-sm);
  font-weight: 700;
  min-width: 46px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline: 2px;
}
body .pagination .page-link:hover { border-color: var(--d-ink); background-color: transparent; }
body .pagination .active .page-link,
body .pagination .page-item.active .page-link {
  background-color: var(--d-orange);
  border-color: var(--d-orange);
  color: var(--d-white);
}
/* ---------------------------------------------------------------------------
 * 12 · CART
 * ------------------------------------------------------------------------ */
body .cart-product-row-wrapper,
body .section-cart-products-row {
  border-bottom: 1px solid var(--d-line-soft);
  padding-block: 1.15rem;
}
body .cart-totals-row-wrapper { border-bottom: 1px solid var(--d-line-soft); }
body .cart-totals-div { font-family: var(--d-display); }
body .coupon-form .form-control { min-height: 52px; }
/* Free-shipping meter: Oasis Green only once the threshold is actually met. */
body .progress,
body .free-shipping-rule-section .progress {
  background-color: var(--d-surface-2);
  border-radius: 999px !important;
  height: 8px;
  overflow: hidden;
}
body .progress-bar,
body .free-shipping-rule-progress {
  background-color: var(--d-orange);
  transition: width var(--d-base) var(--d-ease);
}
body .free-shipping-rule-done .free-shipping-rule-progress,
body .free-shipping-rule-done .progress-bar { background-color: var(--d-oasis); }
body .cart-empty,
body .empty-cart { text-align: center; padding-block: var(--d-section); }
/* ---------------------------------------------------------------------------
 * 13 · FOOTER
 * ------------------------------------------------------------------------ */
/* The stock footer paints itself with the merchant's footer colours; force it
   onto the black canvas so the whole page reads as one surface. */
/* Each settings-driven link group becomes an editorial column with a ruled
   heading, rather than a plain stacked list. */
/* The brand column carries the wordmark and reads larger than the link lists. */
/* Social icons: hairline squares that fill orange on hover. */
body .social-icons { gap: 0.5rem; }
body .social-icons a,
body .social-icons > * {
  width: 42px;
  height: 42px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--d-line);
  color: var(--duneus-fg, #111111);
  font-size: 1rem;
  transition: background-color var(--d-fast) var(--d-ease),
              border-color var(--d-fast) var(--d-ease),
              color var(--d-fast) var(--d-ease);
}
body .social-icons a:hover {
  background-color: var(--d-orange);
  border-color: var(--d-orange);
  color: var(--duneus-fg, #111111);
}
/* Footer bar (payment methods, copyright) sits under a hairline. */
/* ---------------------------------------------------------------------------
 * 14 · MODALS / OVERLAYS
 * ------------------------------------------------------------------------ */
body .modal-content {
  background-color: var(--d-surface) !important;
  border: 1px solid var(--d-line) !important;
  color: var(--duneus-fg, #111111);
}
body .modal-header,
body .modal-footer { border-color: var(--d-line) !important; }
body .modal-backdrop.show { opacity: 0.75; }
body .modal-title {
  font-family: var(--d-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--d-track-disp);
}
body .alert {
  background-color: var(--d-surface);
  border: 1px solid var(--d-line);
  color: var(--duneus-fg, #111111);
}
body .alert-primary { border-color: var(--d-orange); }
/* Toast notifications */
body .toast,
body #toast-container > div {
  background-color: var(--d-surface) !important;
  border: 1px solid var(--d-line);
  border-radius: var(--d-radius-ctl) !important;
  font-family: var(--d-body);
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.8) !important;
  opacity: 1 !important;
}
/* ---------------------------------------------------------------------------
 * 15 · MOTION & ACCESSIBILITY
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
body *,
  body *::before,
  body *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
body .product-item:hover .box-1-1 img { transform: none; }
}
/* ---------------------------------------------------------------------------
 * 16 · RESPONSIVE
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
body .form-products-filter,
  body .filters-section { border-inline-end: 0; padding-inline-end: 0; }
}
@media (max-width: 767.98px) {
:root { --d-section: 3rem; }
body .product-buttons .btn { min-height: 50px; }
body .products-details-page { padding-block-start: 1rem; }
}