:root { --ecom-color-1: #000000; /* Color principal */ --ecom-color-2: #333333; /* Accent per enllaços i hover */ --ecom-color-3: #666666; /* Fons suaus o hover clar */ --ecom-color-4: #F4F4F4; /* Fons principal */ --ecom-color-5: #000000; /* 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: 18px; --old-price-font-size: 14px; --cart-title-font-size: 20px; --small-text-font-size: 12px; --medium-text-font-size: var(--content-p-font-size); --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; --text-light: 300; --text-normal: 400; --text-bold: 500; } textarea, textarea.form-control{field-sizing: content;font-size: 12px;} .modal-footer { padding: 0 20px 20px;} /* ADD TO CART */ .add-to-cart{margin-top: var(--item-spacing-s); margin-bottom: var(--item-spacing-m);} .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{font-weight: 500;} .add-to-cart--unit-price-old span{ text-decoration: line-through; opacity: 0.7;} .add-to-cart--reference{margin-bottom: var(--item-spacing-s); display:none;} .add-to-cart--quantity { display: flex; border-radius: var(--section-border-radius-s); 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-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 {margin-bottom: var(--item-spacing-s);} .add-to-cart--button-buy span{line-height: 1; display: none;} .add-to-cart--custom-text{/* margin-bottom: var(--item-spacing-s); */} .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: 0; position: relative;} .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: 90px; 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.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; } .add-to-cart--warning-box .add-to-cart--warning{margin-bottom: var(--item-spacing-s) !important;} .add-to-cart--warning-box .add-to-cart--warning p{margin-bottom: 0;} .add-to-cart--warning-box p{font-size: var(--small-text-font-size); margin-bottom: 0; text-align: center;} .product-buttons {display: flex; /* gap: 5px; */} .product-buttons .add-to-cart--button-buy{flex-grow: 1;} .product-buttons .add-to-favourite-button { flex-grow: 0; width: 31px !important; height: 46px !important; aspect-ratio: 1; margin-bottom: var(--item-spacing-s); } /* FLOATING CART */ .cart-expander--button{ border: none; background-color: unset; position: relative; padding: 1px 4px !important;} .cart-expander--button #cant_carrito:not(:empty) { 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: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; border-radius: 100px; right: -2px; top: -5px; background: var(--main-color-3); color: #000000; font-size: 10px; font-weight: 600; justify-content: center; } /* CARRITO */ .off-canvas-area-wrapper:not(.filter-canvas) { 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: 100dvh; width: 100vw; } .off-canvas-area-wrapper:not(.filter-canvas) .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%; } @media only screen and (max-width: 575.98px) { .off-canvas-area-wrapper:not(.filter-canvas) .off-canvas-content-wrap{ max-width: calc(100% - 45px) ; } } .off-canvas-area-wrapper:not(.filter-canvas) .off-canvas-content-wrap .off-canvas-content{ padding: 10px 20px 20px; height: 100%; overflow-y: auto; } #product-info .off-canvas-content-wrap .off-canvas-content{ padding: 25px 50px; height: 100%; overflow-y: scroll; } #product-info .off-canvas-content-wrap {max-width: 900px; width: calc(100% - 55px);} @media only screen and (max-width: 575.98px) { .off-canvas-area-wrapper:not(.filter-canvas) .off-canvas-content-wrap .off-canvas-content{ padding: 30px 15px; } } .off-canvas-area-wrapper:not(.filter-canvas) .off-canvas-content-wrap .off-canvas-content .off-canvas-item { margin-bottom: 60px; } .off-canvas-area-wrapper:not(.filter-canvas) .off-canvas-content-wrap .off-canvas-content .off-canvas-item:last-child{ margin-bottom: 0; } .off-canvas-area-wrapper:not(.filter-canvas) .off-canvas-content-wrap .off-canvas-content .off-canvas-item h2{ font-size: 16px; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 23px; margin-top: -2px; } .off-canvas-area-wrapper:not(.filter-canvas) .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:not(.filter-canvas).show{ opacity: 1; visibility: visible; pointer-events: visible; z-index: 99999; } .off-canvas-area-wrapper:not(.filter-canvas).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:not(.filter-canvas).show .off-canvas-content-wrap{ -webkit-transform: none; -ms-transform: none; transform: none; } .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--container{ display: flex ; flex-direction: column; overflow-y: unset; padding: var(--item-spacing-s); height: 100%; background-color: #FFF; padding: 30px;} #floatingcart-content{ flex-grow: 1; display: flex; flex-direction: column; min-height: 0; } .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[data-item-id="457"]{display: none;} .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 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:hover{text-decoration: none; } .product-item--remove{ position: absolute; top: 25px; right: 3px; } .product-item--remove button { background: #fff; border: none; border-radius: 100px; 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--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-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; flex-wrap: wrap;} .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; display: none;} .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: 100px; 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); background-color: #fff;} .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: 100px; 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); border-right: 3px solid var(--ecom-color-13); background-color: var(--ecom-color-14); */color: var(--ecom-color-15); padding: 15px 20px 15px 20px; /* 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); text-align: center;} .cart-page--aditional-notice-container{margin-bottom: var(--item-spacing-m);} td:has(.cart-page--packaging-container){width: 100%;} .cart-page--packaging-container{ background: var(--ecom-color-4); padding: var(--item-spacing-s); /* border-radius: var(--section-border-radius-s); */} .cart-page--packaging-container .packagingtitle{text-align: center; font-weight: 500;font-size: 15px; letter-spacing: 1px;margin-bottom: 10px;} /* .packaging-option .packaging-content { opacity: .5; transition: opacity .2s ease; } */ .packaging-option input[type="radio"]:checked + .packaging-content { opacity: 1;} /* .aditional-notice--button{background: var(--ecom-color-3) !important; border-color: var(--ecom-color-3) !important;} */ .aditional-notice--button img{margin-right: var(--item-spacing-s);} .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: 0; position: relative;} .aditional-notice--content img{margin-top: var(--item-spacing-m);} .packaging-content img{max-width: 60px; max-height: 60px;} .packaging-content{display:flex;align-items: center;} .packaging-option{display:flex; align-items: center;} .packaging-options{display:flex; flex-wrap: wrap; justify-content: space-evenly; gap: 15px;} .packaging-options label{/* flex: 0 0 50%; max-width: 50%; */ } .packaging-options .packaging-text{margin-left:10px;text-align: left;font-size: 12px; max-width: 250px;} .packaging-options .packaging-text strong{font-size: 14px;} .packaging-option input{margin-right: 10px; accent-color:#000;} .aditional-notice--input{margin-top: var(--item-spacing-s) !important; resize: none; height: unset !important; min-height: 60px; max-height: 300px; field-sizing: content; border:1px solid var(--ecom-color-9); background:#fff; padding:8px 10px; border-radius:4px; font-size:14px; color:#333;} .cart-page--information{background: var(--ecom-color-4); padding: var(--item-spacing-m); /* border-radius: var(--section-border-radius-l); */} .cart-page--message-container{margin-top: var(--item-spacing-m);} .shipment-discount--message .message-container{background-color: var(--main-color-3); padding: var(--item-spacing-m);} .shipment-discount--message .message-container .message-heading{display: flex; justify-content: space-between;} .shipment-discount--message .message-container .message-title{ font-weight: 300;} .shipment-discount--message .message-container:has(.shipment-progress) .message-title{margin-bottom: var(--item-spacing-xs);} .shipment-discount--message .message-container .message-title svg{margin-right: var(--item-spacing-xs);} .shipment-discount--message .message-container .shipment-progress { width: 100%; height: 10px; background-color: #fff; border-radius: 0; overflow: hidden; margin-top: 8px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) inset; border-radius: 100px; } .shipment-discount--message .message-container .shipment-progress-bar {max-width: 100%; height: 100%; width: 0; background-color: var(--ecom-color-13); position: relative; transition: width 0.4s ease; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; animation: shipment-stripes 2s linear infinite; filter: brightness(1.1); } .shipment-discount--message.completed .message-container .shipment-progress-bar { background-color: var(--ecom-color-6); background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; animation: shipment-stripes 2s linear infinite; filter: brightness(1.1); } .shipment-discount--message.completed .message-container { background-color: var(--main-color-3);} /* Animació més suau i contínua */ @keyframes shipment-stripes { 0% { background-position: 40px 0; } 100% { background-position: 0 0; }} /* 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-unit-price, #detalle-pedido .table-item--unit-price{display:none;} .cart-table--head-quantity{width: 170px; text-align: center;} .cart-table--head-title{min-width: 400px;} /* .cart-table--item{position: relative;} .cart-table--item .removing-row-loader{position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out;} .cart-table--item .removing-row-loader svg{animation: rotate-animation 2.5s linear infinite; stroke: #000 !important; color: #000 !important;} .cart-table--item.removing td{pointer-events: none; opacity: 0.6;} .cart-table--item.removing .removing-row-loader{opacity: 1;}*/ /* .cart-table--item{position: relative;} .cart-table--item::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 25px; height: 25px; margin: auto; display: flex ; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; animation: rotate-animation 2.5s linear infinite; stroke: #000 !important; color: #000 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-loader-icon lucide-loader'%3E%3Cpath d='M12 2v4' /%3E%3Cpath d='m16.2 7.8 2.9-2.9' /%3E%3Cpath d='M18 12h4' /%3E%3Cpath d='m16.2 16.2 2.9 2.9' /%3E%3Cpath d='M12 18v4' /%3E%3Cpath d='m4.9 19.1 2.9-2.9' /%3E%3Cpath d='M2 12h4' /%3E%3Cpath d='m4.9 4.9 2.9 2.9' /%3E%3C/svg%3E"); background-position: center; background-size: cover; } .cart-table--item.removing td{pointer-events: none; opacity: 0.6;} .cart-table--item.removing::after{opacity: 1;} */ .cart-table--item td{border-right: 0 !important; padding: 10px !important;} .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(--section-border-radius-s); background: var(--ecom-color-4); padding: 6px; align-items: center; width: fit-content;max-width: 130px;} .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-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--total-price{text-align: right;} .table-item--total-price .price--old, .table-item--unit-price .price--old{text-decoration: line-through; opacity: 0.6; font-size: 0.85em; display: block; color: #666;} .item--wrapper{display: flex ; align-items: start; gap: 15px; } .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;} .add-to-cart--buttons{display: flex;} .add-to-cart--buttons .custom-text--button{ --button-bg-color: var(--main-color-5); --button-border-color: transparent; --button-bg-color-hover: #ffffff; --button-color-hover: #000000;} .add-to-cart--buttons .mantainence-kit--button { --button-bg-color: #ffffff; --button-border-color: #000000; --button-border-color-hover: transparent; --button-bg-color-hover: var(--main-color-5); --button-color-hover: #000000; } .custom-text--button[aria-expanded="true"]{ background-color: var(--button-bg-color-hover); } .custom-text--button + .custom-text--button{border-left: 0;} .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; */} tfoot td{padding: 10px !important; border-right: 0 !important;} td.label{text-align: right;} td.quantity{text-align: right;} .cart-table--total-price span{font-size: 18px; white-space: nowrap;} #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 */ #street-suggestions .loader { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 8px 12px; font-size: 0.9rem; color: #666; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; } /* Spinner animat */ #street-suggestions .loader::before { content: ""; width: 1rem; height: 1rem; border: 2px solid #ccc; border-top-color: #007bff; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .address-item--actions{ position: absolute; top: 15px; right: 30px; gap: 5px; display: flex; } .address-item--actions .btn { --button-padding-left: 5px; --button-padding-right: 5px; --button-padding-top: 3px; --button-padding-bottom: 3px; width: 30px; aspect-ratio: 1 !important; display: block !important; } .address-item--content p{margin: 0;} .address-item--actions .btn{ padding: 5px; border-radius: 5px; } .address-item {margin-bottom: 30px; } .address-item > div{height: 100%;} .address-item .address-item--title{margin: 5px 0; --content-h4-font-size: var(var(--content-h5-font-size)); } .process-page #address-form .form-group{margin-bottom: 10px;padding: 0 15px;} #address-form legend{font-size: 1.1rem;font-weight: 500; } .process-page #address-form legend{ padding:0 15px;} #address-form .form-group select, #address-form .form-group input, #personal_form .form-group input, #personal_form .form-group select{ 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); } #address-form #tipounidad .hidden, #personal_form #tipounidad .hidden{display:none;} /* #address-form #tipounidad{padding: 0 15px !important;} */ /* #personal_form #tipounidad{padding: 0 7.5px !important;} */ #tipoUnidad{margin-bottom:10px;} #address-form fieldset, #personal_form fieldset {flex-wrap: wrap;display:flex;} form .editaddress{ position: absolute; right: 30px; bottom: 10px; border: 1px solid;} #personal_form .editaddress{ bottom: 10px; } form .editaddress .fa{} .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-s);} .variations .variation-item + .variation-item{margin-top: var(--item-spacing-s);} .variations .variation-item .variation-item--name{margin-bottom: 0;} .variations .variation-item .options{ display: flex; flex-wrap: wrap; gap: 13px; flex-grow: 1;} .variations .variation-item .options .option-button{background: transparent; transition: all 0.3s ease-in-out;} .variations .variation-item .options .option-button[data-lower-attribute="medida_pulsera"]{width: unset; height: unset;} .variations .variation-item .options .option-button{ height: 30px; width: auto; min-width: 30px; padding: 2px; border: 1px solid #ccc; position: relative; color: #000; place-items: center; white-space: nowrap; display: block;} .variations .variation-item .options .option-button[data-lower-attribute="gemas"]{ height: 30px;} .variations .variation-item .options .option-button[data-lower-attribute="grabación"]{ min-height: 30px; height: unset;} .variations .variation-item select.variation-option-select{ max-width: 200px; width: 100%; border-radius: 0; font-size: 14px; padding: 2px 20px 2px 10px; border-color: #666; color: #000; margin-top: 0; height: 38px;} .variations .variation-item select.variation-option-select[name="talla_anillo"]{ max-width: 180px;} .variations .variation-item .ringSizeExpander{color: #888; text-decoration: underline; font-size: 12px; cursor: pointer;} .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-lower-attribute="grabación"] { width: auto; padding: 5px 20px; border-radius: 100px; } .variations .variation-item .options .option-button[data-lower-attribute="talla_anillo"]{ border-radius: 100px; } .variations .variation-item .options .option-button[data-lower-attribute="color_cuero"], .variations .variation-item .options .option-button[data-lower-attribute="color_cordón"], .variations .variation-item .options .option-button[data-lower-attribute="gemas"], .variations .variation-item .options .option-button[data-lower-attribute="acabado_anillo"], .variations .variation-item .options .option-button[data-lower-attribute="material"]{ display: block; aspect-ratio: 1 / 1; border-radius: 100px; position: relative;} .variations .variation-item .options .option-button[data-lower-attribute="color_cuero"] .option-button--label , .variations .variation-item .options .option-button[data-lower-attribute="color_cordón"] .option-button--label , .variations .variation-item .options .option-button[data-lower-attribute="gemas"] .option-button--label , .variations .variation-item .options .option-button[data-lower-attribute="acabado_anillo"] .option-button--label , .variations .variation-item .options .option-button[data-lower-attribute="material"] .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: -30px; right: -30px; z-index: 1;} .variations .variation-item .options .option-button[data-lower-attribute="color_cuero"] .option-button--label::after , .variations .variation-item .options .option-button[data-lower-attribute="color_cordón"] .option-button--label::after , .variations .variation-item .options .option-button[data-lower-attribute="gemas"] .option-button--label::after , .variations .variation-item .options .option-button[data-lower-attribute="acabado_anillo"] .option-button--label::after , .variations .variation-item .options .option-button[data-lower-attribute="material"] .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; z-index: 1;} .variations .variation-item .options .option-button[data-lower-attribute="color_cuero"]:hover .option-button--label , .variations .variation-item .options .option-button[data-lower-attribute="color_cordón"]:hover .option-button--label , .variations .variation-item .options .option-button[data-lower-attribute="gemas"]:hover .option-button--label , .variations .variation-item .options .option-button[data-lower-attribute="acabado_anillo"]:hover .option-button--label , .variations .variation-item .options .option-button[data-lower-attribute="material"]:hover .option-button--label { transform: translateY(5px); opacity: 1; } .variations .variation-item .options .option-button[data-lower-attribute="color_cuero"] .option-button--miniature , .variations .variation-item .options .option-button[data-lower-attribute="color_cordón"] .option-button--miniature , .variations .variation-item .options .option-button[data-lower-attribute="gemas"] .option-button--miniature , .variations .variation-item .options .option-button[data-lower-attribute="acabado_anillo"] .option-button--miniature , .variations .variation-item .options .option-button[data-lower-attribute="material"] .option-button--miniature { content: ""; display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; border-radius: 100px; position: relative; pointer-events: none; } .variations .variation-item .options .option-button[data-lower-attribute="material"] .option-button--miniature::after{ border-radius: 100px; 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 .option-button--label{white-space: break-spaces; line-height: 1.4;} .product-page-variations .variation-item{ display: flex; column-gap: 15px; justify-content: space-between; position: relative;} .product-page-variations .variation-item--name{ display: flex; flex-direction: row; max-width: 115px; width: 100%; gap: 5px;} .product-page-variations .variation-item--selected-name{font-weight: 400; font-size: 11px; max-width: 80px; width: 100%; margin-bottom: 0; text-align: right;} .product-page-variations .variation-item--selected-name span{color: #888; } /* VARIACIONS ALS LLISTATS */ .swiper .variations .variation-item .variation-item--name, .product-list .variations .variation-item .variation-item--name { display: none;} .swiper .variations .variation-item .options .option-button, .product-list .variations .variation-item .options .option-button { height: 20px; width: auto; min-width: 20px; } /* VARIACIONS LLISTAT */ [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: 100px; 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); font-size: 15px;} .checkout-ok--transfer-summary > *:not(:last-child){margin-bottom: 5px;} .summary-info--item{display: flex; justify-content: space-between; font-size: var(--medium-text-font-size); margin-bottom: 5px;} .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--price{white-space: nowrap;} .product-info--container{display: flex; flex-direction: row; align-items: start; 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-1);} .product-info--miniature img{max-width: 75px; height: auto; border-radius: var(--section-border-radius-s);} #table-details th{letter-spacing: 0;} #table-details [data-name="miniature"] > div{margin-left: 0; margin-right: 0; width: fit-content;} #table-details [data-name="quantity"] {text-align: center;} #table-details td a{text-decoration: none;} #table-details .order-info-block--grid{margin-left: 0; margin-right: 0;} #modal-order-details .modal-body, #modal-order-details .modal-header{padding: 10px 15px !important;} #modal-order-details .summary_property + .summary_property{margin-top: 5px;} #modal-order-details .summary_property{font-size: 13px; font-weight: 300;} .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: 100px; 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: 100px; 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 .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); margin-bottom: var(--item-spacing-s);} .login--navigation p a{font-weight: 600;} .login--group{margin-bottom: var(--item-spacing-s);} .login--group input{margin-top: 0 !important;} .login--group.toggle-input-type .toggle-password{top: 13px;} #login.tab-pane .login--group.input-icon-group .icon{left: 12px;} .login--group.input-icon-group .icon{left: 28px;} .input-icon-group{position: relative; display: flex; align-items: center;} .input-icon-group input{padding-left: 40px; margin-top: 0;} .input-icon-group .icon{position: absolute; left: 12px; /* top: 0; bottom: 0; margin: auto; */} .toggle-input-type .toggle-password { position: absolute; right: 30px; cursor: pointer; top: 36.5px; } .toggle-input-type{display: flex; justify-content: center; position: relative; flex-direction: column;} #personal_form .personal-info .row { margin-left: -5px; margin-right: -5px; } #personal_form .personal-info label.col-12 { padding: 0 7.5px !important; } #div-invoice .invoice-form .row { margin-left: -5px; margin-right: -5px; } #div-invoice .invoice-form label.col-12 { padding: 0 7.5px !important; } /* DIRECCIONES */ .addresses{margin-bottom: var(--item-spacing-m);} .address--header{ 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);} .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: calc(2 * 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; gap: 10px; height: 100%;} .shipment-item input{display: none;} .shipment-item--info{width: 100%;} .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--check-container .shipment-item--price .free{color: var(--main-color-6)} .shipment-item--check{border-radius: 100px;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-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); position: relative; overflow: hidden;} #pickup-map-container.loading::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(110deg, rgba(227, 227, 227, 0) 0%, rgba(227, 227, 227, 0) 40%, rgba(227, 227, 227, 0.5) 50%, rgba(227, 227, 227, 0) 60%, rgba(227, 227, 227, 0) 100%); animation: gradient-animation 1s linear infinite; } #pickup-map-container #lista_distribuidores{background-color: var(--ecom-color-4); height: 100%;} #pickup-map-container #map{background-color: var(--ecom-color-4);} .pickup-map-container--text{margin-bottom: var(--item-spacing-s);} .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);} .sending-address-summary{ padding-top: 15px; border-top: 1px solid var(--black); margin-top: 25px; } .sending-address-summary--header{margin-bottom: var(--item-spacing-m);} .sending-address-summary--title{font-size: var(--medium-large-text-font-size); margin-bottom: var(--item-spacing-s);} .sending-address-summary--text{font-size: var(--medium-text-font-size);} .invoice-address-summary{ padding-top: 15px; border-top: 1px solid var(--black); margin-top: 25px; } .invoice-address-summary--header{margin-bottom: var(--item-spacing-m);} .invoice-address-summary--title{font-size: var(--medium-large-text-font-size); margin-bottom: var(--item-spacing-s);} .invoice-address-summary--text{font-size: var(--medium-text-font-size);} .address-item{ /* display: flex; */ flex-wrap: nowrap; justify-content: space-between; /* align-items: end; */ } .address-item p{ display: flex; flex-direction: column; justify-content: start; gap: 10px; margin-bottom: 0;} .sending-address-summary--header, .invoice-address-summary--header{margin-bottom: var(--item-spacing-s);} .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; flex-wrap: wrap;} .payment-item input {display: none;} .payment-item img { margin-left: auto; mix-blend-mode: multiply;} .payment-item .label-text { color: var(--ecom-color-5); /* font-weight: 500; */ } .payment-item .icon { margin-left: 15px; color: var(--ecom-color-2); /* display: none; */ display: inline-block; opacity: 0; 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; */ opacity: 1;} .payment-item .label-text--selected { width: 100%; flex-grow: 1; font-size: 12px; padding-top: 10px;/* height: 0; */ overflow: hidden; transition: all .3s ease-in-out; } /* .payment-item:has(input:checked) .label-text--selected { padding-top: 10px; height: unset; } */ .payment-item.GooglePay,.payment-item.PAYCOMET,.payment-item.Stripe{display:none;} @media (max-width: 991px){ .order-notice{margin-bottom: 15px;} } .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; padding: 8px 10px; font-weight: 400; text-align: left;} .order-table #headertable th.acciones{text-align: center;} .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 span .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_button { border: none !important; color: #fff !important; background: #000 !important; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; height: 35px; } .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: #666 !important; color: #fff !important;} .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; aspect-ratio: unset;} .dataTables_wrapper .dataTables_paginate .paginate_button.next{background: transparent !important; color: #333 !important; aspect-ratio: unset;} .intranet--sending-addresses{margin-bottom: 30px;} .intranet--invoice-addresses{margin-bottom: 30px;} /* .orders-table table{margin-bottom: 15px;} */ .orders-table .dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom: 0;} .orders-table .table-responsive .dataTable{table-layout: unset !important; } .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; --button-padding-left: 10px; --button-padding-right: 10px; } #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;} .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; padding-right: 10px;} .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); } .item--wrapper { display: flex ; align-items: end; gap: 15px; flex-wrap: wrap; justify-content: end; flex-direction: column; } #pagamentsTop{margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--ecom-color-9);} .login-register--line-between > .row{row-gap: 30px;} } @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%;} .sending-address-summary .address-item p{margin-bottom: var(--item-spacing-s);} } .col-12:has(> .add-to-cart--availability){display: none;} .add-to-cart--availability{margin-bottom: var(--item-spacing-m);} .add-to-cart--availability:has(span:empty){display: none;} .add-to-cart--back-to-origin-product p{text-align: center;} .saving-quantity{color: var(--ecom-color-6);} /* INTRANET */ .fast-menu .btn{ flex-direction: row; justify-content: start; width: 100%; margin-bottom: 10px; gap: 10px; } .fast-menu .btn i{ font-size: 16px; } .btn-intranet{ border-color: var(--ecom-color-1); color: var(--ecom-color-2); gap: 10px;} .btn-intranet.active, .btn-intranet:hover{color:#fff; background-color: var(--ecom-color-1); border-color: var(--ecom-color-1);} .btn-intranet-danger{ border-color: var(--ecom-color-8); color: var(--ecom-color-8); } .btn-intranet-danger.active, .btn-intranet-danger:hover{color: var(--ecom-color-10); background-color: var(--ecom-color-8); border-color: var(--ecom-color-8);} .btn-intranet-danger-active{ color: var(--ecom-color-10); background-color: var(--ecom-color-8); border-color: var(--ecom-color-8);} .btn-intranet-danger-active.active, .btn-intranet-danger-active:hover{border-color: var(--ecom-color-8); color: var(--ecom-color-8); background-color: #fff;} .btn-intranet-success{ border-color: var(--ecom-color-6); color: var(--ecom-color-6); } .btn-intranet-success.active, .btn-intranet-success:hover{color: var(--ecom-color-10); background-color: var(--ecom-color-6); border-color: var(--ecom-color-6);} .btn-intranet-success-active{ color: var(--ecom-color-10); background-color: var(--ecom-color-6); border-color: var(--ecom-color-6);} .btn-intranet-success-active.active, .btn-intranet-success-active:hover{border-color: var(--ecom-color-6); color: var(--ecom-color-6); background-color: #fff;} .fast-menu{margin-bottom: var(--item-spacing-m);} .user-data--title, .fast-menu--title{margin-bottom: 10px; font-size: 18px; display: flex ; align-items: center; justify-content: space-between; } .user-data .user-info--item{margin-bottom: 5px;} .user-data--title svg, .fast-menu--title svg{transition: all 0.3s ease-in-out;} .user-data--title[aria-expanded="true"] svg, .fast-menu--title[aria-expanded="true"] svg{transform: rotate(90deg);} @media only screen and (min-width: 991px){ .user-data--content.collapse, .fast-menu--content.collapse{display: block;} .user-data--title i, .fast-menu--title i{display: none;} } .intranet-page--header{margin-bottom: var(--item-spacing-s); font-size: 18px;} .intranet--navigation{display: flex; gap: 15px; margin-top: 15px;} .shipping-address--title, .personal-info--title{font-size: var(--medium-large-text-font-size);} #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;} .paypal-explanation{font-size: 12px; display: flex; justify-content: center; /* text-align: center; */} .paypal-explanation img{height: 15px; width: auto; margin-left: 3px;} .payment .paypal-explanation{justify-content: start;} .intranet {--content-h3-font-size: 18px; } .intranet .title, .intranet h1, .intranet .h1, .intranet h2, .intranet .h2, .intranet h3, .intranet .h3, .intranet h4, .intranet .h4, .intranet h5, .intranet .h5, .intranet h6, .intranet .h6 { margin-bottom: 10px; } /* FAVORITOS */ /* Favorites Heart Icon */ .Productos .item .post-details{display: flex; flex-wrap: nowrap;} .Productos .item .post-details .post-details-inner{flex-grow: 1;} .item .btn-add-to-favorite { width: auto; flex-shrink: 0; align-items: start; padding: 0; margin-right: 5px; height: fit-content;} .Productos .swiper-slide .post-details{display: flex; flex-wrap: nowrap;} .Productos .swiper-slide .post-details .post-details-inner{flex-grow: 1;} .swiper-slide .btn-add-to-favorite { width: auto; flex-shrink: 0; align-items: start; padding: 0; margin-right: 5px; height: fit-content;} .btn-add-to-favorite svg{transition: all 0.3s ease-in-out;} .btn-add-to-favorite.is-favorited svg { fill: #e53e3e; stroke: #e53e3e; } /* Previsualització en passar el ratolí (mostra vermell abans de fer clic): NOMÉS en dispositius amb hover real (ratolí). Als tàctils el :hover es queda "enganxat" despres de tocar fins que toques a un altre lloc — feia que un like tot just tret es veiés igualment vermell fins que l'usuari tocava fora, molt contraintuïtiu. */ @media (hover: hover) { .btn-add-to-favorite:not(.show):hover svg { fill: #e53e3e; stroke: #e53e3e; } } /* ============================================================ Intranet - Pagina de pedidos (orders_page) + modal detalle (movido desde el