/** Shopify CDN: Minification failed

Line 94:1 Unexpected "/"

**/
/* === Cart Styles === */

/* Popup Main Container (Simplified) */
.cart-popup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none; /* Base: children control their own pointer events */
  visibility: hidden;   /* Base: hidden */
  opacity: 0;           /* Base: transparent */
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
  z-index: 9990; /* Base z-index, children will be higher */
}

.cart-popup.is-open {
  pointer-events: auto; /* Allows overlay and closer to be interactive */
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/* Popup Overlay (from snippet) - z-index should be higher than page, lower than panel */
.cart-popup-overlay {
  position: fixed; 
  inset: 0; /* equivalent to top, right, bottom, left = 0 */
  background-color: rgba(0, 0, 0, 0.3); 
  opacity: 0;
  visibility: hidden; /* Ensure it's hidden initially */
  transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Transition for opacity, immediate visibility at the end */
  z-index: 9998; 
  pointer-events: none; /* Initially no pointer events */
  cursor: pointer; /* Good for UX */
}

.cart-popup.is-open .cart-popup-overlay {
  opacity: 1;
  visibility: visible; /* Make visible */
  /* pointer-events: auto; */ /* REMOVED: So the click is received by .cart-popup */
  transition-delay: 0s; /* Reset entry transition delay */
}

/* Rule for .container-large.is-cart (now removed from HTML) is commented out below */
/*
.cart-popup.is-open .container-large.is-cart {
  transform: translateX(0%);
}
*/

/* Old .cart-container rule (with display:grid) - Commented Out */
/*
.cart-container { 
  display: grid; 
  grid-template-rows: auto; 
  grid-template-columns: 1fr; 
  padding: 30px 15px 24px 24px; 
  flex-grow: 1; 
  overflow-y: auto; 
  background-color: #fff; 
  z-index: 3; 
  opacity: 1; 
}
*/
/*
/* New styles for .cart-container, taking over from .container-large.is-cart */
.cart-container {
    height: auto;
    display: flex; 
    flex-direction: column;
    transform: translateX(100%); /* Initial state: off-screen to the right */
    transition: transform .4s ease-in-out;
    pointer-events: auto;
    /* overflow-y: hidden; /* WARNING: If .cart-container is the main scrolling element, this should be auto. If an inner element scrolls, then hidden is fine. */
    overflow-x: hidden;
    box-shadow: -2px 0 12px rgba(0,0,0,0.08); 
    position: fixed;
    bottom: 5rem; 
    right: 3rem;
    z-index: 9999; 
    opacity: 1;
    width: 100%; 
    max-width: 460px; 
    background-color: #fff; 
    padding: 30px 15px 24px 24px; /* Padding from old .cart-container, adjust if needed */
                                 /* This padding will apply to the main fixed panel. */
                                 /* Content like .cart-items-list might need its own max-height and overflow-y: auto if this panel doesn't scroll. */
}
*/

.cart-popup.is-open .cart-container {
  transform: translateX(0%); /* Slides the cart into view */
}


/* Cart Header (from snippet) */
.cart-not-empty-indicator {
  width: 100%;
  margin-bottom: 10px; /* REDUCED from 15px */
  display: flex-flow !important;
}

.in-chart_indicator {
  display: flex; 
  align-items: center; 
  font-size: 16px; /* REDUCED from 18px */
  font-weight: 500; 
  color: #1A1A1A; 
}
.in-chart_indicator div { 
  margin-right: 0.25em; 
}
.in-chart_indicator div:last-child { 
  margin-right: 0; 
}

/* Cart Popup Closer Button (from snippet) */
/* This button is inside .cart-container, so its position is relative to it. */
.cart-popup-closer {
  position: absolute; /* Relative to .cart-container as it's now the positioned ancestor */
  top: 15px; 
  right: 15px; 
  z-index: 10; /* Above other content within .cart-container */
  display: flex;
  width: 40px; 
  height: 40px; 
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  background-color: #fff; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08); 
  color: #1a1a1a; 
  cursor: pointer;
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, color .2s ease-in-out, opacity 0.3s ease-in-out .1s; 
  opacity: 0; 
  transform: scale(0.8) translateX(10px); 
}

.cart-popup.is-open .cart-popup-closer {
   opacity: 1;
   transform: scale(1) translateX(0);
}

.cart-popup-closer:hover {
  transform: scale(1.05) translateX(0); 
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12); 
  color: #4353FF; 
}

