/*
 * Desi Astronaut conditional commerce styles.
 * Loaded after style.css on WooCommerce and approved storefront surfaces.
 */

/* ==========================================================================
   14. Product Card
   ========================================================================== */

.da-product {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--da-surface);
  padding: 1rem;
  border-radius: var(--da-r-28);
  border: 1px solid var(--da-gray-100);
  border-bottom: 2px solid var(--da-gray-100);
  box-shadow: var(--da-shadow-card);
  overflow: hidden;
  transition:
    box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 400ms ease;
}

.da-product:hover {
  box-shadow: var(--da-shadow-card-hover);
  transform: translateY(-4px);
  border-color: var(--da-primary-10);
  border-bottom-color: var(--da-primary);
}

.da-product__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--da-r-24);
  overflow: hidden;
  margin-bottom: 1rem;
  background: var(--da-image-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gradient overlay for depth */
.da-product__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.06) 0%,
    transparent 40%
  );
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.da-product:hover .da-product__overlay {
  opacity: 1;
}

.da-product__media > a {
  display: block;
  width: 100%;
  height: 100%;
}

.da-product__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.da-product:hover .da-product__img {
  transform: scale(1.05);
  filter: brightness(1.04);
}

.da-product__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--da-r-full);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: var(--da-amber-500);
  box-shadow: var(--da-shadow-xs);
  z-index: 2;
}

.da-product__badge--stock { background: var(--da-emerald-500); }
.da-product__badge--kit { background: var(--da-primary); }
.da-product__badge--best { background: var(--da-blue-600); }
.da-product__badge--sale { background: var(--da-rose-500); }

.da-product__wish {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  padding: 0.625rem;
  border-radius: var(--da-r-full);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--da-gray-700);
  box-shadow: var(--da-shadow-xs);
  transition: all var(--da-t);
}

.da-product__wish:hover {
  background: #ffffff;
  color: var(--da-rose-500);
}

.da-product__wish svg {
  width: 1rem;
  height: 1rem;
}

.da-product__wish.is-saved {
  background: var(--da-rose-500);
  color: #ffffff;
}

.da-product__wish.is-saved svg {
  fill: currentColor;
}

.da-product__quick {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0.875rem 0.75rem;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  border-radius: 0 0 var(--da-r-24) var(--da-r-24);
}

.da-product:hover .da-product__quick {
  opacity: 1;
  transform: translateY(0);
}

.da-product__quick button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--da-r-xl);
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all var(--da-t);
}

.da-product__quick button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.02);
}

.da-product__quick svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--da-primary);
}

.da-product__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 0.125rem;
}

/* Category label above the product name */
.da-product__cat {
  display: block;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--da-primary-text);
  margin-bottom: 0.25rem;
  transition: color var(--da-t);
}

.da-product__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.da-product__name {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--da-gray-900);
  letter-spacing: -0.01em;
  transition: color 300ms ease;
}

.da-product:hover .da-product__name {
  color: var(--da-primary-text);
}

.da-product__tagline {
  font-size: 0.75rem;
  color: var(--da-gray-600);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.da-rating-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  border-radius: var(--da-r-md);
  background: var(--da-amber-50);
  border: 1px solid rgba(253, 230, 138, 0.5);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--da-gray-800);
}

.da-rating-chip--lg {
  padding: 0.25rem 0.625rem;
}

.da-rating-chip svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: var(--da-amber-400);
  color: var(--da-amber-400);
}

.da-rating-chip small {
  color: var(--da-gray-600);
  font-weight: 400;
}

.da-product__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.625rem;
  margin-top: auto;
  border-top: 1px solid var(--da-gray-100);
  transition: border-color 300ms ease;
}

.da-product:hover .da-product__foot {
  border-top-color: var(--da-primary-10);
}

.da-product__price-label {
  display: none;
}

.da-price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.da-price__now {
  font-size: 1.375rem;
  font-weight: 900;
  color: var(--da-gray-900);
  letter-spacing: -0.02em;
}

.da-price__was {
  font-size: 0.75rem;
  color: var(--da-gray-500);
  text-decoration: line-through;
}

.da-add-btn {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: var(--da-r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--da-primary);
  color: #ffffff;
  box-shadow: var(--da-shadow-primary-sm);
  transition:
    background 250ms ease,
    box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.da-add-btn:hover {
  background: var(--da-primary-hover);
  box-shadow: var(--da-shadow-add-btn-glow);
  transform: scale(1.1);
}

.da-add-btn:active {
  transform: scale(0.92);
}

.da-add-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.da-add-btn .da-icon-check { display: none; }
.da-add-btn.is-added { background: var(--da-emerald-500); }
.da-add-btn.is-added .da-icon-check { display: block; }
.da-add-btn.is-added .da-icon-plus { display: none; }

/* Busy state — a spinner replaces the glyph while the request is in flight */
.da-add-btn.is-loading .da-icon-plus,
.da-add-btn.is-loading .da-icon-check {
  display: none;
}

.da-add-btn.is-loading::after,
.da-btn.is-loading::after {
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: var(--da-r-full);
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: da-btn-spin 700ms linear infinite;
}

.da-btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

.da-btn.is-loading > svg,
.da-btn.is-loading > span {
  display: none;
}

.da-add-btn[disabled] {
  cursor: wait;
}

/* WooCommerce single add-to-cart button, same treatment */
.single_add_to_cart_button.is-loading {
  pointer-events: none;
  opacity: 0.8;
}

.single_add_to_cart_button.is-loading::after {
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: var(--da-r-full);
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: da-btn-spin 700ms linear infinite;
}

.single_add_to_cart_button.is-added {
  background: var(--da-emerald-500) !important;
}

/* List variant */
.da-product--list {
  flex-direction: column;
  padding: 1rem;
  gap: 1.25rem;
  align-items: stretch;
  transform: none;
  border-bottom-width: 1px;
}

.da-product--list:hover {
  transform: none;
  border-bottom-color: var(--da-primary-10);
}

@media (min-width: 640px) {
  .da-product--list {
    flex-direction: row;
    padding: 1.25rem;
    align-items: center;
  }
}

.da-product--list .da-product__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .da-product--list .da-product__media {
    width: 12rem;
  }
}

.da-product--list .da-product__body {
  padding-block: 0.25rem;
}

.da-product--list .da-product__name {
  font-size: 1.25rem;
  font-weight: 800;
  display: block;
  margin-bottom: 0.25rem;
}

.da-product--list .da-product__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

.da-product--list .da-product__category {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--da-primary-text);
}

.da-product--list .da-product__foot {
  padding-top: 0.75rem;
  border-top: 1px solid var(--da-gray-100);
}

.da-product--list .da-price__now {
  font-size: 1.5rem;
}

.da-product--list .da-price__was {
  font-size: 0.875rem;
}

.da-spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.da-spec-tags span {
  font-size: 10px;
  background: var(--da-gray-100);
  color: var(--da-gray-600);
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--da-r-md);
  border: 1px solid var(--da-gray-200);
}

.da-product__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.da-product__icon-action {
  padding: 0.625rem;
  border-radius: var(--da-r-xl);
  border: 1px solid var(--da-gray-200);
  background: var(--da-gray-50);
  color: var(--da-gray-600);
  transition: all var(--da-t);
}

.da-product__icon-action:hover {
  color: var(--da-rose-500);
}

.da-product__icon-action.is-saved {
  background: var(--da-rose-50);
  border-color: var(--da-rose-200);
  color: var(--da-rose-500);
}

.da-product__icon-action.is-saved svg {
  fill: currentColor;
}

.da-product__icon-action svg {
  width: 1rem;
  height: 1rem;
}

/* Quick view layout */
.da-qv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

/* Loading placeholder, laid out like .da-qv so the modal does not jump when
   the real content arrives. */
.da-qv-skeleton {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .da-qv-skeleton {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

.da-qv-skeleton__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--da-r-2xl);
}

.da-qv-skeleton__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.da-qv-skeleton__line {
  height: 1rem;
  border-radius: var(--da-r-md);
}

.da-qv-skeleton__line--sm {
  width: 40%;
}

.da-qv-skeleton__line--lg {
  height: 1.75rem;
  width: 80%;
}

.da-qv-skeleton__cta {
  height: 3rem;
  border-radius: var(--da-r-xl);
  margin-top: auto;
}

@media (min-width: 768px) {
  .da-qv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}

.da-qv__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--da-r-2xl);
  background: #f4f5f7;
  border: 1px solid rgba(229, 231, 235, 0.8);
  overflow: hidden;
}

.da-qv__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--da-t-slower);
}

.da-qv__stage:hover img {
  transform: scale(1.05);
}

.da-qv__thumbs {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin-top: 1rem;
}

.da-qv__thumbs button {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: var(--da-r-lg);
  overflow: hidden;
  border: 2px solid var(--da-gray-200);
  opacity: 0.7;
  transition: all var(--da-t);
}

.da-qv__thumbs button:hover {
  opacity: 1;
  border-color: var(--da-gray-300);
}

.da-qv__thumbs button.is-active {
  border-color: var(--da-primary);
  opacity: 1;
  box-shadow: 0 0 0 2px var(--da-primary-20);
}

.da-qv__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.da-qv__details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
}

.da-qv__pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1rem;
  padding-block: 0.75rem;
  border-block: 1px solid var(--da-gray-100);
}

.da-qv__price {
  font-size: 1.875rem;
  font-weight: 800;
}

.da-qv__was {
  font-size: 1rem;
  color: var(--da-gray-500);
  text-decoration: line-through;
}

