.elementor-71 .elementor-element.elementor-element-36114bf{--display:flex;--padding-top:100px;--padding-bottom:100px;--padding-left:20px;--padding-right:20px;}@media(max-width:767px){.elementor-71 .elementor-element.elementor-element-36114bf{--padding-top:60px;--padding-bottom:60px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for shortcode, class: .elementor-element-3d0d519 *//* =========================================================
   SEQUORA PEPTIDES — WooCommerce CART PAGE CUSTOM STYLING
   Paste into: Appearance > Customize > Additional CSS
   (or your child theme's style.css)

   NOTE: your theme applies its own padding/border resets with
   fairly high priority. Several rules below use the
   ".woocommerce-cart.woocommerce-cart" double-class trick —
   repeating the same class is valid CSS and doubles its
   specificity weight, which is why some rules look repeated.
   Combined with !important this reliably beats the theme
   without needing to know its exact .elementor-71 .elementor-element.elementor-element-3d0d519.
   ========================================================= */

:root{
  --sq-purple-dark: #221F5C;
  --sq-purple: #5B52E6;
  --sq-purple-hover: #4D46C3;
  --sq-red: #4D46C3; /* brand purple, replacing default red */
  --sq-bg: #f7f6fa;
  --sq-border: #e6e1ee;
  --sq-text: #2b2530;
  --sq-muted: #7a7385;
  --sq-radius: 10px;
}

/* Page wrapper */
.woocommerce-cart .woocommerce {
  border-radius: var(--sq-radius);
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}
.woocommerce-cart .woocommerce *,
.woocommerce-cart .woocommerce *::before,
.woocommerce-cart .woocommerce *::after {
  box-sizing: border-box;
}

/* ---------- Cart table ---------- */
.woocommerce-cart table.shop_table {
  border: none;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--sq-radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(45,19,48,0.06);
  width: 100%;
}

.woocommerce-cart table.shop_table thead th {
  background: var(--sq-purple-dark);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 16px 18px;
  border: none;
}

.woocommerce-cart table.shop_table tbody td {
  padding: 18px;
  border: none;
  border-bottom: 1px solid var(--sq-border);
  vertical-align: middle;
  color: var(--sq-text);
}

.woocommerce-cart table.shop_table tbody tr:last-child td {
  border-bottom: none;
}

.woocommerce-cart table.shop_table tbody tr:hover {
  background: #faf8fd;
}

/* Product name link */
.woocommerce-cart td.product-name a {
  color: var(--sq-purple);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-cart td.product-name a:hover {
  color: var(--sq-red);
}

/* Product thumbnail */
.woocommerce-cart td.product-thumbnail img {
  border-radius: 8px;
  border: 1px solid var(--sq-border);
  width: 64px;
  height: auto;
}

/* Price / subtotal */
.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
  font-weight: 600;
  color: var(--sq-purple-dark);
}

/* Remove (x) button */
.woocommerce-cart a.remove {
  color: var(--sq-red) !important;
  background: rgba(77,70,195,0.08) !important;
  border-radius: 50% !important;
  width: 28px;
  height: 28px;
  line-height: 28px !important;
  font-size: 16px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
.woocommerce-cart a.remove:hover {
  background: var(--sq-red) !important;
  color: #fff !important;
}

/* Quantity input */
.woocommerce-cart .quantity .qty {
  border: 1px solid var(--sq-border);
  border-radius: 6px;
  padding: 10px 8px;
  width: 70px;
  text-align: center;
  font-weight: 600;
  color: var(--sq-text);
}
.woocommerce-cart .quantity .qty:focus {
  outline: none;
  border-color: var(--sq-purple);
  box-shadow: 0 0 0 3px rgba(91,82,230,0.12);
}

/* Coupon row */
.woocommerce-cart .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.woocommerce-cart .coupon input#coupon_code {
  border: 1px solid var(--sq-border);
  border-radius: 6px;
  padding: 12px 14px;
  min-width: 220px;
  flex: 1 1 220px;
  background: #fff;
}
.woocommerce-cart .coupon input#coupon_code:focus {
  outline: none;
  border-color: var(--sq-purple);
}

/* Buttons (Apply coupon / Update cart) */
.woocommerce-cart button[name="apply_coupon"],
.woocommerce-cart button[name="update_cart"] {
  background: #fff;
  border: 1.5px solid var(--sq-purple);
  color: var(--sq-purple);
  border-radius: 6px;
  padding: 12px 22px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.woocommerce-cart button[name="apply_coupon"]:hover,
.woocommerce-cart button[name="update_cart"]:hover {
  background: var(--sq-purple);
  color: #fff;
}
.woocommerce-cart button[name="update_cart"]:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ---------- Cart totals box ---------- */
.woocommerce-cart .cart-collaterals .cart_totals {
  background: #fff;
  border-radius: var(--sq-radius);
  padding: 28px 26px;
  box-shadow: 0 2px 10px rgba(45,19,48,0.06);
  float: none;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}

.woocommerce-cart .cart_totals h2 {
  color: var(--sq-purple-dark);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 18px;
}

.woocommerce-cart .cart_totals table {
  border: none;
  width: 100%;
}

/* FIX: labels/values (Subtotal / Shipment / Total) were touching
   the box edge on desktop. The base padding rule alone wasn't
   enough to beat the theme's own cell padding reset, so this is
   forced with doubled-class specificity + !important — same
   trick used throughout this file — so "Subtotal", "Shipment"
   and "Total" always get breathing room from the border. */
.woocommerce-cart.woocommerce-cart .cart_totals table th,
.woocommerce-cart.woocommerce-cart .cart_totals table td {
  border: none !important;
  border-bottom: 1px solid var(--sq-border) !important;
  padding: 14px 16px !important;
  color: var(--sq-text) !important;
  vertical-align: top !important;
}
.woocommerce-cart.woocommerce-cart .cart_totals table tr:last-child th,
.woocommerce-cart.woocommerce-cart .cart_totals table tr:last-child td {
  border-bottom: none !important;
}
.woocommerce-cart .cart_totals .order-total .woocommerce-Price-amount {
  color: var(--sq-purple);
  font-size: 20px;
  font-weight: 700;
}

/* Shipment row on DESKTOP now stays side-by-side (normal table
   th/td layout) — the label-on-top / options-below stacking is
   applied ONLY inside the mobile media query further down. */

/* Shipping options list — each option becomes its own row: radio
   on the left, label + price spread apart with space-between, and
   a divider line between options. This is what actually fixes the
   wrapping ("Fedex 2 Day:" breaking onto its own line, price
   floating underneath) — the old rule only forced the <ul>/<li>
   to be block/full-width, it never laid out what's *inside* each
   <li>. Applied outside the media query so desktop gets the same
   clean layout as mobile. */
/* NOTE: .elementor-71 .elementor-element.elementor-element-3d0d519s below are prefixed with "html body" and dropped
   the ".cart_totals" ancestor requirement. Reason: if Elementor's
   own Cart-widget stylesheet loads after Customizer Additional CSS
   and ties our specificity, the LAST stylesheet in the page wins
   regardless of !important — so we pad every .elementor-71 .elementor-element.elementor-element-3d0d519 with an
   extra "html body" to push specificity clearly above anything
   Elementor/the theme is likely to write, and we match on the
   #shipping_method id alone (highest-specificity anchor) instead
   of depending on an ancestor class that this Elementor widget
   may not actually render. */
html body .woocommerce-cart #shipping_method {
  list-style: none !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  display: block !important;
}
html body .woocommerce-cart #shipping_method li {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  box-sizing: border-box !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--sq-border) !important;
  margin: 0 !important;
}
html body .woocommerce-cart #shipping_method li:last-child {
  border-bottom: none !important;
}
html body .woocommerce-cart #shipping_method li input[type="radio"] {
  flex: 0 0 16px !important;
  margin: 0 10px 0 0 !important;
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--sq-purple);
}
/* min-width: 0 is what actually lets a flex child shrink below its
   text's natural width instead of forcing the row to overflow/wrap
   oddly; nowrap + ellipsis keeps long carrier names on one line
   instead of breaking mid-word like "Fedex / 2 Day:" did. */
