:root {
    --ecom-color-1: #2A4D69;   /* Color principal */
    --ecom-color-2: #4B86B4;   /* Accent per enllaços i hover */
    --ecom-color-3: #ADCBE3;   /* Fons suaus o hover clar */
    --ecom-color-4: #F4F4F4;   /* Fons principal */
    --ecom-color-5: #1B1B1B;   /* Text base */
    --ecom-color-6: #5CB85C;   /* Color d'èxit */
    --ecom-color-7: #F6CF98;   /* Color d'avís */
    --ecom-color-8: #D9534F;   /* Color d'error */
    --ecom-color-9: #CCCCCC;   /* Separadors, borders, elements inactius */
    --ecom-color-10: #EEEEEE;  /* Igual que 9 pero mes clar */
    --ecom-color-11: #FFFFFF;
    --ecom-color-12: rgb(27, 27, 27, 0.75);   /* Text base */
    --ecom-color-13: #F59E0B;   /* Warning 1 */
    --ecom-color-14: #FEF3C7;   /* Warning 2 */
    --ecom-color-15: #92400e;   /* Warning 3 */
    --item-spacing-xs: 10px;
    --item-spacing-s: 15px;
    --item-spacing-m: 25px;
    --unit-price-font-size: 30px;
    --old-price-font-size: 16px;
    --cart-title-font-size: 20px;
    --small-text-font-size: 12px;
    --medium-text-font-size: 14px;
    --medium-large-text-font-size: 16px;
    --large-text-font-size: 20px;
    --extra-large-text-font-size: 20px;
    --section-border-radius-s: 10px;
    --section-border-radius-m: 15px;
    --section-border-radius-l: 25px;
  }
  
  /* ADD TO CART */
  .add-to-cart{margin-top: var(--item-spacing-s); margin-bottom: var(--item-spacing-s);}
  .add-to-cart--product-price{margin-bottom: var(--item-spacing-s); display: block;}
  .add-to-cart--unit-price{ display: inline-block; font-size: var(--unit-price-font-size); color: var(--ecom-color-2);}
  .add-to-cart--unit-price-old{ display: inline-block; font-size: var(--old-price-font-size);}
  .add-to-cart--unit-price + .add-to-cart--unit-price-old{margin-left: 10px;}
  .add-to-cart--unit-price span{}
  .add-to-cart--unit-price-old span{ text-decoration: line-through; opacity: 0.7;}
  .add-to-cart--reference{margin-bottom: var(--item-spacing-s);}
  .add-to-cart--quantity { display: flex; border-radius: var(--button-border-radius); background: var(--ecom-color-4); padding: 6px; align-items: center; width: fit-content; margin-bottom: var(--item-spacing-s); }
  .add-to-cart--quantity button { border-radius: 0; aspect-ratio: 1 / 1; width: 36px; height: 36px; background: transparent; color: var(--ecom-color-5); border: none; cursor: pointer; transition: all .3s ease-in-out; padding: 0; }
  .add-to-cart--quantity button:hover{ color: var(--ecom-color-2); }
  .add-to-cart--quantity button:disabled{ opacity: 0.5; }
  .add-to-cart--quantity-minus {}
  .add-to-cart--quantity-plus {}
  .add-to-cart--quantity-input { max-width: 100px; width: 100%; border: none; text-align: center; font-size: var(--content-p-font-size); height: 36px; padding: 0; background: transparent; }
  .add-to-cart--quantity-input { appearance: none; -moz-appearance: textfield; -webkit-appearance: none; -ms-appearance: none; }
  .add-to-cart--quantity-input::-webkit-inner-spin-button,.add-to-cart--quantity-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .add-to-cart--quantity-input[type=number] { -moz-appearance: textfield; }

  
  .add-to-cart--button-buy {}
  .add-to-cart--button-buy span{line-height: 1;}
  
  .add-to-cart--custom-text{margin-bottom: var(--item-spacing-s);}
  .custom-text--button{}
  .custom-text--button[aria-expanded="true"]{border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
  .custom-text--content { padding: 15px; border: var(--button-border-size) var(--button-border-type) var(--button-border-color); border-top: unset; border-radius: var(--button-border-radius); border-top-left-radius: 0; border-top-right-radius: 0; position: relative;}
  .custom-text--description{}
  .custom-text--character-limit{font-size: var(--small-text-font-size); opacity: 0.7;}
  .custom-text--input{margin-top: var(--item-spacing-s) !important; margin-bottom: var(--item-spacing-xs) !important; resize: none; height: unset !important; max-height: 100px; min-height: 40px; field-sizing: content;}
  .custom-text--input.limit-reached{background-color: rgb(249 201 201 / 50%);}
  
  .custom-text--remaining-characters{ font-size: var(--small-text-font-size); color: var(--ecom-color-5); }
  .custom-text--remaining-characters .count{}
  .custom-text--remaining-characters.limit-reached .count{color: var(--ecom-color-8);}

  .custom-text--tooltip-container{ position: absolute; top: 15px; right: 15px; }
  .custom-text--tooltip { position: relative; display: inline-block; cursor: help; color: var(--ecom-color-7); }
  /* Tooltip box */
  .custom-text--tooltip::after { content: attr(data-tooltip); position: absolute; top: -54px; text-align: center; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 0.4em 0.6em; border-radius: 4px; white-space: pre-line; font-size: 0.75rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 1000; width: 510px; }
  /* Tooltip arrow */
  .custom-text--tooltip::before { content: ''; position: absolute; top: -0.5em; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #333; opacity: 0; transition: opacity 0.2s; z-index: 999; }
  /* Show on hover */
  .custom-text--tooltip:hover::after, .custom-text--tooltip:hover::before { opacity: 1; }
  
  
  /* FLOATING CART */
  .cart-expander{}
  .cart-expander--button{ border: none; background-color: unset; }
  .cart-expander--button #cant_carrito { position: absolute; width: 14px; height: 14px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex ; align-items: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; right: -2px; bottom: -5px; background: var(--main-color-3); /* color: #fff; */ font-size: 10px; /* font-weight: 600; */ justify-content: center; }
  
  /* CARRITO */
  .off-canvas-area-wrapper { opacity: 0; visibility: hidden; pointer-events: none; position: fixed; top: 0; right: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; height: 100vh; width: 100vw; }
  .off-canvas-area-wrapper .off-canvas-content-wrap { margin-left: auto; height: 100%; position: relative; -webkit-transform: translateX(calc(100% + 40px)); -ms-transform: translateX(calc(100% + 40px)); transform: translateX(calc(100% + 40px)); -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; max-width: 450px; width: 100%; }
  .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content .off-canvas-item { margin-bottom: 60px; }
  .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content .off-canvas-item:last-child { margin-bottom: 0; }
  .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content .off-canvas-item h2 { line-height: 1; text-transform: uppercase; margin-bottom: 23px; margin-top: -2px; }
  .off-canvas-area-wrapper .off-canvas-content-wrap .btn-close {position: absolute;right: 100%;top: 100px;line-height: 40px;height: 40px;width: 40px;border: 0;}
  .off-canvas-area-wrapper.show { opacity: 1; visibility: visible; pointer-events: visible; z-index: 99999; }
  .off-canvas-area-wrapper.show .off-canvas-overlay { background-color: rgba(0, 0, 0, 0.5); content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; }
  .off-canvas-area-wrapper.show .off-canvas-content-wrap { -webkit-transform: none; -ms-transform: none; transform: none; }
  
  .cart-sidebar{}
  .cart-sidebar--title{ margin-bottom: var(--item-spacing-s); font-size: var(--content-h3-font-size);}
  .cart-sidebar--close { background-color: #fff; position: absolute; right: 100%; top: 100px; line-height: 40px; height: 40px; width: 40px; border: 0; background-color: #fff; transition: all 0.3s ease-in-out; display: flex; align-items: center; justify-content: center;}
  .cart-sidebar--close i{transition: all 0.3s ease-in-out;}
  .cart-sidebar--close:hover{}
  .cart-sidebar--close:hover i{}
  
  .cart-sidebar--container{ display: flex ; flex-direction: column; overflow-y: unset; padding: var(--item-spacing-s); height: 100%; background-color: #FFF; padding: 30px;}
  .cart-sidebar--products{ flex-grow: 1; display: flex ; flex-direction: column; overflow: hidden;}
  #floatcart{overflow-y: auto; overflow-x: hidden;}
  .cart-sidebar--products-list { height: 100%; list-style: none; padding: 0; margin: 0; }
  .cart-sidebar--product{}
  .cart-sidebar--product-count{margin-bottom: var(--item-spacing-s); padding-bottom: var(--item-spacing-s); border-bottom: 1px solid var(--ecom-color-9);}
  .cart-sidebar--product:not([id="clone-product-cart"]) + .cart-sidebar--product{margin-top: var(--item-spacing-s); padding-top: var(--item-spacing-s); border-top: 1px solid var(--ecom-color-10);}
  .product-item{position: relative;}
  .product-item--miniature{}
  .product-item--miniature a{}
  .product-item--miniature a img{ border-radius: var(--item-spacing-s); border: 1px solid var(--ecom-color-9); width: 100%; object-fit: contain; aspect-ratio: 3 / 4; padding: 3px; }
  .product-item--name{margin-bottom: var(--item-spacing-xs);}
  .product-item--name a{}
  .product-item--name a:hover{text-decoration: none; }
  .product-item--remove{ position: absolute; top: 25px; right: 3px; }
  .product-item--remove button { background: #fff; border: none; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.3);}
  .product-item--remove button i{transition: all 0.3s ease-in-out;}
  .product-item--remove button:hover i,
  .product-item--remove button:hover{}
  .product-item--quantity{margin-bottom: var(--item-spacing-xs);}
  .product-item--quantity span{background-color: var(--ecom-color-4); border-radius: 5px; padding: 2px 8px; font-size: var(--small-text-font-size);}
  .product-item--unit-price{ display: inline-block; font-size: var(--small-text-font-size);}
  .product-item--unit-price span{font-size: var(--small-text-font-size);}
  .product-item--unit-price-old{ display: inline-block; display: none; font-size: var(--small-text-font-size);}
  .product-item--unit-price-old span{font-size: var(--small-text-font-size);}
  .product-item--unit-price + .product-item--unit-price-old{margin-left: 10px;}
  .product-item--unit-price span{}
  .product-item--unit-price-old span{ text-decoration: line-through; opacity: 0.7; }
  
  .cart-sidebar--summary{padding-top: var(--item-spacing-s); margin-top: var(--item-spacing-s); border-top: 1px solid var(--ecom-color-9);}
  .cart-sidebar--price-taxes{display: flex; flex-direction: row; justify-content: space-between; padding-bottom: 15px;}
  .cart-sidebar--price-taxes p{margin-bottom: 0;}
  .cart-sidebar--checkout-buttons {display: flex; gap: 15px;}
  .cart-sidebar--checkout-buttons .btn{width: 100%; font-size: var(--medium-text-font-size);}
  
  .cart-sidebar--empty{display: none;}
  .cart-sidebar--empty-content .btn{margin: 0 auto !important;}
  .cart-sidebar--empty-title{text-align: center; margin-bottom: 15px; font-size: var(--cart-title-font-size);}
  .cart-sidebar--empty-text{margin-bottom: 15px; text-align: center;}
  .cart-sidebar--empty-icon{ border-radius: 50%; width: fit-content; overflow: hidden; margin: 0 auto 15px; }
  .cart-sidebar--empty-icon img{ height: 70px; width: auto; padding: 12px; background: var(--ecom-color-4); }
  
  .empty-cart .cart-sidebar--empty{display: block;}
  .empty-cart .cart-sidebar--products{display: none;}
  
  /* PROCESS PAGE */
  .process-page{padding-top: 0 !important;}
  .process-page--heading{ background-color: var(--ecom-color-4); padding: 50px !important; }
  .process-page--title{margin-bottom: 0; text-align: center;}
  
  /* CART PAGE */
  
  .cart-page--coupon{margin-bottom: var(--item-spacing-m);}
  .cart-page--coupon .form-group{position: relative;}
  .cart-page--coupon button{ position: absolute; top: 0; right: 0; height: 100%; border-top-left-radius:0; border-bottom-left-radius:0; border-top-right-radius: var(--form-input-border-radius); border-bottom-right-radius: var(--form-input-border-radius);}
  .cart-page--coupon input{ height: var(--form-input-height); border-radius: var(--form-input-border-radius); border: var(--form-input-border-size) var(--form-input-border-type) var(--form-input-border-color); background: var(--form-input-bg); color: var(--form-input-color); font-size: var(--form-input-font-size); margin-top: var(--form-input-margin-top); margin-bottom: var(--form-input-margin-bottom); margin-left: var(--form-input-margin-left); margin-right: var(--form-input-margin-right); padding-top: var(--form-input-padding-top); padding-bottom: var(--form-input-padding-bottom); padding-left: var(--form-input-padding-left); padding-right: var(--form-input-padding-right); }
  
  .cart-page--navigation .navigation-buttons{display: flex; justify-content: end; gap: 15px;}
  
  .empty-cart-page--empty{display: none;}
  .empty-cart-page--empty-content .btn{margin: 0 auto !important;}
  .empty-cart-page--empty-title{text-align: center; margin-bottom: 15px; font-size: var(--cart-title-font-size);}
  .empty-cart-page--empty-text{margin-bottom: 15px; text-align: center;}
  .empty-cart-page--empty-icon{ border-radius: 50%; width: fit-content; overflow: hidden; /* padding: 5px; */ margin: 0 auto 15px; }
  .empty-cart-page--empty-icon img{ height: 70px; width: auto; padding: 12px; background: var(--ecom-color-4); }

  .message-container.warning { border-left: 3px solid var(--ecom-color-13); background-color: var(--ecom-color-14); color: var(--ecom-color-15); padding: 15px 20px 15px 40px; border-top-right-radius: var(--section-border-radius-s); border-bottom-right-radius: var(--section-border-radius-s); margin-bottom: var(--item-spacing-m); position: relative; }
  .message-container.warning::before { content: "\f071"; font-family: "FontAwesome"; position: absolute; left: 13px; top: 25px; font-size: 16px; }
  .message-title { font-size: var(--medium-text-font-size); margin-bottom: 5px; font-weight: var(--text-bold); }
  .message-text { font-size: var(--small-text-font-size); margin-bottom: 0; font-weight: var(--text-light); }


  .cart-page--aditional-notice-container{margin-bottom: var(--item-spacing-m);}
  /* .aditional-notice--button{background: var(--ecom-color-3) !important; border-color: var(--ecom-color-3) !important;} */
  .aditional-notice--button[aria-expanded="true"]{border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
  .aditional-notice--content { padding: 15px; border: var(--button-border-size) var(--button-border-type) var(--button-border-color); border-top: unset; border-radius: var(--button-border-radius); border-top-left-radius: 0; border-top-right-radius: 0; position: relative;}
  .aditional-notice--description{}
  .aditional-notice--input{margin-top: var(--item-spacing-s) !important; resize: none; height: unset !important; max-height: 300px; min-height: 200px; field-sizing: content;}

  .cart-page--information{background: var(--ecom-color-4); padding: 15px; border-radius: var(--section-border-radius-l);}
  
  /* CART TABLE */
  .cart-table{border: none;}
  .cart-table tbody tr td { vertical-align: middle; color: var(--ecom-color-5);}
  .cart-table--head-item{padding: 0 10px 10px !important; color: var(--ecom-color-5); border-right: none !important; font-size: var(--medium-large-text-font-size);}
  .cart-table--head-total-price{text-align: right;}
  .cart-table--head-unit-price{min-width: 150px; text-align: center;}
  .cart-table--head-quantity{width: 170px; text-align: center;}
  .cart-table--head-title{min-width: 400px;}
  .cart-table--item{}
  .cart-table--item td{border-right: 0 !important; padding: 10px !important;}
  .table-item--miniature{}
  .table-item--miniature img { width: 100%; /* object-fit: contain; */ /* aspect-ratio: 3 / 4; */ max-width: 80px; }
  .table-item--title{text-align: left !important; }
  .table-item--title a{color: var(--ecom-color-5);}
  .table-item--title a:hover{color: var(--ecom-color-2); text-decoration: none;}
  .table-item--unit-price{text-align: center;}

  .item--quantity { display: flex; border-radius: var(--button-border-radius); background: var(--ecom-color-4); padding: 6px; align-items: center; width: fit-content;}
  .item--quantity-delete , .item--quantity button { border-radius: 0; aspect-ratio: 1 / 1; width: 36px; height: 36px; background: transparent; color: var(--ecom-color-5); border: none; cursor: pointer; transition: all .3s ease-in-out; padding: 0; }
  .item--quantity-delete:hover, .item--quantity button:hover{ color: var(--ecom-color-2); }
  .item--quantity-delete:disabled, .item--quantity button:disabled{ opacity: 0.5; }
  .item--quantity-minus {}
  .item--quantity-plus {}
  .item--quantity-input { max-width: 100px; width: 100%; border: none; text-align: center; font-size: var(--content-p-font-size); height: 36px; padding: 0; background: transparent; }
  .item--quantity-input { appearance: none; -moz-appearance: textfield; -webkit-appearance: none; -ms-appearance: none; }
  .item--quantity-input::-webkit-inner-spin-button,.item--quantity-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  .item--quantity-input[type=number] { -moz-appearance: textfield; }

  .table-item--units{text-align: center; margin-top: 10px; display: none;}
  .table-item--delete{text-align: center;}
  .table-item--delete button{ margin: 0 auto; border: none; background: unset; /* font-size: 18px; */ text-align: center; transition: all 0.3s ease-in-out;}
  .table-item--delete button:hover{/* color: var(--main-color-2); */}
  .table-item--item-total-price{}
  .table-item--total-price{text-align: right;}

  .table-item--item{}
  .item--wrapper{display: flex ; align-items: start; gap: 15px; }
  .item--miniature{}
  .item--miniature img{height: 100px; width: 100px; object-fit: cover; object-position: center;}
  .item--title{font-size: var(--medium-text-font-size);}
  .item--title span{font-size: var(--medium-text-font-size);}
  .item--custom-text{font-size: var(--small-text-font-size); font-weight: 600; margin-bottom: 4px;}
  .item--custom-text span{font-weight: normal; display: block;}
  .item--variations .variation-item--table .variation-item--name{font-size: var(--small-text-font-size); font-weight: 600; margin-bottom: 4px;}
  .item--variations .variation-item--table .variation-item--name span{font-weight: normal;font-size: var(--small-text-font-size);}
  
  tfoot td{padding: 10px !important; border-right: 0 !important;}
  td.label{text-align: right;}
  td.quantity{text-align: right;}

  .cart-table--total-price-products{}
  .cart-table--total-price{}
  .cart-table--total-shipping{}
  .cart-table--coupons{}
  .cart-table--delete-coupon{}

  #delete-coupon { border-radius: 0; width: 36px; background: transparent; color: var(--ecom-color-5); border: none; cursor: pointer; transition: all .3s ease-in-out; padding: 0; }
  #delete-coupon:hover{ color: var(--ecom-color-2); }
  #delete-coupon:disabled{ opacity: 0.5; }
  
  /* DIRECCIONES */
  .address-item--actions{ position: absolute; top: 15px; right: 30px; gap: 5px; display: flex; }
  .address-item--content p{margin: 0;}
  .address-item--actions .btn{ padding: 5px; border-radius: 5px; }
  
  #address-form .form-group{margin-bottom: 10px;}
  #address-form .form-group select,
  #address-form .form-group input{ height: var(--form-input-height); border-radius: var(--form-input-border-radius) !important; border: var(--form-input-border-size) var(--form-input-border-type) var(--form-input-border-color); background: var(--form-input-bg); color: var(--form-input-color); font-size: var(--form-input-font-size); margin-top: 10px; margin-bottom: var(--form-input-margin-bottom); margin-left: var(--form-input-margin-left); margin-right: var(--form-input-margin-right); padding-top: var(--form-input-padding-top); padding-bottom: var(--form-input-padding-bottom); padding-left: var(--form-input-padding-left); padding-right: var(--form-input-padding-right); } 
  
  .order-table{border: none !important;}
  .order-table #headertable th{border-right: none; border-bottom: 1px solid #eee;}
  .order-table tbody td{border-bottom: 0 !important;}
  .order-table tbody tr:nth-of-type(odd){background-color: #fefefe;}
  .dataTables_length select, .dataTables_filter input{ height:30px; border-radius: var(--form-input-border-radius) !important; border: var(--form-input-border-size) var(--form-input-border-type) var(--form-input-border-color); background: var(--form-input-bg); color: var(--form-input-color); font-size: var(--form-input-font-size); margin-bottom: var(--form-input-margin-bottom); margin-left: var(--form-input-margin-left); margin-right: var(--form-input-margin-right); padding-top: var(--form-input-padding-top); padding-bottom: var(--form-input-padding-bottom); padding-left: var(--form-input-padding-left); padding-right: var(--form-input-padding-right); } 
  .dataTables_length select{margin-left: 5px; margin-right: 5px;}
 
  
  /* VARIACIONES / VARIACIONS */
  
  .variations{margin-bottom: var(--item-spacing-m);}
  .variations .variation-item + .variation-item{margin-top: var(--item-spacing-m);}
  .variations .variation-item .variation-item--name{}
  .variations .variation-item .variation-item--name span{font-weight: 600;}
  .variations .variation-item .options{ display: flex; column-gap: 10px; }
  .variations .variation-item .options .option-button{background: transparent; transition: all 0.3s ease-in-out;}
  .variations .variation-item .options .option-button{ height: 35px; width: 35px; padding: 5px; border: 1px solid #ccc; position: relative; color: #000; place-items: center;}
  .variations .variation-item .options .option-button:hover,
  .variations .variation-item .options .option-button.active { border-color: #000; color: #000; }
  .variations .variation-item .options .option-button .option-button--miniature,
  .variations .variation-item .options .option-button .option-button--miniature {transition: all 0.3s ease-in-out;}
  .variations .variation-item .options .option-button:hover .option-button--miniature,
  .variations .variation-item .options .option-button.active .option-button--miniature {transform: scale(0.9);}
  .variations .variation-item .options .option-button:hover,
  .variations .variation-item .options .option-button.active{box-shadow: 0 3px 5px rgba(0,0,0,0.3);}
  
  .variations .variation-item .options .option-button[data-attribute="Talla"]{ border-radius: 50%; aspect-ratio: 1/1; }
  
  .variations .variation-item .options .option-button[data-attribute="Acabado"]{ display: block; aspect-ratio: 1 / 1; border-radius: 50%; position: relative;}
  .variations .variation-item .options .option-button[data-attribute="Acabado"] .option-button--label { background: #333; color: #fff; padding: 3px; border-radius: 3px; position: absolute; transform: translateY(15px); top: 100%; opacity: 0; transition: all 0.3s ease-in-out; pointer-events: none; font-size: var(--small-text-font-size); left: -10px; right: -10px; }
  .variations .variation-item .options .option-button[data-attribute="Acabado"] .option-button--label::after { content: ""; display: block; width: 5px; height: 5px; background-color: #333; transform: rotate(45deg); position: absolute; top: -3px; left: 0; right: 0; margin: 0 auto; }
  .variations .variation-item .options .option-button[data-attribute="Acabado"]:hover .option-button--label { transform: translateY(5px); opacity: 1; }
  
  .variations .variation-item .options .option-button[data-attribute="Acabado"] .option-button--miniature { content: ""; display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; border-radius: 50%; position: relative; pointer-events: none; }
  .variations .variation-item .options .option-button[data-attribute="Acabado"] .option-button--miniature::after{ border-radius: 50%; background: linear-gradient(135deg, #fff 0, rgba(0, 0, 0, 0.25) 17%, #fff 26%, #fff 39%, rgba(0, 0, 0, 0.25) 53%, #fff 61%, rgba(0, 0, 0, 0.25) 71%, #fff 84%, #fff 93%, rgba(0, 0, 0, 0.25) 100%); content: ""; display: block; width: 100%; aspect-ratio: 1/1; position: absolute; top: 0; left: 0; opacity: 0.3; }
  .variations .variation-item .options .option-button[data-attribute="Acabado"][data-id="26"] .option-button--miniature{background: #d4d3d2;}
  .variations .variation-item .options .option-button[data-attribute="Acabado"][data-id="25"] .option-button--miniature{background: #e4cc8c;}
  .variations .variation-item .options .option-button[data-attribute="Acabado"][data-id="24"] .option-button--miniature{background: #efd0bb;}
  
  /* VARIACIONS LLISTAT */
  .item .variations .variation-item .options .option-button{ height: 30px; }
  .item .variations .variation-item .options .option-button[data-attribute="Acabado"]{ width: 20px; height: 20px; }  
  
  [class^="state-"]{ padding: 5px; border-radius: 7px; font-size: 12px; }
  
  .state-1{background-color: #28a745; color: #fff}
  .state-2{background-color: #007bff; color: #fff}
  .state-3{background-color: #dc3545; color: #fff}
  .state-4{background-color: #6c757d; color: #fff}
  .state-5{background-color: #17a2b8; color: #fff;}
  .state-6{background-color: #ffc107; color: #fff}
  .state-7{background-color: #fd7e14; color: #fff}
  .state-8{background-color: #343a40; color: #fff;}
  .state-9{background-color: #6f42c1; color: #fff}
  
  #intranet label input,
  #intranet label select{margin-top: 5px;}
  
  /* PAGO REDSYS */
  #insite-payment h2 { font-size: var(--medium-text-font-size); padding: var(--item-spacing-xs); background-color: var(--ecom-color-8); color: var(--ecom-color-11); border-radius: var(--section-border-radius-s); display: block; text-align: center; }
  
  /* CHECKOUT OK */
  .checkout-ok--title{margin-bottom: var(--item-spacing-s);}
  .checkout-ok--text{margin-bottom: var(--item-spacing-m);}
  .checkout-ok--image {margin-bottom: var(--item-spacing-m);}
  .checkout-ok--image > div{ border-radius: 50%; width: fit-content; overflow: hidden; /* padding: 5px; */ margin: 0 auto 15px; }
  .checkout-ok--image img{ height: 120px; width: auto; padding: 20px; background: var(--ecom-color-4);}

  .checkout-ok--summary{padding: var(--item-spacing-s); background-color: var(--ecom-color-4); border-radius: var(--section-border-radius-s); margin-bottom: var(--item-spacing-m);}
  .checkout-ok--summary-title{margin-bottom: var(--item-spacing-s);}
  .checkout-ok--summary-info{}
  .checkout-ok--summary-info{}
  .summary-info--item{display: flex; justify-content: space-between; font-size: var(--medium-text-font-size);}
  
  .checkout-ok--payment-summary{margin-bottom: var(--item-spacing-m);}
  .info-products--items { display: flex; list-style: none; flex-direction: column; justify-content: stretch; padding: 0; gap: 15px; margin-bottom: var(--item-spacing-m); padding-bottom: var(--item-spacing-m); border-bottom: 1px solid var(--ecom-color-10);}
  .info-products--item { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 15px;}
  .product-info--container{display: flex; flex-direction: row; align-items: center; gap: 15px;}
  .product-info--info{display: flex; flex-direction: column;}
  .product-info--description{display: block; font-size: var(--medium-large-text-font-size);}
  .product-info--quantity{display: block; font-size: var(--medium-text-font-size); color: var(--ecom-color-12);}
  .product-info--miniature img{width: 75px; height: auto; border-radius: var(--section-border-radius-s);}

  .product-info--reference{display: none;}

  .order-summary--title{font-size: var(--medium-large-text-font-size);}

  .checkout-ok--order-status{ margin-top: var(--item-spacing-s); padding-top: var(--item-spacing-s); border-top: 1px solid var(--ecom-color-11); }
  .order-status--header{margin-bottom: var(--item-spacing-s); display: none;}
  .order-status--content p{font-size: var(--medium-text-font-size);}
  .order-status--content a{color: var(--ecom-color-2);}
  
  /* CHECKOUT REFUSE */
  .checkout-refuse--image > div{ border-radius: 50%; width: fit-content; overflow: hidden; /* padding: 5px; */ margin: 0 auto 15px; }
  .checkout-refuse--image img{    height: 120px; width: auto; padding: 20px; background: var(--ecom-color-4);}
  
  /* ORDER STEPS */
  #steps-container { text-align: center; margin-bottom: 30px; display: none;}
  .steps { display: flex; justify-content: center; column-gap: 25px; }
  .steps-title{margin-bottom: 20px;}
  .step-item { width: 50px; height: 50px; background: var(--ecom-color-3); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; transition: all 0.3s ease 0.5s; font-size: 18px;}
  .step-item.no-delay {transition: all 0.3s ease 0s !important; }
  .step-item .bar{ width: 25px; position: absolute; top: 0; bottom: 0; margin: auto; height: 5px; left: 100%; background: var(--ecom-color-3); overflow: hidden; }
  .step-item .bar::after{ content: ""; display: block; width: 25px; height: 5px; background: var(--ecom-color-1); transform: translateX(-25px); pointer-events: none; transition: transform 0.5s ease-in-out; }
  .step-item.bar-delay .bar::after{transition: transform 0.5s ease-in-out 0.3s;}
  .step-item.done .bar::after{ transform: none; }
  .step-item.done { background: var(--ecom-color-1); }
  .step-item.now { background: var(--ecom-color-1);}
  .step-item.next { background: var(--ecom-color-3); }
  .step-item.done::after { background: var(--ecom-color-1); }
  .step-item.now::after { background: var(--ecom-color-1); }
  .step-item:last-child::after { content: none; }


  /* ORDER PAGE */
  .checkout-tabs{}
  .checkout-tabs .nav-tabs{}
  .checkout-tabs .nav-item{ margin: 0; }
  .checkout-tabs .nav-link{ margin: 0; border: none; background: none; color: var(--ecom-color-12); padding: var(--item-spacing-xs) var(--item-spacing-m); border-bottom: 2px solid #fff; }
  .checkout-tabs .nav-link.active{ border-color: var(--ecom-color-5); color: var(--ecom-color-5); }

  .ecommerce-tab-content>.tab-pane { display: none; }
  .ecommerce-tab-content>.active { display: block; }

  .tab-pane--header{ padding: var(--item-spacing-m) var(--item-spacing-m) var(--item-spacing-s); display: block; }
  .tab-pane--title{ font-size: var(--extra-large-text-font-size);}
  .tab-pane--title + .tab-pane--text{ margin-top: var(--item-spacing-s);}
  .tab-pane--text{ font-size: var(--medium-text-font-size);}
  .tab-pane--content{ padding: var(--item-spacing-s) var(--item-spacing-m); }
  .tab-pane--navigation{ display: flex; justify-content: end; gap: 15px; padding: 0 var(--item-spacing-m) var(--item-spacing-s); }

  .navigation--line{display: flex; width: 100%; align-items: center; position: relative; justify-content: center; color: var(--ecom-color-9); margin: var(--item-spacing-s) 0; z-index: 2;}
  .navigation--line span { background-color: var(--ecom-color-4); width: 20px; height: 20px; display: flex ; align-items: center; justify-content: center; z-index: 1; }
  .navigation--line::after{content: ""; width: 100%; height: 1px; background-color: var(--ecom-color-9); position: absolute; left: 0; right: 0; z-index: 0;}

  .register-guest--section{ padding: var(--item-spacing-m); background-color: var(--ecom-color-4); border-radius: var(--section-border-radius-s); }
  .register--title{margin-bottom: var(--item-spacing-s); font-size: var(--large-text-font-size);}
  .register--content{margin-bottom: var(--item-spacing-m); font-size: var(--medium-text-font-size);}

  .login--title{margin-bottom: var(--item-spacing-m); font-size: var(--large-text-font-size);}
  .login--navigation {margin-top: var(--item-spacing-m);}
  .login--navigation p{font-size: var(--medium-text-font-size);}
  .login--navigation p a{color: var(--ecom-color-2);}

  .login--group{margin-bottom: var(--item-spacing-s);}
  .input-icon-group{position: relative; display: flex; align-items: center;}
  .input-icon-group input{padding-left: 40px;}
  .input-icon-group .icon{position: absolute; left: 15px; /* top: 0; bottom: 0; margin: auto; */}
  .toggle-input-type .toggle-password{position: absolute; right: 15px; /* top: 0; bottom: 0; margin: auto; */ cursor: pointer;}
  .toggle-input-type{display: flex; align-items: center; position: relative;}

  

  /* DIRECCIONES */
  .addresses{margin-bottom: var(--item-spacing-m);}
  .address--header{/*  display: flex; justify-content: space-between; flex-wrap: wrap;  */ margin-bottom: var(--item-spacing-m);}
  .address--title{font-size: var(--large-text-font-size);}
  .address--title + .address--content{margin-top: var(--item-spacing-s);}
  .address--content + .address--content{margin-top: var(--item-spacing-s);}
  .address--content{font-size: var(--medium-text-font-size);}
  .address--list{ display: flex; flex-wrap: wrap; gap: 15px; }

  #personal-form .form-group{margin-bottom: var(--item-spacing-s);}
  /* #div-invoice {padding-top: 100px; margin-top: -100px;} */

  .invoice-address--checkbox{margin: 0 0 var(--item-spacing-m); cursor: pointer;}
  .invoice-address--checkbox input{margin-right: 5px; cursor: pointer; }
  .invoice-address--checkbox label{font-size: var(--medium-text-font-size); cursor: pointer; }

  /* TRANSPORTE */
  #shipment-template{display: none; opacity: 0; visibility: hidden; pointer-events: none;}
  
 .shipment-list {display: flex;gap: 15px;margin-bottom: var(--item-spacing-m);flex-wrap: wrap;}

 .shipment-item {max-width: calc(33.3333% - 10px); flex: 0 0 calc(33.3333% - 10px);}

 .shipment-item label{border-radius: var(--section-border-radius-s);border: 1px solid var(--ecom-color-9);padding: var(--item-spacing-s);transition: all 0.3s ease-in-out;}
 .shipment-item label{display: flex;justify-content: space-between;align-items: start;margin: 0; cursor: pointer;}
 .shipment-item input{display: none;}
 .shipment-item--info{}
 .shipment-item--title{}
 .shipment-item--text{ font-size: var(--medium-text-font-size); }
 .shipment-item--text:not(:empty){margin-top: var(--item-spacing-xs);}
 .shipment-item--check-container{ display: flex; align-items: center; gap: 15px; }
 .shipment-item--price{}
 .shipment-item--check{border-radius: 50%;border: 1px solid var(--ecom-color-9);aspect-ratio: 1/1;width: 15px;height: 15px;display: flex;align-items: center;justify-content: center;}
 .shipment-item--check i{opacity: 0; transition: all 0.3s ease-in-out; color: var(--ecom-color-2); font-size: var(--large-text-font-size);}
 .shipment-item label:has(input:checked) i {opacity: 1;}
 .shipment-item label:hover {background-color: var(--ecom-color-4);}
 .shipment-item label:has(input:checked) { background-color: var(--ecom-color-4); border-color:var(--ecom-color-2); }
 
 .distributor-list{}
 .distributor-item{}
 .distributor-item.active{border-color: var(--ecom-color-2); background-color: var(--ecom-color-4);}
 .distributor-item--title{font-size: var(--medium-large-text-font-size);}
 .distributor-item--content{font-size: var(--small-text-font-size);}

  #pickup-map-container{margin-bottom: var(--item-spacing-m);}  
  .pickup-map-container--text{margin-bottom: var(--item-spacing-s);}  
  

  .order-summary{}
  .order-summary--header{margin-bottom: var(--item-spacing-m);}
  .order-summary--title{font-size: var(--medium-large-text-font-size); margin-bottom: var(--item-spacing-s);}
  .order-summary--text{font-size: var(--medium-text-font-size);}
  .summary-item{font-size: var(--medium-text-font-size); display: flex; justify-content: space-between;}
  .summary-item--discount{color: var(--ecom-color-6);}
  .summary-item--total{font-weight: bold;}
  .summary-item-content{}

  .payment{}
  .payment--header{margin-bottom: var(--item-spacing-m);}
  .payment--title{font-size: var(--medium-large-text-font-size); margin-bottom: var(--item-spacing-s);}
  .payment--text{font-size: var(--medium-text-font-size);}
  .payment-method--list{display: flex; gap: 15px; margin-bottom: var(--item-spacing-m); flex-wrap: wrap; flex-direction: column;}
  .payment-item{font-size: var(--medium-text-font-size);}
  .payment-item .btn{margin-bottom: 0;}

  .payment-item { display: flex; align-items: center; padding: var(--item-spacing-s); border: 1px solid var(--ecom-color-9); border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease-in-out;}
  .payment-item input {display: none;}
  .payment-item img { margin-right: var(--item-spacing-s); }
  .payment-item .label-text { color: var(--ecom-color-5); font-weight: 500; }
  .payment-item .icon { margin-left: auto; color: var(--ecom-color-2); display: none; font-size: var(--large-text-font-size); transition: all 0.3s ease-in-out;}
  .payment-item:hover {background-color: var(--ecom-color-10);}
  .payment-item:has(input:checked) { background-color: var(--ecom-color-10); border-color:    var(--ecom-color-2); }
  .payment-item:has(input:checked) .icon { display: inline-block; }

  .order-notice{}
  .order-notice--button{ font-size: var(--medium-text-font-size); border: none; background-color: transparent; padding: 0; }

  #accept{font-size: var(--medium-text-font-size);}

    /* ORDERS PAGE */
  
  .order-table{border: none !important;}
  .order-table #headertable th{border-right: none; border-bottom: 1px solid #eee;}
  .order-table tbody td{border-bottom: 0 !important;}
  .dataTables_length select, .dataTables_filter input{ height:30px; border-radius: var(--form-input-border-radius) !important; border: var(--form-input-border-size) var(--form-input-border-type) var(--form-input-border-color); background: var(--form-input-bg); color: var(--form-input-color); font-size: var(--form-input-font-size); margin-bottom: var(--form-input-margin-bottom); margin-left: var(--form-input-margin-left); margin-right: var(--form-input-margin-right); padding-top: var(--form-input-padding-top); padding-bottom: var(--form-input-padding-bottom); padding-left: var(--form-input-padding-left); padding-right: var(--form-input-padding-right); } 
  .dataTables_length select{margin-left: 5px; margin-right: 5px;}
  .orders-table .btn{ font-size: 12px; padding: 10px 15px;}
  .orders-table tr td{vertical-align: middle; border: none;}
  
  .dataTables_wrapper .dataTables_paginate{}
  .dataTables_wrapper .dataTables_paginate span{}
  .dataTables_wrapper .dataTables_paginate span .paginate_button,
  .dataTables_wrapper .dataTables_paginate .paginate_button{border: none !important; color: #fff !important; background: var(--main-color-2) !important;}
  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate span .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate span .paginate_button:hover,
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover{background: var(--main-color-3) !important; color: #fff !important;}
  .dataTables_wrapper .dataTables_paginate .paginate_button.current{}
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{}
  .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
  .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover{color: #333 !important;}
  .dataTables_wrapper .dataTables_paginate .paginate_button.previous{background: transparent !important; color: #333 !important;}
  .dataTables_wrapper .dataTables_paginate .paginate_button.next{background: transparent !important; color: #333 !important;}

  .intranet--sending-addresses{margin-bottom: 30px;}
  .intranet--invoice-addresses{margin-bottom: 30px;}
  
  .orders-table table{margin-bottom: 15px;}
  .orders-table input,
  .orders-table select{height: 40px;}
  .order-table tbody tr:nth-of-type(odd){background-color: #f4f4f4;}
  .order-item--status{border-radius: 5px; padding: 3px; color: #fff; font-size: 10px;}
  .order-item--actions{display: flex; place-content: center; gap: 15px;}
  
  #linetable-clone{display: none;}
  #table-details{border: none;}
  #table-details #headertable th{border-right: none;}
  #table-details #order-details td{border-right: none;}
  #modal-order-details .modal-body{min-height: unset !important;}

@media only screen and (max-width: 1200px){
    .cart-page--table-container{margin-bottom: var(--item-spacing-m);}
}

@media only screen and (min-width: 991px) {
    .login-register--line-between{position: relative;}
    .login-register--line-between > .row > div:first-child{padding-right: 30px;}
    .login-register--line-between > .row > div:last-child{padding-left: 30px;}
    /* .login-register--line-between::after{content: ""; height: 100%; width: 1px; background-color: var(--ecom-color-9); position: absolute; left: 0; right: 0; margin: auto; top:0;} */

    .process-page--line-between{position: relative;}
    .process-page--line-between > div:first-child{padding-right: 30px;}
    .process-page--line-between > div:last-child{padding-left: 30px;}
    .process-page--line-between::after{content: ""; height: 100%; width: 1px; background-color: var(--ecom-color-9); position: absolute; left: 0; right: 0; margin: auto; top:0;}
}



@media only screen and (max-width: 991px) {
    .cart-table thead{display: none;}
    .cart-table , .cart-table tbody, .cart-table--item{display: block;}
    .cart-table--item {margin-bottom: 25px; border: 1px solid #eee;}
    .cart-table--item td{display: block; text-align: right !important;}
    .cart-table--item td:last-child{border-bottom: none;}
    .cart-table--item td::before{ content: attr(data-label); float: left; /* font-weight: bold; */ }
    .table-item--title a{width: 80%; margin-left: auto; display: block;}
    .item--quantity{ max-width: 150px; margin-left: auto; }

    tfoot { display: block; border: 1px solid #eee; }
    tfoot tr{ width: 100%; display: flex ; justify-content: space-between; border-bottom: 1px solid #eee; }
    tfoot tr:last-child{border-bottom: none;}
    tfoot tr td{border-bottom: 0 !important;}

    .shipment-item {max-width: calc(50% - (15px / 2)); flex: 0 0 calc(50% - (15px / 2));}

    .checkout-tabs .nav-link{font-size: var(--small-text-font-size); padding: var(--item-spacing-xs);}
    .tab-pane--header { padding: var(--item-spacing-s) var(--item-spacing-s) var(--item-spacing-xs); }
    .tab-pane--content { padding: var(--item-spacing-xs) var(--item-spacing-s); }
}

@media only screen and (max-width: 575.98px) {
    .off-canvas-area-wrapper .off-canvas-content-wrap {max-width: calc(100% - 45px) ;}
    .off-canvas-area-wrapper .off-canvas-content-wrap .off-canvas-content { padding: 30px 15px; }
    .shipment-item {max-width: 100%; flex: 0 0 100%;}
}
#modal-order-details .modal-dialog{max-width: 1000px;}
#modal-order-details .modal-dialog tbody td[data-name="miniature"] img{width: 70px;}
#modal-order-details .modal-dialog .product-variation--item{font-size: var(--small-text-font-size); margin-bottom: 4px;}