.da-size-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.da-size-picker button,
.da-size-picker label {
  padding: 0.375rem 0.875rem;
  border-radius: var(--da-r-xl);
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--da-gray-100);
  color: var(--da-gray-700);
  border: 1px solid var(--da-gray-200);
  transition: all var(--da-t);
  cursor: pointer;
}

.da-size-picker button:hover,
.da-size-picker label:hover {
  background: var(--da-gray-200);
}

.da-size-picker button.is-active,
.da-size-picker input:checked + label {
  background: var(--da-gray-900);
  color: #ffffff;
  border-color: var(--da-gray-900);
  box-shadow: var(--da-shadow-md);
}

/* ==========================================================================
   20. Shop Page
   ========================================================================== */

.da-shop-head {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .da-shop-head {
    flex-direction: row;
    align-items: flex-end;
  }
}

.da-filterbar {
  background: var(--da-surface);
  padding: 1rem;
  border-radius: var(--da-r-2xl);
  border: 1px solid rgba(229, 231, 235, 0.8);
  box-shadow: var(--da-shadow-xs);
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .da-filterbar {
    padding: 1.25rem;
  }
}

.da-filterbar > * + * {
  margin-top: 1rem;
}

.da-filterbar__row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .da-filterbar__row {
    flex-direction: row;
    align-items: center;
  }
}

.da-filterbar__controls {
  padding-top: 0.75rem;
  border-top: 1px solid var(--da-gray-100);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--da-gray-600);
}

.da-filterbar__chips {
  padding-top: 0.75rem;
  border-top: 1px solid var(--da-gray-100);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.da-filterbar__chips-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--da-gray-500);
  letter-spacing: 0.05em;
  margin-right: 0.25rem;
}

.da-clear-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--da-primary-text);
}

.da-clear-link:hover {
  color: var(--da-primary-hover);
}

.da-clear-link svg {
  width: 0.75rem;
  height: 0.75rem;
}

.da-sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.da-sort > svg {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--da-gray-500);
}

.da-sort__label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--da-gray-500);
  display: none;
}

@media (min-width: 640px) {
  .da-sort__label {
    display: inline;
  }
}

.da-sort select {
  background: var(--da-gray-50);
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-xl);
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--da-gray-900);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.875rem;
}

.da-view-switch {
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--da-gray-200);
  background: var(--da-gray-50);
  border-radius: var(--da-r-xl);
}

@media (min-width: 640px) {
  .da-view-switch {
    display: flex;
  }
}

.da-view-switch button {
  padding: 0.375rem;
  border-radius: var(--da-r-md);
  color: var(--da-gray-500);
  transition: all var(--da-t);
}

.da-view-switch button:hover {
  color: var(--da-gray-700);
}

.da-view-switch button.is-active {
  background: #ffffff;
  color: var(--da-primary);
  box-shadow: var(--da-shadow-xs);
}

.da-view-switch svg {
  width: 1rem;
  height: 1rem;
}

.da-toggle-btn {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--da-r-xl);
  border: 1px solid var(--da-gray-200);
  background: var(--da-gray-50);
  color: var(--da-gray-700);
  font-size: 0.75rem;
  font-weight: 700;
  transition: all var(--da-t);
}

@media (min-width: 1024px) {
  .da-toggle-btn {
    display: flex;
  }
}

.da-toggle-btn:hover {
  background: var(--da-gray-100);
}

.da-toggle-btn.is-on {
  background: var(--da-gray-900);
  color: #ffffff;
  border-color: var(--da-gray-900);
}

.da-toggle-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

.da-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--da-gray-900);
  color: #ffffff;
  padding: 0.625rem 1rem;
  border-radius: var(--da-r-2xl);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: var(--da-shadow-md);
}

@media (min-width: 1024px) {
  .da-filter-trigger {
    display: none;
  }
}

.da-filter-trigger svg {
  width: 1rem;
  height: 1rem;
  color: var(--da-primary);
}

.da-filter-trigger .da-live-dot {
  background: var(--da-primary);
}

.da-shop-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.da-shop-sidebar {
  display: none;
  width: 18rem;
  flex-shrink: 0;
  position: sticky;
  top: 7rem;
  background: var(--da-surface);
  padding: 1.5rem;
  border-radius: var(--da-r-2xl);
  border: 1px solid rgba(229, 231, 235, 0.8);
  box-shadow: var(--da-shadow-xs);
  font-size: 0.75rem;
}

@media (min-width: 1024px) {
  .da-shop-sidebar {
    display: block;
  }
  .da-shop-layout.is-sidebar-hidden .da-shop-sidebar {
    display: none;
  }
}

.da-shop-sidebar > * + * {
  margin-top: 1.5rem;
}

.da-shop-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--da-gray-100);
}

.da-shop-sidebar__head h3 {
  font-size: 0.875rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.da-shop-sidebar__head svg {
  width: 1rem;
  height: 1rem;
  color: var(--da-primary);
}

.da-filter-group + .da-filter-group {
  border-top: 1px solid var(--da-gray-100);
  padding-top: 1rem;
}

.da-filter-group__label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--da-gray-700);
  margin-bottom: 0.75rem;
}

.da-filter-group__label svg {
  width: 0.875rem;
  height: 0.875rem;
}

.da-filter-group__label--flush {
  margin: 0;
}

.da-filter-reset {
  color: var(--da-primary-text);
  font-size: 11px;
  font-weight: 700;
}

.da-filter-drawer__form {
  color: var(--da-gray-700);
  font-size: 0.75rem;
}

.da-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.da-filter-head span {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--da-primary-text);
}

.da-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.da-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.da-shop-results {
  flex: 1 1 auto;
  min-width: 0;
}

/* Product listing grids */
.da-listing {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .da-listing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .da-listing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .da-listing[data-view='grid-4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.da-listing[data-view='list'] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.da-no-results {
  background: var(--da-surface);
  border-radius: var(--da-r-2xl);
  border: 1px solid rgba(229, 231, 235, 0.8);
  box-shadow: var(--da-shadow-xs);
  padding: 3rem;
  text-align: center;
}

.da-no-results > * + * {
  margin-top: 1rem;
}

.da-no-results__mark {
  width: 4rem;
  height: 4rem;
  margin-inline: auto;
  border-radius: var(--da-r-full);
  background: var(--da-amber-50);
  border: 1px solid var(--da-amber-200);
  color: var(--da-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.da-no-results__mark svg {
  width: 2rem;
  height: 2rem;
}

.da-no-results h3 {
  font-size: 1.25rem;
  font-weight: 800;
}

.da-no-results p {
  font-size: 0.75rem;
  color: var(--da-gray-500);
  max-width: 28rem;
  margin-inline: auto;
}

/* Filter drawer body */
.da-filter-drawer__section + .da-filter-drawer__section {
  border-top: 1px solid var(--da-gray-100);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

.da-cat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--da-r-xl);
  background: var(--da-gray-50);
  color: var(--da-gray-700);
  font-weight: 500;
  font-size: 0.75rem;
  transition: all var(--da-t);
}

.da-cat-btn:hover {
  background: var(--da-gray-100);
}

.da-cat-btn.is-active {
  background: var(--da-primary);
  color: #ffffff;
  font-weight: 700;
  box-shadow: var(--da-shadow-xs);
}

.da-cat-btn__count {
  font-size: 10px;
  font-weight: 800;
  padding: 0.125rem 0.5rem;
  border-radius: var(--da-r-full);
  background: var(--da-gray-200);
  color: var(--da-gray-600);
}

.da-cat-btn.is-active .da-cat-btn__count {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.da-cat-list > * + * {
  margin-top: 0.375rem;
}

.da-preset-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.da-preset-row button {
  padding: 0.375rem 0.5rem;
  background: var(--da-gray-50);
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-md);
  font-size: 11px;
  font-weight: 700;
  color: var(--da-gray-700);
}

.da-preset-row button:hover {
  background: var(--da-gray-100);
}

.da-filter-drawer__foot {
  flex-shrink: 0;
  padding: 1rem;
  background: var(--da-gray-50);
  border-top: 1px solid var(--da-gray-200);
  display: flex;
  gap: 0.75rem;
}

.da-filter-drawer__foot > * {
  flex: 1 1 0;
}

/* ==========================================================================
   21. Product Detail
   ========================================================================== */

/* Breadcrumbs — orientation for visitors who arrive straight on a product. */
.da-breadcrumbs {
  margin-bottom: 1rem;
}

.da-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 600;
}

.da-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.da-breadcrumbs__link {
  color: var(--da-gray-500);
  transition: color var(--da-t);
}

.da-breadcrumbs__link:hover,
.da-breadcrumbs__link:focus-visible {
  color: var(--da-primary-text);
}

.da-breadcrumbs__current {
  color: var(--da-gray-900);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 20rem;
}

.da-breadcrumbs__sep {
  display: inline-flex;
  color: var(--da-gray-300);
}

.da-breadcrumbs__sep svg {
  width: 0.75rem;
  height: 0.75rem;
}

.da-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--da-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  transition: color var(--da-t);
}

.da-back-link:hover {
  color: var(--da-gray-900);
}

.da-back-link--flush {
  margin: 0;
}

.da-back-link svg {
  width: 1rem;
  height: 1rem;
}

.da-pd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
  background: var(--da-surface);
  padding: 1.5rem;
  border-radius: var(--da-r-32);
  border: 1px solid rgba(229, 231, 235, 0.8);
  box-shadow: var(--da-shadow-sm);
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .da-pd { padding: 2.5rem; }
}

