/* WEB-1452: Variation Cart Drawer Styles
 *
 * Styles for the A/B test variation cart drawer.
 * The variation reuses #samCartDrawer_Right but renders different
 * title, footer, and cross-sell content.
 *
 * @see cart/cross-sell/variation-drawer.js
 */


/* ======================== LAYOUT FIX ======================== */

/*
 * #samCD_Content inherits display:flex (row) from .samCartDrawer_Right_FlexRow.
 * When the cross-sell container is appended, items and cross-sell must stack
 * vertically. This class is added dynamically by variation-drawer.js.
 */
#samCD_Content.varDrawer--active {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background-color: #fff;
}

/* Cross-sell container inside scrollable area */
#samCD_Content.varDrawer--active [data-target="crossSellMiniCart"] {
  width: 100%;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
}

/* Free shipping threshold — moved inside scrollable area, not sticky */
#samCD_Content.varDrawer--active > #samCD_Threshold {
  flex-shrink: 0;
  width: 100%;
}

/* Remove carousel top border — seamless with content */
#samCD_Content.varDrawer--active .cross-sell--mini-cart {
  border-top: none;
}

/* Remove card outlines and shadows — blend into white bg */
#samCD_Content.varDrawer--active .cross-sell--mini-cart .hit-card {
  box-shadow: none;
  border: none;
  background: #fff;
}


/* ======================== FOOTER ======================== */

.varDrawer__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  width: 100%;
}

/*
 * Override #samCartDrawer_Right #samCD_BottomSection_SubTotal a defaults:
 *   background-color: #000; color: #fff; border-radius: 8px; padding: 10px;
 * Must use high specificity to win.
 */
#samCD_BottomSection_SubTotal .varDrawer__btn {
  display: block;
  width: 100%;
  padding: 12px 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
}

/* Primary — solid black (View Cart) */
#samCD_BottomSection_SubTotal .varDrawer__btn--primary {
  background: #000;
  color: #fff;
  border: 2px solid #000;
}
#samCD_BottomSection_SubTotal .varDrawer__btn--primary:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}

/* Secondary — outlined (Checkout) */
#samCD_BottomSection_SubTotal .varDrawer__btn--secondary {
  background: #fff;
  color: #000;
  border: 2px solid #000;
}
#samCD_BottomSection_SubTotal .varDrawer__btn--secondary:hover {
  background: #f5f5f5;
  color: #000;
}

/* ID.me text link (USP only) */
.varDrawer__idme {
  font-size: 12px;
  text-align: center;
  color: #555;
  margin: 0;
  padding: 4px 0;
}
.varDrawer__idme a {
  color: #007a3d;
  text-decoration: underline;
  font-weight: 600;
  /* Override #samCD_BottomSection_SubTotal a defaults */
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
  font-size: inherit !important;
  text-transform: none !important;
  width: auto !important;
}
.varDrawer__idme a:hover {
  color: #005a2d;
  background: none !important;
}
