/**
 * @file
 * Cart drawer styles.
 *
 * Overrides Drupal's default dark off-canvas theme for cart drawer.
 * Uses Tailwind CSS variables from the theme.
 */

/* ==========================================================================
   HEADER DISPLACEMENT
   Push sticky/fixed header when off-canvas drawer is open
   ========================================================================== */

/* When off-canvas is open, displace sticky header */
body.js-off-canvas-dialog-open .header-section {
  right: var(--drupal-displace-offset-right, 0);
  transition: right 0.3s ease;
}

/* Also handle the admin toolbar if present */
body.js-off-canvas-dialog-open.toolbar-horizontal .header-section {
  right: var(--drupal-displace-offset-right, 0);
}

/* ==========================================================================
   DRUPAL OFF-CANVAS THEME OVERRIDES
   Override Drupal's default dark off-canvas styles using high specificity
   ========================================================================== */

/* Override wrapper CSS variables - use ID + class for high specificity */
#drupal-off-canvas-wrapper.cart-drawer-dialog.ui-dialog {
  --off-canvas-background-color: var(--color-white);
  --off-canvas-text-color: var(--color-gray-900);
  --off-canvas-link-color: var(--color-primary-600);
  --off-canvas-wrapper-background-color: var(--color-white);
  --off-canvas-wrapper-border-color: var(--color-gray-200);
  background-color: var(--color-white);
  border-left-color: var(--color-gray-200);
}

/* Override the wrapper background explicitly */
#drupal-off-canvas-wrapper.cart-drawer-dialog {
  background: var(--color-white);
}

/* Title bar overrides with ID selector */
#drupal-off-canvas-wrapper.cart-drawer-dialog .ui-dialog-titlebar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  padding: 1rem 1.5rem;
  margin: 0;
  line-height: 1.5;
  overflow: visible;
}

/* Hide the pencil icon */
#drupal-off-canvas-wrapper.cart-drawer-dialog .ui-dialog-titlebar::before {
  display: none;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog .ui-dialog-titlebar .ui-dialog-title {
  color: var(--color-gray-900);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  overflow: visible;
  padding-top: 0.25rem;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog .ui-dialog-titlebar-close {
  color: var(--color-gray-500);
  background: transparent;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog .ui-dialog-titlebar-close:hover {
  color: var(--color-gray-700);
  background: var(--color-gray-100);
}

/* Override the off-canvas content element background/text */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset),
#drupal-off-canvas-wrapper.cart-drawer-dialog {
  background: var(--color-white);
  color: var(--color-gray-900);
}

/* Reset link colors inside off-canvas */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) a,
#drupal-off-canvas-wrapper.cart-drawer-dialog a {
  color: var(--color-primary-600);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) a:hover,
#drupal-off-canvas-wrapper.cart-drawer-dialog a:hover {
  color: var(--color-primary-700);
}