@media (min-width: 1024px) {
  .da-pd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.da-pd__stage {
  aspect-ratio: 1 / 1;
  border-radius: var(--da-r-24);
  overflow: hidden;
  background: var(--da-image-bg);
  border: 1px solid var(--da-gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.da-pd__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--da-t-slower);
}

.da-pd__stage img:hover {
  transform: scale(1.05);
}

.da-pd__thumbs {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.da-pd__thumbs button {
  width: 5rem;
  height: 5rem;
  padding: 0.25rem;
  border-radius: var(--da-r-2xl);
  border: 2px solid var(--da-gray-200);
  background: var(--da-gray-50);
  overflow: hidden;
  transition: border-color var(--da-t);
}

.da-pd__thumbs button.is-active {
  border-color: var(--da-primary);
}

.da-pd__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--da-r-lg);
}

.da-pd__details > * + * {
  margin-top: 1.5rem;
}

.da-pd__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.da-pd__category {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--da-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.da-pd__title {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .da-pd__title { font-size: 2.25rem; }
}

.da-pd__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.da-pd__rating-score {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--da-amber-800);
  font-weight: 700;
  font-size: 0.875rem;
}

.da-pd__rating-score svg {
  width: 1rem;
  height: 1rem;
  fill: var(--da-amber-400);
  color: var(--da-amber-400);
}

.da-pd__price {
  padding: 1rem;
  border-radius: var(--da-r-2xl);
  background: var(--da-gray-50);
  border: 1px solid var(--da-gray-100);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.da-pd__price-now {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--da-primary-text);
}

.da-pd__price-was {
  font-size: 0.875rem;
  color: var(--da-gray-500);
  text-decoration: line-through;
}

.da-pd__stock {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--da-emerald-600);
  background: var(--da-emerald-50);
  padding: 0.25rem 0.625rem;
  border-radius: var(--da-r-full);
  border: 1px solid var(--da-emerald-200);
}

.da-pd__desc {
  font-size: 0.875rem;
  color: var(--da-gray-600);
  line-height: 1.8;
}

.da-pd__cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .da-pd__cta {
    flex-direction: row;
  }
}

.da-pd__cta .da-btn--primary {
  flex: 1 1 auto;
  padding-block: 1rem;
  border-radius: var(--da-r-2xl);
  font-size: 0.875rem;
  box-shadow: var(--da-shadow-primary);
}

.da-pd__cta .da-btn--primary svg {
  width: 1.25rem;
  height: 1.25rem;
}

.da-wish-btn {
  padding: 1rem;
  border-radius: var(--da-r-2xl);
  border: 1px solid var(--da-gray-300);
  color: var(--da-gray-700);
  transition: all var(--da-t);
  display: flex;
  align-items: center;
  justify-content: center;
}

.da-wish-btn:hover {
  background: var(--da-gray-100);
}

.da-wish-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.da-wish-btn.is-saved {
  background: var(--da-rose-500);
  border-color: var(--da-rose-500);
  color: #ffffff;
}

.da-wish-btn.is-saved svg {
  fill: currentColor;
}

.da-size-grid {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.da-size-grid label {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--da-r-xl);
  background: var(--da-gray-100);
  color: var(--da-gray-800);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--da-t);
}

.da-size-grid label:hover {
  background: var(--da-gray-200);
}

.da-size-grid input:checked + label {
  background: var(--da-primary);
  color: #ffffff;
  box-shadow: var(--da-shadow-xs);
}

.da-guarantees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--da-gray-600);
  font-weight: 500;
}

.da-guarantee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: var(--da-r-xl);
  background: var(--da-gray-50);
  border: 1px solid var(--da-gray-100);
}

.da-guarantee svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--da-primary);
}

.da-guarantee--emerald svg {
  color: var(--da-emerald-500);
}

.da-spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .da-spec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.da-spec {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem;
  border-radius: var(--da-r-xl);
  background: var(--da-gray-50);
  border: 1px solid var(--da-gray-100);
  font-size: 0.75rem;
}

.da-spec dt {
  font-weight: 700;
  color: var(--da-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.da-spec dd {
  font-weight: 600;
  color: var(--da-gray-900);
  text-align: right;
  margin: 0;
}

.da-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.da-section-title svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--da-primary);
  flex-shrink: 0;
}

.da-section-title h2,
.da-section-title h3 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* WooCommerce add-to-cart form inside the product detail layout */
.da-pd form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.da-pd form.cart .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--da-gray-300);
  border-radius: var(--da-r-2xl);
  background: var(--da-gray-50);
  padding: 0.5rem 0.75rem;
}

.da-pd form.cart .quantity input.qty {
  width: 3.5rem;
  padding-inline: 0.5rem;
  text-align: center;
  font-family: var(--da-font-mono);
  font-weight: 700;
  font-size: 0.875rem;
  border: 0;
  background: transparent;
}

.da-pd form.cart button.single_add_to_cart_button {
  flex: 1 1 14rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--da-r-2xl);
  background: var(--da-primary);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--da-shadow-primary);
  transition: background-color var(--da-t), transform var(--da-t);
}

.da-pd form.cart button.single_add_to_cart_button:hover {
  background: var(--da-primary-hover);
}

.da-pd form.cart button.single_add_to_cart_button:active {
  transform: scale(0.97);
}

.da-pd form.cart .variations {
  width: 100%;
  border-collapse: collapse;
}

.da-pd form.cart .variations th,
.da-pd form.cart .variations td {
  padding: 0.375rem 0;
  text-align: left;
  vertical-align: middle;
}

.da-pd form.cart .variations label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--da-gray-700);
}

.da-pd form.cart .variations select {
  width: 100%;
  background: var(--da-gray-50);
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-xl);
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
}

.da-pd .woocommerce-variation-price {
  width: 100%;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--da-primary-text);
}

.da-pd .stock.out-of-stock {
  color: var(--da-rose-600);
  font-weight: 700;
  font-size: 0.875rem;
}

/* Product detail redesign — scoped to the single-product composition. */
.da-product-page {
  background: #fbfbfc;
  color: var(--da-gray-900);
}

.da-product-page .da-breadcrumbs {
  margin-bottom: 1.5rem;
}

.da-product-page .da-pd {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.da-pd__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.da-pd-gallery {
  min-width: 0;
}

.da-pd-gallery__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 20rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: clamp(1rem, 4vw, 3.5rem);
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-xl);
  background: linear-gradient(145deg, #ffffff 0%, var(--da-gray-50) 100%);
  box-shadow: var(--da-shadow-xs);
}

.da-pd-gallery__image {
  width: 100%;
  height: 100%;
  max-height: 42rem;
  object-fit: contain;
  transition: transform var(--da-t-slow), opacity var(--da-t);
}

.da-pd-gallery__stage:hover .da-pd-gallery__image {
  transform: scale(1.025);
}

.da-pd-gallery__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  background: var(--da-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.da-pd-gallery__zoom,
.da-pd-gallery__control {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-full);
  background: rgba(255, 255, 255, 0.96);
  color: var(--da-gray-900);
  box-shadow: var(--da-shadow-md);
  transition: color var(--da-t), border-color var(--da-t), background-color var(--da-t), transform var(--da-t);
}

.da-pd-gallery__zoom:hover,
.da-pd-gallery__control:hover {
  border-color: var(--da-primary);
  color: var(--da-primary-text);
  background: #fff;
}

.da-pd-gallery__zoom {
  top: 1rem;
  right: 1rem;
}

.da-pd-gallery__control {
  top: 50%;
  transform: translateY(-50%);
}

.da-pd-gallery__control:hover {
  transform: translateY(-50%) scale(1.04);
}

.da-pd-gallery__control--prev {
  left: 0.75rem;
}

.da-pd-gallery__control--prev svg {
  transform: rotate(180deg);
}

.da-pd-gallery__control--next {
  right: 0.75rem;
}

.da-pd-gallery__thumbs {
  display: grid;
  grid-auto-columns: minmax(4.75rem, 1fr);
  grid-auto-flow: column;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.875rem 0 0.25rem;
  scroll-snap-type: x proximity;
}

.da-pd-gallery__thumb {
  display: grid;
  place-items: center;
  min-width: 4.75rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0.375rem;
  border: 2px solid var(--da-gray-200);
  border-radius: var(--da-r-lg);
  background: #fff;
  scroll-snap-align: start;
  transition: border-color var(--da-t), box-shadow var(--da-t);
}

.da-pd-gallery__thumb.is-active {
  border-color: var(--da-primary);
  box-shadow: 0 0 0 2px var(--da-primary-10);
}

.da-pd-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.da-pd__purchase {
  min-width: 0;
}

.da-pd__purchase > * + * {
  margin-top: 1.25rem;
}

.da-pd__heading .da-pd__title {
  margin: 0;
  color: #090b10;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.da-pd__heading .da-pd__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  margin-top: 0.25rem;
  color: var(--da-gray-700);
  font-size: 0.8125rem;
}

.da-pd__rating .da-stars {
  margin: 0;
}

.da-pd__purchase .da-pd__price {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #090b10;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 850;
  line-height: 1.2;
}

.da-pd__price del {
  margin-right: 0.5rem;
  color: var(--da-gray-500);
  font-size: 0.75em;
  font-weight: 600;
}

.da-pd__price ins {
  text-decoration: none;
}

.da-pd__summary {
  max-width: 42rem;
  color: var(--da-gray-600);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.da-pd__summary p {
  margin: 0;
}

.da-pd__purchase form.cart {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  margin: 0;
}

.da-pd__purchase form.cart .variations,
.da-pd__purchase form.cart .single_variation_wrap,
.da-pd__purchase form.cart .group_table,
.da-pd__purchase form.cart > .stock {
  grid-column: 1 / -1;
  width: 100%;
}

.da-pd__purchase form.cart .variations th,
.da-pd__purchase form.cart .variations td {
  display: block;
  width: 100%;
  padding: 0;
}

.da-pd__purchase form.cart .variations tr + tr th {
  padding-top: 1rem;
}

.da-pd__purchase form.cart .variations label {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--da-gray-900);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}

