/* ============================================================
   QUICK VIEW PANEL â€” Dermocel
   Todos los estilos del panel de vista rÃ¡pida de producto.
   Estos estilos reemplazan los que antes se inyectaban via JS.
   ============================================================ */

/* â”€â”€ Overlay â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 15, 0.5);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.qv-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* â”€â”€ Panel (slide-in from right) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 390px;
    max-width: 100vw;
    background: #fff;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -6px 0 40px rgba(0, 0, 30, 0.16);
    overflow: hidden;
}
.qv-panel.active {
    transform: translateX(0);
}

/* â”€â”€ Floating action buttons (top-right corner) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-float-btns {
    position: absolute;
    top: 16px;
    right: 27px !important;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 290px !important;
    justify-content: flex-end;
}
.qv-float-btn {
    width: 64px !important;
    height: 64px !important;
    background: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 30, 0.12);
    transition: transform 0.2s ease, background 0.2s ease;
}
.qv-float-btn:hover {
    background: #F2F4F7;
    transform: scale(1.06);
}
/* Wishlist active state */
.qv-float-btn.btn-wishlist.active svg path {
    fill: #00005F;
}
.qv-float-btn.btn-wishlist svg path {
    transition: fill 0.2s ease;
}

/* â”€â”€ Scrollable area â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-scroll-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.qv-scroll-area::-webkit-scrollbar {
    width: 4px;
}
.qv-scroll-area::-webkit-scrollbar-thumb {
    background: #E4E7EC;
    border-radius: 4px;
}

/* â”€â”€ Product image section (square, full-width) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-img-section {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #F8F9FA;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
    margin: 12px;
    width: 390px;
    height: 290px;
}
.qv-img-section img#qvMainImg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}
.qv-img-section .qv-spinner-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8F9FA;
}

/* â”€â”€ Thumbnail strip â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-thumbs-strip {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 12px 4px;
    scrollbar-width: none;
}
.qv-thumbs-strip::-webkit-scrollbar { display: none; }

.qv-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: #F2F4F7;
    transition: border-color 0.2s ease;
}
.qv-thumb.active {
    border-color: #00005F;
}
.qv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* â”€â”€ Info spinner â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-info-spinner {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

/* â”€â”€ Info section â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-info-section {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px !important;
    width: 85%;
}

/* â”€â”€ Meta row: Cat | Stock | SKU â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #667085;
}
.qv-sep {
    color: #D0D5DD;
}
.qv-meta-stock {
    color: #12B76A;
    font-weight: 400;
}
.qv-meta-sku {
    color: #98A2B3;
}

/* â”€â”€ Product name â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-name-link {
    text-decoration: none;
    display: block;
    transition: all .5s ease !important;
}
.qv-name {
    font-size: 20px;
    font-weight: 700;
    color: #1D2939;
    text-decoration: none !important;
    text-underline-offset: 3px;
    margin: 0;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.2s ease;
}
.qv-name-link:hover .qv-name {
    color: #00005F;
}

/* â”€â”€ Short description â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-desc {
    font-size: 14px;
    color: #475467;
    line-height: 1.65;
}
.qv-desc p {
    margin: 0;
}

/* â”€â”€ Price row â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-price-row {
    display: flex;
    align-items: center !important;
    gap: 10px;
    flex-wrap: wrap;
}
.qv-price-current {
    font-size: 24px;
    font-weight: 800;
    color: #00005F;
}
.qv-price-regular {
    font-size: 16px;
    color: #98A2B3;
    text-decoration: none !important;
}
.qv-discount-badge {
    background: #00005F;
    color: #fff;
    font-size: 12px !important;
    line-height: normal !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    position: relative;
    top: 10px;
}
.qv-tax-label {
    font-size: 14px !important;
    color: #98A2B3;
    margin: -4px 0 0;
    font-weight: 500 !important;
}

/* â”€â”€ Out of stock message â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
.qv-out-stock-msg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #98A2B3;
    font-weight: 500;
    padding: 12px 0;
    border-top: 1px solid #F2F4F7;
}

/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
   BOTTOM BAR â€” sticky bar with qty + price + add button
   â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.qv-bottom-bar {
    background: #00005F;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 23px !important;
}

/* Qty strip */
.qv-qty-strip {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 0 !important;
    flex-shrink: 0;
}
.qv-qty-btn {
    width: 64px !important;
    height: 64px !important;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.5s ease !important;
    user-select: none;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.40) !important;
}
.qv-qty-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}
.qv-qty-num {
    color: #242424 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    min-width: 30px;
    text-align: center;
    width: 52px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #FFF;
}

/* Total price display */
.qv-total-price {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.qv-total-amount {
    font-size: 40px !important;
    font-weight: 500 !important;
    line-height: normal !important;
}
.qv-total-sub {color: #FFF !important;font-size: 14px !important;font-weight: 500;line-height: normal;}

/* Add to cart button */
.qv-add-btn {
    background: #fff;
    color: #00005F;
    border: none;
    cursor: pointer;
    padding: 20px !important;
    border-radius: 100px;
    font-size: 16px !important;
    line-height: normal;
}
.qv-add-btn:hover {
    opacity: 0.9;
    transform: scale(1.03);
}
.qv-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* â”€â”€ Spinner (reutiliza wishlist-spinner ya definido en JS) â”€ */
/* .wishlist-spinner ya estÃ¡ en JS injected styles */

/* â”€â”€ Mobile adjustments â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width: 480px) {
    .qv-panel {
        width: 100vw;
    }
    .qv-bottom-bar {
        gap: 10px;
        padding: 12px 14px;
    }
    .qv-total-amount {
        font-size: 20px;
    }
    .qv-add-btn {
        padding: 11px 16px;
        font-size: 13px;
    }
}

/* ============================================================
   SINGLE PRODUCT â€” Dermocel
   Estilos para la ficha de producto (single-product.php)
   ============================================================ */

:root {
    --sp-navy:  #00005F;
    --sp-blue:  #5698dc;
    --sp-dark:  #242424;
    --sp-bg:    #F4F6F8;
    --sp-white: #ffffff;
    --sp-gray:  rgba(36,36,36,.4);
    --sp-line:  #E4E7EC;
    --sp-ok:    #12B76A;
    --sp-star:  #F79009;
    --sp-font:  'Montserrat', sans-serif;
}

.sp-wrap {
	margin: 0 auto;
	padding: 0;
	font-family: var(--sp-font);
	color: var(--sp-dark);
	margin-top: clamp(120px, 6.9444vw, 140px);
}
.sp-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
	padding: clamp(21.333333333333336px, 2.1164vw, 42.666666666666664px) clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
	font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	background: #F4F6F8;
}
.sp-bc__link {
	color: var(--sp-dark);
	text-decoration: none;
	opacity: .4;
	transition: opacity .2s;
}

.sp-bc__link:hover { opacity: 1; }
.sp-bc__sep { color: var(--sp-line); }
.sp-bc__current { color: var(--sp-dark); font-weight: 500; }

.sp-main {
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: clamp(24px, 2.3810vw, 48px);
	align-items: start;
	margin: auto;
	padding: 0 clamp(120px, 11.9048vw, 240px) clamp(46.66666666666667px, 4.6296vw, 93.33333333333333px) clamp(100px, 9.9206vw, 200px);
	background: #F4F6F8;
}

@media (max-width: 900px) {
    .sp-main { grid-template-columns: 1fr; gap: 32px; }
}
.sp-gallery {
	display: grid;
	grid-template-columns: clamp(74.66666666666666px, 7.4074vw, 149.33333333333334px) 1fr;
	grid-template-rows: auto auto;
	gap: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
}
.sp-gallery__thumbs {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
}

.sp-thumb {
    width: clamp(76.66666666666666px, 7.6058vw, 153.33333333333334px);
	height: clamp(57.33333333333333px, 5.6878vw, 114.66666666666667px);
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--sp-white);
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: border-color .2s;
    flex-shrink: 0;
}
.sp-thumb.active { border-color: var(--sp-navy); }
.sp-thumb:hover { border-color: var(--sp-blue); }
.sp-thumb img {width: 100%;height: 100%;object-fit: contain;padding: 0;}

