/* 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.
*
* BEM block: cart-drawer
*   .cart-drawer              - block class on #samCartDrawer_Right
*   .cart-drawer--active      - modifier on #samCD_Content (white bg, column layout)
*   .cart-drawer__title-text  - header title text
*   .cart-drawer__close-btn   - header close button
*   .cart-drawer__footer      - footer wrapper
*   .cart-drawer__btn         - footer button base
*   .cart-drawer__btn--primary    - View Cart (solid black)
*   .cart-drawer__btn--secondary  - Checkout (outlined)
*   .cart-drawer__idme        - ID.me text (USP only)
*   .cart-drawer__ship        - shipping progress bar wrapper
*   .cart-drawer__ship-track  - truck icon + bar row
*   .cart-drawer__ship-fill   - progress fill (black)
*   .cart-drawer__ship-info   - label + exclusions row
*
* @see cart/cross-sell/cart-drawer.js
*/

/* ======================== HEADER ======================== */
/*
* Override the base #samCD_Title styles when the variation drawer is active.
* Base styles: bg #ffffffb3, padding 12px 0, uppercase, bold, border #e3e3e3.
* Figma: opaque white bg, padding 16px 20px, normal case, 16px, border gray-200.
*/
#samCartDrawer_Right.cart-drawer #samCD_Title {
  background-color: #fff !important;
  padding: 16px 20px !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  text-transform: none !important;
  border-bottom: 1px solid #e5e7eb !important;
}
/* Title text - 16px, normal weight, no transform */
.cart-drawer__title-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
  margin: 0;
}
/* Close button - matches Figma: p-1, hover:bg-gray-100, rounded-md */
.cart-drawer__close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  color: #000;
  flex-shrink: 0;
}
.cart-drawer__close-btn:hover {
  background-color: #f3f4f6;
}

/* ======================== SHIPPING BAR ======================== */
/*
* Figma shipping bar for the variation cart drawer.
* Rendered by BuyMoreSaveMore._renderVariationBar() in cart-promo-bar.js.
* Truck icon -> thin progress bar -> "FREE Shipping at $150 • Exclusions"
*/
.cart-drawer__ship {
  margin: 16px 0 12px;
  padding: 0 40px;
  background: #fff;
}
/* Truck + bar row - relative container for absolute truck positioning */
.cart-drawer__ship-track {
  position: relative;
  display: flex;
  align-items: center;
  height: 28px;
}
/* Truck icon wrapper - rides along the bar at the fill percentage */
.cart-drawer__ship-icon-wrap {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: left 0.3s ease;
}
/* Truck icon - 20x20, dark gray */
.cart-drawer__ship-icon {
  width: 20px;
  height: 20px;
  color: #1f2937;
  flex-shrink: 0;
}
/* Track - thin bar, full width, behind the truck */
.cart-drawer__ship-bar {
  width: 100%;
  height: 2px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
  z-index: 1;
}
/* Fill - black, animated */
.cart-drawer__ship-fill {
  height: 100%;
  background: #000;
  border-radius: 9999px;
  transition: width 0.3s ease;
}
/* Label row - centered */
.cart-drawer__ship-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
/* Label text */
.cart-drawer__ship-label {
  font-size: 14px;
  font-weight: 400;
  color: #000;
}
/* Dot separator */
.cart-drawer__ship-dot {
  font-size: 14px;
}
/* Exclusions link */
.cart-drawer__ship-exclusions {
  font-size: 14px;
  color: #4b5563;
  text-decoration: underline;
  cursor: pointer;
}
.cart-drawer__ship-exclusions:hover {
  color: #1f2937;
}

/* ======================== LAYOUT ======================== */
/*
* .samCartDrawer_Right_FlexRow is removed from #samCD_Content by cart-drawer.js
* and replaced with .cart-drawer--active. No specificity battle needed.
*/
#samCartDrawer_Right #samCD_Content.cart-drawer--active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background-color: #fff !important;
  scrollbar-color: #fff #fff !important;
}
/* Shipping bar container - full width */
#samCD_Content.cart-drawer--active [data-target="cartDrawerShippingBar"] {
  width: 100%;
  box-sizing: border-box;
}
/* Cross-sell container inside scrollable area */
#samCD_Content.cart-drawer--active [data-target="crossSellMiniCart"] {
  width: 100%;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
}
/* Remove carousel top border - seamless with content */
#samCD_Content.cart-drawer--active .cross-sell--mini-cart {
  border-top: none;
}
/* Remove card outlines and shadows - blend into white bg */
#samCD_Content.cart-drawer--active .cross-sell--mini-cart .hit-card {
  box-shadow: none;
  border: none;
  background: #fff;
}
/*
* Cross-sell carousel fade-in.
* Hidden via opacity until Slick fully initializes (prevents Slick layout
* shift/animation as slides calculate widths). cart-drawer.js adds
* .cart-drawer__carousel--ready after Slick init completes.
*/
[data-target="crossSellMiniCart"] .cross-sell--mini-cart {
  opacity: 0;
  transition: opacity 0.25s ease;
}
[data-target="crossSellMiniCart"] .cross-sell--mini-cart.cart-drawer__carousel--ready {
  opacity: 1;
}