.da-pd__purchase form.cart .variations select {
  min-height: 3rem;
  border-color: var(--da-gray-300);
  border-radius: var(--da-r-md);
  background: #fff;
  color: var(--da-gray-900);
  font-size: 0.9375rem;
}

.da-pd__purchase form.cart .reset_variations {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--da-primary-text);
  font-size: 0.8125rem;
  font-weight: 700;
}

.da-pd__purchase form.cart .woocommerce-variation-add-to-cart {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
  gap: 0.75rem;
}

.da-pd__purchase form.cart .quantity {
  min-height: 3.25rem;
  padding: 0.25rem 0.75rem;
  border-color: var(--da-gray-300);
  border-radius: var(--da-r-md);
  background: #fff;
}

.da-pd__purchase form.cart .quantity input.qty {
  width: 4.5rem;
  min-height: 2.5rem;
  font-family: var(--da-font);
  font-size: 1rem;
}

.da-pd__purchase form.cart button.single_add_to_cart_button {
  min-height: 3.25rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--da-r-md);
  background: linear-gradient(90deg, #ff5c00, var(--da-primary));
  box-shadow: none;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.da-pd__purchase form.cart button.single_add_to_cart_button:hover {
  background: linear-gradient(90deg, var(--da-primary-hover), #f45b00);
  box-shadow: var(--da-shadow-primary-sm);
}

.da-pd__buy-now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--da-r-md);
  background: #121316;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 750;
  text-transform: uppercase;
  transition: background-color var(--da-t), transform var(--da-t);
}

.da-pd__buy-now:hover {
  background: #000;
}

.da-pd__secondary-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.da-pd__secondary-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-md);
  background: #fff;
  color: var(--da-gray-700);
  font-size: 0.8125rem;
  font-weight: 700;
}

.da-pd__delivery {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 1rem;
  border-block: 1px solid var(--da-gray-200);
  color: var(--da-gray-800);
}

.da-pd__delivery > svg {
  flex: 0 0 auto;
}

.da-pd__delivery p {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  font-size: 0.8125rem;
}

.da-pd__delivery span {
  color: var(--da-gray-500);
}

.da-pd__assurances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.da-pd__assurances li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--da-gray-600);
  font-size: 0.6875rem;
  line-height: 1.3;
}

.da-pd__assurances svg {
  flex: 0 0 auto;
  color: var(--da-gray-900);
}

.da-pd-benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-xl);
  background: #fff;
  box-shadow: var(--da-shadow-2xs);
}

.da-pd-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  min-width: 0;
  padding: 1.25rem;
}

.da-pd-benefit + .da-pd-benefit {
  border-top: 1px solid var(--da-gray-200);
}

.da-pd-benefit__icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--da-gray-900);
}

.da-pd-benefit h2 {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.25;
}

.da-pd-benefit p {
  margin: 0;
  color: var(--da-gray-600);
  font-size: 0.75rem;
  line-height: 1.55;
}

.da-pd-tabs,
.da-pd-reviews,
.da-pd-related {
  margin-top: 1.5rem;
}

.da-pd-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-xl);
  background: #fff;
  box-shadow: var(--da-shadow-2xs);
}

.da-pd-tabs__content {
  min-width: 0;
}

.da-pd-tabs__list {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--da-gray-200);
  scrollbar-width: thin;
}

.da-pd-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.25rem 0;
  color: var(--da-gray-600);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.da-pd-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--da-primary);
  content: "";
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity var(--da-t), transform var(--da-t);
}

.da-pd-tab.is-active {
  color: var(--da-primary-text);
}

.da-pd-tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.da-pd-tab:focus-visible,
.da-pd-gallery__thumb:focus-visible,
.da-pd-gallery__control:focus-visible,
.da-pd-gallery__zoom:focus-visible,
.da-pd__buy-now:focus-visible,
.da-pd__secondary-actions button:focus-visible {
  outline: 3px solid var(--da-primary-30);
  outline-offset: 3px;
}

.da-pd-tabs__panels {
  padding-top: 1.25rem;
}

.da-pd-tab-panel {
  color: var(--da-gray-700);
  font-size: 0.875rem;
  line-height: 1.75;
}

.da-pd-tab-panel + .da-pd-tab-panel {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--da-gray-100);
}

.da-pd-tabs[data-da-tabs-ready] .da-pd-tab-panel[hidden] {
  display: none;
}

.da-pd-tabs[data-da-tabs-ready] .da-pd-tab-panel + .da-pd-tab-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.da-pd-tab-panel p:first-child {
  margin-top: 0;
}

.da-pd-tab-panel p:last-child {
  margin-bottom: 0;
}

.da-pd-specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
}

.da-pd-specs > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr);
  gap: 1rem;
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--da-gray-100);
}

.da-pd-specs dt {
  color: var(--da-gray-500);
  font-weight: 700;
}

.da-pd-specs dd {
  margin: 0;
  color: var(--da-gray-900);
  font-weight: 650;
}

.da-pd-tabs__visual {
  position: relative;
  min-height: 15rem;
  overflow: hidden;
  margin: 0;
  border-radius: var(--da-r-lg);
  background: var(--da-gray-900);
}

.da-pd-tabs__visual::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.72));
  content: "";
}

.da-pd-tabs__visual img {
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
}

.da-pd-tabs__visual figcaption {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  z-index: 1;
  display: grid;
  max-width: 12rem;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.2;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.da-pd-tabs__visual figcaption strong {
  color: var(--da-primary-light);
}

.da-pd-reviews {
  padding: 1.25rem;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-xl);
  background: #fff;
}

/* The section already carries its own "Customer reviews" heading, so
   WooCommerce's native title stays in the DOM but out of the layout. */
.da-pd-reviews .woocommerce-Reviews-title {
  display: none;
}

.da-pd-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.da-pd-section-heading h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.da-pd-section-heading > span,
.da-pd-section-heading > a {
  color: var(--da-primary-text);
  font-size: 0.75rem;
  font-weight: 750;
}

/* --------------------------------------------------------------------------
   Product reviews
   -------------------------------------------------------------------------- */

.da-reviews {
  display: grid;
  gap: 1.25rem;
}

/* Summary panel: average score beside the per-star distribution. */
.da-reviews__summary {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-lg);
  background: linear-gradient(180deg, var(--da-amber-50) 0%, var(--da-surface) 55%);
}

.da-reviews__score {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  text-align: center;
}

.da-reviews__average {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin: 0;
}

.da-reviews__average strong {
  color: var(--da-gray-900);
  font-size: 2.75rem;
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1;
}

.da-reviews__average span {
  color: var(--da-gray-500);
  font-size: 0.8125rem;
  font-weight: 650;
}

.da-reviews__total {
  margin: 0;
  color: var(--da-gray-600);
  font-size: 0.75rem;
  font-weight: 600;
}

.da-reviews__write {
  margin-top: 0.25rem;
  background: var(--da-surface);
}

/* Distribution bars. */
.da-reviews__breakdown {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.da-reviews__bar-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 1.75rem;
  align-items: center;
  gap: 0.5rem;
}

.da-reviews__bar-label {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  color: var(--da-gray-700);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.da-reviews__bar-label svg {
  color: var(--da-amber-400);
}

.da-reviews__bar {
  display: block;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--da-r-full);
  background: var(--da-gray-200);
}

.da-reviews__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--da-amber-400);
  transition: width 600ms ease;
}

.da-reviews__bar-count {
  color: var(--da-gray-500);
  font-size: 0.75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Review cards. */
.da-reviews__list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.da-review {
  list-style: none;
}

.da-review__inner {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.875rem;
  padding: 1rem;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-lg);
  background: var(--da-surface);
  transition: border-color var(--da-t), box-shadow var(--da-t);
}

.da-review__inner:hover {
  border-color: var(--da-gray-300);
  box-shadow: var(--da-shadow-xs);
}

/* The initial sits behind the gravatar, so it shows through when avatars are
   switched off or the image fails to load. */
.da-review__avatar {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: var(--da-r-full);
  background: var(--da-primary-10);
}

.da-review__initial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--da-primary-text);
  font-size: 0.9375rem;
  font-weight: 800;
}

.da-review__avatar img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.da-review__content {
  min-width: 0;
}

.da-review__head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.da-review__head .da-stars {
  order: 2;
}

.da-review__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  order: 1;
  margin: 0;
  font-size: 0.75rem;
}

.da-review__author {
  color: var(--da-gray-900);
  font-size: 0.8125rem;
  font-weight: 800;
}

.da-review__verified,
.da-review__pending {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--da-r-full);
  font-size: 0.625rem;
  font-weight: 750;
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.da-review__verified {
  color: var(--da-emerald-700);
  background: var(--da-emerald-50);
}

.da-review__pending {
  color: var(--da-amber-800);
  background: var(--da-amber-50);
}

.da-review__date {
  margin-inline-start: auto;
  color: var(--da-gray-500);
  font-size: 0.6875rem;
  font-weight: 600;
}

.da-review__content .description,
.da-review__content > p {
  margin: 0;
  color: var(--da-gray-700);
  font-size: 0.875rem;
  line-height: 1.65;
}

.da-review__content .description > :first-child {
  margin-top: 0;
}

.da-review__content .description > :last-child {
  margin-bottom: 0;
}

.da-reviews__pagination {
  margin-top: 1rem;
}