/* Fix form elements reset by off-canvas */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-qty-input,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-qty-input {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-900);
  border-radius: 0.375rem;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-qty-btn,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-qty-btn {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-qty-btn:hover,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-qty-btn:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn--primary,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn--primary {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: var(--color-white);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn--primary:hover,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn--primary:hover {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn--secondary,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn--secondary {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn--secondary:hover,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn--secondary:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

/* Fix text colors in off-canvas content */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-content,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-content {
  background: var(--color-white);
  color: var(--color-gray-900);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-empty__title,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-empty__title,
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__title,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__title,
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__total,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__total,
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-subtotal__value,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-subtotal__value {
  color: var(--color-gray-900);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-empty__text,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-empty__text,
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__price,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__price,
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-subtotal__label,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-subtotal__label {
  color: var(--color-gray-500);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-footer,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-footer {
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item {
  border-bottom: 1px solid var(--color-gray-200);
}

/* ==========================================================================
   DARK MODE - Off-canvas overrides
   ========================================================================== */

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog.ui-dialog {
  --off-canvas-background-color: var(--color-gray-800);
  --off-canvas-text-color: var(--color-gray-50);
  --off-canvas-link-color: var(--color-primary-400);
  --off-canvas-wrapper-background-color: var(--color-gray-800);
  --off-canvas-wrapper-border-color: var(--color-gray-700);
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .ui-dialog-titlebar {
  background: var(--color-gray-800);
  border-color: var(--color-gray-700);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .ui-dialog-titlebar .ui-dialog-title {
  color: var(--color-gray-50);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .ui-dialog-titlebar-close {
  color: var(--color-gray-400);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .ui-dialog-titlebar-close:hover {
  color: var(--color-gray-50);
  background: var(--color-gray-700);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset),
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog {
  background: var(--color-gray-800);
  color: var(--color-gray-50);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-content,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-content {
  background: var(--color-gray-800);
  color: var(--color-gray-50);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-empty__title,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-empty__title,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__title,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__title,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__total,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__total,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-subtotal__value,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-subtotal__value {
  color: var(--color-gray-50);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-empty__text,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-empty__text,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__price,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__price,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-subtotal__label,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-subtotal__label {
  color: var(--color-gray-400);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-footer,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-footer {
  background: var(--color-gray-900);
  border-color: var(--color-gray-700);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item {
  border-color: var(--color-gray-700);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-qty-btn,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-qty-btn,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-qty-input,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-qty-input {
  background: var(--color-gray-700);
  border-color: var(--color-gray-600);
  color: var(--color-gray-50);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-qty-btn:hover,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-qty-btn:hover {
  background: var(--color-gray-600);
  border-color: var(--color-gray-500);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn--secondary,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn--secondary {
  background: var(--color-gray-700);
  border-color: var(--color-gray-600);
  color: var(--color-gray-50);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn--secondary:hover,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn--secondary:hover {
  background: var(--color-gray-600);
  border-color: var(--color-gray-500);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-group__heading,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-group__heading {
  color: var(--color-gray-400);
  border-bottom-color: var(--color-gray-700);
}

.dark #drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__context,
.dark #drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__context {
  color: var(--color-gray-400);
}

/* ==========================================================================
   STANDARD DIALOG STYLES
   All styles use high-specificity selectors to override drupal-off-canvas-reset
   ========================================================================== */

/* Off-canvas dialog overrides */
#drupal-off-canvas-wrapper.cart-drawer-dialog.ui-dialog {
  width: 400px;
  max-width: 100vw;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog .ui-dialog-content {
  padding: 0;
}

/* Cart drawer content */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-content,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
}

/* Empty cart state */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-empty,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-gray-500);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-empty__icon,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-empty__icon {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-empty__title,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-empty__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 0.5rem;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-empty__text,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-empty__text {
  font-size: 0.875rem;
}

/* Cart items list */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-items,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
}

/* Category group heading */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-group__heading,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-group__heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
  padding-bottom: 0.5rem;
  margin-top: 1rem;
  border-bottom: 1px solid var(--color-gray-200);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-group:first-child .cart-drawer-group__heading,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-group:first-child .cart-drawer-group__heading {
  margin-top: 0;
}

/* Item type-specific context line */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__context,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__context {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  margin-bottom: 0.25rem;
}

/* Single cart item */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-gray-200);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item:last-child,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item:last-child {
  border-bottom: none;
}

/* Item image */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__image,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-gray-100);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__image img,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__image-placeholder,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-gray-400);
}

/* Item details */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__details,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__details {
  flex: 1;
  min-width: 0;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__title,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__title {
  font-weight: 500;
  color: var(--color-gray-900);
  margin-bottom: 0.25rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__price,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__price {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin-bottom: 0.5rem;
}

/* Quantity controls */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__quantity,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__quantity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-qty-btn,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  background: var(--color-white);
  color: var(--color-gray-700);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-qty-btn:hover,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-qty-btn:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-qty-input,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-qty-input {
  width: 3rem;
  height: 1.75rem;
  text-align: center;
  border: 1px solid var(--color-gray-300);
  border-radius: 0.375rem;
  background: var(--color-white);
  color: var(--color-gray-900);
  font-size: 0.875rem;
}

/* Item total and remove */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__actions,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-item__total,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-item__total {
  font-weight: 600;
  color: var(--color-gray-900);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-remove-btn,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-remove-btn {
  font-size: 0.75rem;
  color: var(--color-red-600);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  text-decoration: underline;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-remove-btn:hover,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-remove-btn:hover {
  color: var(--color-red-700);
}

/* Cart footer */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-footer,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-subtotal,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-subtotal__label,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-subtotal__label {
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-subtotal__value,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-subtotal__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-900);
}

/* Action buttons */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-actions,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-actions {
  display: flex;
  gap: 0.75rem;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
  cursor: pointer;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn--secondary,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn--secondary {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn--secondary:hover,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn--secondary:hover {
  background: var(--color-gray-100);
  border-color: var(--color-gray-400);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn--primary,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn--primary {
  background: var(--color-primary-600);
  border: 1px solid var(--color-primary-600);
  color: var(--color-white);
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-btn--primary:hover,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-btn--primary:hover {
  background: var(--color-primary-700);
  border-color: var(--color-primary-700);
}


/* Cart info block - trigger button (styled via Tailwind classes in template) */
.cart-info-block .item-count.hidden {
  display: none;
}

/* Loading state - inside off-canvas */
#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-loading,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
}

#drupal-off-canvas-wrapper.cart-drawer-dialog #drupal-off-canvas:not(.drupal-off-canvas-reset) .cart-drawer-spinner,
#drupal-off-canvas-wrapper.cart-drawer-dialog .cart-drawer-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--color-gray-200);
  border-top-color: var(--color-primary-600);
  border-radius: 50%;
  animation: cart-drawer-spin 0.8s linear infinite;
}

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