html body .woocommerce-cart #shipping_method li label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px;
  margin: 0 !important;
  font-size: 14px;
  color: var(--sq-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body .woocommerce-cart #shipping_method li label .woocommerce-Price-amount {
  flex: 0 0 auto !important;
  margin-left: 10px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--sq-purple-dark);
}

/* Proceed to checkout button */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  background: var(--sq-purple);
  color: #fff;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  width: 100%;
  display: block;
  text-transform: none;
  letter-spacing: .02em;
  transition: background .15s ease, transform .1s ease;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: var(--sq-purple-hover);
  transform: translateY(-1px);
}

/* Empty cart message */
.woocommerce-cart .cart-empty {
  background: #fff;
  border: 1px dashed var(--sq-border);
  border-radius: var(--sq-radius);
  padding: 24px;
  color: var(--sq-muted);
}

/* =========================================================
   RESPONSIVE / MOBILE — stacked card layout
   ========================================================= */
@media (max-width: 768px) {

  /* Outer wrapper padding — forced with doubled-class specificity
     because the theme resets padding on this element. */
  .woocommerce-cart.woocommerce-cart .woocommerce {
    padding: 0px !important;
  }
  .woocommerce-cart.woocommerce-cart .elementor-shortcode {
    padding: 0px !important;
    display: block !important;
  }

  /* Kill the table structure entirely so nothing tries to
     render as a table row/cell and force horizontal scroll */
  .woocommerce-cart table.shop_table,
  .woocommerce-cart table.shop_table thead,
  .woocommerce-cart table.shop_table tbody,
  .woocommerce-cart table.shop_table tr,
  .woocommerce-cart table.shop_table th,
  .woocommerce-cart table.shop_table td {
    display: block;
    width: 100%;
  }

  .woocommerce-cart table.shop_table thead {
    display: none; /* labels come from data-title instead */
  }

  /* Each product becomes its own card. Extra top padding clears
     space for the absolute-positioned remove (x) badge. */
  .woocommerce-cart table.shop_table tbody tr {
    background: #fff;
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius);
    box-shadow: 0 2px 8px rgba(45,19,48,0.05);
    margin-bottom: 14px;
    padding: 38px 0 6px;
    position: relative;
  }
  .woocommerce-cart table.shop_table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Coupon/update-cart row shouldn't look like a product card */
  .woocommerce-cart table.shop_table tbody tr:has(td.actions) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 0 0;
    margin-bottom: 0;
  }

  .woocommerce-cart table.shop_table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border: none;
    text-align: right;
  }

  /* Actions cell (coupon field + two buttons) stacks top-to-bottom */
  .woocommerce-cart table.shop_table tbody td.actions {
    display: block;
    padding: 10px 16px 0;
    text-align: left;
  }
  .woocommerce-cart table.shop_table tbody td.actions::before {
    content: none;
  }
  .woocommerce-cart table.shop_table tbody td.actions button[name="update_cart"] {
    margin-top: 12px;
  }

  /* Label each row using WooCommerce's built-in data-title attr */
  .woocommerce-cart table.shop_table tbody td::before {
    content: attr(data-title);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--sq-muted);
    text-align: left;
    margin-right: 12px;
  }

  /* Remove (x) sits top-right as a corner badge */
  .woocommerce-cart table.shop_table tbody td.product-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto;
    padding: 0;
    z-index: 2;
  }
  .woocommerce-cart table.shop_table tbody td.product-remove::before {
    content: none;
  }

  /* Thumbnail — forced visible + laid out; theme was hiding it
     via a higher-specificity rule, so this uses the class chain
     WooCommerce itself renders (shop_table_responsive) + !important */
  .woocommerce-cart table.shop_table.shop_table_responsive tbody td.product-thumbnail {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 10px 16px !important;
    text-align: left !important;
  }
  .woocommerce-cart table.shop_table.shop_table_responsive tbody td.product-thumbnail a {
    display: block !important;
  }
  .woocommerce-cart table.shop_table.shop_table_responsive tbody td.product-thumbnail img {
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    margin-left: 0 !important;
  }
  .woocommerce-cart table.shop_table.shop_table_responsive tbody td.product-thumbnail::before {
    content: none;
  }

  .woocommerce-cart table.shop_table tbody td.product-name {
    font-size: 15px;
  }

  .woocommerce-cart table.shop_table tbody td.product-quantity {
    justify-content: flex-end;
    gap: 12px;
  }
  .woocommerce-cart table.shop_table tbody td.product-quantity .quantity .qty {
    width: 60px;
  }

  /* Coupon input/buttons stack full-width.
     Doubled class + !important because the theme was still
     resetting the input's own padding, making the text
     touch its border. */
  .woocommerce-cart .coupon {
    flex-direction: column;
    align-items: stretch;
  }
  .woocommerce-cart.woocommerce-cart .coupon input#coupon_code {
    width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
  }
  .woocommerce-cart button[name="apply_coupon"],
  .woocommerce-cart button[name="update_cart"] {
    width: 100%;
    text-align: center;
  }
  .woocommerce-cart.woocommerce-cart .quantity .qty {
    padding: 10px 8px !important;
    box-sizing: border-box !important;
  }

  /* Totals box goes full-width, no float. Padding forced because
     the same theme reset that hit the outer wrapper hits this too —
     that's why the SHIPMENT block's edges had no inner spacing. */
  .woocommerce-cart .cart-collaterals {
    display: block;
    width: 100%;
  }
  .woocommerce-cart.woocommerce-cart .cart-collaterals .cart_totals {
    max-width: 100%;
    margin: 20px 0 0;
    padding: 20px !important;
  }

  /* Shipment/subtotal/total rows stack label-over-value.
     FIX: previous version only set vertical padding (10px 0),
     leaving zero horizontal padding — that's exactly why the
     SHIPMENT text and radio list touched the card's edges.
     Now both axes get padding, forced with !important + the
     WooCommerce class chain since the theme resets this too. */
  .woocommerce-cart .cart_totals table.shop_table.shop_table_responsive tr th,
  .woocommerce-cart .cart_totals table.shop_table.shop_table_responsive tr td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 10px 16px !important;
    box-sizing: border-box !important;
  }

  /* Shipment row — mobile only: stack "Shipment" label on top and
     the radio options underneath it. Forced with doubled-class
     specificity + !important because the theme has its own
     width/float rules on these price-table cells. */
  .woocommerce-cart.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
  .woocommerce-cart.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th,
  .woocommerce-cart.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
  }
  .woocommerce-cart.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th {
    padding: 14px 16px 6px !important;
    border-bottom: none !important;
  }
  .woocommerce-cart.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
    padding: 0 16px 14px !important;
  }
  .woocommerce-cart .cart_totals table.shop_table.shop_table_responsive tr th {
    padding-bottom: 4px !important;
    color: var(--sq-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .woocommerce-cart .cart_totals table.shop_table.shop_table_responsive tr td::before {
    content: none !important; /* kill WooCommerce's default "Label:" prefix */
  }
  /* Note: #shipping_method / li layout is handled globally above
     (outside this media query) — no mobile-specific override needed. */

  .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    padding: 15px 18px;
    font-size: 15px;
  }
}/* End custom CSS */