.da-reviews__pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.da-reviews__pagination a,
.da-reviews__pagination span {
  display: grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-md);
  color: var(--da-gray-700);
  font-size: 0.8125rem;
  font-weight: 700;
}

.da-reviews__pagination a:hover {
  border-color: var(--da-primary);
  color: var(--da-primary-text);
}

.da-reviews__pagination .current {
  border-color: var(--da-gray-900);
  color: #fff;
  background: var(--da-gray-900);
}

/* Empty state. */
.da-reviews__empty {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 2rem 1rem;
  border: 1px dashed var(--da-gray-300);
  border-radius: var(--da-r-lg);
  background: var(--da-gray-50);
  text-align: center;
}

.da-reviews__empty-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border-radius: var(--da-r-full);
  color: var(--da-primary-text);
  background: var(--da-primary-10);
}

.da-reviews__empty-title {
  margin: 0;
  color: var(--da-gray-900);
  font-size: 0.9375rem;
  font-weight: 800;
}

.da-reviews__empty-text {
  max-width: 24rem;
  margin: 0;
  color: var(--da-gray-500);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.da-reviews__notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-lg);
  color: var(--da-gray-600);
  background: var(--da-gray-50);
  font-size: 0.8125rem;
}

.da-reviews__notice svg {
  flex: none;
  color: var(--da-gray-400);
}

/* Review form. */
.da-review-form {
  padding: 1.25rem;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-lg);
  background: var(--da-gray-50);
}

.da-review-form__title {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--da-gray-900);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.da-review-form__title small {
  font-weight: 500;
}

.da-review-form__intro,
.da-review-form .comment-notes {
  margin: 0 0 1rem;
  color: var(--da-gray-500);
  font-size: 0.75rem;
  line-height: 1.6;
}

.da-review-form__notice {
  margin: 0;
  color: var(--da-gray-600);
  font-size: 0.8125rem;
}

.da-review-form__notice a {
  color: var(--da-primary-text);
  font-weight: 700;
  text-decoration: underline;
}

.da-review-form__form {
  display: grid;
  gap: 0.875rem;
}

.da-review-field {
  display: grid;
  gap: 0.375rem;
  margin: 0;
  min-width: 0;
}

/* Direct children only — the star picker's labels sit a level deeper and keep
   their own styling. */
.da-review-field > label,
.da-review-field__legend {
  padding: 0;
  color: var(--da-gray-700);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.da-review-field .required {
  color: var(--da-rose-600);
}

.da-review-form input[type='text'],
.da-review-form input[type='email'],
.da-review-form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-md);
  color: var(--da-gray-900);
  background: var(--da-surface);
  font: inherit;
  font-size: 0.875rem;
  transition: border-color var(--da-t), box-shadow var(--da-t);
}

.da-review-form textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.da-review-form input::placeholder,
.da-review-form textarea::placeholder {
  color: var(--da-gray-400);
}

.da-review-form input[type='text']:focus,
.da-review-form input[type='email']:focus,
.da-review-form textarea:focus {
  border-color: var(--da-primary);
  box-shadow: 0 0 0 3px var(--da-primary-10);
  outline: none;
}

.da-review-field--rating {
  border: 0;
  margin: 0;
  padding: 0;
}

.da-review-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
}

.da-review-form .comment-form-cookies-consent input {
  margin-top: 0.15rem;
  accent-color: var(--da-primary);
}

.da-review-form .comment-form-cookies-consent label {
  color: var(--da-gray-500);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.da-review-form .form-submit {
  margin: 0.25rem 0 0;
}

.da-review-form__submit {
  cursor: pointer;
  border: 0;
}

/* Star picker: radios stay in the DOM (so native validation can anchor to
   them) but are visually replaced by the labels beside them. */
.da-star-input {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.125rem;
}

.da-star-input__radio {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.da-star-input__star {
  display: grid;
  place-items: center;
  padding: 0.125rem;
  border-radius: var(--da-r-md);
  color: var(--da-gray-300);
  cursor: pointer;
  transition: transform var(--da-t);
}

.da-star-input__star svg {
  fill: none;
}

.da-star-input__star:active {
  transform: scale(0.9);
}

.da-star-input__radio:focus-visible + .da-star-input__star {
  outline: 2px solid var(--da-primary);
  outline-offset: 1px;
}

.da-star-input__radio:checked + .da-star-input__star svg,
.da-star-input__radio:checked ~ .da-star-input__star svg {
  color: var(--da-amber-400);
  fill: currentColor;
}

@media (hover: hover) {
  /* While the widget is hovered the checked state steps aside so the preview
     reads cleanly; the extra compound in each selector keeps specificity at or
     above the :checked rules above. */
  .da-star-input:hover .da-star-input__radio:checked + .da-star-input__star svg,
  .da-star-input:hover .da-star-input__radio:checked ~ .da-star-input__star svg {
    color: var(--da-gray-300);
    fill: none;
  }

  .da-star-input:hover .da-star-input__radio + .da-star-input__star:hover svg,
  .da-star-input:hover .da-star-input__star:hover ~ .da-star-input__star svg {
    color: var(--da-amber-400);
    fill: currentColor;
  }
}

.da-star-input__hint {
  min-height: 1rem;
  color: var(--da-gray-500);
  font-size: 0.75rem;
  font-weight: 700;
}

.da-pd-related {
  padding-top: 0.5rem;
}

.da-pd-related__grid {
  display: grid;
  grid-auto-columns: minmax(16rem, 82vw);
  grid-auto-flow: column;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem 0 0.75rem;
  scroll-snap-type: x mandatory;
}

.da-pd-related__grid > * {
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .da-pd-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .da-pd-benefit + .da-pd-benefit {
    border-top: 0;
  }

  .da-pd-benefit:nth-child(even) {
    border-left: 1px solid var(--da-gray-200);
  }

  .da-pd-benefit:nth-child(n + 3) {
    border-top: 1px solid var(--da-gray-200);
  }

  .da-pd-tabs,
  .da-pd-reviews {
    padding: 1.5rem;
  }

  /* The pair is centred rather than stretched: a full-width distribution bar
     reads as a loading indicator, not a chart. */
  .da-reviews__summary {
    grid-template-columns: minmax(9rem, auto) minmax(0, 24rem);
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem;
    background: linear-gradient(100deg, var(--da-amber-50) 0%, var(--da-surface) 45%);
  }

  .da-reviews__score {
    padding-inline-end: 2rem;
    border-inline-end: 1px solid var(--da-gray-200);
  }

  .da-review-form {
    padding: 1.5rem;
  }

  .da-review-form__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .da-review-field--rating,
  .da-review-field--comment,
  .da-review-form .comment-form-cookies-consent,
  .da-review-form .form-submit {
    grid-column: 1 / -1;
  }

  .da-review-form .form-submit {
    justify-self: start;
  }
}

@media (min-width: 1024px) {
  .da-product-page .da-breadcrumbs {
    margin-bottom: 2rem;
  }

  .da-pd__hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(22rem, 0.88fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .da-pd__purchase {
    position: sticky;
    top: calc(var(--da-header-h) + 1.5rem);
    padding-top: 0.25rem;
  }

  .da-pd__assurances {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .da-pd-benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .da-pd-benefit + .da-pd-benefit,
  .da-pd-benefit:nth-child(n + 3) {
    border-top: 0;
    border-left: 1px solid var(--da-gray-200);
  }

  .da-pd-benefit:first-child {
    border-left: 0;
  }

  .da-pd-tabs--with-visual {
    grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 0.75fr);
    align-items: stretch;
  }

  .da-pd-tabs__visual,
  .da-pd-tabs__visual img {
    min-height: 20rem;
  }

  .da-reviews__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .da-pd-related__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    overflow: visible;
  }
}

@media (max-width: 639px) {
  .da-product-page {
    padding-bottom: 4rem;
  }

  .da-pd-gallery__stage {
    min-height: 18rem;
  }

  .da-pd-gallery__control {
    width: 2.75rem;
    height: 2.75rem;
  }

  .da-pd__purchase form.cart,
  .da-pd__purchase form.cart .woocommerce-variation-add-to-cart {
    grid-template-columns: 1fr;
  }

  .da-pd__purchase form.cart .quantity {
    justify-content: center;
  }

  .da-pd-tabs__list {
    gap: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .da-pd-gallery__image,
  .da-pd-gallery__zoom,
  .da-pd-gallery__control,
  .da-pd-gallery__thumb,
  .da-pd-tab::after,
  .da-pd__buy-now,
  .da-pd__purchase form.cart button.single_add_to_cart_button {
    scroll-behavior: auto;
    transition: none;
  }

  .da-pd-gallery__stage:hover .da-pd-gallery__image,
  .da-pd-gallery__control:hover,
  .da-pd__buy-now:active,
  .da-pd__purchase form.cart button.single_add_to_cart_button:active {
    transform: none;
  }
}

/* ==========================================================================
   24. Checkout
   ========================================================================== */

/* Shopify-inspired checkout shell. Kept under .da-checkout-page so native
   WooCommerce forms elsewhere retain their existing appearance. */
.da-checkout-page {
  padding: 0 0 4rem;
  background:
    radial-gradient(circle at 85% 35%, rgba(245, 78, 0, 0.045), transparent 26rem),
    #fafafa;
}

.da-checkout-heading {
  background: #fff;
  border-bottom: 1px solid var(--da-gray-200);
}

.da-checkout-heading__inner {
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.da-checkout-heading__kicker {
  color: var(--da-primary-text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.da-checkout-heading h1 {
  margin: 0.35rem 0 0;
  color: var(--da-gray-950);
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  letter-spacing: -0.035em;
}

.da-checkout-steps {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--da-gray-400);
  font-size: 0.78rem;
  font-weight: 700;
}

.da-checkout-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.da-checkout-steps li + li::before {
  content: '';
  position: absolute;
  right: calc(100% + 0.55rem);
  width: 0.9rem;
  height: 1px;
  background: var(--da-gray-300);
}

.da-checkout-steps span {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--da-gray-300);
  border-radius: 50%;
  background: #fff;
}

.da-checkout-steps .is-complete { color: var(--da-gray-700); }
.da-checkout-steps .is-complete span { color: #fff; background: var(--da-gray-900); border-color: var(--da-gray-900); }
.da-checkout-steps .is-current { color: var(--da-primary-text); }
.da-checkout-steps .is-current span { color: #fff; background: var(--da-primary); border-color: var(--da-primary); }

.da-checkout-content { padding-top: 2.5rem; }

.da-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.85fr);
  gap: 2rem;
  align-items: start;
}

.da-checkout-main,
.da-checkout-summary {
  border: 1px solid var(--da-gray-200);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 8px 30px rgba(17, 24, 39, 0.05);
}

.da-checkout-main { padding: clamp(1.25rem, 3vw, 2.25rem); }
.da-checkout-summary { padding: 1.5rem; }
.da-checkout-sidebar { position: sticky; top: 1.5rem; }

.da-checkout-section-title {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--da-gray-100);
}

.da-checkout-section-title > span {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--da-primary);
  font-size: 0.72rem;
  font-weight: 800;
}

.da-checkout-section-title h2,
.da-checkout-summary__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.da-checkout-section-title p {
  margin: 0.25rem 0 0;
  color: var(--da-gray-500);
  font-size: 0.78rem;
}

.da-checkout-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--da-gray-100);
}

