/* TehranLight Storefront Design System Unification 1.0.12
Loaded last. This file is the semantic color layer for storefront + My Account.
Page geometry remains in the existing feature stylesheets; color meaning lives here. */
:root {
--tl-color-bg-deep: color-mix(in srgb, var(--tl-color-bg) 96%, #000 4%);
--tl-color-surface: #ffffff;
--tl-color-surface-soft: #f7fafc;
--tl-color-surface-muted: color-mix(in srgb, var(--tl-color-surface-soft) 74%, var(--tl-color-bg) 26%);
--tl-color-text: #10243f;
--tl-color-muted: #6a7e93;
--tl-color-line-solid: #d7e1ea;
--tl-color-line: color-mix(in srgb, var(--tl-color-line-solid) 78%, transparent);
--tl-color-line-strong: color-mix(in srgb, var(--tl-color-line-solid) 92%, var(--tl-color-text) 8%);
--tl-color-primary: #173f69;
--tl-color-primary-deep: color-mix(in srgb, var(--tl-color-primary) 78%, #071626 22%);
--tl-color-primary-hover: color-mix(in srgb, var(--tl-color-primary) 86%, white 14%);
--tl-color-primary-soft: color-mix(in srgb, var(--tl-color-primary) 10%, var(--tl-color-surface));
--tl-color-accent: #f5c84c;
--tl-color-accent-strong: color-mix(in srgb, var(--tl-color-accent) 84%, #8a5b00 16%);
--tl-color-success: #198958;
--tl-color-success-soft: color-mix(in srgb, var(--tl-color-success) 10%, var(--tl-color-surface));
--tl-color-danger: #c2352b;
--tl-color-danger-soft: color-mix(in srgb, var(--tl-color-danger) 9%, var(--tl-color-surface));
--tl-color-warning: #e7ad20;
--tl-radius-card: 18px;
--tl-radius-control: 12px;
--tl-radius-floating: 24px;
--tl-shadow-strength: 8;
--tl-shadow-card-alpha: 8%;
--tl-shadow-float-alpha: 16%;
--tl-shadow-card: 0 10px 28px color-mix(in srgb, var(--tl-color-text) var(--tl-shadow-card-alpha), transparent);
--tl-shadow-float: 0 16px 42px color-mix(in srgb, var(--tl-color-text) var(--tl-shadow-float-alpha), transparent);
--tl-glass: color-mix(in srgb, var(--tl-color-surface) 90%, transparent);
--tl-glass-strong: color-mix(in srgb, var(--tl-color-surface) 96%, transparent);
/* Bridge legacy tokens to one semantic palette. */
--bg: var(--tl-color-bg);
--bg-deep: var(--tl-color-bg-deep);
--surface: color-mix(in srgb, var(--tl-color-surface) 88%, transparent);
--surface-strong: var(--tl-color-surface);
--surface-solid: var(--tl-color-surface);
--surface-soft: var(--tl-color-surface-soft);
--surface-muted: var(--tl-color-surface-muted);
--text: var(--tl-color-text);
--muted: var(--tl-color-muted);
--line: var(--tl-color-line);
--line-strong: var(--tl-color-line-strong);
--primary: var(--tl-color-primary);
--primary-soft: var(--tl-color-primary-soft);
--accent: var(--tl-color-accent);
--accent-strong: var(--tl-color-accent-strong);
--accent-blue: color-mix(in srgb, var(--tl-color-primary) 72%, white 28%);
--success: var(--tl-color-success);
--danger: var(--tl-color-danger);
--tl-shell-navy: var(--tl-color-primary);
--tl-shell-navy-deep: var(--tl-color-primary-deep);
--tl-ui-navy: var(--tl-color-primary);
--tl-ui-navy-deep: var(--tl-color-primary-deep);
--tl-ui-success: var(--tl-color-success);
--tl-ui-glass-border: var(--tl-color-line-strong);
--tl-ui-glass-bg: var(--tl-glass);
--tl-ui-glass-bg-strong: var(--tl-glass-strong);
--tl-ui-glass-control: color-mix(in srgb, var(--tl-color-surface) 78%, transparent);
--tl-ui-glass-shadow: var(--tl-shadow-float);
--tl-ui-glass-control-shadow: 0 7px 18px color-mix(in srgb, var(--tl-color-text) 7%, transparent);
--auth-bg: var(--tl-color-bg);
--auth-surface: color-mix(in srgb, var(--tl-color-surface) 91%, transparent);
--auth-text: var(--tl-color-text);
--auth-muted: var(--tl-color-muted);
--auth-line: var(--tl-color-line);
--auth-accent: var(--tl-color-accent);
/* Global geometry bridge for legacy pages. */
--radius: var(--tl-radius-card);
--radius-sm: var(--tl-radius-control);
}
html[data-theme="dark"] {
--tl-color-bg-deep: color-mix(in srgb, var(--tl-color-bg) 86%, #000 14%);
--tl-color-surface: #101b2a;
--tl-color-surface-soft: #132238;
--tl-color-surface-muted: color-mix(in srgb, var(--tl-color-surface-soft) 76%, var(--tl-color-bg) 24%);
--tl-color-text: #edf5fd;
--tl-color-muted: #93a3b6;
--tl-color-line-solid: #26384d;
--tl-color-line: color-mix(in srgb, var(--tl-color-line-solid) 72%, transparent);
--tl-color-line-strong: color-mix(in srgb, var(--tl-color-line-solid) 88%, var(--tl-color-text) 12%);
--tl-color-primary-deep: color-mix(in srgb, var(--tl-color-primary) 78%, #02070d 22%);
--tl-color-primary-hover: color-mix(in srgb, var(--tl-color-primary) 82%, white 18%);
--tl-color-primary-soft: color-mix(in srgb, var(--tl-color-primary) 18%, var(--tl-color-surface));
--tl-color-success-soft: color-mix(in srgb, var(--tl-color-success) 18%, var(--tl-color-surface));
--tl-color-danger-soft: color-mix(in srgb, var(--tl-color-danger) 16%, var(--tl-color-surface));
--tl-shadow-card: 0 12px 32px color-mix(in srgb, #000 var(--tl-shadow-card-alpha), transparent);
--tl-shadow-float: 0 18px 46px color-mix(in srgb, #000 var(--tl-shadow-float-alpha), transparent);
--tl-glass: color-mix(in srgb, var(--tl-color-surface) 91%, transparent);
--tl-glass-strong: color-mix(in srgb, var(--tl-color-surface) 97%, transparent);
/* Critical: dark mode keeps blue/navy as interaction color; gold stays accent only. */
--bg: var(--tl-color-bg);
--bg-deep: var(--tl-color-bg-deep);
--surface: color-mix(in srgb, var(--tl-color-surface) 90%, transparent);
--surface-strong: var(--tl-color-surface);
--surface-solid: var(--tl-color-surface);
--surface-soft: var(--tl-color-surface-soft);
--surface-muted: var(--tl-color-surface-muted);
--text: var(--tl-color-text);
--muted: var(--tl-color-muted);
--line: var(--tl-color-line);
--line-strong: var(--tl-color-line-strong);
--primary: var(--tl-color-primary);
--primary-soft: var(--tl-color-primary-soft);
--accent: var(--tl-color-accent);
--accent-strong: var(--tl-color-accent-strong);
--success: var(--tl-color-success);
--danger: var(--tl-color-danger);
--tl-shell-navy: var(--tl-color-primary);
--tl-shell-navy-deep: var(--tl-color-primary-deep);
--tl-ui-navy: var(--tl-color-primary);
--tl-ui-navy-deep: var(--tl-color-primary-deep);
--tl-ui-glass-border: var(--tl-color-line-strong);
--tl-ui-glass-bg: var(--tl-glass);
--tl-ui-glass-bg-strong: var(--tl-glass-strong);
--tl-ui-glass-control: color-mix(in srgb, var(--tl-color-surface-soft) 88%, transparent);
--tl-ui-glass-shadow: var(--tl-shadow-float);
--tl-ui-glass-control-shadow: 0 8px 20px color-mix(in srgb, #000 20%, transparent);
--auth-bg: var(--tl-color-bg);
--auth-surface: color-mix(in srgb, var(--tl-color-surface) 92%, transparent);
--auth-text: var(--tl-color-text);
--auth-muted: var(--tl-color-muted);
--auth-line: var(--tl-color-line);
}
/* =========================================================
ONE CANVAS — Home / Products / Cart / Account share a base
========================================================= */
body.storefront-body,
body.customer-account-body {
background: var(--tl-color-bg);
color: var(--tl-color-text);
}
/* =========================================================
BOTTOM NAV — exactly one selected-state language everywhere
========================================================= */
@media (max-width: 840px) {
.storefront-body .mobile-bottom-nav,
.customer-account-body .mobile-bottom-nav {
border-color: var(--tl-color-line-strong) !important;
background: var(--tl-glass) !important;
box-shadow: var(--tl-shadow-float) !important;
}
.storefront-body .mobile-bottom-nav > a,
.customer-account-body .mobile-bottom-nav > a {
color: var(--tl-color-muted) !important;
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
.storefront-body .mobile-bottom-nav > a.is-active,
.storefront-body .mobile-bottom-nav > a[aria-current="page"],
.customer-account-body .mobile-bottom-nav > a.is-active,
.customer-account-body .mobile-bottom-nav > a[aria-current="page"],
.storefront-body.cart-route .mobile-bottom-nav .mobile-checkout-nav {
color: #fff !important;
border-color: color-mix(in srgb, var(--tl-color-primary) 68%, white 12%) !important;
background: linear-gradient(145deg, var(--tl-color-primary), var(--tl-color-primary-deep)) !important;
box-shadow: 0 8px 20px color-mix(in srgb, var(--tl-color-primary) 24%, transparent) !important;
}
.storefront-body .mobile-bottom-nav .mobile-cart-action:not(.is-active):not([aria-current="page"]),
.customer-account-body .mobile-bottom-nav .mobile-cart-action:not(.is-active):not([aria-current="page"]) {
color: var(--tl-color-muted) !important;
background: transparent !important;
}
.storefront-body .mobile-bottom-nav .cart-count,
.customer-account-body .mobile-bottom-nav .cart-count {
color: #111827 !important;
border-color: rgba(255,255,255,.92) !important;
background: var(--tl-color-accent) !important;
}
}
/* =========================================================
PRIMARY ACTIONS — blue/navy in both themes; gold is accent
========================================================= */
.storefront-body :is(
.btn-primary,
.cart-primary,
.catalog-apply-filters,
.purchase-flow-next,
.checkout-flow-primary,
.product-card-add:not(.disabled)
),
.customer-account-body .btn-primary {
color: #fff !important;
border-color: color-mix(in srgb, var(--tl-color-primary) 72%, white 10%) !important;
background: linear-gradient(145deg, var(--tl-color-primary), var(--tl-color-primary-deep)) !important;
box-shadow: 0 9px 22px color-mix(in srgb, var(--tl-color-primary) 20%, transparent) !important;
}
.storefront-body :is(.btn-primary, .cart-primary, .catalog-apply-filters, .purchase-flow-next, .checkout-flow-primary):hover,
.customer-account-body .btn-primary:hover {
color: #fff !important;
background: linear-gradient(145deg, var(--tl-color-primary-hover), var(--tl-color-primary)) !important;
}
/* Added / confirmed means success green, not a new page theme. */
.storefront-body .product-card-cart-form.is-added .product-card-add {
color: color-mix(in srgb, var(--tl-color-success) 78%, #071a12 22%) !important;
border-color: color-mix(in srgb, var(--tl-color-success) 38%, var(--tl-color-line)) !important;
background: var(--tl-color-success-soft) !important;
box-shadow: none !important;
}
html[data-theme="dark"] .storefront-body .product-card-cart-form.is-added .product-card-add {
color: color-mix(in srgb, var(--tl-color-success) 58%, white 42%) !important;
}
/* =========================================================
SHARED SURFACES — remove page-specific beige/blue canvases
========================================================= */
.storefront-body :is(
.catalog-discovery-form,
.filter-panel,
.product-card,
.cart-item,
.cart-summary,
.checkout-card,
.checkout-summary,
.wishlist-card,
.payment-status-card,
.checkout-success-card
),
.customer-account-body :is(
.account-card,
.address-card,
.orders-page-card,
.account-hub-nav,
.wallet-balance-card,
.coupon-history-card,
.security-card
) {
border-color: var(--tl-color-line) !important;
background: var(--tl-color-surface) !important;
box-shadow: var(--tl-shadow-card) !important;
}
html[data-theme="dark"] .storefront-body :is(
.catalog-discovery-form,
.filter-panel,
.product-card,
.cart-item,
.cart-summary,
.checkout-card,
.checkout-summary,
.wishlist-card,
.payment-status-card,
.checkout-success-card
),
html[data-theme="dark"] .customer-account-body :is(
.account-card,
.address-card,
.orders-page-card,
.account-hub-nav,
.wallet-balance-card,
.coupon-history-card,
.security-card
) {
border-color: var(--tl-color-line) !important;
background: var(--tl-color-surface) !important;
box-shadow: var(--tl-shadow-card) !important;
}
/* Product listing: cards stay neutral; state colors live inside controls. */
.storefront-body.products-route .product-card {
background: var(--tl-color-surface) !important;
}
.storefront-body.products-route .product-card::before {
background: linear-gradient(135deg, color-mix(in srgb, var(--tl-color-primary) 7%, transparent), transparent 42%, color-mix(in srgb, var(--tl-color-accent) 5%, transparent)) !important;
}
/* Floating catalog shell uses the same glass as the global shell. */
@media (max-width: 840px) {
.storefront-body.products-route .catalog-floating-glass {
border-color: var(--tl-color-line-strong) !important;
background: var(--tl-glass) !important;
box-shadow: var(--tl-shadow-float) !important;
}
.storefront-body.products-route .catalog-mobile-tools button,
.storefront-body.products-route .catalog-search-mobile,
.storefront-body.products-route .catalog-floating-search {
border-color: var(--tl-color-line) !important;
background: color-mix(in srgb, var(--tl-color-surface) 88%, transparent) !important;
}
.storefront-body.products-route .catalog-mobile-tools button.is-active {
color: #fff !important;
border-color: var(--tl-color-primary) !important;
background: var(--tl-color-primary) !important;
}
}
/* =========================================================
CART — neutral cards + one primary action color
========================================================= */
.storefront-body.cart-route .cart-page .cart-price-part {
border-color: var(--tl-color-line) !important;
background: var(--tl-color-surface-soft) !important;
}
.storefront-body.cart-route .cart-page .cart-line-price {
border-color: color-mix(in srgb, var(--tl-color-primary) 18%, var(--tl-color-line)) !important;
background: color-mix(in srgb, var(--tl-color-primary-soft) 70%, var(--tl-color-surface)) !important;
}
@media (max-width: 840px) {
.storefront-body.cart-route .cart-page .quantity-row {
color: var(--tl-color-text) !important;
border-color: var(--tl-color-line-strong) !important;
background: var(--tl-color-surface-soft) !important;
box-shadow: inset 0 1px 0 color-mix(in srgb, white 55%, transparent), 0 5px 14px color-mix(in srgb, var(--tl-color-text) 8%, transparent) !important;
}
.storefront-body.cart-route .cart-page .quantity-row .quantity-step {
color: var(--tl-color-primary) !important;
background: transparent !important;
}
.storefront-body.cart-route .cart-page .quantity-row .quantity-step:disabled {
color: var(--tl-color-muted) !important;
opacity: .46 !important;
}
.storefront-body.cart-route .cart-page .quantity-row .quantity-minus.is-remove-action {
color: var(--tl-color-danger) !important;
}
.storefront-body.cart-route .cart-page .quantity-row input {
color: var(--tl-color-text) !important;
background: var(--tl-color-surface) !important;
box-shadow: inset 0 0 0 1px var(--tl-color-line) !important;
}
.storefront-body.cart-route .purchase-flow-dock.cart-flow-dock,
.storefront-body.cart-route .cart-mobile-total {
border-color: var(--tl-color-line-strong) !important;
background: var(--tl-glass) !important;
box-shadow: var(--tl-shadow-float) !important;
}
}
/* =========================================================
MY ACCOUNT — same canvas, surfaces and selected nav as store
========================================================= */
.customer-account-body .customer-account-official-header {
border-color: var(--tl-color-line) !important;
background: var(--tl-secondary-header-bg) !important;
box-shadow: var(--tl-shadow-card) !important;
}
.customer-account-body .customer-account-section-back,
.customer-account-body .customer-account-theme-toggle {
border-color: var(--tl-color-line) !important;
background: color-mix(in srgb, var(--tl-color-surface) 90%, transparent) !important;
box-shadow: var(--tl-shadow-card) !important;
}
.customer-account-body .account-hub-row {
color: var(--tl-color-text) !important;
border-bottom-color: var(--tl-color-line) !important;
}
.customer-account-body .account-hub-row:hover {
background: var(--tl-color-primary-soft) !important;
}
.customer-account-body .account-hub-row__arrow {
color: var(--tl-color-primary) !important;
}
.customer-account-body .wallet-balance-card {
background: linear-gradient(135deg, var(--tl-color-primary-soft), var(--tl-color-surface)) !important;
}
.customer-account-body .account-note {
color: var(--tl-color-muted) !important;
border-color: color-mix(in srgb, var(--tl-color-primary) 18%, var(--tl-color-line)) !important;
background: color-mix(in srgb, var(--tl-color-primary-soft) 62%, var(--tl-color-surface)) !important;
}
/* Gold is reserved for brand accents: badges, stars and the theme affordance. */
.customer-account-body .customer-account-theme-toggle {
color: var(--tl-color-accent-strong) !important;
}
/* =========================================================
SECONDARY HEADERS — one surface language across product/account/checkout
========================================================= */
.product-detail-toolbar,
.customer-account-official-header,
.storefront-body.checkout-route .checkout-secondary-header,
.address-capture-secondary-header {
color: var(--tl-secondary-header-text) !important;
border-color: var(--tl-color-line-strong) !important;
background: var(--tl-secondary-header-bg) !important;
box-shadow: var(--tl-shadow-card) !important;
}
.product-detail-toolbar__button,
.customer-account-section-back,
.customer-account-theme-toggle {
color: var(--tl-secondary-header-button-text) !important;
border-color: var(--tl-color-line) !important;
background: var(--tl-secondary-header-button-bg) !important;
}
.product-detail-toolbar__button:hover,
.customer-account-section-back:hover,
.customer-account-theme-toggle:hover {
background: var(--tl-secondary-header-button-hover-bg) !important;
}
.customer-account-theme-toggle {
color: var(--tl-secondary-header-button-text) !important;
}
/* Common selected controls should never invent a new page color. */
.storefront-body :is(
.product-content-tabs__list button.is-active,
.catalog-mobile-tools button.is-active
) {
color: #fff !important;
border-color: var(--tl-color-primary) !important;
background: var(--tl-color-primary) !important;
}
/* Semantic status colors stay semantic. */
.wallet-credit { color: var(--tl-color-success) !important; }
.wallet-debit { color: var(--tl-color-danger) !important; }
/* =========================================================
GLOBAL THEME ENGINE — geometry and component contract
========================================================= */
.storefront-body :is(
.product-card,
.cart-item,
.cart-summary,
.checkout-card,
.checkout-summary,
.filter-panel,
.catalog-discovery-form,
.wishlist-card,
.payment-status-card,
.checkout-success-card
),
.customer-account-body :is(
.account-card,
.address-card,
.orders-page-card,
.account-hub-nav,
.wallet-balance-card,
.coupon-history-card,
.security-card
) {
border-radius: var(--tl-radius-card) !important;
}
.storefront-body :is(button, .btn, input, select, textarea, .header-action, .product-detail-toolbar__button),
.customer-account-body :is(button, .btn, input, select, textarea, .customer-account-section-back, .customer-account-theme-toggle) {
border-radius: var(--tl-radius-control);
}
@media (max-width: 840px) {
.storefront-body .mobile-bottom-nav,
.customer-account-body .mobile-bottom-nav,
.storefront-body.products-route .catalog-floating-glass {
border-radius: var(--tl-radius-floating) !important;
}
/* The selected slot is identical on Home / Products / Cart / Account. */
.storefront-body .mobile-bottom-nav > a.is-active,
.storefront-body .mobile-bottom-nav > a[aria-current="page"],
.customer-account-body .mobile-bottom-nav > a.is-active,
.customer-account-body .mobile-bottom-nav > a[aria-current="page"] {
color: #fff !important;
background: linear-gradient(145deg, var(--tl-color-primary), var(--tl-color-primary-deep)) !important;
border-color: color-mix(in srgb, var(--tl-color-primary) 70%, white 10%) !important;
}
}
/* Common controls consume the same theme tokens instead of local page palettes. */
.storefront-body :is(
.header-search,
.catalog-floating-search,
.catalog-search-mobile,
.catalog-mobile-tools button,
.quantity-row
) {
color: var(--tl-color-text) !important;
border-color: var(--tl-color-line-strong) !important;
background: color-mix(in srgb, var(--tl-color-surface) 94%, transparent) !important;
}
.customer-account-body :is(
.customer-account-section-back,
.customer-account-theme-toggle
) {
color: var(--tl-secondary-header-button-text) !important;
border-color: var(--tl-color-line-strong) !important;
background: var(--tl-secondary-header-button-bg) !important;
}
.customer-account-body :is(
.customer-account-section-back,
.customer-account-theme-toggle
):hover {
background: var(--tl-secondary-header-button-hover-bg) !important;
}
.storefront-body :is(
.product-detail-toolbar,
.checkout-secondary-header,
.address-capture-secondary-header
),
.customer-account-body .customer-account-official-header {
color: var(--tl-secondary-header-text) !important;
border-color: var(--tl-color-line-strong) !important;
background: var(--tl-secondary-header-bg) !important;
}
.storefront-body :is(input, select, textarea),
.customer-account-body :is(input, select, textarea) {
color: var(--tl-color-text);
border-color: var(--tl-color-line-strong);
background: var(--tl-color-surface);
}
.storefront-body :is(input, select, textarea)::placeholder,
.customer-account-body :is(input, select, textarea)::placeholder {
color: var(--tl-color-muted);
}
/* =========================================================
BOTTOM NAV TUNING — v1.0.14
One slot geometry everywhere; Cart becomes Continue only on /cart.
========================================================= */
@media (max-width: 840px) {
:is(.storefront-body, .customer-account-body) .mobile-bottom-nav {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
align-items: center !important;
justify-content: initial !important;
gap: 4px !important;
height: 66px !important;
min-height: 66px !important;
padding: 6px !important;
box-sizing: border-box !important;
}
:is(.storefront-body, .customer-account-body) .mobile-bottom-nav > a {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 52px !important;
min-height: 52px !important;
margin: 0 !important;
padding: 4px 2px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
box-sizing: border-box !important;
border-radius: 16px !important;
transform: none !important;
}
/* Every normal selected tab, including My Account, uses identical geometry. */
:is(.storefront-body, .customer-account-body) .mobile-bottom-nav > a:is(.is-active, [aria-current="page"]) {
width: 100% !important;
height: 52px !important;
min-height: 52px !important;
padding: 4px 2px !important;
border-radius: 16px !important;
transform: none !important;
}
/* The cart slot is a normal navigation slot everywhere except the cart route. */
:is(.storefront-body, .customer-account-body) .mobile-bottom-nav .mobile-cart-action {
width: 100% !important;
min-width: 0 !important;
height: 52px !important;
min-height: 52px !important;
margin: 0 !important;
padding: 4px 2px !important;
border-radius: 16px !important;
transform: none !important;
}
:is(.storefront-body, .customer-account-body) .mobile-bottom-nav .mobile-cart-action .mobile-cart-icon {
position: relative !important;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
display: grid !important;
place-items: center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
color: inherit !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
}
:is(.storefront-body, .customer-account-body) .mobile-bottom-nav .mobile-cart-action .mobile-cart-icon > svg {
width: 20px !important;
height: 20px !important;
}
:is(.storefront-body, .customer-account-body) .mobile-bottom-nav .mobile-cart-action .cart-count {
top: -9px !important;
left: -10px !important;
right: auto !important;
z-index: 2 !important;
}
/* On Cart only, the cart slot becomes the primary Continue action.
It remains inside the same grid cell, but its horizontal composition
and accent ring make the next step intentionally distinct. */
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav {
width: 100% !important;
min-width: 0 !important;
height: 52px !important;
min-height: 52px !important;
margin: 0 !important;
padding: 5px 8px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
color: #fff !important;
border: 1px solid color-mix(in srgb, var(--tl-color-primary) 68%, white 14%) !important;
border-radius: 16px !important;
background: linear-gradient(145deg, var(--tl-color-primary), var(--tl-color-primary-deep)) !important;
box-shadow:
0 8px 20px color-mix(in srgb, var(--tl-color-primary) 26%, transparent),
0 0 0 2px color-mix(in srgb, var(--tl-color-accent) 22%, transparent) !important;
transform: translateY(-1px) !important;
font-weight: 900 !important;
}
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav .mobile-cart-icon {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
color: currentColor !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav .mobile-cart-icon svg {
width: 18px !important;
height: 18px !important;
stroke-width: 2.2 !important;
}
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav > span:last-child {
display: inline !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
max-width: none !important;
overflow: visible !important;
color: inherit !important;
font-size: var(--tl-type-100) !important;
font-weight: 900 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
}
/* -------------------------------------------------------
BOTTOM NAV MICRO-POLISH — v1.0.14.1
1) On the cart route, show "ادامه" first and keep the arrow to its left.
2) Preserve the same badge positioning while active account is selected.
------------------------------------------------------- */
@media (max-width: 840px) {
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav {
flex-direction: row-reverse !important;
}
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav > span:last-child {
order: 1 !important;
}
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav .mobile-cart-icon {
order: 2 !important;
}
}
/* v1.0.14.3: cart CTA final RTL order — text on the right, arrow on the left. */
@media (max-width: 840px) {
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav {
flex-direction: row !important;
}
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav > span:first-child {
order: 1 !important;
}
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav .mobile-cart-icon {
order: 2 !important;
}
}
/* -------------------------------------------------------
BOTTOM NAV READABILITY — v1.0.14.4
The cart CTA markup now places its label first, so target
that label explicitly instead of the historical last-child.
------------------------------------------------------- */
@media (max-width: 840px) {
.storefront-body.cart-route .mobile-bottom-nav > a.mobile-checkout-nav > span:first-child:not(.mobile-cart-icon) {
display: inline !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
max-width: none !important;
overflow: visible !important;
color: inherit !important;
font-size: var(--tl-type-600) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
}
/* =========================================================
CART CARD PRECISION PASS — v1.0.15.1
Keep the card footprint and quantity controls untouched.
Reallocate only the existing internal columns for readability.
========================================================= */
@media (max-width: 840px) {
.storefront-body.cart-route .cart-page .cart-item {
grid-template-columns: 66px 112px minmax(0, 1fr) !important;
column-gap: 8px !important;
}
.storefront-body.cart-route .cart-page .cart-item-image {
position: relative !important;
width: 64px !important;
height: 64px !important;
align-self: center !important;
border-radius: 9px !important;
overflow: visible !important;
}
.storefront-body.cart-route .cart-page .cart-item-image img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.storefront-body.cart-route .cart-page .cart-item-price {
width: 112px !important;
gap: 4px !important;
align-self: center !important;
text-align: center !important;
}
.storefront-body.cart-route .cart-page .cart-price-part {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
box-sizing: border-box !important;
height: 30px !important;
min-height: 30px !important;
padding: 1px 5px !important;
text-align: center !important;
}
.storefront-body.cart-route .cart-page .cart-price-part small {
display: block !important;
margin: 0 !important;
color: var(--tl-color-muted) !important;
font-size: var(--tl-type-100) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
}
.storefront-body.cart-route .cart-page .cart-price-part strong {
display: flex !important;
direction: rtl !important;
align-items: baseline !important;
justify-content: center !important;
gap: 3px !important;
width: 100% !important;
color: var(--tl-color-text) !important;
font-size: var(--tl-type-200) !important;
font-weight: 900 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.storefront-body.cart-route .cart-page .cart-price-part strong > span {
font-size: var(--tl-type-200) !important;
font-weight: 900 !important;
line-height: 1.2 !important;
}
.storefront-body.cart-route .cart-page .cart-price-part strong > em {
display: inline !important;
margin: 0 !important;
color: var(--tl-color-muted) !important;
font-size: var(--tl-type-100) !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
.storefront-body.cart-route .cart-page .cart-item-discount-badge {
position: absolute !important;
top: -5px !important;
left: -5px !important;
z-index: 3 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 34px !important;
height: 17px !important;
padding: 0 6px !important;
border: 1px solid rgba(255,255,255,.62) !important;
border-radius: 999px !important;
color: #fff !important;
background: linear-gradient(135deg, #ff8754, #ff674d) !important;
box-shadow: 0 5px 12px rgba(255,103,77,.24) !important;
font-size: var(--tl-type-100) !important;
line-height: 1 !important;
font-weight: 900 !important;
white-space: nowrap !important;
pointer-events: none !important;
}
.storefront-body.cart-route .cart-page .cart-item.is-discounted .cart-item-image {
box-shadow: 0 0 0 1px rgba(255,103,77,.18) !important;
}
}
@media (max-width: 430px) {
.storefront-body.cart-route .cart-page .cart-item {
grid-template-columns: 66px 112px minmax(0, 1fr) !important;
}
.storefront-body.cart-route .cart-page .cart-item-image {
width: 64px !important;
height: 64px !important;
}
}
/* =========================================================
CATALOG FILTER DRAWER — v1.0.16
Compact quick filters, customer-safe sort and category-driven
specialized attribute filters. Price-range UI is retired.
========================================================= */
.storefront-body.products-route .catalog-quick-filters {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px;
}
.storefront-body.products-route .catalog-quick-check {
min-width: 0;
min-height: 38px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 7px;
padding: 7px 9px;
border: 1px solid var(--tl-color-line);
border-radius: var(--tl-radius-control);
color: var(--tl-color-text);
background: var(--tl-color-surface-soft);
cursor: pointer;
box-sizing: border-box;
}
.storefront-body.products-route .catalog-quick-check:only-child {
grid-column: 1 / -1;
}
.storefront-body.products-route .catalog-quick-check:has(input:checked) {
border-color: color-mix(in srgb, var(--tl-color-primary) 42%, var(--tl-color-line));
background: var(--tl-color-primary-soft);
}
.storefront-body.products-route .catalog-quick-check input {
flex: 0 0 17px;
width: 17px;
height: 17px;
margin: 0;
accent-color: var(--tl-color-primary);
}
.storefront-body.products-route .catalog-quick-check span {
min-width: 0;
overflow: hidden;
color: inherit;
font-size: var(--tl-type-100);
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
text-overflow: ellipsis;
}
.storefront-body.products-route .catalog-sort-row {
grid-column: 1 / -1;
min-height: 40px;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 6px 9px;
border: 1px solid var(--tl-color-line);
border-radius: var(--tl-radius-control);
color: var(--tl-color-text);
background: var(--tl-color-surface);
box-sizing: border-box;
}
.storefront-body.products-route .catalog-sort-caption {
color: var(--tl-color-muted);
font-family: var(--tehranlight-font-family) !important;
font-size: var(--tl-type-100);
font-weight: 800;
line-height: 1.25;
white-space: nowrap;
}
.storefront-body.products-route .catalog-sort-dropdown {
position: relative;
min-width: 0;
font-family: var(--tehranlight-font-family) !important;
}
.storefront-body.products-route .catalog-sort-trigger {
width: 100%;
min-width: 0;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 2px 8px;
border: 0;
outline: 0;
border-radius: 8px;
color: var(--tl-color-text);
background: var(--tl-color-surface-soft);
cursor: pointer;
font-family: var(--tehranlight-font-family) !important;
font-size: var(--tl-type-100) !important;
font-weight: 800;
line-height: 1.25;
text-align: right;
box-sizing: border-box;
}
.storefront-body.products-route .catalog-sort-trigger > span {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font: inherit !important;
font-family: var(--tehranlight-font-family) !important;
}
.storefront-body.products-route .catalog-sort-trigger svg {
flex: 0 0 14px;
width: 14px;
height: 14px;
fill: none;
stroke: var(--tl-color-muted);
stroke-width: 1.8;
transition: transform .16s ease;
}
.storefront-body.products-route .catalog-sort-dropdown.is-open .catalog-sort-trigger svg {
transform: rotate(180deg);
}
.storefront-body.products-route .catalog-sort-dropdown.is-open .catalog-sort-trigger {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tl-color-primary) 36%, var(--tl-color-line));
}
.storefront-body.products-route .catalog-sort-menu {
position: absolute;
z-index: 90;
top: calc(100% + 5px);
inset-inline: 0;
display: grid;
gap: 2px;
padding: 4px;
border: 1px solid var(--tl-color-line-strong);
border-radius: 9px;
background: var(--tl-color-surface);
box-shadow: var(--tl-shadow-float);
font-family: var(--tehranlight-font-family) !important;
}
.storefront-body.products-route .catalog-sort-menu[hidden] {
display: none !important;
}
.storefront-body.products-route .catalog-sort-option {
width: 100%;
min-height: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 8px;
border: 0;
border-radius: 7px;
color: var(--tl-color-text);
background: transparent;
cursor: pointer;
font-family: var(--tehranlight-font-family) !important;
font-size: var(--tl-type-100) !important;
font-weight: 800;
line-height: 1.25;
text-align: right;
white-space: nowrap;
}
.storefront-body.products-route .catalog-sort-option:hover,
.storefront-body.products-route .catalog-sort-option:focus-visible {
outline: none;
background: var(--tl-color-primary-soft);
}
.storefront-body.products-route .catalog-sort-option.is-selected {
color: #fff;
background: var(--tl-color-primary);
}
.storefront-body.products-route .catalog-specialized-filter-head {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 5px 2px 0;
}
.storefront-body.products-route .catalog-specialized-filter-head strong {
color: var(--tl-color-text);
font-size: var(--tl-type-100);
}
.storefront-body.products-route .catalog-specialized-filter-head span {
color: var(--tl-color-muted);
font-size: var(--tl-type-100);
}
.storefront-body.products-route .catalog-attribute-filters {
grid-column: 1 / -1;
display: grid;
gap: 6px;
}
.storefront-body.products-route details.catalog-attribute-filter {
min-width: 0;
margin: 0;
padding: 0;
border: 1px solid var(--tl-color-line);
border-radius: var(--tl-radius-control);
background: var(--tl-color-surface);
overflow: hidden;
}
.storefront-body.products-route details.catalog-attribute-filter > summary {
min-height: 38px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto 18px;
align-items: center;
gap: 7px;
padding: 7px 9px;
color: var(--tl-color-text);
cursor: pointer;
list-style: none;
box-sizing: border-box;
}
.storefront-body.products-route details.catalog-attribute-filter > summary::-webkit-details-marker {
display: none;
}
.storefront-body.products-route details.catalog-attribute-filter > summary > span {
font-size: var(--tl-type-100);
font-weight: 850;
}
.storefront-body.products-route details.catalog-attribute-filter > summary > small {
color: var(--tl-color-primary);
font-size: var(--tl-type-100);
font-weight: 800;
}
.storefront-body.products-route details.catalog-attribute-filter > summary svg {
width: 16px;
height: 16px;
fill: none;
stroke: var(--tl-color-muted);
stroke-width: 1.8;
transition: transform .18s ease;
}
.storefront-body.products-route details.catalog-attribute-filter[open] > summary svg {
transform: rotate(180deg);
}
.storefront-body.products-route details.catalog-attribute-filter[open] > summary {
border-bottom: 1px solid var(--tl-color-line);
background: var(--tl-color-primary-soft);
}
.storefront-body.products-route details.catalog-attribute-filter .catalog-attribute-values {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
max-height: 180px;
overflow: auto;
padding: 8px;
scrollbar-width: thin;
}
.storefront-body.products-route details.catalog-attribute-filter .catalog-attribute-value {
min-width: 0;
min-height: 32px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 5px;
padding: 5px 7px;
border-color: var(--tl-color-line);
background: var(--tl-color-surface-soft);
font-size: var(--tl-type-100);
}
.storefront-body.products-route details.catalog-attribute-filter .catalog-attribute-value > span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.storefront-body.products-route details.catalog-attribute-filter .catalog-attribute-value > small {
font-size: var(--tl-type-100);
}
@media (max-width: 840px) {
.storefront-body.products-route .catalog-advanced-panel.is-active {
grid-template-columns: 1fr !important;
align-content: start;
gap: 7px !important;
}
.storefront-body.products-route .catalog-filter-actions {
margin-top: 1px;
}
}
@media (max-width: 360px) {
.storefront-body.products-route .catalog-quick-check {
padding-inline: 7px;
}
.storefront-body.products-route .catalog-quick-check span {
font-size: var(--tl-type-100);
}
}
/* =========================================================
PRODUCT INTRO VIDEOS — v1.0.17
Zero video/iframe payload until the visitor explicitly plays.
========================================================= */
.storefront-body.product-detail-route .product-video-section {
margin-top: 28px !important;
padding: 18px;
border: 1px solid var(--tl-color-line);
border-radius: var(--tl-radius-card);
background: var(--tl-glass);
box-shadow: var(--tl-shadow-card);
}
.storefront-body.product-detail-route .product-video-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.storefront-body.product-detail-route .product-video-eyebrow {
display: block;
margin-bottom: 3px;
color: var(--tl-color-primary);
font-size: var(--tl-type-100);
font-weight: 850;
}
.storefront-body.product-detail-route .product-video-heading h2 {
margin: 0;
color: var(--tl-color-text);
font-size: var(--tl-type-600);
line-height: 1.6;
}
.storefront-body.product-detail-route .product-video-heading__hint {
color: var(--tl-color-muted);
font-size: var(--tl-type-100);
white-space: nowrap;
}
.storefront-body.product-detail-route .product-video-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.storefront-body.product-detail-route .product-video-grid > :only-child {
grid-column: 1 / -1;
width: min(100%, 720px);
}
.storefront-body.product-detail-route .product-video-card {
min-width: 0;
display: grid;
gap: 8px;
}
.storefront-body.product-detail-route .product-video-launch {
width: 100%;
padding: 0;
border: 0;
border-radius: 14px;
background: transparent;
cursor: pointer;
font: inherit;
overflow: hidden;
}
.storefront-body.product-detail-route .product-video-launch[hidden] {
display: none !important;
}
.storefront-body.product-detail-route .product-video-preview {
position: relative;
isolation: isolate;
width: 100%;
aspect-ratio: 16 / 9;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--tl-color-primary) 14%, var(--tl-color-line));
border-radius: 14px;
background:
radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--tl-color-primary) 22%, transparent), transparent 36%),
radial-gradient(circle at 16% 86%, color-mix(in srgb, var(--tl-color-accent) 20%, transparent), transparent 32%),
linear-gradient(145deg, var(--tl-color-surface-soft), var(--tl-color-surface));
box-sizing: border-box;
}
.storefront-body.product-detail-route .product-video-preview::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .35;
background-image:
linear-gradient(color-mix(in srgb, var(--tl-color-text) 5%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--tl-color-text) 5%, transparent) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.storefront-body.product-detail-route .product-video-source-badge {
position: absolute;
top: 10px;
inset-inline-start: 10px;
display: inline-flex;
align-items: center;
min-height: 25px;
padding: 3px 8px;
border: 1px solid var(--tl-color-line);
border-radius: 999px;
color: var(--tl-color-muted);
background: var(--tl-glass-strong);
font-size: var(--tl-type-100);
font-weight: 800;
backdrop-filter: blur(10px);
}
.storefront-body.product-detail-route .product-video-play-mark {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, white 55%, transparent);
border-radius: 50%;
color: #fff;
background: var(--tl-color-primary);
box-shadow: 0 12px 26px color-mix(in srgb, var(--tl-color-primary) 28%, transparent);
transition: transform .16s ease, box-shadow .16s ease;
}
.storefront-body.product-detail-route .product-video-play-mark svg {
width: 25px;
height: 25px;
fill: currentColor;
}
.storefront-body.product-detail-route .product-video-launch:hover .product-video-play-mark,
.storefront-body.product-detail-route .product-video-launch:focus-visible .product-video-play-mark {
transform: scale(1.06);
box-shadow: 0 14px 30px color-mix(in srgb, var(--tl-color-primary) 36%, transparent);
}
.storefront-body.product-detail-route .product-video-launch:focus-visible {
outline: 2px solid color-mix(in srgb, var(--tl-color-primary) 45%, transparent);
outline-offset: 3px;
}
.storefront-body.product-detail-route .product-video-preview__copy {
position: absolute;
inset-inline: 12px;
bottom: 10px;
display: grid;
gap: 1px;
text-align: right;
}
.storefront-body.product-detail-route .product-video-preview__copy strong {
overflow: hidden;
color: var(--tl-color-text);
font-size: var(--tl-type-100);
line-height: 1.6;
white-space: nowrap;
text-overflow: ellipsis;
}
.storefront-body.product-detail-route .product-video-preview__copy small {
color: var(--tl-color-muted);
font-size: var(--tl-type-100);
}
.storefront-body.product-detail-route .product-video-player {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--tl-color-line);
border-radius: 14px;
background: #05080d;
}
.storefront-body.product-detail-route .product-video-player[hidden] {
display: none !important;
}
.storefront-body.product-detail-route .product-video-player .product-video-media {
display: block;
width: 100%;
height: 100%;
margin: 0;
border: 0;
border-radius: 0;
background: #05080d;
object-fit: contain;
}
.storefront-body.product-detail-route .product-video-card > h3 {
margin: 0;
padding-inline: 2px;
color: var(--tl-color-text);
font-size: var(--tl-type-100);
line-height: 1.7;
}
@media (max-width: 760px) {
.storefront-body.product-detail-route .product-video-section {
margin-top: 20px !important;
padding: 12px;
}
.storefront-body.product-detail-route .product-video-heading {
align-items: flex-start;
}
.storefront-body.product-detail-route .product-video-heading__hint {
display: none;
}
.storefront-body.product-detail-route .product-video-grid {
grid-template-columns: 1fr;
}
.storefront-body.product-detail-route .product-video-grid > :only-child {
grid-column: auto;
width: 100%;
}
}
/* =========================================================
PRODUCT MEDIA GALLERY + MOBILE PRICE CLEANUP — v1.0.19
Videos live inside the product gallery and remain lazy until play.
========================================================= */
.storefront-body.product-detail-route [data-product-media-gallery] .gallery-main {
isolation: isolate;
}
.storefront-body.product-detail-route [data-product-media-gallery] [data-product-gallery-main-image][hidden],
.storefront-body.product-detail-route [data-product-media-gallery] [data-product-gallery-empty][hidden],
.storefront-body.product-detail-route [data-product-media-gallery] .gallery-primary-video-button[hidden],
.storefront-body.product-detail-route [data-product-media-gallery] .gallery-video-host[hidden] {
display: none !important;
}
.storefront-body.product-detail-route .gallery-video-host {
position: absolute;
inset: 8px;
z-index: 3;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--tl-color-line) 82%, transparent);
border-radius: calc(var(--tl-radius-card) - 6px);
background: #05080d;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.storefront-body.product-detail-route .gallery-video-host .gallery-video-media {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
margin: 0;
border: 0;
background: #05080d;
object-fit: contain;
}
.storefront-body.product-detail-route .gallery-primary-video-button {
position: absolute;
inset: 50% auto auto 50%;
z-index: 4;
width: auto;
min-width: 74px;
display: grid;
justify-items: center;
gap: 6px;
padding: 0;
border: 0;
color: #fff;
background: transparent;
transform: translate(-50%, -50%);
cursor: pointer;
font: inherit;
}
.storefront-body.product-detail-route .gallery-primary-video-button__play {
width: 58px;
height: 58px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.7);
border-radius: 50%;
color: #fff;
background: color-mix(in srgb, var(--tl-color-primary) 92%, transparent);
box-shadow: 0 12px 28px color-mix(in srgb, #000 26%, transparent);
backdrop-filter: blur(8px);
transition: transform .16s ease, box-shadow .16s ease;
}
.storefront-body.product-detail-route .gallery-primary-video-button__play svg {
width: 28px;
height: 28px;
fill: currentColor;
}
.storefront-body.product-detail-route .gallery-primary-video-button small {
min-height: 23px;
display: inline-flex;
align-items: center;
padding: 2px 8px;
border: 1px solid rgba(255,255,255,.55);
border-radius: 999px;
color: #fff;
background: color-mix(in srgb, #08101b 70%, transparent);
box-shadow: 0 6px 16px rgba(0,0,0,.14);
font-size: var(--tl-type-100);
font-weight: 850;
white-space: nowrap;
backdrop-filter: blur(8px);
}
.storefront-body.product-detail-route .gallery-primary-video-button:hover .gallery-primary-video-button__play,
.storefront-body.product-detail-route .gallery-primary-video-button:focus-visible .gallery-primary-video-button__play {
transform: scale(1.06);
box-shadow: 0 15px 34px color-mix(in srgb, #000 32%, transparent);
}
.storefront-body.product-detail-route .gallery-primary-video-button:focus-visible {
outline: 0;
}
.storefront-body.product-detail-route .gallery-thumbnail--video {
position: relative;
padding: 2px;
border-color: color-mix(in srgb, var(--tl-color-primary) 25%, var(--tl-color-line));
background:
radial-gradient(circle at 72% 22%, color-mix(in srgb, var(--tl-color-primary) 22%, transparent), transparent 42%),
linear-gradient(145deg, var(--tl-color-surface-soft), var(--tl-color-surface));
}
.storefront-body.product-detail-route .gallery-thumbnail--video.active {
border-color: var(--tl-color-primary);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--tl-color-primary) 20%, transparent);
}
.storefront-body.product-detail-route .gallery-video-thumbnail {
width: 100%;
height: 100%;
display: grid;
place-content: center;
justify-items: center;
gap: 1px;
border-radius: 8px;
color: var(--tl-color-primary);
background: color-mix(in srgb, var(--tl-color-primary) 7%, var(--tl-color-surface));
}
.storefront-body.product-detail-route .gallery-video-thumbnail svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.storefront-body.product-detail-route .gallery-video-thumbnail small {
color: var(--tl-color-muted);
font-size: var(--tl-type-100);
font-weight: 850;
line-height: 1;
}
@media (max-width: 840px) {
/* The sticky purchase bar is the single source of price on mobile. */
.storefront-body.product-detail-route .product-info > .detail-price {
display: none !important;
}
.storefront-body.product-detail-route .gallery-video-host {
inset: 6px;
border-radius: 12px;
}
.storefront-body.product-detail-route .gallery-primary-video-button__play {
width: 52px;
height: 52px;
}
.storefront-body.product-detail-route .gallery-primary-video-button__play svg {
width: 25px;
height: 25px;
}
.storefront-body.product-detail-route .gallery-primary-video-button small {
font-size: var(--tl-type-100);
}
.storefront-body.product-detail-route .gallery-video-thumbnail svg {
width: 18px;
height: 18px;
}
}
/* =========================================================
ACCOUNT HORIZONTAL PRODUCT CARDS + STOCK ALERT CARDS — v1.0.21.1
Catalog out-of-stock actions, wishlist parity, and minimal waiting list.
========================================================= */
/* Out-of-stock is a primary state on catalog cards, not tiny metadata. */
.product-card .product-stock.out {
min-height: 22px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line));
border-radius: 999px;
color: var(--danger);
background: color-mix(in srgb, var(--danger) 7%, var(--surface-solid));
font-size: var(--tl-type-100);
font-weight: 900;
line-height: 1;
white-space: nowrap;
}
.product-card .product-stock.out i {
width: 6px;
height: 6px;
flex: 0 0 6px;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 11%, transparent);
}
.product-card-stock-alert-form {
margin: 0;
}
.product-card .price-row--stock-alert {
min-height: 39px;
justify-content: flex-end;
}
.product-card .price-row > .product-card-stock-alert-form {
align-self: end;
}
.product-card .product-card-stock-alert {
min-width: 112px;
border-color: color-mix(in srgb, var(--primary) 34%, var(--line));
color: var(--primary);
background: color-mix(in srgb, var(--primary) 8%, var(--surface-solid));
box-shadow: none;
font-size: var(--tl-type-100);
font-weight: 900;
}
.product-card .product-card-stock-alert:hover {
color: #fff;
background: var(--primary);
box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 20%, transparent);
}
/* Wishlist uses the real storefront product card, forced into a horizontal rail. */
.customer-account-body .wishlist-product-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.customer-account-body .wishlist-product-item {
min-width: 0;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal {
position: relative;
display: grid;
grid-template-columns: 132px minmax(0, 1fr);
min-height: 132px;
direction: ltr;
overflow: hidden;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-image {
grid-column: 1;
grid-row: 1;
width: 132px;
height: 100%;
min-height: 132px;
aspect-ratio: auto;
direction: rtl;
border-right: 1px solid var(--line);
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-image img {
padding: 8px;
object-fit: contain;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-body {
grid-column: 2;
grid-row: 1;
min-width: 0;
display: grid;
grid-template-rows: auto auto auto 1fr auto;
gap: 2px;
padding: 10px 12px;
direction: rtl;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-meta {
min-height: 24px;
justify-content: flex-start;
gap: 6px;
flex-wrap: wrap;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-list-remove-form {
margin: 0 0 0 auto;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-list-remove {
min-height: 24px;
padding: 3px 8px;
border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
border-radius: 8px;
color: var(--danger);
background: color-mix(in srgb, var(--danger) 5%, var(--surface-solid));
cursor: pointer;
font: inherit;
font-size: var(--tl-type-100);
font-weight: 850;
white-space: nowrap;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-list-remove:hover {
color: #fff;
background: var(--danger);
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-title {
min-height: 0;
margin-top: 2px;
font-size: var(--tl-type-300);
font-weight: 800;
line-height: 1.7;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-code {
margin-top: 1px;
font-size: var(--tl-type-100);
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-min-order-note {
margin-top: 1px;
font-size: var(--tl-type-100);
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-rating {
align-self: center;
margin-top: 1px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .price-row {
min-height: 35px;
display: flex;
flex-direction: row;
align-items: end;
justify-content: space-between;
gap: 8px;
margin-top: 3px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-price-stack {
min-height: 31px;
grid-template-rows: 11px 20px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-price-stack .old-price {
min-height: 11px;
line-height: 11px;
font-size: var(--tl-type-100);
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-price-stack .current-price {
min-height: 20px;
line-height: 20px;
font-size: var(--tl-type-400);
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-add {
min-width: 92px;
min-height: 29px;
padding: 4px 9px;
font-size: var(--tl-type-100);
}
/* Waiting-list cards are intentionally minimal: image, title, remove only. */
.customer-account-body .stock-alert-waiting-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.customer-account-body .stock-alert-waiting-card {
min-width: 0;
min-height: 116px;
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
direction: ltr;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--primary) 17%, var(--line));
border-radius: var(--radius, 14px);
background: var(--surface-solid);
box-shadow: var(--shadow);
}
.customer-account-body .stock-alert-waiting-card__image {
grid-column: 1;
grid-row: 1;
width: 116px;
min-height: 116px;
display: grid;
place-items: center;
overflow: hidden;
direction: rtl;
border-right: 1px solid var(--line);
background: var(--surface-soft);
text-decoration: none;
}
.customer-account-body .stock-alert-waiting-card__image img {
width: 100%;
height: 100%;
padding: 8px;
object-fit: contain;
}
.customer-account-body .stock-alert-waiting-card__body {
grid-column: 2;
grid-row: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
gap: 12px;
padding: 14px;
direction: rtl;
}
.customer-account-body .stock-alert-waiting-card__title {
color: var(--text);
text-decoration: none;
font-size: var(--tl-type-400);
font-weight: 850;
line-height: 1.9;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.customer-account-body .stock-alert-waiting-card__remove-form {
margin: 0;
}
.customer-account-body .stock-alert-waiting-card__remove {
min-height: 30px;
padding: 5px 11px;
border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
border-radius: 9px;
color: var(--danger);
background: color-mix(in srgb, var(--danger) 5%, var(--surface-solid));
cursor: pointer;
font: inherit;
font-size: var(--tl-type-100);
font-weight: 850;
}
.customer-account-body .stock-alert-waiting-card__remove:hover {
color: #fff;
background: var(--danger);
}
html[data-theme="dark"] .product-card .product-stock.out,
html[data-theme="dark"] .customer-account-body .stock-alert-waiting-card {
background-color: color-mix(in srgb, var(--surface-solid) 94%, var(--primary) 6%);
}
@media (max-width: 840px) {
.mobile-product-cards-list .catalog-main .product-card .product-stock.out,
.mobile-product-cards-grid .catalog-main .product-card .product-stock.out {
min-height: 20px;
padding: 3px 6px;
font-size: var(--tl-type-100);
}
.mobile-product-cards-list .catalog-main .price-row > .product-card-stock-alert-form {
grid-column: 2;
grid-row: 1;
justify-self: end;
align-self: end;
direction: rtl;
}
.mobile-product-cards-list .catalog-main .product-card .product-card-stock-alert {
min-width: 98px;
min-height: 27px;
padding-inline: 7px;
font-size: var(--tl-type-100);
}
.mobile-product-cards-grid .catalog-main .product-card-stock-alert-form {
display: flex;
justify-content: center;
width: 100%;
}
.mobile-product-cards-grid .catalog-main .product-card .product-card-stock-alert {
width: 100%;
min-width: 0;
}
}
@media (max-width: 560px) {
.customer-account-body .wishlist-product-item .product-card--account-horizontal {
grid-template-columns: 104px minmax(0, 1fr);
min-height: 112px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-image {
width: 104px;
min-height: 112px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-body {
padding: 8px 9px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-title {
font-size: var(--tl-type-200);
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-code {
display: none;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-rating {
font-size: var(--tl-type-100);
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-add {
min-width: 84px;
min-height: 27px;
font-size: var(--tl-type-100);
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-list-remove {
min-height: 22px;
padding-inline: 6px;
font-size: var(--tl-type-100);
}
.customer-account-body .stock-alert-waiting-card {
grid-template-columns: 94px minmax(0, 1fr);
min-height: 100px;
}
.customer-account-body .stock-alert-waiting-card__image {
width: 94px;
min-height: 100px;
}
.customer-account-body .stock-alert-waiting-card__body {
padding: 10px;
}
.customer-account-body .stock-alert-waiting-card__title {
font-size: var(--tl-type-200);
}
.customer-account-body .stock-alert-waiting-card__remove {
min-height: 28px;
font-size: var(--tl-type-100);
}
}
@media (max-width: 840px) {
.mobile-product-cards-list .catalog-main .product-card .product-body {
grid-template-rows: 36px minmax(20px, auto) minmax(0, 1fr) 34px;
}
}
/* =========================================================
DARK THEME ACCESSIBILITY + CENTRAL CONTENT TOKENS — v1.0.22
One foreground/media contract for storefront + customer account.
Interaction/navy stays available for filled controls; textual emphasis
uses dedicated readable tokens in dark mode.
========================================================= */
:root {
--tl-readable-text: var(--tl-color-text);
--tl-readable-muted: var(--tl-color-muted);
--tl-readable-emphasis: var(--tl-color-primary);
--tl-readable-price: var(--tl-color-primary);
--tl-readable-price-unit: color-mix(in srgb, var(--tl-color-primary) 82%, var(--tl-color-muted) 18%);
--tl-readable-link: var(--tl-color-primary);
--tl-readable-on-accent: #17283f;
--tl-media-surface: var(--tl-color-surface-soft);
}
body.storefront-body,
body.customer-account-body {
--text: var(--tl-readable-text);
--muted: var(--tl-readable-muted);
}
html[data-theme="dark"] body.storefront-body,
html[data-theme="dark"] body.customer-account-body {
--text: var(--tl-readable-text);
--muted: var(--tl-readable-muted);
}
/* Transparent product art follows the central dark media surface instead of
the legacy white showroom gradient. */
html[data-theme="dark"] body.storefront-body .product-image,
html[data-theme="dark"] body.customer-account-body .product-image,
html[data-theme="dark"] body.customer-account-body .stock-alert-waiting-card__image {
color: var(--tl-readable-muted) !important;
border-color: var(--tl-color-line) !important;
background:
radial-gradient(
circle at 50% 42%,
color-mix(in srgb, var(--tl-media-surface) 90%, var(--tl-color-text) 10%) 0%,
var(--tl-media-surface) 62%,
color-mix(in srgb, var(--tl-media-surface) 78%, var(--tl-color-bg) 22%) 100%
) !important;
}
html[data-theme="dark"] body.customer-account-body .product-image::after {
background: color-mix(in srgb, #000 30%, transparent) !important;
opacity: .22 !important;
}
html[data-theme="dark"] body.customer-account-body .product-image img,
html[data-theme="dark"] body.customer-account-body .stock-alert-waiting-card__image img {
filter: drop-shadow(0 10px 18px color-mix(in srgb, #000 24%, transparent));
}
/* Central dark foreground semantics. The configured dark text is off-white;
prices/emphasis receive a restrained blue-white distinction. */
html[data-theme="dark"] :is(body.storefront-body, body.customer-account-body) :is(
.product-title,
.cart-item-title,
.stock-alert-waiting-card__title,
.review-card h3,
.review-card-head strong,
.account-hub-row,
.account-card h1,
.account-card h2,
.account-card h3
) {
color: var(--tl-readable-text) !important;
}
html[data-theme="dark"] :is(body.storefront-body, body.customer-account-body) :is(
.product-brand,
.product-code,
.product-card-rating,
.product-card-rating__count,
.legacy-product-text,
.short-description,
.product-meta > span,
.reviews-summary span,
.review-card time,
.review-card p,
.review-reply time,
.review-reply p,
.customer-empty,
.account-note
) {
color: var(--tl-readable-muted) !important;
}
html[data-theme="dark"] :is(body.storefront-body, body.customer-account-body) :is(
.current-price,
.current-price .price-amount,
.product-min-order-note strong,
.product-sticky-purchase__current strong,
.product-sticky-purchase__minimum strong,
.cart-price-part strong,
.cart-price-part strong > span,
.summary-total strong,
.cart-flow-dock__total strong
) {
color: var(--tl-readable-price) !important;
}
html[data-theme="dark"] :is(body.storefront-body, body.customer-account-body) :is(
.current-price small,
.product-sticky-purchase__current small,
.cart-price-part strong > em
) {
color: var(--tl-readable-price-unit) !important;
font-weight: 850 !important;
}
html[data-theme="dark"] :is(body.storefront-body, body.customer-account-body) :is(
.product-min-order-note,
.cart-min-order-note,
.product-sticky-purchase__minimum
) {
color: var(--tl-readable-muted) !important;
}
/* Navy remains a filled-action color. Text links/icons on dark surfaces use
the central readable link token. */
html[data-theme="dark"] :is(body.storefront-body, body.customer-account-body) :is(
.product-suggestion-rail__heading > a,
.product-suggestion-card__copy b,
.product-description-disclosure > summary span,
.product-meta a,
.breadcrumb a,
.section-link,
.account-hub-row__arrow
) {
color: var(--tl-readable-link) !important;
}
html[data-theme="dark"] .storefront-body .review-card time,
html[data-theme="dark"] .storefront-body .review-reply time {
font-weight: 700;
}
/* Wishlist: the remove action reuses the existing CTA slot; no extra metadata
row, so the horizontal card keeps the compact catalog footprint. */
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-meta {
min-height: 18px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-list-remove-form--cta {
margin: 0;
align-self: end;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-list-remove--cta {
min-width: 92px;
min-height: 29px;
padding: 4px 9px;
border: 1px solid color-mix(in srgb, var(--tl-color-danger) 38%, var(--tl-color-line)) !important;
border-radius: var(--tl-radius-control);
color: var(--tl-color-danger) !important;
background: var(--tl-color-danger-soft) !important;
box-shadow: none !important;
font-size: var(--tl-type-100);
font-weight: 900;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-list-remove--cta:hover {
color: #fff !important;
background: var(--tl-color-danger) !important;
}
html[data-theme="dark"] .customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-list-remove--cta {
color: color-mix(in srgb, var(--tl-color-danger) 58%, var(--tl-readable-text) 42%) !important;
background: color-mix(in srgb, var(--tl-color-danger) 14%, var(--tl-color-surface)) !important;
}
html[data-theme="dark"] .customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-list-remove--cta:hover {
color: #fff !important;
background: var(--tl-color-danger) !important;
}
@media (max-width: 560px) {
.customer-account-body .wishlist-product-item .product-card--account-horizontal {
min-height: 104px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-image {
min-height: 104px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-body {
gap: 1px;
padding: 7px 9px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-meta {
min-height: 15px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-title {
margin-top: 0;
line-height: 1.55;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-min-order-note {
margin-top: 0;
line-height: 1.2;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .price-row {
min-height: 31px;
margin-top: 1px;
padding-top: 4px;
}
.customer-account-body .wishlist-product-item .product-card--account-horizontal .product-card-list-remove--cta {
min-width: 84px;
min-height: 27px;
padding-inline: 7px;
font-size: var(--tl-type-100);
}
}
/* Remaining legacy primary-as-text sites are routed through the same dark
readable-link token. Filled primary controls are intentionally excluded. */
html[data-theme="dark"] body.storefront-body :is(
.checkout-new-address,
.checkout-address-option__top small,
.checkout-flow-brand__mark,
.checkout-flow-step.is-done,
.checkout-flow-step.is-done > span,
.checkout-flow-eyebrow,
.checkout-flow-section__index,
.shipping-option--flow .shipping-price,
.checkout-coupon-apply,
.checkout-my-coupons__head span,
.checkout-payment-method__icon,
.checkout-summary__head a,
.address-province-combobox__button::after,
.catalog-attribute-filter > summary > small,
.product-video-eyebrow,
.gallery-video-thumbnail,
.product-card-stock-alert
) {
color: var(--tl-readable-link) !important;
}
/* Light/gold surfaces require a dark semantic foreground even in dark mode.
This prevents the global dark readable-link token from producing pale text
on high-luminance accent buttons such as Checkout > Add address. */
html[data-theme="dark"] body.storefront-body .checkout-address-add {
color: var(--tl-readable-on-accent) !important;
text-shadow: none !important;
}
html[data-theme="dark"] body.storefront-body .checkout-address-add :is(span, b, strong, small, svg) {
color: inherit !important;
}
html[data-theme="dark"] body.storefront-body .quantity-row .quantity-step:not(:disabled):not(.quantity-minus.is-remove-action) {
color: var(--tl-readable-link) !important;
}
html[data-theme="dark"] :is(body.storefront-body, body.customer-account-body) :is(
.old-price,
.product-sticky-purchase__compare
) {
color: var(--tl-readable-muted) !important;
}
html[data-theme="dark"] :is(body.storefront-body, body.customer-account-body) .product-stock:not(.out) {
color: color-mix(in srgb, var(--tl-color-success) 58%, var(--tl-readable-text) 42%) !important;
}
html[data-theme="dark"] :is(body.storefront-body, body.customer-account-body) .product-stock.out {
color: color-mix(in srgb, var(--tl-color-danger) 58%, var(--tl-readable-text) 42%) !important;
border-color: color-mix(in srgb, var(--tl-color-danger) 34%, var(--tl-color-line)) !important;
background: color-mix(in srgb, var(--tl-color-danger) 12%, var(--tl-color-surface)) !important;
}
/* === TL_PRODUCTS_V1_START ===
TehranLight Products Graphic Theme
Snapshot basis: current /products markup, panels and product cards.
Geometry of category/brand/filter drawers is intentionally preserved.
=== */
/* ---------- Mobile catalogue shell ---------- */
@media (max-width: 840px) {
body.storefront-body.products-route {
--tl-products-card: rgba(255,255,255,.96);
--tl-products-card-soft: rgba(249,251,255,.96);
--tl-products-line: rgba(48,92,145,.14);
--tl-products-line-strong: rgba(42,105,176,.24);
--tl-products-text: #102e5f;
--tl-products-muted: #7184a1;
--tl-products-navy: #0e4b7e;
--tl-products-navy-deep: #082e55;
--tl-products-blue: #1268ff;
--tl-products-success: #19a86b;
--tl-products-discount-a: #ff7655;
--tl-products-discount-b: #ff4d37;
--tl-products-shadow: 0 10px 28px rgba(20,46,82,.065);
--tl-products-float-shadow: 0 18px 44px rgba(13,35,66,.13);
}
/* Nothing may appear above the search bar on the mobile products route. */
body.storefront-body.products-route .site-header,
body.storefront-body.products-route .catalog-top {
display: none !important;
}
body.storefront-body.products-route #main-content {
padding-top: 0 !important;
}
body.storefront-body.products-route .catalog-page {
padding-top: 116px !important;
padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
}
body.storefront-body.products-route .catalog-main {
min-width: 0 !important;
}
/* Fixed glass search + the existing Categories / Brands / Filters row. */
body.storefront-body.products-route .catalog-floating-glass {
top: calc(7px + env(safe-area-inset-top, 0px)) !important;
right: 8px !important;
left: 8px !important;
gap: 7px !important;
padding: 7px !important;
border: 1px solid var(--tl-products-line-strong) !important;
border-radius: 21px !important;
background:
linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,250,255,.89)) !important;
box-shadow: var(--tl-products-float-shadow) !important;
backdrop-filter: blur(22px) saturate(150%) !important;
-webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}
body.storefront-body.products-route .catalog-floating-search {
height: 48px !important;
min-height: 48px !important;
grid-template-columns: 30px minmax(0,1fr) 40px !important;
border: 1px solid var(--tl-products-line) !important;
border-radius: 15px !important;
background: rgba(255,255,255,.82) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.82),
0 6px 16px rgba(19,54,96,.035) !important;
}
body.storefront-body.products-route .catalog-floating-search > svg {
width: 18px !important;
height: 18px !important;
stroke: #7587a3 !important;
}
body.storefront-body.products-route .catalog-floating-search input {
height: 46px !important;
min-height: 46px !important;
padding: 0 7px !important;
color: var(--tl-products-text) !important;
font-size: var(--tl-type-400) !important;
font-weight: 650 !important;
text-align: right !important;
}
body.storefront-body.products-route .catalog-floating-search input::placeholder {
color: #8998ae !important;
font-size: var(--tl-type-200) !important;
font-weight: 650 !important;
}
body.storefront-body.products-route .catalog-floating-search button {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
min-height: 38px !important;
margin-left: 0 !important;
border: 1px solid rgba(52,111,169,.28) !important;
border-radius: 12px !important;
color: #fff !important;
background:
linear-gradient(145deg, var(--tl-products-navy), var(--tl-products-navy-deep)) !important;
box-shadow: 0 7px 17px rgba(10,54,96,.18) !important;
}
body.storefront-body.products-route .catalog-floating-search button svg {
width: 18px !important;
height: 18px !important;
}
body.storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools {
gap: 5px !important;
}
body.storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools button {
height: 42px !important;
min-height: 42px !important;
gap: 7px !important;
padding: 0 8px !important;
border: 1px solid var(--tl-products-line) !important;
border-radius: 13px !important;
color: #173f70 !important;
background: rgba(255,255,255,.72) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
font-size: var(--tl-type-200) !important;
font-weight: 900 !important;
}
body.storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools button svg {
width: 17px !important;
height: 17px !important;
stroke-width: 1.8 !important;
}
body.storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools button.is-active {
color: #fff !important;
border-color: rgba(18,104,255,.45) !important;
background:
linear-gradient(145deg, #185f98, #0b3c6c) !important;
box-shadow: 0 8px 18px rgba(13,66,112,.21) !important;
}
/* ---------- Existing drawers: dimensions/scroll space are preserved ---------- */
body.storefront-body.products-route .catalog-discovery-form.is-open {
border-color: var(--tl-products-line-strong) !important;
border-radius: 20px !important;
background:
linear-gradient(150deg, rgba(255,255,255,.97), rgba(247,250,255,.94)) !important;
box-shadow: 0 20px 48px rgba(13,35,66,.15) !important;
backdrop-filter: blur(22px) saturate(150%) !important;
-webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}
/* Categories and brands intentionally keep the current two-column/free-height layout. */
body.storefront-body.products-route .catalog-direct-options {
gap: 6px !important;
scrollbar-color: rgba(60,108,160,.25) transparent !important;
}
body.storefront-body.products-route .catalog-direct-option span {
position: relative !important;
min-height: 39px !important;
padding: 7px 25px 7px 9px !important;
border: 1px solid var(--tl-products-line) !important;
border-radius: 11px !important;
color: #2a466c !important;
background: rgba(255,255,255,.74) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.76) !important;
font-size: var(--tl-type-100) !important;
font-weight: 760 !important;
line-height: 1.55 !important;
}
body.storefront-body.products-route .catalog-direct-option span::before {
content: "‹" !important;
position: absolute !important;
right: 9px !important;
top: 50% !important;
transform: translateY(-52%) !important;
color: #7890ad !important;
font-size: var(--tl-type-600) !important;
font-weight: 800 !important;
line-height: 1 !important;
}
body.storefront-body.products-route .catalog-direct-option.is-selected span,
body.storefront-body.products-route .catalog-direct-option input:checked + span {
color: #fff !important;
border-color: rgba(20,95,159,.46) !important;
background: linear-gradient(145deg, #17598e, #0b3c6a) !important;
box-shadow: 0 7px 17px rgba(11,60,106,.18) !important;
}
body.storefront-body.products-route .catalog-direct-option.is-selected span::before,
body.storefront-body.products-route .catalog-direct-option input:checked + span::before {
color: rgba(255,255,255,.82) !important;
}
/* Filter drawer: same real controls and existing area, updated visual language only. */
body.storefront-body.products-route .catalog-quick-filters {
gap: 7px !important;
}
body.storefront-body.products-route .catalog-quick-check {
min-height: 42px !important;
gap: 8px !important;
padding: 8px 10px !important;
border: 1px solid var(--tl-products-line) !important;
border-radius: 12px !important;
color: #253f63 !important;
background: rgba(255,255,255,.72) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
}
body.storefront-body.products-route .catalog-quick-check:has(input:checked) {
border-color: rgba(23,95,151,.32) !important;
background: rgba(230,241,253,.84) !important;
}
body.storefront-body.products-route .catalog-quick-check input {
width: 18px !important;
height: 18px !important;
accent-color: var(--tl-products-navy) !important;
}
body.storefront-body.products-route .catalog-quick-check span {
font-size: var(--tl-type-100) !important;
font-weight: 850 !important;
}
body.storefront-body.products-route .catalog-sort-row {
min-height: 44px !important;
padding: 7px 9px !important;
border: 1px solid var(--tl-products-line) !important;
border-radius: 12px !important;
background: rgba(255,255,255,.72) !important;
}
body.storefront-body.products-route .catalog-sort-caption {
color: var(--tl-products-muted) !important;
font-size: var(--tl-type-100) !important;
font-weight: 780 !important;
}
body.storefront-body.products-route .catalog-sort-trigger {
border-color: transparent !important;
color: #24436c !important;
background: transparent !important;
box-shadow: none !important;
font-size: var(--tl-type-100) !important;
font-weight: 900 !important;
}
body.storefront-body.products-route .catalog-sort-menu {
border-color: var(--tl-products-line-strong) !important;
border-radius: 13px !important;
background: rgba(255,255,255,.98) !important;
box-shadow: 0 16px 34px rgba(14,39,74,.14) !important;
}
body.storefront-body.products-route .catalog-sort-option {
color: #29476d !important;
font-weight: 760 !important;
}
body.storefront-body.products-route .catalog-sort-option.is-selected {
color: #fff !important;
background: linear-gradient(145deg, #17598e, #0b3c6a) !important;
}
body.storefront-body.products-route details.catalog-attribute-filter {
border-color: var(--tl-products-line) !important;
border-radius: 12px !important;
background: rgba(255,255,255,.71) !important;
}
body.storefront-body.products-route details.catalog-attribute-filter > summary {
min-height: 42px !important;
color: #29476d !important;
font-weight: 850 !important;
}
body.storefront-body.products-route .catalog-attribute-value {
border-color: var(--tl-products-line) !important;
border-radius: 10px !important;
color: #354f73 !important;
background: rgba(248,250,254,.86) !important;
}
body.storefront-body.products-route .catalog-filter-actions {
gap: 7px !important;
}
body.storefront-body.products-route .catalog-apply-filters,
body.storefront-body.products-route .catalog-clear-filters {
min-height: 40px !important;
border-radius: 11px !important;
font-size: var(--tl-type-100) !important;
font-weight: 900 !important;
}
body.storefront-body.products-route .catalog-apply-filters {
color: #fff !important;
border-color: rgba(13,76,132,.36) !important;
background: linear-gradient(145deg, #17598e, #0b3c6a) !important;
box-shadow: 0 8px 18px rgba(11,60,106,.20) !important;
}
body.storefront-body.products-route .catalog-clear-filters {
color: #29476d !important;
border: 1px solid var(--tl-products-line-strong) !important;
background: rgba(255,255,255,.75) !important;
box-shadow: none !important;
}
/* ---------- Product list ---------- */
body.storefront-body.products-route .catalog-main .product-grid {
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
gap: 8px !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card {
position: relative !important;
display: grid !important;
grid-template-columns: 108px minmax(0,1fr) !important;
direction: ltr !important;
min-height: 116px !important;
border: 1px solid var(--tl-products-line) !important;
border-radius: 18px !important;
background:
radial-gradient(circle at 8% 10%, rgba(49,118,204,.055), transparent 30%),
linear-gradient(180deg, var(--tl-products-card), var(--tl-products-card-soft)) !important;
box-shadow: var(--tl-products-shadow) !important;
overflow: hidden !important;
transform: none !important;
backdrop-filter: none !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card::before {
display: none !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-image {
grid-column: 1 !important;
grid-row: 1 !important;
width: 108px !important;
height: 116px !important;
min-height: 116px !important;
aspect-ratio: auto !important;
direction: rtl !important;
border: 0 !important;
border-left: 1px solid rgba(58,100,151,.10) !important;
border-radius: 0 !important;
background:
radial-gradient(circle at 50% 43%, #fff 0%, #f7f9fc 62%, #edf2f8 100%) !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-image::after {
inset: auto 18% 5% 18% !important;
height: 10% !important;
background: rgba(24,45,76,.10) !important;
filter: blur(12px) !important;
opacity: .40 !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-image img {
width: 100% !important;
height: 100% !important;
padding: 8px !important;
object-fit: contain !important;
transform: none !important;
filter: drop-shadow(0 7px 10px rgba(29,52,85,.07)) !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-body {
position: relative !important;
grid-column: 2 !important;
grid-row: 1 !important;
display: grid !important;
grid-template-rows: 35px 19px minmax(0,1fr) 39px !important;
min-width: 0 !important;
padding: 9px 11px 8px !important;
direction: rtl !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-title {
grid-row: 1 !important;
min-height: 0 !important;
margin: 0 !important;
overflow: hidden !important;
color: var(--tl-products-text) !important;
font-size: var(--tl-type-200) !important;
font-weight: 900 !important;
line-height: 1.55 !important;
text-align: right !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
display: block !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-meta {
grid-row: 2 !important;
min-height: 16px !important;
margin: 0 !important;
align-items: center !important;
justify-content: flex-start !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-brand {
display: none !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-stock.out {
min-height: 18px !important;
padding: 2px 6px !important;
border-radius: 999px !important;
font-size: var(--tl-type-100) !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-code,
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-min-order-note {
display: none !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-rating {
grid-row: 2 !important;
align-self: center !important;
justify-self: start !important;
min-height: 15px !important;
margin: 0 !important;
gap: 3px !important;
color: var(--tl-products-muted) !important;
font-size: var(--tl-type-100) !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-rating__star {
color: #f4b51f !important;
font-size: var(--tl-type-200) !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-rating strong {
color: #3a5578 !important;
font-size: var(--tl-type-100) !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .price-row {
grid-row: 4 !important;
display: grid !important;
grid-template-columns: minmax(0,1fr) auto !important;
align-items: end !important;
gap: 8px !important;
height: 39px !important;
min-height: 39px !important;
margin: 0 !important;
padding: 3px 0 0 !important;
direction: ltr !important;
border-top: 1px solid rgba(57,96,145,.085) !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .price-row > .product-price-stack {
position: static !important;
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start !important;
align-self: end !important;
inline-size: auto !important;
min-inline-size: 0 !important;
min-height: 33px !important;
grid-template-rows: 12px 21px !important;
justify-items: start !important;
direction: rtl !important;
transform: none !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .old-price {
inline-size: auto !important;
min-height: 12px !important;
color: #9aa8ba !important;
font-size: var(--tl-type-100) !important;
line-height: 12px !important;
text-align: right !important;
text-decoration-thickness: 1px !important;
white-space: nowrap !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .current-price {
inline-size: auto !important;
min-inline-size: 0 !important;
min-height: 21px !important;
justify-content: flex-start !important;
gap: 4px !important;
color: #173f72 !important;
font-size: var(--tl-type-400) !important;
font-weight: 950 !important;
line-height: 21px !important;
direction: rtl !important;
white-space: nowrap !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .current-price small {
color: var(--tl-products-muted) !important;
font-size: var(--tl-type-100) !important;
font-weight: 750 !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .price-row > :is(.product-card-cart-form, .product-card-add, .product-card-stock-alert-form) {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: end !important;
align-self: end !important;
direction: rtl !important;
width: auto !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-add {
min-width: 82px !important;
width: auto !important;
min-height: 31px !important;
height: 31px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
padding: 0 11px !important;
border: 1px solid rgba(20,79,132,.34) !important;
border-radius: 10px !important;
color: #fff !important;
background: linear-gradient(145deg, #17598e, #0b3c6a) !important;
box-shadow: 0 7px 16px rgba(11,60,106,.19) !important;
font-size: var(--tl-type-100) !important;
font-weight: 900 !important;
line-height: 1 !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-add > span {
font-size: var(--tl-type-700) !important;
font-weight: 500 !important;
line-height: 1 !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-cart-form.is-added .product-card-add {
color: #148158 !important;
border-color: rgba(25,168,107,.42) !important;
background: rgba(229,248,239,.93) !important;
box-shadow: none !important;
}
/* The existing calculation already outputs the real discount percentage. */
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-badges {
top: 5px !important;
right: auto !important;
left: 5px !important;
z-index: 5 !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-badge.discount-badge {
min-height: 21px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 3px 8px !important;
border: 1px solid rgba(255,255,255,.66) !important;
border-radius: 999px !important;
color: #fff !important;
background: linear-gradient(135deg, var(--tl-products-discount-a), var(--tl-products-discount-b)) !important;
box-shadow: 0 8px 16px rgba(255,82,57,.21) !important;
font-size: var(--tl-type-100) !important;
font-weight: 950 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.storefront-body.products-route .catalog-lazy-sentinel {
color: var(--tl-products-muted) !important;
font-size: var(--tl-type-100) !important;
}
}
/* ---------- Dark mobile catalogue ---------- */
@media (max-width: 840px) {
html[data-theme="dark"] body.storefront-body.products-route {
--tl-products-card: rgba(9,23,43,.96);
--tl-products-card-soft: rgba(8,20,38,.98);
--tl-products-line: rgba(96,141,201,.22);
--tl-products-line-strong: rgba(82,143,220,.34);
--tl-products-text: #f1f6ff;
--tl-products-muted: #96a9c5;
--tl-products-shadow: 0 12px 28px rgba(0,0,0,.23);
--tl-products-float-shadow: 0 20px 48px rgba(0,0,0,.38);
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-floating-glass {
border-color: var(--tl-products-line-strong) !important;
background:
linear-gradient(145deg, rgba(9,23,43,.94), rgba(7,18,35,.92)) !important;
box-shadow: var(--tl-products-float-shadow) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-floating-search {
border-color: var(--tl-products-line) !important;
background: rgba(14,33,59,.88) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-floating-search > svg {
stroke: #9badc7 !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-floating-search input {
color: #eff5ff !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-floating-search input::placeholder {
color: #879ab6 !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools button {
color: #dbe7f8 !important;
border-color: var(--tl-products-line) !important;
background: rgba(17,37,65,.68) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-floating-glass .catalog-mobile-tools button.is-active {
color: #fff !important;
border-color: rgba(28,112,255,.55) !important;
background: linear-gradient(145deg, #0e5fd6, #063d9d) !important;
box-shadow: 0 9px 20px rgba(0,82,220,.25) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-discovery-form.is-open {
border-color: var(--tl-products-line-strong) !important;
background:
linear-gradient(150deg, rgba(10,26,48,.98), rgba(6,18,35,.98)) !important;
box-shadow: 0 22px 54px rgba(0,0,0,.42) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-direct-option span,
html[data-theme="dark"] body.storefront-body.products-route .catalog-quick-check,
html[data-theme="dark"] body.storefront-body.products-route .catalog-sort-row,
html[data-theme="dark"] body.storefront-body.products-route details.catalog-attribute-filter {
color: #dce7f6 !important;
border-color: var(--tl-products-line) !important;
background: rgba(15,34,60,.72) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.028) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-direct-option span::before {
color: #8299b9 !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-direct-option.is-selected span,
html[data-theme="dark"] body.storefront-body.products-route .catalog-direct-option input:checked + span {
color: #fff !important;
border-color: rgba(31,119,255,.56) !important;
background: linear-gradient(145deg, #0e5fd6, #063d9d) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-direct-option.is-selected span::before,
html[data-theme="dark"] body.storefront-body.products-route .catalog-direct-option input:checked + span::before {
color: rgba(255,255,255,.82) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-quick-check:has(input:checked) {
border-color: rgba(34,126,255,.42) !important;
background: rgba(10,73,152,.28) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-sort-caption,
html[data-theme="dark"] body.storefront-body.products-route .catalog-specialized-filter-head span {
color: #8fa3bf !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-sort-trigger,
html[data-theme="dark"] body.storefront-body.products-route details.catalog-attribute-filter > summary {
color: #e6eef9 !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-sort-menu {
border-color: var(--tl-products-line-strong) !important;
background: #0d213c !important;
box-shadow: 0 18px 38px rgba(0,0,0,.38) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-sort-option {
color: #d9e5f5 !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-attribute-value {
color: #ccd9ea !important;
border-color: rgba(100,142,198,.16) !important;
background: rgba(255,255,255,.025) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-apply-filters {
border-color: rgba(31,119,255,.56) !important;
background: linear-gradient(145deg, #0e5fd6, #063d9d) !important;
box-shadow: 0 9px 20px rgba(0,82,220,.22) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-clear-filters {
color: #d5e1f1 !important;
border-color: var(--tl-products-line) !important;
background: rgba(17,37,65,.62) !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card {
border-color: var(--tl-products-line) !important;
background:
radial-gradient(circle at 7% 8%, rgba(26,103,255,.08), transparent 31%),
linear-gradient(180deg, var(--tl-products-card), var(--tl-products-card-soft)) !important;
box-shadow: var(--tl-products-shadow) !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-image {
border-left-color: rgba(100,141,195,.13) !important;
background:
radial-gradient(circle at 50% 43%, #172a45 0%, #10233d 62%, #0c1d34 100%) !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-image::after {
background: rgba(0,0,0,.34) !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-title {
color: #f1f6ff !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-rating {
color: #9baec9 !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-rating strong {
color: #dce7f6 !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .price-row {
border-top-color: rgba(96,141,201,.13) !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .old-price {
color: #7186a4 !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .current-price {
color: #eaf3ff !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .current-price small {
color: #95a8c3 !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-add {
color: #fff !important;
border-color: rgba(31,119,255,.55) !important;
background: linear-gradient(145deg, #0e67ee, #0648bf) !important;
box-shadow: 0 8px 18px rgba(0,78,211,.24) !important;
}
html[data-theme="dark"] body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-cart-form.is-added .product-card-add {
color: #57e7a8 !important;
border-color: rgba(25,181,112,.46) !important;
background: rgba(8,65,44,.46) !important;
box-shadow: none !important;
}
}
@media (max-width: 390px) {
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card {
grid-template-columns: 96px minmax(0,1fr) !important;
min-height: 108px !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-image {
width: 96px !important;
height: 108px !important;
min-height: 108px !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-body {
grid-template-rows: 33px 18px minmax(0,1fr) 37px !important;
padding: 8px 9px 7px !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-title {
font-size: var(--tl-type-100) !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-card-add {
min-width: 76px !important;
padding-inline: 9px !important;
}
}
/* Desktop stays on the established layout; only component polish is shared. */
@media (min-width: 841px) {
body.storefront-body.products-route .product-card {
border-color: rgba(47,98,157,.12) !important;
background:
radial-gradient(circle at 12% 8%, rgba(33,111,205,.04), transparent 30%),
var(--tl-color-surface) !important;
box-shadow: 0 14px 34px rgba(18,43,78,.065) !important;
}
body.storefront-body.products-route .discount-badge {
color: #fff !important;
background: linear-gradient(135deg, #ff7655, #ff4d37) !important;
}
}
/* === TL_PRODUCTS_V1_END === */
/* === TL_PRODUCTS_V3_START ===
TehranLight Products Final Price/Badge Position Fix
Hard override for mobile product cards.
=== */
@media (max-width: 840px) {
/* Force the bottom action row to place price on the image side (left) and CTA on the outer side (right). */
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .price-row {
display: flex !important;
flex-direction: row !important;
direction: ltr !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 12px !important;
width: 100% !important;
padding-top: 6px !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .price-row > .product-price-stack {
order: 1 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 auto 0 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-end !important;
align-self: flex-end !important;
text-align: left !important;
direction: ltr !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .price-row > :is(.product-card-cart-form, .product-card-add, .product-card-stock-alert-form) {
order: 2 !important;
flex: 0 0 auto !important;
margin: 0 0 0 auto !important;
align-self: flex-end !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .old-price,
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .current-price {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
width: auto !important;
min-width: 0 !important;
text-align: left !important;
direction: ltr !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .old-price {
font-size: var(--tl-type-100) !important;
line-height: 1.15 !important;
margin-bottom: 2px !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .current-price {
font-size: var(--tl-type-400) !important;
font-weight: 950 !important;
line-height: 1.1 !important;
gap: 4px !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-main .product-price-stack .current-price small {
order: 2 !important;
}
/* Put the discount badge at the exact north-west corner of the image area. */
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) :is(.product-media, .catalog-media, .catalog-thumb, .product-card-media, .product-card-thumb, .catalog-figure, .product-image-wrap, .product-thumb-wrap) {
position: relative !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) :is(.product-media, .catalog-media, .catalog-thumb, .product-card-media, .product-card-thumb, .catalog-figure, .product-image-wrap, .product-thumb-wrap) .product-badges {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: auto !important;
bottom: auto !important;
z-index: 5 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
padding: 0 !important;
margin: 0 !important;
transform: translate(-8px, -8px) !important;
pointer-events: none !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) :is(.product-media, .catalog-media, .catalog-thumb, .product-card-media, .product-card-thumb, .catalog-figure, .product-image-wrap, .product-thumb-wrap) .product-badge.discount-badge {
min-height: 22px !important;
padding: 4px 10px !important;
border-radius: 999px !important;
font-size: var(--tl-type-100) !important;
font-weight: 950 !important;
line-height: 1 !important;
}
/* Fallback if badge wrapper is attached to the card instead of the image wrapper. */
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-card,
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .product-card {
position: relative !important;
}
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .catalog-card > .product-badges,
body.storefront-body.products-route :is(.mobile-product-cards-list, .mobile-product-cards-grid) .product-card > .product-badges {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
z-index: 5 !important;
transform: none !important;
margin: 0 !important;
pointer-events: none !important;
}
}
/* === TL_PRODUCTS_V3_END === */
/* === TL_HOME_MOBILE_V2_START ===
TehranLight mobile home redesign — approved graphical direction.
Desktop home remains untouched.
=== */
.tl-home-mobile {
display: none;
}
@media (max-width: 840px) {
body.home-route {
--tl-home-navy: #0f213a;
--tl-home-navy-2: #15385e;
--tl-home-blue: #216de8;
--tl-home-blue-soft: #e9f2ff;
--tl-home-gold: #ffb515;
--tl-home-text: #14243a;
--tl-home-muted: #7c8899;
--tl-home-line: rgba(30, 61, 103, .10);
--tl-home-card: rgba(255,255,255,.92);
--tl-home-shadow: 0 12px 34px rgba(26, 54, 91, .10);
}
body.home-route > .site-header {
display: none !important;
}
body.home-route #main-content {
width: 100%;
padding: 0 !important;
margin: 0 !important;
}
body.home-route #main-content > .hero,
body.home-route #main-content > .section {
display: none !important;
}
body.home-route .site-footer {
display: none !important;
}
.tl-home-mobile {
display: block;
width: min(100%, 560px);
margin: 0 auto;
padding:
calc(14px + env(safe-area-inset-top, 0px))
14px
calc(92px + env(safe-area-inset-bottom, 0px));
color: var(--tl-home-text);
direction: rtl;
}
.tl-home-mobile *,
.tl-home-mobile *::before,
.tl-home-mobile *::after {
box-sizing: border-box;
}
.tl-home-mobile a {
color: inherit;
text-decoration: none;
}
.tl-home-mobile__top {
min-height: 58px;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.tl-home-mobile__menu,
.tl-home-mobile__support {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid rgba(28, 59, 99, .08);
border-radius: 14px;
color: #16314f;
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,253,.94));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9),
0 8px 20px rgba(21, 49, 83, .08);
position: relative;
}
.tl-home-mobile__menu {
border: 0;
cursor: pointer;
font: inherit;
}
.tl-home-mobile__menu svg,
.tl-home-mobile__support svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.tl-home-mobile__support > span {
position: absolute;
top: 8px;
right: 8px;
width: 7px;
height: 7px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--tl-home-gold);
box-shadow: 0 2px 7px rgba(255,181,21,.38);
}
.tl-home-mobile__brand {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
}
.tl-home-mobile__logo-image {
width: min(170px, 48vw);
height: 54px;
display: grid;
place-items: center;
}
.tl-home-mobile__logo-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.tl-home-mobile__logo-fallback {
width: 44px;
height: 44px;
display: grid;
place-items: center;
color: var(--tl-home-gold);
}
.tl-home-mobile__logo-fallback svg {
width: 40px;
height: 40px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.tl-home-mobile__brand-copy {
min-width: 0;
display: grid;
gap: 1px;
text-align: right;
}
.tl-home-mobile__brand-copy strong {
color: #27344c;
font-size: var(--tl-type-700);
font-weight: 950;
line-height: 1.2;
}
.tl-home-mobile__brand-copy small {
color: #5e6a7d;
font-size: var(--tl-type-100);
font-weight: 800;
letter-spacing: 2.2px;
direction: ltr;
}
.tl-home-mobile__search {
height: 56px;
display: grid;
grid-template-columns: minmax(0, 1fr) 46px;
align-items: center;
margin-bottom: 14px;
border: 1px solid rgba(34, 62, 98, .09);
border-radius: 18px;
overflow: hidden;
background: rgba(255,255,255,.93);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 10px 28px rgba(27, 53, 86, .08);
}
.tl-home-mobile__search input {
width: 100%;
min-width: 0;
height: 100%;
padding: 0 17px;
border: 0;
outline: 0;
color: #1f324d;
background: transparent;
font: inherit;
font-size: var(--tl-type-400);
font-weight: 650;
text-align: right;
}
.tl-home-mobile__search input::placeholder {
color: #a0abba;
}
.tl-home-mobile__search button {
width: 46px;
height: 100%;
display: grid;
place-items: center;
padding: 0;
border: 0;
color: #1c3556;
background: transparent;
cursor: pointer;
}
.tl-home-mobile__search svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
}
.tl-home-mobile__hero {
position: relative;
min-height: 270px;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(130px, .95fr);
gap: 6px;
overflow: hidden;
margin: 0 0 16px;
padding: 25px 18px 26px;
border: 1px solid rgba(64, 104, 150, .18);
border-radius: 25px;
color: #fff;
background:
radial-gradient(circle at 72% 26%, rgba(81, 150, 222, .25), transparent 38%),
linear-gradient(135deg, #071426 0%, #102842 55%, #153d63 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 18px 38px rgba(9, 28, 50, .20);
}
.tl-home-mobile__hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(115deg, rgba(255,255,255,.04), transparent 30%),
radial-gradient(circle at 50% 110%, rgba(255,181,21,.14), transparent 30%);
}
.tl-home-mobile__hero-copy {
position: relative;
z-index: 3;
align-self: center;
display: grid;
gap: 9px;
}
.tl-home-mobile__hero-kicker {
width: max-content;
max-width: 100%;
color: #ffbf27;
font-size: var(--tl-type-100);
font-weight: 850;
}
.tl-home-mobile__hero h1 {
margin: 0;
color: #fff;
font-size: var(--tl-type-fluid-title);
font-weight: 950;
line-height: 1.55;
letter-spacing: -.5px;
}
.tl-home-mobile__hero p {
max-width: 210px;
margin: 0;
color: rgba(239,246,255,.78);
font-size: var(--tl-type-200);
font-weight: 650;
line-height: 1.9;
}
.tl-home-mobile__hero-copy > a {
width: max-content;
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 4px;
padding: 0 14px;
border: 1px solid rgba(255,255,255,.82);
border-radius: 12px;
color: #17375e;
background:
linear-gradient(180deg, #fff, #f0f5fb);
box-shadow: 0 9px 20px rgba(0,0,0,.16);
font-size: var(--tl-type-100);
font-weight: 900;
}
.tl-home-mobile__hero-copy > a svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.tl-home-mobile__hero-visual {
position: relative;
z-index: 2;
min-width: 0;
display: grid;
place-items: center;
}
.tl-home-mobile__hero-visual > a {
position: relative;
z-index: 2;
width: 100%;
height: 210px;
display: grid;
place-items: center;
}
.tl-home-mobile__hero-visual img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
filter:
drop-shadow(0 20px 24px rgba(0,0,0,.30))
drop-shadow(0 0 18px rgba(255,255,255,.06));
transform: scale(1.08);
}
.tl-home-mobile__hero-glow {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background: rgba(255, 197, 55, .18);
filter: blur(28px);
box-shadow: 0 0 60px rgba(255,181,21,.16);
}
.tl-home-mobile__hero-bulb {
width: 120px;
height: 120px;
display: grid;
place-items: center;
border-radius: 50%;
color: #ffd056;
background:
radial-gradient(circle, rgba(255,255,255,.14), transparent 68%);
}
.tl-home-mobile__hero-bulb svg {
width: 90px;
height: 90px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 9px 14px rgba(255,181,21,.18));
}
.tl-home-mobile__hero-dot {
position: absolute;
bottom: 14px;
left: calc(50% - 19px);
z-index: 4;
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(255,255,255,.26);
}
.tl-home-mobile__hero-dot:nth-last-of-type(3) { transform: translateX(11px); }
.tl-home-mobile__hero-dot:nth-last-of-type(2) { transform: translateX(22px); }
.tl-home-mobile__hero-dot:nth-last-of-type(1) { transform: translateX(33px); }
.tl-home-mobile__hero-dot.is-active {
width: 20px;
background: var(--tl-home-gold);
box-shadow: 0 0 12px rgba(255,181,21,.32);
}
.tl-home-mobile__categories {
display: grid;
grid-template-columns: repeat(5, minmax(78px, 1fr));
gap: 9px;
margin: 0 -2px 16px;
padding: 2px 2px 4px;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.tl-home-mobile__categories::-webkit-scrollbar {
display: none;
}
.tl-home-mobile__categories > a {
min-width: 78px;
min-height: 106px;
display: grid;
grid-template-rows: 70px auto;
gap: 6px;
align-items: center;
justify-items: center;
padding: 8px 5px;
border: 1px solid var(--tl-home-line);
border-radius: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.94));
box-shadow: 0 8px 22px rgba(31, 58, 94, .08);
scroll-snap-align: start;
}
.tl-home-mobile__category-media {
width: 66px;
height: 66px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 15px;
background:
radial-gradient(circle at 50% 35%, #fff 0%, #f5f8fc 68%, #eef3f9 100%);
}
.tl-home-mobile__category-media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 5px;
}
.tl-home-mobile__category-media svg {
width: 31px;
height: 31px;
fill: none;
stroke: #55708f;
stroke-width: 1.7;
}
.tl-home-mobile__categories strong {
width: 100%;
overflow: hidden;
color: #27364c;
font-size: var(--tl-type-100);
font-weight: 850;
line-height: 1.55;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.tl-home-mobile__benefits {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: 16px;
padding: 15px 6px;
border: 1px solid var(--tl-home-line);
border-radius: 22px;
background: var(--tl-home-card);
box-shadow: var(--tl-home-shadow);
}
.tl-home-mobile__benefits article {
min-width: 0;
display: grid;
justify-items: center;
gap: 4px;
padding: 0 5px;
text-align: center;
position: relative;
}
.tl-home-mobile__benefits article:not(:last-child)::after {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
left: 0;
width: 1px;
background: rgba(26, 58, 99, .08);
}
.tl-home-mobile__benefits article > span {
width: 37px;
height: 37px;
display: grid;
place-items: center;
margin-bottom: 2px;
border-radius: 50%;
color: #286edb;
background:
radial-gradient(circle at 35% 30%, #fff 0%, #eef5ff 70%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
0 7px 16px rgba(33,109,232,.10);
}
.tl-home-mobile__benefits svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.tl-home-mobile__benefits strong {
color: #1d2d45;
font-size: var(--tl-type-100);
font-weight: 900;
line-height: 1.45;
}
.tl-home-mobile__benefits small {
color: #9aa4b2;
font-size: var(--tl-type-100);
font-weight: 650;
line-height: 1.4;
}
.tl-home-mobile__promos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px;
margin-bottom: 18px;
}
.tl-home-mobile__promo {
position: relative;
min-height: 154px;
display: grid;
grid-template-columns: minmax(0, 1fr) 46%;
gap: 3px;
overflow: hidden;
padding: 15px 12px;
border: 1px solid rgba(255,255,255,.5);
border-radius: 20px;
box-shadow: 0 12px 28px rgba(35, 66, 106, .10);
}
.tl-home-mobile__promo.is-blue {
color: #163d83;
background:
radial-gradient(circle at 88% 20%, rgba(255,255,255,.56), transparent 26%),
linear-gradient(135deg, #eef8ff, #a6c9ff 55%, #75a2f3);
}
.tl-home-mobile__promo.is-gold {
color: #573a04;
background:
radial-gradient(circle at 88% 18%, rgba(255,255,255,.58), transparent 25%),
linear-gradient(135deg, #fff8d8, #ffd978 58%, #ffbf39);
}
.tl-home-mobile__promo-copy {
position: relative;
z-index: 2;
align-self: center;
display: grid;
gap: 4px;
}
.tl-home-mobile__promo-copy small {
font-size: var(--tl-type-100);
font-weight: 800;
}
.tl-home-mobile__promo-copy strong {
font-size: var(--tl-type-400);
font-weight: 950;
line-height: 1.55;
}
.tl-home-mobile__promo-copy b {
width: max-content;
min-height: 29px;
display: inline-flex;
align-items: center;
margin-top: 6px;
padding: 0 10px;
border-radius: 9px;
color: #fff;
background: rgba(19, 70, 151, .82);
box-shadow: 0 7px 14px rgba(26,79,156,.15);
font-size: var(--tl-type-100);
font-weight: 900;
}
.tl-home-mobile__promo.is-gold .tl-home-mobile__promo-copy b {
color: #583900;
background: rgba(255,255,255,.52);
}
.tl-home-mobile__promo-media {
position: relative;
z-index: 1;
display: grid;
place-items: center;
align-self: stretch;
}
.tl-home-mobile__promo-media img {
width: 110%;
height: 112px;
object-fit: contain;
filter: drop-shadow(0 13px 16px rgba(19, 47, 87, .16));
}
.tl-home-mobile__promo-media svg {
width: 74px;
height: 74px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .72;
}
.tl-home-mobile__featured {
margin-bottom: 4px;
}
.tl-home-mobile__section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 0 2px 10px;
}
.tl-home-mobile__section-head h2 {
margin: 0;
color: #17283f;
font-size: var(--tl-type-700);
font-weight: 950;
line-height: 1.3;
}
.tl-home-mobile__section-head a {
display: inline-flex;
align-items: center;
gap: 5px;
color: #2769cf;
font-size: var(--tl-type-100);
font-weight: 850;
}
.tl-home-mobile__section-head svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.tl-home-mobile__product-strip {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 155px;
gap: 10px;
overflow-x: auto;
padding: 2px 2px 10px;
margin: 0 -2px;
scrollbar-width: none;
scroll-snap-type: x proximity;
direction: rtl;
}
.tl-home-mobile__product-strip::-webkit-scrollbar {
display: none;
}
.tl-home-mobile__mini-product {
min-width: 0;
display: grid;
grid-template-rows: 116px auto auto auto;
gap: 5px;
padding: 9px;
border: 1px solid var(--tl-home-line);
border-radius: 18px;
background: rgba(255,255,255,.94);
box-shadow: 0 9px 24px rgba(31, 58, 94, .08);
scroll-snap-align: start;
}
.tl-home-mobile__mini-media {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 14px;
background:
radial-gradient(circle at 50% 35%, #fff 0%, #f8fafc 65%, #eef3f8 100%);
}
.tl-home-mobile__mini-media img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
}
.tl-home-mobile__mini-media > svg {
width: 48px;
height: 48px;
fill: none;
stroke: #8191a5;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.tl-home-mobile__mini-discount {
position: absolute;
top: 6px;
left: 6px;
min-height: 21px;
display: inline-flex;
align-items: center;
padding: 0 7px;
border-radius: 999px;
color: #fff;
background:
linear-gradient(145deg, #ff8064, #f04f3e);
box-shadow: 0 6px 14px rgba(240,79,62,.18);
font-size: var(--tl-type-100);
font-weight: 950;
}
.tl-home-mobile__mini-rating {
display: inline-flex;
align-items: center;
gap: 3px;
color: #526079;
font-size: var(--tl-type-100);
font-weight: 800;
direction: ltr;
justify-self: end;
}
.tl-home-mobile__mini-rating svg {
width: 12px;
height: 12px;
fill: #ffb515;
stroke: #ffb515;
stroke-width: 1;
}
.tl-home-mobile__mini-product > strong {
min-height: 34px;
overflow: hidden;
color: #202f45;
font-size: var(--tl-type-100);
font-weight: 850;
line-height: 1.75;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.tl-home-mobile__mini-price {
display: inline-flex;
align-items: baseline;
gap: 4px;
color: #154c98;
font-size: var(--tl-type-200);
font-weight: 950;
direction: ltr;
justify-self: start;
}
.tl-home-mobile__mini-price small {
color: #7b899c;
font-size: var(--tl-type-100);
font-weight: 750;
}
html[data-theme="dark"] body.home-route {
--tl-home-text: #edf5ff;
--tl-home-muted: #9cacc1;
--tl-home-line: rgba(138,169,208,.14);
--tl-home-card: rgba(11,27,48,.91);
--tl-home-shadow: 0 14px 36px rgba(0,0,0,.24);
}
html[data-theme="dark"] .tl-home-mobile__menu,
html[data-theme="dark"] .tl-home-mobile__support,
html[data-theme="dark"] .tl-home-mobile__search,
html[data-theme="dark"] .tl-home-mobile__categories > a,
html[data-theme="dark"] .tl-home-mobile__mini-product {
border-color: rgba(142,171,210,.14);
background:
linear-gradient(180deg, rgba(16,36,61,.97), rgba(11,28,49,.96));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 10px 28px rgba(0,0,0,.20);
}
html[data-theme="dark"] .tl-home-mobile__menu,
html[data-theme="dark"] .tl-home-mobile__support,
html[data-theme="dark"] .tl-home-mobile__brand-copy strong,
html[data-theme="dark"] .tl-home-mobile__search input,
html[data-theme="dark"] .tl-home-mobile__categories strong,
html[data-theme="dark"] .tl-home-mobile__benefits strong,
html[data-theme="dark"] .tl-home-mobile__section-head h2,
html[data-theme="dark"] .tl-home-mobile__mini-product > strong {
color: #eef5ff;
}
html[data-theme="dark"] .tl-home-mobile__brand-copy small,
html[data-theme="dark"] .tl-home-mobile__benefits small {
color: #8ea0b7;
}
html[data-theme="dark"] .tl-home-mobile__category-media,
html[data-theme="dark"] .tl-home-mobile__mini-media {
background:
radial-gradient(circle at 50% 35%, #152b48 0%, #0e223b 68%, #0a1c31 100%);
}
html[data-theme="dark"] .tl-home-mobile__benefits article:not(:last-child)::after {
background: rgba(145,174,211,.12);
}
html[data-theme="dark"] .tl-home-mobile__benefits article > span {
color: #68a1ff;
background:
radial-gradient(circle at 35% 30%, #183b66 0%, #102a49 72%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
0 8px 18px rgba(0,0,0,.18);
}
html[data-theme="dark"] .tl-home-mobile__mini-price {
color: #78aaff;
}
html[data-theme="dark"] .tl-home-mobile__mini-price small {
color: #91a2b8;
}
}
@media (max-width: 390px) {
.tl-home-mobile {
padding-inline: 11px;
}
.tl-home-mobile__hero {
min-height: 255px;
grid-template-columns: minmax(0, 1.1fr) minmax(118px, .9fr);
padding-inline: 15px;
}
.tl-home-mobile__hero-visual > a {
height: 190px;
}
.tl-home-mobile__benefits {
padding-inline: 3px;
}
.tl-home-mobile__benefits strong {
font-size: var(--tl-type-100);
}
.tl-home-mobile__benefits small {
font-size: var(--tl-type-100);
}
.tl-home-mobile__promo {
min-height: 145px;
padding-inline: 10px;
}
.tl-home-mobile__promo-copy strong {
font-size: var(--tl-type-300);
}
.tl-home-mobile__product-strip {
grid-auto-columns: 148px;
}
}
/* === TL_HOME_MOBILE_V2_END === */
/* === TL_HOME_MOBILE_V2_POLISH_START ===
Pixel polish for the installed 1.0.33.0 mobile home.
Structural Home markup is intentionally preserved.
=== */
@media (max-width: 840px) {
/* Match approved composition: menu on physical left, notification on right. */
.tl-home-mobile__top {
min-height: 52px !important;
margin-bottom: 8px !important;
direction: ltr !important;
}
.tl-home-mobile__brand {
direction: rtl !important;
}
.tl-home-mobile__menu,
.tl-home-mobile__support {
width: 40px !important;
height: 40px !important;
border-radius: 13px !important;
}
.tl-home-mobile__logo-image {
width: min(172px, 49vw) !important;
height: 50px !important;
}
.tl-home-mobile__search {
height: 52px !important;
margin-bottom: 11px !important;
border-radius: 17px !important;
}
/* Hero follows the approved mockup: copy left, product visual right. */
.tl-home-mobile__hero {
min-height: 230px !important;
grid-template-columns: minmax(0, 1.02fr) minmax(126px, .98fr) !important;
gap: 4px !important;
margin-bottom: 13px !important;
padding: 19px 15px 22px !important;
direction: ltr !important;
}
.tl-home-mobile__hero-copy {
direction: rtl !important;
gap: 7px !important;
}
.tl-home-mobile__hero h1 {
font-size: var(--tl-type-fluid-title) !important;
line-height: 1.5 !important;
}
.tl-home-mobile__hero p {
max-width: 195px !important;
font-size: var(--tl-type-100) !important;
line-height: 1.78 !important;
}
.tl-home-mobile__hero-copy > a {
min-height: 35px !important;
padding-inline: 12px !important;
font-size: var(--tl-type-100) !important;
}
.tl-home-mobile__hero-visual {
direction: rtl !important;
}
.tl-home-mobile__hero-visual > a {
height: 182px !important;
}
.tl-home-mobile__hero-visual img {
transform: scale(1.03) !important;
}
.tl-home-mobile__hero-glow {
width: 132px !important;
height: 132px !important;
}
/* Five categories fit cleanly on a normal mobile width; no chopped one-line labels. */
.tl-home-mobile__categories {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
grid-auto-flow: initial !important;
gap: 7px !important;
margin: 0 0 13px !important;
padding: 1px !important;
overflow: visible !important;
}
.tl-home-mobile__categories > a {
min-width: 0 !important;
min-height: 92px !important;
grid-template-rows: 56px minmax(25px, auto) !important;
gap: 5px !important;
padding: 7px 4px 6px !important;
border-radius: 16px !important;
}
.tl-home-mobile__category-media {
width: 54px !important;
height: 54px !important;
border-radius: 13px !important;
}
.tl-home-mobile__category-media svg {
width: 27px !important;
height: 27px !important;
color: #3b6da7 !important;
stroke: currentColor !important;
filter: drop-shadow(0 5px 8px rgba(40, 94, 154, .10));
}
.tl-home-mobile__categories strong {
min-height: 25px !important;
display: -webkit-box !important;
overflow: hidden !important;
font-size: var(--tl-type-100) !important;
line-height: 1.55 !important;
text-align: center !important;
white-space: normal !important;
text-overflow: clip !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
}
.tl-home-mobile__benefits {
min-height: 86px !important;
margin-bottom: 13px !important;
padding: 10px 4px !important;
border-radius: 20px !important;
}
.tl-home-mobile__benefits article {
gap: 3px !important;
padding-inline: 3px !important;
}
.tl-home-mobile__benefits article > span {
width: 33px !important;
height: 33px !important;
margin-bottom: 0 !important;
}
.tl-home-mobile__benefits svg {
width: 19px !important;
height: 19px !important;
}
.tl-home-mobile__benefits strong {
font-size: var(--tl-type-100) !important;
}
.tl-home-mobile__benefits small {
font-size: var(--tl-type-100) !important;
}
/* Promo tiles stay graphical, but shorter so products appear sooner. */
.tl-home-mobile__promos {
gap: 9px !important;
margin-bottom: 14px !important;
direction: ltr !important;
}
.tl-home-mobile__promo {
min-height: 132px !important;
padding: 12px 10px !important;
border-radius: 18px !important;
direction: rtl !important;
}
.tl-home-mobile__promo-copy {
gap: 3px !important;
}
.tl-home-mobile__promo-copy small {
font-size: var(--tl-type-100) !important;
}
.tl-home-mobile__promo-copy strong {
font-size: var(--tl-type-300) !important;
line-height: 1.45 !important;
}
.tl-home-mobile__promo-copy b {
min-height: 26px !important;
margin-top: 4px !important;
padding-inline: 8px !important;
font-size: var(--tl-type-100) !important;
}
.tl-home-mobile__promo-media img {
height: 94px !important;
width: 108% !important;
}
.tl-home-mobile__promo-media svg {
width: 62px !important;
height: 62px !important;
}
.tl-home-mobile__section-head {
margin-bottom: 8px !important;
}
.tl-home-mobile__section-head h2 {
font-size: var(--tl-type-600) !important;
}
.tl-home-mobile__product-strip {
grid-auto-columns: 148px !important;
gap: 8px !important;
}
.tl-home-mobile__mini-product {
grid-template-rows: 106px auto auto auto !important;
padding: 8px !important;
border-radius: 17px !important;
}
.tl-home-mobile__mini-product > strong {
font-size: var(--tl-type-100) !important;
}
}
@media (max-width: 390px) {
.tl-home-mobile__categories {
grid-template-columns: none !important;
grid-auto-flow: column !important;
grid-auto-columns: 74px !important;
gap: 7px !important;
overflow-x: auto !important;
padding-bottom: 3px !important;
scrollbar-width: none !important;
}
.tl-home-mobile__categories::-webkit-scrollbar {
display: none !important;
}
.tl-home-mobile__hero {
min-height: 220px !important;
grid-template-columns: minmax(0, 1.06fr) minmax(112px, .94fr) !important;
padding-inline: 13px !important;
}
.tl-home-mobile__hero-visual > a {
height: 170px !important;
}
.tl-home-mobile__benefits strong {
font-size: var(--tl-type-100) !important;
}
.tl-home-mobile__benefits small {
font-size: var(--tl-type-100) !important;
}
.tl-home-mobile__promo {
min-height: 126px !important;
padding-inline: 8px !important;
}
}
/* === TL_HOME_MOBILE_V2_POLISH_END === */
/* === TL_MANAGED_HOME_START ===
Admin-managed Home Page rendering.
All content uses HomePageConfiguration; legacy home markup is no longer rendered.
=== */
.tl-managed-home-mobile{display:none}
.tl-managed-home-desktop{display:block}
.tl-managed-home-desktop__flow{display:flex;flex-direction:column}
.tl-managed-home-desktop__flow>.section,
.tl-managed-home-desktop__flow>.tl-managed-home-desktop-hero{width:100%}
.tl-managed-home-desktop-hero{
display:flex;
align-items:stretch;
overflow:hidden;
position:relative;
background:
radial-gradient(circle at 70% 35%,rgba(62,126,196,.18),transparent 34%),
linear-gradient(135deg,#08172a,#102d4b 58%,#174b77);
color:#fff
}
.tl-managed-home-desktop-hero__inner{
width:100%;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
gap:32px;
align-items:center;
padding-block:54px
}
.tl-managed-home-desktop-hero__copy{display:grid;gap:16px}
.tl-managed-home-desktop-hero__copy>span{color:#ffc13a;font-weight:850;font-size:var(--tl-type-400)}
.tl-managed-home-desktop-hero__copy h1{margin:0;color:#fff;font-size:var(--tl-type-fluid-display);line-height:1.45;font-weight:950}
.tl-managed-home-desktop-hero__copy p{max-width:650px;margin:0;color:rgba(238,246,255,.78);font-size:var(--tl-type-600);line-height:2}
.tl-managed-home-desktop-hero__copy .btn{width:max-content}
.tl-managed-home-desktop-hero__visual{min-width:0;height:100%;display:grid;place-items:center}
.tl-managed-home-desktop-hero__visual img{width:100%;height:100%;max-height:520px;object-fit:contain;filter:drop-shadow(0 28px 34px rgba(0,0,0,.32))}
.tl-managed-home-desktop-categories{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
gap:14px
}
.tl-managed-home-desktop-categories>a{
height:var(--tl-home-category-height,180px);
min-width:0;
display:grid;
grid-template-rows:minmax(0,1fr) auto;
gap:8px;
padding:14px;
overflow:hidden;
border:1px solid rgba(35,67,105,.10);
border-radius:22px;
background:linear-gradient(180deg,#fff,#f7faff);
box-shadow:0 12px 30px rgba(29,57,91,.08);
color:#1d304b;
text-decoration:none
}
.tl-managed-home-desktop-categories img{width:100%;height:100%;object-fit:contain;padding:8px}
.tl-managed-home-desktop-categories strong{font-weight:900;text-align:center}
.tl-managed-home-desktop-benefits{padding-block:18px!important}
.tl-managed-home-desktop-banners__grid{
display:grid;
grid-template-columns:repeat(var(--tl-home-banner-columns,2),minmax(0,1fr));
gap:18px
}
.tl-managed-home-banner{
min-width:0;
display:grid;
grid-template-columns:minmax(0,1fr) 44%;
gap:8px;
overflow:hidden;
position:relative;
padding:20px;
border:1px solid rgba(255,255,255,.55);
border-radius:24px;
box-shadow:0 15px 34px rgba(32,64,104,.12);
text-decoration:none
}
.tl-managed-home-banner.is-blue{
color:#143f86;
background:
radial-gradient(circle at 88% 16%,rgba(255,255,255,.62),transparent 27%),
linear-gradient(135deg,#eef8ff,#a8cbff 56%,#78a5f3)
}
.tl-managed-home-banner.is-gold{
color:#563800;
background:
radial-gradient(circle at 88% 16%,rgba(255,255,255,.62),transparent 27%),
linear-gradient(135deg,#fff9dc,#ffdb7b 58%,#ffc33f)
}
.tl-managed-home-banner.is-navy{
color:#fff;
background:
radial-gradient(circle at 84% 20%,rgba(66,139,213,.22),transparent 30%),
linear-gradient(135deg,#081629,#0f3152 58%,#174f80)
}
.tl-managed-home-banner.is-neutral{
color:#24364f;
background:linear-gradient(135deg,#f7f9fc,#e8eef6)
}
.tl-managed-home-banner__copy{display:grid;align-content:center;gap:7px;position:relative;z-index:2}
.tl-managed-home-banner__copy small{font-size:var(--tl-type-200);font-weight:800;opacity:.78}
.tl-managed-home-banner__copy strong{font-size:var(--tl-type-fluid-title);font-weight:950;line-height:1.45}
.tl-managed-home-banner__copy p{margin:0;font-size:var(--tl-type-300);line-height:1.8;opacity:.78}
.tl-managed-home-banner__copy b{
width:max-content;
min-height:34px;
display:inline-flex;
align-items:center;
margin-top:4px;
padding:0 12px;
border-radius:10px;
background:rgba(18,69,151,.85);
color:#fff;
font-size:var(--tl-type-100);
font-weight:900
}
.tl-managed-home-banner.is-gold .tl-managed-home-banner__copy b{background:rgba(255,255,255,.55);color:#5b3a00}
.tl-managed-home-banner.is-navy .tl-managed-home-banner__copy b{background:#fff;color:#173b63}
.tl-managed-home-banner__media{display:grid;place-items:center;position:relative;z-index:1;min-width:0}
.tl-managed-home-banner__media img{width:110%;height:100%;max-height:210px;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(24,52,88,.18))}
.tl-managed-home-banner__media svg{width:74px;height:74px;fill:none;stroke:currentColor;stroke-width:1.7;opacity:.65}
@media(max-width:840px){
body.home-route{
overflow-x:hidden;
}
body.home-route>.site-header,
body.home-route>.site-footer{display:none!important}
body.home-route #main-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
.tl-managed-home-desktop{display:none!important}
.tl-managed-home-mobile{
display:block!important;
width:min(100%,560px);
margin:0 auto;
padding:
calc(11px + env(safe-area-inset-top,0px))
13px
calc(92px + env(safe-area-inset-bottom,0px));
color:#172940;
direction:rtl
}
.tl-managed-home-mobile *,
.tl-managed-home-mobile *::before,
.tl-managed-home-mobile *::after{box-sizing:border-box}
.tl-managed-home-mobile a{color:inherit;text-decoration:none}
.tl-managed-home-mobile__top{
min-height:52px;
display:grid;
grid-template-columns:42px minmax(0,1fr) 42px;
gap:10px;
align-items:center;
margin-bottom:9px;
direction:ltr
}
.tl-managed-home-mobile__action{
width:40px;height:40px;display:grid;place-items:center;position:relative;
padding:0;border:1px solid rgba(29,60,98,.09);border-radius:13px;
color:#173552;background:linear-gradient(180deg,#fff,#f4f8fd);
box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(24,52,86,.08);cursor:pointer
}
.tl-managed-home-mobile__action svg{
width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round
}
.tl-managed-home-mobile__support i{
position:absolute;top:6px;right:6px;width:8px;height:8px;border:2px solid #fff;border-radius:50%;
background:#ffb515;box-shadow:0 3px 8px rgba(255,181,21,.34)
}
.tl-managed-home-brand{
min-width:0;height:50px;display:flex;align-items:center;justify-content:center;overflow:hidden;direction:rtl
}
.tl-managed-home-brand img{display:block;width:min(174px,49vw);height:49px;object-fit:contain}
.tl-managed-home-brand strong{font-size:var(--tl-type-800);font-weight:950;color:#223650}
.tl-managed-home-search{
height:52px;display:grid;grid-template-columns:minmax(0,1fr) 47px;align-items:center;
margin-bottom:11px;overflow:hidden;border:1px solid rgba(31,61,99,.09);border-radius:17px;
background:rgba(255,255,255,.96);box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(25,52,86,.07)
}
.tl-managed-home-search input{
width:100%;height:100%;min-width:0;padding:0 16px;border:0;outline:0;background:transparent;
color:#20344f;font:inherit;font-size:var(--tl-type-400);font-weight:650;text-align:right
}
.tl-managed-home-search input::placeholder{color:#a0abba}
.tl-managed-home-search button{
width:47px;height:100%;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#1c3859;cursor:pointer
}
.tl-managed-home-search button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.tl-managed-home-flow{display:flex;flex-direction:column;gap:0}
.tl-managed-home-hero{
display:grid;grid-template-columns:minmax(0,1.02fr) minmax(126px,.98fr);gap:4px;
overflow:hidden;position:relative;margin-bottom:13px;padding:19px 15px 22px;
border:1px solid rgba(86,137,193,.20);border-radius:25px;color:#fff;direction:ltr;
background:
radial-gradient(circle at 72% 24%,rgba(90,160,229,.25),transparent 38%),
linear-gradient(135deg,#071426,#102943 57%,#17456f);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 37px rgba(9,28,50,.18)
}
.tl-managed-home-hero__copy{align-self:center;display:grid;gap:7px;position:relative;z-index:3;direction:rtl}
.tl-managed-home-hero__copy>span{width:max-content;max-width:100%;color:#ffc13a;font-size:var(--tl-type-100);font-weight:850}
.tl-managed-home-hero__copy h1{margin:0;color:#fff;font-size:var(--tl-type-fluid-title);font-weight:950;line-height:1.5}
.tl-managed-home-hero__copy p{max-width:195px;margin:0;color:rgba(239,246,255,.79);font-size:var(--tl-type-100);font-weight:650;line-height:1.78}
.tl-managed-home-hero__copy>a{
width:max-content;min-height:35px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
margin-top:3px;padding:0 12px;border:1px solid rgba(255,255,255,.78);border-radius:11px;
color:#17375e;background:linear-gradient(180deg,#fff,#eef4fa);box-shadow:0 9px 19px rgba(0,0,0,.15);
font-size:var(--tl-type-100);font-weight:900
}
.tl-managed-home-hero__copy>a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tl-managed-home-hero__visual{min-width:0;display:grid;place-items:center;position:relative;z-index:2;direction:rtl}
.tl-managed-home-hero__visual>i{position:absolute;width:132px;height:132px;border-radius:50%;background:rgba(255,196,58,.17);filter:blur(28px)}
.tl-managed-home-hero__visual img{display:block;width:100%;height:100%;max-height:210px;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 20px 23px rgba(0,0,0,.30))}
.tl-managed-home-hero__fallback{width:88px;height:88px;fill:none;stroke:#ffd25b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2}
.tl-managed-home-section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:0 2px 8px}
.tl-managed-home-section-head>div{min-width:0}
.tl-managed-home-section-head span{display:block;color:#8090a5;font-size:var(--tl-type-100);font-weight:800;margin-bottom:2px}
.tl-managed-home-section-head h2{margin:0;color:#17283f;font-size:var(--tl-type-600);font-weight:950;line-height:1.4}
.tl-managed-home-section-head>a{flex:0 0 auto;color:#2769cf;font-size:var(--tl-type-100);font-weight:850}
.tl-managed-home-categories{margin-bottom:13px}
.tl-managed-home-categories__strip{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px
}
.tl-managed-home-categories__strip>a{
min-width:0;height:var(--tl-home-category-height,92px);display:grid;grid-template-rows:minmax(0,1fr) auto;
gap:4px;padding:6px 4px;border:1px solid rgba(31,61,99,.09);border-radius:16px;
background:linear-gradient(180deg,#fff,#f7faff);box-shadow:0 8px 19px rgba(31,58,94,.07)
}
.tl-managed-home-categories__strip>a>span{min-height:0;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:radial-gradient(circle at 50% 34%,#fff,#f3f7fb 72%)}
.tl-managed-home-categories__strip img{width:100%;height:100%;object-fit:contain;padding:4px}
.tl-managed-home-categories__strip svg{width:26px;height:26px;fill:none;stroke:#3b6da7;stroke-width:1.7}
.tl-managed-home-categories__strip strong{
min-height:25px;display:-webkit-box;overflow:hidden;color:#27364c;font-size:var(--tl-type-100);font-weight:850;line-height:1.5;
text-align:center;-webkit-box-orient:vertical;-webkit-line-clamp:2
}
.tl-managed-home-benefits{
display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));margin-bottom:13px;padding:10px 4px;
border:1px solid rgba(31,61,99,.09);border-radius:20px;background:rgba(255,255,255,.94);box-shadow:0 11px 28px rgba(25,52,88,.08)
}
.tl-managed-home-benefits article{min-width:0;display:grid;justify-items:center;gap:3px;padding:0 3px;position:relative;text-align:center}
.tl-managed-home-benefits article:not(:last-child)::after{content:"";position:absolute;top:7px;bottom:7px;left:0;width:1px;background:rgba(26,58,99,.08)}
.tl-managed-home-benefits article>span{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;color:#286edb;background:radial-gradient(circle at 35% 30%,#fff,#eef5ff 72%);box-shadow:0 7px 15px rgba(33,109,232,.09)}
.tl-managed-home-benefits svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tl-managed-home-benefits strong{font-size:var(--tl-type-100);font-weight:900;color:#1d2d45;line-height:1.4}
.tl-managed-home-benefits small{font-size:var(--tl-type-100);font-weight:650;color:#9aa4b2;line-height:1.35}
.tl-managed-home-banners{
display:grid;grid-template-columns:repeat(var(--tl-home-banner-columns,2),minmax(0,1fr));
gap:9px;margin-bottom:14px
}
.tl-managed-home-banner{padding:11px 9px;border-radius:18px;grid-template-columns:minmax(0,1fr) 43%;box-shadow:0 11px 26px rgba(35,66,106,.10)}
.tl-managed-home-banner__copy{gap:3px}
.tl-managed-home-banner__copy small{font-size:var(--tl-type-100)}
.tl-managed-home-banner__copy strong{font-size:var(--tl-type-300);line-height:1.45}
.tl-managed-home-banner__copy p{font-size:var(--tl-type-100);line-height:1.55}
.tl-managed-home-banner__copy b{min-height:26px;padding:0 8px;border-radius:8px;font-size:var(--tl-type-100)}
.tl-managed-home-banner__media img{height:100%;max-height:98px;width:108%;object-fit:contain}
.tl-managed-home-banner__media svg{width:58px;height:58px}
.tl-managed-home-products{margin-bottom:13px}
.tl-managed-home-products__strip{
display:grid;grid-auto-flow:column;grid-auto-columns:148px;gap:8px;overflow-x:auto;padding:2px 2px 8px;
margin:0 -2px;direction:rtl;scrollbar-width:none;scroll-snap-type:x proximity
}
.tl-managed-home-products__strip::-webkit-scrollbar{display:none}
.tl-managed-home-product{
min-width:0;display:grid;grid-template-rows:106px auto auto auto;gap:5px;padding:8px;
border:1px solid rgba(31,61,99,.09);border-radius:17px;background:rgba(255,255,255,.95);
box-shadow:0 9px 22px rgba(31,58,94,.075);scroll-snap-align:start
}
.tl-managed-home-product__media{display:grid;place-items:center;position:relative;overflow:hidden;border-radius:13px;background:radial-gradient(circle at 50% 34%,#fff,#f3f7fb 72%)}
.tl-managed-home-product__media img{width:100%;height:100%;object-fit:contain;padding:5px}
.tl-managed-home-product__media svg{width:43px;height:43px;fill:none;stroke:#8191a5;stroke-width:1.7}
.tl-managed-home-product__media>b{position:absolute;top:5px;left:5px;min-height:20px;display:inline-flex;align-items:center;padding:0 6px;border-radius:999px;color:#fff;background:linear-gradient(145deg,#ff8064,#f04f3e);font-size:var(--tl-type-100);font-weight:950}
.tl-managed-home-product__rating{justify-self:end;color:#59677b;font-size:var(--tl-type-100);font-weight:800;direction:ltr}
.tl-managed-home-product>strong{min-height:32px;display:-webkit-box;overflow:hidden;color:#202f45;font-size:var(--tl-type-100);font-weight:850;line-height:1.7;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.tl-managed-home-product__price{display:inline-flex;align-items:baseline;gap:4px;justify-self:start;color:#154c98;font-size:var(--tl-type-200);font-weight:950;direction:ltr}
.tl-managed-home-product__price small{color:#7b899c;font-size:var(--tl-type-100);font-weight:750}
.tl-managed-home-brands{margin-bottom:13px}
.tl-managed-home-brands__strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.tl-managed-home-brands__strip::-webkit-scrollbar{display:none}
.tl-managed-home-brands__strip>a{min-width:105px;min-height:58px;display:flex;align-items:center;justify-content:center;gap:5px;padding:7px;border:1px solid rgba(31,61,99,.09);border-radius:14px;background:#fff}
.tl-managed-home-brands__strip img{width:34px;height:34px;object-fit:contain}
.tl-managed-home-brands__strip span{font-size:var(--tl-type-100);font-weight:850;color:#27364c}
html[data-theme="dark"] .tl-managed-home-mobile{color:#edf5ff}
html[data-theme="dark"] .tl-managed-home-mobile__action,
html[data-theme="dark"] .tl-managed-home-search,
html[data-theme="dark"] .tl-managed-home-categories__strip>a,
html[data-theme="dark"] .tl-managed-home-product,
html[data-theme="dark"] .tl-managed-home-brands__strip>a{
border-color:rgba(142,171,210,.14);
background:linear-gradient(180deg,rgba(16,36,61,.98),rgba(11,28,49,.97));
box-shadow:0 10px 25px rgba(0,0,0,.19)
}
html[data-theme="dark"] .tl-managed-home-mobile__action,
html[data-theme="dark"] .tl-managed-home-search input,
html[data-theme="dark"] .tl-managed-home-section-head h2,
html[data-theme="dark"] .tl-managed-home-categories__strip strong,
html[data-theme="dark"] .tl-managed-home-benefits strong,
html[data-theme="dark"] .tl-managed-home-product>strong,
html[data-theme="dark"] .tl-managed-home-brands__strip span{color:#eef5ff}
html[data-theme="dark"] .tl-managed-home-benefits{border-color:rgba(142,171,210,.14);background:rgba(11,27,48,.92);box-shadow:0 12px 28px rgba(0,0,0,.20)}
html[data-theme="dark"] .tl-managed-home-categories__strip>a>span,
html[data-theme="dark"] .tl-managed-home-product__media{background:radial-gradient(circle at 50% 34%,#152b48,#0e223b 72%)}
html[data-theme="dark"] .tl-managed-home-product__price{color:#78aaff}
}
@media(max-width:390px){
.tl-managed-home-mobile{padding-inline:10px}
.tl-managed-home-categories__strip{
grid-template-columns:none;
grid-auto-flow:column;
grid-auto-columns:74px;
overflow-x:auto;
scrollbar-width:none
}
.tl-managed-home-banners[style*="--tl-home-banner-columns:2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:841px) and (max-width:1100px){
.tl-managed-home-desktop-hero__inner{grid-template-columns:1fr 420px}
.tl-managed-home-desktop-banners__grid{grid-template-columns:repeat(min(var(--tl-home-banner-columns,2),2),minmax(0,1fr))}
}
/* === TL_MANAGED_HOME_END === */
/* === TL_CATALOG_CATEGORY_BRAND_LANDING_START === */
.catalog-context-landing{
display:grid;
gap:12px;
margin:16px 0 24px;
}
.catalog-context-landing__media{
position:relative;
width:100%;
aspect-ratio:3 / 1;
overflow:hidden;
border:1px solid rgba(28,58,91,.10);
border-radius:22px;
background:
radial-gradient(circle at 80% 20%,rgba(255,181,21,.10),transparent 34%),
linear-gradient(145deg,#f8fafc,#eef3f8);
box-shadow:0 14px 34px rgba(29,58,92,.08);
}
.catalog-context-landing__media img{
display:block;
width:100%;
height:100%;
object-fit:contain;
object-position:center;
}
.catalog-context-landing__badge{
position:absolute;
top:14px;
right:14px;
min-height:30px;
display:inline-flex;
align-items:center;
padding:0 11px;
border:1px solid rgba(255,255,255,.66);
border-radius:999px;
color:#173552;
background:rgba(255,255,255,.78);
box-shadow:0 7px 18px rgba(20,45,75,.09);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
font-size:var(--tl-type-100);
font-weight:900;
}
.catalog-context-landing__copy{
padding:17px 19px;
border:1px solid rgba(28,58,91,.09);
border-radius:17px;
background:rgba(255,255,255,.88);
box-shadow:0 9px 24px rgba(29,58,92,.055);
}
.catalog-context-landing__copy>span{
display:block;
margin-bottom:3px;
color:#3173c8;
font-size:var(--tl-type-100);
font-weight:900;
}
.catalog-context-landing__copy h2{
margin:0;
color:#162c45;
font-size:var(--tl-type-800);
font-weight:950;
line-height:1.55;
}
.catalog-context-landing__copy p{
max-width:1100px;
margin:7px 0 0;
color:#5d6e82;
font-size:var(--tl-type-400);
font-weight:600;
line-height:2;
white-space:pre-line;
}
html[data-theme="dark"] .catalog-context-landing__media{
border-color:rgba(141,171,207,.12);
background:
radial-gradient(circle at 80% 20%,rgba(255,181,21,.08),transparent 34%),
linear-gradient(145deg,#10233a,#0c1b2e);
box-shadow:0 16px 38px rgba(0,0,0,.24);
}
html[data-theme="dark"] .catalog-context-landing__badge{
border-color:rgba(173,197,225,.15);
color:#edf5ff;
background:rgba(10,27,47,.78);
}
html[data-theme="dark"] .catalog-context-landing__copy{
border-color:rgba(141,171,207,.12);
background:rgba(11,28,49,.90);
}
html[data-theme="dark"] .catalog-context-landing__copy h2{
color:#f0f6ff;
}
html[data-theme="dark"] .catalog-context-landing__copy p{
color:#9bacbf;
}
@media(max-width:840px){
.catalog-context-landing{
gap:9px;
margin:12px 0 18px;
}
.catalog-context-landing__media{
border-radius:15px;
box-shadow:0 10px 25px rgba(29,58,92,.08);
}
.catalog-context-landing__badge{
top:8px;
right:8px;
min-height:25px;
padding-inline:8px;
font-size:var(--tl-type-100);
}
.catalog-context-landing__copy{
padding:12px 13px;
border-radius:14px;
}
.catalog-context-landing__copy h2{
font-size:var(--tl-type-600);
}
.catalog-context-landing__copy p{
margin-top:5px;
font-size:var(--tl-type-200);
line-height:1.9;
}
}
/* === TL_CATALOG_CATEGORY_BRAND_LANDING_END === */
/* =========================================================
DESKTOP PRODUCT CARD POLISH — 2026-09-03 v1
Scope: desktop catalog only. Mobile (<=840px), account/wishlist,
cart and product-detail cards intentionally remain untouched.
========================================================= */
@media (min-width: 841px) {
/* Give the product media a square rail and keep the entire source image visible. */
body.storefront-body.products-route .catalog-main .product-card .product-image {
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-image img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
padding: 9px !important;
object-fit: contain !important;
object-position: center !important;
transform: none !important;
}
body.storefront-body.products-route .catalog-main .product-card:hover .product-image img {
transform: none !important;
}
/* Desktop body becomes a controlled grid so code + review metadata share one line
while price/action stay pinned to the card bottom. */
body.storefront-body.products-route .catalog-main .product-card .product-body {
min-width: 0 !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows: auto auto auto auto minmax(0, 1fr) auto !important;
column-gap: 10px !important;
row-gap: 0 !important;
align-content: stretch !important;
padding: 16px 17px 17px !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-card-meta {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-title {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
}
/* Product code: approximately twice the previous desktop size, safely ellipsized. */
body.storefront-body.products-route .catalog-main .product-card .product-code {
grid-column: 1 !important;
grid-row: 3 !important;
align-self: center !important;
min-width: 0 !important;
min-height: 24px !important;
margin: 4px 0 0 !important;
overflow: hidden !important;
color: var(--muted) !important;
font-size: var(--tl-type-500) !important;
font-weight: 650 !important;
line-height: 24px !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Rating/reviews occupy the same metadata row as product code. */
body.storefront-body.products-route .catalog-main .product-card .product-card-rating {
grid-column: 2 !important;
grid-row: 3 !important;
align-self: center !important;
justify-self: end !important;
min-height: 24px !important;
margin: 4px 0 0 !important;
gap: 4px !important;
font-size: var(--tl-type-200) !important;
line-height: 24px !important;
white-space: nowrap !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-card-rating__star {
font-size: var(--tl-type-600) !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-card-rating strong {
font-size: var(--tl-type-400) !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-card-rating__count {
font-size: var(--tl-type-200) !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-min-order-note {
grid-column: 1 / -1 !important;
grid-row: 4 !important;
}
/* Discount badge is 25% larger than the previous desktop catalog badge. */
body.storefront-body.products-route .catalog-main .product-card .product-badges {
top: 6px !important;
right: auto !important;
left: 6px !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-badge.discount-badge,
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .product-badge.discount-badge {
min-height: 25px !important;
padding: 4px 9px !important;
border-radius: 11px !important;
font-size: var(--tl-type-200) !important;
line-height: 1 !important;
}
/* Price gets its own row. Cart add/added action is no longer beside price. */
body.storefront-body.products-route .catalog-main .product-card .price-row {
grid-column: 1 / -1 !important;
grid-row: 6 !important;
min-width: 0 !important;
min-height: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto 48px !important;
align-items: end !important;
justify-items: stretch !important;
gap: 9px !important;
margin: 0 !important;
padding: 10px 0 0 !important;
overflow: visible !important;
}
body.storefront-body.products-route .catalog-main .product-card .price-row > .product-price-stack {
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: stretch !important;
align-self: end !important;
}
/* Only the real add-to-cart form is changed: no variant/stock-alert behavior is touched. */
body.storefront-body.products-route .catalog-main .product-card .price-row > .product-card-cart-form {
grid-column: 1 !important;
grid-row: 2 !important;
align-self: end !important;
justify-self: stretch !important;
width: calc(100% + 34px) !important;
min-width: 0 !important;
height: 48px !important;
min-height: 48px !important;
margin: 0 -17px -17px !important;
}
body.storefront-body.products-route .catalog-main .product-card .price-row > .product-card-cart-form .product-card-add {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 48px !important;
min-height: 48px !important;
padding: 0 16px !important;
flex-wrap: nowrap !important;
gap: 8px !important;
border-radius: 0 0 22px 22px !important;
font-size: var(--tl-type-400) !important;
font-weight: 900 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.storefront-body.products-route .catalog-main .product-card .price-row > .product-card-cart-form .product-card-add > span {
flex: 0 0 auto !important;
font-size: var(--tl-type-700) !important;
line-height: 1 !important;
}
}
/* =========================================================
DESKTOP PRODUCT CARD COMPRESSION / PRICE POLISH — 2026-09-03 v2
Scope: desktop catalog only. Mobile (<=840px) remains untouched.
========================================================= */
@media (min-width: 841px) {
body.storefront-body.products-route .catalog-main .product-card {
position: relative !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-image {
aspect-ratio: 1 / 0.88 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
margin-bottom: 0 !important;
padding: 34px 8px 4px !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-image img {
padding: 0 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-body {
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
column-gap: 10px !important;
row-gap: 2px !important;
padding: 10px 16px 16px !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-card-meta {
margin: 0 !important;
min-height: 0 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-card-meta:empty {
display: none !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-title {
margin: 0 !important;
min-height: 0 !important;
line-height: 1.58 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-code {
margin: 2px 0 0 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-card-rating {
margin: 2px 0 0 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-min-order-note {
position: absolute !important;
top: 8px !important;
right: 10px !important;
grid-column: auto !important;
grid-row: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 25px !important;
padding: 4px 10px !important;
border-radius: 11px !important;
border: 1px solid rgba(32, 91, 157, .18) !important;
background: rgba(42, 109, 184, .08) !important;
color: #2d6db8 !important;
font-size: var(--tl-type-200) !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap !important;
z-index: 3 !important;
margin: 0 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-min-order-note strong {
color: #194f86 !important;
font-size: var(--tl-type-300) !important;
font-weight: 900 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-badges {
top: 8px !important;
left: 10px !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-badge.discount-badge,
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .product-badge.discount-badge {
min-height: 25px !important;
}
body.storefront-body.products-route .catalog-main .product-card .price-row {
grid-row: 5 !important;
gap: 7px !important;
padding-top: 8px !important;
}
body.storefront-body.products-route .catalog-main .product-card .price-row > .product-price-stack {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
direction: rtl !important;
gap: 12px !important;
width: 100% !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .old-price {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: right !important;
direction: rtl !important;
min-width: 0 !important;
margin: 0 !important;
color: color-mix(in srgb, var(--tl-readable-muted, #7b8aa0) 88%, #7d8da3 12%) !important;
font-size: var(--tl-type-600) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
text-decoration-thickness: 1.35px !important;
text-underline-offset: 3px !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-price-stack.single-price .old-price.price-placeholder {
display: none !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price {
display: inline-flex !important;
align-items: baseline !important;
justify-content: flex-end !important;
direction: rtl !important;
gap: 5px !important;
min-width: 0 !important;
margin-inline-start: auto !important;
text-align: left !important;
color: #1b4e83 !important;
font-weight: 900 !important;
line-height: 1 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price .price-amount {
color: #153d68 !important;
font-size: var(--tl-type-1000) !important;
font-weight: 950 !important;
line-height: 1 !important;
letter-spacing: -.02em !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price small {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 24px !important;
padding: 4px 8px !important;
border-radius: 999px !important;
background: rgba(46, 112, 186, .09) !important;
color: #2d6db8 !important;
font-size: var(--tl-type-300) !important;
font-weight: 850 !important;
line-height: 1 !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .product-min-order-note {
border-color: rgba(96, 153, 224, .22) !important;
background: rgba(67, 128, 203, .12) !important;
color: #8ebeff !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .product-min-order-note strong {
color: #b8d6ff !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price {
color: #b9d8ff !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price .price-amount {
color: #e4f0ff !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price small {
background: rgba(103, 164, 237, .14) !important;
color: #9dcbff !important;
}
}
/* =========================================================
DESKTOP PRODUCT CARD V3 COLOR TUNE 2026-09-03
Scope: desktop catalog only. Mobile remains unchanged.
========================================================= */
@media (min-width: 841px) {
html:not([data-theme="dark"]) body.storefront-body.products-route .catalog-main .product-card {
border: 1px solid rgba(34, 86, 142, .16) !important;
box-shadow: 0 10px 24px rgba(34, 86, 142, .06) !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-min-order-note {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
min-height: 28px !important;
padding: 5px 11px !important;
border-radius: 999px !important;
border: 1px solid rgba(27, 88, 157, .55) !important;
background: linear-gradient(145deg, #3f8ae0, #1c5fa8) !important;
box-shadow: 0 8px 18px rgba(25, 93, 168, .22) !important;
color: #ffffff !important;
font-size: var(--tl-type-300) !important;
font-weight: 850 !important;
line-height: 1 !important;
direction: rtl !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-min-order-note strong {
color: #ffffff !important;
font-size: var(--tl-type-400) !important;
font-weight: 950 !important;
margin: 0 2px !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .product-min-order-note {
border-color: rgba(111, 174, 255, .48) !important;
background: linear-gradient(145deg, #438ce3, #225f9f) !important;
box-shadow: 0 10px 22px rgba(14, 54, 101, .32) !important;
color: #f7fbff !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .product-min-order-note strong {
color: #ffffff !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price {
direction: ltr !important;
flex-direction: row !important;
justify-content: flex-start !important;
gap: 7px !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price small {
order: 1 !important;
margin: 0 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price .price-amount {
order: 2 !important;
}
body.storefront-body.products-route .catalog-main .product-card .price-row > .product-card-cart-form.is-added .product-card-add,
body.storefront-body.products-route .catalog-main .product-card .price-row > .product-card-cart-form[data-product-card-cart].is-added .product-card-add {
color: #ffffff !important;
border-color: #179653 !important;
background: linear-gradient(145deg, #22ad63, #168b4e) !important;
box-shadow: 0 10px 22px rgba(18, 138, 76, .25) !important;
}
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .price-row > .product-card-cart-form.is-added .product-card-add,
html[data-theme="dark"] body.storefront-body.products-route .catalog-main .product-card .price-row > .product-card-cart-form[data-product-card-cart].is-added .product-card-add {
color: #ffffff !important;
border-color: #31bf73 !important;
background: linear-gradient(145deg, #23b565, #179354) !important;
box-shadow: 0 12px 24px rgba(13, 77, 45, .34) !important;
}
}
/* === TL_MOBILE_PRODUCT_CARD_LAYOUT_FIX_V2_START ===
Restores the manager setting:
Grid = vertical cards / two columns
List = horizontal cards / one column
The setting storage and Razor class selection are already correct.
This final cascade block only repairs geometry overridden by TL_PRODUCTS_V1/V3.
=== */
@media (max-width: 840px) {
body.storefront-body.products-route .mobile-product-cards-list .catalog-main .product-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-card {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
direction: rtl !important;
min-width: 0 !important;
min-height: 0 !important;
height: 100% !important;
border-radius: 15px !important;
overflow: hidden !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-image {
position: relative !important;
display: grid !important;
place-items: center !important;
grid-column: auto !important;
grid-row: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 1 / 1 !important;
direction: rtl !important;
border: 0 !important;
border-bottom: 1px solid rgba(58,100,151,.10) !important;
border-radius: 0 !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-image::after {
inset: auto 18% 5% 18% !important;
height: 10% !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-image img {
width: 100% !important;
height: 100% !important;
padding: 8px !important;
object-fit: contain !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-body {
position: relative !important;
grid-column: auto !important;
grid-row: auto !important;
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
padding: 9px !important;
direction: rtl !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-card-meta {
grid-row: auto !important;
min-height: 18px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 5px !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-title {
grid-row: auto !important;
display: -webkit-box !important;
min-height: 42px !important;
margin: 5px 0 0 !important;
overflow: hidden !important;
font-size: var(--tl-type-100) !important;
line-height: 2.05 !important;
text-align: right !important;
white-space: normal !important;
text-overflow: clip !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-card-rating {
grid-row: auto !important;
align-self: flex-start !important;
justify-self: auto !important;
min-height: 16px !important;
margin: 2px 0 0 !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-min-order-note {
display: block !important;
margin-top: 2px !important;
font-size: var(--tl-type-100) !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .price-row {
grid-row: auto !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
align-items: end !important;
justify-items: stretch !important;
gap: 6px !important;
width: 100% !important;
height: auto !important;
min-height: 70px !important;
margin: auto 0 0 !important;
padding: 8px 0 0 !important;
direction: rtl !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .price-row > .product-price-stack {
position: static !important;
grid-column: 1 !important;
grid-row: 1 !important;
order: initial !important;
flex: none !important;
justify-self: stretch !important;
align-self: end !important;
width: 100% !important;
inline-size: 100% !important;
min-inline-size: 0 !important;
min-height: 36px !important;
margin: 0 !important;
display: grid !important;
grid-template-rows: 12px 24px !important;
justify-items: center !important;
align-content: end !important;
text-align: center !important;
direction: rtl !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-price-stack .old-price,
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-price-stack .current-price {
width: auto !important;
inline-size: auto !important;
min-width: 0 !important;
min-inline-size: 0 !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
direction: rtl !important;
justify-content: center !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .price-row > :is(.product-card-cart-form, .product-card-add, .product-card-stock-alert-form) {
grid-column: 1 !important;
grid-row: 2 !important;
order: initial !important;
justify-self: stretch !important;
align-self: stretch !important;
width: 100% !important;
margin: 0 !important;
direction: rtl !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-card-add {
width: 100% !important;
min-width: 0 !important;
height: 31px !important;
min-height: 31px !important;
padding-inline: 7px !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-card-stock-alert-form,
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-card .product-card-stock-alert {
width: 100% !important;
min-width: 0 !important;
}
body.storefront-body.products-route .mobile-product-cards-grid .catalog-main .product-badges {
top: 3px !important;
right: auto !important;
left: 3px !important;
}
}
/* === TL_MOBILE_PRODUCT_CARD_LAYOUT_FIX_V2_END === */
/* === TL_MOBILE_PRODUCT_CARD_TITLE_TYPOGRAPHY_FIX_V1_START ===
Discovery-confirmed refinement for vertical/two-column mobile product cards:
- title becomes the first content immediately below the image
- removes the old meta-row gap above the title
- forces the official TehranLight project font on the title
- strengthens title typography
Scope: mobile GRID only; LIST and desktop remain unchanged.
=== */
@media (max-width: 840px) {
body.storefront-body.products-route
.mobile-product-cards-grid
.catalog-main
.product-body {
gap: 0 !important;
padding: 6px 9px 9px !important;
}
body.storefront-body.products-route
.mobile-product-cards-grid
.catalog-main
.product-title {
order: -20 !important;
display: -webkit-box !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
font-family: var(--tehranlight-font-family) !important;
font-size: var(--tl-type-200) !important;
font-weight: 900 !important;
line-height: 1.75 !important;
color: var(--tl-products-text) !important;
text-align: right !important;
text-decoration: none !important;
white-space: normal !important;
text-overflow: clip !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
body.storefront-body.products-route
.mobile-product-cards-grid
.catalog-main
.product-card-meta {
order: -10 !important;
min-height: 0 !important;
margin: 2px 0 0 !important;
padding: 0 !important;
}
body.storefront-body.products-route
.mobile-product-cards-grid
.catalog-main
.product-code {
margin-top: 2px !important;
}
body.storefront-body.products-route
.mobile-product-cards-grid
.catalog-main
.product-card-rating {
margin-top: 2px !important;
}
html[data-theme="dark"]
body.storefront-body.products-route
.mobile-product-cards-grid
.catalog-main
.product-title {
color: #f1f6ff !important;
}
}
/* === TL_MOBILE_PRODUCT_CARD_TITLE_TYPOGRAPHY_FIX_V1_END === */
/* === TL_PRODUCT_CARD_STAR_RATING_FIX_V2_START ===
Five-star product-card rating with proportional fill per star.
Numeric "x.x از ۵" is removed; review count and accessibility label remain.
=== */
.product-card .product-card-rating {
display: inline-flex;
align-items: center;
gap: 6px;
}
.product-card .product-card-rating__stars {
display: inline-flex;
align-items: center;
gap: 1px;
direction: ltr;
line-height: 1;
}
.product-card .product-card-rating__star {
position: relative;
display: inline-block;
flex: 0 0 auto;
width: 1em;
height: 1em;
overflow: hidden;
color: #d5d9e1 !important;
font-size: 15px !important;
font-family: Arial, sans-serif;
font-weight: 400 !important;
line-height: 1 !important;
}
.product-card .product-card-rating__star::before {
content: "★";
position: absolute;
inset: 0 auto 0 0;
display: block;
width: var(--star-fill, 0%);
overflow: hidden;
color: #f5b800;
white-space: nowrap;
line-height: 1;
}
.product-card .product-card-rating__count {
font-size: var(--tl-type-200) !important;
font-weight: 600;
white-space: nowrap;
}
html[data-theme="dark"] .product-card .product-card-rating__star {
color: rgba(215, 221, 234, .35) !important;
}
html[data-theme="dark"] .product-card .product-card-rating__star::before {
color: #ffc400;
}
@media (max-width: 840px) {
body.storefront-body.products-route
.mobile-product-cards-grid
.catalog-main
.product-card-rating {
gap: 5px !important;
}
body.storefront-body.products-route
.mobile-product-cards-grid
.catalog-main
.product-card-rating__stars {
gap: 1px !important;
}
body.storefront-body.products-route
.mobile-product-cards-grid
.catalog-main
.product-card-rating__star {
font-size: 14px !important;
}
}
/* === TL_PRODUCT_CARD_STAR_RATING_FIX_V2_END === */
/* === TL_MOBILE_PRODUCT_CARD_TITLE_RESERVE_DISCOUNT_V1_START ===
Mobile grid:
- always reserves exactly two title lines so card geometry stays aligned.
- does not affect desktop/list layout.
Discount visibility:
- re-enables badge and compare price after removing the old single-price inline style.
=== */
.product-card .product-badges {
display: flex !important;
}
.product-card .product-price-stack.has-discount .old-price {
display: inline-flex !important;
}
@media (max-width: 840px) {
body.storefront-body.products-route
.mobile-product-cards-grid
.catalog-main
.product-title {
min-height: 3.5em !important;
height: 3.5em !important;
max-height: 3.5em !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
}
/* === TL_MOBILE_PRODUCT_CARD_TITLE_RESERVE_DISCOUNT_V1_END === */
/* === TL_DISCOUNT_BADGE_CANONICALIZE_V1_START ===
Canonical discount badge source of truth:
Product detail badge appearance becomes the canonical style,
and product cards reuse the same visible wording and pill design.
Rules:
- Product detail gallery/sticky: keep visible text exactly as their own markup ("تخفیف XX٪")
- Shared product cards (/products and shared home cards): render the same visible wording
- Managed-home and Home-Zone custom cards: desktop shows "تخفیف XX٪"; mobile keeps compact "XX٪" only
- No duplicate "تخفیف" on product detail
=== */
/* Canonical pill styling */
.product-card .product-badge.discount-badge.tl-discount-pill,
.tl-managed-home-product__media > b,
.tl-hz-product-media > b,
.product-gallery-mobile-discount,
.product-sticky-purchase__discount {
box-sizing: border-box !important;
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
width: auto !important;
min-width: 0 !important;
max-width: max-content !important;
min-height: 28px !important;
height: 28px !important;
margin: 0 !important;
padding: 0 10px !important;
border: 1px solid rgba(255,255,255,.14) !important;
border-radius: 999px !important;
background: #e93f3a !important;
background-image: none !important;
box-shadow: 0 5px 13px rgba(233,63,58,.24) !important;
color: #fff !important;
font-family: var(--tehranlight-font-family) !important;
font-size: 12px !important;
font-weight: 900 !important;
font-style: normal !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-decoration: none !important;
white-space: nowrap !important;
direction: rtl !important;
unicode-bidi: isolate !important;
}
/* Normalize children where markup already contains multiple nodes */
.product-card .product-badge.discount-badge.tl-discount-pill > *,
.product-gallery-mobile-discount > *,
.product-sticky-purchase__discount > * {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
color: inherit !important;
font: inherit !important;
line-height: 1 !important;
text-decoration: none !important;
}
.product-card .product-badge.discount-badge.tl-discount-pill > bdi,
.product-gallery-mobile-discount bdi,
.product-sticky-purchase__discount bdi {
direction: ltr !important;
unicode-bidi: isolate !important;
}
/* Home custom cards still get a visible label on wider layouts */
.tl-managed-home-product__media > b::before,
.tl-hz-product-media > b::before {
content: "تخفیف";
display: inline-block;
flex: 0 0 auto;
margin: 0 0 0 1px;
color: inherit;
font: inherit;
line-height: 1;
}
/* Shared card placement */
.product-card .product-badges {
z-index: 20 !important;
top: 8px !important;
right: auto !important;
left: 8px !important;
gap: 0 !important;
}
/* Managed home / home-zone placement */
.tl-managed-home-product__media,
.tl-hz-product-media {
position: relative;
}
.tl-managed-home-product__media > b,
.tl-hz-product-media > b {
position: absolute !important;
z-index: 20 !important;
top: 8px !important;
right: auto !important;
left: 8px !important;
}
/* Product detail gallery placement */
.gallery-main > .product-gallery-mobile-discount {
position: absolute !important;
z-index: 20 !important;
top: 14px !important;
right: auto !important;
left: 14px !important;
}
.product-gallery-mobile-discount[hidden],
.product-sticky-purchase__discount[hidden] {
display: none !important;
}
html[data-theme="dark"] .product-card .product-badge.discount-badge.tl-discount-pill,
html[data-theme="dark"] .tl-managed-home-product__media > b,
html[data-theme="dark"] .tl-hz-product-media > b,
html[data-theme="dark"] .product-gallery-mobile-discount,
html[data-theme="dark"] .product-sticky-purchase__discount {
background: #e93f3a !important;
background-image: none !important;
color: #fff !important;
border-color: rgba(255,255,255,.14) !important;
box-shadow: 0 5px 13px rgba(233,63,58,.24) !important;
}
@media (max-width: 840px) {
/* Product cards keep the canonical detail-page pill */
body.storefront-body.products-route
:is(.mobile-product-cards-list, .mobile-product-cards-grid)
.catalog-main
.product-card
.product-badge.discount-badge.tl-discount-pill {
min-height: 28px !important;
height: 28px !important;
padding: 0 10px !important;
border-radius: 999px !important;
background: #e93f3a !important;
color: #fff !important;
font-family: var(--tehranlight-font-family) !important;
font-size: 12px !important;
font-weight: 900 !important;
}
body.storefront-body.products-route
:is(.mobile-product-cards-list, .mobile-product-cards-grid)
.catalog-main
.product-card
.product-badges {
top: 8px !important;
right: auto !important;
left: 8px !important;
}
.gallery-main > .product-gallery-mobile-discount {
top: 10px !important;
left: 10px !important;
}
/* Home mobile cards remain compact to avoid collisions */
.tl-managed-home-product__media > b::before,
.tl-hz-product-media > b::before {
content: none !important;
display: none !important;
}
.tl-managed-home-product__media > b,
.tl-hz-product-media > b {
gap: 0 !important;
padding-inline: 8px !important;
min-width: 0 !important;
}
}
/* === TL_DISCOUNT_BADGE_CANONICALIZE_V1_END === */
/* === TL_PRODUCT_CARD_PRICE_TYPOGRAPHY_FIX_V1_START ===
Product card price typography:
- light mode: official dark blue + strong weight
- dark mode: white
- right aligned / RTL
Scope: product cards only
=== */
.product-card .price-row {
direction: rtl !important;
}
.product-card .product-price-stack {
width: 100% !important;
direction: rtl !important;
text-align: right !important;
align-items: flex-end !important;
justify-items: end !important;
}
.product-card .product-price-stack .current-price,
.product-card .product-price-stack .current-price > *,
.product-card .price-row .current-price,
.product-card .price-row .current-price > * {
color: #173F69 !important;
font-family: var(--tehranlight-font-family) !important;
font-weight: 900 !important;
text-align: right !important;
direction: rtl !important;
justify-content: flex-end !important;
}
.product-card .product-price-stack .current-price {
width: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
}
.product-card .product-price-stack .old-price {
text-align: right !important;
justify-content: flex-end !important;
}
html[data-theme="dark"] .product-card .product-price-stack .current-price,
html[data-theme="dark"] .product-card .product-price-stack .current-price > *,
html[data-theme="dark"] .product-card .price-row .current-price,
html[data-theme="dark"] .product-card .price-row .current-price > * {
color: #ffffff !important;
}
@media (max-width: 840px) {
body.storefront-body.products-route
:is(.mobile-product-cards-list, .mobile-product-cards-grid)
.catalog-main
.product-card
.product-price-stack,
body.storefront-body.products-route
:is(.mobile-product-cards-list, .mobile-product-cards-grid)
.catalog-main
.product-card
.current-price {
text-align: right !important;
justify-content: flex-end !important;
}
}
/* === TL_PRODUCT_CARD_PRICE_TYPOGRAPHY_FIX_V1_END === */
/* === TL_PRODUCTS_CARD_PRICE_RIGHT_ALIGN_FIX_V2_START ===
/products product cards:
- current price aligned to the visual right edge
- amount + currency use the same official blue in light mode
- amount + currency become white in dark mode
- overrides older mobile GRID centering rules
=== */
body.storefront-body.products-route .catalog-main .product-card .product-price-stack {
width: 100% !important;
inline-size: 100% !important;
justify-items: stretch !important;
align-items: stretch !important;
text-align: right !important;
direction: rtl !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price {
box-sizing: border-box !important;
width: 100% !important;
inline-size: 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
/* In RTL, flex-start is the right side. */
justify-content: flex-start !important;
justify-self: stretch !important;
gap: 4px !important;
margin: 0 !important;
padding: 0 !important;
direction: rtl !important;
text-align: right !important;
color: #173F69 !important;
font-family: var(--tehranlight-font-family) !important;
font-weight: 900 !important;
}
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price > *,
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price small,
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price span,
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price bdi,
body.storefront-body.products-route .catalog-main .product-card .product-price-stack .current-price strong {
color: #173F69 !important;
font-family: var(--tehranlight-font-family) !important;
font-weight: 900 !important;
line-height: inherit !important;
}
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price > *,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price small,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price span,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price bdi,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price strong {
color: #FFFFFF !important;
}
@media (max-width: 840px) {
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack {
justify-items: stretch !important;
text-align: right !important;
direction: rtl !important;
}
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.product-price-stack
.current-price {
width: 100% !important;
inline-size: 100% !important;
justify-content: flex-start !important;
justify-self: stretch !important;
text-align: right !important;
direction: rtl !important;
}
}
/* === TL_PRODUCTS_CARD_PRICE_RIGHT_ALIGN_FIX_V2_END === */
/* === TL_PRODUCTS_CARD_PRICE_BLOCK_ALIGN_V5_START ===
Hard alignment fix for /products cards.
Avoids flex-direction / RTL ambiguity entirely:
- current price is a full-width BLOCK
- children are inline
- text-align:right controls the visual edge
- amount + currency share the exact same color/weight
=== */
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack {
width: 100% !important;
inline-size: 100% !important;
min-width: 0 !important;
justify-items: stretch !important;
text-align: right !important;
direction: rtl !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
inline-size: 100% !important;
min-width: 0 !important;
min-inline-size: 0 !important;
margin: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-inline: 0 !important;
padding: 0 !important;
text-align: right !important;
direction: rtl !important;
color: #173F69 !important;
font-family: var(--tehranlight-font-family) !important;
font-weight: 900 !important;
line-height: 1.2 !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount,
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small {
display: inline !important;
float: none !important;
position: static !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: #173F69 !important;
font-family: var(--tehranlight-font-family) !important;
font-weight: 900 !important;
line-height: inherit !important;
vertical-align: baseline !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount {
direction: ltr !important;
unicode-bidi: isolate !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small {
direction: rtl !important;
unicode-bidi: isolate !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.old-price {
display: block !important;
width: 100% !important;
inline-size: 100% !important;
margin: 0 !important;
text-align: right !important;
direction: rtl !important;
}
@media (max-width: 840px) {
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack {
width: 100% !important;
inline-size: 100% !important;
justify-items: stretch !important;
text-align: right !important;
direction: rtl !important;
}
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack
.current-price {
display: block !important;
width: 100% !important;
inline-size: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
direction: rtl !important;
}
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack
.current-price
:is(.price-amount, small) {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
color: #173F69 !important;
font-weight: 900 !important;
}
}
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small {
color: #FFFFFF !important;
}
/* === TL_PRODUCTS_CARD_PRICE_BLOCK_ALIGN_V5_END === */
/* === TL_PRODUCTS_CARD_PRICE_VISUAL_ORDER_V6_START ===
/products cards:
- keep the current price cluster at the visual right edge
- force the visual order to: [amount][currency]
- because the HTML source order is currencyamount,
we use an LTR inline formatting context on the full-width block, right-aligned.
Result:
- amount sits on the right
- currency sits immediately to the left of the amount
=== */
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack {
width: 100% !important;
inline-size: 100% !important;
min-width: 0 !important;
justify-items: stretch !important;
text-align: right !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
inline-size: 100% !important;
min-width: 0 !important;
min-inline-size: 0 !important;
margin: 0 !important;
padding: 0 !important;
/* Critical fix:
LTR makes the DOM order render as small ثم amount from left to right,
and text-align:right pushes the whole cluster to the right edge. */
direction: ltr !important;
text-align: right !important;
unicode-bidi: isolate !important;
color: #173F69 !important;
font-family: var(--tehranlight-font-family) !important;
font-weight: 900 !important;
line-height: 1.2 !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small,
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount {
display: inline !important;
float: none !important;
position: static !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: #173F69 !important;
font-family: var(--tehranlight-font-family) !important;
font-weight: 900 !important;
line-height: inherit !important;
vertical-align: baseline !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small {
direction: rtl !important;
unicode-bidi: isolate !important;
margin-left: 4px !important;
margin-right: 0 !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount {
direction: ltr !important;
unicode-bidi: isolate !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.old-price {
display: block !important;
width: 100% !important;
inline-size: 100% !important;
margin: 0 !important;
text-align: right !important;
direction: rtl !important;
}
@media (max-width: 840px) {
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack {
width: 100% !important;
inline-size: 100% !important;
justify-items: stretch !important;
text-align: right !important;
}
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack
.current-price {
display: block !important;
width: 100% !important;
inline-size: 100% !important;
margin: 0 !important;
padding: 0 !important;
direction: ltr !important;
text-align: right !important;
}
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack
.current-price
small,
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack
.current-price
.price-amount {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
color: #173F69 !important;
font-weight: 900 !important;
}
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack
.current-price
small {
margin-left: 4px !important;
}
}
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount {
color: #FFFFFF !important;
}
/* === TL_PRODUCTS_CARD_PRICE_VISUAL_ORDER_V6_END === */
/* === TL_PRODUCTS_CARD_PRICE_BOLD_FIX_V8_START ===
Keep the probe-confirmed v7 positioning.
Only strengthen BOTH amount and currency typography.
=== */
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount,
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small {
font-family: var(--tehranlight-font-family) !important;
font-weight: 900 !important;
font-synthesis: weight !important;
}
/* IRANSansX is used by the project; when served as a variable font,
this also forces the heaviest available weight. */
@supports (font-variation-settings: normal) {
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount,
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small {
font-variation-settings: "wght" 900 !important;
}
}
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small {
font-weight: 900 !important;
}
/* === TL_PRODUCTS_CARD_PRICE_BOLD_FIX_V8_END === */
/* === TL_PRODUCTS_CARD_DARK_PRICE_PURE_WHITE_FIX_V9_START ===
Force pure white for BOTH amount and currency on dark-mode product cards.
Keeps all existing positioning from v7/v8.
=== */
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.price-row
.product-price-stack
.current-price,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.price-row
.product-price-stack
.current-price
.price-amount,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.price-row
.product-price-stack
.current-price
small {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
opacity: 1 !important;
}
/* If any nested element or utility span is injected later, keep it white too. */
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
* {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
opacity: 1 !important;
}
/* === TL_PRODUCTS_CARD_DARK_PRICE_PURE_WHITE_FIX_V9_END === */
/* === TL_PRODUCTS_CARD_PRICE_GRIDTRACK_FIX_V7_START ===
Probe-confirmed fix:
product-price-stack is full width, but its implicit grid column collapses to content width.
Force the grid track itself to 1fr, then stretch current/old price across it.
=== */
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack {
display: grid !important;
width: 100% !important;
inline-size: 100% !important;
min-width: 0 !important;
grid-template-columns: minmax(0, 1fr) !important;
justify-content: stretch !important;
justify-items: stretch !important;
text-align: right !important;
direction: rtl !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price {
display: block !important;
grid-column: 1 / -1 !important;
justify-self: stretch !important;
width: 100% !important;
inline-size: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
direction: ltr !important;
text-align: right !important;
color: #173F69 !important;
font-family: var(--tehranlight-font-family) !important;
font-weight: 900 !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small,
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount {
display: inline !important;
float: none !important;
position: static !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: #173F69 !important;
font-family: var(--tehranlight-font-family) !important;
font-weight: 900 !important;
line-height: inherit !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small {
direction: rtl !important;
unicode-bidi: isolate !important;
margin-left: 4px !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount {
direction: ltr !important;
unicode-bidi: isolate !important;
}
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.old-price {
grid-column: 1 / -1 !important;
justify-self: stretch !important;
width: 100% !important;
inline-size: 100% !important;
margin: 0 !important;
text-align: right !important;
direction: rtl !important;
}
@media (max-width: 840px) {
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack {
display: grid !important;
width: 100% !important;
inline-size: 100% !important;
grid-template-columns: minmax(0, 1fr) !important;
justify-content: stretch !important;
justify-items: stretch !important;
place-self: end stretch !important;
text-align: right !important;
direction: rtl !important;
}
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack
.current-price {
grid-column: 1 / -1 !important;
justify-self: stretch !important;
display: block !important;
width: 100% !important;
inline-size: 100% !important;
direction: ltr !important;
text-align: right !important;
}
body.storefront-body.products-route
:is(.mobile-product-cards-grid, .mobile-product-cards-list)
.catalog-main
.product-card
.price-row > .product-price-stack
.old-price {
grid-column: 1 / -1 !important;
justify-self: stretch !important;
width: 100% !important;
inline-size: 100% !important;
text-align: right !important;
}
}
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
small,
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-main
.product-card
.product-price-stack
.current-price
.price-amount {
color: #FFFFFF !important;
}
/* === TL_PRODUCTS_CARD_PRICE_GRIDTRACK_FIX_V7_END === */
/* === TL_PRODUCTS_MOBILE_TOOLBAR_PROBEFIX_V3_START ===
Browser-probe confirmed:
1) .catalog-page still reserves 116px top padding -> useless blank area.
2) toolbar is already full viewport width, but legacy dark glass shadow survives.
3) scroll-collapse JS did not run (body collapsedClass stayed false even at ~293px).
v3 fixes those exact runtime facts.
=== */
@media (max-width: 840px) {
/* Probe: catalog-page computed padding-top = 116px. Remove the stale reservation. */
html body.storefront-body.products-route
main#main-content
.catalog-page {
padding-top: 0 !important;
}
/* Keep the actual runtime toolbar full-width, flush and non-floating. */
html body.storefront-body.products-route
.catalog-floating-glass[data-catalog-floating-tools] {
position: sticky !important;
top: 0 !important;
right: auto !important;
left: auto !important;
inset-inline: auto !important;
z-index: 60 !important;
box-sizing: border-box !important;
width: 100vw !important;
max-width: none !important;
margin-top: 0 !important;
margin-right: calc(50% - 50vw) !important;
margin-bottom: 0 !important;
margin-left: calc(50% - 50vw) !important;
padding: 8px 10px 10px !important;
gap: 7px !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: var(--storefront-page-bg, #f6f8fb) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transform: none !important;
}
html[data-theme="dark"]
body.storefront-body.products-route
.catalog-floating-glass[data-catalog-floating-tools] {
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: #151719 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html body.storefront-body.products-route
.catalog-floating-glass[data-catalog-floating-tools]
.catalog-floating-search {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
html body.storefront-body.products-route
.catalog-floating-glass[data-catalog-floating-tools]
.catalog-mobile-tools {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
max-width: none !important;
margin: 8px 0 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
max-height: 72px !important;
opacity: 1 !important;
overflow: hidden !important;
transform: translateY(0) !important;
pointer-events: auto !important;
transition:
max-height .18s ease,
opacity .15s ease,
transform .18s ease,
margin .18s ease !important;
}
/* JS writes this attribute directly on the real runtime toolbar. */
html body.storefront-body.products-route
.catalog-floating-glass[data-catalog-floating-tools][data-tl-search-only="true"] {
grid-template-rows: 48px 0 !important;
gap: 0 !important;
padding-bottom: 8px !important;
}
html body.storefront-body.products-route
.catalog-floating-glass[data-catalog-floating-tools][data-tl-search-only="true"]
.catalog-mobile-tools {
max-height: 0 !important;
height: 0 !important;
min-height: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
transform: translateY(-8px) !important;
margin-top: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
}
/* === TL_PRODUCTS_MOBILE_TOOLBAR_PROBEFIX_V3_END === */