.sp-gallery__main {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    background: var(--sp-white);
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(249.33333333333331px, 24.7354vw, 498.6666666666667px);
}
.sp-gallery__img {
    width: 100%;
    height: 100% !important;
    object-fit: contain;
    padding: 0;
    transition: opacity .25s;
}
.sp-gallery__badge {
    position: absolute;
	top: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	left: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	background: var(--sp-navy);
	color: var(--sp-white);
	font-size: clamp(7.333333333333334px, 0.7275vw, 14.666666666666666px);
	font-weight: 700;
	padding: clamp(3.333333333333333px, 0.3307vw, 6.666666666666667px) clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
    border-radius: 100px;
}
.sp-gallery__actions {
    grid-column: 2;
    grid-row: 2;
    display: flex;
	gap: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
}
.sp-act-btn {
    width: 64px;
    height: 64px;
    background: #fff !important;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-navy);
    transition: background .2s, transform .15s;
}
.sp-act-btn:hover { background: #e3e5e8; transform: scale(1.05); }
.sp-act-btn.btn-wishlist.active svg path { fill: var(--sp-navy); }

.sp-info {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.5873vw, 32px);
	padding-top: clamp(2.666666666666667px, 0.2646vw, 5.333333333333333px);
}

.sp-info__name {
	color: var(--TEXTOS, #242424);
	font-family: Montserrat;
	font-size: clamp(16px, 1.5873vw, 32px);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
.sp-info__meta {
	display: flex;
	align-items: center;
	gap: clamp(8px, 0.7937vw, 16px);
	font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	color: #242424;
	margin-bottom: 0;
}
.sp-meta-pipe {
	color: #5D9CEC;
	font-weight: 300;
}
.sp-info__desc {
	font-size: clamp(10px, 0.9921vw, 20px);
	line-height: 1.6;
	color: #444;
	margin-bottom: 0;
}

/* Ocultar elementos automáticos indesejados */
.woocommerce-variation-availability, 
.stock, 
.wdr_bulk_table_container, 
#wdr-discount-table {
    display: none !important;
}

/* --- PRECIO --- */
.sp-price-now {
	color: #5D9CEC;
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(40px, 3.9683vw, 80px);
	font-weight: 500;
	line-height: 1;
	display: block;
}
.sp-price-tax {
	margin: clamp(3.333333333333333px, 0.3307vw, 6.666666666666667px) 0 0;
	color: #A5A5A5;
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(12px, 1.1905vw, 24px);
}
.sp-tiers__title {
	margin: 0 0 clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
	color: var(--PRINCIPAL, #00005F);
	font-family: Montserrat;
	font-size: clamp(12px, 1.1905vw, 24px);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.sp-tiers__row {
	display: flex;
	align-items: center;
	gap: clamp(10px, 0.9921vw, 20px);
}

.sp-tier {
    background: var(--sp-white);
    border: none;
    border-radius: 20px;
    padding: clamp(8px, 0.7937vw, 16px) clamp(16px, 1.5873vw, 32px);
    font-family: var(--sp-font);
    font-size: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
    color: #4A4A4A;
    cursor: pointer;
    transition: all .25s ease;
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.7937vw, 16px);
    min-height: clamp(40px, 3.9683vw, 80px);
}
.sp-tier__label {
    opacity: 0.8;
    font-weight: 400;
    white-space: nowrap;
}
.sp-tier__badge {
    background: #5698DC;
    color: #F4F6F8;
    font-size: clamp(8px, 0.7937vw, 16px);
	line-height: normal;
	font-weight: 500;
	padding: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
    border-radius: 20px;
    white-space: nowrap;
}
.sp-tier.is-active {
    background: #5698DC;
    color: var(--sp-white);
}
.sp-tier.is-active .sp-tier__label {
    opacity: 1;
}
.sp-tier.is-active .sp-tier__badge {
    background: rgba(255,255,255,0.25);
    color: var(--sp-white);
}

/* --- COMPRA & CANTIDAD --- */
.sp-cart-wrapper form.cart {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(26.666666666666664px, 2.6455vw, 53.333333333333336px) !important;
    margin-top: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px) !important;
}

.sp-cart-wrapper .quantity {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}
.sp-cart-row {
	display: flex !important;
	align-items: center !important;
	gap: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px) !important;
	width: 100% !important;
}


/* Botones circulares +/- con sombra */
.sp-qty-btn {
    width: clamp(42.66666666666667px, 4.2328vw, 85.33333333333333px) !important;
    height: clamp(42.66666666666667px, 4.2328vw, 85.33333333333333px) !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px) !important;
    color: #00005F !important;
    font-size: clamp(16px, 1.5873vw, 32px) !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.sp-qty-btn:hover {
    background: #fdfdfd !important;
    transform: translateY(-1px);
}

/* Input de cantidad cuadrado con borde fino */
.sp-cart-wrapper .qty {
    width: clamp(34.66666666666667px, 3.4392vw, 69.33333333333333px) !important;
	height: clamp(42.66666666666667px, 4.2328vw, 85.33333333333333px) !important;
    padding: 0 !important;
    text-align: center !important;
    border-radius: 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px) !important;
    font-weight: 400 !important;
    color: #333 !important;
    background: #00005F !important;
    border: 0;
    color: #fff !important;
}

.sp-cart-wrapper .qty::-webkit-outer-spin-button,
.sp-cart-wrapper .qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Botón Añadir al Carrito Navy Blue */
.sp-cart-wrapper .single_add_to_cart_button {
    flex: 1 !important;
    height: clamp(42.66666666666667px, 4.2328vw, 85.33333333333333px) !important;
    background: #00005F !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(12px, 1.1905vw, 24px) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(8px, 0.7937vw, 16px) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
}

.sp-cart-wrapper .single_add_to_cart_button:hover {
    background: #00003F !important;
    box-shadow: 0 8px 24px rgba(0,0,95,0.2) !important;
    transform: translateY(-2px);
}

.sp-cart-wrapper .single_add_to_cart_button::before {
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='6' cy='19' rx='2' ry='2' stroke='%23F4F6F8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='17' cy='19' rx='2' ry='2' stroke='%23F4F6F8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 17H6V3H4' stroke='%23F4F6F8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 5L20 6L19 13H6' stroke='%23F4F6F8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: inline-block;
    vertical-align: middle;
}
.sp-qty-btn:active {
    transform: scale(0.95);
}
.sp-atc-btn {
	width: clamp(220.66666666666669px, 21.8915vw, 441.3333333333333px);
	height: clamp(42.66666666666667px, 4.2328vw, 85.33333333333333px);
	background: var(--sp-navy);
	color: var(--sp-white);
	border: none;
	border-radius: 20px;
	padding: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px) clamp(18.666666666666664px, 1.8519vw, 37.333333333333336px);
	font-family: var(--sp-font);
	font-size: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
	font-weight: 400;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
	transition: opacity .2s, transform .15s;
}

.sp-atc-btn:hover { opacity: .88; transform: scale(1.02); }
.sp-atc-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.sp-atc-btn.loading { pointer-events: none; opacity: .7; }

.sp-atc-feedback {
	font-size: clamp(8.666666666666668px, 0.8598vw, 17.333333333333332px);
	min-height: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px);
}
.sp-atc-feedback.ok  { color: var(--sp-ok); }
.sp-atc-feedback.err { color: #e53e3e; }

.sp-nostock {
	color: var(--sp-gray);
	font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	margin: 0;
}


/* --- ACORDEÓN PREMIUM (Estilo Captura) --- */
.sp-accordion {
    /* border-top: 1px solid rgba(0,0,95,0.1); */
    /* margin-top: 40px; */
}

.sp-acc-item {
    border-bottom: 1px solid #5698DC;
}

.sp-acc-hdr {
	width: 100%;
	background: none;
	border: none;
	padding: clamp(16px, 1.5873vw, 32px) 0 clamp(8.666666666666668px, 0.8598vw, 17.333333333333332px) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px);
	font-weight: 500;
	color: #00005F;
	text-align: left;
}
.sp-acc-icon {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}


/* Rotación 45deg para convertir + en x */
.sp-acc-hdr[aria-expanded="true"] .sp-acc-icon {
    transform: rotate(45deg);
}

.sp-acc-body {
	overflow: hidden;
	padding-top: clamp(3.333333333333333px, 0.3307vw, 6.666666666666667px);
}
.sp-acc-content {
	font-family: 'Montserrat', sans-serif;
	font-size: clamp(10px, 0.9921vw, 20px);
	line-height: 1.8;
	color: #333;
}

/* VALORACIONES (REVIEW CARDS) - DISEÑO CAPTURA */
.sp-review {
    background: #ffffff;
    border: 1px solid #F2F4F7;
    border-radius: 20px;
    padding: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px);
	margin-bottom: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.sp-review__top {
    display: flex;
    align-items: center;
    gap: clamp(5.333333333333334px, 0.5291vw, 10.666666666666666px);
	margin-bottom: clamp(8px, 0.7937vw, 16px);
}

.sp-stars {
    display: flex;
    gap: 0;
}

.sp-stars svg {
    width: clamp(16px, 1.5873vw, 32px);
	height: clamp(16px, 1.5873vw, 32px);
}