.da-checkout-summary__head a {
  color: var(--da-primary-text);
  font-size: 0.75rem;
  font-weight: 700;
}

.da-checkout-page .woocommerce-billing-fields > h3,
.da-checkout-page .woocommerce-shipping-fields > h3,
.da-checkout-page #order_comments_field label {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
}

.da-checkout-page .woocommerce form .form-row { margin: 0 0 1rem; }
.da-checkout-page .woocommerce form .form-row-first,
.da-checkout-page .woocommerce form .form-row-last { width: calc(50% - 0.4rem); }

.da-checkout-page .woocommerce form .form-row label {
  margin-bottom: 0.35rem;
  color: var(--da-gray-600);
  font-size: 0.7rem;
  letter-spacing: 0.035em;
}

.da-checkout-page .woocommerce form .form-row input.input-text,
.da-checkout-page .woocommerce form .form-row textarea,
.da-checkout-page .woocommerce form .form-row select,
.da-checkout-page .select2-container .select2-selection--single {
  min-height: 3rem;
  border-color: var(--da-gray-300);
  border-radius: 0.55rem;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.da-checkout-page .woocommerce form .form-row input:focus,
.da-checkout-page .woocommerce form .form-row textarea:focus,
.da-checkout-page .select2-container--focus .select2-selection--single {
  outline: 0;
  border-color: var(--da-primary);
  box-shadow: 0 0 0 3px rgba(245, 78, 0, 0.1);
}

.da-checkout-page table.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.da-checkout-page table.shop_table th,
.da-checkout-page table.shop_table td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--da-gray-100);
  text-align: left;
}

.da-checkout-page table.shop_table td:last-child,
.da-checkout-page table.shop_table th:last-child { text-align: right; }
.da-checkout-page table.shop_table .product-name { font-weight: 650; }
.da-checkout-page table.shop_table .product-quantity { color: var(--da-gray-500); }
.da-checkout-page table.shop_table .order-total th,
.da-checkout-page table.shop_table .order-total td { padding-top: 1rem; font-size: 1.05rem; }

.da-checkout-page #payment {
  margin-top: 1.25rem;
  border: 1px solid var(--da-gray-200);
  border-radius: 0.75rem;
  background: var(--da-gray-50);
  overflow: hidden;
}

.da-checkout-page #payment ul.payment_methods { margin: 0; padding: 0; list-style: none; }
.da-checkout-page #payment ul.payment_methods > li { padding: 0.9rem 1rem; border-bottom: 1px solid var(--da-gray-200); }
.da-checkout-page #payment .payment_box { margin: 0.75rem -1rem -0.9rem; padding: 0.85rem 1rem; background: #fff; color: var(--da-gray-600); font-size: 0.76rem; }
.da-checkout-page #payment .place-order { padding: 1rem; margin: 0; }
.da-checkout-page #payment #place_order { width: 100%; min-height: 3.2rem; border: 0; border-radius: 0.55rem; font-size: 0.82rem; }
.da-checkout-page #payment .woocommerce-privacy-policy-text { color: var(--da-gray-500); font-size: 0.7rem; line-height: 1.5; }

.da-checkout-secure {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  color: var(--da-gray-500);
  font-size: 0.7rem;
  font-weight: 650;
}

.da-checkout-assurances {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--da-gray-200);
  border-radius: 1rem;
  background: #fff;
}

.da-checkout-assurances > div { display: flex; align-items: center; justify-content: center; gap: 0.7rem; }
.da-checkout-assurances svg { width: 1.4rem; color: var(--da-gray-700); }
.da-checkout-assurances span { display: flex; flex-direction: column; color: var(--da-gray-500); font-size: 0.67rem; }
.da-checkout-assurances strong { color: var(--da-gray-900); font-size: 0.75rem; }

@media (max-width: 900px) {
  .da-checkout-heading__inner { align-items: flex-start; flex-direction: column; padding-block: 1.5rem; }
  .da-checkout-layout { grid-template-columns: 1fr; }
  .da-checkout-sidebar { position: static; }
}

@media (max-width: 639px) {
  .da-checkout-content { padding-top: 1rem; }
  .da-checkout-steps { width: 100%; justify-content: space-between; gap: 0.4rem; font-size: 0.68rem; }
  .da-checkout-steps li + li::before { display: none; }
  .da-checkout-main, .da-checkout-summary { border-radius: 0.75rem; }
  .da-checkout-page .woocommerce form .form-row-first,
  .da-checkout-page .woocommerce form .form-row-last { float: none; width: 100%; }
  .da-checkout-assurances { grid-template-columns: 1fr; }
  .da-checkout-assurances > div { justify-content: flex-start; }
}

.da-form-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 800;
  border-bottom: 1px solid var(--da-gray-100);
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
}

.da-form-head svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--da-primary);
}

.da-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .da-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.da-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }

.da-form-stack > * + * {
  margin-top: 1.5rem;
}

.da-manifest {
  max-height: 15rem;
  overflow-y: auto;
}

.da-manifest > * + * {
  border-top: 1px solid var(--da-gray-100);
}

.da-manifest__row {
  padding-block: 0.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
}

.da-manifest__row strong {
  display: block;
  font-weight: 700;
  color: var(--da-gray-900);
}

.da-manifest__row small {
  color: var(--da-gray-500);
  font-family: var(--da-font-mono);
}

.da-manifest__total {
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--da-gray-200);
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 800;
}

.da-manifest__total span:last-child {
  color: var(--da-primary-text);
}

/* ==========================================================================
   25. Launch Success
   ========================================================================== */

.da-success {
  background: var(--da-surface);
  padding: 2rem;
  border-radius: var(--da-r-36);
  border: 1px solid rgba(229, 231, 235, 0.8);
  box-shadow: var(--da-shadow-xl);
  text-align: center;
}

@media (min-width: 768px) {
  .da-success { padding: 3rem; }
}

.da-success > * + * {
  margin-top: 1.5rem;
}

.da-success__mark {
  width: 5rem;
  height: 5rem;
  margin-inline: auto;
  border-radius: var(--da-r-2xl);
  background: linear-gradient(to top right, var(--da-primary), var(--da-primary-light));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--da-shadow-primary);
  animation: da-pop-in 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.da-success__mark svg {
  width: 2.5rem;
  height: 2.5rem;
  animation: da-bounce 1s infinite;
}

.da-success__title {
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .da-success__title { font-size: 2.25rem; }
}

.da-success__desc {
  font-size: 0.75rem;
  color: var(--da-gray-600);
  max-width: 28rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .da-success__desc { font-size: 0.875rem; }
}

.da-tracking {
  background: var(--da-gray-900);
  color: #ffffff;
  padding: 1rem;
  border-radius: var(--da-r-2xl);
  border: 1px solid var(--da-gray-800);
  font-family: var(--da-font-mono);
  font-size: 0.75rem;
  max-width: 28rem;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.da-tracking span {
  color: var(--da-gray-400);
}

.da-tracking strong {
  font-weight: 800;
  color: var(--da-primary-text);
  font-size: 0.875rem;
}

.da-timeline {
  padding: 1rem;
  background: var(--da-gray-50);
  border-radius: var(--da-r-2xl);
  border: 1px solid var(--da-gray-100);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  max-width: 28rem;
  margin-inline: auto;
}

.da-timeline > * + * {
  margin-top: 0.5rem;
}

.da-timeline__step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.da-timeline__step svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.da-timeline__step--done {
  color: var(--da-emerald-600);
  font-weight: 700;
}

.da-timeline__step--now {
  color: var(--da-gray-800);
  font-weight: 700;
}

.da-timeline__step--now svg {
  color: var(--da-primary);
}

.da-timeline__step--todo {
  color: var(--da-gray-500);
}

.da-timeline__num {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: var(--da-r-full);
  border: 1px solid var(--da-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.da-success__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
}

@media (min-width: 640px) {
  .da-success__actions {
    flex-direction: row;
  }
}

.da-success__actions .da-btn {
  padding: 0.875rem 2rem;
  border-radius: var(--da-r-2xl);
}

/* ==========================================================================
   WooCommerce native markup
   Styling for the elements WooCommerce prints itself — notices, its own
   forms and buttons. Previously injected from PHP on every WooCommerce
   request; static CSS belongs in the cacheable stylesheet instead.
   ========================================================================== */

.woocommerce-form-login,
.woocommerce-form-coupon {
  background: var(--da-surface);
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-2xl);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
  width: 100%;
  background: var(--da-gray-50);
  border: 1px solid var(--da-gray-200);
  border-radius: var(--da-r-xl);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  height: auto;
  line-height: 1.4;
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--da-gray-700);
  margin-bottom: 0.5rem;
}
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--da-primary);
  color: #fff;
  border-radius: var(--da-r-xl);
  padding: 0.875rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--da-primary-hover);
  color: #fff;
}
.woocommerce #respond input#submit.alt,
.woocommerce button.button.alt {
  background: var(--da-primary);
}