/* ======================== FOOTER ======================== */
/*
* Override base #samCD_BottomSection_SubTotal styles for variation.
* Figma: border-top gray-200, 20px padding all sides, white bg.
*/
.cart-drawer #samCD_BottomSection_SubTotal {
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  padding: 20px !important;
  background-color: #fff !important;
}
.cart-drawer__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  width: 100%;
}
/* Subtotal row - label left, price right */
.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4px;
  font-family: var(--galls-font-gt-america-standard);
}
.cart-drawer__subtotal-label {
  font-size: 14px;
  font-weight: 400;
  color: #000;
}
.cart-drawer__subtotal-count {
  font-weight: 400;
  color: #6b7280;
}
.cart-drawer__subtotal-price {
  font-size: 15px;
  font-weight: 700;
  color: #000;
}
/*
* Override #samCartDrawer_Right #samCD_BottomSection_SubTotal a defaults.
* The base selector from gtsamheader_css.css uses 2 IDs:
*   #samCartDrawer_Right #samCD_BottomSection_SubTotal a  -> (0,2,0,1)
* We must match or exceed that specificity. Using the same 2-ID prefix
* plus our BEM class gives us (0,2,1,0) which wins.
*
* Figma: rounded-lg (8px), font-semibold (600), 14px, py-[8px], border-1.
*/
#samCartDrawer_Right #samCD_BottomSection_SubTotal .cart-drawer__btn {
  display: block;
  width: 100%;
  padding: 8px 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
}
/* Primary - solid black (View Cart) */
#samCartDrawer_Right #samCD_BottomSection_SubTotal .cart-drawer__btn--primary {
  background: #000;
  color: #fff;
  border: 1px solid #000;
  font-size: 15px;
  font-weight: 600;
}
#samCartDrawer_Right #samCD_BottomSection_SubTotal .cart-drawer__btn--primary:hover {
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
}
/* Secondary - outlined (Checkout) — subdued but still readable */
#samCartDrawer_Right #samCD_BottomSection_SubTotal .cart-drawer__btn--secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #9ca3af;
  font-size: 14px;
}
#samCartDrawer_Right #samCD_BottomSection_SubTotal .cart-drawer__btn--secondary:hover {
  background: #f9fafb;
  color: #1f2937;
  border-color: #6b7280;
}
/* ID.me text link (USP only) */
.cart-drawer__idme {
  font-size: 12px;
  text-align: center;
  color: #4b5563;
  margin: 0;
  padding: 4px 0;
}
/*
* ID.me <a> must also beat the 2-ID base selector:
*   #samCartDrawer_Right #samCD_BottomSection_SubTotal a { background: #000; ... }
*/
#samCartDrawer_Right #samCD_BottomSection_SubTotal .cart-drawer__idme a {
  color: #007a3d;
  text-decoration: underline;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  display: inline;
  font-size: inherit;
  text-transform: none;
  width: auto;
  border-radius: 0;
}
#samCartDrawer_Right #samCD_BottomSection_SubTotal .cart-drawer__idme a:hover {
  color: #005a2d;
  background: none;
}
/* Disable the scale(.95) :active transform from gtsamheader_css.css */
#samCartDrawer_Right #samCD_BottomSection_SubTotal .cart-drawer__btn:active {
  transform: none;
}

/* ======================== PRODUCT ITEM OVERRIDES ======================== */
/*
* Override base cart-item styles from gtsamheader_css.css when inside
* the variation drawer. Un-bold text, remove heavy borders, add spacing.
*/
/* Header: gap between check icon and title text */
.cart-drawer #samCD_Title .d-flex.align-items-center > svg + .cart-drawer__title-text {
  margin-left: 8px;
}
/* Larger product thumbnail (80 × 90) */
.cart-drawer .samCDIS_row_flex_image img {
  width: 90px !important;
  height: 90px !important;
}
 