.sp-verified {
	display: inline-flex;
	align-items: center;
	gap: clamp(4px, 0.3968vw, 8px);
	background: #5D9CEC;
	padding: clamp(3.666666666666667px, 0.3638vw, 7.333333333333333px) clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
	border-radius: 30px;
	color: var(--FONDOS, #F4F6F8);
	font-family: Montserrat;
	font-size: clamp(8px, 0.7937vw, 16px);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.sp-review__author {
	margin: 0 0 clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px) 0;
	color: var(--PRINCIPAL, #00005F);
	font-family: Montserrat;
	font-size: clamp(12px, 1.1905vw, 24px);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
.sp-review__text {
	font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	line-height: 1.6;
	color: #4A4A4A;
	margin: 0 0 clamp(8px, 0.7937vw, 16px) 0;
	font-weight: 400;
}
.sp-review__date {
	font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	color: #A5A5A5;
	margin: 0;
}
.sp-no-reviews {
	color: #A5A5A5;
	font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	font-style: italic;
}

.sp-related {
	border-radius: 0;
	padding: clamp(40.66666666666667px, 4.0344vw, 81.33333333333333px) clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px) clamp(40px, 3.9683vw, 80px);
}
.sp-related__hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: clamp(16px, 1.5873vw, 32px);
	flex-wrap: wrap;
	gap: clamp(8px, 0.7937vw, 16px);
}
.sp-related__title {
	margin: 0;
	color: var(--PRINCIPAL, #00005F);
	font-family: Montserrat;
	font-size: clamp(26.666666666666664px, 2.6455vw, 53.333333333333336px);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
.sp-related__nav {
	display: flex;
	gap: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
}

.sp-nav-btn {
    width: clamp(40px, 3.9683vw, 80px);
	height: clamp(40px, 3.9683vw, 80px);
    background: var(--sp-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-dark);
    transition: background .2s, color .2s;
    box-shadow: 0 2px 8px rgba(0,0,30,.08);
}
.sp-nav-btn:hover { background: var(--sp-navy); color: var(--sp-white); }
.sp-rel-wrap { overflow: hidden; }
.sp-rel-track {
    display: flex;
    gap: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.sp-rel-card {
    background: var(--sp-white);
    border-radius: 20px;
    overflow: hidden;
    min-width: clamp(160px, 15.8730vw, 320px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.sp-rel-card__img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--sp-bg);
    margin: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-rel-card__img img { width: 100%; height: 100%; object-fit: contain; padding: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px); }
.sp-rel-card__img a { display: contents; }
.sp-rel-wish {
    position: absolute;
    top: clamp(5.333333333333334px, 0.5291vw, 10.666666666666666px);
	right: clamp(5.333333333333334px, 0.5291vw, 10.666666666666666px);
    width: clamp(24px, 2.3810vw, 48px);
	height: clamp(24px, 2.3810vw, 48px);
    background: var(--sp-bg);
    border: none; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
    z-index: 1;
}
.sp-rel-wish:hover { background: #dde0e4; }
.sp-rel-wish.active svg path { fill: var(--sp-navy); }
.sp-rel-qv {
    position: absolute;
    bottom: clamp(5.333333333333334px, 0.5291vw, 10.666666666666666px);
	left: 50%;
    transform: translateX(-50%) translateY(6px);
    opacity: 0;
    background: var(--sp-navy);
    color: var(--sp-white);
    border: none; border-radius: 100px;
    padding: clamp(4.666666666666666px, 0.4630vw, 9.333333333333334px) clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	font-family: var(--sp-font);
	font-size: clamp(8px, 0.7937vw, 16px);
    cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap;
    transition: opacity .2s, transform .2s;
}
.sp-rel-card__img:hover .sp-rel-qv { opacity: 1; transform: translateX(-50%) translateY(0); }
.sp-rel-card__body { padding: 0 14px 16px; }
.sp-rel-card__name {
    display: block;
    font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	font-weight: 500;
	color: var(--sp-dark);
	text-decoration: none;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: clamp(4px, 0.3968vw, 8px);
}
.sp-rel-card__name:hover { color: var(--sp-navy); }
.sp-rel-card__prices {
	display: flex;
	align-items: baseline;
	gap: clamp(5.333333333333334px, 0.5291vw, 10.666666666666666px);
	flex-wrap: wrap;
}

.sp-rel.sp-price-now {
	font-size: clamp(24px, 2.3810vw, 48px);
	font-weight: 600;
	color: var(--sp-blue);
	display: inline-block;
}

.sp-price-old {
	font-size: clamp(16px, 1.5873vw, 32px);
	color: #667085;
	text-decoration: line-through;
	margin-right: clamp(8px, 0.7937vw, 16px);
	display: inline-block;
}

.sp-price-tax {
	font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	color: var(--sp-gray);
}

.sp-rel-tax {
	font-size: clamp(8px, 0.7937vw, 16px);
	color: var(--sp-gray);
	margin: clamp(2px, 0.2646vw, 5.333333333333334px) 0 clamp(8px, 0.7937vw, 16px);
}
.sp-rel-buy {
	display: flex;
	align-items: center;
	gap: clamp(4px, 0.3968vw, 8px);
}

.sp-rel-qminus, .sp-rel-qplus {
    width: clamp(22.666666666666664px, 2.2487vw, 45.333333333333336px);
	height: clamp(22.666666666666664px, 2.2487vw, 45.333333333333336px);
	background: var(--sp-bg);
	border: none;
	border-radius: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sp-navy);
	transition: background .2s;
	flex-shrink: 0;
}
.sp-rel-qminus:hover, .sp-rel-qplus:hover { background: #d5d8db; }
.sp-rel-qty {
	min-width: clamp(20px, 1.9841vw, 40px);
	text-align: center;
	font-size: clamp(10px, 0.9921vw, 20px);
	font-weight: 600;
	font-family: var(--sp-font);
}

.sp-rel-add {
    flex: 1;
	background: var(--sp-bg);
	border: none;
	border-radius: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
	padding: clamp(4.666666666666666px, 0.4630vw, 9.333333333333334px) clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
	font-family: var(--sp-font);
	font-size: clamp(8px, 0.7937vw, 16px);
	font-weight: 500;
	color: var(--sp-navy);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(3.3333333333333335px, 0.3307vw, 6.666666666666667px);
	transition: background .2s, color .2s;
}
.sp-rel-add:hover { background: var(--sp-navy); color: var(--sp-white); }

/* ============================================================
   CART MODAL â€” Dermocel
   Estilos del carrito lateral AJAX (Figma)
   ============================================================ */

.header-cart-count {
    position: absolute;
    top: -5px; right: -5px;
    background: #00005F;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
#openCart { position: relative; }

.cart-overlay, .wishlist-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 15, 0.5);
    z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.cart-overlay.active, .wishlist-overlay.active { opacity: 1; pointer-events: all; }

.cart-panel, .wishlist-panel {
    position: fixed;
    top: clamp(20px, 1.9841vw, 40px);
	right: 0;
	bottom: 0;
	width: clamp(233.33333333333331px, 23.1481vw, 466.6666666666667px);
	max-width: 100vw;
	height: clamp(370px, 36.7063vw, 740px);
    background: #F4F6F8;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -6px 0 40px rgba(0, 0, 30, 0.16);
    font-family: 'Montserrat', sans-serif;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;
}
.cart-panel.active, .wishlist-panel.active {transform: translateX(-16px);}

/* Header */
.cart-panel__header, .wishlist-panel__header {
    background: #fff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
    flex-shrink: 0;
}
.cart-panel__title, .wishlist-panel__title { 
    font-size: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
	font-weight: 600;
	color: #00005f;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wishlist-panel__count {
    background: #F2F4F7;
    color: #00005F;
    border-radius: 100px;
    font-size: 12px;
    padding: 2px 8px;
    min-width: 24px;
    text-align: center;
}
.cart-close, .wishlist-close {
    background: none; border: none; cursor: pointer; padding: 4px;
    display: flex; align-items: center; justify-content: center;
    color: #00005f;
}

.wishlist-panel__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-clear-wishlist {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #667085;
    text-decoration: underline;
    padding: 0;
}
.btn-clear-wishlist:hover {
    color: #00005F;
}

/* Body */
.cart-panel__body, .wishlist-panel__body { flex: 1; overflow-y: auto; background: #fff; position: relative; }
.cart-loading, .wishlist-loading {
    position: absolute; inset: 0; background: rgba(255,255,255,.8);
    display: flex; align-items: center; justify-content: center; z-index: 10;
}
.cart-empty, .wishlist-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	color: #667085;
	font-size: clamp(10px, 0.9921vw, 20px);
}

.cart-empty p { 
    margin-top: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
	margin-bottom: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px);
 }
.cart-item-list, .wishlist-product-list { list-style: none; margin: 0; padding: 0; }
.cart-item, .wishlist-product-item {
    display: flex; padding: 16px 20px; gap: 12px;
    border-bottom: 1px solid #F2F4F7; position: relative;
    background: #fff;
    transition: background 0.2s ease;
}
.wishlist-product-item:hover { background: #fafafa; }

.cart-item-img, .wishlist-product-img {
    width: clamp(53.33333333333333px, 5.2910vw, 106.66666666666667px);
	height: clamp(40px, 3.9683vw, 80px);
	border-radius: 10px;
    border: 1px solid #f2f2f4;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
}
.cart-item-img img, .wishlist-product-img img { width: 100%; height: 100%; object-fit: contain; }
.cart-item-info, .wishlist-product-info {flex: 1;display: flex;flex-direction: column;gap: 4px;}

.wishlist-product-name {
    font-size: 14px;
    font-weight: 600;
    color: #1D2939;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.2s;
}
.wishlist-product-name:hover { color: #00005F; }

.wishlist-product-price {
    font-size: 15px;
    font-weight: 700;
    color: #00005F;
}

.wishlist-product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.wishlist-btn-cart {
    background: #00005F;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
}
.wishlist-btn-cart:hover { opacity: 0.85; }

.wishlist-btn-remove {
    background: none;
    border: 1px solid #E4E7EC;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    transition: all 0.2s;
}
.wishlist-btn-remove:hover {
    border-color: #E53935;
    color: #E53935;
    background: #FFF0F0;
}

.wishlist-panel__footer {
    padding: 16px 20px;
    background: #fff;
    border-top: 1px solid #F2F4F7;
    flex-shrink: 0;
}

.btn-add-all-cart {
    width: 100%;
    background: #00005F;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 0.2s;
}
.btn-add-all-cart:hover { opacity: 0.88; }
.cart-item-top {
    display: flex;
	align-items: center;
	gap: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	order: 3;
	flex-direction: row-reverse;
	justify-content: flex-end;
}
.cart-item-qty-ctrl {
    display: flex; align-items: center; background: #F4F6F8;
    border-radius: 5px; padding: 2px 4px; gap: 6px;
}
.cart-item-qty-ctrl button {
    background: none; border: none; cursor: pointer; color: #00005f;
    display: flex; align-items: center; justify-content: center; padding: 2px;
}
.cart-item-qty-ctrl .c-num { 
    font-size: clamp(8px, 0.7937vw, 16px);
	font-weight: 600;
	color: #5698DC;
	min-width: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	text-align: center;
}
.cart-item-top .c-vol-text { 
    font-size: clamp(8px, 0.7937vw, 16px);
	color: #747587;
}
.cart-item-name {
	font-size: clamp(8px, 0.7937vw, 16px);
	color: #35363e;
	text-decoration: none;
	line-height: 1.4;
	display: block;
	width: calc(100% - 24px);
}

.cart-item-price {
	font-size: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
	font-weight: 600;
	color: #35363e;
	margin-top: clamp(2.666666666666667px, 0.2646vw, 5.333333333333333px);
}
.cart-item-remove {
	position: absolute;
	right: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
	top: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
	background: none;
	border: none;
	color: #a7a7a7;
	cursor: pointer;
	transition: color .2s;
	padding: clamp(2.666666666666667px, 0.2646vw, 5.333333333333333px);
}
.cart-item-remove:hover { color: #e53e3e; }

/* Footer */
.cart-panel__footer {
	padding: 0 clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px) clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px);
	background: #fff;
    flex-shrink: 0;
}
.cart-totals {
	padding: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px) 0 clamp(21.333333333333336px, 2.1164vw, 42.666666666666664px);
}
.cart-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: clamp(8px, 0.7937vw, 16px);
	color:#242424;
    margin-bottom: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
}
.cart-val-sub {
	font-size: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
}

.cart-total-row.cart-shipping-row { color: #667085; }
.cart-val-ship {
	font-size: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
}
.cart-total-row.cart-total-final {
	margin-bottom: 0;
	font-size: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
}
.cart-val-tot { font-size: 24px; font-weight: 600; color: #5698DC; }
.cart-sep {border: 0;border-top: 1px dashed #E4E7EC;margin: 12px 0;display: none;}
.cart-actions {display: flex;flex-direction: column;gap: 13px;}
.cart-actions .btn-checkout {
    background: #00005F;
    color: #fff;
    text-decoration: none;
    text-align: center;
    border-radius: 100px;
    padding: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
    font-weight: 400;
    display: block;
    transition: background .2s, transform .1s;
}
.cart-actions .btn-checkout:hover { background: #000080; transform: scale(1.02); }
.cart-actions .btn-continue {
    background: #fff;
    color: #00005F;
    border: 1px solid #00005F;
    text-align: center;
    border-radius: 100px;
    padding: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
    font-weight: 400;
    display: block;
    cursor: pointer;
    transition: background .2s;
    width: 100%;
}
.cart-actions .btn-continue:hover { background: #F4F6F8; }

/* Two-column login+register layout */
.dermocel-auth-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(21.333333333333336px, 2.1164vw, 42.666666666666664px);
	width: 100%;
	min-height: 100vh;
	padding: clamp(80px, 7.9365vw, 160px) clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px) clamp(40px, 3.9683vw, 80px);
    background-color: #F4F6F8;
    box-sizing: border-box;
}
.dermocel-auth-columns .dermocel-login-wrapper {
    min-height: unset;
    padding: 0;
    flex: 1;
    min-width: clamp(200px, 19.8413vw, 400px);
	max-width: clamp(298.66666666666663px, 29.6296vw, 597.3333333333334px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
@media (max-width: 991px) {
    .dermocel-auth-columns {
        flex-direction: column;
        align-items: center;
        padding: clamp(53.33333333333333px, 5.2910vw, 106.66666666666667px) clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px) clamp(26.666666666666664px, 2.6455vw, 53.333333333333336px);
    }
    .dermocel-auth-columns .dermocel-login-wrapper {
        max-width: clamp(298.66666666666663px, 29.6296vw, 597.3333333333334px);
        width: 100%;
    }
}

/* Info text (register: password auto-generated) */
.dermocel-info-text {
    font-family: Montserrat, sans-serif;
    font-size: clamp(8.666666666666668px, 0.8598vw, 17.333333333333332px);
	color: #747587;
	line-height: 1.6;
	margin: 0;
	padding: clamp(8px, 0.7937vw, 16px) clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
    background: #F4F6F8;
    border-radius: 10px;
}

.section-products-carousel .section-header-carousel .section-nav-area .btn-view-all {
    padding: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px);
	line-height: 1;
}

.section-products-carousel .section-header-carousel .section-nav-area .carousel-controls .swiper-button-prev-custom, .section-products-carousel .section-header-carousel .section-nav-area .carousel-controls .swiper-button-next-custom {
    width: clamp(40px, 3.9683vw, 80px);
	height: clamp(40px, 3.9683vw, 80px);
}

.section-products-carousel .container {
    overflow: hidden;
    padding: 0 20px;
}

.qv-float-btn svg, .qv-qty-btn svg, .qv-add-btn svg {
    width: clamp(16px, 1.5873vw, 32px);
    height: clamp(16px, 1.5873vw, 32px);
}
#qvClose {
	margin-bottom: auto;
}
.qv-price-area {
	gap: 0px;
}

.qv-meta-pipe {
    color: #5698DC;
}

.product-card .product-image {
    margin-top: 0;
    margin-bottom: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
    border-radius: 10px;
    overflow: hidden;
}

.product-card .product-info .product-name {
    font-size: clamp(12px, 1.1905vw, 24px);
	line-height: normal;
	margin-bottom: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
}

.product-card .product-info .product-price .current-price {
    font-size: 40px;
    line-height: 1;
    font-weight: 500;
}

.product-card .product-info .product-price {
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.product-card .product-info .product-price .old-price {color: rgba(36, 36, 36, 0.40);font-size: 18px;font-weight: 500;text-decoration-line: none;}

.product-card .product-info .price-tax {
    color: rgba(36, 36, 36, 0.40);
    font-family: Montserrat;
	font-size: clamp(9.333333333333332px, 0.9259vw, 18.666666666666668px);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin-bottom: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
}

.product-card .product-actions .quantity-selector .qty-btn {
    transition: all .5s ease;
    width: clamp(42.66666666666667px, 4.2328vw, 85.33333333333333px) !important;
    height: clamp(42.66666666666667px, 4.2328vw, 85.33333333333333px) !important;
}

.product-card .product-actions .quantity-selector .qty-input {
    width: clamp(36px, 3.5714vw, 72px) !important;
			height: clamp(42.66666666666667px, 4.2328vw, 85.33333333333333px) !important;
}

.product-card .product-actions {
    gap: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
}

.product-card .woocommerce-Price-amount.amount {
    font-weight: 500;
    color: #5698DC;
}

.product-card .old-price .woocommerce-Price-amount.amount {
    color: rgba(36, 36, 36, 0.40);
}

#cartFooter .woocommerce-Price-amount.amount {
    font-weight: 400;
}

#cartFooter .cart-total-final .woocommerce-Price-amount.amount {
    font-weight: 600;
    color: #5698DC;
}

.sp-tiers {
    /* margin-top: 16px; */
}

.sp-qty-minus svg, .sp-qty-plus svg {
    width: clamp(16px, 1.5873vw, 32px);
	height: clamp(16px, 1.5873vw, 32px);
}

.sp-atc-btn svg {
    width: clamp(16px, 1.5873vw, 32px);
	height: clamp(16px, 1.5873vw, 32px);
}

.sp-tier.is-active .sp-tier__badge {
    display: none;
}

.sp-tier span {
    opacity: .4;
    transition: all .5s ease;
}

.sp-tier.is-active span {
    opacity: 1;
}

.single-product {
    background: #eaecf2 !important;
}

.sp-info__price_box {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
}

.product-item-hover {
    display: none;
}

#accDesc .sp-acc-content {
    padding-bottom: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px);
}

.sp-bc__sep {
    color: #5698DC;
}

@media (min-width: 1900px) {
    .sp-wrap {
        padding-top: clamp(118px, 9.3158vw, 236px);
        margin-top: 0;
    }
}

.product-card .old-price .woocommerce-Price-amount.amount {
    text-decoration: line-through;
}








.cart-total-row span {
	 color: var(--TEXTOS,#242424);
	 font-family: Montserrat;
	 font-size: clamp(8px,0.7937vw,16px);
	 font-style: normal;
	 font-weight: 400;
	 line-height: normal;
}
 .cart-total-row >span:first-child {
	 opacity: .4;
}
  #cartFooter .woocommerce-Price-amount.amount bdi {
	 font-size: clamp(10.666666666666668px,1.0582vw,21.333333333333332px);
}
 .cart-total-row.cart-shipping-row .cart-val-ship {
	 font-size: clamp(10.666666666666668px,1.0582vw,21.333333333333332px);
}
 #cartFooter .cart-total-final .woocommerce-Price-amount.amount {
	 color: #5698DC !important;
	 font-size: clamp(16px,1.5873vw,32px) !important;
}
 #cartFooter .cart-total-final .woocommerce-Price-amount.amount bdi {
	 font-size: clamp(16px,1.5873vw,32px);
}
 #cartFooter .cart-total-final .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol {
	 font-size: clamp(16px,1.5873vw,32px);
}
 .cart-val-tot span {
	 color: #5698DC !important;
}
 .cart-total-label {
	 font-size: clamp(10.666666666666668px,1.0582vw,21.333333333333332px) !important;
}
 .cart-total-row.cart-total-final .cart-total-label {
	 opacity: 1;
}
 

 #cartFooter .cart-panel__header {
    padding: 20px 19px;
}

