/* Consolidated cart + stepper styles
   - Single source of truth for sizes and visuals
   - Per-context overrides via CSS variables
   - Organized by component for readability
*/

:root {
  /* cart layout */
  --cart-root-gap: 12px;
  --cart-padding: 6px;
  --cart-radius: 16px;
  --cart-icon-size: 64px;
  --cart-border: var(--color-forest, #04202C);

  /* stepper defaults (override per-context) */
  --stepper-width-default: 90px;
  --stepper-height-default: 34px;
  --stepper-btn-diameter-default: 30px;
  --stepper-side-gap-default: 2px;
  --stepper-center-font-size: 1rem;
  --stepper-bg-default: color-mix(in srgb, white 6%, transparent 94%);
  --stepper-border-default: rgba(0,0,0,0.06);
}

/* ------------------------------------------------------------------ */
/* Compact cart pill (fixed) */
/* ------------------------------------------------------------------ */
.cart-pill-bar { display: none !important; }

#cart-simple-root {
  position: fixed;
  left: var(--cart-root-gap);
  right: var(--cart-root-gap);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--cart-root-gap));
  z-index: 2200;
  pointer-events: none;
}

.cart-simple-box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: var(--cart-padding);
  background: color-mix(in srgb, var(--color-forest, #04202C) 70%, transparent 30%);
  color: #fff;
  border-radius: var(--cart-radius);
  border: 0.5px solid #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-clip: padding-box;
  /*
    Clean refactor of cart + stepper CSS
    - Minimal, readable and grouped by component
    - Keeps semantics & selectors used by JS
    - Focus: full-width cart modal; boxed parada groups with 12px internal gutters
  */

  :root{
    /* layout */
    --cart-gutter: 12px;           /* internal gutter inside boxes */
    --cart-radius: 12px;
    --cart-padding: 12px;          /* vertical padding inside rows */
    --cart-border: rgba(0,0,0,0.06);

    /* colors / accents */
    --cart-bg: #ffffff;
    --cart-forest: var(--color-forest, #04202C);

    /* shadows */
    --cart-elevation-1: 0 2px 6px rgba(0,0,0,0.06);
    --cart-elevation-2: 0 10px 30px rgba(2,12,20,0.16);

    /* stepper */
    --stepper-width: 90px;
    --stepper-height: 34px;
    --stepper-btn: 30px;
    --stepper-gap: 2px;
    --stepper-font: 1.5rem;
    --stepper-center-font-size: 1rem;
  }

  /* ================================================================== */
  /* Compact cart pill (fixed)                                            */
  /* ================================================================== */
  .cart-pill-bar{ display:none !important; }

  #cart-simple-root{
    position: fixed;
    left: var(--cart-gutter);
    right: var(--cart-gutter);
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--cart-gutter));
    z-index: 2200;
    pointer-events: none;
  }

  .cart-simple-box{
    margin: 0 auto; max-width: 980px; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px; box-sizing: border-box;
    background: color-mix(in srgb, var(--cart-forest) 70%, transparent 30%);
    color: #fff; border-radius: 16px; border: 0.5px solid #fff;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transform: translateX(calc(-100% - var(--cart-gutter))); opacity:0;
    transition: transform .36s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
    pointer-events: none;
  }
  #cart-simple-root.has-items .cart-simple-box{ transform:none; opacity:1; pointer-events:auto; }
  .cart-simple-left{ display:flex; gap:8px; align-items:center; }
  .cart-simple-center{ flex:1; text-align:center; }
  .cart-simple-right{ flex:0 0 auto; text-align:right; padding-right:8px; }
  .cart-simple-icon{ width:64px; height:64px; border-radius:6px; background-size:cover; background-position:center; }

  /* ================================================================== */
  /* Bottom-sheet / Cart modal                                             */
  /* - Dialog full-width, modal-content remains flush with bottom-sheet     */
  /* ================================================================== */
  .modal.bottom-sheet{ --bs-modal-zindex:2147483000; }
  .modal.bottom-sheet .modal-dialog{
    position: fixed; left:0; right:0; bottom:0; margin:0;
    width:100%; max-width:100%; display:flex; align-items:flex-end;
    transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
  }
  .modal.bottom-sheet.show .modal-dialog, .modal.bottom-sheet.fade.show .modal-dialog{ transform: translateY(0); pointer-events:auto; }

  .modal.bottom-sheet .modal-content{ border-top-left-radius:12px; border-top-right-radius:12px; max-height: calc(100vh - env(safe-area-inset-top,24px)); overflow:hidden; background-clip: padding-box; }
  .modal.bottom-sheet .modal-body{ overflow:auto; -webkit-overflow-scrolling:touch; max-height: calc(70vh - 56px); }
  .modal.bottom-sheet .modal-footer{ border-top: 1px solid var(--cart-border); }
  .bottom-sheet-handle{ display:flex; justify-content:center; padding:10px 0 0; }
  .bottom-sheet-handle .handle-bar{ width:56px; height:6px; background:rgba(0,0,0,0.12); border-radius:999px; }

  /* cartFullModal specifics */
  #cartFullModal .modal-content{ border-top-left-radius:16px !important; border-top-right-radius:16px !important; border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; border:none !important; box-shadow:none !important; }
  #cartFullModal .modal-dialog{ border-radius:16px 16px 0 0 !important; }
  #cartFullModal .modal-footer{ border-top:1px solid var(--cart-border) !important; }

  /* ================================================================== */
  /* Parada group boxes inside modal (required behavior)                   */
  /* - No external modal side padding; boxes provide internal gutter (12px) */
  /* - No gaps between boxes; each box has shadow and rounded corners      */
  /* ================================================================== */
  #cart-full-body > .mb-3{
    margin: 0;                           /* box spans full modal width */
    padding: 0 var(--cart-gutter);       /* internal lateral gutter = 12px */
    border-radius: var(--cart-radius);
    background: var(--cart-bg);
    border: 1px solid var(--cart-border);
    box-shadow: var(--cart-elevation-2), var(--cart-elevation-1);
    overflow: hidden; box-sizing: border-box;
  }

  #cart-full-body > .mb-3 > .fw-bold.mb-2{ padding: var(--cart-padding) 0; margin:0; }
  #cart-full-body .mb-3 .d-flex.align-items-center.justify-content-between.py-2{ padding: var(--cart-padding) 0; margin:0; border-bottom: 1px solid var(--cart-border); }
  #cart-full-body .mb-3 .d-flex.align-items-center.justify-content-between.py-2:last-of-type{ border-bottom: none; }
  #cart-full-body .mb-3 .text-end.small.mt-2{ padding: 12px 0; margin:0; }
  #cart-full-body > .mb-3 + .mb-3{ margin-top: 0; }

  /* ================================================================== */
  /* Cart drawer: reuse same visual tokens for consistency                */
  /* ================================================================== */
  .cart-drawer .cart-drawer-content{ box-sizing: border-box; padding:0; }
  .cart-drawer .parada-group{ margin:0; padding:0 var(--cart-gutter); border-radius: var(--cart-radius); background: var(--cart-bg); border:1px solid var(--cart-border); box-shadow: var(--cart-elevation-2), var(--cart-elevation-1); overflow:hidden; }
  .cart-drawer .parada-group + .parada-group{ margin-top: 0; }
  .cart-drawer .parada-title{ padding: var(--cart-padding) 0; margin:0; font-weight:700; }
  .cart-drawer .cart-item{ padding: var(--cart-padding) 0; margin:0; border-bottom:1px solid var(--cart-border); }
  .cart-drawer .parada-subtotal{ padding: 12px 0; margin:0; text-align:right; }

  /* ================================================================== */
  /* Steppers / Add buttons                                                 */
  /* - Compact, overridable by context vars                                 */
  /* ================================================================== */
  .cart-stepper, .stepper{
    display:inline-flex; align-items:center; gap:0;
    width: var(--stepper-width); height: var(--stepper-height);
    padding: 0 var(--stepper-gap); box-sizing:border-box; overflow:hidden;
    border-radius: calc(var(--stepper-height) / 2);
    background: color-mix(in srgb, var(--cart-forest) 70%, transparent 30%);
    color:#fff; border:1px solid color-mix(in srgb, var(--cart-forest) 40%, rgba(0,0,0,0.06));
  }

  .cart-stepper-button, .stepper-btn{
    flex:0 0 var(--stepper-btn);
    width: var(--stepper-btn); height: var(--stepper-btn);
    min-width: var(--stepper-btn); border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:#fff; color:var(--cart-forest); border:1px solid rgba(0,0,0,0.06); box-shadow:0 1px 2px rgba(0,0,0,0.04);
    margin:0; padding:0; font-weight:400; font-size:var(--stepper-font); line-height:1; cursor:pointer; box-sizing:border-box;
  }
  .cart-stepper-button:focus, .stepper-btn:focus{ outline:2px solid color-mix(in srgb, var(--cart-forest) 60%, white 12%); outline-offset:2px; }
  .cart-stepper-button:active, .stepper-btn:active{ transform:translateY(1px); }

  .cart-stepper-value, .stepper-qty{ flex:1; text-align:center; font-weight:700; padding:0 6px; color:#fff; font-size:var(--stepper-center-font-size); }

  .stepper-qty.num-change{ animation: stepper-pop 320ms cubic-bezier(.2,.9,.3,1); }
  @keyframes stepper-pop{ 0%{ transform:scale(1); opacity:1 } 30%{ transform:scale(1.28); opacity:1 } 100%{ transform:scale(1); opacity:1 } }

  .cart-simple-right.count-change, .cart-pill-items.count-change{ display:inline-block; animation: cart-count-pop 360ms cubic-bezier(.2,.9,.3,1); }
  @keyframes cart-count-pop{ 0%{ transform:translateY(0) scale(1); opacity:.8 } 40%{ transform:translateY(-6px) scale(1.06); opacity:1 } 100%{ transform:translateY(0) scale(1); opacity:1 } }

  @media (max-width:480px){ .cart-stepper-button, .stepper-btn{ width:28px; height:28px; font-size:1.25rem } .cart-stepper-value, .stepper-qty{ min-width:24px; padding:0 4px } }

  .add-btn{ display:inline-flex; align-items:center; justify-content:center; width:var(--stepper-width); height:var(--stepper-height); padding:0; border-radius:calc(var(--stepper-height)/2); border:1px solid color-mix(in srgb, var(--cart-forest) 40%, rgba(0,0,0,0.06)); background:var(--cart-forest); color:#fff; font-weight:700; cursor:pointer; box-sizing:border-box; }
  .add-btn--labeled{ background:#fff !important; color:var(--cart-forest) !important; border:2px solid var(--cart-forest) !important; padding-left:8px !important; padding-right:9px !important; display:inline-flex !important; align-items:center !important; gap:8px !important; }
  .add-btn--labeled .add-btn-label{ font-weight:700; color:var(--cart-forest); font-size:.95rem }
  .add-btn--icon{ background:#fff !important; border:2px solid var(--cart-forest) !important; width:var(--stepper-height) !important; height:var(--stepper-height) !important; min-width:var(--stepper-height) !important; padding:0 !important; border-radius:50% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important }

  /* Context overrides */
  .product-action-stepper-wrapper{ --stepper-width:90px; --stepper-height:34px; --stepper-btn:30px; --stepper-gap:2px; }
  .product-action-stepper-wrapper .stepper{ padding-left:calc(2px - 1px); padding-right:calc(2px - 1px); display:flex; align-items:center }
  .product-action-stepper-wrapper .stepper-btn{ font-size:1.5rem; font-weight:400 }
  .ap-card .product-action-stepper-wrapper .stepper-btn{ font-size:1.25rem }
  .product-action-stepper-wrapper .stepper-btn .stepper-glyph{ display:inline-block; transform:translateY(-2px); }
  .ap-card .product-action-stepper-wrapper .stepper-btn .stepper-glyph{ transform:translateY(-1px); }

  font-weight: 600;
  transform: translateX(calc(-100% - var(--cart-root-gap)));
  opacity: 0;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease;
  pointer-events: none;
}

#cart-simple-root.has-items .cart-simple-box{
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.cart-simple-left{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.cart-simple-center{ flex:1 1 auto; text-align:center; }
.cart-simple-right{ flex:0 0 auto; padding-right: 12px; text-align: right; }
.cart-simple-icon{ width: var(--cart-icon-size); height: var(--cart-icon-size); background-size: cover; background-position: center; border-radius: 6px; display:block; transform: translateY(-1.5px); margin:0; }

@media (max-width: 480px){
  .cart-simple-box{ width: 100%; border-radius: var(--cart-radius); }
  .cart-simple-center{ font-size: 0.95rem; }
}

/* ------------------------------------------------------------------ */
/* Bottom-sheet modal / Cart modal adjustments
   - Keep modal behaviour but ensure cart occupies full width when desired
*/
/* ------------------------------------------------------------------ */
.modal.bottom-sheet { --bs-modal-zindex: 2147483000; }
.modal.bottom-sheet .modal-dialog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  transform: translateY(100%);
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  transition: transform 300ms cubic-bezier(.2,.8,.2,1);
}
.modal.bottom-sheet.show .modal-dialog,
.modal.bottom-sheet.fade.show .modal-dialog { transform: translateY(0); pointer-events: auto; }

.modal.bottom-sheet .modal-content{
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  max-height: calc(100vh - env(safe-area-inset-top, 24px));
  overflow: hidden;
}
.modal.bottom-sheet .modal-body{ overflow:auto; -webkit-overflow-scrolling: touch; max-height: calc(70vh - 56px); }
.modal.bottom-sheet .modal-footer{ border-top: 1px solid rgba(0,0,0,0.06); }
.bottom-sheet-handle{ display:flex; justify-content:center; padding:10px 0 0 0; }
.bottom-sheet-handle .handle-bar{ width:56px; height:6px; background:rgba(0,0,0,0.12); border-radius:999px; display:block; }
.modal-backdrop { background-color: rgba(0,0,0,0.35); }
@media (min-width: 992px){
  .modal.bottom-sheet .modal-dialog{ max-width:800px; margin-left:auto; margin-right:auto; border-radius:12px; }
  .modal.bottom-sheet .modal-content{ border-radius: 12px; }
}

/* Cart modal specifics (full cart modal) */
#cartFullModal .modal-content{
  /* top rounded, bottom square */
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  /* flush with bottom-sheet: remove outer border/shadow */
  border: none !important;
  box-shadow: none !important;
  background-clip: padding-box;
}

#cartFullModal .modal-dialog{ border-radius: 16px 16px 0 0 !important; }

#cartFullModal .modal-footer{ border-top: 1px solid rgba(0,0,0,0.06) !important; }

/* ------------------------------------------------------------------ */
/* Stepper / Add button styles
   - Consolidated and kept small to be overridable per-context
*/
/* ------------------------------------------------------------------ */
.cart-stepper, .stepper{
  --stepper-width: var(--stepper-width-default);
  --stepper-height: var(--stepper-height-default);
  --stepper-btn-diameter: var(--stepper-btn-diameter-default);
  --stepper-side-gap: var(--stepper-side-gap-default);

  display:inline-flex;
  align-items:center;
  width: var(--stepper-width);
  height: var(--stepper-height);
  padding: 0 var(--stepper-side-gap);
  gap: 0;
  border-radius: calc(var(--stepper-height) / 2);
  background: color-mix(in srgb, var(--color-forest) 70%, transparent 30%);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--color-forest) 40%, rgba(0,0,0,0.06));
  box-sizing: border-box;
  overflow: hidden;
}