/* --------------------------------------------------------------------------
   Notices

   Only checkout and the account area still print these — everywhere else the
   same messages are replayed as toasts (see da_notices_as_toasts()). There is
   no template hook for the markup WooCommerce emits here, so tone, icon and
   layout are all driven from the classes it gives us.

   Each notice is a self-contained tinted card: the type is carried by four
   custom properties plus a masked icon, so a variant is four lines rather
   than a second copy of the whole rule. Deliberately placed after the generic
   `.woocommerce .button` rules above so the in-notice button can override
   them without inflating its specificity.
   -------------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  /* Info is the base; the variants below re-point these. */
  --da-notice-accent: var(--da-blue-600);
  --da-notice-bg: var(--da-blue-50);
  --da-notice-border: var(--da-blue-200);
  --da-notice-text: var(--da-blue-800);
  --da-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");

  position: relative;
  margin: 0 0 1rem;
  padding: 0.9375rem 1.25rem 0.9375rem 3.125rem;
  list-style: none;
  background: var(--da-notice-bg);
  border: 1px solid var(--da-notice-border);
  border-radius: var(--da-r-xl);
  box-shadow: var(--da-shadow-2xs);
  color: var(--da-notice-text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.6;
  word-wrap: break-word;
  animation: da-notice-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* A single message and its optional action sit on one line; a list of errors
   stacks (see below), so only the first two get flex. */
.woocommerce-message,
.woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.woocommerce-error {
  display: block;
}

/* Account and checkout content sits inside `.da-prose`, whose list rules
   outrank the shared block above on an element as plain as `.woocommerce-error`
   — enough to pull the text back under the icon and put discs beside it. The
   element selector buys back the specificity to say otherwise. */
ul.woocommerce-error {
  padding-inline-start: 3.125rem;
  list-style: none;
}

/* Replaces the WooCommerce icon-font glyph that lands in the same pseudo
   element. `inset-inline` sets both sides, so core's physical `left` cannot
   leak through and fight it in RTL. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: '';
  position: absolute;
  inset-inline: 1.0625rem auto;
  top: 0.9375rem;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--da-notice-accent);
  -webkit-mask-image: var(--da-notice-icon);
  mask-image: var(--da-notice-icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.woocommerce-message {
  --da-notice-accent: var(--da-emerald-600);
  --da-notice-bg: var(--da-emerald-50);
  --da-notice-border: var(--da-emerald-200);
  --da-notice-text: var(--da-emerald-800);
  --da-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
}

.woocommerce-error {
  --da-notice-accent: var(--da-rose-600);
  --da-notice-bg: var(--da-rose-50);
  --da-notice-border: var(--da-rose-200);
  --da-notice-text: var(--da-rose-800);
  --da-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}

/* The empty-orders and empty-downloads screens carry both classes. They are
   statements of fact, not confirmations, so the info tone has to win. */
.woocommerce-message.woocommerce-info {
  --da-notice-accent: var(--da-blue-600);
  --da-notice-bg: var(--da-blue-50);
  --da-notice-border: var(--da-blue-200);
  --da-notice-text: var(--da-blue-800);
  --da-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

/* Checkout raises one <li> per failed field. Rules read as a checklist of
   what to fix; run together they read as one long sentence. */
.woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-error li + li {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--da-notice-border);
}

.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button) {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-error a:not(.button):hover {
  text-decoration-thickness: 2px;
}

/* Core puts the action before the text in some templates and after it in
   others; `order` settles it so the eye always reads message then action. */
.woocommerce-message a.button,
.woocommerce-message button.button,
.woocommerce-info a.button,
.woocommerce-info button.button,
.woocommerce-error a.button,
.woocommerce-error button.button {
  order: 1;
  flex: none;
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  background: transparent;
  border: 1px solid var(--da-notice-accent);
  border-radius: var(--da-r-full);
  color: var(--da-notice-accent);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.woocommerce-message a.button:hover,
.woocommerce-message button.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-info button.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-error button.button:hover {
  background: var(--da-notice-accent);
  color: #fff;
}

/* The coupon and login prompts on checkout reuse `.woocommerce-info`, but they
   are invitations rather than messages — three blue alerts above the form read
   as three problems. Keep them quiet and give them their own glyphs. */
.woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-form-login-toggle .woocommerce-info {
  --da-notice-accent: var(--da-gray-500);
  --da-notice-bg: var(--da-surface);
  --da-notice-border: var(--da-gray-200);
  --da-notice-text: var(--da-gray-700);
}

.woocommerce-form-coupon-toggle .woocommerce-info {
  --da-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='%23000'/%3E%3C/svg%3E");
}

.woocommerce-form-login-toggle .woocommerce-info {
  --da-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Core prints the wrapper on every page whether or not it has anything to
   say, which otherwise leaves a gap above the content. */
.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-notices-wrapper,
.woocommerce-NoticeGroup {
  margin-bottom: 1.5rem;
}

.woocommerce-notices-wrapper > :last-child,
.woocommerce-NoticeGroup > :last-child {
  margin-bottom: 0;
}

/* Block-based cart and checkout raise the same messages through WooCommerce
   Blocks, which prints a banner of its own instead of the classes above. A
   store can run one page on each, so both have to arrive at the same design.
   Core reaches for !important in this component; matching it is the only way
   to get the padding and link colour back. */
.wc-block-components-notice-banner {
  --da-notice-accent: var(--da-blue-600);
  --da-notice-bg: var(--da-blue-50);
  --da-notice-border: var(--da-blue-200);
  --da-notice-text: var(--da-blue-800);

  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.9375rem 1.25rem !important;
  background-color: var(--da-notice-bg);
  border: 1px solid var(--da-notice-border);
  border-radius: var(--da-r-xl);
  box-shadow: var(--da-shadow-2xs);
  color: var(--da-notice-text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.6;
  animation: da-notice-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.wc-block-components-notice-banner.is-success {
  --da-notice-accent: var(--da-emerald-600);
  --da-notice-bg: var(--da-emerald-50);
  --da-notice-border: var(--da-emerald-200);
  --da-notice-text: var(--da-emerald-800);
}

.wc-block-components-notice-banner.is-error {
  --da-notice-accent: var(--da-rose-600);
  --da-notice-bg: var(--da-rose-50);
  --da-notice-border: var(--da-rose-200);
  --da-notice-text: var(--da-rose-800);
}

.wc-block-components-notice-banner.is-warning {
  --da-notice-accent: var(--da-amber-600);
  --da-notice-bg: var(--da-amber-50);
  --da-notice-border: var(--da-amber-200);
  --da-notice-text: var(--da-amber-800);
}

/* Core paints each status straight onto the banner, which outranks the token
   the block above resolves. Re-applying it at the same weight is what lets a
   variant stay four custom properties. */
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning,
.wc-block-components-notice-banner.is-info {
  background-color: var(--da-notice-bg);
  border-color: var(--da-notice-border);
  color: var(--da-notice-text);
}

/* Core stretches the glyph to the full height of the banner, so a three-line
   error gets a three-line icon. Pin it to the first line instead. */
.wc-block-components-notice-banner > svg {
  box-sizing: border-box;
  flex: none;
  align-self: flex-start;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  padding: 3px;
  fill: var(--da-notice-bg);
}

.wc-block-components-notice-banner.is-success > svg,
.wc-block-components-notice-banner.is-error > svg,
.wc-block-components-notice-banner.is-warning > svg,
.wc-block-components-notice-banner.is-info > svg {
  background-color: var(--da-notice-accent);
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-block-components-notice-banner__summary {
  margin: 0 0 0.375rem;
  font-weight: 700;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ul,
.wc-block-components-notice-banner > .wc-block-components-notice-banner__content ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content li + li {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--da-notice-border);
}

.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
  color: var(--da-notice-accent) !important;
  font-weight: 700;
  opacity: 1;
}

.wc-block-components-notice-banner > .wc-block-components-button {
  color: var(--da-notice-accent) !important;
  opacity: 0.65;
}

.wc-block-components-notice-banner > .wc-block-components-button:hover,
.wc-block-components-notice-banner > .wc-block-components-button:focus {
  opacity: 1;
}

@keyframes da-notice-in {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error,
  .wc-block-components-notice-banner {
    animation: none;
  }
}

/* ==========================================================================
   My Account / profile
   ========================================================================== */

.woocommerce-account .da-page { padding: 0; }
.woocommerce-account .da-page > .da-container { max-width: none; padding: 0; }
.woocommerce-account .da-page article { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.woocommerce-account .da-page .da-article-head { display: none; }
.woocommerce-account .da-page .da-prose { max-width: none; }
.woocommerce-account .woocommerce { width: 100%; }

.da-account-page { padding: 2rem 0 3.5rem; background: linear-gradient(135deg, #fff 0%, #fafbfc 55%, #fff8f3 145%); }
.da-account-breadcrumb { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.35rem; color: var(--da-gray-500); font-size: .78rem; }
.da-account-breadcrumb a { color: var(--da-gray-700); }
.da-account-breadcrumb strong { color: var(--da-gray-800); font-weight: 500; }
.da-account-heading { margin-bottom: 1.6rem; }
.da-account-heading h1 { margin: 0 0 .55rem; color: var(--da-gray-950); font-size: clamp(2rem, 3vw, 2.65rem); letter-spacing: -.045em; }
.da-account-heading h1 span { color: var(--da-primary); font-size: .8em; }
.da-account-heading p { color: var(--da-gray-600); font-size: .9rem; }
.da-account-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr) 19rem; gap: 1.5rem; align-items: start; }

.woocommerce-MyAccount-navigation { float: none !important; width: 100% !important; padding: .4rem 0; background: #fff; border: 1px solid var(--da-gray-200); border-radius: .75rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .035); }
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
.woocommerce-MyAccount-navigation a { position: relative; display: flex; align-items: center; gap: .85rem; padding: .78rem 1.15rem; color: var(--da-gray-800); font-size: .84rem; font-weight: 500; }
.woocommerce-MyAccount-navigation a:hover { color: var(--da-primary); background: var(--da-primary-5); }
.woocommerce-MyAccount-navigation .is-active a { color: var(--da-primary); background: linear-gradient(90deg, #fff4ed, #fffaf7); }
.woocommerce-MyAccount-navigation .is-active a::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--da-primary); content: ""; }
.woocommerce-MyAccount-navigation svg { flex: 0 0 auto; }
.da-account-help { display: flex; gap: 1rem; margin-top: 1.2rem; padding: 1.5rem 1.2rem; border: 1px solid var(--da-gray-200); border-radius: .75rem; background: rgba(255,255,255,.7); }
.da-account-help > svg { flex: 0 0 auto; }
.da-account-help strong, .da-account-help span, .da-account-help a { display: block; }
.da-account-help strong { font-size: .8rem; }
.da-account-help span { margin: .3rem 0 .8rem; color: var(--da-gray-500); font-size: .72rem; }
.da-account-help a { color: var(--da-primary); font-size: .75rem; font-weight: 700; }

.da-account-content { min-width: 0; padding: 1.75rem; border: 1px solid var(--da-gray-200); border-radius: .8rem; background: rgba(255,255,255,.92); box-shadow: 0 12px 35px rgba(15,23,42,.045); }
.da-account-content .woocommerce-MyAccount-content { float: none !important; width: 100% !important; }
.da-edit-profile__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.85rem; }
.da-edit-profile__head > span, .da-edit-profile__section-title > span { color: var(--da-primary); }
.da-edit-profile__head h2, .da-edit-profile__section-title h2, .da-account-panel h2, .da-profile-welcome h2 { margin: 0; font-size: .98rem; letter-spacing: -.015em; }
.da-edit-profile__head p, .da-edit-profile__section-title p, .da-profile-welcome p { margin: .25rem 0 0; color: var(--da-gray-500); font-size: .72rem; }
.da-edit-profile__password { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; padding: .65rem .9rem; border: 1px solid var(--da-primary); border-radius: .45rem; color: var(--da-primary); font-size: .68rem; font-weight: 700; }
.da-edit-profile__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1.15rem; }
.da-edit-profile__grid .form-row-wide { grid-column: 1 / -1; max-width: 75%; }
.woocommerce .da-edit-profile .form-row { margin: 0 0 .9rem; padding: 0; }
.woocommerce .da-edit-profile .form-row label { margin-bottom: .4rem; color: var(--da-gray-700); font-size: .7rem; text-transform: none; letter-spacing: 0; }
.woocommerce .da-edit-profile .form-row input.input-text { padding: .72rem .85rem; border-radius: .4rem; background: #fff; font-size: .78rem; }
.da-edit-profile__preferences { margin: 1.2rem -1.75rem 0; padding: 1.4rem 1.75rem 0; border-top: 1px solid var(--da-gray-100); }
.da-edit-profile__section-title { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.15rem; }
.da-profile-check { display: flex; align-items: center; gap: .65rem; margin: .8rem 0; color: var(--da-gray-700); font-size: .72rem; cursor: pointer; }
.da-profile-check input { position: absolute; opacity: 0; }
.da-profile-check span { width: 1rem; height: 1rem; border: 1px solid var(--da-gray-300); border-radius: .2rem; }
.da-profile-check input:checked + span { border-color: var(--da-primary); background: var(--da-primary); box-shadow: inset 0 0 0 3px #fff; }
.da-edit-profile__security { margin-top: 1.2rem; border-top: 1px solid var(--da-gray-100); padding-top: 1rem; }
.da-edit-profile__security summary { color: var(--da-primary); font-size: .75rem; font-weight: 700; cursor: pointer; }
.da-edit-profile__security[open] summary { margin-bottom: 1rem; }
.da-edit-profile__submit { margin: 1.5rem 0 0; }
.woocommerce .da-edit-profile__submit button.button { width: min(100%, 25rem); border-radius: .4rem; font-size: .72rem; text-transform: none; }

.da-profile-welcome { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; min-height: 20rem; }
.da-profile-welcome__icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; color: var(--da-primary); border-radius: 50%; background: var(--da-primary-5); }
.da-profile-welcome > .da-btn { margin-left: auto; }
.da-profile-welcome__details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; }
.da-profile-welcome__details > div { padding: 1rem; border: 1px solid var(--da-gray-200); border-radius: .5rem; }
.da-profile-welcome__details small, .da-profile-welcome__details strong { display: block; }
.da-profile-welcome__details small { margin-bottom: .35rem; color: var(--da-gray-500); }

.da-account-summary { display: grid; gap: 1.1rem; }
.da-account-rank { position: relative; overflow: hidden; padding: 1.35rem; border-radius: .75rem; background: radial-gradient(circle at 85% 10%, #28313e, transparent 32%), #0b1018; color: #fff; box-shadow: 0 14px 30px rgba(5,10,20,.18); }
.da-account-rank::after { position: absolute; right: 1rem; top: 2.6rem; color: #fff; opacity: .65; content: "·  ✦  ·"; }
.da-account-rank__top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.da-account-rank__badge { display: grid; width: 2.6rem; height: 2.8rem; place-items: center; color: #ffc107; border: 2px solid #ffc107; clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); }
.da-account-rank strong { font-size: .74rem; }
.da-account-rank small { display: block; margin-top: .28rem; color: #cbd5e1; font-size: .65rem; }
.da-account-rank__top small { width: max-content; padding: .2rem .45rem; border-radius: .2rem; background: rgba(255,255,255,.12); }
.da-account-rank p { margin: 0 0 .55rem; font-size: .75rem; }
.da-account-rank__track { display: block; width: 100%; height: .4rem; margin-bottom: 1rem; overflow: hidden; border: 0; border-radius: 1rem; background: #3b4350; }
.da-account-rank__track::-webkit-progress-bar { border-radius: inherit; background: #3b4350; }
.da-account-rank__track::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, var(--da-primary), #ff7a2b); }
.da-account-rank__track::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, var(--da-primary), #ff7a2b); }
.da-account-panel { padding: 1.3rem; border: 1px solid var(--da-gray-200); border-radius: .75rem; background: #fff; box-shadow: 0 8px 25px rgba(15,23,42,.035); }
.da-account-panel h2 { margin-bottom: 1.2rem; }
.da-account-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
.da-account-stats > div { display: grid; grid-template-columns: 2.4rem 1fr; grid-template-rows: auto auto; column-gap: .6rem; }
.da-account-stats span { display: grid; grid-row: 1 / 3; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 50%; color: var(--da-primary); background: #fff0e7; }
.da-account-stats > div:nth-child(2) span { color: #6851c6; background: #f0edff; }
.da-account-stats > div:nth-child(3) span { color: #2861b7; background: #edf4ff; }
.da-account-stats > div:nth-child(4) span { color: #148c80; background: #e7f7f5; }
.da-account-stats strong { font-size: 1.25rem; line-height: 1; }
.da-account-stats small { margin-top: .25rem; color: var(--da-gray-600); font-size: .65rem; }
.da-account-actions a { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; color: var(--da-gray-800); font-size: .72rem; }
.da-account-actions a span { flex: 1; }
.da-account-actions a:hover { color: var(--da-primary); }

@media (max-width: 1100px) {
  .da-account-layout { grid-template-columns: 13rem minmax(0, 1fr); }
  .da-account-summary { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .da-account-page { padding-top: 1.2rem; }
  .da-account-layout { display: block; }
  .da-account-side, .da-account-content, .da-account-summary { margin-bottom: 1rem; }
  .woocommerce-MyAccount-navigation ul { display: flex; overflow-x: auto; }
  .woocommerce-MyAccount-navigation li { flex: 0 0 auto; }
  .woocommerce-MyAccount-navigation a { padding: .75rem; }
  .da-account-help { display: none; }
  .da-account-content { padding: 1.2rem; }
  .da-account-summary { display: grid; grid-template-columns: 1fr; }
  .da-edit-profile__head { align-items: flex-start; flex-wrap: wrap; }
  .da-edit-profile__password { margin-left: 0; }
  .da-edit-profile__grid { display: block; }
  .da-edit-profile__grid .form-row-wide { max-width: none; }
  .da-edit-profile__preferences { margin-inline: -1.2rem; padding-inline: 1.2rem; }
}