.u-section-1 {
  --color-var: #e4c151;
}

.u-section-1 .u-sheet-1 {
  min-height: 810px;
}

.u-section-1 .u-custom-html-1 {
  margin-bottom: 0;
  height: auto;
  min-height: 69px;
  margin-top: 47px;
}

.u-section-1 .u-custom-html-2 {
  height: auto;
  min-height: 27px;
  margin: 0;
}

@media (max-width: 1199px) {
  .u-section-1 .u-custom-html-2 {
    margin-right: initial;
    margin-left: initial;
  }
}/* =========================================================
   Elysian Lustre — Cart page CSS (FINAL)
   Keeps your “good” premium layout.
   Final tweaks:
   - Mobile: checkout button width -15px and centered in card
   - Desktop: more right padding so totals aren’t hugging edge
              + checkout centered below totals with similar proportions
   ========================================================= */
/* Page background */
.u-section-1{
  background:#E4C151 !important;
}
/* Keep alignment consistent with the rest of the site */
.u-section-1 .u-sheet-1{
  min-height:700px;
  padding-top:15px; /* gap under sticky header */
}
/* White card container */
.el-cart-card{
  background:#fff;
  border-radius:28px;
  padding:22px 42px 22px 22px;   /* EXTRA right padding for desktop (totals breathing room) */
  max-width:880px;
  margin:15px auto 40px;
  box-sizing:border-box;
  overflow:hidden;
}
/* Prevent horizontal overflow */
.el-cart-card *,
.el-cart-card *::before,
.el-cart-card *::after{
  max-width:100%;
  box-sizing:border-box;
}
/* Title */
.el-cart-title{
  font-size:42px;
  color:#61455D;
  margin:0 0 20px;
}
/* Divider */
.el-divider{
  border:none;
  border-top:1px solid rgba(0,0,0,0.10);
  margin:18px 0;
}
/* Delivery */
.el-cart-delivery h2{
  margin:0 0 10px;
  color:#61455D;
}
.el-radio{
  display:block;
  margin:0 0 10px;
  font-size:16px;
}
/* Totals */
.el-cart-totals .el-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:0 0 10px;
  font-size:16px;
}
.el-cart-totals .el-total{
  font-size:22px;
  font-weight:700;
  color:#61455D;
}
/* =========================================================
   FINAL DESKTOP ALIGNMENT (match reference screenshot)
   - Delivery block sits on the right half of the card
   - Totals block sits on the right, with label left / value right
   ========================================================= */
@media (min-width: 700px){
  .el-cart-delivery{
    /* Narrower block = further to the right (matches mock) */
    max-width: 300px;
    margin-left: auto;
  }
  .el-cart-delivery h2{
    /* Title sits visually on the right */
    text-align: right;
    font-size: 34px;
    letter-spacing: 0.28em;
  }
  .el-cart-delivery .el-radio{
    text-align: left;
  }
  .el-cart-totals{
    max-width: 425px;
    margin-left: auto;
  }
  .el-cart-totals .el-row{
    justify-content: flex-end;
  }
  .el-cart-totals .el-row span{
    flex: 1;
    text-align: center;
  }
  .el-cart-totals .el-row strong{
    min-width: 110px;
    text-align: right;
  }
}
/* Actions */
.el-cart-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:18px;
}
.el-continue{
  color:#61455D;
  text-decoration:none;
  font-weight:500;
}
/* =========================================================
   Checkout button — matches Add to Cart behaviour
   Desktop: similar proportions, positioned under totals (see desktop media query below)
   ========================================================= */
.el-checkout-btn{
  background-color:#562C61;
  color:#FFD84D;
  border:2px solid #FFD84D;
  border-radius:9999px;
  width:120px;    /* similar proportions to mobile pill, slightly wider than 105 */
  height:38px;    /* slightly taller than 34 for premium presence */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.10);
  transition:
    background-color .25s ease,
    color .25s ease,
    transform .15s ease,
    box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.el-checkout-btn:hover,
.el-checkout-btn:focus-visible{
  background-color:#FFD84D;
  color:#562C61;
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 6px 16px rgba(86,44,97,0.25);
  outline:none;
}
.el-checkout-btn:active{
  transform:translateY(0) scale(0.98);
  box-shadow:0 3px 8px rgba(86,44,97,0.20);
}
/* =========================================================
   Cart table (rendered by cart.js)
   Columns: Product | Formula | Price | Qty | Subtotal | (Remove)
   ========================================================= */