/* Cart Items List (from snippet & valsole.css) */
/* This now needs to manage its own scrolling if .cart-container has overflow-y: hidden */
.cart-items-list {
  width: 100%;
  flex-grow: 1; /* Allows it to take available space in the flex column of .cart-container */
  overflow-y: auto; /* Crucial for scrolling items if parent is overflow:hidden */
  overflow-x: hidden; /* ADDED: Prevent horizontal scroll within items list */
  padding-right: 8px; /* Space for scrollbar */
  margin-right: -8px; /* Compensate padding */
  margin-bottom: 24px; /* Space before footer */
  /* max-height: calc(100% - TOP_CONTENT_HEIGHT - BOTTOM_CONTENT_HEIGHT); /* Example if using max-height */
}

/* Cart Item (from snippet & valsole.css) */
.cart-item {
  display: flex;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e7e7e7; 
  gap: 16px; /* Main gap between image column and details column */
  /* width: 100%; /* Implicitly full width due to parent flex */
  /* font-size: 16px; /* Base font size, can be on .cart-container */
}
.cart-item:first-child {
  padding-top: 0; 
}

.w-layout-hflex.item-first-col { /* Renamed from item-first-col to be more Webflow like, but it's a flex container */
  display: flex;
  width: 100%; /* Take full width of .cart-item if items stack */
  gap: 16px;
  align-items: flex-start; 
}

.cart-item-image { /* From snippet */
  width: 100px; 
  height: 100px; 
  border-radius: 8px; 
  overflow: hidden;
  flex-shrink: 0; 
  background-color: #e7e7e7; /* Placeholder bg */
}
.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flexbox.gap-4.grow { /* Container for product-info and quantity-remove-wrapper, from snippet */
  display: flex;
  flex-direction: column;
  gap: 4px; /* Small gap between info block and qty block */
  flex-grow: 1;
  width: 20vh; 
}
.flexbox.is-horizontal.align-space-between.is-cart { /* Container for product-info text block and item-price-information */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start; 
}

.product-info { /* Container for title and options, from snippet & valsole.css */
  display: flex;
  flex-direction: column;
  gap: 4px; 
  flex-grow: 1; 
  padding-right: 8px; /* Space before price */
  /* width: 300px; /* Removed fixed width from valsole.css */
}
.text-size-large.product-title-custom a { /* From snippet */
  font-weight: 500; 
  color: #1A1A1A;
  text-decoration: none;
  font-size: 16px; 
}
.text-size-large.product-title-custom a:hover {
  text-decoration: underline;
}
/* .cart-item-title from valsole.css is similar, this is more specific */

.product-options-wrapper { /* From snippet */
  display: flex;
  flex-direction: column;
  gap: 4px; 
}
.cart-item-variant-options,
.cart-item-subscription,
.cart-item-discount, /* Generic discount text placeholder */
.cart-item-discount-code { /* Specific for applied discount codes on item */
  font-size: 12px; 
  color: #595959; 
}
.cart-item__discount-list { /* For Shopify item discounts */
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: #009900; /* Default success color */
}
.cart-item__discount-item.text-color-success {
   color: #009900; 
}


.item-price-information { /* Price block, from snippet */
  text-align: right;
  min-width: 80px; /* Ensures price doesn't get too squished */
  font-size: 16px;
  color: #1A1A1A;
  font-weight: 500; 
  flex-shrink: 0; /* Prevent price from shrinking too much */
}
.cart-item-total .cart-original-price {
  text-decoration: line-through !important;
  color: #757575;
  margin-right: 8px;
  font-size: 14px;
}
.cart-item-total .cart-final-price {
  color: #1A1A1A;
  font-weight: 500;
}
.cart-item-prediscount-price { /* From valsole.css, similar to above */
  color: #8d8d8d;
  font-size: 13px;
  text-decoration: line-through;
}


.flexbox.gap-4.is-horizontal.quantity-remove-wrapper { /* From snippet */
  display: flex;
  flex-direction: row;
  justify-content: space-between; 
  align-items: center;
  margin-top: 8px; 
}