#cartFooter .cart-item {
    padding: 25px 25px 14.8px;
    margin-bottom: 14.8px;
}

.cart-item-price {
	margin-bottom: clamp(2.666666666666667px, 0.2646vw, 5.333333333333333px);
}
.cart-item-img {
    height: clamp(53.33333333333333px, 5.2910vw, 106.66666666666667px);
}
.blog-card:hover {
    transform: translateY(-5px);
}

.blog-card {
    transition: all .3s ease;
}

.section-products-carousel .section-header-carousel .section-nav-area {
	gap: clamp(6.666666666666666px,0.6614vw,13.333333333333334px);
}
 .section-products-carousel .section-header-carousel .section-nav-area .btn-view-all {
	padding-top: clamp(13.333333333333332px, 1.0499vw, 26.666666666666668px);
	padding-bottom: clamp(13.333333333333332px, 1.0499vw, 26.666666666666668px);
	font-size: 16px !important;
}
 
.blog-badge {
    text-transform: uppercase;
    color: var(--PRINCIPAL, #00005F);
    font-family: Montserrat;
    font-size: clamp(8px, 0.7937vw, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    left: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px);
}

.cart-panel {
	margin-right: auto;
}

.wishlist-sale-badge {
    width: fit-content;
}
.megamenu-content {
    opacity: 0;
}

.megamenu.active .megamenu-content {
    opacity: 1;
}

.header-right {
    margin-left: auto;
}

.suggestion-list a {
    color: #242424 !important;
}

.search-modal .search-modal-container .search-modal-products h5 {
    text-transform: uppercase;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    padding: 0;
    border: 0;
    text-align: center;
}
.section-blog .container {
    margin: auto;
}
.empresa-hero .hero-banner-custom .hero-content {
    max-width: 2450px;
}

.filter-blog-select-category #select2-category-container {
	font-size: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
}