.cart-table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
}
.cart-table th,
.cart-table td{
  padding:10px 8px;
  vertical-align:middle;
  font-size:14px;
}
.cart-table th{
  white-space:nowrap;
  color:#61455D;
}
/* Make the fragrance/type (item.name) a touch larger + medium bold */
.cart-table td:nth-child(1) span{
  font-size:16px;
  font-weight:600;
  color:#61455D;
}
/* Keep Qty column tight */
.cart-table th:nth-child(4),
.cart-table td:nth-child(4){
  width:78px;
  text-align:left;
}
/* Qty input (desktop) */
.cart-qty{
  width:54px;
  min-width:54px;
  height:40px;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,0.25);
  border-radius:14px;
  font:600 15px/1 system-ui;
}
/* Remove button */
.cart-remove{
  padding:8px 14px;
  border-radius:10px;
  font-weight:600;
  border:1px solid rgba(0,0,0,0.35);
  background:#f2f2f2;
  cursor:pointer;
}
/* =========================================================
   Desktop layout tweak:
   - center the checkout button BELOW totals
   - keep “Continue shopping” on left
   ========================================================= */
@media (min-width: 576px){
  .el-cart-actions{
    display:grid;
    grid-template-columns: 1fr auto; /* continue (left) | button (right-ish but we center it) */
    grid-template-areas:
      "continue continue"
      "button   button";
    row-gap:14px;
    align-items:center;
  }
  .el-continue{
    grid-area:continue;
    justify-self:start;
  }
  .el-checkout-btn{
    grid-area:button;
    justify-self:center; /* centered under totals */
  }
}
/* =========================================================
   Mobile layout — keeps your preferred “Remove | Qty | Price”
   + mobile checkout button: width reduced by 15px and centered
   ========================================================= */
@media (max-width:575px){
  .el-cart-card{
    padding:16px 16px 18px;  /* mobile padding */
    border-radius:22px;
  }
  /* Actions stack; center button */
  .el-cart-actions{
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  /* Mobile checkout: reduce width by 15px (from full width) and center */
  .el-checkout-btn{
    width:calc(100% - 30px);
    height:44px;
  }
  /* Table: hide headings and convert each row into a grid */
  .cart-table thead{
    display:none;
  }
  .cart-table,
  .cart-table tbody{
    display:block;
    width:100%;
  }
  .cart-table tr{
    display:grid;
    grid-template-columns: 1fr 86px 1fr;
    grid-template-areas:
      "prod   prod   prod"
      "formula formula formula"
      "remove qty    total";
    row-gap:10px;
    align-items:center;
    padding:8px 0 14px;
    border-bottom:1px solid rgba(0,0,0,0.08);
  }
  .cart-table td{
    display:block;
    padding:0;
    font-size:14px;
  }
  /* Product (image + name) */
  .cart-table td:nth-child(1){
    grid-area:prod;
  }
  /* Keep spacing */
  .cart-table td:nth-child(1) > div{
    gap:12px !important;
  }
  .cart-table td:nth-child(1) img{
    width:58px !important;
    height:58px !important;
    border-radius:14px !important;
  }
  /* Formula line under name, aligned with name */
  .cart-table td:nth-child(2){
    grid-area:formula;
    color:rgba(0,0,0,0.75);
    padding-left:82px;
    margin-top:-2px;
    text-align:left;
  }
  /* Hide separate Price column on mobile (use Subtotal on right) */
  .cart-table td:nth-child(3){
    display:none;
  }
  /* Qty (center) */
  .cart-table td:nth-child(4){
    grid-area:qty;
    justify-self:center;
  }
  .cart-qty{
    width:54px;
    min-width:54px;
    height:44px;
    border-radius:16px;
    font-size:16px;
  }
  /* Subtotal (right) */
  .cart-table td:nth-child(5){
    grid-area:total;
    justify-self:end;
    font-size:16px;
    font-weight:700;
    color:#61455D;
    white-space:nowrap;
  }
  /* Remove button (left) */
  .cart-table td:nth-child(6){
    grid-area:remove;
    justify-self:start;
    padding-top:0;
  }
}
/* Desktop: button sits under Total and aligns with the right-side price */
@media (min-width:576px){
  .el-cart-actions{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "continue continue"
      "button   button";
    row-gap:14px;
  }
  .el-checkout-btn{
    justify-self:end;      /* align with totals price column */
    margin-right:0;        /* uses your card right padding */
  }
}
/* Mobile: 60% width and centered */
@media (max-width:575px){
  .el-checkout-btn{
    width:60% !important;
    margin:0 auto;         /* center the smaller button */
    display:flex;
  }
}