.quantity-block { /* From snippet */
  display: flex;
  align-items: center;
  border: 1px solid #E5E5E5; 
  border-radius: 100px; 
  overflow: hidden; 
}
.cart-item-quantity-changer { /* From snippet & valsole.css */
  color: var(--black, #1A1A1A);
  cursor: pointer;
  border-radius: 0; /* Will be part of the rounded .quantity-block */
  justify-content: center;
  align-items: center;
  width: 30px; /* Adjusted from 20px (valsole) and snippet */
  height: 30px; /* Adjusted */
  padding-bottom: 0px; /* Adjusted from 3px */
  font-size: 20px; /* Adjusted from 25px (valsole) */
  font-weight: 400; /* Adjusted from 300 */
  line-height: 1;
  display: flex;
  background-color: transparent;
}
.cart-item-quantity-changer:hover {
  background-color: #f0f0f0; /* Consistent hover */
}
.cart-quantity { /* From snippet & valsole.css */
  color: var(--black, #1A1A1A);
  text-align: center;
  border: none; /* Remove individual border */
  border-left: 1px solid #E5E5E5;
  border-right: 1px solid #E5E5E5;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 30px; /* Match changer height */
  margin-bottom: 0;
  padding: 0 5px; /* Reduced padding */
  font-size: 14px;
}
.cart-item-remover { /* From snippet & valsole.css */
  background-color: transparent; /* Use icon color */
  color: #595959;
  cursor: pointer;
  border-radius: 100px; /* Keep if it's a standalone button */
  justify-content: center;
  align-items: center;
  width: 30px; /* Match quantity changers */
  height: 30px; /* Match quantity changers */
  display: flex;
  padding: 5px; /* Ensure SVG has some space */
  flex-shrink: 0; /* Prevent the delete button from collapsing on small screens */
}
.cart-item-remover:hover {
  background-color: #f0f0f0; 
  color: #1a1a1a;
}
.cart-item-remover svg {
  width: 100%;
  height: 100%;
}

/* Utility class for JS toggle */
.is-hidden { display: none !important; }

/* Cart Empty Message (from valsole.css & snippet) */
.cart-empty-message {
  border-bottom: 1px solid #e7e7e7;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: none; /* Hidden by default, shown when .sf-cart-empty is added */
  text-align: center;
  padding: 40px 0;
  overflow: scroll;
  overflow-x: hidden;
}
.cart-empty-message.sf-cart-empty { /* Class added by JS when cart is empty */
  grid-column-gap: 24px; 
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start; 
  align-items: center; /* Center content */
  display: flex;
}
.cart-empty-message .text-size-large { /* From snippet */
  margin-top: 8px;
  margin-bottom: 16px;
}
.cart-empty-message .flexbox.gap-16 { /* Container for product recommendations, from snippet */
  display: flex;
  gap: 16px;
  flex-wrap: wrap; /* Allow wrapping on smaller views */
  justify-content: center;
  margin-bottom: 24px;
}
/* .cart-product { /* Recommended product card, from snippet */
  /* display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #e7e7e7;
  border-radius: 8px;
  padding: 16px;
  width: 100%; /* Adjust for gap, roughly 3 per row */
  /* min-width: 150px; /* Prevent too small cards 
  box-sizing: border-box;
} */ 

.cart-product {
  display: grid;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #e7e7e7;
  grid-auto-flow: column;
  border-radius: 8px;
  padding: 16px;
  /* width: 100%; */
  min-width: 150px;
  box-sizing: border-box;
  justify-items: stretch;
  align-content: flex-start;
  justify-content: center;
  align-items: normal;
  text-align: left;
}
.in-chart_indicator {
  justify-content: center;
}

.cart-product-image_wrapper { /* From snippet */
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f0f0f0;
}
.cart-product-image_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-product-content { /* From snippet */
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.cart-product-content .grow { /* From snippet */
  flex-grow: 1;
}
.cart-product .button { /* From snippet */
  width: 100%;
  margin-top: auto; /* Push button to bottom */
}


/* Cart Footer Area (from valsole.css & snippet) */
.cart-bottom-row {
  width: 100%;
  padding-top: 24px;
  margin-top: auto; /* Pushes footer to bottom if cart items don't fill space */
  border-top: 1px solid #e7e7e7; /* Separator from items or coupon */
  display: flex; /* Default, will be overridden by style attribute from liquid */
  flex-direction: column;
  gap: 12px; /* Space between rows in footer */
}
.cart-bottom-row.sf-cart-empty {
  display: none;
}

.cart-row { /* For Subtotal, etc. from valsole.css */
  justify-content: space-between;
  align-items: center;
  display: flex;
  font-size: 16px;
}
.cart-row .text-color-alternate {
  color: #595959;
}

.cart-total-row { /* For Total, from valsole.css */
  grid-column-gap: 15px;
  justify-content: space-between;
  align-items: center;
  display: flex;
  margin-bottom: 16px; /* Space before checkout button */
}
.cart-total-row h5 {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0;
}
.cart-total { /* Actual total amount, from valsole.css */
  color: #1A1A1A;
  margin-bottom: 0;
  font-size: 18px; 
  font-weight: 700;
}

.w-layout-hflex.button-group { /* From snippet */
  display: flex;
  gap: 12px; /* If there were multiple buttons */
}
.checkout-button, .primary-checkout-button { /* From valsole.css & snippet */
  color: #fff; /* White text */
  cursor: pointer;
  background-color: #1A1A1A; /* Dark primary button */
  border-radius: .3rem; /* Match Valsole */
  flex-grow: 1; /* Take full width */
  justify-content: center;
  align-items: center; /* Vertically center text */
  padding: 15px 30px; /* Adjusted padding */
  font-weight: 600;
  transition: background-color .2s, color .2s;
  display: flex;
  text-align: center;
  text-decoration: none;
  border: 1px solid #1A1A1A; /* Border for consistency */
  line-height: 1.2; /* Ensure text fits */
}
.checkout-button:hover, .primary-checkout-button:hover {
  background-color: #4353FF; /* Valsole blue */
  border-color: #4353FF;
  color: #fff;
}

/* Coupon and Notes Area (from valsole.css) */
.coupon-form {
  grid-column-gap: 12px;
  grid-row-gap: 8px; /* Space between label and input/button row */
  border-bottom: 1px solid #e7e7e7;
  flex-direction: column;
  align-items: stretch; /* Input/button take full width */
  width: 100%;
  margin-top: 15px;
  margin-bottom: 20px; /* Increased bottom margin */
  padding-bottom: 20px; /* Padding before border */
  display: flex;
  position: relative;
}
.coupon-field-wrapper { /* For input and submit button */
  grid-column-gap: 10px;
  align-items: stretch; 
  width: 100%;
  display: flex;
}
.cart-discount-code-input { /* Input field */
  border: 1px solid #dfdfdf;
  border-radius: .3rem;
  flex-grow: 1; /* Takes available space */
  height: 42px; /* Adjusted height */
  margin-bottom: 0;
  padding: 0 12px;
}
.discount-code-submit { /* Apply button */
  color: #fff;
  background-color: #595959; /* Neutral dark grey */
  border: 1px solid #595959;
  border-radius: .3rem;
  flex-shrink: 0; /* Don't shrink */
  padding: 0 20px; /* Adjusted padding */
  font-weight: 500;
  height: 42px; /* Match input */
  cursor: pointer;
  transition: background-color 0.2s;
}
.discount-code-submit:hover {
  background-color: #1A1A1A;
  border-color: #1A1A1A;
}
.coupon-error-message {
  color: #D8000C; /* Error red */
  background-color: #FFD2D2; /* Light red background */
  padding: 8px 10px;
  font-size: 13px;
  width: 100%; 
  box-sizing: border-box;
  border-radius: .3rem;
  margin-top: 8px;
  text-align: left;
}

.order-discount-list { /* List of applied discounts */
  grid-column-gap: 8px; /* Reduced gap */
  flex-direction: column;
  align-items: stretch; /* Take full width */
  margin-bottom: 8px;
  width: 100%; /* Ensure it takes full width if items inside are space-between */
}
.order-discount-item, .discount-code-item { /* Individual discount line */
  justify-content: space-between;
  align-items: center;
  display: flex;
  font-size: 13px;
  color: #595959;
  padding: 6px 0; /* Some vertical padding */
}
.discount-code-item { /* Specifically for applied discount code from Webflow cart */
  background-color: #f0f0f0; /* Light grey background */
  padding: 8px 12px;
  border-radius: .3rem;
  margin-bottom: 6px;
}
.discount-code-remover { /* X to remove discount */
  cursor: pointer;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #595959;
}
.discount-code-remover:hover {
  color: #1a1a1a;
}
.discount-code-remover svg {
  width: 10px;
  height: 10px;
}
.order-discount-code-amount, .order-discount-amount { /* Savings amount */
  font-weight: 500;
}


.order-note-row { /* Order notes */
  grid-column-gap: 8px;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 15px; /* Space after notes if shown */
}
.order-note-label { /* Assuming a label like "Add a note:" */
  font-size: 14px;
  color: #1a1a1a;
  margin-bottom: 6px;
}
.order-note-input { /* Textarea */
  border: 1px solid #dfdfdf;
  border-radius: .3rem;
  width: 100%;
  min-height: 60px; /* Adjusted from 50px */
  margin-bottom: 0;
  padding: 8px 12px;
  font-size: 14px;
}

/* Responsive Adjustments - from valsole.css and snippet combined logic */

/* Medium screens / Tablets (matches 767px breakpoint from valsole.css) */
@media screen and (max-width: 767px) {
  /* Old .container-large.is-cart rule - Commented Out */
  /*
  .container-large.is-cart {
    max-width: 400px; 
  }
  */
  .cart-popup-closer { /* This was positioned relative to .container-large.is-cart, might need review */
    /* right: calc(400px + 15px); /* This logic is no longer valid */
    /* Adjust if its position relative to the new .cart-container isn't right */
  }
  /* ... other .cart-popup-closer responsive styles ... */

  .cart-container { /* Adjustments for the new .cart-container */
    max-width: 400px; 
    /* Consider if bottom: 5rem; right: 3rem; should change for tablets */
    /* Padding was already in the base .cart-container rule, review if it needs specific changes here */
  }
  /* ... other responsive styles for .cart-container children ... */
  .flexbox.is-horizontal.align-space-between.is-cart {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Small screens / Mobile (matches 479px breakpoint from valsole.css) */
  /* Old .container-large.is-cart rules - Commented Out */
  /*
  .container-large.is-cart {
    max-width: 100%; 
    width: 100%;     
    border-left: none;
    box-shadow: none;
  }
  .cart-popup.is-open .container-large.is-cart {
    transform: translateX(0%);
  }
  */

  .cart-popup-closer { /* Button to close full-screen cart */
    /* This was positioned relative to .container-large.is-cart */
    /* Now relative to .cart-container, which will be full screen. */
    top: 10px; 
    right: 10px; 
    /* ... other .cart-popup-closer mobile styles ... */
  }

  .cart-container {
    height: 80%;
    display: flex;
    flex-direction: column;
    transform: translate(0%);
    transition: transform .4s ease-in-out;
    pointer-events: auto;
    overflow-x: hidden;
    box-shadow: -2px 0 12px #00000014;.cart-container {
    height: auto;
    display: flex;
    flex-direction: column;
    transform: translate(0% 0%);
    transition: transform .4s ease-in-out;
    pointer-events: auto;
    overflow-x: hidden;
    box-shadow: -2px 0 12px #00000014;
    position: fixed;
    bottom: 5rem;
    right: 3rem;
    z-index: 9999;
    opacity: 1;
    width: 100%;
    max-width: 460px;
    background-color: #fff;
    /* padding: 2rem; */
    bottom: 3rem;
    right: 3rem;

    position: fixed;
    bottom: 5rem;
    right: 3rem;
    z-index: 9999;
    opacity: 1;
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    padding: 2rem;
    bottom: 3rem;
    right: 3rem;
}
}

/* Ensure cart form itself doesn't add unexpected margins or padding */
form.cart-form {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Take available height in .cart-container */
  width: 100%;
  overflow: hidden;
} 

/* Old rule for .container-large.is-cart at EOF - Commented Out */
/*
.container-large.is-cart {
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateX(100%); 
  transition: transform .4s ease-in-out;
  pointer-events: auto;
  overflow-y: hidden; 
  overflow-x: hidden; 
  box-shadow: -2px 0 12px rgba(0,0,0,0.08);
  position: fixed;
  top: 0;
  right: 0; 
  z-index: 9999;
  opacity: 1; 
  width: 100%; 
  max-width: 460px; 
}
*/

/* Old .cart-container rule at EOF (with fixed positioning, top: 10rem) - Commented Out */
/*
.cart-container {
  display: flex !important;
  position: fixed;
  right: 2rem;
  top: 10rem;
  max-height: 80%;
  transform: initial !important;
  overflow-y: auto;
}*/

/* Hot-fix: garantiza que el mensaje se oculte cuando no toca */

/* Ensure empty message is only visible when .sf-cart-empty is present */
.cart-empty-message:not(.sf-cart-empty){
  display:none !important;
}