.filter-blog-select-category .select2-container--default .select2-selection--single {
	height: clamp(42.66666666666667px, 4.2328vw, 85.33333333333333px) !important;
	border-radius: 20px;
}


.blog-grid .blog-card:hover {
    transform: translateY(-5px) !important;
}
.sp-price-now {
	font-size: clamp(26.666666666666664px, 2.6455vw, 53.333333333333336px);
}


.sp-info {
	width: clamp(347.33333333333337px, 34.4577vw, 694.6666666666666px);
}

.single-product .section-products-carousel .section-header-carousel {
    /* margin: 0; */
}

.single-product .section-products-carousel .section-header-carousel .section-title-area .section-title {
    margin-bottom: 0;
}

.cart-item-remove svg {
    opacity: 0.4;
    transition: all .5s ease;
}

.cart-item-remove:hover svg {
    opacity: 1;
}

.section-banner-01 .banner-slider-right .swiper-slide .slide-content {
    z-index: 9;
}

.section-banner-01 .banner-slider-right .swiper-slide::before {
    z-index: 9;
}

.section-header .main-header {
    padding: 0 20px 0 10px;
}

.section-header .nav-header {
    padding: 0 10px;
}

.section-header .nav-header ul li:not(:last-child)::after {
    margin-left: clamp(19.333333333333336px, 1.9180vw, 38.666666666666664px);
	margin-right: clamp(19.333333333333336px, 1.9180vw, 38.666666666666664px);
}

.section-products-carousel .section-header-carousel {
    margin-bottom: 24px;
}

.section-products-carousel .section-header-carousel .section-title-area .section-title {
    font-size: 40px;
    margin-bottom: 6px;
}

.section-products-carousel .section-header-carousel .section-nav-area .carousel-controls {
    gap: 10px;
}

.section-products-carousel .section-header-carousel .section-nav-area .carousel-controls .swiper-button-prev-custom svg, .section-products-carousel .section-header-carousel .section-nav-area .carousel-controls .swiper-button-next-custom svg {
    width: 24px;
    height: 24px;
}

.product-card .product-badge {
    box-shadow: none;
}

.section-products-carousel .section-header-carousel .section-nav-area .btn-view-all:hover ellipse {
    stroke: #fff;
}

.section-products-carousel .section-header-carousel .section-nav-area .btn-view-all ellipse {
    transition: all .5s ease;
}

.contact-phones {
    gap: 30px !important;
}

.contact-phones span {
    gap: 10px !important;
}

.dermocel-card {
    box-shadow: none !important;
    width: calc(25% - 18px);
}

.box-404-title, .box-thanks-title {
    color: #242424;
    font-family: 'Montserrat';
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -3.2px;
}

.box-404-description, .box-thanks-description {
    font-family: 'Montserrat';
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -1.6px;
    margin-bottom: 24px;
}

.section-404-error, .section-thanks {
    background: #eaecf2;
    height: 100vh;
}

.error404 main, .page-template-page-gracias main {
    background: #fff;
    height: 100vh;
    padding-top: 100px;
}

.box-404-number {
    position: absolute;
    bottom: 0;
    right: 57px;
    bottom: 20%;
}

.box-404-text, .box-thanks-text {
    padding-top: 90px;
}

.box-404-title, .box-thanks-title {
    margin-bottom: 24px;
}

.box-404-btn, .box-thanks-btn {
    padding: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px);
    width: fit-content;
    display: block;
    color: var(--PRINCIPAL, #00005F);
    text-align: right;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: #fff;
    border-radius: 20px;
    transition: all .5s ease;
}