/* Remove heavy product row borders - keep a subtle bottom separator */
.cart-drawer .samCDIS_row_flex {
  border-top: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.cart-drawer .samCDIS_row_flex:last-child {
  border-bottom: none !important;
}
/* Un-bold product names and info text */
.cart-drawer .samCDIS_row_flex {
  font-weight: 400 !important;
}
.cart-drawer .samCDIS_row_flex_info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 400 !important;
  line-height: 1.4;
}
.cart-drawer .samCDIS_row_flex_info b,
.cart-drawer .samCDIS_row_flex_info strong {
  font-weight: 500 !important;
}
/* Right column — price only (qty hidden, edit/remove hidden) */
.cart-drawer .samCDIS_row_flex_price_qty {
  font-size: 14px;
  font-weight: 700 !important;
  line-height: 2.1;
}
 
/* Price color — same shade of black as the product title */
.cart-drawer .samCDIS_row_flex_price {
  color: #000 !important;
}
/* Hide edit and delete buttons - variation is view-only */
.cart-drawer .samCDIS_row_flex_edit_n_remove {
  display: none !important;
}
/* Hide the entire qty row in the right column (text + select/input).
   Static qty text is injected into .samCDIS_row_flex_info by JS instead. */
.cart-drawer .samCDIS_row_flex_qty {
  display: none !important;
}
/* Product name: sized up + semibold for clarity */
.cart-drawer .samCDIS_row_flex_desc a {
  font-size: 14px !important;
  font-weight: 400 !important;
}
/* Product attributes (Color, Size, Width, Qty) — muted gray, slight tracking */
.cart-drawer .samCDIS_row_flex_options {
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  color: #6b7280 !important;
}
.cart-drawer .samCDIS_row_flex_options ul li {
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  color: #6b7280 !important;
}
/* "In Stock - Ready to Ship" — confident, not a footnote */
.cart-drawer .samCDIS_row_flex_stockmsg {
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
}
/* "Popular Add-Ons Under $35" — slightly larger than product title (14px) */
.cart-drawer .cross-sell--mini-cart .cross-sell__heading {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 4px;
}
/* Add-on card prices — present but not dominant */
.cart-drawer .cross-sell--mini-cart .hit-price {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}
/* De-bold cross-sell card titles */
.cart-drawer .cross-sell--mini-cart .hit-title {
  font-weight: 400 !important;
}
/* Hide brand on cross-sell cards */
.cart-drawer .cross-sell--mini-cart .hit-brand {
  display: none !important;
}
/* Reduce gap between product items and cross-sell */
.cart-drawer .samCDIS_row_flex_wrapper {
  margin-bottom: 4px !important;
}
 
 
/* ======================== CUSTOMIZATIONS ACCORDION ======================== */
 
/*
* New BEM classes for the variation cart drawer customizations accordion.
* Replaces legacy samCDIS_row_flex_accordion* styling from gtsamheader_css.css.
* The JS in cart-drawer.js (_convertAccordionToBEM) re-wraps the legacy
* accordion elements with these classes so the variation drawer has its own
* clean accordion independent of the control drawer.
*
* BEM block: cart-drawer__customs
*   __customs-toggle    — trigger button
*   __customs-toggle--open  — modifier when panel is expanded
*   __customs-panel     — expandable content panel
*   __customs-heading   — hidden heading inside panel
*   __customs-product   — product name inside panel
*   __customs-list      — ul of customization details
*   __customs-fee       — "Total Customization: $XX" line
*/
 
/* Hide legacy accordion elements inside variation drawer */
.cart-drawer .samCDIS_row_flex_accordion,
.cart-drawer .samCDIS_row_flex_accordion_panel {
  display: none !important;
}
 
/* Toggle button */
.cart-drawer__customs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 12px !important;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  appearance: none;
  line-height: 1.4;
}
 
.cart-drawer__customs-toggle::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: url('/images/checkout_page/chevron-down.svg') no-repeat center / contain;
  transition: transform 0.2s ease;
}
 
.cart-drawer__customs-toggle--open::after {
  transform: rotate(180deg);
}
 
.cart-drawer__customs-toggle:hover {
  color: #111827;
  text-decoration: underline;
}
 
/* Expandable panel */
.cart-drawer__customs-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  font-size: 12px;
  color: #6b7280;
  padding: 0 8px;
  border-radius: 4px;
}
 