.cart-stepper-button, .stepper-btn{
  flex: 0 0 var(--stepper-btn-diameter);
  width: var(--stepper-btn-diameter);
  height: var(--stepper-btn-diameter);
  min-width: var(--stepper-btn-diameter);
  min-height: var(--stepper-btn-diameter);
  border-radius: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align: center;
  background: #fff;
  color: var(--color-forest);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: pointer;
  margin:0;
  padding:0;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  box-sizing: border-box;
  overflow: hidden;
}

.cart-stepper-value, .stepper-qty{ flex: 1 1 auto; text-align:center; font-weight:700; padding: 0 6px; color: #fff; font-size: var(--stepper-center-font-size); }

.stepper-qty.num-change{ animation: stepper-pop 320ms cubic-bezier(.2,.9,.3,1); }
@keyframes stepper-pop{ 0%{ transform: scale(1); opacity: 1; } 30%{ transform: scale(1.28); opacity: 1; } 100%{ transform: scale(1); opacity: 1; } }

.cart-simple-right.count-change{ display: inline-block; animation: cart-count-pop 360ms cubic-bezier(.2,.9,.3,1); }
@keyframes cart-count-pop{ 0%{ transform: translateY(0) scale(1); opacity: 0.8; } 40%{ transform: translateY(-6px) scale(1.06); opacity: 1; } 100%{ transform: translateY(0) scale(1); opacity: 1; } }

@media (max-width: 480px){
  .cart-stepper-button, .stepper-btn{ width:28px; height:28px; font-size: 1.25rem; }
  .cart-stepper-value, .stepper-qty{ min-width: 24px; padding: 0 4px; }
}

.add-btn{ display:inline-flex; align-items:center; justify-content:center; width: var(--stepper-width, var(--stepper-width-default)); height: var(--stepper-height, var(--stepper-height-default)); padding:0; border-radius: calc(var(--stepper-height, var(--stepper-height-default)) / 2); border: 1px solid color-mix(in srgb, var(--color-forest, #04202C) 40%, rgba(0,0,0,0.06)); background: var(--color-forest); color: #fff; font-weight:700; cursor:pointer; box-sizing: border-box; }

.add-btn--labeled{ background: #ffffff !important; background-image: none !important; color: var(--color-forest) !important; border: 2px solid var(--color-forest) !important; padding-left: 8px !important; padding-right: 9px !important; width: auto !important; min-width: 0 !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-sizing: border-box !important; }
.add-btn--labeled .add-btn-label{ font-weight:700; color: var(--color-forest); font-size: 0.95rem; line-height:1; }
.add-btn--labeled i{ font-size: 16px; }
.product-action-stepper-wrapper .add-btn--labeled{ height: var(--stepper-height, 34px); }

.add-btn--icon{ background: #ffffff !important; background-image: none !important; color: var(--color-forest) !important; border: 2px solid var(--color-forest) !important; width: var(--stepper-height, 34px) !important; height: var(--stepper-height, 34px) !important; min-width: var(--stepper-height, 34px) !important; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; }

/* Context overrides */
.product-action-stepper-wrapper{ --stepper-width: 90px; --stepper-height: 34px; --stepper-btn-diameter: 30px; --stepper-side-gap: 2px; }
.product-action-stepper-wrapper .stepper{ padding-left: calc(2px - 1px); padding-right: calc(2px - 1px); display:flex; align-items:center; }
.product-action-stepper-wrapper .stepper-btn{ font-size: 1.5rem; font-weight: 400; }
.product-action-stepper-wrapper .stepper-btn.minus{ margin-left: 0; }
.product-action-stepper-wrapper .stepper-btn.plus{ margin-right: 0; }
.ap-card .product-action-stepper-wrapper .stepper-btn { font-size: 1.25rem; font-weight: 400; }
.product-action-stepper-wrapper .stepper-btn .stepper-glyph { display: inline-block; transform: translateY(-2px); line-height: 1; }
.ap-card .product-action-stepper-wrapper .stepper-btn .stepper-glyph { transform: translateY(-1px); }

/* ------------------------------------------------------------------ */
/* Cart groups: boxed per parada, gutters and spacing
   - Boxes take full modal width; internal padding provides 12px lateral spacing
*/
/* ------------------------------------------------------------------ */
#cartFullModal .modal-dialog{ position: fixed; left: 0; right: 0; bottom: 0; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box; padding-left: 0; padding-right: 0; }

#cart-full-body > .mb-3{
  margin: 0;
  padding-left: 12px;
  padding-right: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(2,12,20,0.16), 0 2px 6px rgba(0,0,0,0.06);
}

#cart-full-body > .mb-3 > .fw-bold.mb-2{ padding: 12px 0; margin: 0; }
#cart-full-body .mb-3 .d-flex.align-items-center.justify-content-between.py-2{ padding: 12px 0; margin: 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
#cart-full-body .mb-3 .d-flex.align-items-center.justify-content-between.py-2:last-of-type{ border-bottom: none; }
#cart-full-body .mb-3 .text-end.small.mt-2{ padding: 12px 0; margin: 0; }
#cart-full-body > .mb-3 + .mb-3{ margin-top: 0; }

/* Drawer consistency */
.cart-drawer .cart-drawer-content{ box-sizing: border-box; padding-left: 0; padding-right: 0; }
.cart-drawer .parada-group{ margin: 0; padding-left: 12px; padding-right: 12px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); background: #ffffff; box-shadow: 0 10px 30px rgba(2,12,20,0.16), 0 2px 6px rgba(0,0,0,0.06); }
.cart-drawer .parada-group + .parada-group{ margin-top: 0; }
.cart-drawer .parada-title{ padding: 12px 0; margin: 0; font-weight: 700; }
.cart-drawer .cart-item{ padding: 12px 0; margin: 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.cart-drawer .parada-subtotal{ padding: 12px 0; margin: 0; text-align: right; }

@media (min-width: 992px){
  #cartFullModal .modal-dialog{ left: 0; right: 0; width: 100% !important; max-width: 100% !important; }
  #cartFullModal .modal-content{ width: 100%; max-width: none; margin: 0; box-sizing: border-box; }
}