.box-404-btn .btn-01-a-icon, .box-thanks-btn .btn-01-a-icon {
    order: -1;
    transform: rotate(180deg);
}

.box-404-btn .btn-01-a-icon, .box-thanks-btn .btn-01-a-icon {
    background: #fff;
    display: none;
}

.box-404-btn .btn-01-a-icon path, .box-thanks-btn .btn-01-a-icon path {
    stroke: #23252B;
}

.box-404-btn .btn-01-p, .box-thanks-btn .btn-01-p {color: #242424;transition: all .5s ease;}

.box-404-btn:hover, .box-thanks-btn:hover {
    border-color: #678D2D;
}

.section-404-error .container, .section-thanks .container {
    width: clamp(967.64px, 126.0053vw, 1905.33px);
    margin: auto;
    padding: 0 clamp(25px, 3.2573vw, 50px);
    max-width: 100%;
}

.box-404-content, .box-thanks-content {
    color: #242424;
}

.box-404-number svg path, .box-thanks-number svg path {
    fill: #5698DC;
    fill-opacity: 0.2;
}

.box-404-btn:hover, .box-thanks-btn:hover {
    background: #00005F;
}

.box-404-btn:hover p, .box-thanks-btn:hover p {
    color: #fff;
}

.product-card .product-actions .btn-add-cart svg path, .product-card .product-actions .btn-add-cart svg ellipse {
    transition: all .5s ease;
}

.product-card .product-actions .quantity-selector .qty-btn:hover {
    background: #00005f;
    opacity: 1;
}

.product-card .product-actions .quantity-selector .qty-btn:hover svg path {
    stroke: #fff;
}

.product-card .product-actions .quantity-selector .qty-btn svg path {
    transition: all .5s ease;
}

.product-card .product-info .product-name a:hover {
    text-decoration: underline;
    color: #5698dc;
}

.product-card .product-info .product-name a {
    transition: all .5s ease;
}

.section-header .main-header .header-right .header-icon {
    transition: all .5s ease;
}

.section-header .main-header .header-right .header-icon:hover {
    transform: translateY(-3px);
}

.section-header .nav-header ul li a:hover {
    color: #007bff !important;
}

.megamenu .megamenu-content .megamenu-close {
    width: 64px;
    height: 64px;
    margin-top: -20px;
    transition: all .5s ease;
}

.dermocel-card-img-wrap {
	height: clamp(159.33333333333331px, 15.8069vw, 318.6666666666667px);
}

.dermocel-grid {
    gap: 24px !important;
    display: flex !important;
    flex-wrap: wrap;
}

.sp-act-btn svg {
    width: 24px;
    height: 24px;
}

.section-products-carousel .section-header-carousel .section-nav-area .carousel-controls .swiper-button-prev-custom:hover svg path, .section-products-carousel .section-header-carousel .section-nav-area .carousel-controls .swiper-button-next-custom:hover svg path {
    stroke: #fff;
}

.section-products-carousel .section-header-carousel .section-nav-area .carousel-controls .swiper-button-prev-customsvg path, .section-products-carousel .section-header-carousel .section-nav-area .carousel-controls .swiper-button-next-custom svg path {
    transition: all .5s ease;
}

.empresa-hero-logo {
	width: clamp(258.66666666666663px, 25.6614vw, 517.3333333333334px);
	height: clamp(154px, 15.2778vw, 308px);
}

.empresa-hero .hero-banner-custom .hero-content .hero-title {
    margin-bottom: 18px;
}

.category-static-card {
    padding: 27px 26px;
    border-radius: 20px;
    background: var(--PRINCIPAL, #00005F);
    color: #fff;
}

.category-static-card-title {
    margin: auto;
	color: #F4F6F8;
	text-align: center;
	font-family: Montserrat;
	font-size: clamp(26.666666666666664px, 2.6455vw, 53.333333333333336px);
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	margin-bottom: clamp(10.666666666666668px, 1.0582vw, 21.333333333333332px);
	width: 90%;
}

.category-static-card-count {
    color: #5698DC;
    text-align: center;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.category-static-card-content {
    margin-bottom: 0;
    margin-top: auto;
}

.category-static-card-link {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00005F;
    text-align: right;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 20px;
    background: #FFF;
    gap: 10px;
    height: 64px;
    margin-top: auto;
}

.search-modal-box-comment {
    margin-top: 18px;
}

.search-modal-comment {
    color: var(--TEXTOS, #242424);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.btn-edit-inline {
    color: #00005F;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0em 0.5em 1em !important;
}

.account-nav-list li a .nav-arrow {
    display: flex;
    align-items: center;
}

.account-nav-list li a span.nav-item-content {
    line-height: 1;
}

.woocommerce form .show-password-input::before, .woocommerce-page form .show-password-input::before {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L21 21' stroke='%2300005F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5845 10.587C9.80297 11.3679 9.80252 12.6345 10.5835 13.416C11.3644 14.1975 12.631 14.1979 13.4125 13.417' stroke='%2300005F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.15701 4.64392C8.75877 4.75784 8.52828 5.17303 8.64221 5.57127C8.75613 5.96951 9.17132 6.2 9.56956 6.08607L9.36328 5.365L9.15701 4.64392ZM12.0003 5L11.9976 5.75H12.0003V5ZM22.0003 12L22.6514 12.3722C22.7832 12.1416 22.7832 11.8585 22.6515 11.6279L22.0003 12ZM18.9465 14.9789C18.6654 15.2831 18.684 15.7576 18.9882 16.0388C19.2924 16.3199 19.7669 16.3012 20.0481 15.9971L19.4973 15.488L18.9465 14.9789ZM17.7764 17.9708C18.1198 17.7392 18.2104 17.273 17.9788 16.9296C17.7472 16.5862 17.281 16.4956 16.9376 16.7272L17.357 17.349L17.7764 17.9708ZM2 12L1.34887 11.6278C1.21706 11.8584 1.21704 12.1415 1.34883 12.3721L2 12ZM7.05301 7.27968C7.39581 7.04716 7.4852 6.58078 7.25268 6.23799C7.02017 5.89519 6.55378 5.80579 6.21099 6.03831L6.632 6.659L7.05301 7.27968ZM9.36328 5.365L9.56956 6.08607C10.359 5.86023 11.1765 5.74708 11.9976 5.74999L12.0003 5L12.0029 4.25C11.0405 4.24659 10.0824 4.37921 9.15701 4.64392L9.36328 5.365ZM12.0003 5V5.75C15.6403 5.75 18.7634 7.84743 21.3491 12.3721L22.0003 12L22.6515 11.6279C19.9031 6.81857 16.3603 4.25 12.0003 4.25V5ZM22.0003 12L21.3492 11.6278C20.5939 12.949 19.7923 14.0639 18.9465 14.9789L19.4973 15.488L20.0481 15.9971C20.9843 14.9841 21.8506 13.773 22.6514 12.3722L22.0003 12ZM17.357 17.349L16.9376 16.7272C15.4284 17.7451 13.79 18.25 12 18.25V19V19.75C14.094 19.75 16.0236 19.1529 17.7764 17.9708L17.357 17.349ZM12 19V18.25C8.36001 18.25 5.23685 16.1526 2.65117 11.6279L2 12L1.34883 12.3721C4.09715 17.1814 7.63999 19.75 12 19.75V19ZM2 12L2.65113 12.3722C3.98114 10.0454 5.45439 8.36403 7.05301 7.27968L6.632 6.659L6.21099 6.03831C4.37161 7.28597 2.75686 9.16458 1.34887 11.6278L2 12Z' fill='%2300005F'/%3E%3C/svg%3E");
    content: "";
    display: block;
    height: 22px;
    width: 22px;
}

.woocommerce form .show-password-input.display-password::before, .woocommerce-page form .show-password-input.display-password::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5845 10.587C9.80297 11.3679 9.80252 12.6345 10.5835 13.416C11.3644 14.1975 12.631 14.1979 13.4125 13.417' stroke='%2300005F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.15701 4.64392C8.75877 4.75784 8.52828 5.17303 8.64221 5.57127C8.75613 5.96951 9.17132 6.2 9.56956 6.08607L9.36328 5.365L9.15701 4.64392ZM12.0003 5L11.9976 5.75H12.0003V5ZM22.0003 12L22.6514 12.3722C22.7832 12.1416 22.7832 11.8585 22.6515 11.6279L22.0003 12ZM18.9465 14.9789C18.6654 15.2831 18.684 15.7576 18.9882 16.0388C19.2924 16.3199 19.7669 16.3012 20.0481 15.9971L19.4973 15.488L18.9465 14.9789ZM17.7764 17.9708C18.1198 17.7392 18.2104 17.273 17.9788 16.9296C17.7472 16.5862 17.281 16.4956 16.9376 16.7272L17.357 17.349L17.7764 17.9708ZM2 12L1.34887 11.6278C1.21706 11.8584 1.21704 12.1415 1.34883 12.3721L2 12ZM7.05301 7.27968C7.39581 7.04716 7.4852 6.58078 7.25268 6.23799C7.02017 5.89519 6.55378 5.80579 6.21099 6.03831L6.632 6.659L7.05301 7.27968ZM9.36328 5.365L9.56956 6.08607C10.359 5.86023 11.1765 5.74708 11.9976 5.74999L12.0003 5L12.0029 4.25C11.0405 4.24659 10.0824 4.37921 9.15701 4.64392L9.36328 5.365ZM12.0003 5V5.75C15.6403 5.75 18.7634 7.84743 21.3491 12.3721L22.0003 12L22.6515 11.6279C19.9031 6.81857 16.3603 4.25 12.0003 4.25V5ZM22.0003 12L21.3492 11.6278C20.5939 12.949 19.7923 14.0639 18.9465 14.9789L19.4973 15.488L20.0481 15.9971C20.9843 14.9841 21.8506 13.773 22.6514 12.3722L22.0003 12ZM17.357 17.349L16.9376 16.7272C15.4284 17.7451 13.79 18.25 12 18.25V19V19.75C14.094 19.75 16.0236 19.1529 17.7764 17.9708L17.357 17.349ZM12 19V18.25C8.36001 18.25 5.23685 16.1526 2.65117 11.6279L2 12L1.34883 12.3721C4.09715 17.1814 7.63999 19.75 12 19.75V19ZM2 12L2.65113 12.3722C3.98114 10.0454 5.45439 8.36403 7.05301 7.27968L6.632 6.659L6.21099 6.03831C4.37161 7.28597 2.75686 9.16458 1.34887 11.6278L2 12Z' fill='%2300005F'/%3E%3C/svg%3E");
}

.woocommerce form .form-row label {
    color: var(--Text-Secondary, #747587);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 19.6px */
    letter-spacing: 0.14px;
}

.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
    border-radius: var(--corner-radius-medium, 15px) !important;
    border: 1px solid var(--Border-Default, #D7D8DE) !important;
    background: #FFF;
    color: var(--Text-Secondary, #747587) !important;
    font-family: Montserrat !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 150% !important; /* 24px */
    letter-spacing: 0.16px !important;
    height: 48px !important;
    outline: none !important;
}

.woocommerce form .form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-account fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

#account_display_name_description {
    display: none;
}

legend {
    font-weight: bold;
    font-weight: 500;
}

.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
    transform: none;
    top: 0;
    bottom: 0;
    height: 42px;
}

.account-content-area input {
    border-radius: var(--corner-radius-medium, 15px) !important;
    border: 1px solid var(--Border-Default, #D7D8DE) !important;
    background: #FFF;
    color: var(--Text-Secondary, #747587) !important;
    font-family: Montserrat !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 150% !important; /* 24px */
    letter-spacing: 0.16px !important;
    height: 48px !important;
    outline: none !important;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    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'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23747587' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7V12L15 15' stroke='%23747587' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.account-content-area button.button {
    font-family: Montserrat;
    font-size: clamp(10.66666667px, 1.0582vw, 21.33333333px) !important;
    font-weight: 600 !important;
    line-height: normal !important;
    padding: clamp(13.33333333px, 1.3228vw, 26.66666667px);
    border-radius: 20px;
}

.dermocel-select2-drop .select2-results__option {
    overflow: hidden;
    color: var(--Text-Primary, #35363E) !important;
    text-overflow: ellipsis;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
    padding: 8px;
}

.select2-search--dropdown {
    display: none !important;
}

.filter-blog-select-category .select2-container--default .select2-selection--single .select2-selection__rendered, .woocommerce-input-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered, .dermocel-sorting .select2-container--default .select2-selection--single .select2-selection__rendered, .account-content-area .select2-container--default .select2-selection--single .select2-selection__rendered {
    overflow: hidden;
    color: var(--Text-Primary, #35363E);
    text-overflow: ellipsis;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    filter: brightness(0) saturate(100%) invert(52%) sepia(10%) saturate(539%) hue-rotate(199deg) brightness(86%) contrast(88%);
}

p#shipping_country_field {
    width: calc(33% - 15px);
}

p#shipping_address_1_field {
    width: calc(33% - 15px);
}

p#shipping_address_2_field {
    width: calc(33% - 15px);
    justify-content: flex-end;
}

.woocommerce-address-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0 15px;
}

p#shipping_first_name_field {
    width: 100%;
}

p#shipping_last_name_field {
    width: 100%;
}

p#shipping_postcode_field {
    width: 100%;
}