/* Heading inside panel (hidden — same as legacy) */
.cart-drawer__customs-panel .customization-heading {
  display: none;
}
 
/* Product name label inside panel */
.cart-drawer__customs-panel .customizable-product {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #616161 !important;
}
 
/* Customization detail list */
.cart-drawer__customs-panel .customizations ul {
  font-size: 12px;
  padding-left: 16px;
  margin: 4px 0 2px;
}
 
/* Customization fee line (injected by _convertAccordionToBEM) */
.cart-drawer__customs-fee {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #616161;
}
 
 
/* ======================== SKELETON ======================== */
/*
* Skeleton loading placeholders for the variation cart drawer.
* Reuses @keyframes Skeleton_Pulse from algolia_recommend.css (globally available).
* Shown immediately when the drawer opens, replaced by real content after AJAX.
*/
/* Title qty skeleton - small inline pulsing block where the number will appear */
.cart-drawer__skeleton-qty {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #e0e0e0;
  border-radius: 3px;
  vertical-align: middle;
  animation: Skeleton_Pulse 1.5s infinite ease-in-out;
}
/* Product item skeleton - mimics a single cart product row */
.cart-drawer__skeleton {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
}
/* Skeleton image square — matches real product image (90 × 90) */
.cart-drawer__skeleton-image {
  width: 90px;
  height: 90px;
  min-width: 90px;
  background-color: #e0e0e0;
  border-radius: 6px;
  animation: Skeleton_Pulse 1.5s infinite ease-in-out;
}
/* Skeleton text lines container */
.cart-drawer__skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
/* Individual skeleton text line — height set inline per line to mimic real content */
.cart-drawer__skeleton-line {
  height: 19px;
  background-color: #e0e0e0;
  border-radius: 3px;
  animation: Skeleton_Pulse 1.5s infinite ease-in-out;
}
/* Static qty text — moved into .samCDIS_row_flex_info by JS */
.cart-drawer__qty-static {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
  letter-spacing: 0.01em;
}
/* Cross-sell carousel skeleton */
.cart-drawer__cs-skeleton {
  padding: 16px;
}
 
/* Shipping bar skeleton - mimics truck + thin bar + label layout */
.cart-drawer__ship-skeleton {
  padding: 12px 40px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.cart-drawer__ship-skeleton-bar {
  width: 100%;
  height: 2px;
  background-color: #e0e0e0;
  border-radius: 9999px;
  animation: Skeleton_Pulse 1.5s infinite ease-in-out;
}
.cart-drawer__ship-skeleton-label {
  width: 160px;
  height: 12px;
  background-color: #e0e0e0;
  border-radius: 3px;
  animation: Skeleton_Pulse 1.5s infinite ease-in-out;
}
.cart-drawer__cs-skeleton-heading {
  width: 180px;
  height: 14px;
  background-color: #e0e0e0;
  border-radius: 3px;
  margin-bottom: 12px;
  animation: Skeleton_Pulse 1.5s infinite ease-in-out;
}
.cart-drawer__cs-skeleton-cards {
  display: flex;
  gap: 12px;
}
.cart-drawer__cs-skeleton-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-drawer__cs-skeleton-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #e0e0e0;
  border-radius: 6px;
  animation: Skeleton_Pulse 1.5s infinite ease-in-out;
}
.cart-drawer__cs-skeleton-line {
  height: 19px;
  background-color: #e0e0e0;
  border-radius: 3px;
  animation: Skeleton_Pulse 1.5s infinite ease-in-out;
}
 
/* Cross-sell skeleton add-to-cart button */
.cart-drawer__cs-skeleton-btn {
  width: 100%;
  height: 32px;
  margin-top: 4px;
  background-color: #e0e0e0;
  border-radius: 4px;
  animation: Skeleton_Pulse 1.5s infinite ease-in-out;
}
 
 
/* Cart page — extra bottom padding beneath the truck-style shipping bar */
[data-target="buyMoreSaveMoreContainerCartPage"] .cart-drawer__ship,
[data-target="buyMoreSaveMoreContainerMobile"] .cart-drawer__ship,
[data-target="buyMoreSaveMoreContainer"] .cart-drawer__ship {
  margin-bottom: 12px;
}

/* Footer - reduce bottom padding on mobile */
@media (max-width: 700px) {
  .cart-drawer #samCD_BottomSection_SubTotal {
    padding: 16px !important;
  }
}