/** Shopify CDN: Minification failed
Line 333:0 Unexpected "}"
**/
/* Smartino Home — Product Page Refinements v3 */
:root {
--sm-text: #0a0a0a;
--sm-text-2: #5a5a5a;
--sm-text-muted: #999;
--sm-line: #ececec;
--sm-bg-soft: #f7f6f3;
--sm-accent: #15b7c6;
--sm-sale: #a33a32;
--sm-ok: #2d7a4a;
--sm-warn: #c89a3e;
--sm-radius-card: 16px;
--sm-radius-pill: 999px;
--sm-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* 1. LAYOUT */
body.template-product .halo-productView-right.productView-details { padding-top: 4px; }
body.template-product .productView-product { max-width: 540px; }
body.template-product .productView-moreItem { margin-top: var(--spacing-top, 0); margin-bottom: var(--spacing-bottom, 0); }
/* 2. BREADCRUMB */
body.template-product .breadcrumb,
body.template-product .productView-moreItem.moreItem-breadcrumb { font-size: 12px; letter-spacing: 0.04em; color: var(--sm-text-2); }
body.template-product .breadcrumb a:hover { color: var(--sm-text); }
/* 3. BRAND / INFO — vendor (prominent, cu linie), SKU + barcode (meta subtle) */
body.template-product .productView-info {
border: 0 !important;
padding: 0 !important;
margin: 0 0 16px !important;
display: flex !important;
flex-wrap: wrap;
gap: 8px 16px;
align-items: center;
}
body.template-product .productView-info .productView-info-item {
display: inline-flex !important;
align-items: center;
gap: 8px;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* ── VENDOR (primul item) — prominent, linie decorativă ────────── */
body.template-product .productView-info .productView-info-item:first-child {
flex: 1 0 100%;
}
body.template-product .productView-info .productView-info-item:first-child::before {
content: "";
width: 24px;
height: 1px;
background: var(--sm-text-2, #6a6a6a);
display: inline-block;
}
body.template-product .productView-info .productView-info-item:first-child .productView-info-name {
display: none !important;
}
body.template-product .productView-info .productView-info-item:first-child .productView-info-value {
font-size: 11px !important;
letter-spacing: 0.25em !important;
font-weight: 600 !important;
text-transform: uppercase !important;
color: var(--sm-text, #0a0a0a) !important;
}
body.template-product .productView-info .productView-info-item:first-child .productView-info-value a {
color: inherit !important;
text-decoration: none !important;
transition: opacity 0.2s ease;
}
body.template-product .productView-info .productView-info-item:first-child .productView-info-value a:hover {
opacity: 0.65;
}
/* ── SKU + BARCODE — meta info, subtle ────────── */
body.template-product .productView-info [data-sku],
body.template-product .productView-info [data-barcode] {
font-size: 10.5px !important;
letter-spacing: 0.06em !important;
color: var(--sm-text-muted, #9a9a9a) !important;
background: rgba(0,0,0,0.025);
padding: 4px 10px !important;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.06);
transition: background 0.2s ease, color 0.2s ease;
}
body.template-product .productView-info [data-sku]:hover,
body.template-product .productView-info [data-barcode]:hover {
background: rgba(21,183,198,0.06);
color: var(--sm-text-2, #4a4a4a) !important;
}
body.template-product .productView-info [data-sku] .productView-info-name,
body.template-product .productView-info [data-barcode] .productView-info-name {
display: inline-block !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
font-size: 9.5px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
font-weight: 700 !important;
color: #3a3a3a !important;
opacity: 1;
}
body.template-product .productView-info [data-sku] .productView-info-value,
body.template-product .productView-info [data-barcode] .productView-info-value {
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace !important;
font-size: 11.5px !important;
letter-spacing: 0.02em !important;
font-weight: 600 !important;
color: #1a1a1a !important;
}
/* Mobile — ensure tags stay clean and wrap nicely */
@media (max-width: 768px) {
body.template-product .productView-info {
gap: 6px 8px;
}
body.template-product .productView-info [data-sku],
body.template-product .productView-info [data-barcode] {
padding: 3px 8px !important;
font-size: 10px !important;
}
body.template-product .productView-info [data-sku] .productView-info-name,
body.template-product .productView-info [data-barcode] .productView-info-name {
font-size: 8.5px !important;
}
body.template-product .productView-info [data-sku] .productView-info-value,
body.template-product .productView-info [data-barcode] .productView-info-value {
font-size: 10.5px !important;
}
}
/* 4. TITLE */
body.template-product .productView-title {
font-size: 38px !important; font-weight: 400 !important; line-height: 1.1 !important;
letter-spacing: -0.01em !important; margin: 0 0 14px !important; color: var(--sm-text);
}
@media (max-width: 720px) {
body.template-product .productView-title { font-size: 28px !important; }
}
/* 5. PRICE — sale: NEW (large) + OLD (small strike) + Economisești badge
Scoped to .productView-price so product cards on the product page are untouched. */
body.template-product .productView-price { margin-bottom: 4px; }
body.template-product .productView-price .price { align-items: baseline; }
body.template-product .productView-price .price dl {
display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
margin: 0 !important; padding: 0 !important;
}
/* Both states render as flex rows so we can control visual order of children */
body.template-product .productView-price .price__regular,
body.template-product .productView-price .price__sale {
display: flex !important;
align-items: baseline !important;
gap: 12px !important;
flex-wrap: wrap !important;
margin: 0 !important;
}
body.template-product .productView-price .price:not(.price--on-sale) .price__sale { display: none !important; }
body.template-product .productView-price .price.price--on-sale .price__regular { display: none !important; }
/* Reset dd/dt margins inside price */
body.template-product .productView-price .price dd,
body.template-product .productView-price .price dt { margin: 0 !important; padding: 0 !important; }
/* VISUAL ORDER inside .price__sale: NEW price first → OLD strike → Economisești → percent */
body.template-product .productView-price .price__sale .price__last { order: 1 !important; }
body.template-product .productView-price .price__sale .price__compare { order: 2 !important; }
body.template-product .productView-price .price__sale .price__saved { order: 3 !important; }
body.template-product .productView-price .price__sale .price__label_sale,
body.template-product .productView-price .price__sale .price__label_percent { order: 4 !important; }
/* NEW (sale) price + regular price — large */
body.template-product .productView-price .price .price-item--regular,
body.template-product .productView-price .price .price-item--sale {
font-size: 32px !important;
font-weight: 500 !important;
letter-spacing: -0.01em !important;
color: var(--sm-text) !important;
line-height: 1.1 !important;
}
/* OLD (compare) price — small, muted, strikethrough */
body.template-product .productView-price .price__compare,
body.template-product .productView-price .price__compare s,
body.template-product .productView-price .price__compare .price-item,
body.template-product .productView-price .price__compare .price-item--regular {
font-size: 17px !important;
font-weight: 400 !important;
color: var(--sm-text-muted) !important;
text-decoration: line-through !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
}
/* "Economisești X lei" — accent badge, baseline-aligned with prices */
body.template-product .productView-price .price__saved {
display: inline-flex !important;
align-items: baseline !important;
align-self: baseline !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border-radius: 0 !important;
line-height: 1.1 !important;
}
body.template-product .productView-price .price__saved,
body.template-product .productView-price .price-item--saved {
font-size: 13px !important;
font-weight: 600 !important;
color: #d62828 !important; /* vibrant red, brighter than --sm-sale brown */
letter-spacing: 0.02em !important;
background: none !important;
padding: 0 !important;
border-radius: 0 !important;
text-transform: none !important;
line-height: 1.1 !important;
vertical-align: baseline !important;
}
body.template-product .productView-price .price-item--saved {
display: inline !important;
}
/* Hide redundant percent label (Economisești already says how much you save) */
body.template-product .productView-price .price .label_sale_percent,
body.template-product .productView-price .price__label_sale,
body.template-product .productView-price .price__label_percent {
display: none !important;
}
/* Keep visually-hidden truly hidden but accessible */
body.template-product .productView-price .price .visually-hidden {
position: absolute !important; clip: rect(0 0 0 0) !important;
}
@media (max-width: 720px) {
body.template-product .productView-price .price .price-item--regular,
body.template-product .productView-price .price .price-item--sale { font-size: 26px !important; }
body.template-product .productView-price .price__compare,
body.template-product .productView-price .price__compare s,
body.template-product .productView-price .price__compare .price-item--regular { font-size: 15px !important; }
}
/* Hide subtotal duplicate (already disabled via JSON, defensive) */
body.template-product .productView-subtotal,
body.template-product .subtotal-product { display: none !important; }
/* 6. CUSTOMER VIEWING — tight spacing to next block */
body.template-product .productView-ViewingProduct {
display: inline-flex !important; align-items: center; gap: 8px;
font-size: 12px !important; color: var(--sm-text-2) !important;
padding: 6px 0 0 !important; margin: 0 !important;
background: none !important; border: 0 !important;
}
body.template-product .productView-moreItem:has(.productView-ViewingProduct) {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.template-product .productView-moreItem:has(.productView-hotStock) {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.template-product .productView-ViewingProduct svg,
body.template-product .productView-ViewingProduct img { display: none !important; }
body.template-product .productView-ViewingProduct::before {
content: ""; width: 7px; height: 7px; background: var(--sm-accent);
border-radius: 50%; display: inline-block;
animation: sm-pulse 2s infinite;
}
body.template-product .productView-ViewingProduct .text { font-size: 12px !important; color: var(--sm-text-2) !important; }
@keyframes sm-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(21,183,198,0.5); }
50% { box-shadow: 0 0 0 6px rgba(21,183,198,0); }
}
body.template-product .productView-ViewingProduct .text { font-size: 12px !important; color: var(--sm-text-2) !important; }
/* 7. STOCK INDICATOR — matches Halo's .productView-hotStock */
body.template-product .productView-hotStock {
background: none !important;
border: 0 !important;
padding: 14px 0 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
font-size: 12px;
color: var(--sm-text-2);
}
body.template-product .productView-hotStock::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--sm-warn);
flex-shrink: 0;
display: inline-block;
animation: sm-pulse-warn 2s infinite;
}
body.template-product .productView-hotStock .hotStock-text {
font-size: 12px !important;
font-weight: 400 !important;
color: var(--sm-text-2) !important;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1.4 !important;
}
body.template-product .productView-hotStock .hotStock-text strong,
body.template-product .productView-hotStock .hotStock-text b {
color: var(--sm-text) !important;
font-weight: 600 !important;
}
/* Hide the progress bar — clutter */
body.template-product .productView-hotStock .hotStock-progress,
body.template-product .productView-hotStock .hotStock-progress-item {
display: none !important;
}
body.template-product .productView-hotStock.is-hide {
display: none !important;
}
@keyframes sm-pulse-warn {
0%, 100% { box-shadow: 0 0 0 0 rgba(200,154,62,0.5); }
50% { box-shadow: 0 0 0 6px rgba(200,154,62,0); }
}
}
body.template-product .productView-stock .progress-bar,
body.template-product .productView-stock .progress,
body.template-product .productView-hot-stock .progress-bar,
body.template-product .productView-hot-stock .progress { display: none !important; }
/* 8. VARIANT PICKER — swatches & sizes */
body.template-product .productView-options { margin: 18px 0 0; }
body.template-product .product-form__input { padding: 18px 0 0 !important; border: 0 !important; margin: 0 !important; }
body.template-product .product-form__input .form__label {
display: flex !important; justify-content: space-between; align-items: center;
font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--sm-text);
margin-bottom: 12px; padding: 0; text-transform: none;
}
body.template-product .product-form__input .form__label [data-header-option] {
color: var(--sm-text-2); font-weight: 400; font-size: 13px; margin-left: 4px;
}
body.template-product .product-form__swatch { display: block; }
body.template-product .product-form__swatch .product-form__label {
width: 38px !important; height: 38px !important; padding: 0 !important;
margin: 0 10px 0 0 !important; border-radius: 50% !important;
border: 1px solid var(--sm-line) !important; overflow: visible !important;
position: relative; background: transparent !important;
transition: transform 0.2s var(--sm-ease), border-color 0.2s !important;
}
body.template-product .product-form__swatch .product-form__label:hover { transform: scale(1.06); }
body.template-product .product-form__swatch .product-form__label .pattern {
display: block !important; width: 100% !important; height: 100% !important;
border-radius: 50% !important; border: 0 !important;
background-size: cover !important; background-position: center !important;
}
body.template-product .product-form__swatch .product-form__radio:checked + .product-form__label { border-color: var(--sm-text) !important; }
body.template-product .product-form__swatch .product-form__radio:checked + .product-form__label::after {
content: ""; position: absolute; inset: -5px;
border: 1px solid var(--sm-text); border-radius: 50%; pointer-events: none;
}
body.template-product .product-form__swatch .product-form__label.soldout { opacity: 0.35; }
body.template-product .product-form__input:not(.product-form__swatch) variant-radios {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
body.template-product .product-form__input:not(.product-form__swatch) .product-form__label {
display: flex !important; align-items: center; justify-content: center;
padding: 14px 8px !important; text-align: center !important;
font-size: 13px !important; font-weight: 500 !important;
border: 1px solid var(--sm-line) !important; border-radius: 10px !important;
background: #fff !important; color: var(--sm-text) !important;
transition: all 0.2s !important; position: relative;
width: 100% !important; min-width: 0 !important; margin: 0 !important;
}
body.template-product .product-form__input:not(.product-form__swatch) .product-form__label:hover { border-color: #999 !important; }
body.template-product .product-form__input:not(.product-form__swatch) .product-form__radio:checked + .product-form__label {
background: var(--sm-text) !important; color: #fff !important; border-color: var(--sm-text) !important;
}
body.template-product .product-form__input:not(.product-form__swatch) .product-form__label.soldout {
color: var(--sm-text-muted) !important; background: var(--sm-bg-soft) !important; cursor: not-allowed !important;
}
body.template-product .product-form__input:not(.product-form__swatch) .product-form__radio { display: none; }
/* 9. QUANTITY + ATC — AGGRESSIVE FIX */
/* Target Halo's actual structure: form > .productView-product-cart > qty + buttons */
body.template-product .productView-product-cart,
body.template-product form.form-product,
body.template-product .product-form__buttons,
body.template-product form[action*="/cart/add"] .productView-quantity ~ * {
margin-top: 6px !important;
}
/* Quantity input web-component */
body.template-product quantity-input,
body.template-product .productView-quantity {
display: inline-flex !important;
align-items: stretch !important;
border: 1px solid var(--sm-line) !important;
border-radius: var(--sm-radius-pill) !important;
height: 56px !important; min-height: 56px !important; max-height: 56px !important;
overflow: hidden !important;
background: #fff !important;
width: 130px !important; min-width: 130px !important; flex-shrink: 0;
padding: 0 !important; margin: 0 !important;
box-sizing: border-box !important;
vertical-align: top;
}
body.template-product .productView-quantity .quantity__label,
body.template-product quantity-input .quantity__label { display: none !important; }
body.template-product .productView-quantity .quantity__container,
body.template-product quantity-input .quantity__container {
display: flex !important; align-items: stretch !important;
width: 100% !important; height: 100% !important;
flex-direction: row !important;
}
body.template-product .productView-quantity .btn-quantity,
body.template-product quantity-input .btn-quantity {
width: 42px !important; height: 100% !important; min-height: 100% !important;
font-size: 14px !important; line-height: 1 !important;
color: var(--sm-text-2) !important; background: transparent !important;
border: 0 !important; padding: 0 !important; margin: 0 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
cursor: pointer; transition: color 0.2s;
flex-shrink: 0;
}
body.template-product .productView-quantity .btn-quantity:hover,
body.template-product quantity-input .btn-quantity:hover { color: var(--sm-text) !important; }
body.template-product .quantity__input {
flex: 1 1 auto !important; width: auto !important; min-width: 0 !important;
text-align: center !important; font-weight: 600 !important;
border: 0 !important; background: transparent !important;
padding: 0 !important; margin: 0 !important;
font-size: 15px !important; color: var(--sm-text) !important;
height: 100% !important; max-height: 100% !important;
line-height: 1 !important;
-moz-appearance: textfield;
box-sizing: border-box !important;
}
body.template-product .quantity__input::-webkit-outer-spin-button,
body.template-product .quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ATC button — broad selectors */
body.template-product .product-form__cart-submit,
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit,
body.template-product .productView-form__cart-submit,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"],
body.template-product .btn-atc-product,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart,
body.template-product button.add-to-cart,
body.template-product .add-to-cart {
width: 100% !important; height: 56px !important; min-height: 56px !important;
background: var(--sm-text) !important; color: #fff !important;
border: 0 !important; border-radius: var(--sm-radius-pill) !important;
font-size: 13px !important; font-weight: 600 !important;
letter-spacing: 0.12em !important; text-transform: uppercase !important;
cursor: pointer; transition: background 0.3s var(--sm-ease) !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 12px; padding: 0 28px !important;
margin: 0 !important;
}
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover,
body.template-product .btn-atc-product:hover,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover {
background: var(--sm-accent) !important;
}
/* SOLD OUT state */
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"][disabled],
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"][aria-disabled="true"],
body.template-product .product-form__cart-submit[disabled],
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart[disabled],
body.template-product .sold-out-product button {
background: var(--sm-text-muted) !important;
color: #fff !important;
cursor: not-allowed !important;
opacity: 1 !important;
}
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"][disabled]:hover { background: var(--sm-text-muted) !important; }
/* Layout: quantity + ATC on same row */
body.template-product .productView-product-cart {
display: flex !important;
align-items: stretch !important;
gap: 10px !important;
flex-wrap: nowrap !important;
}
body.template-product .productView-product-cart > .productView-quantity,
body.template-product .productView-product-cart > quantity-input { flex-shrink: 0; }
body.template-product .productView-product-cart > .productView-form__cart-submit,
body.template-product .productView-product-cart > button[name="add"],
body.template-product .productView-product-cart > .product-form__submit,
body.template-product .productView-product-cart > form,
body.template-product .productView-product-cart .product-form,
body.template-product .productView-product-cart .product-form__buttons { flex: 1 1 auto; min-width: 0; }
/* Dynamic checkout (Shop Pay) below ATC */
body.template-product .shopify-payment-button {
margin-top: 10px !important;
}
body.template-product .shopify-payment-button__button {
border-radius: var(--sm-radius-pill) !important; font-weight: 600 !important;
letter-spacing: 0.12em !important; text-transform: uppercase !important;
font-size: 13px !important; height: 54px !important;
}
body.template-product .shopify-payment-button__button--unbranded {
background: #fff !important; color: var(--sm-text) !important;
border: 1px solid var(--sm-text) !important;
}
body.template-product .shopify-payment-button__button--unbranded:hover {
background: var(--sm-text) !important; color: #fff !important;
}
/* Wishlist + Share circles — position OUTSIDE the main ATC row but inside form area */
body.template-product .productView-actions,
body.template-product .product-actions,
body.template-product .wishlist-share-actions,
body.template-product .productView-product-cart + .productView-actions {
display: inline-flex !important; gap: 10px; align-items: center;
margin-top: 14px !important;
}
body.template-product .productView-actions a,
body.template-product .productView-actions button,
body.template-product .product-actions a,
body.template-product .product-actions button,
body.template-product .button-wishlist,
body.template-product .button-share,
body.template-product a.btn-wishlist,
body.template-product a.btn-share {
width: 44px !important; height: 44px !important;
background: #fff !important;
border: 1px solid var(--sm-line) !important;
border-radius: 50% !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
transition: background 0.2s, color 0.2s, border-color 0.2s;
padding: 0 !important;
}
body.template-product .productView-actions a:hover,
body.template-product .productView-actions button:hover,
body.template-product .button-wishlist:hover,
body.template-product .button-share:hover {
background: var(--sm-text) !important; color: #fff !important; border-color: var(--sm-text) !important;
}
body.template-product .productView-actions svg,
body.template-product .button-wishlist svg,
body.template-product .button-share svg { width: 18px !important; height: 18px !important; }
/* Back-in-stock subscribe (sold out) */
body.template-product .product-notify-form,
body.template-product .back-in-stock,
body.template-product .notify-me-form,
body.template-product .productView-notify {
margin-top: 14px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
}
body.template-product .product-notify-form .title,
body.template-product .back-in-stock .title,
body.template-product .product-notify-form h3,
body.template-product .product-notify-form h4,
body.template-product .productView-notify .title {
font-size: 13px !important; font-weight: 500 !important;
text-transform: none !important; letter-spacing: 0 !important;
color: var(--sm-text-2) !important;
margin-bottom: 10px !important;
}
body.template-product .product-notify-form input[type="email"],
body.template-product .back-in-stock input[type="email"],
body.template-product .notify-me-form input[type="email"],
body.template-product .productView-notify input[type="email"] {
height: 52px !important;
border: 1px solid var(--sm-line) !important;
border-radius: var(--sm-radius-pill) !important;
padding: 0 22px !important;
font-size: 14px !important;
background: #fff !important;
}
body.template-product .product-notify-form button,
body.template-product .back-in-stock button,
body.template-product .notify-me-form button,
body.template-product .productView-notify button {
height: 52px !important;
background: var(--sm-text) !important; color: #fff !important;
border: 0 !important; border-radius: var(--sm-radius-pill) !important;
font-size: 12px !important; font-weight: 600 !important;
letter-spacing: 0.12em !important; text-transform: uppercase !important;
padding: 0 28px !important;
}
body.template-product .product-notify-form button:hover { background: var(--sm-accent) !important; }
/* 10. SMARTINO snippets */
.sm-delivery {
background: var(--sm-bg-soft); border-radius: 12px; padding: 14px 16px;
display: flex; gap: 12px; align-items: flex-start;
font-size: 13px; color: var(--sm-text); line-height: 1.55;
}
.sm-delivery__icon { width: 18px; height: 18px; stroke: var(--sm-text); flex-shrink: 0; margin-top: 2px; }
.sm-delivery__text strong { font-weight: 600; }
.sm-delivery__text small { display: block; margin-top: 4px; font-size: 12px; color: var(--sm-text-2); }
.sm-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.sm-trust__item {
display: flex; align-items: center; gap: 12px;
background: var(--sm-bg-soft); border-radius: 12px; padding: 14px 16px;
}
.sm-trust__icon {
width: 36px; height: 36px; background: #fff; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sm-trust__icon svg { width: 16px; height: 16px; stroke: var(--sm-text); }
.sm-trust__text { display: flex; flex-direction: column; min-width: 0; }
.sm-trust__title { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--sm-text); }
.sm-trust__sub { font-size: 11px; color: var(--sm-text-2); margin-top: 2px; letter-spacing: 0.01em; }
/* Keep 2x2 grid on mobile too — just tighten gap & padding */
@media (max-width: 480px) {
.sm-trust { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.sm-trust__item { padding: 10px 12px !important; }
.sm-trust__title { font-size: 12px !important; }
.sm-trust__sub { font-size: 10.5px !important; }
}
/* ============================================================
STICKY ATC visibility — hide while the main ATC is in view,
show only after the user scrolls past it (uses IntersectionObserver
for precise tracking; falls back to theme's existing scroll logic
that toggles `.show-sticky` on the same element).
============================================================ */
/* Override theme's "always-on-mobile" rule that forces sticky visible
regardless of scroll — defer to JS-managed `.show-sticky` instead. */
@media (max-width: 767px) {
body.template-product .productView-stickyCart.style-1.always-on-mobile {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(100%) !important;
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s ease !important;
}
body.template-product .productView-stickyCart.style-1.always-on-mobile.sm-visible,
body.template-product .productView-stickyCart.style-1.always-on-mobile.show-sticky {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
}
/* Desktop: same precise behavior via sm-visible class */
body.template-product .productView-stickyCart.sm-visible {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* === STICKY ATC mobile ===
IMPORTANT: On <=991px, Halo HIDES `.sticky-actions form` and SHOWS
`.empty-add-cart-button-wrapper` instead. The visible elements are:
.sticky-actions
└─ .empty-add-cart-button-wrapper (display: block on mobile)
├─ quantity-input (.productView-quantity)
└─ button#show-sticky-product
So we layout & style THIS wrapper, not .sticky-actions-row. */
@media (max-width: 767px) {
body.template-product .productView-stickyCart.style-1 .sticky-right .sticky-actions {
flex: 1 1 auto !important;
min-width: 0 !important;
width: 100% !important;
}
/* Make the visible wrapper a flex row with gap, full width */
body.template-product .productView-stickyCart.style-1 .sticky-actions .empty-add-cart-button-wrapper {
display: flex !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
padding-right: 0 !important;
margin: 0 !important;
}
/* Qty inside wrapper — fixed width, no margin (gap handles spacing) */
body.template-product .productView-stickyCart.style-1 .sticky-actions .empty-add-cart-button-wrapper .productView-quantity,
body.template-product .productView-stickyCart.style-1 .sticky-actions .empty-add-cart-button-wrapper .quantity__group {
margin: 0 !important;
flex: 0 0 auto !important;
}
/* The visible ATC button (#show-sticky-product) — grow to fill */
body.template-product .productView-stickyCart.style-1 .sticky-actions .empty-add-cart-button-wrapper > .product-form__submit,
body.template-product .productView-stickyCart.style-1 .sticky-actions .empty-add-cart-button-wrapper > button,
body.template-product #show-sticky-product {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
}
}
.sm-payments {
display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap;
font-size: 11px; color: var(--sm-text-2); letter-spacing: 0.04em; padding: 4px 0;
line-height: 1.8;
}
.sm-payments__label { font-weight: 500; margin-right: 4px; }
.sm-payments__list { display: inline-flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.sm-payments__sep { opacity: 0.35; }
/* 13. SHARE block (the standalone one, not the actions) */
body.template-product .productView-share,
body.template-product .product__share {
display: none !important; /* hide standalone share, we use Halo's .productView-actions circles */
}
/* 14. ACCORDION */
body.template-product .tab__title,
body.template-product .productView-description-title,
body.template-product .product-tabs__title,
body.template-product .accordion__title,
body.template-product .productView-customInformation-title,
body.template-product .accordion-title,
body.template-product .productView-tab-title {
font-size: 13px !important; font-weight: 500 !important;
letter-spacing: 0.12em !important; text-transform: uppercase !important;
padding: 20px 0 !important; border: 0 !important;
border-bottom: 1px solid var(--sm-line) !important;
color: var(--sm-text); background: none !important;
}
body.template-product .tab__content,
body.template-product .accordion__content,
body.template-product .productView-tab-content {
padding: 0 0 22px !important; font-size: 14px; color: var(--sm-text-2); line-height: 1.7;
}
/* 15. STICKY ATC */
body.template-product .stickyAddToCart,
body.template-product .product-sticky-form,
body.template-product .sticky-add-to-cart {
background: rgba(255,255,255,0.97) !important;
backdrop-filter: saturate(180%) blur(12px);
border-top: 1px solid var(--sm-line) !important;
}
body.template-product .stickyAddToCart .btn,
body.template-product .stickyAddToCart button[name="add"] {
border-radius: var(--sm-radius-pill) !important;
background: var(--sm-text) !important; color: #fff !important;
font-weight: 600 !important; letter-spacing: 0.12em !important;
text-transform: uppercase !important; font-size: 12px !important;
}
body.template-product .stickyAddToCart .btn:hover { background: var(--sm-accent) !important; }
/* 16. GALLERY */
body.template-product .halo-productView-left .productView-images,
body.template-product .productView-images-wrapper { border-radius: var(--sm-radius-card); overflow: hidden; }
body.template-product .productView-image,
body.template-product .productView-images img { border-radius: var(--sm-radius-card); }
/* 17. BADGES — separate pill per badge type (NEW = black, SALE = red, SOLD OUT = gray) */
/* Container is just a transparent stack — never paint a bg on it */
body.template-product .productView-badge,
body.template-product .halo-productBadges {
background: transparent !important;
padding: 0 !important;
border-radius: 0 !important;
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
pointer-events: none !important;
}
/* Each badge pill — base style */
body.template-product .productView-badge .badge,
body.template-product .halo-productBadges .badge,
body.template-product .label_sale {
background: var(--sm-text) !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
border-radius: 999px !important;
padding: 8px 16px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
}
/* NEW badge — black (default) */
body.template-product .productView-badge .new-badge,
body.template-product .halo-productBadges .new-badge {
background: var(--sm-text) !important;
color: #fff !important;
}
/* SALE badge — red */
body.template-product .productView-badge .sale-badge,
body.template-product .halo-productBadges .sale-badge,
body.template-product .label_sale:not(.sold-out):not(.label_sale_soldout) {
background: #d62828 !important;
color: #fff !important;
}
/* SOLD OUT — muted gray */
body.template-product .productView-badge .sold-out-badge,
body.template-product .halo-productBadges .sold-out-badge,
body.template-product .badge.badge--sold-out,
body.template-product .label_sale.sold-out,
body.template-product .label_sale_soldout {
background: var(--sm-text-muted) !important;
color: #fff !important;
}
/* Custom / Bundle badges — accent */
body.template-product .productView-badge .custom-badge,
body.template-product .halo-productBadges .custom-badge,
body.template-product .productView-badge .bundle-badge,
body.template-product .halo-productBadges .bundle-badge {
background: var(--sm-accent, #15b7c6) !important;
color: #fff !important;
}
/* 18. RESPONSIVE */
@media (max-width: 1024px) { body.template-product .productView-product { max-width: 100%; } }
@media (max-width: 720px) {
body.template-product .productView-product-cart { grid-template-columns: 100px 1fr !important; }
body.template-product .productView-title { font-size: 26px !important; }
/* Scoped to MAIN product price only — not cards in carousels */
body.template-product .productView-price .price .price-item--regular,
body.template-product .productView-price .price .price-item--sale { font-size: 26px !important; }
.sm-delivery, .sm-trust__item { padding: 12px 14px; }
body.template-product quantity-input,
body.template-product .productView-quantity { width: 110px !important; min-width: 110px !important; }
}
@media (prefers-reduced-motion: reduce) {
body.template-product *, body.template-product *::before, body.template-product *::after {
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Payments — official Shopify SVG icons */
.sm-payments,
body.template-product .sm-payments {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
font-size: 12px;
color: var(--sm-text-2);
letter-spacing: 0.02em;
padding: 4px 0;
margin: 0;
}
.sm-payments__label,
body.template-product .sm-payments__label {
font-weight: 500;
flex-shrink: 0;
font-size: 12px;
color: var(--sm-text-2);
}
.sm-payments__list,
body.template-product .sm-payments__list {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.sm-payments__item,
body.template-product .sm-payments__item {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
line-height: 0 !important;
}
.sm-pay-icon,
body.template-product .sm-pay-icon,
body.template-product .sm-payments .icon,
body.template-product .sm-payments svg {
width: 38px !important;
height: 24px !important;
min-width: 38px !important;
display: block !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
box-shadow: 0 0 0 1px rgba(0,0,0,0.06) !important;
}
.sm-payments__sep { display: none !important; }
/* Trust grid icons — force outlined */
.sm-trust__icon svg,
body.template-product .sm-trust__icon svg {
fill: none !important;
stroke: var(--sm-text) !important;
stroke-width: 1.6 !important;
}
.sm-trust__icon svg path,
.sm-trust__icon svg circle,
.sm-trust__icon svg rect,
.sm-trust__icon svg line,
body.template-product .sm-trust__icon svg path,
body.template-product .sm-trust__icon svg circle,
body.template-product .sm-trust__icon svg rect,
body.template-product .sm-trust__icon svg line {
fill: none !important;
stroke: var(--sm-text) !important;
stroke-width: 1.6 !important;
vector-effect: non-scaling-stroke;
}
.sm-delivery__icon,
body.template-product .sm-delivery__icon,
body.template-product .sm-delivery svg {
fill: none !important;
stroke: var(--sm-text) !important;
stroke-width: 1.6 !important;
}
body.template-product .sm-delivery svg path,
body.template-product .sm-delivery svg circle,
body.template-product .sm-delivery svg rect {
fill: none !important;
stroke: var(--sm-text) !important;
}
/* Wishlist + Share buttons: same height as ATC (56px) */
body.template-product .productView-actions a,
body.template-product .productView-actions button,
body.template-product .product-actions a,
body.template-product .product-actions button,
body.template-product .button-wishlist,
body.template-product .button-share,
body.template-product a.btn-wishlist,
body.template-product a.btn-share,
body.template-product .productView-product-cart .productView-actions a,
body.template-product .productView-product-cart .productView-actions button {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
border-radius: 50% !important;
background: #fff !important;
border: 1px solid var(--sm-line) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
transition: background 0.2s, border-color 0.2s, color 0.2s;
}
body.template-product .productView-actions a:hover,
body.template-product .productView-actions button:hover,
body.template-product .button-wishlist:hover,
body.template-product .button-share:hover {
background: var(--sm-text) !important;
color: #fff !important;
border-color: var(--sm-text) !important;
}
body.template-product .productView-actions svg,
body.template-product .button-wishlist svg,
body.template-product .button-share svg {
width: 20px !important;
height: 20px !important;
stroke-width: 1.6;
}
body.template-product .productView-actions {
gap: 10px !important;
margin-top: 0 !important;
align-items: center !important;
}
/* Wishlist — Halo's .productView-wishlist > a structure */
body.template-product .productView-wishlist,
body.template-product .productView-wishlist a {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
border-radius: 50% !important;
}
body.template-product .productView-wishlist {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
}
body.template-product .productView-wishlist a {
background: #fff !important;
border: 1px solid var(--sm-line) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
color: var(--sm-text) !important;
transition: background 0.2s, border-color 0.2s, color 0.2s !important;
padding: 0 !important;
margin: 0 !important;
}
body.template-product .productView-wishlist a:hover {
background: var(--sm-text) !important;
border-color: var(--sm-text) !important;
color: #fff !important;
}
body.template-product .productView-wishlist .icon-wishlist,
body.template-product .productView-wishlist svg {
width: 20px !important;
height: 20px !important;
fill: currentColor !important;
stroke: none !important;
}
/* === FORCE qty input centering — override Halo's asymmetric padding === */
body.template-product .quantity__style--1 .quantity__input,
body.template-product .quantity__style--2 .quantity__input,
body.template-product .productView-quantity .quantity__input,
body.template-product .productView-quantity input.quantity__input,
body.template-product .productView-quantity input[type="number"],
body.template-product .quantity__group input.quantity__input {
padding: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center !important;
-moz-text-align-last: center !important;
text-align-last: center !important;
width: 100% !important;
margin: 0 !important;
}
/* === FINAL fix: shift "1" optically to the right === */
body.template-product .productView-quantity .quantity__input,
body.template-product .productView-quantity input[type="number"],
body.template-product .productView-quantity input.quantity__input {
padding: 0 0 0 8px !important;
padding-left: 8px !important;
padding-right: 0 !important;
text-align: center !important;
text-align-last: center !important;
text-indent: 0 !important;
}
/* === Grid layout for symmetric qty: 3 equal columns === */
body.template-product .productView-quantity .quantity__container {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
align-items: stretch !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
gap: 0 !important;
}
body.template-product .productView-quantity .btn-quantity {
width: 100% !important;
flex: none !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
/* Halo's bars in column-centered buttons */
body.template-product .productView-quantity .btn-quantity.minus:before,
body.template-product .productView-quantity .btn-quantity.plus:before {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
width: 12px !important;
height: 1.5px !important;
background: var(--sm-text-2) !important;
}
body.template-product .productView-quantity .btn-quantity.plus:after {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) rotate(90deg) !important;
width: 12px !important;
height: 1.5px !important;
background: var(--sm-text-2) !important;
}
body.template-product .productView-quantity input.quantity__input {
width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
text-align: center !important;
text-align-last: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
}
/* === FINAL FINAL fix: text-align on input via highest-specificity selector === */
body.template-product .productView-quantity .quantity__container input.quantity__input,
body.template-product .productView-quantity .quantity__container input[type="number"],
html body.template-product input.quantity__input[type="number"],
html body.template-product .quantity__style--1 input.quantity__input,
html body.template-product .quantity__group input.quantity__input {
display: inline-block !important;
text-align: center !important;
text-align-last: center !important;
padding: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
border: 0 !important;
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
background: transparent !important;
font: inherit !important;
font-weight: 600 !important;
font-size: 15px !important;
color: var(--sm-text) !important;
line-height: 54px !important;
direction: ltr !important;
unicode-bidi: normal !important;
vertical-align: middle !important;
-webkit-appearance: none !important;
-moz-appearance: textfield !important;
appearance: none !important;
box-sizing: border-box !important;
}
/* === Compensate "1" glyph left-bias with tabular-nums + tiny indent === */
html body.template-product input.quantity__input[type="number"] {
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1 !important;
}
/* === FINAL Quantity: matches user's verified working script === */
html body.template-product .quantity__container {
display: flex !important;
align-items: stretch !important;
justify-content: center !important;
gap: 0 !important;
grid-template-columns: none !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
}
html body.template-product .productView-quantity,
html body.template-product quantity-input.productView-quantity {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid var(--sm-line) !important;
border-radius: 999px !important;
background: #fff !important;
height: 54px !important;
width: auto !important;
min-width: 130px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
html body.template-product .productView-quantity .quantity__label { display: none !important; }
html body.template-product .quantity__container .btn-quantity {
flex: 0 0 auto !important;
width: 40px !important;
height: 54px !important;
position: relative !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
display: grid !important;
place-items: center !important;
background: transparent !important;
cursor: pointer !important;
font-size: 0 !important;
}
/* Pseudo bars - explicit overrides for Halo's asymmetric positioning */
html body.template-product .quantity__container .btn-quantity::before,
html body.template-product .quantity__container .btn-quantity::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
width: 12px !important;
height: 1.5px !important;
background: var(--sm-text-2) !important;
transform: translate(-50%, -50%) !important;
}
html body.template-product .quantity__container button[name="plus"]::after {
transform: translate(-50%, -50%) rotate(90deg) !important;
}
html body.template-product .quantity__container button[name="minus"]::after {
content: none !important;
}
html body.template-product .quantity__container .btn-quantity:hover::before,
html body.template-product .quantity__container .btn-quantity:hover::after {
background: var(--sm-text) !important;
}
html body.template-product .quantity__container input.quantity__input {
flex: 0 0 50px !important;
width: 50px !important;
min-width: 50px !important;
max-width: 50px !important;
text-align: center !important;
text-align-last: center !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
font: inherit !important;
font-weight: 600 !important;
font-size: 15px !important;
color: var(--sm-text) !important;
height: 54px !important;
line-height: 54px !important;
font-variant-numeric: tabular-nums !important;
font-feature-settings: "tnum" 1 !important;
-moz-appearance: textfield !important;
-webkit-appearance: none !important;
appearance: none !important;
box-sizing: border-box !important;
direction: ltr !important;
}
html body.template-product input.quantity__input::-webkit-outer-spin-button,
html body.template-product input.quantity__input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
appearance: none !important;
margin: 0 !important;
display: none !important;
}
/* === SPACING between qty / ATC / wishlist === */
body.template-product .pvGroup-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: nowrap !important;
}
body.template-product .pvGroup-row > .productView-quantity { flex-shrink: 0 !important; }
body.template-product .pvGroup-row > .productView-groupTop {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
}
body.template-product .productView-groupTop .productView-action {
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
}
body.template-product .productView-groupTop .productView-wishlist {
flex-shrink: 0 !important;
margin-left: 0 !important;
}
body.template-product .product-form__buttons {
display: flex !important;
align-items: center !important;
gap: 12px !important;
flex-wrap: nowrap !important;
margin: 0 !important;
}
/* === SWAP backgrounds: white boxes, cream icon circles === */
.sm-delivery,
body.template-product .sm-delivery {
background: #fff !important;
border: 1px solid var(--sm-line) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
display: flex !important;
gap: 14px !important;
align-items: center !important;
}
.sm-delivery__icon-wrap,
body.template-product .sm-delivery__icon-wrap {
width: 40px !important;
height: 40px !important;
background: var(--sm-bg-soft) !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.sm-delivery__icon,
body.template-product .sm-delivery__icon {
width: 18px !important;
height: 18px !important;
stroke: var(--sm-text) !important;
fill: none !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
.sm-delivery__text { flex: 1 1 auto; }
.sm-delivery__text strong { font-weight: 600; }
.sm-delivery__text small {
display: block; margin-top: 4px;
font-size: 12px; color: var(--sm-text-2);
}
/* Trust grid: white boxes, cream icon circles */
.sm-trust__item,
body.template-product .sm-trust__item {
background: #fff !important;
border: 1px solid var(--sm-line) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
}
.sm-trust__icon,
body.template-product .sm-trust__icon {
background: var(--sm-bg-soft) !important;
}
/* === ATC button: VISIBLE continuous animations === */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"],
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart {
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
padding-left: 60px !important;
padding-right: 28px !important;
transition: background 0.3s cubic-bezier(0.25,0.46,0.45,0.94),
box-shadow 0.4s ease !important;
animation: sm-atc-glow 2.6s ease-in-out infinite !important;
}
/* Always-on subtle glow pulse on the button border */
@keyframes sm-atc-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); }
50% { box-shadow: 0 0 0 4px rgba(21,183,198,0.18); }
}
/* Cart icon — continuous gentle bob + wobble (NO pause) */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::after {
content: "" !important;
position: absolute !important;
left: 28px !important;
top: 50% !important;
width: 22px !important;
height: 22px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
transform-origin: center 70% !important;
animation: sm-cart-roll 1.6s ease-in-out infinite !important;
z-index: 2 !important;
pointer-events: none !important;
}
/* Continuous cart rocking — looks like it's being pulled */
@keyframes sm-cart-roll {
0% { transform: translateY(-50%) rotate(-3deg) translateX(-1px); }
50% { transform: translateY(-58%) rotate(3deg) translateX(1px); }
100% { transform: translateY(-50%) rotate(-3deg) translateX(-1px); }
}
/* Continuous shimmer sweep every 3s, no pause */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::before,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::before,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: -150% !important;
width: 60% !important;
height: 100% !important;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255,255,255,0.18) 35%,
rgba(255,255,255,0.45) 50%,
rgba(255,255,255,0.18) 65%,
transparent 100%
) !important;
transform: skewX(-22deg) !important;
pointer-events: none !important;
z-index: 1 !important;
animation: sm-atc-shimmer 3s linear infinite !important;
}
@keyframes sm-atc-shimmer {
0% { left: -150%; }
100% { left: 200%; }
}
/* Hover: cart jumps once + shimmer accelerates */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover {
animation: sm-atc-glow-hover 1.2s ease-in-out infinite !important;
}
@keyframes sm-atc-glow-hover {
0%, 100% { box-shadow: 0 0 0 0 rgba(21,183,198,0.25); }
50% { box-shadow: 0 0 0 6px rgba(21,183,198,0.35); }
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover::after {
animation: sm-cart-jump 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95), sm-cart-roll 1.6s ease-in-out 0.6s infinite !important;
}
@keyframes sm-cart-jump {
0% { transform: translateY(-50%) scale(1) rotate(0deg); }
35% { transform: translateY(-95%) scale(1.18) rotate(-12deg); }
60% { transform: translateY(-35%) scale(0.92) rotate(8deg); }
100% { transform: translateY(-50%) scale(1) rotate(0deg); }
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover::before,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover::before,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover::before {
animation: sm-atc-shimmer 1s linear infinite !important;
}
/* Press feedback */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:active,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:active {
transform: scale(0.985) !important;
transition: transform 0.1s !important;
}
/* Loading state */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit.is-loading::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"].is-loading::after {
background: transparent !important;
border: 2px solid rgba(255,255,255,0.3) !important;
border-top-color: #fff !important;
border-radius: 50% !important;
width: 18px !important;
height: 18px !important;
animation: sm-atc-spin 0.7s linear infinite !important;
}
@keyframes sm-atc-spin {
0% { transform: translateY(-50%) rotate(0deg); }
100% { transform: translateY(-50%) rotate(360deg); }
}
/* === ATC button: PREMIUM WOW design with animated gradient + glow === */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"],
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart {
position: relative !important;
overflow: visible !important;
isolation: isolate !important;
padding-left: 60px !important;
padding-right: 28px !important;
border: 0 !important;
color: #fff !important;
/* Animated layered gradient — dark base with subtle brand accent waves */
background:
linear-gradient(125deg,
#0a0a0a 0%,
#14252a 30%,
#0d1a1f 50%,
#1a2e35 70%,
#0a0a0a 100%) !important;
background-size: 300% 300% !important;
animation: sm-atc-bg-shift 7s ease-in-out infinite,
sm-atc-glow 2.6s ease-in-out infinite !important;
transition: transform 0.2s, box-shadow 0.4s ease, padding 0.35s !important;
}
@keyframes sm-atc-bg-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes sm-atc-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(21,183,198,0.0), 0 4px 14px rgba(0,0,0,0.15); }
50% { box-shadow: 0 0 0 5px rgba(21,183,198,0.20), 0 6px 22px rgba(21,183,198,0.25); }
}
/* Rotating conic-gradient ring around the button (premium aurora effect) */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::before,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::before,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::before {
content: "" !important;
position: absolute !important;
inset: -2px !important;
border-radius: 999px !important;
background:
conic-gradient(from var(--sm-atc-angle, 0deg),
transparent 0%,
rgba(21,183,198,0.55) 12%,
rgba(255,255,255,0.85) 20%,
rgba(21,183,198,0.55) 28%,
transparent 45%,
transparent 100%) !important;
z-index: -1 !important;
filter: blur(0.5px) !important;
animation: sm-atc-rotate 4.5s linear infinite !important;
pointer-events: none !important;
}
@keyframes sm-atc-rotate {
0% { --sm-atc-angle: 0deg; }
100% { --sm-atc-angle: 360deg; }
}
/* Fallback for browsers without @property: rotate background-image via transform */
@supports not (background: conic-gradient(from var(--x, 0deg), red, blue)) {
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::before {
animation: sm-atc-rotate-fallback 4.5s linear infinite !important;
}
@keyframes sm-atc-rotate-fallback {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
}
/* Inner mask to keep button content area solid (gradient ring only visible at edges) */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"],
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart {
background-clip: padding-box !important;
}
/* Cart icon — continuous gentle bob + rocking */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::after {
content: "" !important;
position: absolute !important;
left: 28px !important;
top: 50% !important;
width: 22px !important;
height: 22px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
transform-origin: center 70% !important;
animation: sm-cart-roll 1.6s ease-in-out infinite !important;
z-index: 2 !important;
pointer-events: none !important;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
}
@keyframes sm-cart-roll {
0% { transform: translateY(-50%) rotate(-3deg) translateX(-1px); }
50% { transform: translateY(-58%) rotate(3deg) translateX(1px); }
100% { transform: translateY(-50%) rotate(-3deg) translateX(-1px); }
}
/* Hover: brighter glow + faster rotation + cart leap */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover {
animation: sm-atc-bg-shift 3s ease-in-out infinite,
sm-atc-glow-hover 1.4s ease-in-out infinite !important;
transform: translateY(-1px) !important;
}
@keyframes sm-atc-glow-hover {
0%, 100% { box-shadow: 0 0 0 0 rgba(21,183,198,0.3), 0 6px 20px rgba(0,0,0,0.25); }
50% { box-shadow: 0 0 0 8px rgba(21,183,198,0.35), 0 10px 30px rgba(21,183,198,0.45); }
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover::before,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover::before,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover::before {
animation: sm-atc-rotate 2s linear infinite !important;
filter: blur(0px) !important;
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover::after {
animation: sm-cart-jump 0.6s cubic-bezier(0.45, 0.05, 0.55, 0.95),
sm-cart-roll 1.6s ease-in-out 0.6s infinite !important;
}
@keyframes sm-cart-jump {
0% { transform: translateY(-50%) scale(1) rotate(0deg); }
35% { transform: translateY(-95%) scale(1.18) rotate(-12deg); }
60% { transform: translateY(-35%) scale(0.92) rotate(8deg); }
100% { transform: translateY(-50%) scale(1) rotate(0deg); }
}
/* Press feedback */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:active,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:active {
transform: scale(0.985) translateY(0) !important;
transition: transform 0.1s !important;
}
/* Loading state */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit.is-loading::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"].is-loading::after {
background: transparent !important;
border: 2px solid rgba(255,255,255,0.3) !important;
border-top-color: #fff !important;
border-radius: 50% !important;
width: 18px !important;
height: 18px !important;
animation: sm-atc-spin 0.7s linear infinite !important;
}
@keyframes sm-atc-spin {
0% { transform: translateY(-50%) rotate(0deg); }
100% { transform: translateY(-50%) rotate(360deg); }
}
/* === ATC: clean black with continuous subtle life === */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"],
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart {
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
padding-left: 60px !important;
padding-right: 28px !important;
border: 0 !important;
color: #fff !important;
background: #0a0a0a !important;
transition: transform 0.25s ease, box-shadow 0.4s ease, background 0.3s ease !important;
animation: sm-atc-breathe 3.5s ease-in-out infinite !important;
}
/* Soft border glow pulse — subtle */
@keyframes sm-atc-breathe {
0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
50% { box-shadow: 0 4px 20px rgba(21,183,198,0.18), 0 2px 8px rgba(0,0,0,0.15); }
}
/* Continuous shimmer sweep — sleek */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::before,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::before,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: -150% !important;
width: 65% !important;
height: 100% !important;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255,255,255,0.0) 30%,
rgba(255,255,255,0.18) 50%,
rgba(255,255,255,0.0) 70%,
transparent 100%
) !important;
transform: skewX(-22deg) !important;
pointer-events: none !important;
z-index: 1 !important;
animation: sm-atc-shimmer 3.5s ease-in-out infinite !important;
}
@keyframes sm-atc-shimmer {
0%, 100% { left: -150%; }
50% { left: 200%; }
}
/* Cart icon — gentle continuous rocking */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::after {
content: "" !important;
position: absolute !important;
left: 28px !important;
top: 50% !important;
width: 22px !important;
height: 22px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
transform-origin: center 70% !important;
animation: sm-cart-roll 2s ease-in-out infinite !important;
z-index: 2 !important;
pointer-events: none !important;
}
@keyframes sm-cart-roll {
0%, 100% { transform: translateY(-50%) rotate(-2deg) translateX(-0.5px); }
50% { transform: translateY(-54%) rotate(2deg) translateX(0.5px); }
}
/* Hover: lift + brighten + cart jump + shimmer faster */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover {
background: var(--sm-accent) !important;
transform: translateY(-2px) !important;
animation: sm-atc-breathe-hover 1.6s ease-in-out infinite !important;
}
@keyframes sm-atc-breathe-hover {
0%, 100% { box-shadow: 0 4px 14px rgba(21,183,198,0.25); }
50% { box-shadow: 0 8px 28px rgba(21,183,198,0.45); }
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover::before,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover::before,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover::before {
animation: sm-atc-shimmer 1.4s ease-in-out infinite !important;
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover::after {
animation: sm-cart-jump 0.55s cubic-bezier(0.45, 0.05, 0.55, 0.95),
sm-cart-roll 2s ease-in-out 0.55s infinite !important;
}
@keyframes sm-cart-jump {
0% { transform: translateY(-50%) scale(1) rotate(0deg); }
35% { transform: translateY(-90%) scale(1.15) rotate(-10deg); }
60% { transform: translateY(-38%) scale(0.94) rotate(6deg); }
100% { transform: translateY(-50%) scale(1) rotate(0deg); }
}
/* Press */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:active,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:active {
transform: translateY(0) scale(0.985) !important;
transition: transform 0.08s !important;
}
/* Loading */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit.is-loading::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"].is-loading::after {
background: transparent !important;
border: 2px solid rgba(255,255,255,0.3) !important;
border-top-color: #fff !important;
border-radius: 50% !important;
width: 18px !important;
height: 18px !important;
animation: sm-atc-spin 0.7s linear infinite !important;
}
@keyframes sm-atc-spin {
0% { transform: translateY(-50%) rotate(0deg); }
100% { transform: translateY(-50%) rotate(360deg); }
}
/* === ATC: WOW with orbiting glow dot (Linear/Stripe-style) === */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"],
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart {
position: relative !important;
overflow: visible !important;
isolation: isolate !important;
padding-left: 60px !important;
padding-right: 28px !important;
border: 0 !important;
color: #fff !important;
background: #0a0a0a !important;
border-radius: 999px !important;
transition: transform 0.25s ease, background 0.3s ease !important;
}
/* Inner mask wrapper — clip content to round shape over ::before */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit > *,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"] > *,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart > * {
position: relative !important;
z-index: 2 !important;
}
/* Orbiting glow ring — masked to border only, no inner bleed */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::before,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::before,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::before {
content: "" !important;
position: absolute !important;
inset: -2px !important;
border-radius: 999px !important;
padding: 2px !important;
background: conic-gradient(
from var(--sm-orbit-angle, 0deg),
transparent 0deg,
transparent 260deg,
rgba(21,183,198,0.6) 310deg,
#fff 345deg,
rgba(21,183,198,0.6) 360deg
) !important;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
z-index: 0 !important;
pointer-events: none !important;
filter: drop-shadow(0 0 4px rgba(21,183,198,0.55)) !important;
}
@keyframes sm-atc-orbit {
0% { --sm-orbit-angle: 0deg; }
100% { --sm-orbit-angle: 360deg; }
}
/* Fallback for browsers without @property */
@supports not (background: conic-gradient(from var(--x), red, blue)) {
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::before {
animation: sm-atc-orbit-fallback 3s linear infinite !important;
}
@keyframes sm-atc-orbit-fallback {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
}
/* Cart icon — gentle continuous rocking */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::after {
content: "" !important;
position: absolute !important;
left: 28px !important;
top: 50% !important;
width: 22px !important;
height: 22px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
transform-origin: center 70% !important;
animation: sm-cart-roll 2s ease-in-out infinite !important;
z-index: 3 !important;
pointer-events: none !important;
}
@keyframes sm-cart-roll {
0%, 100% { transform: translateY(-50%) rotate(-2deg) translateX(-0.5px); }
50% { transform: translateY(-54%) rotate(2deg) translateX(0.5px); }
}
/* Hover: faster orbit + lift + brighter bg shift + cart jump */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover {
background: linear-gradient(135deg, #0a0a0a 0%, #15b7c6 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 36px rgba(21,183,198,0.35) !important;
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover::before,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover::before,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover::before {
animation: sm-atc-orbit 1.4s linear infinite !important;
filter: blur(0.5px) !important;
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover::after {
animation: sm-cart-jump 0.55s cubic-bezier(0.45, 0.05, 0.55, 0.95),
sm-cart-roll 2s ease-in-out 0.55s infinite !important;
}
@keyframes sm-cart-jump {
0% { transform: translateY(-50%) scale(1) rotate(0deg); }
35% { transform: translateY(-90%) scale(1.15) rotate(-10deg); }
60% { transform: translateY(-38%) scale(0.94) rotate(6deg); }
100% { transform: translateY(-50%) scale(1) rotate(0deg); }
}
/* Press */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:active,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:active {
transform: translateY(0) scale(0.985) !important;
transition: transform 0.08s !important;
}
/* Loading */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit.is-loading::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"].is-loading::after {
background: transparent !important;
border: 2px solid rgba(255,255,255,0.3) !important;
border-top-color: #fff !important;
border-radius: 50% !important;
width: 18px !important;
height: 18px !important;
animation: sm-atc-spin 0.7s linear infinite !important;
}
@keyframes sm-atc-spin {
0% { transform: translateY(-50%) rotate(0deg); }
100% { transform: translateY(-50%) rotate(360deg); }
}
/* === ATC: orbit via border-image (works without mask) === */
@property --sm-orbit-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"],
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart {
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
padding-left: 60px !important;
padding-right: 28px !important;
color: #fff !important;
border-radius: 999px !important;
/* Border 2px transparent, conic gradient ONLY in border area */
border: 2px solid transparent !important;
background:
linear-gradient(#15b7c6, #15b7c6) padding-box, conic-gradient(
from var(--sm-orbit-angle, 0deg),
transparent 0deg,
transparent 240deg,
rgba(255,255,255,0.4) 300deg, #fff 340deg, rgba(255,255,255,0.4) 360deg
) border-box !important;
background-origin: border-box !important;
animation: sm-atc-orbit 3s linear infinite !important;
transition: transform 0.25s ease, box-shadow 0.4s ease, background 0.3s ease !important;
}
@keyframes sm-atc-orbit {
0% { --sm-orbit-angle: 0deg; }
100% { --sm-orbit-angle: 360deg; }
}
/* Fallback for browsers without @property support (Safari < 16.4, Firefox) */
@supports not (background: conic-gradient(from var(--x, 0deg), red, blue)) {
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"] {
animation: sm-atc-orbit-fb 3s linear infinite !important;
}
@keyframes sm-atc-orbit-fb {
0% { background: linear-gradient(#15b7c6, #15b7c6) padding-box, conic-gradient(from 0deg, transparent 0deg, transparent 240deg, rgba(255,255,255,0.4) 300deg, #fff 340deg, rgba(255,255,255,0.4) 360deg) border-box !important; }
25% { background: linear-gradient(#15b7c6, #15b7c6) padding-box, conic-gradient(from 90deg, transparent 0deg, transparent 240deg, rgba(255,255,255,0.4) 300deg, #fff 340deg, rgba(255,255,255,0.4) 360deg) border-box !important; }
50% { background: linear-gradient(#15b7c6, #15b7c6) padding-box, conic-gradient(from 180deg, transparent 0deg, transparent 240deg, rgba(255,255,255,0.4) 300deg, #fff 340deg, rgba(255,255,255,0.4) 360deg) border-box !important; }
75% { background: linear-gradient(#15b7c6, #15b7c6) padding-box, conic-gradient(from 270deg, transparent 0deg, transparent 240deg, rgba(255,255,255,0.4) 300deg, #fff 340deg, rgba(255,255,255,0.4) 360deg) border-box !important; }
100% { background: linear-gradient(#15b7c6, #15b7c6) padding-box, conic-gradient(from 360deg, transparent 0deg, transparent 240deg, rgba(255,255,255,0.4) 300deg, #fff 340deg, rgba(255,255,255,0.4) 360deg) border-box !important; }
}
}
/* Shimmer sweep — keeps button alive */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::before,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::before,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: -150% !important;
width: 65% !important;
height: 100% !important;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255,255,255,0.0) 35%,
rgba(255,255,255,0.18) 50%,
rgba(255,255,255,0.0) 65%,
transparent 100%
) !important;
transform: skewX(-22deg) !important;
pointer-events: none !important;
z-index: 1 !important;
animation: sm-atc-shimmer 4s ease-in-out infinite !important;
}
@keyframes sm-atc-shimmer {
0%, 100% { left: -150%; }
50% { left: 200%; }
}
/* Cart icon — gentle rocking */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::after {
content: "" !important;
position: absolute !important;
left: 28px !important;
top: 50% !important;
width: 22px !important;
height: 22px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
transform-origin: center 70% !important;
animation: sm-cart-roll 2s ease-in-out infinite !important;
z-index: 2 !important;
pointer-events: none !important;
}
@keyframes sm-cart-roll {
0%, 100% { transform: translateY(-50%) rotate(-2deg) translateX(-0.5px); }
50% { transform: translateY(-54%) rotate(2deg) translateX(0.5px); }
}
/* Hover */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover {
background:
linear-gradient(135deg, #0a8a96 0%, #14252a 100%) padding-box,
conic-gradient(
from var(--sm-orbit-angle, 0deg),
transparent 0deg,
transparent 200deg,
rgba(255,255,255,0.6) 280deg, #fff 340deg, rgba(255,255,255,0.6) 360deg
) border-box !important;
animation: sm-atc-orbit 1.4s linear infinite !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 30px rgba(21,183,198,0.4) !important;
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover::before,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover::before,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover::before {
animation: sm-atc-shimmer 1.6s ease-in-out infinite !important;
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:hover::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:hover::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart:hover::after {
animation: sm-cart-jump 0.55s cubic-bezier(0.45, 0.05, 0.55, 0.95),
sm-cart-roll 2s ease-in-out 0.55s infinite !important;
}
@keyframes sm-cart-jump {
0% { transform: translateY(-50%) scale(1) rotate(0deg); }
35% { transform: translateY(-90%) scale(1.15) rotate(-10deg); }
60% { transform: translateY(-38%) scale(0.94) rotate(6deg); }
100% { transform: translateY(-50%) scale(1) rotate(0deg); }
}
/* Press */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit:active,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]:active {
transform: translateY(0) scale(0.985) !important;
transition: transform 0.08s !important;
}
/* Loading */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit.is-loading::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"].is-loading::after {
background: transparent !important;
border: 2px solid rgba(255,255,255,0.3) !important;
border-top-color: #fff !important;
border-radius: 50% !important;
width: 18px !important;
height: 18px !important;
animation: sm-atc-spin 0.7s linear infinite !important;
}
@keyframes sm-atc-spin {
0% { transform: translateY(-50%) rotate(0deg); }
100% { transform: translateY(-50%) rotate(360deg); }
}
/* === FIX: ATC button width on mobile/desktop === */
body.template-product .product-form__buttons,
body.template-product .productView-action {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
min-width: 0 !important;
}
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"],
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
}
body.template-product .product-form__buttons .productView-wishlist,
body.template-product .productView-action .productView-wishlist {
flex: 0 0 auto !important;
}
/* Mobile: keep qty + ATC + wishlist INLINE on a single row */
@media (max-width: 720px) {
body.template-product .pvGroup-row {
flex-wrap: nowrap !important;
gap: 8px !important;
width: 100% !important;
}
body.template-product .pvGroup-row > .productView-groupTop {
gap: 8px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
body.template-product .product-form__buttons,
body.template-product .productView-action {
gap: 8px !important;
}
/* Qty: narrower on mobile so ATC has room */
body.template-product quantity-input,
body.template-product .productView-quantity {
width: 82px !important;
min-width: 82px !important;
max-width: 82px !important;
flex: 0 0 82px !important;
}
/* Tighten qty internals so the "− 1 +" stays comfortable */
body.template-product .productView-quantity .btn-quantity {
width: 24px !important;
min-width: 24px !important;
}
body.template-product .productView-quantity input.quantity__input,
body.template-product .productView-quantity input[type="number"] {
width: 30px !important;
min-width: 30px !important;
}
/* ATC: allow shrinking, tighter horizontal padding so the label fits */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"],
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart {
min-width: 0 !important;
padding-left: 44px !important;
padding-right: 14px !important;
font-size: 12px !important;
letter-spacing: 0.08em !important;
}
/* Cart icon: move closer to text, smaller */
body.template-product :is(.productView-product, .productView-stickyCart) .product-form__submit::after,
body.template-product :is(.productView-product, .productView-stickyCart) button[name="add"]::after,
body.template-product :is(.productView-product, .productView-stickyCart) .btn-addToCart::after {
left: 16px !important;
width: 18px !important;
height: 18px !important;
}
/* Wishlist: keep tight, no shrink */
body.template-product .productView-wishlist {
flex: 0 0 auto !important;
}
}
/* === FINAL qty width: compact === */
html body.template-product .productView-quantity,
html body.template-product quantity-input.productView-quantity {
min-width: 112px !important;
width: 112px !important;
max-width: 112px !important;
flex: 0 0 112px !important;
}
html body.template-product .quantity__container .btn-quantity {
width: 36px !important;
flex: 0 0 36px !important;
}
html body.template-product .quantity__container input.quantity__input {
flex: 0 0 40px !important;
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
}
@media (max-width: 720px) {
html body.template-product .productView-quantity,
html body.template-product quantity-input.productView-quantity {
min-width: 100px !important;
width: 100px !important;
max-width: 100px !important;
flex: 0 0 100px !important;
}
html body.template-product .quantity__container .btn-quantity {
width: 32px !important;
flex: 0 0 32px !important;
}
html body.template-product .quantity__container input.quantity__input {
flex: 0 0 36px !important;
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
}
}
/* === Gallery thumbnails ===
Visual styling (border-radius, active ring) applied everywhere.
Layout overrides (aspect-ratio, flex column, slick-track display)
scoped to DESKTOP only — on mobile, Halo's Slick horizontal slider
handles widths via inline JS and my CSS must not interfere. */
/* Visual styling — safe on both desktop & mobile */
body.template-product .productView-thumbnail,
body.template-product .productView-thumbnail-link {
border-radius: 10px !important;
overflow: hidden !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
padding: 0 !important;
position: relative !important;
}
body.template-product .productView-thumbnail-link img,
body.template-product .productView-thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
}
/* Active ring: inset box-shadow (visible despite overflow:hidden) */
body.template-product .productView-thumbnail.slick-current,
body.template-product .productView-thumbnail.is-active,
body.template-product .productView-thumbnail.active {
box-shadow: inset 0 0 0 1.5px var(--sm-text) !important;
}
/* DESKTOP ONLY: vertical column layout with square aspect ratio */
@media (min-width: 721px) {
body.template-product .productView-thumbnail-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
body.template-product .productView-thumbnail,
body.template-product .productView-thumbnail-link {
aspect-ratio: 1 / 1 !important;
display: block !important;
margin: 0 !important;
}
body.template-product .productView-thumbnail .productView-thumbnail-link {
width: 100% !important;
height: 100% !important;
}
/* Slick vertical track: stack as block + bottom margin between slides */
body.template-product .slick-track {
display: block !important;
}
body.template-product .productView-thumbnail-wrapper .productView-thumbnail,
body.template-product .slick-track .productView-thumbnail,
body.template-product .slick-slide.productView-thumbnail {
margin-bottom: 12px !important;
margin-right: 0 !important;
}
}
/* MOBILE: Slick is configured with slidesToShow:5 on mobile, so each
slide is ~container_width/5 ≈ 76px wide. We don't override widths
here — Slick's math stays correct so click-on-thumb has a smooth,
proportional slide motion instead of jumpy overshoot. */
@media (max-width: 720px) {
/* Tight inner padding — most of the slide becomes the visible thumb */
body.template-product .productView-thumbnail {
padding: 4px 3px !important;
box-sizing: border-box !important;
background: transparent !important;
border: 0 !important;
margin: 0 !important;
}
/* Visible thumb fills the slide minus the padding */
body.template-product .productView-thumbnail .productView-thumbnail-link {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
aspect-ratio: 1 / 1 !important;
border-radius: 7px !important;
overflow: hidden !important;
position: relative !important;
}
body.template-product .productView-thumbnail-link img,
body.template-product .productView-thumbnail img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
}
/* Active ring goes on the INNER link (so it matches the visible thumb,
not the wider slide slot). Override the outer-slide rule from the
shared block above. */
body.template-product .productView-thumbnail.slick-current,
body.template-product .productView-thumbnail.is-active,
body.template-product .productView-thumbnail.active {
box-shadow: none !important;
}
body.template-product .productView-thumbnail.slick-current .productView-thumbnail-link,
body.template-product .productView-thumbnail.is-active .productView-thumbnail-link,
body.template-product .productView-thumbnail.active .productView-thumbnail-link {
box-shadow: inset 0 0 0 1.5px var(--sm-text) !important;
}
}
/* ============================================================
ATC FINAL — orbit ring INSIDE button face + shake every 3s
Scoped to MAIN product view (.productView-product) and
STICKY add-to-cart bar (.productView-stickyCart) only.
Product cards (.card-product) and quick-view/quick-shop are
excluded so they keep Halo's default styling.
============================================================ */
body.template-product .productView-product .product-form__submit,
body.template-product .productView-product button[name="add"],
body.template-product .productView-product .btn-addToCart,
body.template-product .productView-stickyCart .product-form__submit,
body.template-product .productView-stickyCart button[name="add"],
body.template-product .productView-stickyCart .btn-addToCart {
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
padding-left: 60px !important;
padding-right: 28px !important;
border: 0 !important;
color: #fff !important;
background: #15b7c6 !important;
border-radius: 999px !important;
transition: transform 0.25s ease, box-shadow 0.4s ease, background 0.3s ease !important;
animation: sm-atc-shake 3s ease-in-out infinite !important;
}
/* Orbit ring placed INSIDE the button face (visible white sweep) */
body.template-product .productView-product .product-form__submit::before,
body.template-product .productView-product button[name="add"]::before,
body.template-product .productView-product .btn-addToCart::before,
body.template-product .productView-stickyCart .product-form__submit::before,
body.template-product .productView-stickyCart button[name="add"]::before,
body.template-product .productView-stickyCart .btn-addToCart::before {
content: "" !important;
position: absolute !important;
top: 5px !important;
left: 5px !important;
right: 5px !important;
bottom: 5px !important;
width: auto !important;
height: auto !important;
transform: none !important;
border-radius: 999px !important;
padding: 2.5px !important;
background: conic-gradient(
from var(--sm-orbit-angle, 0deg),
transparent 0deg,
transparent 220deg,
rgba(255,255,255,0.30) 285deg,
rgba(255,255,255,1) 340deg,
rgba(255,255,255,0.30) 360deg
) !important;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
-webkit-mask-composite: xor !important;
mask-composite: exclude !important;
pointer-events: none !important;
z-index: 1 !important;
filter: drop-shadow(0 0 3px rgba(255,255,255,0.55)) !important;
animation: sm-atc-orbit 3s linear infinite !important;
}
/* Make sure cart icon stays above the orbit ring */
body.template-product .productView-product .product-form__submit::after,
body.template-product .productView-product button[name="add"]::after,
body.template-product .productView-product .btn-addToCart::after,
body.template-product .productView-stickyCart .product-form__submit::after,
body.template-product .productView-stickyCart button[name="add"]::after,
body.template-product .productView-stickyCart .btn-addToCart::after {
z-index: 3 !important;
}
/* Shake — quick burst at the end of every 3s cycle */
@keyframes sm-atc-shake {
0%, 84%, 100% { transform: translate3d(0,0,0) rotate(0); }
86% { transform: translate3d(-2px,0,0) rotate(-0.6deg); }
88% { transform: translate3d(2px,0,0) rotate(0.6deg); }
90% { transform: translate3d(-2px,0,0) rotate(-0.5deg); }
92% { transform: translate3d(2px,0,0) rotate(0.5deg); }
94% { transform: translate3d(-1px,0,0) rotate(-0.3deg); }
96% { transform: translate3d(1px,0,0) rotate(0.3deg); }
98% { transform: translate3d(0,0,0) rotate(0); }
}
/* Hover: stop shake, speed orbit, lift + dark accent gradient */
body.template-product .productView-product .product-form__submit:hover,
body.template-product .productView-product button[name="add"]:hover,
body.template-product .productView-product .btn-addToCart:hover,
body.template-product .productView-stickyCart .product-form__submit:hover,
body.template-product .productView-stickyCart button[name="add"]:hover,
body.template-product .productView-stickyCart .btn-addToCart:hover {
background: linear-gradient(135deg, #0a8a96 0%, #14252a 100%) !important;
animation: none !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 32px rgba(21,183,198,0.4) !important;
}
body.template-product .productView-product .product-form__submit:hover::before,
body.template-product .productView-product button[name="add"]:hover::before,
body.template-product .productView-product .btn-addToCart:hover::before,
body.template-product .productView-stickyCart .product-form__submit:hover::before,
body.template-product .productView-stickyCart button[name="add"]:hover::before,
body.template-product .productView-stickyCart .btn-addToCart:hover::before {
animation: sm-atc-orbit 1.4s linear infinite !important;
background: conic-gradient(
from var(--sm-orbit-angle, 0deg),
transparent 0deg,
transparent 195deg,
rgba(255,255,255,0.45) 265deg,
rgba(255,255,255,1) 340deg,
rgba(255,255,255,0.45) 360deg
) !important;
filter: drop-shadow(0 0 5px rgba(255,255,255,0.65)) !important;
}
/* Press */
body.template-product .productView-product .product-form__submit:active,
body.template-product .productView-product button[name="add"]:active,
body.template-product .productView-stickyCart .product-form__submit:active,
body.template-product .productView-stickyCart button[name="add"]:active {
transform: translateY(0) scale(0.985) !important;
transition: transform 0.08s !important;
animation: none !important;
}
/* Reset block removed — all ATC selectors are now scoped to
.productView-product and .productView-stickyCart via :is(),
so product cards / quick-view / quick-shop keep Halo's default
styling without needing an explicit reset. */
/* ============================================================
PRODUCT CARD V11 — Compact pill ATC inline with price
Targets the active `product-card-02.liquid` structure via the
shared `.product-item` class. Uses position-absolute for the
ATC so it visually sits next to the price even though the DOM
places `.card-action` as a sibling of `.card-information`.
============================================================ */
/* The "Recent vizualizate" carousel and other product-page card
contexts already exclude the global ATC overrides — this set is
scoped to .product-item so it applies on ALL pages. */
.product-item {
position: relative !important;
background: #fff !important;
border-radius: 14px !important;
overflow: hidden !important;
border: 1px solid var(--sm-line-soft, #f3f3f3) !important;
transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.product-item:hover {
border-color: var(--sm-line, #ececec) !important;
box-shadow: 0 10px 26px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04) !important;
transform: translateY(-3px) !important;
}
.product-item .card {
background: #fff !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 14px !important;
overflow: visible !important;
padding: 5px 5px 5px !important;
}
/* MEDIA — transparent (no cream background), rounded, image zoom on hover */
.product-item .card-product {
background: transparent !important;
border-radius: 14px !important;
overflow: hidden !important;
position: relative !important;
}
.product-item .card-product__wrapper {
position: relative !important;
}
.product-item .card-media {
position: relative !important;
overflow: hidden !important;
background: transparent !important;
}
.product-item .card-media img {
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease !important;
}
.product-item:hover .card-media img:not(.placeholder-svg) {
transform: scale(1.04) !important;
}
/* Image swap on hover — show second image */
.product-item .card-media.media--hover-effect img:nth-child(2) {
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important; height: 100% !important;
opacity: 0 !important;
}
.product-item:hover .card-media.media--hover-effect img:nth-child(2) {
opacity: 1 !important;
}
/* WISHLIST + QUICKVIEW icons on image — small white circles top-right
Override Halo's .group-left / .group-right positioning variants —
we always anchor right. */
.product-item .card-product__group,
.product-item .card-product__group.group-left,
.product-item .card-product__group.group-right,
.product-item .card-product__group.group-center {
position: absolute !important;
top: 10px !important;
right: 10px !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
z-index: 5 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
opacity: 1 !important;
visibility: visible !important;
}
.product-item .card-product__group .card-product__group-item,
.product-item .card-product__group > div {
position: static !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
background: transparent !important;
}
.product-item .card-product__group button,
.product-item .card-product__group .wishlist-icon,
.product-item .card-product__group .quickview-icon {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
padding: 0 !important;
border-radius: 50% !important;
background: var(--sm-text, #0a0a0a) !important;
border: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
color: #fff !important;
transition: transform 0.2s ease, background 0.2s ease !important;
font-size: 0 !important;
line-height: 1 !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
}
.product-item .card-product__group button:hover {
transform: scale(1.08) !important;
background: var(--sm-accent, #15b7c6) !important;
}
.product-item .card-product__group button .text,
.product-item .card-product__group button .visually-hidden {
position: absolute !important;
width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0,0,0,0) !important;
}
.product-item .card-product__group svg {
width: 14px !important;
height: 14px !important;
fill: #fff !important;
stroke: #fff !important;
stroke-width: 1.6 !important;
}
.product-item .card-product__group svg path,
.product-item .card-product__group svg g {
fill: #fff !important;
stroke: #fff !important;
}
.product-item .card-product__group .wishlist-icon.is-active svg,
.product-item .card-product__group .wishlist-icon[data-wishlist-active] svg,
.product-item .card-product__group .wishlist-icon.is-active svg path,
.product-item .card-product__group .wishlist-icon[data-wishlist-active] svg path,
.product-item .card-product__group .wishlist-icon.is-active svg g,
.product-item .card-product__group .wishlist-icon[data-wishlist-active] svg g {
fill: var(--sm-sale, #d62828) !important;
stroke: var(--sm-sale, #d62828) !important;
}
/* BADGES (NOU, -34%, Sold out) — top-left of image */
.product-item .card__badge,
.product-item .productView-badge,
.product-item .halo-productBadges {
position: absolute !important;
top: 10px !important;
left: 10px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 5px !important;
z-index: 4 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.product-item .card__badge .badge,
.product-item .productView-badge .badge,
.product-item .halo-productBadges .badge {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 4px 9px !important;
border-radius: 999px !important;
color: #fff !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
width: auto !important;
}
.product-item .card__badge .new-badge,
.product-item .productView-badge .new-badge,
.product-item .halo-productBadges .new-badge { background: var(--sm-text, #0a0a0a) !important; }
.product-item .card__badge .sale-badge,
.product-item .productView-badge .sale-badge,
.product-item .halo-productBadges .sale-badge { background: var(--sm-sale, #d62828) !important; }
.product-item .card__badge .sold-out-badge,
.product-item .productView-badge .sold-out-badge,
.product-item .halo-productBadges .sold-out-badge { background: var(--sm-text-muted, #9a9a9a) !important; }
.product-item .card__badge .custom-badge,
.product-item .productView-badge .custom-badge,
.product-item .halo-productBadges .custom-badge { background: var(--sm-accent, #15b7c6) !important; }
/* INFO BLOCK — Liquid is modified to render an inline `.card-action`
directly inside `.card-information__wrapper`, right after `.card-price`,
wrapped in `.sm-card-cta-row`. We use simple flex layout. The original
`.card-action` outside the wrapper is hidden below. */
.product-item .card-information {
padding: 12px 14px 10px !important;
background: #fff !important;
position: relative !important;
border: 0 !important;
display: block !important;
margin: 0 !important;
}
/* Also strip any spacing that Halo's CSS may add after the body */
.product-item .card-information::after { display: none !important; }
.product-item .card { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.product-item .card-information__wrapper {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
text-align: left !important;
border: 0 !important;
display: block !important;
}
.product-item .card-information__group,
.product-item .card-information__group-2 {
margin: 0 0 4px !important;
padding: 0 !important;
background: transparent !important;
}
/* The new flex row: price (left) + ATC (right) on the SAME line,
vertically centered. */
.product-item .sm-card-cta-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin: 6px 0 0 !important;
}
.product-item .sm-card-cta-row .card-price {
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
min-height: 44px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
text-align: left !important;
}
.product-item .sm-card-cta-row .card-action {
flex: 0 0 auto !important;
margin: 0 !important;
}
/* HIDE the original (now duplicate) card-action that lives OUTSIDE the
__wrapper, plus its wrapper__card cousin. The new inline action does
the job. */
.product-item .card-information > .card-action,
.product-item .card-information > .wrapper__card {
display: none !important;
}
.product-item .card-information__group {
margin: 0 0 4px !important;
padding: 0 !important;
background: transparent !important;
}
.product-item .card-vendor {
font-size: 10.5px !important;
font-weight: 500 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--sm-text-muted, #9a9a9a) !important;
margin: 0 0 4px !important;
background: transparent !important;
}
.product-item .card-vendor a {
color: inherit !important;
text-decoration: none !important;
}
.product-item .card-title {
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
color: var(--sm-text, #0a0a0a) !important;
margin: 0 0 4px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-decoration: none !important;
background-image: none !important;
min-height: 42px !important;
transition: color 0.25s ease !important;
}
/* Kill Halo's link-underline animation under the title */
.product-item .card-title,
.product-item .card-title:hover,
.product-item .card-title .text,
.product-item .card-title:hover .text {
background: none !important;
background-image: none !important;
text-decoration: none !important;
}
.product-item .card-title::after,
.product-item .card-title::before,
.product-item .card-title .text::after,
.product-item .card-title .text::before {
display: none !important;
content: none !important;
background: none !important;
}
/* Subtle color shift when the whole card is hovered */
.product-item:hover .card-title { color: var(--sm-accent, #15b7c6) !important; }
.product-item .card-title:hover { color: var(--sm-accent, #15b7c6) !important; }
.product-item .card-title .text { display: block !important; }
/* PRICE — compact, NEW first then OLD strikethrough.
IMPORTANT: price.liquid renders BOTH .price__regular and .price__sale
in the DOM. Halo hides the wrong one via class `.price--on-sale`. We
must respect that — never force `display: flex` on both. */
.product-item .card-price {
margin: 0 !important;
background: transparent !important;
min-width: 0 !important;
}
.product-item .card-price .price {
margin: 0 !important;
padding: 0 !important;
}
.product-item .card-price .price dl {
display: flex !important;
flex-wrap: wrap !important;
gap: 0 8px !important;
align-items: baseline !important;
margin: 0 !important;
padding: 0 !important;
}
/* When NOT on sale → show only .price__regular */
.product-item .card-price .price:not(.price--on-sale) .price__sale {
display: none !important;
}
.product-item .card-price .price:not(.price--on-sale) .price__regular {
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
/* When ON sale → show only .price__sale (stacked: sale on top, compare below) */
.product-item .card-price .price.price--on-sale .price__regular {
display: none !important;
}
.product-item .card-price .price.price--on-sale .price__sale {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
}
.product-item .card-price .price__sale .price__last { order: 1 !important; }
.product-item .card-price .price__sale .price__compare { order: 2 !important; }
.product-item .card-price .price__sale .price__last,
.product-item .card-price .price__sale .price__compare {
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
}
.product-item .card-price .price-item--regular,
.product-item .card-price .price-item--sale {
font-size: 19px !important;
font-weight: 600 !important;
color: var(--sm-text, #0a0a0a) !important;
letter-spacing: -0.01em !important;
}
/* When the product is on sale, the NEW price (sale) becomes red */
.product-item .card-price .price.price--on-sale .price-item--sale,
.product-item .card-price .price.price--on-sale .price__sale .price-item--sale,
.product-item .card-price .price.price--on-sale .price__last .price-item--sale,
.product-item .card-price .price.price--on-sale .price__last .money {
color: var(--sm-sale, #d62828) !important;
font-weight: 700 !important;
}
.product-item .card-price .price__compare,
.product-item .card-price .price__compare s,
.product-item .card-price .price__compare .price-item--regular {
font-size: 15px !important;
color: var(--sm-text-muted, #9a9a9a) !important;
text-decoration: line-through !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
.product-item .card-price .price__saved,
.product-item .card-price .price__label_sale,
.product-item .card-price .price__label_percent,
.product-item .card-price .label_sale_percent { display: none !important; }
.product-item .card-price .price dd,
.product-item .card-price .price dt { margin: 0 !important; padding: 0 !important; }
/* COMPACT ATC — visible only when inline (inside .sm-card-cta-row).
Halo's default `.card-action { position: absolute; ... transform: translate3d(...) }`
gets neutralized here. */
.product-item .sm-card-cta-row .card-action,
.product-item .card-action--inline {
position: static !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
z-index: 3 !important;
width: 38px !important;
height: 38px !important;
flex-shrink: 0 !important;
}
/* Hide non-essential children that could interfere with our clean layout */
.product-item .card-information > positive-vibes,
.product-item .card-information > .text-size,
.product-item .card-information > .hidden,
.product-item .card-action__group.card-list__hidden,
.product-item .card-list__hidden { display: none !important; }
.product-item .card-action form {
margin: 0 !important;
padding: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
}
.product-item .card-action .button,
.product-item .card-action .button-ATC,
.product-item .card-action .button.button-ATC,
.product-item .card-action a.button-ATC,
.product-item .card-action button.button-ATC {
/* Use `relative` (not static) so:
- the button stays in normal flow (Halo's absolute positioning
offsets are neutralized by top/right/bottom/left: auto),
- the cart-icon ::before pseudo can anchor to this element. */
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
max-width: 38px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
background: var(--sm-text, #0a0a0a) !important;
color: transparent !important;
border: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-size: 0 !important;
line-height: 0 !important;
text-indent: -9999px !important;
letter-spacing: 0 !important;
text-transform: none !important;
transition: background 0.2s ease, transform 0.2s ease !important;
text-decoration: none !important;
box-shadow: none !important;
overflow: visible !important;
opacity: 1 !important;
visibility: visible !important;
}
.product-item .card-action .button:hover,
.product-item .card-action .button-ATC:hover {
background: var(--sm-accent, #15b7c6) !important;
transform: scale(1.06) !important;
}
/* Inject cart icon via pseudo-element (since the button text is hidden) */
.product-item .card-action .button::before,
.product-item .card-action .button-ATC::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: url("data:image/svg+xml;utf8,") no-repeat center / 16px 16px !important;
text-indent: 0 !important;
pointer-events: none !important;
display: block !important;
}
/* Hide any inner content (text/icon spans) that Halo's add-to-cart-form renders */
.product-item .card-action .button > *,
.product-item .card-action .button-ATC > * {
display: none !important;
}
/* Sold-out & notify-me state — muted */
.product-item .card-action .button[disabled],
.product-item .card-action .button-ATC.is-notify-me {
background: var(--sm-text-muted, #9a9a9a) !important;
cursor: pointer !important;
}
.product-item .card-action .button[disabled]::before,
.product-item .card-action .button-ATC.is-notify-me::before {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* LOADING state — when JS adds `.is-loading` to the button while the
AJAX cart request is in-flight. Halo's default spinner is uncentered
and gets distorted by our compact pill. Replace with a clean centered
spinner that lives inside the 38x38 button. */
.product-item .card-action .button.is-loading::before,
.product-item .card-action .button-ATC.is-loading::before {
/* Override the cart-icon background-image */
background: none !important;
background-image: none !important;
/* Reset inset/positioning to a precisely centered small spinner */
inset: auto !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
width: 16px !important;
height: 16px !important;
margin: -8px 0 0 -8px !important;
/* Spinner ring */
border: 2px solid rgba(255, 255, 255, 0.28) !important;
border-top-color: #fff !important;
border-radius: 50% !important;
box-sizing: border-box !important;
/* Override Halo's spin-icon animation that uses translateY(-50%) */
animation: sm-card-atc-spin 0.7s linear infinite !important;
transform: none !important;
}
@keyframes sm-card-atc-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Halo also injects an SVG spinner inside the button on some configs —
hide any extra spinner so we don't get a double indicator. */
.product-item .card-action .button.is-loading svg,
.product-item .card-action .button-ATC.is-loading svg {
display: none !important;
}
/* Hide the standalone compare wrapper (we keep things minimal) */
.product-item .card-compare-wrapper { display: none !important; }
/* Card hover — subtle shadow */
.product-item:hover .card-product {
box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
}
/* Mobile tweaks */
@media (max-width: 720px) {
.product-item .card-information { padding: 10px 12px 8px !important; }
.product-item .card-title { font-size: 14px !important; min-height: 40px !important; margin-bottom: 6px !important; }
.product-item .card-vendor { font-size: 10px !important; margin-bottom: 3px !important; }
.product-item .card-price .price-item--regular,
.product-item .card-price .price-item--sale { font-size: 17px !important; }
.product-item .card-price .price__compare,
.product-item .card-price .price__compare s,
.product-item .card-price .price__compare .price-item--regular { font-size: 13px !important; }
.product-item .card-action,
.product-item .card-action .button,
.product-item .card-action .button-ATC {
width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important;
}
.product-item .card-action .button::before,
.product-item .card-action .button-ATC::before {
background-size: 14px 14px !important;
}
.product-item .card-product__group { top: 8px !important; right: 8px !important; gap: 5px !important; }
.product-item .card-product__group button {
width: 28px !important; height: 28px !important; min-width: 28px !important;
}
.product-item .card-product__group svg { width: 12px !important; height: 12px !important; }
.product-item .card__badge,
.product-item .productView-badge,
.product-item .halo-productBadges { top: 8px !important; left: 8px !important; }
.product-item .card__badge .badge,
.product-item .productView-badge .badge,
.product-item .halo-productBadges .badge {
font-size: 10px !important;
padding: 3px 7px !important;
}
}
/* === "Citește mai mult" — small link-style button, smooth fade === */
body.template-product .tab-showMore.is-show {
/* Taller fade zone for a gradual transition; button sits in the solid bottom */
padding: 120px 0 8px 0 !important;
/* Multi-stop smooth gradient — fade in slowly, then hold solid white */
background: linear-gradient(
to bottom,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.05) 10%,
rgba(255,255,255,0.15) 22%,
rgba(255,255,255,0.30) 34%,
rgba(255,255,255,0.50) 46%,
rgba(255,255,255,0.72) 58%,
rgba(255,255,255,0.88) 70%,
rgba(255,255,255,0.97) 82%,
#fff 92%,
#fff 100%
) !important;
}
body.template-product .tab-showMore.is-less {
/* No fade when expanded ("Citește mai puțin" state) */
background: transparent !important;
padding: 16px 0 0 0 !important;
position: relative !important;
}
/* Small inline-link button */
body.template-product .tab-showMore .button,
body.template-product .tab-showMore .button--secondary,
body.template-product .tab-showMore [data-show-more-toogle] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
padding: 6px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
background: transparent !important;
color: var(--sm-text, #0a0a0a) !important;
border: 1px solid var(--sm-text, #0a0a0a) !important;
border-radius: 999px !important;
line-height: 1.2 !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background 0.2s ease, color 0.2s ease !important;
}
body.template-product .tab-showMore .button:hover,
body.template-product .tab-showMore .button--secondary:hover,
body.template-product .tab-showMore [data-show-more-toogle]:hover {
background: var(--sm-text, #0a0a0a) !important;
color: #fff !important;
}
/* ============================================================
SMARTINO CART DRAWER — Aqua Glassmorphic Redesign
Applied on .halo-cart-sidebar (side cart / quick cart)
============================================================ */
/* Smartino color tokens specific to cart */
:root {
--sm-accent-soft: #c7eef1;
--sm-accent-light: #e5f7f9;
--sm-accent-deep: #0e8c98;
}
/* ===== Drawer wrapper ===== */
.halo-cart-sidebar.halo-sidebar {
background: linear-gradient(180deg, #f9f7f3 0%, #f0f5f5 35%, #e3eff1 70%, #d6ebee 100%) !important;
border: 0 !important;
overflow: hidden !important;
}
.halo-cart-sidebar.halo-sidebar::before,
.halo-cart-sidebar.halo-sidebar::after {
content: '';
position: absolute;
pointer-events: none;
z-index: 0;
}
.halo-cart-sidebar.halo-sidebar::before {
top: -30%; right: -40%;
width: 110%; height: 80%;
background: radial-gradient(ellipse at center, rgba(21, 183, 198, 0.22) 0%, rgba(21, 183, 198, 0.08) 50%, transparent 100%);
filter: blur(20px);
}
.halo-cart-sidebar.halo-sidebar::after {
bottom: -30%; left: -40%;
width: 100%; height: 70%;
background: radial-gradient(ellipse at center, rgba(21, 183, 198, 0.14) 0%, rgba(21, 183, 198, 0.05) 50%, transparent 100%);
filter: blur(20px);
}
.halo-cart-sidebar > * { position: relative; z-index: 1; }
/* ===== Close button — top-right circle ===== */
.halo-cart-sidebar .halo-sidebar-close {
position: absolute !important;
top: 3px !important;
right: 18px !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.7) !important;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255,255,255,0.7) !important;
color: var(--sm-text, #0a0a0a) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
font-size: 0 !important;
letter-spacing: 0 !important;
z-index: 5 !important;
text-transform: none !important;
transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
}
.halo-cart-sidebar .halo-sidebar-close::before,
.halo-cart-sidebar .halo-sidebar-close::after { display: none !important; content: none !important; }
.halo-cart-sidebar .halo-sidebar-close svg {
width: 14px !important;
height: 14px !important;
}
.halo-cart-sidebar .halo-sidebar-close:hover {
background: #fff !important;
transform: rotate(90deg) !important;
border-color: var(--sm-accent, #15b7c6) !important;
color: var(--sm-accent, #15b7c6) !important;
}
/* ===== Header ===== */
.halo-cart-sidebar .halo-sidebar-header {
padding: 6px 70px 6px 22px !important;
background: rgba(255,255,255,0.5) !important;
-webkit-backdrop-filter: blur(20px) !important;
backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(255,255,255,0.6) !important;
position: relative !important;
z-index: 2 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
.halo-cart-sidebar .halo-sidebar-header .title {
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--sm-text, #0a0a0a) !important;
margin: 0 !important;
}
.halo-cart-sidebar .halo-sidebar-header .wrapper-cartCount {
background: var(--sm-text, #0a0a0a) !important;
color: #fff !important;
padding: 3px 10px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
line-height: 1.2 !important;
}
.halo-cart-sidebar .halo-sidebar-header .cartCount,
.halo-cart-sidebar .halo-sidebar-header [data-cart-text] {
color: #fff !important;
}
/* ===== Scroll wrapper — flex column so items scroll, footer stays at bottom ===== */
/* Make the sidebar itself a flex column so the wrapper fills exactly the space after the header (auto-sized) */
.halo-cart-sidebar.halo-sidebar {
display: flex !important;
flex-direction: column !important;
}
.halo-cart-sidebar .halo-sidebar-header { flex-shrink: 0 !important; }
.halo-cart-sidebar .halo-sidebar-wrapper {
padding: 0 !important;
background: transparent !important;
position: relative !important;
z-index: 1 !important;
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
.halo-cart-sidebar .previewCartMessage {
flex-shrink: 0 !important;
}
.halo-cart-sidebar cart-coupon-discount {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
.halo-cart-sidebar .previewCart-wrapper {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
overflow: hidden !important;
}
.halo-cart-sidebar .previewCart {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.halo-cart-sidebar cart-item-tool.previewCartTool { flex-shrink: 0 !important; }
.halo-cart-sidebar .popup-toolDowns { flex-shrink: 0 !important; }
.halo-cart-sidebar .previewCartInfo { flex-shrink: 0 !important; }
.halo-cart-sidebar .previewCartCollection { flex-shrink: 0 !important; }
/* ===== Free shipping bar ===== */
.halo-cart-sidebar .previewCartMessage {
margin: 7px 12px 3px !important;
background: rgba(255,255,255,0.6) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255,255,255,0.6) !important;
border-radius: 14px !important;
padding: 8px 12px !important;
position: relative !important;
overflow: hidden !important;
}
.halo-cart-sidebar .haloCalculatorShipping {
display: block !important;
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
}
.halo-cart-sidebar .haloCalculatorShipping .message {
font-size: 12.5px !important;
color: var(--sm-text, #0a0a0a) !important;
font-weight: 600 !important;
line-height: 1.3 !important;
margin: 14px 0 0 !important;
}
.halo-cart-sidebar .haloCalculatorShipping .message strong,
.halo-cart-sidebar .haloCalculatorShipping .message b {
color: var(--sm-accent-deep, #0e8c98) !important;
font-weight: 800 !important;
}
.halo-cart-sidebar .haloCalculatorShipping .progress {
margin: 0 !important;
background: transparent !important;
}
.halo-cart-sidebar .progress_shipping {
height: 6px !important;
background: rgba(255,255,255,0.6) !important;
border-radius: 999px !important;
overflow: visible !important;
position: relative !important;
margin-top: 6px !important;
}
.halo-cart-sidebar .progress-meter {
height: 100% !important;
background: linear-gradient(90deg, var(--sm-accent, #15b7c6), var(--sm-accent-deep, #0e8c98)) !important;
border-radius: 999px !important;
box-shadow: 0 0 12px rgba(21, 183, 198, 0.55) !important;
position: relative !important;
animation: sm-cart-shimmer 2.5s ease-in-out infinite !important;
}
@keyframes sm-cart-shimmer {
0%, 100% { box-shadow: 0 0 12px rgba(21, 183, 198, 0.55); }
50% { box-shadow: 0 0 22px rgba(21, 183, 198, 0.95); }
}
.halo-cart-sidebar .progress-truck-wrapper {
position: absolute !important;
right: -10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 22px !important;
height: 22px !important;
background: #fff !important;
border: 1.5px solid var(--sm-accent-deep, #0e8c98) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 2px 6px rgba(21, 183, 198, 0.25) !important;
z-index: 2 !important;
}
.halo-cart-sidebar .progress-truck-wrapper svg {
width: 12px !important;
height: 12px !important;
color: var(--sm-accent-deep, #0e8c98) !important;
fill: var(--sm-accent-deep, #0e8c98) !important;
filter: none !important;
}
.halo-cart-sidebar .progress-truck-wrapper svg .truck-body,
.halo-cart-sidebar .progress-truck-wrapper svg .wheel,
.halo-cart-sidebar .progress-truck-wrapper svg path {
fill: var(--sm-accent-deep, #0e8c98) !important;
}
/* ===== Items list ===== */
.halo-cart-sidebar .previewCart {
padding: 3px 12px 0 !important;
background: transparent !important;
}
.halo-cart-sidebar .previewCartList {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.halo-cart-sidebar .previewCartItem {
background: rgba(255,255,255,0.7) !important;
-webkit-backdrop-filter: blur(14px) !important;
backdrop-filter: blur(14px) !important;
border: 1px solid rgba(255,255,255,0.6) !important;
border-radius: 16px !important;
padding: 12px !important;
display: grid !important;
grid-template-columns: 76px 1fr !important;
column-gap: 12px !important;
row-gap: 0 !important;
align-items: center !important;
box-shadow: 0 6px 18px rgba(21, 183, 198, 0.08) !important;
font-size: 13.5px !important;
letter-spacing: 0 !important;
position: relative !important;
margin: 0 !important;
}
/* Item image */
.halo-cart-sidebar .previewCartItem-image {
width: 76px !important;
height: 76px !important;
padding: 0 !important;
top: 0 !important;
border-radius: 10px !important;
overflow: hidden !important;
background: var(--sm-cream, #f6f5f1) !important;
flex-shrink: 0 !important;
display: block !important;
}
.halo-cart-sidebar .previewCartItem-image::before,
.halo-cart-sidebar .previewCartItem-image:before {
display: none !important;
content: none !important;
padding-bottom: 0 !important;
height: 0 !important;
}
.halo-cart-sidebar .previewCartItem-image img {
position: static !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Item content */
.halo-cart-sidebar .previewCartItem-content {
width: 100% !important;
padding: 0 24px 0 0 !important;
min-width: 0 !important;
display: block !important;
vertical-align: top !important;
}
.halo-cart-sidebar .previewCartItem-name {
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
margin: 0 0 4px !important;
color: var(--sm-text, #0a0a0a) !important;
text-decoration: none !important;
background: none !important;
background-image: none !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
.halo-cart-sidebar .previewCartItem-name::before,
.halo-cart-sidebar .previewCartItem-name::after,
.halo-cart-sidebar .previewCartItem-name .text::before,
.halo-cart-sidebar .previewCartItem-name .text::after {
display: none !important;
content: none !important;
background: none !important;
}
.halo-cart-sidebar .previewCartItem-options {
padding: 0 !important;
margin: 0 0 8px !important;
display: block !important;
}
.halo-cart-sidebar .previewCartItem-variant {
font-size: 11px !important;
color: var(--sm-text-muted, #9a9a9a) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1.3 !important;
margin: 0 !important;
}
.halo-cart-sidebar .previewCartItem-edit { display: none !important; }
.halo-cart-sidebar .cart-item-properties,
.halo-cart-sidebar .product-option { font-size: 11px !important; color: var(--sm-text-muted, #9a9a9a) !important; margin: 0 0 6px !important; }
/* Price + qty row */
.halo-cart-sidebar .previewCartItem-change {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin: 6px 0 0 !important;
padding: 0 !important;
}
.halo-cart-sidebar .previewCartItem-price {
margin: 0 !important;
order: 2 !important;
padding: 0 !important;
background: transparent !important;
display: flex !important;
align-items: flex-end !important;
flex-direction: column !important;
gap: 0 !important;
text-align: right !important;
white-space: nowrap !important;
}
.halo-cart-sidebar .previewCartItem-price .price {
display: flex !important;
flex-direction: column-reverse !important;
align-items: flex-end !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
}
/* On-sale wrapper: stack new price on TOP, strikethrough BELOW */
.halo-cart-sidebar .previewCartItem-saving-price {
display: flex !important;
flex-direction: column-reverse !important;
align-items: flex-end !important;
gap: 0 !important;
white-space: nowrap !important;
}
/* New price (sale or default) */
.halo-cart-sidebar .previewCartItem-price .discounted-price,
.halo-cart-sidebar .previewCartItem-price [data-item-final-price-display] {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--sm-sale, #d62828) !important;
letter-spacing: -0.01em !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
/* When not on sale, regular price stays black */
.halo-cart-sidebar .previewCartItem-price .price > [data-item-final-price-display]:not(.discounted-price) {
color: var(--sm-text, #0a0a0a) !important;
}
/* Compare strikethrough (BELOW the new price) */
.halo-cart-sidebar .previewCartItem-price .before-discount-price,
.halo-cart-sidebar .previewCartItem-price s {
font-size: 11px !important;
color: var(--sm-text-muted, #9a9a9a) !important;
text-decoration: line-through !important;
font-weight: 400 !important;
line-height: 1.1 !important;
white-space: nowrap !important;
margin-top: 1px !important;
}
/* Qty stepper */
.halo-cart-sidebar .previewCartItem-qty {
display: inline-flex !important;
align-items: center !important;
border-radius: 999px !important;
height: 26px !important;
background: rgba(255,255,255,0.85) !important;
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
border: 1px solid rgba(21, 183, 198, 0.18) !important;
order: 1 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
}
.halo-cart-sidebar .previewCartItem-qty label { display: none !important; }
.halo-cart-sidebar .previewCartItem-qty .btn-quantity {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
display: block !important;
background: transparent !important;
border: 0 !important;
font-size: 0 !important;
color: var(--sm-text-soft, #4a4a4a) !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
text-indent: 0 !important;
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
}
/* Reset Halo's pseudo-elements then draw clean centered lines */
.halo-cart-sidebar .previewCartItem-qty .btn-quantity::before,
.halo-cart-sidebar .previewCartItem-qty .btn-quantity::after {
content: '' !important;
position: absolute !important;
background: currentColor !important;
border-radius: 1px !important;
transition: background 0.2s ease !important;
/* Horizontal line (becomes minus, or part of plus) */
width: 8px !important;
height: 1.5px !important;
left: 50% !important;
top: 50% !important;
margin: -0.75px 0 0 -4px !important;
transform: none !important;
}
/* Hide the second pseudo on minus (we only need one line) */
.halo-cart-sidebar .previewCartItem-qty .btn-quantity.minus::after,
.halo-cart-sidebar .previewCartItem-qty .minus::after {
display: none !important;
content: none !important;
}
/* Plus: use the second pseudo as the vertical line */
.halo-cart-sidebar .previewCartItem-qty .btn-quantity.plus::after,
.halo-cart-sidebar .previewCartItem-qty .plus::after {
display: block !important;
content: '' !important;
width: 1.5px !important;
height: 8px !important;
left: 50% !important;
top: 50% !important;
margin: -4px 0 0 -0.75px !important;
background: currentColor !important;
border-radius: 1px !important;
}
.halo-cart-sidebar .previewCartItem-qty .btn-quantity:hover {
background: rgba(21, 183, 198, 0.1) !important;
color: var(--sm-accent-deep, #0e8c98) !important;
}
.halo-cart-sidebar .previewCartItem-qty input.quantity {
width: 22px !important;
min-width: 22px !important;
text-align: center !important;
font-size: 12.5px !important;
font-weight: 700 !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
height: 26px !important;
color: var(--sm-text, #0a0a0a) !important;
-moz-appearance: textfield !important;
outline: none !important;
box-shadow: none !important;
}
.halo-cart-sidebar .previewCartItem-qty input::-webkit-inner-spin-button,
.halo-cart-sidebar .previewCartItem-qty input::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
/* Remove button */
.halo-cart-sidebar .previewCartItem-remove {
position: absolute !important;
top: 8px !important;
right: 8px !important;
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.85) !important;
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
border: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--sm-text-muted, #9a9a9a) !important;
cursor: pointer !important;
padding: 0 !important;
transition: background 0.2s ease, color 0.2s ease !important;
font-size: 0 !important;
z-index: 2 !important;
}
.halo-cart-sidebar .previewCartItem-remove:hover {
background: var(--sm-sale, #d62828) !important;
color: #fff !important;
}
.halo-cart-sidebar .previewCartItem-remove svg {
width: 11px !important;
height: 11px !important;
}
/* ===== Cross-sell collection ===== */
.halo-cart-sidebar .previewCartCollection {
padding: 5px 12px 4px !important;
background: transparent !important;
}
/* Kill Halo's white overlay pseudo-element (used only on screens >2000px wide) */
.halo-cart-sidebar .previewCart .previewCartProduct::after,
.halo-cart-sidebar .previewCart .previewCartProduct:after,
.halo-cart-sidebar .previewCartProduct::after,
.halo-cart-sidebar .previewCartProduct:after {
display: none !important;
content: none !important;
background: transparent !important;
}
.halo-cart-sidebar .previewCartTitle {
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--sm-text, #0a0a0a) !important;
padding: 0 6px 8px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
text-align: left !important;
}
.halo-cart-sidebar .previewCartTitle::before {
content: '✦';
color: var(--sm-accent, #15b7c6);
font-size: 12px;
}
/* ===== Recommended products — compact horizontal cards ===== */
/* Hide any leftover slick navigation */
.halo-cart-sidebar .previewCartCarousel .slick-arrow,
.halo-cart-sidebar .previewCartCarousel .slick-dots,
.halo-cart-sidebar .previewCartProduct .slick-dots {
display: none !important;
}
/* Carousel is a horizontal flex scroll row */
.halo-cart-sidebar .previewCartCarousel {
display: flex !important;
gap: 8px !important;
overflow-x: auto !important;
overflow-y: visible !important;
padding-bottom: 4px !important;
}
.halo-cart-sidebar .previewCartCarousel::-webkit-scrollbar { height: 3px; }
.halo-cart-sidebar .previewCartCarousel::-webkit-scrollbar-thumb { background: rgba(21, 183, 198, 0.3); border-radius: 2px; }
/* Each product card — fixed width so multiple fit and scroll */
.halo-cart-sidebar .previewCartCarousel .product {
flex: 0 0 160px !important;
width: 160px !important;
padding: 0 !important;
margin: 0 !important;
height: auto !important;
min-height: 0 !important;
align-self: start !important;
float: none !important;
display: block !important;
}
/* Compact horizontal product card */
.halo-cart-sidebar .previewCartCollection .product-item {
background: rgba(255,255,255,0.78) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255,255,255,0.65) !important;
border-radius: 12px !important;
padding: 8px 32px 8px 8px !important;
position: relative !important;
cursor: pointer !important;
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
box-shadow: 0 2px 8px rgba(21, 183, 198, 0.05) !important;
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
display: block !important;
}
.halo-cart-sidebar .previewCartCollection .product-item:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 18px rgba(21, 183, 198, 0.18) !important;
border-color: var(--sm-accent, #15b7c6) !important;
}
/* Force horizontal layout inside the card */
.halo-cart-sidebar .previewCartCollection .product-item .card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
height: auto !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-product {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
flex: 0 0 48px !important;
border-radius: 8px !important;
overflow: hidden !important;
background: var(--sm-cream, #f6f5f1) !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
position: relative !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-media {
width: 100% !important;
height: 100% !important;
position: relative !important;
display: block !important;
padding: 0 !important;
background: transparent !important;
aspect-ratio: 1 !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-media::before,
.halo-cart-sidebar .previewCartCollection .product-item .card-media:before {
display: none !important;
content: none !important;
padding-bottom: 0 !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
position: absolute !important;
inset: 0 !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-information,
.halo-cart-sidebar .previewCart .previewCartProduct .product .card .card-information,
.halo-cart-sidebar .previewCart .previewCartCollection .product .card .card-information {
flex: 1 1 auto !important;
min-width: 0 !important;
padding: 0 !important;
background: transparent !important;
width: auto !important;
position: static !important;
display: block !important;
top: 0 !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-information__wrapper {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
text-align: left !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-title {
font-size: 10.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
margin: 0 0 3px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
color: var(--sm-text, #0a0a0a) !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-decoration: none !important;
background: none !important;
background-image: none !important;
min-height: 0 !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-title::before,
.halo-cart-sidebar .previewCartCollection .product-item .card-title::after,
.halo-cart-sidebar .previewCartCollection .product-item .card-title .text,
.halo-cart-sidebar .previewCartCollection .product-item .card-title .text::before,
.halo-cart-sidebar .previewCartCollection .product-item .card-title .text::after {
display: inline !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-title::before,
.halo-cart-sidebar .previewCartCollection .product-item .card-title::after,
.halo-cart-sidebar .previewCartCollection .product-item .card-title .text::before,
.halo-cart-sidebar .previewCartCollection .product-item .card-title .text::after {
display: none !important;
content: none !important;
background: none !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-price,
.halo-cart-sidebar .previewCartCollection .product-item .card-price .price,
.halo-cart-sidebar .previewCartCollection .product-item .card-price .price-item--regular,
.halo-cart-sidebar .previewCartCollection .product-item .card-price .price-item--sale {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--sm-text, #0a0a0a) !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
background: transparent !important;
display: inline-block !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-price .price__compare,
.halo-cart-sidebar .previewCartCollection .product-item .card-price .price__sale .price__compare {
display: none !important;
}
.halo-cart-sidebar .previewCartCollection .product-item .card-action,
.halo-cart-sidebar .previewCartCollection .product-item .card-product__group,
.halo-cart-sidebar .previewCartCollection .product-item .wishlist-icon,
.halo-cart-sidebar .previewCartCollection .product-item .swatch,
.halo-cart-sidebar .previewCartCollection .product-item .card-vendor,
.halo-cart-sidebar .previewCartCollection .product-item .card-reviews {
display: none !important;
}
/* "+" indicator on the right side (card itself is a link to product page) */
.halo-cart-sidebar .previewCartCollection .product-item::after {
content: '+' !important;
position: absolute !important;
top: 50% !important;
right: 8px !important;
transform: translateY(-50%) !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: var(--sm-text, #0a0a0a) !important;
color: #fff !important;
font-size: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
pointer-events: none !important;
font-weight: 400 !important;
line-height: 1 !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
transition: background 0.2s, transform 0.2s !important;
z-index: 3 !important;
}
.halo-cart-sidebar .previewCartCollection .product-item:hover::after {
background: var(--sm-accent, #15b7c6) !important;
transform: translateY(-50%) scale(1.12) !important;
}
/* ===== Cart tools — 2 column grid ===== */
.halo-cart-sidebar .previewCartTool {
padding: 0 12px 4px !important;
margin: 3px 0 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
background: transparent !important;
border: 0 !important;
}
.halo-cart-sidebar .cartTool-item {
background: rgba(255,255,255,0.55) !important;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255,255,255,0.6) !important;
border-radius: 12px !important;
padding: 10px 12px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
width: auto !important;
text-align: left !important;
transition: background 0.2s ease !important;
}
.halo-cart-sidebar .cartTool-item:hover {
background: rgba(255,255,255,0.75) !important;
}
.halo-cart-sidebar .cartTool-item:first-child { border-left: 1px solid rgba(255,255,255,0.6) !important; }
.halo-cart-sidebar .cart-tool-icon {
width: 24px;
height: 24px;
min-width: 24px;
border-radius: 50%;
background: rgba(21, 183, 198, 0.15);
color: var(--sm-accent-deep, #0e8c98);
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
pointer-events: none;
}
.halo-cart-sidebar .cart-tool-icon svg {
width: 13px !important;
height: 13px !important;
color: var(--sm-accent-deep, #0e8c98) !important;
fill: currentColor !important;
}
.halo-cart-sidebar .cart-tool-label {
flex: 1;
font-size: 11.5px;
font-weight: 600;
color: var(--sm-text, #0a0a0a);
letter-spacing: 0;
text-transform: none;
pointer-events: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.halo-cart-sidebar .cart-tool-chev {
color: var(--sm-text-muted, #9a9a9a);
font-size: 14px;
font-weight: 700;
margin-left: auto;
pointer-events: none;
transition: transform 0.25s ease, color 0.2s ease;
}
.halo-cart-sidebar .cartTool-item.active .cart-tool-chev {
transform: rotate(90deg);
color: var(--sm-accent-deep, #0e8c98);
}
/* Applied / active state — when note has text or discount code is stored */
.halo-cart-sidebar .cartTool-item.has-value {
background: linear-gradient(135deg, rgba(21, 183, 198, 0.18), rgba(21, 183, 198, 0.08)) !important;
border-color: rgba(21, 183, 198, 0.45) !important;
}
.halo-cart-sidebar .cartTool-item.has-value .cart-tool-icon {
background: var(--sm-accent, #15b7c6) !important;
box-shadow: 0 2px 6px rgba(21, 183, 198, 0.4) !important;
}
.halo-cart-sidebar .cartTool-item.has-value .cart-tool-icon svg,
.halo-cart-sidebar .cartTool-item.has-value .cart-tool-icon svg path {
color: #fff !important;
fill: #fff !important;
stroke: #fff !important;
}
.halo-cart-sidebar .cartTool-item.has-value .cart-tool-label {
color: var(--sm-accent-deep, #0e8c98) !important;
font-weight: 700 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.15 !important;
}
.halo-cart-sidebar .cartTool-item.has-value .cart-tool-label::after {
content: 'Aplicat';
display: block;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sm-accent-deep, #0e8c98);
opacity: 0.85;
margin-top: 2px;
line-height: 1;
}
/* Swap chevron for checkmark when applied */
.halo-cart-sidebar .cartTool-item.has-value .cart-tool-chev {
font-size: 0 !important;
transform: none !important;
position: relative !important;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--sm-accent-deep, #0e8c98);
color: #fff !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.halo-cart-sidebar .cartTool-item.has-value .cart-tool-chev::before {
content: '✓';
font-size: 9px;
font-weight: 700;
color: #fff;
line-height: 1;
}
/* ===== Popup toolDown — restyle as glass card slide up ===== */
.halo-cart-sidebar .popup-toolDown {
border-top: 0 !important;
background: rgba(255,255,255,0.92) !important;
-webkit-backdrop-filter: blur(20px) !important;
backdrop-filter: blur(20px) !important;
border-top: 1px solid rgba(21, 183, 198, 0.2) !important;
padding: 18px 22px 20px !important;
border-radius: 18px 18px 0 0 !important;
box-shadow: 0 -8px 24px rgba(0,0,0,0.08) !important;
}
.halo-cart-sidebar .popup-toolDown label {
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--sm-text, #0a0a0a) !important;
margin: 0 0 10px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.halo-cart-sidebar .popup-toolDown label svg {
width: 16px !important; height: 16px !important;
color: var(--sm-accent-deep, #0e8c98) !important;
}
.halo-cart-sidebar .popup-toolDown .text-area,
.halo-cart-sidebar .popup-toolDown textarea,
.halo-cart-sidebar .popup-toolDown input[type="text"],
.halo-cart-sidebar .popup-toolDown input.field__input {
width: 100% !important;
padding: 10px 12px !important;
border: 1px solid rgba(21, 183, 198, 0.25) !important;
border-radius: 10px !important;
background: rgba(255,255,255,0.9) !important;
font-size: 13px !important;
color: var(--sm-text, #0a0a0a) !important;
font-family: inherit !important;
outline: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.halo-cart-sidebar .popup-toolDown .text-area,
.halo-cart-sidebar .popup-toolDown textarea { min-height: 70px !important; resize: vertical !important; }
.halo-cart-sidebar .popup-toolDown input:focus,
.halo-cart-sidebar .popup-toolDown textarea:focus {
border-color: var(--sm-accent, #15b7c6) !important;
box-shadow: 0 0 0 3px rgba(21, 183, 198, 0.15) !important;
}
.halo-cart-sidebar .popup-toolDown .button,
.halo-cart-sidebar .popup-toolDown .button-1 {
margin-top: 10px !important;
background: var(--sm-text, #0a0a0a) !important;
color: #fff !important;
border: 0 !important;
border-radius: 10px !important;
padding: 11px 18px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background 0.2s ease !important;
}
.halo-cart-sidebar .popup-toolDown .button:hover,
.halo-cart-sidebar .popup-toolDown .button-1:hover {
background: var(--sm-accent-deep, #0e8c98) !important;
}
.halo-cart-sidebar .popup-toolDown .button-2,
.halo-cart-sidebar .popup-toolDown .cart-cancel-popup .button {
background: transparent !important;
color: var(--sm-text-soft, #4a4a4a) !important;
border: 1px solid var(--sm-line, #ececec) !important;
margin-left: 8px !important;
}
.halo-cart-sidebar .popup-toolDown .button-2:hover {
background: var(--sm-surface, #faf9f6) !important;
color: var(--sm-text, #0a0a0a) !important;
}
.halo-cart-sidebar .previewCart.active-tool::before {
background: rgba(247, 242, 237, 0.6) !important;
-webkit-backdrop-filter: blur(2px) !important;
backdrop-filter: blur(2px) !important;
}
/* ===== Totals + footer ===== */
.halo-cart-sidebar .previewCartInfo {
padding: 4px 20px 14px !important;
background: rgba(255,255,255,0.82) !important;
-webkit-backdrop-filter: blur(20px) !important;
backdrop-filter: blur(20px) !important;
border-top: 1px solid rgba(255,255,255,0.6) !important;
position: relative !important;
z-index: 2 !important;
margin: 0 !important;
}
.halo-cart-sidebar .previewCartTotalsPrice {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: contents !important;
}
/* When the savings row is the only visible row, give it a clean bottom spacing */
.halo-cart-sidebar .previewCartTotalsPrice:has(.cart-total-savings:not([style*="display: none"])) {
margin-bottom: 10px !important;
}
.halo-cart-sidebar .previewCartTotals {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-size: 13px !important;
color: var(--sm-text-soft, #4a4a4a) !important;
margin: 0 0 4px !important;
padding: 0 !important;
}
/* Respect inline display:none on the savings row when there is no discount */
.halo-cart-sidebar .previewCartTotals[style*="display: none"],
.halo-cart-sidebar .previewCartTotals[style*="display:none"] {
display: none !important;
}
/* Hide the redundant Subtotal, Total and shipping note rows — total is already echoed on the checkout button */
.halo-cart-sidebar .previewCartTotals.subTotal,
.halo-cart-sidebar .previewCartTotals.total,
.halo-cart-sidebar .previewCartTotals.shipTotal {
display: none !important;
}
.halo-cart-sidebar .previewCartTotals-label,
.halo-cart-sidebar .previewCartTotals-value {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.halo-cart-sidebar .previewCartTotals.cart-total-savings {
background: linear-gradient(135deg, rgba(21, 183, 198, 0.15), rgba(21, 183, 198, 0.05)) !important;
color: var(--sm-accent-deep, #0e8c98) !important;
font-weight: 700 !important;
margin: 4px -6px !important;
padding: 6px 10px !important;
border-radius: 8px !important;
border: 1px dashed rgba(21, 183, 198, 0.4) !important;
font-size: 12px !important;
}
.halo-cart-sidebar .previewCartTotals.cart-total-savings::before {
content: '🎉';
margin-right: 4px;
}
.halo-cart-sidebar .previewCartTotals.total {
font-size: 16px !important;
font-weight: 800 !important;
color: var(--sm-text, #0a0a0a) !important;
padding-top: 8px !important;
border-top: 1px solid rgba(0,0,0,0.06) !important;
margin-top: 6px !important;
letter-spacing: -0.01em !important;
}
.halo-cart-sidebar .previewCartTotals.shipTotal {
font-size: 10px !important;
color: var(--sm-text-muted, #9a9a9a) !important;
justify-content: flex-end !important;
margin-top: -2px !important;
}
/* Action wrapper */
.halo-cart-sidebar .previewCartAction {
margin: 4px 0 0 !important;
}
/* Action buttons */
.halo-cart-sidebar .previewCartGroup {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin: 0 !important;
}
.halo-cart-sidebar .button-checkout {
width: 100% !important;
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important;
color: #fff !important;
border: 0 !important;
border-radius: 12px !important;
padding: 14px 18px !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
box-shadow:
0 10px 28px rgba(0,0,0,0.28),
0 2px 6px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.08) !important;
position: relative !important;
overflow: hidden !important;
text-decoration: none !important;
line-height: 1.2 !important;
isolation: isolate !important;
/* Three combined animations: pulse halo + occasional shake */
animation:
sm-cart-cta-pulse 3s ease-in-out infinite,
sm-cart-cta-shake 7s ease-in-out infinite !important;
transform-origin: center center !important;
}
/* Breathing turquoise halo */
@keyframes sm-cart-cta-pulse {
0%, 100% {
box-shadow:
0 10px 28px rgba(0,0,0,0.28),
0 2px 6px rgba(0,0,0,0.18),
0 0 0 0 rgba(21, 183, 198, 0.5),
inset 0 1px 0 rgba(255,255,255,0.08);
}
50% {
box-shadow:
0 14px 36px rgba(0,0,0,0.34),
0 2px 6px rgba(0,0,0,0.18),
0 0 0 8px rgba(21, 183, 198, 0),
inset 0 1px 0 rgba(255,255,255,0.08);
}
}
/* Attention shake — 75% calm, 25% wiggle */
@keyframes sm-cart-cta-shake {
0%, 75%, 100% { transform: translateX(0) rotate(0deg); }
77% { transform: translateX(-2.5px) rotate(-0.5deg); }
80% { transform: translateX(2.5px) rotate(0.5deg); }
83% { transform: translateX(-2.5px) rotate(-0.5deg); }
86% { transform: translateX(2.5px) rotate(0.5deg); }
89% { transform: translateX(-2px) rotate(-0.35deg); }
92% { transform: translateX(2px) rotate(0.35deg); }
95% { transform: translateX(-1px) rotate(-0.2deg); }
98% { transform: translateX(1px) rotate(0.2deg); }
}
/* Continuous shimmer that sweeps across every few seconds */
.halo-cart-sidebar .button-checkout::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -75% !important;
width: 55% !important;
height: 100% !important;
background: linear-gradient(105deg,
transparent 0%,
rgba(255,255,255,0.06) 35%,
rgba(255,255,255,0.32) 50%,
rgba(255,255,255,0.06) 65%,
transparent 100%) !important;
transform: skewX(-18deg) !important;
pointer-events: none !important;
z-index: 1 !important;
animation: sm-cart-cta-shine 4s ease-in-out infinite !important;
}
@keyframes sm-cart-cta-shine {
0%, 100% { left: -75%; opacity: 0; }
8% { opacity: 1; }
55% { left: 125%; opacity: 1; }
56%, 100% { opacity: 0; }
}
/* Soft turquoise glow on the right side — draws eye toward the price echo */
.halo-cart-sidebar .button-checkout::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
right: -20px !important;
transform: translateY(-50%) !important;
width: 100px !important;
height: 100px !important;
background: radial-gradient(circle, rgba(21, 183, 198, 0.45), transparent 65%) !important;
pointer-events: none !important;
z-index: 0 !important;
filter: blur(6px) !important;
opacity: 0.7 !important;
animation: sm-cart-cta-glow 3s ease-in-out infinite !important;
}
@keyframes sm-cart-cta-glow {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.85; }
}
.halo-cart-sidebar .button-checkout > * { position: relative; z-index: 2; }
.halo-cart-sidebar .button-checkout:hover {
transform: translateY(-2px) scale(1.01) !important;
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%) !important;
color: #fff !important;
box-shadow:
0 18px 40px rgba(0,0,0,0.36),
0 4px 10px rgba(0,0,0,0.22),
0 0 0 4px rgba(21, 183, 198, 0.22),
inset 0 1px 0 rgba(255,255,255,0.12) !important;
/* Pause the shake while hovering so it doesn't interfere with hover state */
animation: sm-cart-cta-pulse 3s ease-in-out infinite !important;
}
.halo-cart-sidebar .button-checkout:active {
transform: translateY(0) scale(0.99) !important;
transition: transform 0.1s ease !important;
}
.halo-cart-sidebar .button-checkout .cart-cta-label { flex: 0 1 auto; }
.halo-cart-sidebar .button-checkout .cart-cta-price {
background: rgba(255,255,255,0.18) !important;
padding: 5px 12px !important;
border-radius: 999px !important;
font-size: 12.5px !important;
-webkit-backdrop-filter: blur(10px) !important;
backdrop-filter: blur(10px) !important;
white-space: nowrap !important;
letter-spacing: 0.04em !important;
}
.halo-cart-sidebar .button-checkout:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
animation: none !important;
}
.halo-cart-sidebar .button-view-cart {
display: block !important;
text-align: center !important;
background: transparent !important;
color: var(--sm-text-soft, #4a4a4a) !important;
border: 0 !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
padding: 0 0 4px !important;
margin: 0 !important;
transition: color 0.2s ease !important;
order: -1 !important;
}
.halo-cart-sidebar .button-view-cart:hover {
color: var(--sm-accent-deep, #0e8c98) !important;
background: transparent !important;
}
/* Global checkbox (terms) */
.halo-cart-sidebar .previewCartCheckbox {
background: rgba(255,255,255,0.5) !important;
border-radius: 10px !important;
padding: 10px 12px !important;
font-size: 11.5px !important;
margin-bottom: 10px !important;
}
/* Trust row */
.halo-cart-sidebar .cart-trust {
margin-top: 8px !important;
display: flex !important;
justify-content: space-around !important;
padding-top: 8px !important;
border-top: 1px solid rgba(0,0,0,0.06) !important;
gap: 8px !important;
}
.halo-cart-sidebar .cart-trust-item {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 10.5px !important;
color: var(--sm-text-soft, #4a4a4a) !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
}
.halo-cart-sidebar .cart-trust-item .ico {
font-size: 12px !important;
}
/* ===== Empty state ===== */
.halo-cart-sidebar .previewCart-emptyBody {
padding: 60px 22px !important;
text-align: center !important;
}
.halo-cart-sidebar .previewCart-emptyBody .empty .text {
font-size: 14px !important;
color: var(--sm-text-soft, #4a4a4a) !important;
font-weight: 500 !important;
}
.halo-cart-sidebar .previewCart-emptyBody .button-continue {
margin-top: 18px !important;
background: var(--sm-text, #0a0a0a) !important;
color: #fff !important;
border-radius: 999px !important;
padding: 12px 24px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
text-decoration: none !important;
display: inline-block !important;
}
/* Scrollbar */
.halo-cart-sidebar .halo-sidebar-wrapper::-webkit-scrollbar,
.halo-cart-sidebar .previewCart-wrapper::-webkit-scrollbar { width: 4px; }
.halo-cart-sidebar .halo-sidebar-wrapper::-webkit-scrollbar-thumb,
.halo-cart-sidebar .previewCart-wrapper::-webkit-scrollbar-thumb { background: rgba(21, 183, 198, 0.3); border-radius: 2px; }
/* Mobile tweaks */
@media (max-width: 720px) {
.halo-cart-sidebar .previewCartItem {
grid-template-columns: 72px 1fr !important;
padding: 12px !important;
column-gap: 12px !important;
row-gap: 0 !important;
}
.halo-cart-sidebar .previewCartItem-image {
width: 72px !important;
height: 72px !important;
}
.halo-cart-sidebar .button-checkout {
padding: 15px 18px !important;
font-size: 12.5px !important;
}
.halo-cart-sidebar .cart-trust-item { font-size: 9.5px !important; }
}
@media (max-width: 767px) {
.policies-block .halo-row.column-4 {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.policies-block .halo-row.column-4 .halo-item {
flex: 0 0 calc(50% - 4px);
max-width: calc(50% - 4px);
width: calc(50% - 4px);
margin: 0 !important;
}
/* icon mai mic + spațiu mai mic față de text */
.policies-block .halo-item img {
width: 32px !important;
height: 32px !important;
--icon-mg-right-style: 8px !important;
}
/* padding intern mai mic ca să avem mai mult loc pentru text */
.policies-block .halo-item > a {
--item-padding-left-right: 6px !important;
--item-padding-top-style: 8px !important;
--item-padding-bottom-style: 8px !important;
}
/* TITLUL: pe un singur rând, fără wrap, micșorat puțin */
.policies-block .halo-item .policies-text {
font-size: 12px !important;
white-space: nowrap !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
}
/* DESCRIEREA: pe un singur rând, cu „..." dacă depășește */
.policies-block .halo-item .policies-des {
font-size: 11px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.3 !important;
}
}
@media (min-width: 1100px) {
/* facem containerul referință pentru poziționare absolută */
.header-navigation .container.container-1570 {
position: relative;
}
/* scoatem search-ul din flex și-l centrăm absolut */
.header-navigation .header__iconItem.header__search.style-2 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px; /* aici reglezi lungimea */
max-width: calc(100% - 620px); /* lasă loc pentru logo + iconițe */
margin: 0 !important;
padding: 0 !important;
}
/* forțăm form-ul și inputul să umple toată lățimea alocată */
.header-navigation .header__search.style-2 details,
.header-navigation .header__search.style-2 .search-modal__form,
.header-navigation .header__search.style-2 .search,
.header-navigation .header__search.style-2 .field,
.header-navigation .header__search.style-2 .search__input {
width: 100% !important;
max-width: 100% !important;
}
/* mic ajustaj vertical din cauza pt-2 de pe părinte */
.header-navigation .header__iconItem.header__search.style-2 {
margin-top: 4px;
}
}
/* ============================================================
SMARTINO COLLECTION TOOLBAR — Active filter chips + Counter + Sort + View
============================================================ */
/* ===== TOOLBAR WRAPPER ===== */
body .toolbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
border: 0 !important;
border-top: 1px solid var(--sm-line, #ececec) !important;
border-bottom: 1px solid var(--sm-line, #ececec) !important;
padding: 14px 0 !important;
margin: 0 0 24px !important;
gap: 16px !important;
flex-wrap: wrap !important;
position: relative !important;
/* z-index: 100 scoped only on mobile (vezi media query — pe desktop trebuie să fie sub dropdown-ul meniului) */
}
@media (max-width: 1024px) {
body .toolbar {
z-index: 100 !important;
}
}
body .toolbar-wrapper { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: wrap !important; }
body .toolbar-wrapper:not(.toolbar-mobile) { flex: 0 1 auto !important; justify-content: flex-end !important; margin-left: auto !important; }
body .toolbar-wrapper.toolbar-wrapper--flex { justify-content: flex-end !important; }
/* Always hide the secondary "mobile" sort trigger — desktop pill is responsive enough */
body .toolbar .toolbar-dropdown.filter-sortby .label-tab.hidden-on-desktop,
body .toolbar .label-tab.hidden-on-desktop,
body .toolbar .dropdown-menu.hidden-on-desktop {
display: none !important;
}
/* Hide mobile-only wrappers on desktop (the Filtra button + duplicate mobile view-as) */
@media (min-width: 1025px) {
body .toolbar-wrapper.toolbar-mobile {
display: none !important;
}
}
/* Hide desktop-only elements on mobile/tablet */
@media (max-width: 1024px) {
body .toolbar .label-tab.hidden-on-mobile {
display: none !important;
}
/* Re-show the desktop label-tab AND its dropdown menu on smaller screens — Halo uses opacity/visibility for show/hide, controlled by aria-expanded */
body .toolbar .toolbar-sort .label-tab.hidden-on-mobile,
body .toolbar .toolbar-limitView .label-tab.hidden-on-mobile {
display: inline-flex !important;
}
body .toolbar .toolbar-sort .dropdown-menu.hidden-on-mobile,
body .toolbar .toolbar-limitView .dropdown-menu.hidden-on-mobile {
display: block !important;
}
}
/* ===== RESULTS COUNT (show "X din Y produse") ===== */
body .toolbar .results-count {
font-size: 13px !important;
color: var(--sm-text-soft, #4a4a4a) !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
body .toolbar .results-count .results {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
body .toolbar .results-count .count {
font-weight: 700 !important;
color: var(--sm-text, #0a0a0a) !important;
font-size: 14px !important;
}
/* ===== TOOLBAR COLS — clear extra spacing ===== */
body .toolbar-colRight {
display: flex !important;
align-items: center !important;
gap: 14px !important;
font-size: initial !important;
letter-spacing: 0 !important;
}
/* Kill Halo's 28px margin-left between adjacent toolbar items — gap handles spacing */
body .toolbar .toolbar-col .toolbar-item + .toolbar-item,
body .toolbar .toolbar-item + .toolbar-item {
margin-left: 0 !important;
}
/* Keep Halo's mobile hide on .toolbar-colLeft — show only on desktop */
@media (min-width: 1025px) {
body .toolbar-col.toolbar-colLeft {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
}
@media (max-width: 1024px) {
body .toolbar-col.toolbar-colLeft {
display: none !important;
}
}
/* ===== LABEL TEXT (hide labels — they're integrated in pills) ===== */
body .toolbar .toolbar-label {
display: none !important;
}
/* ===== VIEW-AS SWITCHER — full pill matching sort/per-page pill ===== */
body .toolbar .toolbar-viewAs {
display: inline-flex !important;
border: 1px solid var(--sm-line, #ececec) !important;
border-radius: 999px !important;
overflow: hidden !important;
padding: 0 !important;
background: #fff !important;
height: 36px !important;
box-sizing: border-box !important;
align-items: stretch !important;
}
body .toolbar .toolbar-viewAs .toolbar-icon {
width: 36px !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
color: var(--sm-text-muted, #9a9a9a) !important;
transition: background 0.2s ease, color 0.2s ease !important;
position: relative !important;
}
body .toolbar .toolbar-viewAs .toolbar-icon:hover { background-color: var(--sm-surface, #faf9f6) !important; color: var(--sm-text, #0a0a0a) !important; }
body .toolbar .toolbar-viewAs .toolbar-icon.active {
background-color: var(--sm-text, #0a0a0a) !important;
color: #fff !important;
}
/* Show only 3 options: grid-3 cols + grid-4 cols + list view. Hide grid-2 and grid-5 */
body .toolbar .toolbar-viewAs .toolbar-icon.grid-2,
body .toolbar .toolbar-viewAs .toolbar-icon.grid-5 {
display: none !important;
}
body .toolbar .toolbar-viewAs .toolbar-icon.grid-3,
body .toolbar .toolbar-viewAs .toolbar-icon.grid-4,
body .toolbar .toolbar-viewAs .toolbar-icon.icon-mode-list {
display: flex !important;
width: 36px !important;
}
/* Reset Halo's :before box-shadow tricks completely, then use our background-image */
body .toolbar .toolbar-viewAs .toolbar-icon:before,
body .toolbar .toolbar-viewAs .toolbar-icon::before {
content: '' !important;
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 18px !important;
height: 18px !important;
background-color: transparent !important;
box-shadow: none !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
display: block !important;
}
/* GRID 3 cols → 3 vertical bars */
body .toolbar .toolbar-viewAs .toolbar-icon.grid-3:before,
body .toolbar .toolbar-viewAs .toolbar-icon.grid-3::before {
background-image: url("data:image/svg+xml;utf8,") !important;
}
body .toolbar .toolbar-viewAs .toolbar-icon.grid-3.active:before,
body .toolbar .toolbar-viewAs .toolbar-icon.grid-3.active::before {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* GRID 4 cols → 4 vertical bars */
body .toolbar .toolbar-viewAs .toolbar-icon.grid-4:before,
body .toolbar .toolbar-viewAs .toolbar-icon.grid-4::before {
background-image: url("data:image/svg+xml;utf8,") !important;
}
body .toolbar .toolbar-viewAs .toolbar-icon.grid-4.active:before,
body .toolbar .toolbar-viewAs .toolbar-icon.grid-4.active::before {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* LIST view → horizontal lines */
body .toolbar .toolbar-viewAs .toolbar-icon.icon-mode-list:before,
body .toolbar .toolbar-viewAs .toolbar-icon.icon-mode-list::before {
background-image: url("data:image/svg+xml;utf8,") !important;
}
body .toolbar .toolbar-viewAs .toolbar-icon.icon-mode-list.active:before,
body .toolbar .toolbar-viewAs .toolbar-icon.icon-mode-list.active::before {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* Hide the inner icon span from Halo */
body .toolbar .toolbar-viewAs .toolbar-icon .icon { display: none !important; }
/* ===== SORT + ITEMS PER PAGE — outlined pill style ===== */
body .toolbar-sort,
body .toolbar-limitView {
position: relative !important;
}
body .toolbar-sort .toolbar-dropdown,
body .toolbar-limitView .toolbar-dropdown {
position: relative !important;
}
body .toolbar .toolbar-sort .label-tab,
body .toolbar .toolbar-limitView .label-tab {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 14px 8px 16px !important;
border: 1px solid var(--sm-line, #ececec) !important;
border-radius: 999px !important;
background: #fff !important;
cursor: pointer !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: var(--sm-text, #0a0a0a) !important;
letter-spacing: 0 !important;
text-transform: none !important;
transition: border-color 0.2s, background 0.2s !important;
min-height: 36px !important;
line-height: 1.2 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
white-space: nowrap !important;
}
/* Override Halo's filter-sortby min-width AND label-text truncation */
body .toolbar .toolbar-dropdown.filter-sortby .label-tab { min-width: 0 !important; }
body .toolbar .toolbar-sort .label-tab .label-text,
body .toolbar .toolbar-limitView .label-tab .label-text {
display: inline !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
}
body .toolbar-sort .label-tab:hover,
body .toolbar-limitView .label-tab:hover {
border-color: var(--sm-text, #0a0a0a) !important;
background: var(--sm-surface, #faf9f6) !important;
}
/* Add the "Sortează:" / "Pe pagină:" pseudo label prefix */
body .toolbar-sort .label-tab .label-text::before {
content: 'Sortează: ';
color: var(--sm-text-muted, #9a9a9a);
font-weight: 500;
margin-right: 2px;
}
body .toolbar-limitView .label-tab .label-text::before {
content: 'Pe pagină: ';
color: var(--sm-text-muted, #9a9a9a);
font-weight: 500;
margin-right: 2px;
}
body .toolbar-sort .label-tab .label-text,
body .toolbar-limitView .label-tab .label-text {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* Dropdown arrow — override Halo's absolute-positioned arrow */
body .toolbar .toolbar-sort .label-tab .halo-icon-dropdown,
body .toolbar .toolbar-sort .label-tab .icon-dropdown,
body .toolbar .toolbar-limitView .label-tab .halo-icon-dropdown,
body .toolbar .toolbar-limitView .label-tab .icon-dropdown {
display: inline-block !important;
width: 12px !important;
height: 12px !important;
margin: 0 0 0 4px !important;
position: relative !important;
right: auto !important;
top: auto !important;
transform: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
flex-shrink: 0 !important;
}
body .toolbar .toolbar-sort .label-tab .halo-icon-dropdown::before,
body .toolbar .toolbar-sort .label-tab .icon-dropdown::before,
body .toolbar .toolbar-limitView .label-tab .halo-icon-dropdown::before,
body .toolbar .toolbar-limitView .label-tab .icon-dropdown::before {
display: none !important;
content: none !important;
}
/* Dropdown menu — clean pill list (higher specificity than Halo's .hidden-on-mobile) */
body .toolbar .toolbar-sort .toolbar-dropdown,
body .toolbar .toolbar-limitView .toolbar-dropdown {
position: relative !important;
z-index: 50 !important;
}
body .toolbar .toolbar-sort .toolbar-dropdown .dropdown-menu.hidden-on-mobile,
body .toolbar .toolbar-limitView .toolbar-dropdown .dropdown-menu.hidden-on-mobile,
body .toolbar .toolbar-sort .toolbar-dropdown .dropdown-menu,
body .toolbar .toolbar-limitView .toolbar-dropdown .dropdown-menu {
position: absolute !important;
top: calc(100% + 6px) !important;
right: 0 !important;
left: auto !important;
bottom: auto !important;
width: auto !important;
min-width: 220px !important;
max-width: 92vw !important;
background: #fff !important;
border: 1px solid var(--sm-line, #ececec) !important;
border-radius: 12px !important;
padding: 4px !important;
margin: 0 !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06) !important;
z-index: 9999 !important;
transform: translate3d(0, -6px, 0) !important;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}
/* Force toolbar parent to allow overflow so dropdown isn't clipped */
body .toolbar,
body .toolbar-wrapper,
body .toolbar-colRight {
overflow: visible !important;
}
body .toolbar .toolbar-sort .toolbar-dropdown [aria-expanded="true"]+.dropdown-menu,
body .toolbar .toolbar-limitView .toolbar-dropdown [aria-expanded="true"]+.dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translate3d(0, 0, 0) !important;
}
body .toolbar .toolbar-sort .dropdown-menu li,
body .toolbar .toolbar-limitView .dropdown-menu li {
padding: 4px 10px !important;
margin: 0 !important;
border-radius: 6px !important;
font-size: 12.5px !important;
cursor: pointer !important;
color: var(--sm-text-soft, #4a4a4a) !important;
transition: background 0.15s, color 0.15s !important;
line-height: 1.3 !important;
}
/* Reset Halo's .text padding inside dropdown li */
body .toolbar .toolbar-sort .dropdown-menu li .text,
body .toolbar .toolbar-limitView .dropdown-menu li .text {
padding: 5px 4px !important;
margin: 0 !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
text-decoration: none !important;
display: block !important;
}
body .toolbar .toolbar-sort .dropdown-menu li.is-active .text,
body .toolbar .toolbar-limitView .dropdown-menu li.is-active .text {
text-decoration: none !important;
font-weight: 700 !important;
}
body .toolbar-sort .dropdown-menu li:hover,
body .toolbar-limitView .dropdown-menu li:hover {
background: var(--sm-surface, #faf9f6) !important;
color: var(--sm-text, #0a0a0a) !important;
}
body .toolbar .toolbar-sort .dropdown-menu li.is-active,
body .toolbar .toolbar-limitView .dropdown-menu li.is-active,
body .toolbar .toolbar-sort .dropdown-menu li.is-active .text,
body .toolbar .toolbar-limitView .dropdown-menu li.is-active .text {
background: var(--sm-text, #0a0a0a) !important;
color: #fff !important;
font-weight: 600 !important;
}
body .toolbar .toolbar-sort .dropdown-menu li.is-active .text,
body .toolbar .toolbar-limitView .dropdown-menu li.is-active .text {
background: transparent !important;
}
/* ===== ACTIVE FILTER CHIPS — black pills with × close ===== */
.sidebarBlock.refined-widgets,
body .sidebarBlock.refined-widgets {
padding: 0 !important;
margin: 0 0 18px !important;
border: 0 !important;
background: transparent !important;
}
.sidebarBlock.refined-widgets .sidebarBlock-heading {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin: 0 0 10px !important;
padding: 0 !important;
border: 0 !important;
}
.sidebarBlock.refined-widgets .facets__text {
font-size: 10.5px !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--sm-text-muted, #9a9a9a) !important;
}
.sidebarBlock.refined-widgets .facets__clear-all,
.sidebarBlock.refined-widgets .facets__clear-all .text {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--sm-text-soft, #4a4a4a) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
.sidebarBlock.refined-widgets .facets__clear-all:hover,
.sidebarBlock.refined-widgets .facets__clear-all:hover .text {
color: var(--sm-sale, #d62828) !important;
}
.sidebarBlock.refined-widgets .sidebarBlock-content .facets__clear-all {
/* the second clear-all link rendered inside the list — hide, we keep the one in heading */
display: none !important;
}
.sidebarBlock.refined-widgets .facets__list--refined {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.sidebarBlock.refined-widgets .facets__list--refined li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.sidebarBlock.refined-widgets .active-facets__button {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 8px 6px 14px !important;
background: var(--sm-text, #0a0a0a) !important;
color: #fff !important;
border-radius: 999px !important;
border: 0 !important;
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
cursor: pointer !important;
transition: background 0.2s !important;
text-decoration: none !important;
}
.sidebarBlock.refined-widgets .active-facets__button:hover {
background: var(--sm-sale, #d62828) !important;
color: #fff !important;
}
.sidebarBlock.refined-widgets .active-facets__button .text {
color: #fff !important;
font-size: inherit !important;
font-weight: inherit !important;
}
.sidebarBlock.refined-widgets .active-facets__button .close {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.2) !important;
position: relative !important;
margin: 0 !important;
font-size: 0 !important;
flex-shrink: 0 !important;
}
.sidebarBlock.refined-widgets .active-facets__button .close::before,
.sidebarBlock.refined-widgets .active-facets__button .close::after {
content: '' !important;
position: absolute !important;
width: 9px !important;
height: 1.5px !important;
background: #fff !important;
border-radius: 1px !important;
top: 50% !important;
left: 50% !important;
}
.sidebarBlock.refined-widgets .active-facets__button .close::before { transform: translate(-50%, -50%) rotate(45deg); }
.sidebarBlock.refined-widgets .active-facets__button .close::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* Mobile / Tablet — fit everything on one row */
@media (max-width: 1024px) {
body .toolbar {
padding: 12px 0 !important;
margin: 0 0 14px !important;
gap: 8px !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
}
body .toolbar-wrapper { gap: 8px !important; flex-wrap: nowrap !important; }
/* All 3 wrappers stay on the same row */
body .toolbar-wrapper:not(.toolbar-mobile) {
margin-left: 0 !important;
flex: 0 1 auto !important;
}
/* Smaller pills on mobile */
body .toolbar .toolbar-sort .label-tab,
body .toolbar .toolbar-limitView .label-tab {
padding: 6px 12px !important;
font-size: 12px !important;
min-height: 34px !important;
height: 34px !important;
}
body .toolbar .toolbar-sort .label-tab .label-text::before,
body .toolbar .toolbar-limitView .label-tab .label-text::before {
/* hide the prefix on mobile to save space */
display: none !important;
}
/* Smaller view-switcher */
body .toolbar .toolbar-viewAs {
height: 34px !important;
}
body .toolbar .toolbar-viewAs .toolbar-icon {
width: 32px !important;
}
/* "Filtra" button — pill matching the sort/per-page pills */
body .toolbar .toolbar-sidebar {
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
}
body .toolbar .toolbar-sidebar .toolbar-icon.icon-filter {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 6px 16px !important;
border: 1px solid var(--sm-line, #ececec) !important;
border-radius: 999px !important;
background: #fff !important;
height: 34px !important;
min-height: 34px !important;
box-sizing: border-box !important;
width: auto !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--sm-text, #0a0a0a) !important;
letter-spacing: 0 !important;
text-transform: none !important;
transition: border-color 0.2s, background 0.2s !important;
flex-shrink: 0 !important;
}
body .toolbar .toolbar-sidebar .toolbar-icon.icon-filter:hover {
border-color: var(--sm-text, #0a0a0a) !important;
background: var(--sm-surface, #faf9f6) !important;
}
body .toolbar .toolbar-sidebar .toolbar-icon.icon-filter .icon,
body .toolbar .toolbar-sidebar .toolbar-icon.icon-filter svg {
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
}
body .toolbar .toolbar-sidebar .toolbar-icon.icon-filter .filter-text {
font-size: 12px !important;
font-weight: 600 !important;
color: inherit !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
}
/* Hide view switcher entirely on mobile/tablet — it's not useful with cards reflowing */
@media (max-width: 1024px) {
body .toolbar .toolbar-viewAs,
body .toolbar .toolbar-wrapper.toolbar-mobile:has(.toolbar-viewAs) {
display: none !important;
}
}
/* ============================================================
SMARTINO COLLECTION SIDEBAR FILTERS — clean, mockup-aligned
============================================================ */
/* Section container — subtle divider on top */
body .sidebarBlock {
padding: 12px 0 !important;
border: 0 !important;
border-top: 1px solid var(--sm-line-soft, #f3f3f3) !important;
margin: 0 !important;
background: transparent !important;
}
body .sidebarBlock:first-of-type { border-top: 0 !important; padding-top: 4px !important; }
/* Hide the (1) count badge on section headings — clutter */
body .sidebarBlock .sidebarBlock-heading .facets__count {
display: none !important;
}
/* ============================================================
SMARTINO QUICK SEARCH POPUP — clean styling
============================================================ */
/* Outer wrap */
body .quickSearchResultsWrap {
background: #fff !important;
border: 1px solid var(--sm-line-soft, #f3f3f3) !important;
border-radius: 16px !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.04) !important;
overflow: hidden !important;
padding: 0 !important;
}
body .quickSearchResultsWrap > .quickSearchResults,
body .quickSearchResultsWrap .quickSearchResults {
padding: 8px 0 !important;
background: #fff !important;
max-height: 80vh !important;
overflow-y: auto !important;
}
body .quickSearchResultsWrap .quickSearchResults .container {
padding: 0 18px !important;
max-width: none !important;
}
/* Section block */
body .quickSearchResultsWrap .search-block {
padding: 14px 0 !important;
border-bottom: 1px solid var(--sm-line-soft, #f3f3f3) !important;
}
body .quickSearchResultsWrap .search-block:last-child { border-bottom: 0 !important; }
/* Section title — uppercase letter-spaced like sidebar */
body .quickSearchResultsWrap .search-block-title {
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--sm-text, #0a0a0a) !important;
margin: 0 0 12px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
body .quickSearchResultsWrap .search-block-title .text {
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
color: inherit !important;
}
/* Trending searches — pills */
body .quickSearchResultsWrap .quickSearchTrending .list-item {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
body .quickSearchResultsWrap .quickSearchTrending .item {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
display: inline-flex !important;
}
body .quickSearchResultsWrap .quickSearchTrending .item .link {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 7px 14px !important;
background: var(--sm-surface, #faf9f6) !important;
border: 1px solid var(--sm-line-soft, #f3f3f3) !important;
border-radius: 999px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: var(--sm-text, #0a0a0a) !important;
text-decoration: none !important;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
letter-spacing: 0 !important;
text-transform: none !important;
white-space: nowrap !important;
}
body .quickSearchResultsWrap .quickSearchTrending .item .link:hover {
background: var(--sm-text, #0a0a0a) !important;
border-color: var(--sm-text, #0a0a0a) !important;
color: #fff !important;
}
body .quickSearchResultsWrap .quickSearchTrending .item .link:hover svg path {
stroke: #fff !important;
fill: #fff !important;
}
body .quickSearchResultsWrap .quickSearchTrending .item .link svg {
width: 16px !important;
height: 16px !important;
opacity: 0.7 !important;
flex-shrink: 0 !important;
}
body .quickSearchResultsWrap .quickSearchTrending .item .link .text {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* Bestseller products grid — compact */
body .quickSearchResultsWrap .quickSearchProduct .halo-block {
padding: 0 !important;
}
body .quickSearchResultsWrap .quickSearchProduct .products-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
width: 100% !important;
}
@media (min-width: 720px) {
body .quickSearchResultsWrap .quickSearchProduct .products-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
body .quickSearchResultsWrap .quickSearchProduct .product {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
min-width: 0 !important;
}
/* Product cards inside search popup — fixed aspect on image to avoid flattening */
body .quickSearchResultsWrap .product-item {
background: #fff !important;
border: 1px solid var(--sm-line-soft, #f3f3f3) !important;
border-radius: 12px !important;
overflow: hidden !important;
width: 100% !important;
min-width: 0 !important;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
body .quickSearchResultsWrap .product-item:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.06) !important;
border-color: var(--sm-line, #ececec) !important;
}
/* Ensure media keeps aspect ratio */
body .quickSearchResultsWrap .product-item .card-media,
body .quickSearchResultsWrap .product-item .card-product {
aspect-ratio: 1 / 1 !important;
padding-bottom: 0 !important;
height: auto !important;
width: 100% !important;
overflow: hidden !important;
}
body .quickSearchResultsWrap .product-item .card-media img,
body .quickSearchResultsWrap .product-item .card-product img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
/* Close button (mobile) */
body .quickSearchResultsWrap .header-search-popup-close {
background: transparent !important;
border: 0 !important;
cursor: pointer !important;
padding: 4px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--sm-text-muted, #9a9a9a) !important;
transition: color 0.2s ease !important;
}
body .quickSearchResultsWrap .header-search-popup-close:hover {
color: var(--sm-text, #0a0a0a) !important;
}
body .quickSearchResultsWrap .header-search-popup-close svg {
width: 16px !important;
height: 16px !important;
}
/* Predictive search results (when typing) */
body .quickSearchResultsWrap .predictive-search {
padding: 0 !important;
}
body .quickSearchResultsWrap .predictive-search__result-group {
margin-bottom: 14px !important;
}
body .quickSearchResultsWrap .predictive-search__heading {
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--sm-text, #0a0a0a) !important;
margin: 0 0 10px !important;
padding: 0 !important;
}
/* Equalize collection grid gaps — vertical (between rows) = horizontal (between cards)
Halo's --space-between-vert-desk drives the HORIZONTAL gap (via padding L/R).
We match it on margin-top so vertical = horizontal. */
@media (min-width: 1025px) {
body .productGrid .product,
body .productGrid.column-2 .product,
body .productGrid.column-3 .product,
body .productGrid.column-4 .product,
body .productGrid.column-5 .product {
margin-top: var(--space-between-vert-desk, 30px) !important;
}
body .productGrid.column-2 .product:nth-child(-n+2),
body .productGrid.column-3 .product:nth-child(-n+3),
body .productGrid.column-4 .product:nth-child(-n+4),
body .productGrid.column-5 .product:nth-child(-n+5) {
margin-top: 0 !important;
}
}
@media (max-width: 1024px) {
body .productGrid .product {
margin-top: var(--space-between-vert-mb, 16px) !important;
}
}
/* ===== Active filter chips moved INTO toolbar (inline with sort/view) ===== */
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
flex: 1 1 auto !important;
min-width: 0 !important;
order: -1 !important;
}
/* Respect Halo's inline display:none when no active filters */
body .toolbar .sidebarBlock.refined-widgets[style*="display: none"],
body .toolbar .sidebarBlock.refined-widgets[style*="display:none"] {
display: none !important;
}
/* Hide the H2 heading + wrapper — replaced by ::before label */
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .sidebarBlock-heading,
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .sidebarBlock-headingWrapper {
display: none !important;
}
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar::before {
content: 'Filtre active:';
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sm-text-muted, #9a9a9a);
margin-right: 2px;
flex-shrink: 0;
}
/* Content wrappers — let chips flow inline */
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .sidebarBlock-content,
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .sidebarBlock-content--list,
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .sidebarBlock-contentWrapper,
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .facets__list--refined {
display: contents !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .facets__list--refined li {
display: inline-flex !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
list-style: none !important;
}
/* Clear-all link inside the moved block — small underlined, pushed to the END */
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .sidebarBlock-content .facets__clear-all {
display: inline-flex !important;
align-items: center !important;
background: transparent !important;
border: 0 !important;
padding: 0 4px !important;
font-size: 11.5px !important;
font-weight: 600 !important;
color: var(--sm-text-soft, #4a4a4a) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
letter-spacing: 0 !important;
text-transform: none !important;
border-radius: 0 !important;
order: 99 !important;
}
/* Chips first, clear-all after */
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .facets__list--refined li {
order: 1 !important;
}
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .sidebarBlock-content .facets__clear-all:hover {
color: var(--sm-sale, #d62828) !important;
background: transparent !important;
}
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .sidebarBlock-content .facets__clear-all .text {
background: transparent !important;
color: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
padding: 0 !important;
}
body .toolbar .sidebarBlock.refined-widgets.refined-widgets--in-toolbar .sidebarBlock-content .facets__clear-all .close {
display: none !important;
}
/* Hide results-count inside sidebar (Halo hides inline but be safe) */
body .sidebarBlock .results-count,
body .sidebarBlock .results-count .results {
display: none !important;
}
/* Section heading — uppercase, letter-spaced, with chevron */
body .sidebarBlock .sidebarBlock-heading {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 0 0 6px !important;
margin: 0 !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--sm-text, #0a0a0a) !important;
cursor: pointer !important;
border: 0 !important;
position: relative !important;
}
body .sidebarBlock .sidebarBlock-heading .facets__text {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: inherit !important;
font-weight: inherit !important;
letter-spacing: inherit !important;
color: inherit !important;
}
body .sidebarBlock .sidebarBlock-heading .facets__count {
font-size: 10.5px !important;
font-weight: 600 !important;
color: var(--sm-text-muted, #9a9a9a) !important;
letter-spacing: 0 !important;
}
/* Chevron — added via ::after with SVG */
body .sidebarBlock .sidebarBlock-heading::after {
content: '' !important;
width: 14px !important;
height: 14px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
transition: transform 0.25s ease !important;
flex-shrink: 0 !important;
margin-left: auto !important;
}
body .sidebarBlock .sidebarBlock-heading.is-clicked::after {
transform: rotate(180deg) !important;
}
/* Section content */
body .sidebarBlock .sidebarBlock-content,
body .sidebarBlock .sidebarBlock-contentWrapper {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* Item list — show ~10 items max, scroll for the rest */
body .sidebarBlock .facets__display ul,
body .sidebarBlock-content ul.list-unstyled,
body .sidebarBlock .facets__list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 2px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
max-height: 260px !important;
height: auto !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Clean up Halo's dark horizontal scrollbar — show a slim vertical one */
body .sidebarBlock .facets__list::-webkit-scrollbar { height: 0 !important; width: 4px !important; }
body .sidebarBlock .facets__list::-webkit-scrollbar-track { background: transparent !important; }
body .sidebarBlock .facets__list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18) !important; border-radius: 4px !important; }
body .sidebarBlock .facets__list::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35) !important; }
/* Hide filter items with zero products (Halo marks them disabled) */
body .sidebarBlock .facets__item:has(input[type="checkbox"]:disabled),
body .sidebarBlock .facets__item:has(.facet-checkbox--disabled),
body .sidebarBlock .list-menu__item:has(input[type="checkbox"]:disabled),
body .sidebarBlock .list-menu__item:has(.facet-checkbox--disabled) {
display: none !important;
}
/* Each item — show ALL (override Halo's .d-none for items past limit), but hide 0-count items */
body .sidebarBlock .facets__item,
body .sidebarBlock .list-menu__item {
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
position: relative !important;
width: 100% !important;
box-sizing: border-box !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
height: auto !important;
}
/* Hide ONLY 0-count items (disabled by Halo) */
body .sidebarBlock .facets__item:has(input[type="checkbox"]:disabled),
body .sidebarBlock .facets__item:has(.facet-checkbox--disabled),
body .sidebarBlock .list-menu__item:has(input[type="checkbox"]:disabled),
body .sidebarBlock .list-menu__item:has(.facet-checkbox--disabled) {
display: none !important;
}
/* Hide the native checkbox visually (keep clickable) */
body .sidebarBlock .facets__item input[type="checkbox"],
body .sidebarBlock .list-menu__item input[type="checkbox"] {
position: absolute !important;
opacity: 0 !important;
width: 100% !important;
height: 100% !important;
top: 0; left: 0;
margin: 0 !important;
cursor: pointer !important;
z-index: 1 !important;
}
/* Label — flex row with text + count pushed right */
body .sidebarBlock .facets__item .facet-checkbox,
body .sidebarBlock .facets__item .form-label--checkbox,
body .sidebarBlock .list-menu__item .facet-checkbox,
body .sidebarBlock .list-menu__item .form-label--checkbox {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
padding: 3px 4px 3px 28px !important;
margin: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--sm-text-soft, #4a4a4a) !important;
cursor: pointer !important;
line-height: 1.4 !important;
position: relative !important;
border-radius: 6px !important;
transition: color 0.15s ease, background 0.15s ease !important;
}
body .sidebarBlock .facets__item:hover .facet-checkbox,
body .sidebarBlock .facets__item:hover .form-label--checkbox {
color: var(--sm-text, #0a0a0a) !important;
}
/* Custom checkbox square */
body .sidebarBlock .facets__item input[type="checkbox"] + .form-label--checkbox::before,
body .sidebarBlock .facets__item input[type="checkbox"] + .facet-checkbox::before,
body .sidebarBlock .list-menu__item input[type="checkbox"] + .form-label--checkbox::before,
body .sidebarBlock .list-menu__item input[type="checkbox"] + .facet-checkbox::before {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 4px !important;
transform: translateY(-50%) !important;
width: 18px !important;
height: 18px !important;
border: 1.5px solid var(--sm-line, #ececec) !important;
border-radius: 4px !important;
background: #fff !important;
transition: background 0.15s, border-color 0.15s !important;
}
body .sidebarBlock .facets__item input[type="checkbox"] + .form-label--checkbox::after,
body .sidebarBlock .facets__item input[type="checkbox"] + .facet-checkbox::after,
body .sidebarBlock .list-menu__item input[type="checkbox"] + .form-label--checkbox::after,
body .sidebarBlock .list-menu__item input[type="checkbox"] + .facet-checkbox::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 8px !important;
width: 10px !important;
height: 10px !important;
transform: translateY(-50%) scale(0.85) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
opacity: 0 !important;
transition: opacity 0.15s !important;
border: 0 !important;
}
/* Checked state */
body .sidebarBlock .facets__item input[type="checkbox"]:checked + .form-label--checkbox,
body .sidebarBlock .facets__item input[type="checkbox"]:checked + .facet-checkbox,
body .sidebarBlock .list-menu__item input[type="checkbox"]:checked + .form-label--checkbox,
body .sidebarBlock .list-menu__item input[type="checkbox"]:checked + .facet-checkbox {
color: var(--sm-text, #0a0a0a) !important;
font-weight: 700 !important;
}
body .sidebarBlock .facets__item input[type="checkbox"]:checked + .form-label--checkbox::before,
body .sidebarBlock .facets__item input[type="checkbox"]:checked + .facet-checkbox::before,
body .sidebarBlock .list-menu__item input[type="checkbox"]:checked + .form-label--checkbox::before,
body .sidebarBlock .list-menu__item input[type="checkbox"]:checked + .facet-checkbox::before {
background: var(--sm-text, #0a0a0a) !important;
border-color: var(--sm-text, #0a0a0a) !important;
}
body .sidebarBlock .facets__item input[type="checkbox"]:checked + .form-label--checkbox::after,
body .sidebarBlock .facets__item input[type="checkbox"]:checked + .facet-checkbox::after,
body .sidebarBlock .list-menu__item input[type="checkbox"]:checked + .form-label--checkbox::after,
body .sidebarBlock .list-menu__item input[type="checkbox"]:checked + .facet-checkbox::after {
opacity: 1 !important;
}
/* Disabled state */
body .sidebarBlock .facets__item input[type="checkbox"]:disabled + .form-label--checkbox,
body .sidebarBlock .facets__item input[type="checkbox"]:disabled + .facet-checkbox,
body .sidebarBlock .facets__item .facet-checkbox--disabled {
opacity: 0.45 !important;
cursor: not-allowed !important;
}
/* Count — pushed to right */
body .sidebarBlock .facets__item .count,
body .sidebarBlock .list-menu__item .count {
margin-left: auto !important;
font-size: 11.5px !important;
font-weight: 500 !important;
color: var(--sm-text-muted, #9a9a9a) !important;
flex-shrink: 0 !important;
}
/* Hide per-section "Stergeti Totul" (facets__reset) and "Arata tot" (show-more) — not needed */
body .sidebarBlock .facets__reset,
body .sidebarBlock .show-more--list_tags {
display: none !important;
}
/* Color swatch (when filter is swatch type) */
body .sidebarBlock .facets__item--swatch {
display: inline-block !important;
}
body .sidebarBlock .facets__item--swatch .facet-checkbox {
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border-radius: 50% !important;
border: 2px solid #fff !important;
box-shadow: 0 0 0 1px var(--sm-line, #ececec) !important;
cursor: pointer !important;
overflow: hidden !important;
transition: transform 0.2s !important;
}
body .sidebarBlock .facets__item--swatch .facet-checkbox::before,
body .sidebarBlock .facets__item--swatch .facet-checkbox::after {
display: none !important;
content: none !important;
}
body .sidebarBlock .facets__item--swatch .facet-checkbox .pattern {
width: 100% !important;
height: 100% !important;
display: block !important;
background-size: cover !important;
background-position: center !important;
}
body .sidebarBlock .facets__item--swatch:hover .facet-checkbox {
transform: scale(1.08) !important;
}
body .sidebarBlock .facets__item--swatch input[type="checkbox"]:checked + .facet-checkbox {
box-shadow: 0 0 0 2px var(--sm-text, #0a0a0a) !important;
}
/* Layout for swatch grid */
body .sidebarBlock-content--full .facets__display:has(.facets__item--swatch),
body .sidebarBlock-content--full ul:has(.facets__item--swatch) {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 6px !important;
}
/* Categories nav list — list-style links, same spacing as filters */
body .sidebarBlock.sidebar-categories .all-categories-list,
body .sidebarBlock.sidebar-categories .sidebarBlock-content ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
body .sidebarBlock.sidebar-categories .navPages-item,
body .sidebarBlock.sidebar-categories li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
position: relative !important;
display: block !important;
}
body .sidebarBlock.sidebar-categories .navPages-action,
body .sidebarBlock.sidebar-categories li a {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 3px 4px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--sm-text-soft, #4a4a4a) !important;
text-decoration: none !important;
background: none !important;
background-image: none !important;
border-radius: 6px !important;
transition: color 0.15s ease, background 0.15s ease !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
body .sidebarBlock.sidebar-categories .navPages-action .text,
body .sidebarBlock.sidebar-categories li a .text {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
}
body .sidebarBlock.sidebar-categories .navPages-action::before,
body .sidebarBlock.sidebar-categories .navPages-action::after,
body .sidebarBlock.sidebar-categories li a::before,
body .sidebarBlock.sidebar-categories li a::after {
display: none !important;
content: none !important;
background: none !important;
}
body .sidebarBlock.sidebar-categories .navPages-action:hover,
body .sidebarBlock.sidebar-categories li a:hover {
color: var(--sm-text, #0a0a0a) !important;
background: transparent !important;
}
/* Active / current category */
body .sidebarBlock.sidebar-categories .navPages-item.current-cate > .navPages-action,
body .sidebarBlock.sidebar-categories .navPages-item.is-clicked > .navPages-action,
body .sidebarBlock.sidebar-categories li.current-cate > a,
body .sidebarBlock.sidebar-categories li.is-clicked > a {
color: var(--sm-text, #0a0a0a) !important;
font-weight: 700 !important;
}
/* Active category — bold text only (no arrow indicator) */
/* Sub-menu dropdown */
body .sidebarBlock.sidebar-categories .dropdown-category-list {
list-style: none !important;
padding: 0 0 0 14px !important;
margin: 2px 0 4px !important;
display: flex !important;
flex-direction: column !important;
}
body .sidebarBlock.sidebar-categories .dropdown-category-list li a {
padding: 3px 4px !important;
font-size: 12.5px !important;
font-weight: 500 !important;
color: var(--sm-text-muted, #9a9a9a) !important;
}
body .sidebarBlock.sidebar-categories .dropdown-category-list li a:hover {
color: var(--sm-text, #0a0a0a) !important;
}
/* Dropdown chevron — discreet right-side indicator */
body .sidebarBlock.sidebar-categories .icon-dropdown {
position: absolute !important;
right: 4px !important;
top: 4px !important;
width: 18px !important;
height: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
color: var(--sm-text-muted, #9a9a9a) !important;
}
body .sidebarBlock.sidebar-categories .icon-dropdown .icon-plus,
body .sidebarBlock.sidebar-categories .icon-dropdown::before {
font-size: 0 !important;
width: 10px !important;
height: 10px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: contain !important;
display: block !important;
}
@media (max-width: 480px) {
body .toolbar .toolbar-sort .label-tab,
body .toolbar .toolbar-limitView .label-tab {
max-width: none !important;
}
body .toolbar .toolbar-sort .label-tab .label-text,
body .toolbar .toolbar-limitView .label-tab .label-text {
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important;
display: inline !important;
max-width: none !important;
}
}
/* ==============================================================
HOMEPAGE PRODUCT TABS — Smartino refinement
Tabs cu underline animat turcoaz, separator rafinat, hover fin.
============================================================== */
body .product-tab-block .list-product-tabs {
display: inline-flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 2px 4px;
padding: 0 !important;
margin: 0 auto 22px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
position: relative;
}
body .product-tab-block .list-product-tabs li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
right: auto !important;
min-width: 0 !important;
display: inline-flex;
align-items: center;
}
body .product-tab-block .list-product-tabs li .tab-links {
position: relative !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 9px 18px !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 999px !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
line-height: 1.2 !important;
color: var(--sm-text-2, #5a5a5a) !important;
cursor: pointer;
transition: color 0.28s var(--sm-ease), background 0.28s var(--sm-ease), font-weight 0.28s var(--sm-ease), transform 0.28s var(--sm-ease) !important;
white-space: nowrap;
}
/* Hover (inactive) — doar culoare se intensifică, fără background */
body .product-tab-block .list-product-tabs li .tab-links:not(.active):hover {
color: var(--sm-text, #0a0a0a) !important;
background: transparent !important;
}
/* Active — text închis bold + underline (fără pill background) */
body .product-tab-block .list-product-tabs li .tab-links.active {
color: var(--sm-text, #0a0a0a) !important;
font-weight: 700 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Underline elegant care creste din centru pentru tab activ */
body .product-tab-block .list-product-tabs li .tab-links::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: 3px !important;
width: 0;
height: 2px;
background: linear-gradient(90deg, #15b7c6 0%, #0d8a96 100%);
border-radius: 2px;
transform: translateX(-50%);
opacity: 0;
transition: width 0.32s var(--sm-ease), opacity 0.32s var(--sm-ease) !important;
border-bottom: 0 !important;
}
body .product-tab-block .list-product-tabs li .tab-links.active::after {
width: 22px;
opacity: 1;
}
/* Anuleaza border-bottom-ul vechi din tema (Halo style_2) */
body .product-tab-block .list-product-tabs.list-tab__style_2 li .tab-links.active::before,
body .product-tab-block .list-product-tabs li .tab-links::before {
display: none !important;
border-bottom: 0 !important;
}
/* Separator "/" — rafinat */
body .product-tab-block .list-product-tabs li.separation {
color: rgba(10, 58, 63, 0.18) !important;
font-size: 14px !important;
font-weight: 300 !important;
margin: 0 2px !important;
padding: 0 !important;
user-select: none;
pointer-events: none;
min-width: 1px !important;
}
/* Mobile — pastram structura compacta */
@media (max-width: 768px) {
body .product-tab-block .list-product-tabs {
padding: 5px 8px !important;
margin-bottom: 18px !important;
gap: 2px;
}
body .product-tab-block .list-product-tabs li .tab-links {
padding: 8px 14px !important;
font-size: 13px !important;
}
body .product-tab-block .list-product-tabs li .tab-links.active::after {
width: 18px;
bottom: 2px !important;
}
}
/* Dropdown variant mobile — pastram suportul pentru .list-tabs-popup */
body .product-tab-block .list-product-tabs.list-tabs-popup {
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
padding: 0 !important;
}
/* Has-banner layout — center align */
body .product-tab-block .list-product-tabs.has__banner {
margin-left: auto !important;
margin-right: auto !important;
}
/* =============================================================================
SMARTINO MOBILE MENU — Aqua glassmorphic drawer
Aplică pe #navigation-mobile.custom-mobile-menu (mod 'custom' din settings)
============================================================================= */
/* ===== Drawer wrapper ===== */
body #navigation-mobile.custom-mobile-menu {
background:
radial-gradient(circle at 0% 0%, rgba(21,183,198,0.22) 0%, transparent 35%),
radial-gradient(circle at 100% 100%, rgba(13,138,150,0.18) 0%, transparent 40%),
radial-gradient(circle at 100% 0%, rgba(180,235,240,0.4) 0%, transparent 30%),
linear-gradient(180deg, #f4fcfd 0%, #ffffff 60%) !important;
position: fixed !important;
z-index: 9999;
overflow: hidden !important;
}
body #navigation-mobile.custom-mobile-menu::before {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(21,183,198,0.35), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
body #navigation-mobile.custom-mobile-menu::after {
content: "";
position: absolute;
bottom: 30%;
left: -100px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(143,221,228,0.4), transparent 70%);
filter: blur(40px);
pointer-events: none;
z-index: 0;
}
body #navigation-mobile.custom-mobile-menu .halo-sidebar-wrapper {
position: relative;
z-index: 1;
padding: 0 !important;
background: transparent !important;
overflow-y: auto !important;
overflow-x: hidden !important;
height: 100% !important;
}
/* Ascunde butonul vechi de close (înlocuit de cel din sm-menu-header) */
body #navigation-mobile.custom-mobile-menu > .halo-sidebar-wrapper > .halo-sidebar-close-custom,
body #navigation-mobile.custom-mobile-menu .halo-sidebar-wrapper > button.halo-sidebar-close-custom {
display: none !important;
}
/* ===== Header: search + close pe aceeași linie ===== */
body .sm-menu-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: linear-gradient(180deg, rgba(244,252,253,0.95), rgba(244,252,253,0.7));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body .sm-search-form {
flex: 1;
min-width: 0;
display: block;
/* fără position: relative — dropdown-ul se poziționează relativ la .sm-menu-header (sticky) */
}
body .sm-search-form-inner {
position: relative;
}
body .sm-search-icon {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: #0d8a96 !important;
pointer-events: none;
width: 18px;
height: 18px;
display: flex !important;
align-items: center;
justify-content: center;
z-index: 5;
opacity: 1 !important;
visibility: visible !important;
}
body .sm-search-icon svg {
width: 18px;
height: 18px;
}
body .sm-search-input {
width: 100%;
padding: 11px 16px 11px 42px;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.9);
border-radius: 999px;
font-size: 14px;
color: #0a3a3f;
box-shadow: 0 4px 16px rgba(21,183,198,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
outline: none;
transition: all 0.25s ease;
height: 42px;
font-family: inherit;
}
body .sm-search-input:focus {
background: #fff;
border-color: rgba(21,183,198,0.4);
box-shadow: 0 4px 16px rgba(21,183,198,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
}
body .sm-search-input::placeholder { color: #7a9ba0; }
body .sm-close-btn {
width: 42px !important;
height: 42px !important;
min-width: 42px;
border-radius: 50% !important;
background: rgba(255,255,255,0.7) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.8) !important;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(21,183,198,0.1);
flex-shrink: 0;
padding: 0 !important;
margin: 0 !important;
color: #0a3a3f;
}
body .sm-close-btn:hover {
transform: rotate(90deg);
background: #fff !important;
}
body .sm-close-btn svg {
width: 14px;
height: 14px;
stroke: #0a3a3f;
stroke-width: 2.5;
fill: none;
}
/* Ascunde textul "Close" pe care îl folosea butonul default */
body .sm-close-btn > *:not(svg) { display: none !important; }
/* Predictive search results dropdown — poziționat relativ la .sm-menu-header (sticky) */
body .sm-search-results {
position: absolute;
top: calc(100% + 6px);
left: -10px;
right: -10px;
background: #fff;
border-radius: 14px;
box-shadow: 0 14px 40px rgba(21,183,198,0.25);
max-height: calc(100vh - 90px);
overflow-y: auto;
z-index: 100;
display: none;
/* hide internal scrollbar — folosim doar scroll-ul drawer-ului ca să nu avem 2 */
scrollbar-width: none;
-ms-overflow-style: none;
}
body .sm-search-results::-webkit-scrollbar {
display: none;
width: 0;
}
body .sm-menu-header:focus-within .sm-search-results,
body .sm-search-form.search--open .sm-search-results {
display: block;
}
/* Când dropdown-ul e activ, blochează scroll-ul drawer-ului (fix 2 scrollbar-uri) */
body #navigation-mobile.custom-mobile-menu:has(.sm-menu-header:focus-within) .halo-sidebar-wrapper {
overflow: hidden !important;
}
body .sm-search-results .quickSearchResultsBlock,
body .sm-search-results .quickSearchResultsWrap {
background: transparent !important;
position: static !important;
padding: 12px 10px !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
body .sm-search-results .container {
padding: 0 !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
}
body .sm-search-results .quickSearchResults {
padding: 0 !important;
margin: 0 !important;
}
body .sm-search-results .search-block-title {
font-size: 11px !important;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #5a8085 !important;
margin: 4px 0 8px !important;
padding: 0 !important;
font-weight: 700 !important;
}
body .sm-search-results .quickSearchTrending .list-item {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
width: 100% !important;
}
body .sm-search-results .quickSearchTrending .list-item .item {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
flex: 0 0 auto !important;
float: none !important;
}
body .sm-search-results .quickSearchTrending .list-item .item a {
display: inline-flex !important;
align-items: center;
gap: 4px;
padding: 5px 10px !important;
background: rgba(21,183,198,0.08) !important;
border-radius: 999px !important;
font-size: 12px !important;
color: #0a3a3f !important;
text-decoration: none !important;
border: 1px solid rgba(21,183,198,0.15) !important;
white-space: nowrap;
width: auto !important;
}
body .sm-search-results .quickSearchTrending .list-item .item a:hover {
background: rgba(21,183,198,0.18) !important;
}
body .sm-search-results .quickSearchTrending .list-item .item a svg {
width: 11px !important;
height: 11px !important;
flex-shrink: 0;
}
body .sm-search-results .quickSearchTrending .list-item .item a .text {
font-size: 12px !important;
line-height: 1.2 !important;
}
body .sm-search-results .quickSearchProduct,
body .sm-search-results .search-block {
margin-top: 14px !important;
width: 100% !important;
}
body .sm-search-results .quickSearchProduct .productList,
body .sm-search-results .quickSearchProduct .productGrid,
body .sm-search-results .quickSearchProduct ul.list-product-block,
body .sm-search-results .quickSearchProduct > ul {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
width: 100% !important;
float: none !important;
}
body .sm-search-results .quickSearchProduct .productList .product,
body .sm-search-results .quickSearchProduct .productGrid .product,
body .sm-search-results .quickSearchProduct .productList .product-item,
body .sm-search-results .quickSearchProduct .productGrid .product-item,
body .sm-search-results .quickSearchProduct ul > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
float: none !important;
display: block !important;
}
body .sm-search-results .quickSearchProduct .card,
body .sm-search-results .quickSearchProduct .product-item .card,
body .sm-search-results .quickSearchProduct .card-wrapper {
padding: 4px !important;
width: 100% !important;
box-sizing: border-box !important;
}
body .sm-search-results .quickSearchProduct .card-title,
body .sm-search-results .quickSearchProduct .card-information,
body .sm-search-results .quickSearchProduct .card__heading,
body .sm-search-results .quickSearchProduct .productView-title {
font-size: 11px !important;
line-height: 1.3 !important;
}
body .sm-search-results .quickSearchProduct .card-vendor,
body .sm-search-results .quickSearchProduct .productView-vendor {
font-size: 9px !important;
}
body .sm-search-results .quickSearchProduct .price,
body .sm-search-results .quickSearchProduct .card-price {
font-size: 12px !important;
}
body .sm-search-results .quickSearchProduct .card-media,
body .sm-search-results .quickSearchProduct .product-item .card-media {
width: 100% !important;
}
body .sm-search-results .quickSearchProduct .card-media img {
width: 100% !important;
height: auto !important;
}
/* Reset Slick slider dacă e folosit */
body .sm-search-results .quickSearchProduct .slick-slider,
body .sm-search-results .quickSearchProduct .slick-list,
body .sm-search-results .quickSearchProduct .slick-track {
width: 100% !important;
transform: none !important;
display: contents !important;
}
body .sm-search-results .predictive-search {
background: transparent !important;
position: static !important;
padding: 12px !important;
}
body .sm-search-results .predictive-search:empty,
body .sm-search-results .predictive-search > .predictive-search__loading-state {
padding: 12px !important;
}
/* ===== Quick pills (4 fixe) ===== */
body .sm-quick-pills {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 4px 18px 16px;
position: relative;
z-index: 2;
}
body .sm-pill {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 12px 6px;
background: rgba(255,255,255,0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.9);
border-radius: 14px;
cursor: pointer;
transition: all 0.25s ease;
text-decoration: none !important;
box-shadow: 0 2px 10px rgba(21,183,198,0.06);
position: relative;
color: #0a3a3f !important;
}
body .sm-pill:hover {
background: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(21,183,198,0.15);
}
body .sm-pill-icon {
width: 28px;
height: 28px;
border-radius: 9px;
background: linear-gradient(135deg, rgba(21,183,198,0.15), rgba(21,183,198,0.05));
display: flex;
align-items: center;
justify-content: center;
color: #0d8a96;
}
body .sm-pill-icon svg {
width: 18px !important;
height: 18px !important;
max-width: 18px;
max-height: 18px;
display: block;
stroke: currentColor;
fill: none;
}
body .sm-search-icon svg {
width: 18px !important;
height: 18px !important;
display: block !important;
stroke: #0d8a96 !important;
fill: none !important;
stroke-width: 2.4 !important;
opacity: 1 !important;
visibility: visible !important;
}
body .sm-search-icon svg circle,
body .sm-search-icon svg path {
stroke: #0d8a96 !important;
fill: none !important;
stroke-width: 2.4 !important;
}
body .sm-close-btn svg {
width: 14px !important;
height: 14px !important;
display: block;
stroke: #0a3a3f;
fill: none;
}
body .sm-pill-label {
font-size: 10px;
font-weight: 600;
color: #0a3a3f;
letter-spacing: 0.02em;
text-align: center;
}
body .sm-pill-badge {
position: absolute;
top: 6px;
right: 8px;
min-width: 16px;
height: 16px;
background: #0a0a0a;
color: #fff;
border-radius: 8px;
font-size: 9px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
/* ===== TAB ROW ASCUNS (păstrat funcțional) ===== */
body #navigation-mobile.custom-mobile-menu .nav-mobile-menu-tab {
display: none !important;
}
/* ===== Section title "Categorii" (aliniat cu lista + extras) ===== */
body #navigation-mobile.custom-mobile-menu .sm-section-title--categorii {
padding: 0 22px 0;
margin: 4px 0 10px !important;
}
/* ===== Menu container (categorii — populat de JS din template) ===== */
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile {
padding: 0 18px 16px;
background: transparent !important;
position: relative;
z-index: 2;
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .list-menu {
background: rgba(255,255,255,0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.8);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(21,183,198,0.06);
padding: 0 !important;
margin: 0 !important;
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .menu-lv-item.menu-lv-1 {
border-bottom: 1px solid rgba(21,183,198,0.06);
transition: background 0.2s ease;
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .menu-lv-item.menu-lv-1:last-child { border-bottom: 0; }
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .menu-lv-item.menu-lv-1:hover { background: rgba(255,255,255,0.6); }
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .menu-lv-1__action {
display: flex !important;
align-items: center;
gap: 12px;
padding: 14px 16px !important;
text-decoration: none;
color: #0a3a3f !important;
cursor: pointer;
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .menu-lv-1__action .text {
flex: 1;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
color: #0a3a3f !important;
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .menu-lv-1__action .custom-icon {
width: 34px;
height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(21,183,198,0.12), rgba(13,138,150,0.06));
display: flex !important;
align-items: center;
justify-content: center;
color: #0d8a96;
flex-shrink: 0;
overflow: hidden;
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .menu-lv-1__action .custom-icon svg {
width: 18px !important;
height: 18px !important;
max-width: 18px;
max-height: 18px;
stroke: #0d8a96;
fill: none;
}
/* Icon-urile auto-match Smartino (stroke-based) */
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .custom-icon.sm-cat-icon {
background: linear-gradient(135deg, rgba(21,183,198,0.12), rgba(13,138,150,0.06));
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .custom-icon.sm-cat-icon svg {
stroke: #0d8a96 !important;
fill: none !important;
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .menu-lv-1__action .custom-icon img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .icon-dropdown {
color: #7a9ba0;
transition: transform 0.3s ease;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .icon-dropdown svg {
width: 16px;
height: 16px;
}
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .menu-lv-item.is-active > .menu-lv-1__action .icon-dropdown { transform: rotate(90deg); }
body #navigation-mobile.custom-mobile-menu .menu-custom-mobile .custom-label {
display: inline-block;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
padding: 3px 7px;
border-radius: 999px;
text-transform: uppercase;
margin-left: 6px;
vertical-align: middle;
}
/* ===== Promo card ===== */
body .sm-menu-extras {
padding: 0 18px 16px;
position: relative;
z-index: 2;
}
body .sm-promo-card {
background: linear-gradient(135deg, var(--sm-promo-c1, #15b7c6) 0%, var(--sm-promo-c2, #0d8a96) 100%);
border-radius: 18px;
padding: 18px;
color: #fff;
margin-bottom: 22px;
position: relative;
overflow: hidden;
box-shadow: 0 8px 24px rgba(21,183,198,0.3);
}
body .sm-promo-card::before {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 140px;
height: 140px;
background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 70%);
pointer-events: none;
}
body .sm-promo-card::after {
content: "";
position: absolute;
bottom: -30px;
left: -30px;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
pointer-events: none;
}
body .sm-promo-eyebrow {
display: inline-flex;
align-items: center;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(10px);
padding: 4px 10px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
position: relative;
z-index: 1;
color: #fff;
}
body .sm-promo-title {
font-size: 18px;
font-weight: 800;
line-height: 1.2;
margin-bottom: 6px;
position: relative;
z-index: 1;
color: #fff;
}
body .sm-promo-desc {
font-size: 12px;
opacity: 0.9;
margin-bottom: 12px;
position: relative;
z-index: 1;
color: #fff;
}
body .sm-promo-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
color: #0a3a3f !important;
padding: 8px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
text-decoration: none !important;
position: relative;
z-index: 1;
transition: all 0.25s ease;
}
body .sm-promo-btn:hover { transform: translateX(2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
body .sm-promo-btn svg { width: 12px; height: 12px; }
/* ===== Section title (Cont / Suport) ===== */
body .sm-section-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: #5a8085;
text-transform: uppercase;
margin: 4px 4px 10px;
display: flex;
align-items: center;
gap: 8px;
}
body .sm-section-title::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(21,183,198,0.2), transparent);
}
/* ===== Account block ===== */
body .sm-account-block {
background: rgba(255,255,255,0.65);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.9);
border-radius: 18px;
padding: 16px;
margin-bottom: 22px;
box-shadow: 0 4px 16px rgba(21,183,198,0.06);
}
body .sm-account-text {
font-size: 13px;
color: #5a8085;
margin-bottom: 12px;
text-align: center;
}
body .sm-account-btns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
body .sm-btn-account {
padding: 11px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
text-decoration: none !important;
text-align: center;
transition: all 0.25s ease;
cursor: pointer;
border: 0;
display: block;
}
body .sm-btn-account.primary {
background: #0a0a0a;
color: #fff !important;
position: relative;
overflow: hidden;
}
body .sm-btn-account.primary::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(21,183,198,0.4), transparent);
transition: left 0.6s ease;
}
body .sm-btn-account.primary:hover::before { left: 100%; }
body .sm-btn-account.primary:hover { box-shadow: 0 6px 18px rgba(21,183,198,0.3); }
body .sm-btn-account.secondary {
background: transparent;
color: #0a3a3f !important;
border: 1.5px solid rgba(21,183,198,0.3);
}
body .sm-btn-account.secondary:hover {
background: rgba(21,183,198,0.06);
border-color: rgba(21,183,198,0.5);
}
/* ===== Utils list (suport links) ===== */
body .sm-utils-list {
list-style: none;
background: rgba(255,255,255,0.45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.7);
border-radius: 14px;
overflow: hidden;
margin: 0 0 22px;
padding: 0;
}
body .sm-utils-list li { list-style: none; margin: 0; padding: 0; }
body .sm-utils-list li a {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
text-decoration: none !important;
color: #455c61 !important;
font-size: 13px;
font-weight: 500;
border-bottom: 1px solid rgba(21,183,198,0.06);
}
body .sm-utils-list li:last-child a { border-bottom: 0; }
body .sm-utils-list li a:hover { color: #0a3a3f !important; background: rgba(255,255,255,0.5); }
body .sm-utils-list li a svg { width: 16px; height: 16px; color: #15b7c6; flex-shrink: 0; stroke: currentColor; fill: none; }
body .sm-utils-list li a > span:not(.sm-utils-icon) { flex: 1; }
body .sm-utils-list .sm-utils-icon {
width: 28px;
height: 28px;
border-radius: 8px;
background: linear-gradient(135deg, rgba(21,183,198,0.12), rgba(13,138,150,0.06));
display: inline-flex;
align-items: center;
justify-content: center;
color: #0d8a96;
flex-shrink: 0;
}
body .sm-utils-list .sm-utils-icon svg {
width: 15px !important;
height: 15px !important;
}
/* ===== Menu footer (contact + copyright) ===== */
body .sm-menu-footer {
border-top: 1px solid rgba(21,183,198,0.1);
padding-top: 18px;
margin-top: 4px;
}
body .sm-contact-row {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: rgba(255,255,255,0.5);
border-radius: 12px;
margin-bottom: 14px;
border: 1px solid rgba(255,255,255,0.7);
text-decoration: none !important;
color: inherit;
}
body .sm-contact-row .sm-contact-icon {
width: 30px;
height: 30px;
border-radius: 9px;
background: linear-gradient(135deg, #15b7c6, #0d8a96);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
flex-shrink: 0;
}
body .sm-contact-row .sm-contact-icon svg { width: 15px; height: 15px; }
body .sm-contact-row .sm-contact-info {
display: flex;
flex-direction: column;
flex: 1;
margin-left: 10px;
}
body .sm-contact-row .sm-contact-label {
font-size: 10px;
color: #5a8085;
letter-spacing: 0.05em;
text-transform: uppercase;
}
body .sm-contact-row .sm-contact-number {
font-size: 13px;
font-weight: 700;
color: #0a3a3f;
}
body .sm-contact-row .sm-contact-cta {
color: #15b7c6;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Social row */
body .sm-social-row {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 14px;
}
body .sm-social-link {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255,255,255,0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.8);
display: flex !important;
align-items: center;
justify-content: center;
color: #0d8a96 !important;
text-decoration: none !important;
transition: all 0.25s ease;
}
body .sm-social-link:hover {
background: linear-gradient(135deg, #15b7c6, #0d8a96);
color: #fff !important;
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(21,183,198,0.3);
}
body .sm-social-link svg {
width: 18px !important;
height: 18px !important;
max-width: 18px;
max-height: 18px;
display: block;
fill: currentColor !important;
stroke: none !important;
color: inherit;
}
body .sm-social-link svg path,
body .sm-social-link svg circle,
body .sm-social-link svg rect {
fill: currentColor !important;
stroke: none !important;
}
body .sm-copyright {
text-align: center;
font-size: 10px;
color: #7a9ba0;
padding-bottom: 8px;
}
/* ===== Currency / lang switcher Halo (stilizat să se integreze) ===== */
body #navigation-mobile.custom-mobile-menu .nav-currency-language {
padding: 0 18px 18px !important;
background: transparent !important;
position: relative;
z-index: 2;
}
/* ===== Loading skeleton (ascuns după populare) ===== */
body #navigation-mobile.custom-mobile-menu .list-menu-loading {
padding: 0 18px;
}
/* =============================================================================
SMARTINO — Fix săgeți accordion product page pe mobil
(Halo's CSS pune z-index: -1 pe .icon-dropdown și display: none pe mobil
pentru tabs-horizontal — forțăm vizibilitatea peste tot.)
============================================================================= */
body .productView-tab .tab-content .icon-dropdown,
body .productView-tab .toggleLink .icon-dropdown,
body .tabs-contents .toggleLink .icon-dropdown {
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 5 !important;
position: absolute !important;
top: 50% !important;
right: 0 !important;
transform: translateY(-50%) !important;
opacity: 1 !important;
visibility: visible !important;
width: 20px;
height: 20px;
pointer-events: none;
}
body .productView-tab .tab-content .icon-dropdown svg,
body .productView-tab .toggleLink .icon-dropdown svg,
body .tabs-contents .toggleLink .icon-dropdown svg {
width: 14px !important;
height: 14px !important;
fill: #232323 !important;
stroke: #232323 !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transition: transform 0.3s ease;
}
/* Rotație când e deschis */
body .productView-tab .toggleLink.is-open .icon-dropdown svg,
body .productView-tab .toggleLink.show-mobile .icon-dropdown svg,
body .tabs-contents .toggleLink.is-open .icon-dropdown svg,
body .tabs-contents .toggleLink.show-mobile .icon-dropdown svg {
transform: rotate(-180deg) !important;
}
/* Asigură că butonul toggleLink are spațiu pentru iconiță */
@media (max-width: 1024px) {
body .productView-tab .tabs-contents .toggleLink,
body .tabs-contents .toggleLink {
padding-right: 32px !important;
position: relative !important;
}
body .tabs-horizontal + .tabs-contents .tab-content .icon-dropdown {
display: flex !important;
}
}
/* Blog cards - imagini rotunjite si text egal */
.halo-row[data-blogs-slider] .slick-track {
display: flex !important;
align-items: stretch !important;
}
.halo-row[data-blogs-slider] .halo-item {
height: auto !important;
display: flex !important;
}
.halo-row[data-blogs-slider] .article-card {
width: 100%;
height: 100%;
display: flex !important;
flex-direction: column;
background: #fff;
border-radius: 18px;
overflow: hidden;
}
/* Colturi rotunde la imagine */
.halo-row[data-blogs-slider] .article-card__image-wrapper,
.halo-row[data-blogs-slider] .article-card__image-wrapper a,
.halo-row[data-blogs-slider] .article-card__image-wrapper img {
border-radius: 18px 18px 0 0 !important;
overflow: hidden;
}
.halo-row[data-blogs-slider] .article-card__image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Caseta de text egala pe toate cardurile */
.halo-row[data-blogs-slider] .article-card__info {
flex: 1;
min-height: 240px;
display: flex !important;
flex-direction: column;
padding: 20px 28px 24px;
background: #fff;
border-radius: 0 0 18px 18px;
}
/* Titluri mai controlate */
.halo-row[data-blogs-slider] .article-card__title {
min-height: 58px;
overflow: hidden;
}
/* Descrieri egale */
.halo-row[data-blogs-slider] .article-card__des {
min-height: 54px;
overflow: hidden;
}
/* Butonul jos, aliniat la fel pe toate cardurile */
.halo-row[data-blogs-slider] .article-card__footer {
margin-top: auto;
}