p#shipping_city_field {
    width: 100%;
}

p#shipping_state_field {
    width: 100%;
}

.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
    height: 100% !important;
}

.woocommerce form .form-row .required {
    color: #242424;
}

.checkout-inline-error-message {
    margin-top: -12px;
}

.woocommerce-invalid-required-field .required {
    color: red !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: #00005f;
}

.select2-results__option {
    overflow: hidden;
    color: var(--Text-Primary, #35363E);
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%; /* 24px */
    letter-spacing: 0.16px;
}

.shipping_address {
    margin-top: 20px;
}

.custom-checkout-form .billing-fields-wrap .woocommerce-billing-fields__field-wrapper .form-row, .custom-checkout-form .billing-fields-wrap .woocommerce-shipping-fields__field-wrapper .form-row {
    margin-bottom: 0;
}

.shipping_address .address-field {
    width: 33.3% !important;
}

/* ── Select2 Horizontal Scroll Fix ── */
.select2-container {
    max-width: 100% !important;
}

.select2-dropdown {
    max-width: 100vw !important;
}

html, body {
    overflow-x: hidden !important;
}

.footer-col ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Toast Notifications ── */
.dermocel-toast-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: row !important;
    gap: 10px;
    pointer-events: none;
    justify-content: center !important;
}

.dermocel-toast {
    background: #00005F;
    color: #fff;
    padding: 14px 24px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    justify-content: center !important;
}

.dermocel-toast.active {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

.dermocel-toast .toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
}

.dermocel-toast .toast-icon svg {
    width: 14px;
    height: 14px;
}

.dermocel-toast.success { background: #00005F; }
.dermocel-toast.info { background: #5698DC; }

.woocommerce-error {
    padding-bottom: 1em !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    outline: none !important;
}

.woocommerce-error li {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 140% !important;
    letter-spacing: 0.14px !important;
}

.woocommerce-notices-wrapper {
    outline: none !important;
}

/* ── Inline Checkout Errors ── */
.dermocel-inline-error {
    color: #E03131;
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
    display: block;
    animation: fadeInError 0.3s ease;
    display: none;
}

@keyframes fadeInError {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.woocommerce-checkout .woocommerce-error {
    display: none !important;
}

.woocommerce-invalid input, 
.woocommerce-invalid select {
    border-color: #E03131 !important;
}

.megamenu .megamenu-content .megamenu-image .image-label {
    left: clamp(8.666666666666668px, 0.8598vw, 17.333333333333332px) !important;
	right: inherit !important;
}

.megamenu .megamenu-content .megamenu-close:hover {
    background: #00005f;
}

.megamenu .megamenu-content .megamenu-close:hover path {
    stroke: #fff;
}

.megamenu .megamenu-content .megamenu-close path {
    transition: all .5s ease;
}

.dermocel-sorting .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
}

.dermocel-card-img-wrap img {
    object-fit: contain !important;
    background: #fff;
}

.blog-card-only-text {
    height: auto;
}

.blog-card-only-text .blog-info p {
    margin-top: auto;
}

.qv-name-link:hover {
    color: #5698dc !important;
    text-decoration: underline;
}

.qv-name-link:hover h2 {
    color: #5698dc !important;
}

.qv-qty-btn:hover {
    background: #fff !important;
}

.woocommerce-thankyou-order-received {
    margin-bottom: 10px;
    font-size: 20px;
}

.woocommerce-thankyou-order-details {
    margin-top: 20px !important;
}

.woocommerce-thankyou-order-details .order {
    font-size: 16px !important;
}

.woocommerce ul.order_details li strong {
    font-size: 16px !important;
    color: #00005F;
}

.woocommerce-thankyou-order-details .woocommerce-Price-amount.amount {
    color: #00005F;
}

.checkout-thankyou-page h2 {
    margin-bottom: 8px;
    color: var(--PRINCIPAL, #00005F);
    font-family: Montserrat;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px; /* 150% */
    margin-bottom: 24px;
}

.checkout-thankyou-page table.shop_table {
    border-color: #00005f;
}

.checkout-thankyou-page table.shop_table td a {
    color: #27005f;
}

.checkout-thankyou-page address {
    line-height: 1.7;
    border-color: #00005f !important;
    border-bottom: 1px solid !important;
    border-right: 1px solid !important;
}

.checkout-thankyou-page .container {
    padding-top: 0 !important;
}

.custom-checkout-form .order-review-sticky .checkout-sidebar-coupon-review {
    outline: none !important;
}

.box-thanks-text {
    padding-top: 27vh;
}

.wpcf7 form.sent .wpcf7-response-output {
    display: none !important;
}

#searchOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
    background: rgba(36, 36, 36, 0.60);
    backdrop-filter: blur(5px);
    visibility: hidden;
    opacity: 0;
    transition: all .5s ease;
}

#searchOverlay.active {
    visibility: visible;
    opacity: 1;
}

.page-contacto .privacy-group a {
    color: var(--SECUNDARIO, #5698DC);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0.14px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.order-card .order-actions .btn-repeat {
    white-space: nowrap;
    width: auto;
}

.account-sidebar-user p {word-wrap: break-word;}

.section-header .nav-header ul li a {
    white-space: nowrap;
}

.empresa-sidebar-nav .nav-list li a {
    padding: clamp(13.333333333333332px, 1.3228vw, 26.666666666666668px) 0;
}

.preloader .preloader-content .preloader-logo {
    width: 55% !important;
}

@media (max-width: 600px) {
    .dermocel-toast-container {
        width: calc(100% - 40px);
        bottom: 20px;
    }
    .dermocel-toast {
        width: 100%;
        font-size: 14px;
        padding: 12px 20px;
    }
}

/* --- Thank You Page Design --- */
.checkout-thankyou-page {
    background-color: #F8F9FA;
}
.ty-container {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
}
.thankyou-header-text {
    text-align: center;
    margin-bottom: 38px;
}
.thankyou-title {
    margin-bottom: 15px;
    color: var(--PRINCIPAL, #00005F);
    text-align: center;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 54px; /* 150% */
}
.thankyou-subtitle {
    max-width: 475px;
    margin: 0 auto;
    color: var(--TEXTOS, #242424);
    text-align: center;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 27px; /* 150% */
}

.ty-summary-card {
    background: #fff;
    border-radius: 15px;
    padding: 32px;
    margin-bottom: 37px;
}
.ty-summary-title {
    color: #00005F;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    margin-top: 0;
}
.ty-summary-top {
    padding-bottom: 26px;
    margin-bottom: 24px;
    border-bottom: 1px solid #D7D8DE;
}
.ty-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
.ty-summary-row:last-child {
    margin-bottom: 0;
}
.ty-summary-label {
    color: var(--TEXTOS, #242424);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.ty-summary-val {
    color: var(--TEXTOS, #242424);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.ty-summary-items {
    padding-bottom: 25px;
    margin-bottom: 23px;
    border-bottom: 1px solid #D7D8DE;
}
.ty-item-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.ty-item-row:last-child {
    margin-bottom: 0;
}
.ty-item-img {
    width: 64px;
    height: 64px;
    background: #F8F9FA;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    overflow: hidden;
    border: 1.5px solid var(--Foundation-Neutral-neutral-50, #F2F2F4);
    border-radius: 12px;
}
.ty-item-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.ty-item-info {
    flex-grow: 1;
}
.ty-item-name {
    color: #333;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
}
.ty-item-name a {
    text-decoration: none;
    transition: color 0.3s;
    color: var(--TEXTOS, #242424);
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 22.5px; /* 150% */
}
.ty-item-name a:hover {
    color: #00005F;
    text-decoration: underline;
}
.ty-item-qty {
    color: var(--TEXTOS, #242424);
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 19.5px; /* 150% */
    opacity: .6;
}
.ty-item-price {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.ty-summary-totals {
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.ty-total-row {
    display: flex;
    justify-content: space-between;
    color: var(--TEXTOS, #242424);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
}
.ty-total-row:last-child {
    margin-bottom: 0;
}
.ty-total-row span:last-child {
    color: var(--TEXTOS, #242424);
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px; /* 150% */
}

.ty-summary-grand-total {
    display: flex;
    justify-content: space-between;
    
     /* 150% */
    color: var(--TEXTOS, #242424);
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px; /* 150% */
}

.ty-info-cards {
    display: flex;
    gap: 24px;
    margin-bottom: 37px;
}
.ty-info-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    flex: 1;
    display: flex;
    gap: 16px;
}
.ty-info-icon {
    width: 48px;
    height: 48px;
    background: #F0F4FF;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ty-info-text h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #35363E;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}
.ty-info-text p {
    margin: 0 0 4px 0;
    color: #747587;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
}
.ty-info-highlight {
    color: var(--PRINCIPAL, #00005F) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 21px !important; /* 150% */
}
.ty-info-sub {
    color: #888 !important;
    margin-top: 8px !important;
}

.ty-actions {
    text-align: center;
}
.ty-btn-continue {
    background: #00005F;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 8px;
    display: flex;
    width: 100%;
    transition: background 0.3s;
    height: 60px;
    align-items: center;
    justify-content: center;
    color: var(--FONDOS, #F4F6F8);
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 20px;
}
.ty-btn-continue:hover {
    background: #000040;
}

.ty-bacs-details {
    margin-top: 32px;
    background: #fff;
    padding: 24px;
    border-radius: 12px;
}

.ty-summary-row {
    margin-bottom: 16px;
}

.ty-item-price span {
    color: var(--TEXTOS, #242424);
    font-family: Montserrat;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 22.5px; /* 150% */
}

.ty-info-sub {
    color: #747587;
    font-family: Montserrat;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 18px !important; /* 150% */
}

.ty-info-card:nth-child(2) .ty-info-text p {
    color: #242424;
}

.account-nav-list::-webkit-scrollbar {
    display: none;
}

html {
    margin: 0 !important;
}

.cart-panel__body.is-empty::after {
    display: none !important;
}

.custom-checkout-form .order-review-sticky .checkout-sidebar-coupon-review .checkout_coupon.woocommerce-form-coupon {
    border: 0;
}

.sp-price-now span bdi {
    color: #5698DC;
}

.woocommerce ul#shipping_method li label {
    display: flex;
    gap: 6px;
}

.woocommerce ul#shipping_method li label bdi {
    display: flex !important;
}

.shipping-row span:last-child {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    text-align: start !important;
}

.select2-selection__placeholder {
    font-size: 16px;
}

.account-layout-main .back-to-shop-btn {
    background: #00005F;
    color: #FFFFFF;
    padding: 16px 48px;
    color: var(--FONDOS, #F4F6F8);
    font-family: Montserrat;
    font-size: clamp(10.66666667px, 1.0582vw, 21.33333333px);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: clamp(13.33333333px, 1.3228vw, 26.66666667px);
    border-radius: 20px;
    display: block;
    width: fit-content;
    margin-left: clamp(10.66666667px, 1.0582vw, 21.33333333px);
    position: absolute;
    bottom: -100px;
    left: 0;
}

#wa {
    position: relative;
    z-index: 9999;
}

.products-results .dermocel-products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(6.666666666666666px, 0.6614vw, 13.333333333333334px);
}

.products-results .product-card {
    width: calc(33.3% - clamp(4.666666666666666px, 0.4630vw, 9.333333333333334px));
}

.btn-out-stock {
    display: flex;
    align-items: center;
    gap: clamp(5.33333333px, .5291vw, 10.66666667px);
    border: none !important;
    border-radius: clamp(10px, 1vw, 24px) !important;
    font-family: Montserrat, sans-serif;
    color: #00005F !important;
    transition: all .3s;
    flex: unset;
    padding: clamp(13.33333333px, 1.3228vw, 26.66666667px) !important;
    background: #f4f6f8 !important;
    font-size: clamp(10.66666667px, 1.0582vw, 21.33333333px) !important;
    justify-content: center;
    line-height: 30.5px;
}

.shipping-row span:last-child bdi {
    display: flex;
}

.sp-variant-btn.active {
    background: #00005f !important;
    color: #fff !important;
}

.sp-variant-btn.active span {
    color: #fff !important;
    opacity: 1;
}

.reset_variations_alert.screen-reader-text {
    display: none;
}

.single_variation_wrap {
    display: none !important;
}

small.woocommerce-price-suffix {
    display: none !important;
}

@media (max-width: 768px) {
    .ty-info-cards {
        flex-direction: column;
    }
}