/*
Theme Name: Agency Grow Theme
Theme URI: https://agencygrow.com
Author: Agency Grow
Author URI: https://agencygrow.com
Description: A modern FSE block theme for e-commerce
Version: 1.0.10
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.2
Text Domain: agency-grow-theme
Tags: block-theme, full-site-editing, e-commerce, rtl-language-support
*/
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
/* Global Font Application */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, .wp-block-navigation-item__content {
font-family: 'Tajawal', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* --- Variables & Grocery Palette --- */
:root {
--primary-color: #1D4ED8; /* Royal Blue */
--primary-light: #3b82f6;
--primary-hover: #1e40af;
--secondary-color: #fbc02d; /* Yellow accents */
--bg-main: #fafafa;
--bg-card: #ffffff;
--text-main: #212121;
--text-muted: #757575;
--border-color: #eeeeee;
--container-width: 1200px;
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
--radius-sm: 8px;
--radius-md: 12px;
--radius-full: 9999px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
--shadow-md: 0 4px 6px rgba(0,0,0,0.05);
--transition: all 0.2s ease;
}
/* --- Base --- */
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
color: var(--text-main);
background-color: var(--bg-main);
line-height: 1.6;
}
*, *::before, *::after {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}
a:hover {
color: var(--primary-hover);
}
/* --- Layout --- */
.container {
width: 100%;
max-width: var(--container-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
}
.site-content {
padding-bottom: var(--spacing-xl);
min-height: 70vh;
}
/* --- E-commerce Header --- */
.site-header {
background: var(--bg-card);
border-bottom: 2px solid var(--primary-color);
padding: var(--spacing-md) 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--shadow-sm);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--spacing-lg);
}
.site-title {
margin: 0;
font-size: 1.75rem;
font-weight: 800;
color: var(--primary-color);
}
.site-title a {
color: var(--primary-color);
display: flex;
align-items: center;
gap: 10px;
}
/* Faux Search Bar */
.header-search {
flex-grow: 1;
max-width: 500px;
}
.header-search input {
width: 100%;
padding: 12px 20px;
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
background: #f5f5f5;
outline: none;
}
/* Cart & Account Area */
.header-actions {
display: flex;
gap: var(--spacing-md);
align-items: center;
}
.action-btn {
display: flex;
align-items: center;
gap: 5px;
font-weight: 600;
color: var(--text-main);
}
.action-btn:hover {
color: var(--primary-color);
}
.cart-icon {
background: var(--primary-light);
color: white;
padding: 5px 12px;
border-radius: var(--radius-full);
font-weight: bold;
}
/* --- Front Page Sections --- */
.hero-banner {
margin-bottom: var(--spacing-lg);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-md);
background: var(--primary-color);
color: white;
padding: 60px 40px;
text-align: center;
}
.hero-banner h2 {
font-size: 3rem;
margin: 0;
}
/* Promo Boxes */
.promo-row {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.promo-box {
flex: 1;
background: var(--primary-light);
color: white;
padding: 20px;
border-radius: var(--radius-sm);
text-align: center;
font-weight: bold;
}
/* Category Grid */
.section-title {
text-align: center;
font-size: 1.5rem;
font-weight: 800;
margin-bottom: var(--spacing-lg);
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 50px;
height: 3px;
background: var(--primary-color);
margin: 10px auto 0;
}
.category-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
}
.category-item {
text-align: center;
}
.category-image {
background: var(--primary-light);
border-radius: var(--radius-sm);
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-sm);
padding: 10px;
transition: var(--transition);
}
.category-item:hover .category-image {
transform: translateY(-5px);
background: var(--primary-color);
}
.category-name {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-main);
}
/* Product Grid (اخترنا لكم) */
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.product-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: var(--spacing-md);
text-align: center;
position: relative;
transition: var(--transition);
}
.product-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--primary-light);
}
.product-image {
aspect-ratio: 1;
background: #f9f9f9;
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-md);
display: flex;
align-items: center;
justify-content: center;
}
.product-title {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: var(--spacing-sm);
line-height: 1.4;
height: 2.8em;
overflow: hidden;
}
.product-price {
color: var(--primary-color);
font-weight: 800;
font-size: 1.25rem;
margin-bottom: var(--spacing-md);
}
/* Add to Cart Control */
.quantity-control {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-color);
border-radius: var(--radius-full);
overflow: hidden;
margin-bottom: var(--spacing-sm);
}
.quantity-control button {
background: none;
border: none;
padding: 8px 15px;
cursor: pointer;
color: var(--text-muted);
}
.quantity-control input {
width: 40px;
text-align: center;
border: none;
font-weight: bold;
}
.add-to-cart-btn {
display: block;
width: 100%;
background: var(--primary-color);
color: white;
border: none;
padding: 10px;
border-radius: var(--radius-full);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.add-to-cart-btn:hover {
background: var(--primary-hover);
}
/* Mid Banner */
.mid-banner {
background: #e8f5e9;
border-radius: var(--radius-md);
padding: 30px;
text-align: center;
margin-bottom: var(--spacing-xl);
border: 2px dashed var(--primary-light);
color: var(--primary-hover);
font-weight: bold;
font-size: 1.5rem;
}
/* Footer Focus */
.site-footer {
background: #333333;
color: #eeeeee;
border-top: none;
}
.footer-features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-md);
padding-bottom: var(--spacing-lg);
border-bottom: 1px solid #444;
margin-bottom: var(--spacing-lg);
}
.footer-feature {
display: flex;
align-items: center;
gap: 15px;
justify-content: center;
}
.footer-feature-icon {
font-size: 2rem;
color: white;
}
.footer-widgets {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
text-align: right;
padding-bottom: var(--spacing-xl);
}
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
background: #25d366;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
z-index: 1000;
}
/* --- Simple Category Grid (Exact Match to Reference) --- */
/* Break out of narrow Gutenberg containers */
.wp-block-woocommerce-product-categories {
width: 100% !important;
max-width: 1300px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
ul.wc-block-product-categories-list {
display: grid !important;
grid-template-columns: repeat(var(--agency-mob-cols, 2), 1fr) !important;
gap: var(--agency-grid-gap, 24px) !important;
margin: 40px 0 !important;
list-style: none !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
li.wc-block-product-categories-list-item {
text-align: center !important;
margin: 0 0 25px 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
width: 100% !important;
max-width: 100% !important;
}
li.wc-block-product-categories-list-item::before,
li.wc-block-product-categories-list-item::after,
li.wc-block-product-categories-list-item a::before,
li.wc-block-product-categories-list-item a::after,
.wc-block-product-categories-list-item__image::before,
.wc-block-product-categories-list-item__image::after {
display: none !important;
border: none !important;
box-shadow: none !important;
}
/* Desktop Dynamic Slider Columns */
@media (min-width: 768px) {
ul.wc-block-product-categories-list {
grid-template-columns: repeat(var(--agency-desk-cols, 5), 1fr) !important;
}
}
li.wc-block-product-categories-list-item a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
text-decoration: none !important;
color: var(--text-main) !important;
transition: transform 0.2s ease !important;
border: none !important;
outline: none !important;
background: transparent !important;
box-shadow: none !important;
}
li.wc-block-product-categories-list-item a:hover {
transform: translateY(-5px) !important;
}
/* Force WooCommerce wrapper to stretch fully */
.wc-block-product-categories-list-item__image,
.wc-block-product-categories-list-item__image a {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
border: none !important;
outline: none !important;
background: transparent !important;
box-shadow: none !important;
}
li.wc-block-product-categories-list-item img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
border-radius: 12px !important;
box-shadow: 0 8px 16px rgba(0,0,0,0.06) !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
display: block !important;
transition: box-shadow 0.2s ease !important;
}
li.wc-block-product-categories-list-item a:hover img {
box-shadow: 0 12px 24px rgba(0,0,0,0.1) !important;
}
/* Category HTML Title (Below Image) */
span.wc-block-product-categories-list-item__name {
display: block !important;
font-weight: 600 !important;
font-size: 16px !important;
color: #444 !important;
margin-top: 5px !important;
}
/* Hide the count */
span.wc-block-product-categories-list-item-count {
display: none !important;
}
/* GUI SWICHES: Pure Hide Title Style */
.is-style-hide-title span.wc-block-product-categories-list-item__name,
ul.wc-block-product-categories-list.is-style-hide-title span.wc-block-product-categories-list-item__name {
display: none !important;
}
/* --- Agency Banner Slider Styles --- */
.agency-swiper-block {
width: 100%;
overflow: hidden;
margin: 40px 0;
padding-bottom: 40px !important; /* Space for pagination */
position: relative;
}
/* Ensure images span full width of slide and look like banners */
.agency-swiper-block .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease;
}
/* Unset WP defaults for core/image */
.agency-swiper-block .swiper-slide figure {
margin: 0;
padding: 0;
width: 100%;
}
.agency-swiper-block .swiper-slide img {
border-radius: 6px; /* Banners in screenshot don't have very round corners, maybe minor radius */
width: 100%;
height: auto;
object-fit: cover;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
display: block;
}
/* Custom Navigation Arrows */
.agency-swiper-block .swiper-button-next,
.agency-swiper-block .swiper-button-prev {
background-color: #ffffff;
width: 44px;
height: 44px;
border-radius: 50%;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
color: #1251e6; /* Blue icon color from screenshot */
top: 50%;
margin-top: -38px; /* Offset to center considering pagination padding */
}
/* Ensure arrows sit slightly off edge */
.agency-swiper-block .swiper-button-next {
right: 15px;
}
.agency-swiper-block .swiper-button-prev {
left: 15px;
}
.agency-swiper-block .swiper-button-next::after,
.agency-swiper-block .swiper-button-prev::after {
font-size: 16px;
font-weight: 900;
}
/* Custom Pagination Dots */
.agency-swiper-block .swiper-pagination {
bottom: 0 !important;
}
.agency-swiper-block .swiper-pagination-bullet {
width: 12px;
height: 12px;
background: #e0e0e0;
opacity: 1;
transition: all 0.3s ease;
border-radius: 50%;
margin: 0 6px !important;
}
.agency-swiper-block .swiper-pagination-bullet-active {
background: #1251e6;
width: 24px;
border-radius: 10px;
}
/* --- WooCommerce Alsweed Overrides --- */
.wc-block-grid__product {
background: var(--bg-card);
border: 1px solid var(--border-color) !important;
border-radius: var(--radius-md) !important;
padding: var(--spacing-md) !important;
text-align: center;
transition: var(--transition);
}
.wc-block-grid__product:hover {
box-shadow: var(--shadow-md);
border-color: var(--primary-light) !important;
transform: translateY(-2px);
}
.wc-block-grid__product-image {
background: #f9f9f9;
border-radius: var(--radius-sm);
padding: 10px;
margin-bottom: 15px;
}
.wc-block-grid__product-image img {
border-radius: var(--radius-sm);
}
.wc-block-grid__product-title {
font-weight: 700 !important;
font-size: 0.95rem !important;
line-height: 1.4 !important;
height: 2.8em;
overflow: hidden;
color: var(--text-main);
}
.wc-block-grid__product-price {
color: var(--primary-color) !important;
font-weight: 800 !important;
font-size: 1.25rem !important;
margin-bottom: var(--spacing-md);
}
.wp-block-button__link.add_to_cart_button {
border-radius: var(--radius-full) !important;
background-color: var(--primary-color) !important;
color: white !important;
font-weight: 600;
width: 100%;
text-align: center;
padding: 10px !important;
transition: var(--transition);
}
.wp-block-button__link.add_to_cart_button:hover {
background-color: var(--primary-hover) !important;
}
/* Header Icons Reset */
.header-icons-group .custom-icon-only {
color: #334155;
transition: color 0.3s ease;
}
.header-icons-group .custom-icon-only:hover {
color: #1D4ED8;
}
/* --- Header Icons Group (Matching Alsweed) --- */
.header-icons-group {
gap: 5px !important;
}
.header-icons-group a,
.header-icons-group .wp-block-search__button,
.header-icons-group .wc-block-mini-cart__button,
.header-icons-group .wc-custom-cart {
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
color: #334155 !important;
padding: 0 !important;
border: none !important;
border-radius: 50% !important;
transition: all 0.2s ease !important;
position: relative !important;
}
.header-icons-group a:hover,
.header-icons-group .wp-block-search__button:hover,
.header-icons-group .wc-block-mini-cart__button:hover,
.header-icons-group .wc-custom-cart:hover {
color: #1D4ED8 !important;
background-color: #f1f5f9 !important;
}
.header-icons-group svg,
.header-icons-group .wc-block-mini-cart__icon,
.header-icons-group .wc-custom-cart svg {
width: 22px !important;
height: 22px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 1.5 !important; /* Lighter, elegant stroke to match Salla icons */
}
.header-icons-group .wp-block-search__button svg.agency-search-icon {
width: 20px !important;
height: 20px !important;
fill: none !important;
stroke: currentColor !important;
stroke-width: 2 !important;
}
.header-icons-group .account-icon,
.header-icons-group .account-icon a {
width: 44px !important;
height: 44px !important;
}
.header-icons-group .account-icon img,
.header-icons-group img.agency-account-avatar {
width: 40px !important;
height: 40px !important;
border-radius: 9999px !important;
display: block !important;
object-fit: cover !important;
}
.header-icons-group .wc-block-mini-cart__badge,
.header-icons-group .wc-custom-cart .badge {
background-color: #F87171 !important; /* Exact Salla Red */
color: #ffffff !important;
font-size: 12px !important; /* 0.75rem */
line-height: 1 !important;
padding: 4px !important; /* 0.25rem */
border-radius: 9999px !important;
position: absolute !important;
top: -8px !important;
right: -8px !important; /* Adjust if it's too far, Salla uses right: -.375rem or left for RTL */
width: 20px !important; /* 1.25rem */
height: 20px !important; /* 1.25rem */
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Submenu Styling to match Alsweed */
/* Dropdown Container Styling */
.wp-block-navigation .wp-block-navigation__submenu-container {
background-color: #ffffff !important;
border-radius: 4px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* Soft shadow */
padding: 8px 0 !important;
border: none !important; /* Remove harsh border */
}
/* Level 3 Submenus (Sub-Sub-Menus) opening to the left in RTL */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
right: 100% !important; /* Open to the left */
left: auto !important;
top: -8px !important; /* Align exactly with the parent item */
margin-right: 2px !important; /* Tiny gap */
}
.wp-block-navigation .wp-block-navigation-item__content {
font-weight: 500 !important; /* Force normal weight, not bold */
}
/* Remove default FSE outline/border from navigation items */
.wp-block-navigation-item > .wp-block-navigation-item__content:focus,
.wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.has-child > .wp-block-navigation-item__content:focus,
.wp-block-navigation-item.has-child > .wp-block-navigation-item__content:hover,
.wp-block-navigation-submenu {
outline: none !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Text and arrow turn blue on hover, NO shifting */
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:hover span,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
color: #1D4ED8 !important;
background-color: transparent !important;
}
/* Submenu specific item styles */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding: 8px 20px !important; /* Slightly tighter padding like Salla */
color: #475569 !important;
font-weight: 400 !important; /* Lighter font than the main header */
transition: color 0.2s ease !important; /* Only transition color, not padding */
}
/* Arrow color on hover */
.wp-block-navigation-item:hover > .wp-block-navigation-item__content svg,
.wp-block-navigation-item > .wp-block-navigation-item__content:hover svg {
fill: #1D4ED8 !important;
}
/* Enforce Logo Size Limits */
.wp-block-site-logo img.custom-logo,
.custom-logo-link img {
max-width: 180px !important;
max-height: 80px !important;
height: auto !important;
width: auto !important;
object-fit: contain !important;
}
/* Header Structural Fix to match Alsweed (Logo right, Nav center, Icons left) */
.custom-main-header {
flex-wrap: nowrap !important; /* Never wrap the main 3 columns */
align-items: center !important;
}
.custom-main-header > .wp-block-group:nth-child(2) {
flex-grow: 1;
flex-shrink: 1;
width: 0; /* Important: Allows internal menu to wrap instead of pushing icons out */
display: flex;
justify-content: flex-start; /* Align menu next to logo */
padding-right: 10px; /* Reduced gap between logo and menu */
}
.custom-main-header .wp-block-navigation,
.custom-main-header .wp-block-navigation__container,
.custom-main-header .wp-block-navigation > ul {
flex-wrap: wrap !important;
justify-content: flex-start;
row-gap: 8px !important;
column-gap: 0 !important; /* Rely on item padding for horizontal spacing to ensure alignment */
margin: 0 !important;
padding: 0 !important;
}
.custom-main-header .wp-block-navigation-item {
margin: 0 !important;
}
.custom-main-header .wp-block-navigation-item__content {
padding: 10px 15px !important;
}
.custom-main-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
padding-left: 4px !important; /* Bring text very close to the arrow */
}
.custom-main-header .wp-block-navigation-submenu__toggle {
padding-right: 0 !important; /* Remove gap before the arrow */
padding-left: 15px !important; /* Maintain the outer padding */
}
/* Keep desktop dropdown menus above the homepage hero slider. */
.wp-site-blocks > header.wp-block-template-part,
.custom-main-header {
overflow: visible !important;
position: relative;
z-index: 99980 !important;
}
.custom-main-header.sticky-header {
position: sticky;
top: 0;
}
.custom-main-header > .wp-block-group,
.custom-main-header .wp-block-navigation,
.custom-main-header .wp-block-navigation__responsive-container:not(.is-menu-open),
.custom-main-header .wp-block-navigation__container,
.custom-main-header .wp-block-navigation-item.has-child {
overflow: visible !important;
}
.custom-main-header .wp-block-navigation__submenu-container {
z-index: 100010 !important;
}
.custom-main-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
z-index: 100020 !important;
}
.wp-site-blocks > .agency-swiper-block,
.agency-swiper-block {
position: relative !important;
z-index: 1 !important;
}
/* Disable selection and drag on slider images */
.is-style-agency-banner-slider img,
.agency-swiper-block img,
.swiper-slide img {
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
pointer-events: none; /* also prevents any interaction if it's just a visual slide, but let's just use drag and select to be safe, wait, if the banner is a link, pointer-events: none will break the link! So remove pointer-events */
}
.is-style-agency-banner-slider img,
.agency-swiper-block img,
.swiper-slide img {
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
/* Homepage Fixes */
.wp-block-gallery.alignfull {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
max-width: 100vw;
width: 100vw;
}
.wp-block-gallery.is-style-agency-banner-slider figure {
border-radius: 0 !important; /* Slider should have sharp edges if full width */
}
/* Footer Fixes */
.agency-grow-footer a {
transition: color 0.3s ease;
}
.agency-grow-footer a:hover {
color: #F87171 !important; /* Salla Red on hover */
}
/* Section Header Decorations */
.agency-home-block-line {
border: 2px solid #163BD2;
border-radius: 100%;
display: block;
height: 14px;
margin: 15px auto 40px auto;
position: relative;
width: 14px;
background-color: transparent;
}
.agency-home-block-line::before,
.agency-home-block-line::after {
border-top: 2px solid #163BD2;
content: "";
display: block;
position: absolute;
top: 50%;
width: 15vw;
transform: translateY(-50%);
}
.agency-home-block-line::before {
right: 100%;
margin-right: 15px;
}
.agency-home-block-line::after {
left: 100%;
margin-left: 15px;
}
/* Category Hover Zoom Effect */
.agency-hover-zoom {
overflow: hidden;
border-radius: 12px;
}
.agency-hover-zoom img {
transition: transform 0.2s ease-in-out;
}
.agency-hover-zoom:hover img {
transform: scale(1.1);
}
/* Agency Categories Carousel Specific Styles */
.agency-categories-swiper .swiper-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-bottom: 0 !important;
margin-top: 0 !important; /* Fixes WP first-child block gap difference */
}
.agency-categories-swiper .swiper-slide p {
margin-top: 15px !important;
}
.agency-categories-swiper .swiper-wrapper {
align-items: flex-start;
}
.agency-categories-swiper .swiper-button-next,
.agency-categories-swiper .swiper-button-prev {
background-color: #ffffff !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
}
.agency-categories-swiper .swiper-button-next::after,
.agency-categories-swiper .swiper-button-prev::after {
display: none !important;
}
/* RTL: next is LEFT, so use left chevron < */
.agency-categories-swiper .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-size: 18px !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* RTL: prev is RIGHT, so use right chevron > */
.agency-categories-swiper .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-size: 18px !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Hover Zoom Effect for Carousel Images (Inner Zoom Only) */
.agency-categories-swiper .swiper-slide figure.wp-block-image a {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden; /* This prevents the circle boundaries from growing */
margin: 0 auto;
}
.agency-categories-swiper .swiper-slide figure.wp-block-image a img {
width: 100%;
height: 100%;
border-radius: 0 !important; /* Remove inline border radius */
object-fit: cover;
transition: transform 0.2s ease-in-out;
display: block;
}
.agency-categories-swiper .swiper-slide:hover figure.wp-block-image a img {
transform: scale(1.15); /* Zoom inner image slightly more since bounds are fixed */
}
/* Agency Product Card V2 - Exact Salla Match */
.s-slider-block__title-right {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #e2e8f0;
margin-bottom: 30px;
position: relative;
padding-bottom: 0;
}
.s-slider-block__title-right h2 {
font-size: 20px !important;
font-weight: 700 !important;
color: #1f2937 !important;
margin: 0 !important;
padding-bottom: 10px;
border-bottom: 2px solid #1251e6;
margin-bottom: -2px; /* Pull it down over the gray border */
}
.s-slider-nav {
display: flex;
gap: 10px;
align-items: center;
padding-bottom: 10px;
}
.s-slider-nav .swiper-button-next,
.s-slider-nav .swiper-button-prev {
position: static !important;
width: 30px !important;
height: 30px !important;
margin: 0 !important;
background-color: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.s-slider-nav .swiper-button-next::after,
.s-slider-nav .swiper-button-prev::after {
display: none !important;
}
.s-slider-nav .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-size: 18px !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.s-slider-nav .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-size: 18px !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
.agency-product-card {
background: transparent;
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 100%;
}
.agency-product-card-image {
position: relative;
margin-bottom: 15px;
background-color: #f9fafb;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1; /* Make it perfectly square */
padding: 20px;
overflow: hidden;
}
.agency-product-card-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
mix-blend-mode: multiply;
}
.agency-product-badge {
position: absolute;
top: 0;
right: 0;
background-color: #e53e3e;
color: #fff;
font-size: 12px;
padding: 4px 10px;
font-weight: normal;
}
.agency-product-badge.blue {
background-color: #3182ce;
}
.agency-product-badge-diagonal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-15deg);
border: 2px solid #ef4444;
color: #ef4444;
font-size: 24px;
font-weight: 700;
padding: 5px 15px;
opacity: 0.8;
pointer-events: none;
white-space: nowrap;
}
.agency-product-title {
font-size: 14px;
font-weight: 500;
color: #111827;
margin-bottom: 8px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
padding: 0 5px;
}
.agency-product-subtitle {
font-size: 13px;
color: #6b7280;
margin-bottom: 12px;
}
.agency-product-options {
margin-bottom: 15px;
min-height: 36px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding: 0 10px;
}
.agency-product-color {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #e5e7eb;
display: inline-block;
}
.agency-product-select {
width: 100%;
padding: 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 4px;
font-size: 13px;
color: #374151;
background-color: #fff;
text-align: right;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 16px;
}
.agency-product-price {
font-size: 16px;
font-weight: 700;
color: #111827;
margin-bottom: 15px;
direction: ltr;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.agency-product-price .agency-money,
.agency-product-old-price .agency-money,
.agency-product-new-price .agency-money {
align-items: baseline;
direction: ltr;
display: inline-flex;
flex-direction: row;
gap: 0.28em;
justify-content: center;
unicode-bidi: isolate;
white-space: nowrap;
}
.agency-product-price .agency-sar-symbol,
.agency-product-old-price .agency-sar-symbol,
.agency-product-new-price .agency-sar-symbol {
display: inline-block;
flex: 0 0 auto;
height: 0.86em;
vertical-align: -0.03em;
width: 0.77em;
}
.agency-product-price-old {
text-decoration: line-through;
color: #9ca3af;
font-size: 14px;
font-weight: 400;
}
.agency-product-old-price {
display: inline-flex;
position: relative;
text-decoration: none !important;
}
.agency-product-old-price::after {
border-top: 2px solid currentColor;
content: "";
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 52%;
transform: translateY(-50%);
}
.agency-product-actions {
display: flex;
justify-content: center;
align-items: center;
direction: ltr;
flex-direction: row;
gap: 12px;
margin-top: auto;
padding-bottom: 10px;
}
.agency-product-actions .agency-product-action--cart {
order: 1;
}
.agency-product-actions .agency-product-action--view {
order: 2;
}
.agency-product-actions .agency-product-action--heart {
order: 3;
}
.agency-product-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
background: transparent;
cursor: pointer;
transition: all 0.2s ease;
}
.agency-product-btn:hover {
background-color: #0052cc !important;
border-color: #0052cc !important;
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 4px 8px rgba(0, 82, 204, 0.2);
}
.agency-product-btn svg {
width: 18px;
height: 18px;
stroke: currentColor;
fill: none;
transition: all 0.2s ease;
}
.agency-product-actions .agency-product-action--heart,
.agency-product-actions .agency-product-action--heart:hover,
.agency-product-actions .agency-product-action--heart:focus-visible {
background: #fff !important;
background-color: #fff !important;
border-color: #e5e7eb !important;
color: #6b7280 !important;
box-shadow: none !important;
}
.agency-product-actions .agency-product-action--heart.is-active,
.agency-product-actions .agency-product-action--heart.active,
.agency-product-actions .agency-product-action--heart.added,
.agency-product-actions .agency-product-action--heart.is-in-wishlist {
background: #fff !important;
background-color: #fff !important;
border-color: #e5e7eb !important;
color: #dc2626 !important;
box-shadow: none !important;
}
.agency-product-actions .agency-product-action--heart svg,
.agency-product-actions .agency-product-action--heart svg * {
fill: none !important;
stroke: currentColor !important;
}
/* Salla Product Fixes */
.agency-products-container {
position: relative !important;
left: auto !important;
transform: none !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: max(15px, calc(50vw - 710px)) !important;
padding-right: max(15px, calc(50vw - 710px)) !important;
background: #fff;
box-sizing: border-box !important;
margin-top: 30px;
overflow: hidden; /* Prevent horizontal scrollbars if 100vw includes scrollbar */
}
/* Fix title blue border to match Salla */
.s-slider-block__title-right {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #e2e8f0;
margin-bottom: 30px;
position: relative;
padding-bottom: 0 !important;
}
.s-slider-block__title-right h2 {
position: relative;
padding-bottom: 10px;
margin-bottom: -2px;
border-bottom: 2px solid #0052cc; /* Salla Blue */
color: #1f2937;
font-size: 22px;
font-weight: 700;
}
.s-slider-nav .swiper-button-next::after,
.s-slider-nav .swiper-button-prev::after {
display: none !important;
}
.s-slider-nav .swiper-button-next {
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 24px !important;
width: 32px !important;
height: 32px !important;
background-color: transparent !important;
border-radius: 50% !important;
margin-right: 0 !important;
}
.s-slider-nav .swiper-button-prev {
background-image: url('data:image/svg+xml;utf8,') !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 24px !important;
width: 32px !important;
height: 32px !important;
background-color: transparent !important;
border-radius: 50% !important;
margin-left: 10px !important;
}
.s-slider-nav .swiper-button-next:hover,
.s-slider-nav .swiper-button-prev:hover {
background-color: transparent !important;
opacity: 0.6 !important;
}
/* View All Button */
.agency-view-all-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
border: 1px solid #0052cc;
border-radius: 20px;
color: #0052cc;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.agency-view-all-btn:hover {
background-color: transparent;
opacity: 0.7;
color: #0052cc;
}
/* Tooltips */
.agency-product-btn[data-tooltip] {
position: relative;
overflow: visible !important;
}
.agency-product-btn[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #111;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
font-size: 12px;
font-family: inherit;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 100;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
pointer-events: none !important; /* PREVENT FLICKERING */
}
.agency-product-btn[data-tooltip]::after {
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: #111 transparent transparent transparent;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 100;
pointer-events: none !important; /* PREVENT FLICKERING */
}
.agency-product-btn:hover[data-tooltip]::before,
.agency-product-btn:hover[data-tooltip]::after {
opacity: 1;
visibility: visible;
}
/* Ratings */
.agency-product-rating {
display: flex;
align-items: center;
gap: 2px;
margin-bottom: 8px;
justify-content: flex-start;
}
/* Prices */
.agency-product-price-container {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 12px;
}
.agency-product-old-price {
color: #ef4444;
text-decoration: line-through;
font-size: 13px;
margin-bottom: 2px;
}
.agency-product-new-price {
display: flex;
align-items: center;
gap: 8px;
color: #333;
font-size: 16px;
font-weight: 700;
}
.agency-product-discount-badge {
background-color: #ef4444;
color: white;
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
font-weight: normal;
}
/* Select */
.agency-product-select {
width: 100%;
padding: 8px 12px;
border: 1px solid #e5e7eb;
border-radius: 6px;
background-color: #fff;
color: #374151;
font-family: inherit;
font-size: 13px;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left 10px center;
background-size: 16px;
}
.agency-product-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59,130,246,0.1);
}
/* Reviews Section */
.agency-reviews-section {
background-color: #ffffff;
background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
background-size: 20px 20px;
padding: 60px 0;
margin-top: 60px;
position: relative !important;
left: auto !important;
transform: none !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
box-sizing: border-box !important;
overflow: hidden;
}
.agency-reviews-container {
width: 100%;
max-width: 1420px;
margin: 0 auto;
padding: 0 max(15px, calc(50vw - 710px));
box-sizing: border-box;
}
.agency-review-card {
background: #fff;
border-radius: 8px;
padding: 30px;
height: 100%;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 220px;
position: relative;
border: 1px solid #f1f5f9;
}
.agency-review-quote {
position: absolute;
top: 20px;
left: 20px;
opacity: 0.5;
}
.agency-review-text {
font-size: 16px;
color: #4b5563;
line-height: 1.6;
margin-bottom: 30px;
margin-top: 20px;
text-align: right;
z-index: 1;
position: relative;
}
.agency-review-footer {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
margin-top: auto;
}
.agency-review-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #f1f5f9;
}
.agency-review-info {
text-align: right;
display: flex;
flex-direction: column;
gap: 4px;
}
.agency-review-name {
font-size: 15px;
font-weight: 700;
color: #1f2937;
margin: 0;
}
.agency-review-stars {
display: flex;
gap: 2px;
}
/* Review Arrows */
.agency-reviews-swiper { position: relative; padding: 0 40px; }
.agency-reviews-section .swiper-button-next,
.agency-reviews-section .swiper-button-prev {
width: 35px; height: 35px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 50%;
color: #4b5563;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.agency-reviews-section .swiper-button-next:after,
.agency-reviews-section .swiper-button-prev:after {
font-size: 14px;
font-weight: bold;
}
.agency-reviews-section { position: relative; }
.agency-reviews-section .swiper-button-next, .agency-reviews-section .swiper-button-prev { top: 50%; margin-top: -17px; position: absolute; z-index: 10; }
.agency-reviews-section .swiper-button-prev { left: 10px; right: auto; }
.agency-reviews-section .swiper-button-next { right: 10px; left: auto; }
/* Catalog Page / WooCommerce Archive specific background */
body.archive.woocommerce,
body.woocommerce-page,
body.woocommerce-shop,
body.archive.woocommerce .wp-site-blocks,
body.woocommerce-page .wp-site-blocks,
body.archive.woocommerce main,
body.woocommerce-page main {
background-color: #ffffff !important;
}
/* =========================================================
SALLA-LIKE CATALOG PAGE STYLES
========================================================= */
/* 1. Breadcrumbs */
.woocommerce-breadcrumb,
.wp-block-woocommerce-breadcrumbs {
font-size: 15px !important;
color: #1f2937 !important; /* Black text for current item */
padding: 10px 0 !important;
margin-bottom: 25px !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
direction: rtl !important;
}
.woocommerce-breadcrumb a,
.wp-block-woocommerce-breadcrumbs a {
color: #1251e6 !important;
text-decoration: none !important;
font-weight: 500 !important;
}
.woocommerce-breadcrumb a:hover,
.wp-block-woocommerce-breadcrumbs a:hover {
text-decoration: underline !important;
}
/* 2. Product Card "Available in Multiple Sizes" Badge */
.product-type-variable {
position: relative;
}
.product-type-variable::before {
content: "متوفر بمقاسات متعددة";
position: absolute;
top: 0;
right: 0;
background-color: #f04438; /* Salla red color */
color: white;
font-size: 12px;
padding: 4px 12px;
z-index: 10;
font-weight: 500;
}
/* Hide WooCommerce default Sale badge if it conflicts */
.product-type-variable .onsale {
display: none !important;
}
/* 3. Price Filter (Sidebar) */
.wp-block-woocommerce-price-filter {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
.wp-block-woocommerce-price-filter h3,
.wc-block-components-price-filter__title {
font-size: 18px !important;
font-weight: 700 !important;
color: #1f2937 !important;
margin-bottom: 15px !important;
text-align: right;
}
/* Custom Min/Max Inputs mimicking Salla */
.wc-block-components-price-filter__controls {
display: flex !important;
align-items: center !important;
gap: 10px !important;
background: transparent !important;
}
.wc-block-price-filter__range-input-wrapper.wc-block-components-price-filter__range-input-wrapper {
display: none !important; /* Hide the native slider completely */
}
.wc-block-components-price-filter__controls .wc-block-components-price-slider__amount {
border: 1px solid #d1d5db !important;
border-radius: 4px !important;
padding: 8px !important;
flex: 1 !important;
background: #fff !important;
}
.wc-block-components-price-filter__controls .wc-block-components-price-slider__amount input {
border: none !important;
background: transparent !important;
text-align: center !important;
font-size: 14px !important;
color: #4b5563 !important;
padding: 0 !important;
outline: none !important;
box-shadow: none !important;
}
/* Change placeholder text via pseudo-elements is tricky, we might need JS, but we can style the inputs nicely */
/* Green Submit Button */
.wc-block-components-price-slider__button {
background-color: #10b981 !important; /* Green */
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: transparent !important; /* Hide text */
position: relative !important;
border: none !important;
cursor: pointer !important;
padding: 0 !important;
min-width: 40px !important;
}
.wc-block-components-price-slider__button::after {
content: "←";
color: white !important;
font-size: 20px !important;
position: absolute !important;
}
/* Clear Filters Button */
.wc-block-components-product-filters__button {
width: 100% !important;
background: transparent !important;
border: 1px solid #d1d5db !important;
color: #6b7280 !important;
font-size: 15px !important;
padding: 10px !important;
border-radius: 6px !important;
margin-top: 20px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s !important;
}
.wc-block-components-product-filters__button:hover {
background: #f9fafb !important;
color: #1f2937 !important;
}
/* 4. Sorting Dropdown Wrapper */
.wc-block-sort-select {
position: relative !important;
}
.wc-block-sort-select select {
appearance: none !important;
background: #f3f4f6 !important;
border: 1px solid #d1d5db !important;
border-radius: 6px !important;
padding: 10px 40px 10px 15px !important;
font-size: 15px !important;
color: #1f2937 !important;
cursor: pointer !important;
width: 100% !important;
text-align: right !important;
}
.wc-block-sort-select select:focus {
border-color: #1251e6 !important;
outline: none !important;
background: #fff !important;
}
.wc-block-sort-select::after {
content: "▼";
position: absolute !important;
left: 15px !important;
top: 50% !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
font-size: 12px !important;
color: #6b7280 !important;
}
/* Salla-style Price with SAR icon replacement logic */
/* In Salla, the SAR icon is usually placed before the number */
.woocommerce-Price-currencySymbol {
display: inline-block;
margin-right: 4px;
font-weight: bold;
color: #1f2937;
}
/* =========================================================
SALLA-LIKE SINGLE PRODUCT PAGE
========================================================= */
html:has(body.single-product),
body.single-product,
body.single-product .wp-site-blocks,
body.single-product .wp-block-group.woocommerce.product,
body.single-product .woocommerce,
body.single-product main.agency-single-product-page,
body.single-product .agency-single-product-hero,
body.single-product .agency-single-gallery-column,
body.single-product .agency-single-summary-column,
body.single-product .agency-single-details-wrap,
body.single-product .agency-single-related-wrap {
background: #fff !important;
background-color: #fff !important;
background-image: none !important;
}
body.single-product main.agency-single-product-page {
direction: rtl;
padding: 28px 0 88px;
}
body.single-product .agency-single-breadcrumbs,
body.single-product .woocommerce-breadcrumb,
body.single-product .wp-block-woocommerce-breadcrumbs,
body.single-product .wp-block-breadcrumbs,
body.single-product .agency-single-product-hero,
body.single-product .agency-single-details-wrap,
body.single-product .agency-single-related-wrap {
max-width: min(1240px, calc(100vw - 112px)) !important;
width: min(1240px, calc(100vw - 112px)) !important;
}
body.single-product .agency-single-breadcrumbs,
body.single-product .woocommerce-breadcrumb,
body.single-product .wp-block-woocommerce-breadcrumbs,
body.single-product .wp-block-breadcrumbs {
color: #7b8494 !important;
direction: rtl !important;
font-size: var(--agency-single-breadcrumb-size, 14px) !important;
gap: 10px !important;
line-height: 1.8 !important;
margin: 0 auto var(--agency-single-breadcrumb-margin-bottom, 28px) !important;
padding: 0 !important;
text-align: right !important;
}
body.single-product .agency-single-breadcrumbs a,
body.single-product .woocommerce-breadcrumb a,
body.single-product .wp-block-breadcrumbs a {
color: #2f5bf2 !important;
font-weight: 600 !important;
text-decoration: none !important;
}
body.single-product .agency-single-product-hero {
align-items: flex-start !important;
direction: rtl;
display: flex !important;
gap: clamp(42px, 5.4vw, 86px) !important;
margin: 0 auto 72px !important;
}
body.single-product .agency-single-product-hero > .wp-block-column {
min-width: 0;
}
body.single-product .agency-single-gallery-column {
flex: 1 1 54% !important;
}
body.single-product .agency-single-summary-column {
display: flex;
flex: 1 1 46% !important;
flex-direction: column;
justify-content: flex-start;
max-width: 520px;
padding-top: 18px;
}
body.single-product .agency-single-gallery,
body.single-product .agency-single-gallery .woocommerce-product-gallery,
body.single-product .agency-single-gallery .wc-block-product-gallery {
margin: 0 !important;
width: 100% !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery,
body.single-product .agency-single-gallery .wc-block-product-gallery {
background: #fff;
min-height: clamp(430px, 40vw, 610px);
opacity: 1 !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery__image,
body.single-product .agency-single-gallery .wc-block-product-gallery-large-image {
align-items: center;
background: #fff;
display: flex;
justify-content: center;
min-height: clamp(430px, 40vw, 610px);
}
body.single-product .agency-single-gallery img,
body.single-product .agency-single-gallery .wp-post-image {
display: block;
height: auto !important;
margin: 0 auto !important;
max-height: clamp(390px, 37vw, 560px);
max-width: 94%;
object-fit: contain !important;
width: auto !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs {
align-items: center;
display: flex;
gap: 10px;
justify-content: center;
margin: 18px 0 0 !important;
padding: 0 !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs li {
border: 1px solid #e5e7eb;
border-radius: 8px;
height: 72px;
list-style: none;
overflow: hidden;
width: 72px;
}
body.single-product .agency-single-gallery .flex-control-thumbs img {
height: 100% !important;
max-height: none;
max-width: none;
object-fit: contain !important;
padding: 6px;
width: 100% !important;
}
body.single-product .agency-single-title {
color: #1f2937 !important;
font-size: clamp(27px, 2.45vw, 38px) !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
line-height: 1.35 !important;
margin: 0 0 12px !important;
text-align: right !important;
}
body.single-product .agency-single-rating {
color: #f5b81f !important;
margin: 0 0 14px !important;
}
body.single-product .agency-single-rating:empty {
display: none !important;
}
body.single-product .agency-single-price,
body.single-product .agency-single-price .price,
body.single-product .agency-single-price .woocommerce-Price-amount {
color: #6b7280 !important;
font-size: 27px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin: 0 0 22px !important;
text-align: right !important;
}
body.single-product .agency-single-price .woocommerce-Price-currencySymbol {
color: #5f6673 !important;
font-size: 20px !important;
font-weight: 700 !important;
margin-left: 0;
margin-right: 6px;
}
body.single-product .agency-single-summary {
color: #5b6472 !important;
font-size: 15px !important;
line-height: 1.9 !important;
margin: 0 0 18px !important;
max-width: 520px;
text-align: right !important;
}
body.single-product .agency-single-summary:empty,
body.single-product .agency-single-summary p:empty {
display: none !important;
}
body.single-product .agency-single-facts {
border-bottom: 1px solid #eef1f5;
border-top: 1px solid #eef1f5;
margin: 0 0 22px !important;
padding: 15px 0 !important;
}
body.single-product .agency-single-fact,
body.single-product .agency-single-sku,
body.single-product .agency-single-stock-indicator,
body.single-product .product_meta .sku_wrapper {
align-items: center;
color: #6b7280 !important;
display: flex;
font-size: 14px !important;
gap: 12px;
justify-content: space-between;
line-height: 1.7 !important;
margin: 0 !important;
padding: 6px 0 !important;
text-align: right !important;
}
body.single-product .agency-single-fact span,
body.single-product .agency-single-sku .wc-block-components-product-sku__label,
body.single-product .product_meta .sku_wrapper {
color: #7b8494 !important;
font-weight: 500 !important;
}
body.single-product .agency-single-fact strong,
body.single-product .agency-single-sku .wc-block-components-product-sku__value,
body.single-product .product_meta .sku {
color: #202733 !important;
font-weight: 700 !important;
}
body.single-product .agency-stock-fact,
body.single-product .agency-single-stock-indicator:empty,
body.single-product .agency-single-sku:empty {
display: none !important;
}
body.single-product.instock .agency-stock-in,
body.single-product.onbackorder .agency-stock-backorder,
body.single-product.outofstock .agency-stock-out {
display: flex !important;
}
body.single-product .agency-stock-in strong {
color: #16833a !important;
}
body.single-product .agency-stock-backorder strong {
color: #b7791f !important;
}
body.single-product .agency-stock-out strong,
body.single-product .agency-single-stock-indicator {
color: #c2410c !important;
}
body.single-product .agency-single-cart,
body.single-product .agency-single-cart form.cart {
margin: 0 0 22px !important;
}
body.single-product .agency-single-cart form.cart:not(.variations_form),
body.single-product .agency-single-cart .woocommerce-variation-add-to-cart {
align-items: stretch;
direction: rtl;
display: flex !important;
flex-wrap: wrap;
gap: 10px !important;
}
body.single-product .agency-single-cart form.cart.variations_form {
display: block !important;
}
body.single-product .agency-single-cart table.variations {
border: 0 !important;
margin: 0 0 16px !important;
width: 100% !important;
}
body.single-product .agency-single-cart table.variations th,
body.single-product .agency-single-cart table.variations td {
border: 0 !important;
display: block;
padding: 0 0 8px !important;
text-align: right !important;
}
body.single-product .agency-single-cart table.variations label {
color: #1f2937 !important;
font-size: 14px !important;
font-weight: 700 !important;
}
body.single-product .agency-single-cart table.variations select {
background: #fff !important;
border: 1px solid #d8dde7 !important;
border-radius: 8px !important;
color: #111827 !important;
min-height: 48px !important;
padding: 0 14px !important;
width: 100% !important;
}
body.single-product .agency-single-cart .quantity {
display: inline-flex !important;
margin: 0 !important;
}
body.single-product .agency-single-cart .quantity input.qty {
appearance: textfield;
background: #f8fafc !important;
border: 1px solid #d8dde7 !important;
border-radius: 8px !important;
color: #111827 !important;
font-size: 17px !important;
font-weight: 600 !important;
height: 54px !important;
margin: 0 !important;
min-width: 74px !important;
padding: 0 10px !important;
text-align: center !important;
width: 74px !important;
}
body.single-product .agency-single-cart .single_add_to_cart_button,
body.single-product .agency-single-cart .wp-element-button,
body.single-product .agency-single-cart button.button {
align-items: center !important;
background: #244cf2 !important;
border: 1px solid #244cf2 !important;
border-radius: 8px !important;
box-shadow: none !important;
color: #fff !important;
display: inline-flex !important;
flex: 1 1 240px !important;
font-size: 17px !important;
font-weight: 700 !important;
height: 54px !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
min-width: 210px !important;
padding: 0 28px !important;
text-decoration: none !important;
}
body.single-product .agency-single-cart .single_add_to_cart_button:hover,
body.single-product .agency-single-cart .wp-element-button:hover,
body.single-product .agency-single-cart button.button:hover {
background: #1737c9 !important;
border-color: #1737c9 !important;
}
body.single-product .agency-single-cart .stock,
body.single-product .agency-single-cart .woocommerce-variation-price {
color: #1f2937 !important;
font-size: 14px !important;
margin: 0 0 12px !important;
text-align: right !important;
}
body.single-product .agency-single-meta {
color: #6b7280 !important;
font-size: 14px !important;
margin: 0 !important;
}
body.single-product .agency-single-meta-row {
gap: 8px !important;
justify-content: flex-start !important;
margin: 0 !important;
}
body.single-product .agency-single-category .wp-block-post-terms__prefix {
color: #7b8494 !important;
font-weight: 500 !important;
}
body.single-product .agency-single-meta a {
color: #2f5bf2 !important;
font-weight: 600 !important;
text-decoration: none !important;
}
body.single-product .agency-single-details-wrap {
border-top: 1px solid #edf0f5;
margin: 0 auto 64px !important;
padding-top: 42px;
}
body.single-product .agency-single-section-title {
color: #111827 !important;
font-size: 25px !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
line-height: 1.35 !important;
margin: 0 0 22px !important;
text-align: right !important;
}
body.single-product .agency-single-details,
body.single-product .woocommerce-tabs,
body.single-product .wp-block-woocommerce-product-details {
color: #1f2937 !important;
direction: rtl;
font-size: 15px;
line-height: 1.9;
margin-left: auto !important;
margin-right: auto !important;
max-width: 100% !important;
}
body.single-product .agency-single-details h2,
body.single-product .woocommerce-tabs h2,
body.single-product .wp-block-woocommerce-product-details h2 {
color: #111827 !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
margin: 0 0 18px !important;
}
body.single-product .woocommerce-tabs .tabs {
border-bottom: 1px solid #e6eaf1 !important;
display: flex;
gap: 28px;
margin: 0 0 28px !important;
overflow-x: auto;
padding: 0 !important;
}
body.single-product .woocommerce-tabs .tabs li {
border: 0 !important;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
body.single-product .woocommerce-tabs .tabs li a {
color: #667085 !important;
display: block;
font-size: 15px !important;
font-weight: 700 !important;
padding: 0 0 13px !important;
text-decoration: none !important;
white-space: nowrap;
}
body.single-product .woocommerce-tabs .tabs li.active a,
body.single-product .woocommerce-tabs .tabs li a:hover {
border-bottom: 2px solid #244cf2;
color: #244cf2 !important;
}
body.single-product .woocommerce-tabs .panel {
background: #fff;
border: 1px solid #edf0f5;
border-radius: 10px;
margin: 0 !important;
padding: clamp(20px, 3vw, 34px) !important;
}
body.single-product .agency-single-details ul,
body.single-product .woocommerce-tabs ul {
padding-right: 22px;
}
body.single-product .agency-single-related-wrap {
margin: 0 auto !important;
}
body.single-product .agency-single-related-wrap h2,
body.single-product .related.products > h2 {
color: #111827 !important;
font-size: 25px !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
margin: 0 0 26px !important;
text-align: right !important;
}
body.single-product .agency-single-related-wrap .wc-block-grid__products,
body.single-product .agency-single-related-wrap .products {
gap: 24px !important;
}
body.single-product .agency-single-related-wrap .wc-block-grid__product,
body.single-product .agency-single-related-wrap .product,
body.single-product .agency-single-related-wrap .wc-block-product {
background: #fff !important;
border: 1px solid #edf0f5 !important;
border-radius: 10px !important;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04) !important;
overflow: hidden !important;
padding: 18px 14px !important;
text-align: center !important;
}
@media (max-width: 1180px) {
body.single-product .agency-single-breadcrumbs,
body.single-product .agency-single-product-hero,
body.single-product .agency-single-details-wrap,
body.single-product .agency-single-related-wrap {
max-width: calc(100vw - 56px) !important;
width: calc(100vw - 56px) !important;
}
}
@media (max-width: 781px) {
body.single-product main.agency-single-product-page {
padding: 22px 0 68px;
}
body.single-product .agency-single-breadcrumbs,
body.single-product .agency-single-product-hero,
body.single-product .agency-single-details-wrap,
body.single-product .agency-single-related-wrap {
max-width: calc(100vw - 32px) !important;
width: calc(100vw - 32px) !important;
}
body.single-product .agency-single-breadcrumbs {
font-size: 13px !important;
margin-bottom: 22px !important;
}
body.single-product .agency-single-product-hero {
flex-direction: column !important;
gap: 22px !important;
margin-bottom: 46px !important;
}
body.single-product .agency-single-product-hero > .wp-block-column {
flex-basis: 100% !important;
max-width: 100% !important;
width: 100% !important;
}
body.single-product .agency-single-summary-column {
justify-content: flex-start;
max-width: none;
padding-top: 0;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery,
body.single-product .agency-single-gallery .wc-block-product-gallery,
body.single-product .agency-single-gallery .woocommerce-product-gallery__image,
body.single-product .agency-single-gallery .wc-block-product-gallery-large-image {
min-height: 300px;
}
body.single-product .agency-single-gallery img,
body.single-product .agency-single-gallery .wp-post-image {
max-height: 300px;
max-width: 100%;
}
body.single-product .agency-single-title {
font-size: 27px !important;
margin-bottom: 12px !important;
}
body.single-product .agency-single-price,
body.single-product .agency-single-price .price,
body.single-product .agency-single-price .woocommerce-Price-amount {
font-size: 24px !important;
margin-bottom: 18px !important;
}
body.single-product .agency-single-facts {
margin-bottom: 18px !important;
}
body.single-product .agency-single-cart form.cart:not(.variations_form),
body.single-product .agency-single-cart .woocommerce-variation-add-to-cart {
gap: 10px !important;
}
body.single-product .agency-single-cart .single_add_to_cart_button,
body.single-product .agency-single-cart .wp-element-button,
body.single-product .agency-single-cart button.button {
flex: 1 1 180px !important;
min-width: 0 !important;
padding-left: 22px !important;
padding-right: 22px !important;
}
body.single-product .woocommerce-tabs .tabs {
gap: 20px;
margin-bottom: 18px !important;
}
body.single-product .woocommerce-tabs .panel {
border-radius: 8px;
padding: 18px !important;
}
body.single-product .agency-single-details-wrap {
margin-bottom: 46px !important;
padding-top: 34px;
}
}
/* Salla reference product layout refinements */
body.single-product main.agency-single-product-page {
padding-top: 36px;
}
body.single-product .agency-single-product-hero {
gap: clamp(56px, 6vw, 104px) !important;
}
body.single-product .agency-single-summary-column {
align-items: center;
max-width: 650px;
text-align: center;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery,
body.single-product .agency-single-gallery .wc-block-product-gallery,
body.single-product .agency-single-gallery .woocommerce-product-gallery__image,
body.single-product .agency-single-gallery .wc-block-product-gallery-large-image {
min-height: clamp(520px, 42vw, 700px);
}
body.single-product .agency-single-gallery img,
body.single-product .agency-single-gallery .wp-post-image {
max-height: clamp(500px, 41vw, 680px);
max-width: 100%;
}
body.single-product .agency-salla-actions {
align-self: flex-start;
display: flex;
gap: 32px;
margin: 0 0 22px;
}
body.single-product .agency-salla-icon-btn {
align-items: center;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #111827 !important;
cursor: pointer;
display: inline-flex;
height: 32px;
justify-content: center;
padding: 0 !important;
width: 32px;
}
body.single-product .agency-salla-icon-btn svg {
fill: none;
height: 24px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
width: 24px;
}
body.single-product .agency-salla-header-meta {
align-items: center;
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 12px;
min-height: 18px;
}
body.single-product .agency-salla-brand {
color: #2736a8;
font-size: 10px;
font-weight: 700;
line-height: 1.1;
min-height: 14px;
}
body.single-product .agency-salla-rating-line {
align-items: center;
color: #8d7d7d;
display: flex;
flex-direction: row-reverse;
font-size: 17px;
gap: 8px;
justify-content: center;
}
body.single-product .agency-salla-stars {
color: #f6b51d;
font-size: 29px;
letter-spacing: 1px;
line-height: 1;
}
body.single-product .agency-single-title {
font-size: clamp(30px, 2.5vw, 42px) !important;
font-weight: 800 !important;
line-height: 1.25 !important;
margin-bottom: 12px !important;
max-width: 640px;
text-align: center !important;
}
body.single-product .agency-single-price,
body.single-product .agency-single-price .price,
body.single-product .agency-single-price .woocommerce-Price-amount {
color: #111827 !important;
font-size: 28px !important;
font-weight: 800 !important;
margin-bottom: 12px !important;
text-align: center !important;
}
body.single-product .agency-single-price .woocommerce-Price-currencySymbol,
body.single-product .agency-salla-price-repeat .woocommerce-Price-currencySymbol {
color: #111827 !important;
font-size: 0 !important;
margin: 0 0 0 6px !important;
}
body.single-product .agency-single-price .woocommerce-Price-currencySymbol::before,
body.single-product .agency-salla-price-repeat .woocommerce-Price-currencySymbol::before {
content: "﷼";
font-size: 26px;
font-weight: 800;
}
body.single-product .agency-salla-panel {
align-items: center;
display: flex;
flex-direction: column;
margin: 0;
width: 100%;
}
body.single-product .agency-salla-tax-note {
color: #8d7d7d;
font-size: 16px;
margin: 0 0 14px;
}
body.single-product .agency-salla-stock-line,
body.single-product .agency-salla-sales-line {
align-items: center;
display: flex;
flex-direction: row-reverse;
font-size: 20px;
gap: 12px;
justify-content: center;
margin-bottom: 18px;
}
body.single-product .agency-salla-stock-line {
color: #138243;
}
body.single-product .agency-salla-stock-line.is-out,
body.single-product .agency-salla-sales-line {
color: #ff3b30;
}
body.single-product .agency-salla-check {
align-items: center;
border: 2px solid currentColor;
border-radius: 50%;
display: inline-flex;
font-size: 14px;
font-weight: 900;
height: 24px;
justify-content: center;
width: 24px;
}
body.single-product .agency-salla-flame {
color: currentColor;
font-size: 14px;
}
body.single-product .agency-salla-installments {
border: 1px solid #d8dee9;
border-radius: 14px;
color: #111827;
font-size: 17px;
line-height: 1.65;
margin: 12px 0 30px;
max-width: 100%;
padding: 16px 22px;
text-align: center;
width: 100%;
}
body.single-product .agency-salla-installments a {
color: #111827;
font-weight: 700;
text-decoration: underline;
}
body.single-product .agency-salla-tamara {
background: linear-gradient(90deg, #8edcff, #f6a0d1, #9b59d0);
border-radius: 5px;
color: #111827;
display: inline-block;
font-size: 16px;
font-weight: 800;
line-height: 1;
margin-inline: 6px;
padding: 5px 8px;
}
body.single-product .agency-salla-specs {
margin-bottom: 26px;
width: 100%;
}
body.single-product .agency-salla-spec-row {
align-items: center;
border-bottom: 1px solid #e5e7eb;
color: #8d7d7d;
display: grid;
font-size: 17px;
grid-template-columns: 1fr 1fr;
min-height: 70px;
text-align: right;
}
body.single-product .agency-salla-spec-row strong {
color: #111827;
font-size: 20px;
font-weight: 800;
justify-self: end;
}
body.single-product .agency-salla-spec-row span:last-child {
justify-self: start;
}
body.single-product .agency-salla-spec-icon {
color: #8d7d7d;
display: inline-block;
font-size: 14px;
margin-left: 8px;
}
body.single-product .agency-salla-purchase-intro {
display: grid;
grid-template-columns: 1fr 1fr;
margin-bottom: 12px;
width: 100%;
}
body.single-product .agency-salla-price-repeat {
color: #111827;
font-size: 26px;
font-weight: 800;
justify-self: start;
}
body.single-product .agency-salla-purchase-labels {
color: #111827;
display: flex;
flex-direction: column;
font-size: 17px;
font-weight: 500;
gap: 28px;
justify-self: end;
text-align: right;
}
body.single-product .agency-single-purchase-area {
width: 100%;
}
body.single-product .agency-single-cart,
body.single-product .agency-single-cart form.cart {
width: 100%;
}
body.single-product .agency-single-cart form.cart:not(.variations_form),
body.single-product .agency-single-cart .woocommerce-variation-add-to-cart {
display: grid !important;
direction: ltr;
gap: 18px 16px !important;
grid-template-columns: 1fr 1fr;
}
body.single-product .agency-single-cart .quantity {
direction: ltr;
display: grid !important;
grid-column: 1 / -1;
grid-template-columns: 1fr 1fr 1fr;
justify-self: start;
margin: 0 !important;
width: 222px;
}
body.single-product .agency-single-cart .quantity input.qty {
background: #fff !important;
border: 1px solid #e3e5ea !important;
border-radius: 0 !important;
font-size: 21px !important;
height: 64px !important;
min-width: 0 !important;
order: 2;
width: 74px !important;
}
body.single-product .agency-salla-qty-btn {
align-items: center;
background: #fff !important;
border: 1px solid #e3e5ea !important;
border-radius: 0 !important;
color: #111827 !important;
cursor: pointer;
display: inline-flex;
font-size: 34px;
font-weight: 300;
height: 64px;
justify-content: center;
line-height: 1;
padding: 0 !important;
width: 74px;
}
body.single-product .agency-salla-qty-minus {
order: 1;
}
body.single-product .agency-salla-qty-plus {
order: 3;
}
body.single-product .agency-single-cart .single_add_to_cart_button,
body.single-product .agency-single-cart .wp-element-button,
body.single-product .agency-single-cart button.button,
body.single-product .agency-salla-buy-now {
border-radius: 0 !important;
font-size: 18px !important;
font-weight: 800 !important;
height: 58px !important;
}
body.single-product .agency-single-cart .single_add_to_cart_button,
body.single-product .agency-single-cart button.button {
background: #2440d8 !important;
border-color: #2440d8 !important;
grid-column: 2 !important;
min-width: 0 !important;
order: 3;
width: 100%;
}
body.single-product .agency-salla-buy-now {
align-items: center;
background: #fff !important;
border: 1px solid #2440d8 !important;
color: #2440d8 !important;
display: inline-flex !important;
gap: 10px;
grid-column: 1 !important;
justify-content: center;
order: 4;
text-decoration: none !important;
width: 100%;
}
body.single-product .agency-salla-after-cart {
width: 100%;
}
body.single-product .agency-salla-after-cart > .agency-salla-buy-now {
margin-top: 16px;
}
body.single-product .agency-salla-payments {
align-items: center;
display: flex;
gap: 28px;
justify-content: center;
margin-top: 26px;
min-height: 42px;
width: 100%;
}
body.single-product .agency-pay-badge {
align-items: center;
color: #111827;
display: inline-flex;
font-size: 13px;
font-weight: 800;
height: 34px;
justify-content: center;
line-height: 1;
min-width: 34px;
}
body.single-product .agency-pay-snow {
color: #4f46e5;
font-size: 34px;
}
body.single-product .agency-pay-tamara {
background: linear-gradient(135deg, #8edcff, #f3aacb, #fff1a7);
border-radius: 7px;
color: #111;
width: 38px;
}
body.single-product .agency-pay-stc {
color: #5d2390;
}
body.single-product .agency-pay-visa {
color: #1d4ed8;
}
body.single-product .agency-pay-mada {
color: #16833a;
}
@media (max-width: 781px) {
body.single-product .agency-single-summary-column {
align-items: center;
text-align: center;
}
body.single-product .agency-salla-actions {
align-self: center;
margin-bottom: 16px;
}
body.single-product .agency-salla-installments {
font-size: 15px;
margin-bottom: 28px;
padding: 16px;
}
body.single-product .agency-salla-spec-row {
min-height: 72px;
}
body.single-product .agency-salla-purchase-intro {
margin-bottom: 14px;
}
body.single-product .agency-single-cart form.cart:not(.variations_form),
body.single-product .agency-single-cart .woocommerce-variation-add-to-cart {
grid-template-columns: 1fr;
}
body.single-product .agency-single-cart .quantity,
body.single-product .agency-single-cart .single_add_to_cart_button,
body.single-product .agency-single-cart button.button,
body.single-product .agency-salla-buy-now {
grid-column: 1 !important;
width: 100% !important;
}
body.single-product .agency-single-cart .quantity {
justify-self: stretch;
width: 100% !important;
}
body.single-product .agency-single-cart .quantity input.qty,
body.single-product .agency-salla-qty-btn {
width: auto !important;
}
body.single-product .agency-salla-payments {
flex-wrap: wrap;
gap: 14px 22px;
}
}
/* Single product alignment polish */
body.single-product .agency-single-summary-column {
align-items: flex-end !important;
direction: rtl;
text-align: right !important;
}
body.single-product .agency-salla-actions {
align-self: stretch !important;
direction: ltr;
justify-content: flex-start !important;
width: 100%;
}
body.single-product .agency-salla-header-meta,
body.single-product .agency-single-title,
body.single-product .agency-single-price,
body.single-product .agency-single-price .price,
body.single-product .agency-single-summary,
body.single-product .agency-salla-panel,
body.single-product .agency-salla-tax-note,
body.single-product .agency-salla-stock-line,
body.single-product .agency-salla-sales-line {
align-items: flex-end !important;
align-self: stretch;
justify-content: flex-start !important;
text-align: right !important;
width: 100%;
}
body.single-product .agency-salla-header-meta {
justify-content: flex-start !important;
}
body.single-product .agency-salla-rating-line {
justify-content: flex-start !important;
}
body.single-product .agency-single-title {
margin-left: auto !important;
margin-right: 0 !important;
max-width: 100%;
}
body.single-product .agency-single-price,
body.single-product .agency-single-price .price,
body.single-product .agency-single-price .woocommerce-Price-amount {
display: block;
text-align: right !important;
}
body.single-product .agency-salla-spec-row {
direction: rtl;
display: flex !important;
gap: 24px;
justify-content: space-between;
text-align: right !important;
}
body.single-product .agency-salla-spec-row strong {
justify-self: auto;
order: 1;
text-align: right;
}
body.single-product .agency-salla-spec-row > span:last-child {
justify-self: auto;
order: 2;
text-align: left;
}
body.single-product .agency-salla-purchase-intro {
direction: rtl;
}
body.single-product .agency-salla-price-repeat {
justify-self: start;
text-align: left;
}
body.single-product .agency-salla-purchase-labels {
justify-self: end;
text-align: right;
}
@media (max-width: 781px) {
body.single-product .agency-single-summary-column {
align-items: flex-end !important;
text-align: right !important;
}
body.single-product .agency-salla-actions {
align-self: stretch !important;
justify-content: flex-start !important;
}
}
/* Single product purchase rows: label right, value/control left */
body.single-product .agency-salla-purchase-intro {
align-items: center !important;
column-gap: 24px;
direction: ltr !important;
grid-template-columns: minmax(180px, 1fr) minmax(120px, 1fr) !important;
margin-bottom: 18px;
}
body.single-product .agency-salla-price-repeat {
direction: rtl;
grid-column: 1 !important;
justify-self: start !important;
text-align: left !important;
}
body.single-product .agency-salla-purchase-labels {
align-items: flex-end;
grid-column: 2 !important;
justify-self: end !important;
text-align: right !important;
}
body.single-product .agency-salla-purchase-labels span:first-child {
display: block;
}
body.single-product .agency-salla-purchase-labels span:last-child {
display: none !important;
}
body.single-product .agency-single-cart form.cart:not(.variations_form),
body.single-product .agency-single-cart .woocommerce-variation-add-to-cart {
align-items: center;
grid-template-areas:
"quantity quantityLabel"
"buyNow addCart" !important;
grid-template-columns: minmax(220px, auto) minmax(120px, 1fr) !important;
}
body.single-product .agency-single-cart form.cart:not(.variations_form)::before,
body.single-product .agency-single-cart .woocommerce-variation-add-to-cart::before {
color: #111827;
content: "الكمية";
direction: rtl;
font-size: 17px;
font-weight: 500;
grid-area: quantityLabel;
justify-self: end;
line-height: 1.3;
text-align: right;
}
body.single-product .agency-single-cart .quantity {
grid-area: quantity !important;
grid-column: auto !important;
grid-row: auto !important;
justify-self: start !important;
}
body.single-product .agency-single-cart .single_add_to_cart_button,
body.single-product .agency-single-cart button.button {
grid-area: addCart !important;
grid-column: auto !important;
grid-row: auto !important;
}
body.single-product .agency-salla-buy-now {
grid-area: buyNow !important;
grid-column: auto !important;
grid-row: auto !important;
}
@media (max-width: 781px) {
body.single-product .agency-single-cart form.cart:not(.variations_form),
body.single-product .agency-single-cart .woocommerce-variation-add-to-cart {
grid-template-areas:
"quantityLabel"
"quantity"
"addCart"
"buyNow" !important;
grid-template-columns: 1fr !important;
}
body.single-product .agency-single-cart form.cart:not(.variations_form)::before,
body.single-product .agency-single-cart .woocommerce-variation-add-to-cart::before {
justify-self: end;
}
body.single-product .agency-single-cart .quantity {
justify-self: stretch !important;
}
}
/* Single product final alignment cleanup */
body.single-product .agency-single-price {
align-self: stretch !important;
direction: rtl !important;
text-align: right !important;
width: 100% !important;
}
body.single-product .agency-single-price .wc-block-components-product-price,
body.single-product .agency-single-price .price,
body.single-product .agency-single-price .woocommerce-Price-amount {
direction: rtl !important;
justify-content: flex-start !important;
text-align: right !important;
width: 100% !important;
}
body.single-product .agency-salla-stock-line {
direction: ltr !important;
flex-direction: row !important;
justify-content: flex-end !important;
text-align: right !important;
}
body.single-product .agency-salla-stock-line span:last-child {
direction: rtl !important;
}
/* Single product Salla-style details/reviews section */
body.single-product .agency-single-purchase-area .agency-salla-payments {
display: none !important;
}
body.single-product .agency-single-details-wrap {
border-top: 0 !important;
margin: clamp(38px, 5vw, 78px) auto 66px !important;
padding-top: 0 !important;
}
body.single-product .agency-salla-details-section {
color: #1f2937;
direction: rtl;
margin: 0 auto;
max-width: 100%;
text-align: right;
}
body.single-product .agency-salla-details-payments {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 18px 34px;
justify-content: center;
margin: 0 auto 34px;
min-height: 42px;
width: 100%;
}
body.single-product .agency-salla-details-tabs {
align-items: flex-end;
border-bottom: 1px solid #e3e7ef;
display: flex;
gap: clamp(64px, 9vw, 140px);
justify-content: center;
margin: 0 0 42px;
}
body.single-product .agency-salla-details-tab {
border-bottom: 3px solid transparent;
color: #8d7d7d !important;
display: inline-flex;
font-size: clamp(20px, 1.8vw, 27px);
font-weight: 800;
justify-content: center;
line-height: 1.35;
margin-bottom: -1px;
padding: 0 12px 17px;
text-decoration: none !important;
white-space: nowrap;
}
body.single-product .agency-salla-details-tab.is-active {
border-bottom-color: #2440d8;
color: #2440d8 !important;
}
body.single-product .agency-salla-details-content {
color: #242424;
font-size: clamp(17px, 1.35vw, 22px);
font-weight: 400;
line-height: 2.05;
margin: 0 auto;
text-align: right;
}
body.single-product .agency-salla-details-content p {
margin: 0 0 18px;
}
body.single-product .agency-salla-details-content strong,
body.single-product .agency-salla-details-content b {
color: #111827;
font-weight: 900;
}
body.single-product .agency-salla-details-content h2,
body.single-product .agency-salla-details-content h3 {
color: #111827;
font-size: clamp(22px, 2vw, 30px);
font-weight: 900;
line-height: 1.5;
margin: 30px 0 12px;
text-align: right;
}
body.single-product .agency-salla-details-content table {
direction: rtl;
margin-right: auto;
text-align: right;
width: 100%;
}
body.single-product .agency-salla-details-content th,
body.single-product .agency-salla-details-content td {
border-bottom: 1px solid #edf0f5;
padding: 14px 0;
text-align: right;
}
body.single-product .agency-salla-no-details {
color: #8d7d7d;
text-align: center;
}
@media (max-width: 781px) {
body.single-product .agency-single-details-wrap {
margin-top: 34px !important;
}
body.single-product .agency-salla-details-payments {
gap: 14px 22px;
margin-bottom: 28px;
}
body.single-product .agency-salla-details-tabs {
gap: 28px;
margin-bottom: 28px;
overflow-x: auto;
}
body.single-product .agency-salla-details-tab {
font-size: 19px;
padding-bottom: 13px;
}
body.single-product .agency-salla-details-content {
font-size: 16px;
line-height: 1.95;
}
}
body.single-product .agency-single-cart form.cart:not(.variations_form),
body.single-product .agency-single-cart .woocommerce-variation-add-to-cart {
direction: ltr !important;
grid-template-areas:
"quantity quantityLabel"
"buyNow addCart" !important;
grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) !important;
}
body.single-product .agency-single-cart .quantity {
grid-area: quantity !important;
justify-self: start !important;
}
body.single-product .agency-single-cart .single_add_to_cart_button,
body.single-product .agency-single-cart button.button {
grid-area: addCart !important;
justify-self: stretch !important;
white-space: normal !important;
}
body.single-product .agency-salla-buy-now {
grid-area: buyNow !important;
justify-self: stretch !important;
min-width: 0 !important;
white-space: nowrap !important;
}
@media (max-width: 781px) {
body.single-product .agency-single-cart form.cart:not(.variations_form),
body.single-product .agency-single-cart .woocommerce-variation-add-to-cart {
grid-template-areas:
"quantityLabel"
"quantity"
"addCart"
"buyNow" !important;
grid-template-columns: 1fr !important;
}
}
/* Single product payment icons and interactive details tabs */
body.single-product .agency-single-purchase-area .agency-salla-after-cart {
margin-top: 26px !important;
width: 100% !important;
}
body.single-product .agency-single-purchase-area .agency-salla-payments {
align-items: center;
display: flex !important;
flex-wrap: wrap;
gap: 18px 34px;
justify-content: center;
margin: 0 auto !important;
min-height: 42px;
width: 100%;
}
body.single-product .agency-salla-details-payments {
display: none !important;
}
body.single-product .agency-salla-details-tab {
appearance: none;
background: transparent !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
cursor: pointer;
font-family: inherit;
}
body.single-product .agency-salla-tab-panel[hidden] {
display: none !important;
}
body.single-product .agency-salla-review-list {
list-style: none;
margin: 0;
padding: 0;
}
body.single-product .agency-salla-review {
border-bottom: 1px solid #edf0f5;
padding: 0 0 22px;
}
body.single-product .agency-salla-review + .agency-salla-review {
padding-top: 22px;
}
body.single-product .agency-salla-review-head {
align-items: center;
display: flex;
gap: 14px;
justify-content: flex-start;
margin-bottom: 8px;
}
body.single-product .agency-salla-review-stars {
color: #f6b51d;
font-size: 20px;
line-height: 1;
}
body.single-product .agency-salla-review-body p {
margin: 0;
}
@media (max-width: 781px) {
body.single-product .agency-single-purchase-area .agency-salla-after-cart {
margin-top: 22px !important;
}
body.single-product .agency-single-purchase-area .agency-salla-payments {
gap: 14px 22px;
}
}
/* Single product brand/action top row */
body.single-product .agency-single-summary-column {
position: relative;
}
body.single-product .agency-salla-actions {
min-height: 34px;
padding-right: 160px;
}
body.single-product .agency-salla-header-meta {
align-items: flex-end !important;
margin: 0 !important;
min-height: 34px;
position: absolute;
right: 0;
top: 18px;
width: auto !important;
z-index: 2;
}
body.single-product .agency-salla-brand {
line-height: 34px;
text-align: right;
white-space: nowrap;
}
@media (max-width: 781px) {
body.single-product .agency-salla-actions {
padding-right: 130px;
}
body.single-product .agency-salla-brand {
font-size: 9px;
}
}
/* Single product stock status: match Alsweed/Salla inline treatment */
body.single-product .agency-salla-stock-line {
align-items: center !important;
align-self: stretch !important;
color: #108043 !important;
direction: rtl !important;
display: flex !important;
flex-direction: row !important;
font-size: 15px !important;
font-weight: 400 !important;
gap: 7px !important;
justify-content: flex-start !important;
line-height: 26px !important;
margin: 0 0 18px !important;
text-align: right !important;
width: 100% !important;
}
body.single-product .agency-salla-stock-line .agency-salla-check {
align-items: center;
border: 2px solid currentColor;
border-radius: 50%;
display: inline-flex;
font-size: 11px;
font-weight: 900;
height: 18px;
justify-content: center;
line-height: 1;
margin: 0 !important;
vertical-align: -4px;
width: 18px;
}
body.single-product .agency-salla-stock-line span:last-child {
direction: rtl !important;
vertical-align: middle;
}
html body.single-product .agency-single-summary-column .agency-salla-stock-line {
align-items: center !important;
direction: rtl !important;
display: flex !important;
flex-direction: row !important;
gap: 7px !important;
justify-content: flex-start !important;
text-align: right !important;
width: 100% !important;
}
html body.single-product .agency-single-summary-column .agency-salla-stock-line .agency-salla-check {
margin: 0 !important;
}
/* Single product gallery: use a zoom cursor and keep WooCommerce's trigger invisible. */
body.single-product .agency-single-gallery {
--agency-gallery-zoom-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeDropShadow dx='1' dy='1' stdDeviation='.7' flood-color='%23000' flood-opacity='.35'/%3E%3C/filter%3E%3Cg filter='url(%23s)'%3E%3Ccircle cx='8.7' cy='8.7' r='6.2' fill='%23fff' stroke='%23111827' stroke-width='2'/%3E%3Cpath d='m13.2 13.2 5.8 5.8' stroke='%23111827' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M8.7 5.5v6.4M5.5 8.7h6.4' stroke='%23111827' stroke-width='1.8' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 9 9, zoom-in;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery__trigger,
body.single-product .agency-single-gallery .wc-block-components-product-image-gallery__trigger {
align-items: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: transparent !important;
display: inline-flex !important;
font-size: 0 !important;
height: 1px !important;
justify-content: center !important;
left: -9999px !important;
margin: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
position: absolute !important;
right: auto !important;
text-indent: -9999px !important;
text-decoration: none !important;
top: -9999px !important;
transform: none !important;
transition: none !important;
visibility: hidden !important;
width: 1px !important;
z-index: -1 !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery__trigger::before,
body.single-product .agency-single-gallery .woocommerce-product-gallery__trigger::after,
body.single-product .agency-single-gallery .wc-block-components-product-image-gallery__trigger::before,
body.single-product .agency-single-gallery .wc-block-components-product-image-gallery__trigger::after {
content: none !important;
display: none !important;
}
body.single-product .agency-single-gallery .flex-viewport,
body.single-product .agency-single-gallery .woocommerce-product-gallery__wrapper,
body.single-product .agency-single-gallery .woocommerce-product-gallery__image,
body.single-product .agency-single-gallery .woocommerce-product-gallery__image a,
body.single-product .agency-single-gallery .woocommerce-product-gallery__image img {
cursor: var(--agency-gallery-zoom-cursor) !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs,
body.single-product .agency-single-gallery .flex-control-thumbs * {
cursor: pointer !important;
}
/* Single product gallery: hide sale flash badges on images and disable hover zoom. */
html body.single-product .agency-single-gallery .onsale,
html body.single-product .agency-single-gallery span.onsale,
html body.single-product .agency-single-gallery .wc-block-components-product-sale-badge,
html body.single-product .agency-single-gallery .wp-block-woocommerce-product-image-gallery__sale-badge,
html body.single-product .agency-single-gallery [class*="sale-badge"],
html body.single-product .agency-single-gallery [class*="onsale"],
html body.single-product .product-single__slider .onsale,
html body.single-product .product-single__slider [class*="sale-badge"],
html body.single-product .product-single__slider [class*="onsale"],
html body.single-product .woocommerce-product-gallery .onsale,
html body.single-product .wc-block-product-gallery .onsale {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
html body.single-product .agency-single-gallery .zoomImg,
html body.single-product .agency-single-gallery img.zoomImg,
html body.single-product .woocommerce-product-gallery .zoomImg,
html body.single-product .woocommerce-product-gallery img.zoomImg {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
html body.single-product .agency-single-gallery .woocommerce-product-gallery__image:hover img:not(.zoomImg),
html body.single-product .agency-single-gallery .wc-block-product-gallery-large-image:hover img,
html body.single-product .woocommerce-product-gallery__image:hover img:not(.zoomImg) {
transform: none !important;
}
/* Single product related products: reuse homepage product slider */
body.single-product .agency-single-related-wrap {
margin-top: 54px !important;
max-width: 100% !important;
width: 100% !important;
}
body.single-product .agency-salla-related-slider {
margin-top: 0 !important;
padding-bottom: 52px !important;
}
body.single-product .agency-salla-related-slider .s-slider-block__title-right {
margin-bottom: 30px !important;
}
body.single-product .agency-salla-related-controls {
align-items: center;
display: flex;
gap: 15px;
}
body.single-product .agency-salla-related-slider .swiper-slide {
height: auto;
}
body.single-product .agency-salla-related-slider .agency-product-card {
min-height: 100%;
}
body.single-product .agency-salla-related-slider .agency-product-card-image {
color: inherit;
text-decoration: none;
}
body.single-product .agency-salla-related-slider .agency-product-card-image img {
opacity: 1;
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body.single-product .agency-salla-related-slider .agency-product-card-image:hover img,
body.single-product .agency-salla-related-slider .agency-product-card:focus-within .agency-product-card-image img {
opacity: 0.9;
}
body.single-product .agency-salla-related-slider .agency-product-title a {
color: inherit;
text-decoration: none;
}
body.single-product .agency-salla-related-slider .agency-product-title a:hover {
color: #0052cc;
}
body.single-product .agency-salla-related-slider .agency-product-price,
body.single-product .agency-salla-related-slider .agency-product-price .price,
body.single-product .agency-salla-related-slider .agency-product-price .woocommerce-Price-amount {
color: #111827 !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
body.single-product .agency-salla-related-slider .agency-product-btn {
text-decoration: none !important;
}
@media (max-width: 781px) {
body.single-product .agency-salla-related-slider {
padding-left: 16px !important;
padding-right: 16px !important;
}
body.single-product .agency-salla-related-slider .s-slider-block__title-right {
align-items: flex-end;
gap: 14px;
}
body.single-product .agency-salla-related-slider .agency-view-all-btn {
display: none;
}
}
/* Single product checkout/payment row: match Salla mini payment assets */
body.single-product .agency-single-purchase-area .agency-salla-after-cart {
margin-top: 28px !important;
}
body.single-product .agency-single-purchase-area .agency-salla-payments {
align-items: center !important;
direction: ltr !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: clamp(16px, 2vw, 26px) !important;
justify-content: center !important;
margin: 28px auto 0 !important;
min-height: 46px !important;
width: 100% !important;
}
body.single-product .agency-pay-icon {
display: block !important;
flex: 0 0 auto;
height: auto;
max-width: none !important;
object-fit: contain;
width: auto;
}
body.single-product .agency-pay-sbc {
height: 42px !important;
}
body.single-product .agency-pay-cod {
height: 36px !important;
}
body.single-product .agency-pay-tamara {
height: 42px !important;
}
body.single-product .agency-pay-apple {
height: 24px !important;
}
body.single-product .agency-pay-stc {
height: 23px !important;
}
body.single-product .agency-pay-bank {
height: 31px !important;
}
body.single-product .agency-pay-credit,
body.single-product .agency-pay-mada {
height: 24px !important;
}
@media (max-width: 781px) {
body.single-product .agency-single-purchase-area .agency-salla-payments {
flex-wrap: wrap !important;
gap: 18px 24px !important;
justify-content: center !important;
}
}
/* Single product hero: tighten image/text spacing like Salla */
body.single-product .agency-single-product-hero {
align-items: start !important;
direction: ltr !important;
display: grid !important;
gap: clamp(24px, 2.8vw, 46px) !important;
grid-template-areas: "summary gallery";
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr) !important;
}
body.single-product .agency-single-summary-column {
direction: rtl !important;
grid-area: summary;
max-width: 100% !important;
width: 100% !important;
}
body.single-product .agency-single-gallery-column {
flex-basis: auto !important;
grid-area: gallery;
max-width: 100% !important;
width: 100% !important;
}
body.single-product .agency-single-gallery,
body.single-product .agency-single-gallery .woocommerce-product-gallery,
body.single-product .agency-single-gallery .wc-block-product-gallery {
max-width: 100% !important;
width: 100% !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery__image > a {
display: block !important;
width: 100%;
}
body.single-product .agency-single-gallery .flex-viewport {
max-width: 100% !important;
overflow: hidden !important;
width: 100% !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-manual .woocommerce-product-gallery__wrapper {
transform: none !important;
transition-duration: 0s !important;
width: 100% !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-draggable .woocommerce-product-gallery__wrapper {
backface-visibility: hidden !important;
display: flex !important;
transform: translate3d(0, 0, 0);
touch-action: pan-y !important;
will-change: transform !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-manual .woocommerce-product-gallery__image {
align-items: center !important;
float: none !important;
justify-content: center !important;
margin-right: 0 !important;
width: 100% !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-draggable .woocommerce-product-gallery__image {
backface-visibility: hidden !important;
display: flex !important;
flex: 0 0 100% !important;
transform: translate3d(0, 0, 0) !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-manual:not(.agency-gallery-draggable) .woocommerce-product-gallery__image:not(.flex-active-slide) {
display: none !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-manual .woocommerce-product-gallery__image.flex-active-slide {
display: flex !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery__image,
body.single-product .agency-single-gallery .wc-block-product-gallery-large-image {
min-height: 0 !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery__image img:not(.zoomImg),
body.single-product .agency-single-gallery .wp-post-image {
height: auto !important;
margin: 0 !important;
max-height: none !important;
max-width: 100% !important;
object-fit: contain !important;
width: 100% !important;
}
@media (max-width: 781px) {
body.single-product .agency-single-product-hero {
gap: 24px !important;
grid-template-areas:
"gallery"
"summary";
grid-template-columns: 1fr !important;
}
}
/* Single product gallery: Salla-style thumbnails and click-to-enlarge behavior */
body.single-product .agency-single-gallery .woocommerce-product-gallery {
position: relative;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery__image,
body.single-product .agency-single-gallery .woocommerce-product-gallery__image > a,
body.single-product .agency-single-gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
cursor: var(--agency-gallery-zoom-cursor) !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-draggable .flex-viewport,
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-draggable .woocommerce-product-gallery__wrapper,
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-draggable .woocommerce-product-gallery__image,
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-draggable .woocommerce-product-gallery__image img:not(.zoomImg) {
cursor: var(--agency-gallery-zoom-cursor) !important;
touch-action: pan-y !important;
user-select: none !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-is-dragging .flex-viewport,
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-is-dragging .woocommerce-product-gallery__wrapper,
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-is-dragging .woocommerce-product-gallery__image,
body.single-product .agency-single-gallery .woocommerce-product-gallery.agency-gallery-is-dragging .woocommerce-product-gallery__image img:not(.zoomImg) {
cursor: var(--agency-gallery-zoom-cursor) !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs {
align-items: center !important;
direction: rtl !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 16px !important;
justify-content: flex-start !important;
margin: 16px 0 0 !important;
overflow: hidden !important;
padding: 0 !important;
width: 100% !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs li {
background: #fff !important;
border: 1px solid #e5e7eb !important;
border-radius: 6px !important;
cursor: pointer !important;
flex: 0 1 min(138px, calc((100% - 48px) / 4)) !important;
height: 64px !important;
list-style: none !important;
margin: 0 !important;
max-width: 138px !important;
min-width: 0 !important;
overflow: hidden !important;
padding: 0 !important;
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs li:hover {
border-color: #9aaefc !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs li.agency-thumb-active {
border-color: #244cf2 !important;
box-shadow: 0 0 0 1px #244cf2 !important;
outline: 2px solid #244cf2 !important;
outline-offset: -2px !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs li:not(.agency-thumb-active) {
border-color: #e5e7eb !important;
box-shadow: none !important;
outline: 0 solid transparent !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs img {
background: #fff !important;
border-radius: 5px !important;
display: block !important;
height: 100% !important;
margin: 0 !important;
max-height: none !important;
max-width: none !important;
object-fit: cover !important;
opacity: 1 !important;
padding: 0 !important;
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
width: 100% !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs li:not(.agency-thumb-active) img {
opacity: 0.88 !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs li.agency-thumb-active img {
opacity: 1 !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs li:not(.agency-thumb-active) img {
opacity: 0.88 !important;
}
body.single-product .agency-single-gallery .flex-control-thumbs li:hover img {
opacity: 1 !important;
}
body.single-product .pswp__top-bar {
align-items: center !important;
background: transparent !important;
direction: ltr !important;
display: flex !important;
justify-content: flex-end !important;
}
body.single-product .pswp__top-bar .pswp__button {
float: none !important;
flex: 0 0 44px !important;
opacity: 0.9 !important;
}
body.single-product .pswp__button--close {
order: 1;
}
body.single-product .pswp__button--fs {
order: 2;
}
body.single-product .pswp__button--zoom {
order: 3;
}
body.single-product .pswp__counter {
direction: ltr !important;
flex: 0 0 auto !important;
float: none !important;
margin: 0 !important;
min-width: 58px !important;
order: 4;
padding: 0 12px !important;
text-align: center !important;
}
body.single-product .pswp {
bottom: 0 !important;
height: 100vh !important;
left: 0 !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 100vw !important;
z-index: 2147483000 !important;
}
body.single-product .pswp__bg,
body.single-product .pswp__scroll-wrap {
bottom: 0 !important;
height: 100vh !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
width: 100vw !important;
}
body.single-product:has(.pswp--open) .custom-main-header {
pointer-events: none !important;
z-index: 1 !important;
}
body.agency-product-lightbox-open {
overflow: hidden !important;
}
body.single-product .agency-product-lightbox {
align-items: center;
background: rgba(0, 0, 0, 0.82);
bottom: 0;
display: flex;
justify-content: center;
left: 0;
opacity: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
transition: opacity 160ms ease;
visibility: hidden;
z-index: 2147483000;
}
body.single-product .agency-product-lightbox.is-open {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
body.single-product .agency-product-lightbox__backdrop {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
body.single-product .agency-product-lightbox__stage {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
max-height: 100vh;
max-width: 100vw;
padding: 56px 72px 42px;
position: relative;
width: 100vw;
z-index: 1;
}
body.single-product .agency-product-lightbox__image {
display: block;
height: auto;
max-height: calc(100vh - 98px);
max-width: min(1000px, calc(100vw - 144px));
object-fit: contain;
opacity: 0;
transition: opacity 140ms ease;
width: auto;
}
body.single-product .agency-product-lightbox__image.is-loaded {
opacity: 1;
}
body.single-product .agency-product-lightbox__topbar {
align-items: center;
direction: ltr;
display: flex;
height: 54px;
justify-content: flex-end;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
body.single-product .agency-product-lightbox__button {
align-items: center;
background: rgba(0, 0, 0, 0.34);
border: 0;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: Arial, sans-serif;
font-size: 36px;
height: 54px;
justify-content: center;
line-height: 1;
margin: 0;
opacity: 0.9;
padding: 0;
width: 54px;
}
body.single-product .agency-product-lightbox__fullscreen {
font-size: 28px;
}
body.single-product .agency-product-lightbox__counter {
color: rgba(255, 255, 255, 0.78);
direction: ltr;
display: none !important;
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 44px;
min-width: 58px;
padding: 0 12px;
text-align: center;
}
body.single-product .agency-product-lightbox__arrow {
align-items: center;
background: rgba(0, 0, 0, 0.28);
border: 0;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: Arial, sans-serif;
font-size: 46px;
height: 56px;
justify-content: center;
line-height: 1;
margin: 0;
opacity: 0.86;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
z-index: 2;
}
body.single-product .agency-product-lightbox__arrow:hover,
body.single-product .agency-product-lightbox__button:hover {
opacity: 1;
}
body.single-product .agency-product-lightbox__arrow--prev {
left: 0;
}
body.single-product .agency-product-lightbox__arrow--next {
right: 0;
}
body.single-product .agency-product-lightbox__arrow[hidden] {
display: none !important;
}
@media (max-width: 781px) {
body.single-product .agency-product-lightbox__stage {
padding: 54px 42px 36px;
}
body.single-product .agency-product-lightbox__image {
max-height: calc(100vh - 90px);
max-width: calc(100vw - 84px);
}
body.single-product .agency-product-lightbox__arrow {
font-size: 38px;
height: 48px;
width: 42px;
}
body.single-product .agency-single-gallery .flex-control-thumbs {
direction: rtl !important;
gap: 10px !important;
justify-content: flex-start !important;
overflow-x: auto !important;
padding: 1px !important;
scrollbar-width: none;
}
body.single-product .agency-single-gallery .flex-control-thumbs::-webkit-scrollbar {
display: none;
}
body.single-product .agency-single-gallery .flex-control-thumbs li {
flex-basis: clamp(82px, 24vw, 112px) !important;
height: 58px !important;
max-width: 112px !important;
}
}
.agency-category-item {
text-align: center;
margin-bottom: 2rem;
}
/* Editor Only: Make Swiper Categories look like circles */
.editor-styles-wrapper .agency-categories-swiper .swiper-wrapper {
display: flex !important;
flex-wrap: wrap !important;
gap: 30px !important;
justify-content: center !important;
}
.editor-styles-wrapper .agency-categories-swiper .swiper-slide {
width: 140px !important;
flex-shrink: 0 !important;
margin-bottom: 0 !important;
}
.editor-styles-wrapper .agency-categories-swiper .swiper-slide img,
.editor-styles-wrapper .agency-categories-swiper .swiper-slide figure {
border-radius: 50% !important;
aspect-ratio: 1/1 !important;
object-fit: cover !important;
max-width: 140px !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
overflow: hidden !important;
}
.editor-styles-wrapper .agency-categories-swiper .swiper-slide p {
text-align: center !important;
margin-top: 10px !important;
font-size: 14px !important;
font-weight: bold !important;
}
/* Editor Only: Make Product Swiper horizontal */
.editor-styles-wrapper .agency-products-swiper .swiper-wrapper {
display: flex !important;
flex-wrap: wrap !important;
gap: 20px !important;
justify-content: center !important;
}
.editor-styles-wrapper .agency-products-swiper .swiper-slide {
width: 250px !important;
flex-shrink: 0 !important;
margin-bottom: 0 !important;
}
/* Editor Only: Make Brands Swiper horizontal */
.editor-styles-wrapper .agency-brands-swiper .swiper-wrapper {
display: flex !important;
flex-wrap: wrap !important;
gap: 20px !important;
justify-content: center !important;
}
.editor-styles-wrapper .agency-brands-swiper .swiper-slide {
width: 200px !important;
flex-shrink: 0 !important;
margin-bottom: 0 !important;
}
/* Cart: keep SAR symbol before the amount, matching the Alsweed-style total. */
body.woocommerce-cart .wc-block-cart-item__total .wc-block-formatted-money-amount,
body.woocommerce-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount,
body.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price__value,
body.woocommerce-cart .wc-block-components-totals-item__value .wc-block-formatted-money-amount,
body.woocommerce-cart .wc-block-components-totals-item__value .wc-block-components-formatted-money-amount {
direction: ltr !important;
display: inline-block !important;
unicode-bidi: isolate !important;
white-space: nowrap !important;
}
body.woocommerce-cart tr.wc-block-cart-items__row > td.wc-block-cart-item__total {
align-items: baseline !important;
direction: rtl !important;
display: inline-flex !important;
flex-direction: row !important;
gap: 4px !important;
}
body.woocommerce-cart tr.wc-block-cart-items__row > td.wc-block-cart-item__total::before {
flex: 0 0 auto !important;
}
body.woocommerce-cart tr.wc-block-cart-items__row > td.wc-block-cart-item__total > * {
flex: 0 0 auto !important;
}
/* Header: slide into a sticky position after the original header has been passed. */
.custom-main-header {
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease !important;
}
.agency-sticky-header-placeholder {
display: block;
height: 0;
pointer-events: none;
}
.custom-main-header.agency-sticky-header-fixed {
background: #fff !important;
border-bottom: 1px solid rgba(29, 78, 216, 0.12) !important;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
box-sizing: border-box !important;
left: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
opacity: 0;
pointer-events: none;
position: fixed !important;
right: 0 !important;
top: 0 !important;
transform: translate3d(0, -115%, 0);
width: 100% !important;
z-index: 99990 !important;
}
.custom-main-header.agency-sticky-header-fixed.agency-sticky-header-visible {
animation: agencyStickyHeaderDrop 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 0);
}
.admin-bar .custom-main-header.agency-sticky-header-fixed {
top: 32px !important;
}
@keyframes agencyStickyHeaderDrop {
0% {
opacity: 0;
transform: translate3d(0, -115%, 0) scale(0.985);
}
62% {
opacity: 1;
transform: translate3d(0, 6px, 0) scale(1);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@media (max-width: 782px) {
.admin-bar .custom-main-header.agency-sticky-header-fixed {
top: 46px !important;
}
body:has(.custom-main-header .wp-block-navigation__responsive-container.is-menu-open) .custom-main-header {
transform: none !important;
will-change: auto !important;
}
.custom-main-header .wp-block-navigation__responsive-container.is-menu-open,
.custom-main-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.custom-main-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.custom-main-header .wp-block-navigation__responsive-container.is-menu-open .agency-mobile-menu-shell,
.custom-main-header .wp-block-navigation__responsive-container.is-menu-open .agency-mobile-menu-panels,
.custom-main-header .wp-block-navigation__responsive-container.is-menu-open .agency-mobile-menu-panel.is-active {
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.custom-main-header,
.custom-main-header.agency-sticky-header-fixed,
.custom-main-header.agency-sticky-header-fixed.agency-sticky-header-visible {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* Single product: keep the visual canvas pure white like the reference shop. */
html:has(body.single-product),
html body.single-product,
html body.single-product .wp-site-blocks,
html body.single-product main.agency-single-product-page,
html body.single-product .agency-single-product-hero,
html body.single-product .agency-single-gallery-column,
html body.single-product .agency-single-summary-column,
html body.single-product .agency-single-gallery,
html body.single-product .agency-single-gallery .woocommerce-product-gallery,
html body.single-product .agency-single-gallery .woocommerce-product-gallery__wrapper,
html body.single-product .agency-single-gallery .woocommerce-product-gallery__image,
html body.single-product .agency-single-gallery .woocommerce-product-gallery__image > a,
html body.single-product .agency-single-gallery .flex-control-thumbs,
html body.single-product .agency-single-gallery .flex-control-thumbs li,
html body.single-product .agency-single-gallery .flex-control-thumbs img {
background: #fff !important;
background-color: #fff !important;
background-image: none !important;
}
/* Single product mobile: let the gallery collapse to its real content height. */
@media (max-width: 781px) {
html body.single-product .agency-single-product-hero {
gap: 12px !important;
}
html body.single-product .agency-single-gallery,
html body.single-product .agency-single-gallery-column,
html body.single-product .agency-single-gallery .woocommerce-product-gallery,
html body.single-product .agency-single-gallery .wc-block-product-gallery,
html body.single-product .agency-single-gallery .woocommerce-product-gallery__wrapper,
html body.single-product .agency-single-gallery .woocommerce-product-gallery__image,
html body.single-product .agency-single-gallery .woocommerce-product-gallery__image > a,
html body.single-product .agency-single-gallery .wc-block-product-gallery-large-image,
html body.single-product .agency-single-gallery .flex-viewport {
height: auto !important;
min-height: 0 !important;
}
html body.single-product .agency-single-gallery .flex-control-thumbs {
margin-top: 10px !important;
margin-bottom: 0 !important;
}
html body.single-product .agency-single-summary-column {
padding-top: 0 !important;
}
html body.single-product .agency-salla-actions {
margin-top: 0 !important;
}
}
/* Single product mobile: compact action icons with brand/logo on the same line. */
@media (max-width: 781px) {
html body.single-product .agency-salla-actions {
align-items: center !important;
gap: 14px !important;
height: 28px !important;
margin: 0 0 10px !important;
min-height: 28px !important;
padding-right: 88px !important;
}
html body.single-product .agency-salla-icon-btn {
height: 22px !important;
width: 22px !important;
}
html body.single-product .agency-salla-icon-btn svg {
height: 17px !important;
width: 17px !important;
}
html body.single-product .agency-salla-header-meta {
align-items: center !important;
height: 28px !important;
justify-content: center !important;
margin: 0 !important;
min-height: 28px !important;
right: 0 !important;
top: 0 !important;
}
html body.single-product .agency-salla-brand {
align-items: center !important;
display: flex !important;
font-size: 10px !important;
height: 28px !important;
line-height: 1.1 !important;
margin: 0 !important;
min-height: 0 !important;
}
html body.single-product .agency-salla-brand img {
display: block !important;
height: auto !important;
max-height: 28px !important;
max-width: 64px !important;
object-fit: contain !important;
width: auto !important;
}
}
/* Single product sale price: match the reference discount treatment. */
html body.single-product .agency-single-price .agency-sale-price-ready,
html body.single-product .agency-single-price .wc-block-components-product-price.agency-sale-price-ready,
html body.single-product .agency-single-price .price.agency-sale-price-ready {
align-items: center !important;
align-self: flex-end !important;
direction: ltr !important;
display: inline-flex !important;
flex-wrap: wrap !important;
gap: 16px !important;
justify-content: flex-end !important;
margin: 0 0 12px auto !important;
text-align: left !important;
width: auto !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready del,
html body.single-product .agency-single-price .agency-sale-price-ready ins,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready del,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready ins {
align-items: center !important;
background: transparent !important;
display: inline-flex !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
text-decoration-thickness: 1.5px !important;
text-underline-offset: 0 !important;
width: auto !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready del,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready del {
color: #827174 !important;
font-size: 15px !important;
font-weight: 600 !important;
opacity: 1 !important;
text-decoration: line-through !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready ins,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready ins {
color: #f87171 !important;
font-size: 20px !important;
font-weight: 700 !important;
text-decoration: none !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready .woocommerce-Price-amount,
html body.single-product .agency-single-price .agency-sale-price-ready .woocommerce-Price-amount bdi,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready .woocommerce-Price-amount,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready .woocommerce-Price-amount bdi {
align-items: center !important;
color: inherit !important;
direction: ltr !important;
display: inline-flex !important;
font: inherit !important;
gap: 3px !important;
line-height: 1 !important;
margin: 0 !important;
text-align: inherit !important;
white-space: nowrap !important;
width: auto !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready .woocommerce-Price-currencySymbol,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready .woocommerce-Price-currencySymbol {
color: inherit !important;
display: inline-flex !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: 1 !important;
margin: 0 !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready .woocommerce-Price-currencySymbol::before,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready .woocommerce-Price-currencySymbol::before {
color: inherit !important;
content: none !important;
display: none !important;
font-size: 0 !important;
font-weight: inherit !important;
line-height: 1 !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready .woocommerce-Price-currencySymbol svg,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready .woocommerce-Price-currencySymbol svg {
color: inherit !important;
display: block !important;
height: 0.9em !important;
width: 0.9em !important;
}
html body.single-product .agency-sale-save-badge {
align-items: center !important;
border: 1px solid #ff6f73 !important;
border-radius: 0 !important;
color: #111827 !important;
display: inline-flex !important;
flex: 0 0 auto !important;
font-size: 14px !important;
font-weight: 700 !important;
gap: 8px !important;
height: 30px !important;
line-height: 1 !important;
min-height: 30px !important;
padding: 0 8px 0 7px !important;
white-space: nowrap !important;
}
html body.single-product .agency-sale-save-text {
align-items: center !important;
direction: ltr !important;
display: inline-flex !important;
gap: 4px !important;
height: 100% !important;
line-height: 1 !important;
}
html body.single-product .agency-sale-save-currency {
color: currentColor !important;
display: block !important;
flex: 0 0 auto !important;
height: 16px !important;
width: 15px !important;
}
html body.single-product .agency-sale-save-amount,
html body.single-product .agency-sale-save-word {
color: currentColor !important;
display: inline-block !important;
font: inherit !important;
line-height: 1 !important;
}
html body.single-product .agency-sale-save-divider {
align-self: stretch !important;
border-left: 3px dotted #ff8b8e !important;
display: inline-block !important;
height: auto !important;
margin: 0 2px !important;
width: 0 !important;
}
html body.single-product .agency-sale-save-icon {
color: #ff3037 !important;
fill: none !important;
height: 21px !important;
stroke: currentColor !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
stroke-width: 2.8px !important;
width: 21px !important;
}
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready {
align-items: center !important;
direction: ltr !important;
display: inline-flex !important;
gap: 16px !important;
justify-content: flex-start !important;
line-height: 1 !important;
text-align: left !important;
width: auto !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready .agency-sale-save-badge,
html body.single-product .agency-single-price .wc-block-components-product-price.agency-sale-price-ready .agency-sale-save-badge,
html body.single-product .agency-single-price .price.agency-sale-price-ready .agency-sale-save-badge,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready .agency-sale-save-badge {
margin-inline-start: 0 !important;
margin-right: var(--agency-single-sale-badge-gap, 0px) !important;
}
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready del {
font-size: 15px !important;
}
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready ins {
font-size: 20px !important;
}
@media (max-width: 781px) {
html body.single-product .agency-single-price .agency-sale-price-ready {
gap: 12px !important;
}
html body.single-product .agency-sale-save-badge {
font-size: 13px !important;
height: 29px !important;
min-height: 29px !important;
padding: 0 7px !important;
}
html body.single-product .agency-sale-save-currency {
height: 15px !important;
width: 14px !important;
}
html body.single-product .agency-sale-save-icon {
height: 20px !important;
width: 20px !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready del,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready del {
font-size: 15px !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready ins,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready ins {
font-size: 20px !important;
}
}
/* Single product details rows: match the reference spacing and type scale. */
html body.single-product .agency-salla-specs {
margin-bottom: 22px !important;
width: 100% !important;
}
html body.single-product .agency-salla-spec-row {
align-items: center !important;
border-bottom: 1px solid #e5e7eb !important;
color: #827174 !important;
direction: rtl !important;
display: flex !important;
font-size: 15px !important;
font-weight: 400 !important;
gap: 32px !important;
justify-content: space-between !important;
line-height: 26px !important;
min-height: 46px !important;
padding: 10px 0 !important;
text-align: right !important;
width: 100% !important;
}
html body.single-product .agency-salla-spec-row strong {
color: #111827 !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 26px !important;
text-align: right !important;
}
html body.single-product .agency-salla-spec-row > span:last-child {
color: #827174 !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 26px !important;
text-align: left !important;
}
html body.single-product .agency-salla-spec-icon {
color: #827174 !important;
font-size: 13px !important;
margin-left: 8px !important;
}
html body.single-product .agency-salla-purchase-intro {
align-items: center !important;
column-gap: 32px !important;
direction: ltr !important;
grid-template-columns: minmax(180px, 1fr) minmax(120px, 1fr) !important;
margin-bottom: 16px !important;
min-height: 30px !important;
width: 100% !important;
}
html body.single-product .agency-salla-purchase-labels {
align-items: flex-end !important;
color: #111827 !important;
font-size: 15px !important;
font-weight: 700 !important;
gap: 26px !important;
line-height: 26px !important;
text-align: right !important;
}
/* Single product page: keep all visible typography at medium weight. */
html body.single-product,
html body.single-product :where(
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
b,
strong,
small,
label,
button,
input,
select,
textarea,
.agency-single-title,
.agency-single-price,
.agency-single-price *,
.agency-salla-price-repeat,
.agency-salla-price-repeat *,
.agency-sale-save-badge,
.agency-sale-save-badge *,
.agency-salla-panel,
.agency-salla-panel *,
.agency-salla-specs,
.agency-salla-specs *,
.agency-single-cart,
.agency-single-cart *,
.agency-salla-actions,
.agency-salla-actions *,
.agency-single-details-wrap,
.agency-single-details-wrap *,
.agency-single-related-wrap,
.agency-single-related-wrap *
) {
font-weight: 500 !important;
}
html body.single-product :where(
svg,
svg *,
img,
.sicon,
[class^="sicon-"],
[class*=" sicon-"],
.fa,
[class^="fa-"],
[class*=" fa-"],
.dashicons,
[class^="dashicons-"],
[class*=" dashicons-"]
) {
font-weight: inherit !important;
}
html body.single-product.single-product.single-product .wp-site-blocks.wp-site-blocks *:not(:where(
svg,
svg *,
img,
.sicon,
[class^="sicon-"],
[class*=" sicon-"],
.fa,
[class^="fa-"],
[class*=" fa-"],
.dashicons,
[class^="dashicons-"],
[class*=" dashicons-"]
)) {
font-weight: 500 !important;
}
/* Single product editor-tunable controls. */
html body.single-product main.agency-single-product-page,
html body.single-product .agency-single-product-page {
--agency-single-hero-gap: clamp(24px, 2.8vw, 46px);
--agency-single-title-size: 32px;
--agency-single-title-weight: 800;
--agency-single-title-price-gap: 2px;
--agency-single-price-tax-gap: 12px;
--agency-single-tax-stock-gap: 14px;
--agency-single-stock-tamara-gap: 30px;
--agency-single-tamara-specs-gap: 30px;
--agency-single-qty-label-weight: 500;
--agency-single-tabs-gap: 120px;
--agency-single-tabs-title-size: 27px;
--agency-single-description-size: 20px;
--agency-pay-badge-size: 34px;
--agency-pay-badge-font-size: 13px;
--agency-pay-snow-size: 34px;
--agency-pay-tamara-width: 38px;
--agency-pay-sbc-size: 42px;
--agency-pay-cod-size: 36px;
--agency-pay-tamara-size: 42px;
--agency-pay-apple-size: 24px;
--agency-pay-stc-size: 23px;
--agency-pay-bank-size: 31px;
--agency-pay-card-size: 24px;
}
html body.single-product .agency-single-product-hero {
gap: var(--agency-single-hero-gap, clamp(24px, 2.8vw, 46px)) !important;
}
html body.single-product .agency-single-title {
font-size: var(--agency-single-title-size, 32px) !important;
font-weight: var(--agency-single-title-weight, 800) !important;
font-variation-settings: "wght" var(--agency-single-title-weight, 800) !important;
margin-bottom: 0 !important;
}
html body.single-product .agency-single-price,
html body.single-product .agency-single-price .price,
html body.single-product .agency-single-price .woocommerce-Price-amount {
margin-bottom: var(--agency-single-price-tax-gap, 12px) !important;
}
html body.single-product .agency-single-price {
margin-top: var(--agency-single-title-price-gap, 2px) !important;
}
html body.single-product .agency-salla-tax-note {
margin-bottom: var(--agency-single-tax-stock-gap, 14px) !important;
}
html body.single-product .agency-salla-stock-line {
margin-bottom: var(--agency-single-stock-tamara-gap, 30px) !important;
}
html body.single-product .agency-salla-installments {
margin-top: 0 !important;
margin-bottom: var(--agency-single-tamara-specs-gap, 30px) !important;
}
html body.single-product .agency-single-cart form.cart:not(.variations_form)::before,
html body.single-product .agency-single-cart .woocommerce-variation-add-to-cart::before {
font-weight: var(--agency-single-qty-label-weight, 500) !important;
}
html body.single-product .agency-single-purchase-area .agency-salla-payments,
html body.single-product .agency-salla-details-payments {
gap: 18px 34px !important;
min-height: var(--agency-pay-sbc-size, 42px) !important;
}
html body.single-product .agency-pay-badge {
font-size: var(--agency-pay-badge-font-size, 13px) !important;
height: var(--agency-pay-badge-size, 34px) !important;
min-width: var(--agency-pay-badge-size, 34px) !important;
}
html body.single-product .agency-pay-snow {
font-size: var(--agency-pay-snow-size, 34px) !important;
}
html body.single-product .agency-pay-sbc {
height: var(--agency-pay-sbc-size, 42px) !important;
}
html body.single-product .agency-pay-cod {
height: var(--agency-pay-cod-size, 36px) !important;
}
html body.single-product .agency-pay-tamara {
height: var(--agency-pay-tamara-size, 42px) !important;
width: var(--agency-pay-tamara-width, 38px) !important;
}
html body.single-product .agency-pay-apple {
height: var(--agency-pay-apple-size, 24px) !important;
}
html body.single-product .agency-pay-stc {
height: var(--agency-pay-stc-size, 23px) !important;
}
html body.single-product .agency-pay-bank {
height: var(--agency-pay-bank-size, 31px) !important;
}
html body.single-product .agency-pay-credit,
html body.single-product .agency-pay-mada {
height: var(--agency-pay-card-size, 24px) !important;
}
html body.single-product .agency-salla-details-tabs {
gap: var(--agency-single-tabs-gap, 120px) !important;
}
html body.single-product .agency-salla-details-tab {
font-size: var(--agency-single-tabs-title-size, 27px) !important;
}
html body.single-product .agency-salla-details-content,
html body.single-product .agency-salla-details-content p,
html body.single-product .woocommerce-tabs .panel,
html body.single-product .woocommerce-tabs .panel p {
font-size: var(--agency-single-description-size, 20px) !important;
}
html body.single-product.single-product.single-product .wp-site-blocks.wp-site-blocks .agency-single-product-page.agency-single-product-page .agency-single-title.agency-single-title.wp-block-post-title {
font-size: var(--agency-single-title-size, 32px) !important;
font-weight: var(--agency-single-title-weight, 800) !important;
font-variation-settings: "wght" var(--agency-single-title-weight, 800) !important;
margin-bottom: 0 !important;
}
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .agency-single-price,
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .agency-single-price .price,
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .agency-single-price .woocommerce-Price-amount {
margin-bottom: var(--agency-single-price-tax-gap, 12px) !important;
}
html body.single-product.single-product.single-product .wp-site-blocks.wp-site-blocks .agency-single-product-page.agency-single-product-page .agency-single-price.agency-single-price {
margin-top: var(--agency-single-title-price-gap, 2px) !important;
margin-bottom: var(--agency-single-price-tax-gap, 12px) !important;
}
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .agency-salla-tax-note {
margin-bottom: var(--agency-single-tax-stock-gap, 14px) !important;
}
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .agency-salla-stock-line {
margin-bottom: var(--agency-single-stock-tamara-gap, 30px) !important;
}
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .agency-salla-installments {
margin-top: 0 !important;
margin-bottom: var(--agency-single-tamara-specs-gap, 30px) !important;
}
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .agency-salla-details-tabs {
gap: var(--agency-single-tabs-gap, 120px) !important;
}
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .agency-salla-details-tab {
font-size: var(--agency-single-tabs-title-size, 27px) !important;
}
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .agency-salla-details-content,
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .agency-salla-details-content p,
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .woocommerce-tabs .panel,
html body.single-product.single-product .wp-site-blocks .agency-single-product-page .woocommerce-tabs .panel p {
font-size: var(--agency-single-description-size, 20px) !important;
}
/* Homepage canvas: keep section backgrounds pure white. */
html:has(body.home),
html body.home,
html body.home .wp-site-blocks,
html body.home .wp-site-blocks > main,
html body.home main.wp-block-group,
html body.home .entry-content,
html body.home .wp-block-post-content,
html body.home .wp-block-group,
html body.home .wp-block-columns,
html body.home .wp-block-column,
html body.home .wp-block-cover,
html body.home .wp-block-query,
html body.home .wp-block-post-template,
html body.home .wp-block-gallery.is-style-agency-banner-slider,
html body.home .agency-main-categories-section,
html body.home .agency-categories-swiper,
html body.home .agency-products-container,
html body.home .agency-products-swiper,
html body.home .agency-brands-swiper,
html body.home .agency-reviews-section {
background: #fff !important;
background-color: #fff !important;
background-image: none !important;
}
html body.home .agency-home-block-line {
background-color: #fff !important;
}
/* Main categories: hide the accidental divider inserted above the visible subtitle. */
html body.home .agency-main-categories-heading + p.agency-main-categories-subtitle:empty + .agency-home-block-line {
display: none !important;
}
/* Homepage typography: keep all visible text at medium weight. */
html body.home,
html body.home .wp-site-blocks,
html body.home .wp-site-blocks :where(h1, h2, h3, h4, h5, h6, p, a, span, strong, em, mark, li, button, label, input, textarea, select, figcaption, div) {
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
}
/* Desktop main categories heading: use the lighter reference typography. */
@media (min-width: 782px) {
html body.home .agency-main-categories-heading,
html body.home .agency-main-categories-section > h2.wp-block-heading.has-text-align-center {
font-weight: 300 !important;
font-variation-settings: "wght" 300 !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
}
html body.home .agency-main-categories-heading + p:empty,
html body.home .agency-main-categories-section > h2.wp-block-heading.has-text-align-center + p:empty {
display: none !important;
margin: 0 !important;
}
html body.home .agency-main-categories-subtitle,
html body.home .agency-main-categories-subtitle :where(mark, span),
html body.home .agency-main-categories-section > h2.wp-block-heading.has-text-align-center ~ p.has-text-align-center,
html body.home .agency-main-categories-section > h2.wp-block-heading.has-text-align-center ~ p.has-text-align-center :where(mark, span) {
font-weight: 300 !important;
font-variation-settings: "wght" 300 !important;
margin-top: 0 !important;
margin-bottom: 18px !important;
}
html body.home .agency-main-categories-subtitle + .agency-home-block-line,
html body.home .agency-main-categories-section > h2.wp-block-heading.has-text-align-center ~ p.has-text-align-center + .agency-home-block-line {
margin-top: 14px !important;
margin-bottom: 40px !important;
}
}
/* Salla-style WooCommerce add-to-cart toast. */
.agency-add-cart-toast {
background: #fff;
border-radius: 8px;
box-shadow: 0 18px 45px rgba(17, 24, 39, 0.14);
box-sizing: border-box;
color: #111827;
direction: rtl;
font-family: Tajawal, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
left: 20px;
max-width: calc(100vw - 40px);
opacity: 0;
padding: 20px;
pointer-events: none;
position: fixed;
top: 20px;
transform: translateY(-12px);
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
visibility: hidden;
width: 400px;
z-index: 999999;
}
.agency-add-cart-toast.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
visibility: visible;
}
.agency-add-cart-toast__progress {
background: #f0f1f3;
height: 6px;
inset: 20px 20px auto 20px;
overflow: hidden;
position: absolute;
}
.agency-add-cart-toast__progress span {
background: #22c55e;
display: block;
height: 100%;
transform-origin: left center;
width: 100%;
}
.agency-add-cart-toast__header {
align-items: center;
border-bottom: 1px solid #edf0f4;
display: flex;
gap: 14px;
justify-content: space-between;
margin-top: 16px;
padding-bottom: 17px;
}
.agency-add-cart-toast__status {
align-items: center;
display: inline-flex;
gap: 8px;
justify-content: flex-start;
min-width: 0;
}
.agency-add-cart-toast__status span {
color: #111827;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
}
.agency-add-cart-toast__status i {
align-items: center;
background: #22c55e;
border-radius: 999px;
color: #fff;
display: inline-flex;
flex: 0 0 auto;
height: 18px;
justify-content: center;
width: 18px;
}
.agency-add-cart-toast svg {
display: block;
fill: none;
height: 16px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
width: 16px;
}
.agency-add-cart-toast__close {
align-items: center;
appearance: none;
background: transparent;
border: 0;
color: #827174;
cursor: pointer;
display: inline-flex;
flex: 0 0 auto;
height: 28px;
justify-content: center;
padding: 0;
width: 28px;
}
.agency-add-cart-toast__body {
align-items: center;
column-gap: 14px;
display: grid;
grid-template-columns: 76px minmax(0, 1fr) auto;
padding: 20px 0;
}
.agency-add-cart-toast__image {
aspect-ratio: 1;
background: #f5f5f5;
border-radius: 7px;
display: block;
height: 76px;
object-fit: cover;
width: 76px;
}
.agency-add-cart-toast__image[hidden] {
display: none;
}
.agency-add-cart-toast__content {
min-width: 0;
}
.agency-add-cart-toast__title {
color: #111827;
display: -webkit-box;
font-size: 15px;
font-weight: 700;
line-height: 1.45;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.agency-add-cart-toast__meta {
color: #8d7f82;
display: block;
font-size: 13px;
line-height: 1.5;
margin-top: 3px;
}
.agency-add-cart-toast__meta:empty {
display: none;
}
.agency-add-cart-toast__price {
color: #111827;
direction: rtl;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
text-align: left;
white-space: nowrap;
}
.agency-add-cart-toast__actions {
display: grid;
gap: 12px;
grid-template-columns: 1fr 1fr;
}
.agency-add-cart-toast__actions a {
align-items: center;
border: 1px solid #e2e8f0;
border-radius: 0;
box-sizing: border-box;
display: inline-flex;
font-size: 15px;
font-weight: 600;
gap: 8px;
height: 44px;
justify-content: center;
line-height: 1;
text-decoration: none;
}
.agency-add-cart-toast__checkout {
background: #2544e8;
border-color: #2544e8 !important;
color: #fff;
}
.agency-add-cart-toast__cart {
background: #fff;
color: #111827;
}
@media (max-width: 767px) {
.agency-add-cart-toast {
left: 12px;
max-width: none;
padding: 18px;
right: 12px;
top: 12px;
width: auto;
}
.agency-add-cart-toast__progress {
inset: 18px 18px auto 18px;
}
.agency-add-cart-toast__header {
margin-top: 14px;
padding-bottom: 14px;
}
.agency-add-cart-toast__body {
grid-template-columns: 70px minmax(0, 1fr) auto;
padding: 18px 0;
}
.agency-add-cart-toast__image {
height: 70px;
width: 70px;
}
.agency-add-cart-toast__title,
.agency-add-cart-toast__actions a {
font-size: 14px;
}
.agency-add-cart-toast__price {
font-size: 14px;
}
}
@media (max-width: 767px) {
html body.home.wp-singular .agency-products-swiper .agency-product-action--cart,
html body.home.wp-singular .s-products-slider-wrapper button.s-button-element.s-button-wide,
html body.home.wp-singular .s-products-slider-wrapper .s-button-element.s-button-wide,
html body.home.wp-singular .s-products-slider-wrapper salla-button .s-button-element {
border-radius: 0 0 12px 12px !important;
}
}
/* Final mobile-only homepage product carousel override for cached front-page HTML. */
@media (max-width: 767px) {
html body.home .agency-products-container {
margin-top: 28px !important;
margin-bottom: 64px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html body.home .agency-products-container .s-slider-block__title-right,
html body.home salla-products-slider .s-slider-block__title,
html body.home .s-products-slider-wrapper .s-slider-block__title {
align-items: center !important;
border-bottom: 1px solid #e5e7eb !important;
display: flex !important;
gap: 12px !important;
justify-content: space-between !important;
margin: 0 0 16px !important;
padding: 0 20px 10px 32px !important;
position: relative !important;
}
html body.home .agency-products-container .s-slider-block__title-right::after,
html body.home salla-products-slider .s-slider-block__title::after,
html body.home .s-products-slider-wrapper .s-slider-block__title::after {
background: #163bd2 !important;
bottom: -1px !important;
content: "" !important;
height: 2px !important;
max-width: calc(100% - 150px) !important;
position: absolute !important;
right: 32px !important;
width: 200px !important;
}
html body.home .agency-products-container .s-slider-block__title-right h2,
html body.home salla-products-slider .s-slider-block__title h2,
html body.home .s-products-slider-wrapper .s-slider-block__title h2 {
border: 0 !important;
color: #111827 !important;
font-size: 18px !important;
font-weight: 700 !important;
font-variation-settings: "wght" 700 !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
}
html body.home .agency-products-container .agency-view-all-btn,
html body.home salla-products-slider .s-slider-block__display-all,
html body.home .s-products-slider-wrapper .s-slider-block__display-all {
align-items: center !important;
background: #fff !important;
border: 1px solid #163bd2 !important;
border-radius: 999px !important;
color: #163bd2 !important;
display: inline-flex !important;
flex: 0 0 auto !important;
font-size: 14px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
justify-content: center !important;
line-height: 1 !important;
min-height: 32px !important;
padding: 5px 10px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
html body.home .agency-products-swiper .swiper-wrapper,
html body.home .s-products-slider-wrapper .swiper-wrapper {
align-items: stretch !important;
}
html body.home .agency-products-swiper .swiper-wrapper > .swiper-slide,
html body.home .s-products-slider-wrapper .swiper-slide,
html body.home .s-products-slider-card {
align-self: stretch !important;
display: flex !important;
height: auto !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
html body.home .agency-products-swiper .swiper-slide > .agency-product-card,
html body.home .s-products-slider-wrapper custom-salla-product-card,
html body.home .s-products-slider-wrapper .product-card {
background: #fff !important;
display: flex !important;
flex: 1 1 0 !important;
flex-direction: column !important;
height: auto !important;
justify-content: flex-start !important;
min-height: 100% !important;
position: relative !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-card-image,
html body.home .s-products-slider-wrapper .product-card__image {
background: #fff !important;
margin: 0 0 10px !important;
padding: 0 !important;
}
html body.home .agency-products-swiper .agency-product-title,
html body.home .s-products-slider-wrapper .product-card__title,
html body.home .s-products-slider-wrapper .product-card__content a {
color: #111827 !important;
font-size: 15px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
letter-spacing: 0 !important;
line-height: 1.45 !important;
margin: 0 0 6px !important;
min-height: 42px !important;
padding: 0 4px !important;
text-align: center !important;
text-decoration: none !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-product-price,
html body.home .agency-products-swiper .agency-product-card--live .agency-product-price-container,
html body.home .s-products-slider-wrapper .product-card__price {
align-items: center !important;
display: flex !important;
flex-wrap: wrap !important;
font-size: 15px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
gap: 6px !important;
justify-content: center !important;
line-height: 1.25 !important;
margin: 4px 0 8px !important;
text-align: center !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-product-old-price,
html body.home .s-products-slider-wrapper .product-card__price del {
color: #9ca3af !important;
font-size: 14px !important;
font-weight: 400 !important;
font-variation-settings: "wght" 400 !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-product-new-price,
html body.home .s-products-slider-wrapper .product-card__price ins,
html body.home .s-products-slider-wrapper .product-card__price .text-red-600 {
color: #dc2626 !important;
font-size: 15px !important;
font-weight: 700 !important;
font-variation-settings: "wght" 700 !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-product-discount-line,
html body.home .s-products-slider-wrapper .product-card__count {
color: #dc2626 !important;
font-size: 15px !important;
font-weight: 700 !important;
font-variation-settings: "wght" 700 !important;
line-height: 1.3 !important;
margin: 0 0 10px !important;
text-align: center !important;
}
html body.home .agency-products-swiper .agency-product-actions {
display: block !important;
margin-top: auto !important;
padding: 0 !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-action--view,
html body.home .agency-products-swiper .agency-product-action--heart {
background: #fff !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 2px 8px rgba(17, 24, 39, .12) !important;
color: #111827 !important;
height: 34px !important;
min-height: 34px !important;
min-width: 34px !important;
padding: 0 !important;
position: absolute !important;
right: 8px !important;
width: 34px !important;
z-index: 3 !important;
}
html body.home .agency-products-swiper .agency-product-action--heart {
top: 8px !important;
}
html body.home .agency-products-swiper .agency-product-action--view {
top: 48px !important;
}
html body.home .agency-products-swiper .agency-product-action--cart,
html body.home .s-products-slider-wrapper button.s-button-element.s-button-wide,
html body.home .s-products-slider-wrapper .s-button-element.s-button-wide,
html body.home .s-products-slider-wrapper salla-button .s-button-element {
align-items: center !important;
background: #827174 !important;
border: 1px solid #827174 !important;
border-radius: 0 0 12px 12px !important;
box-shadow: none !important;
color: #fff !important;
direction: rtl !important;
display: flex !important;
flex: 0 0 auto !important;
font-size: 14px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
gap: 8px !important;
height: 33px !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
min-height: 33px !important;
min-width: 0 !important;
overflow: hidden !important;
padding: 6px 10px !important;
position: relative !important;
text-decoration: none !important;
transform: none !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-action--cart svg {
display: none !important;
}
html body.home .agency-products-swiper .agency-product-action--cart[data-tooltip]::before {
background: transparent !important;
border: 0 !important;
bottom: auto !important;
box-shadow: none !important;
color: #fff !important;
content: "+" !important;
font-family: inherit !important;
font-size: 20px !important;
font-weight: 300 !important;
left: 12px !important;
line-height: 1 !important;
opacity: 1 !important;
padding: 0 !important;
pointer-events: none !important;
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
visibility: visible !important;
z-index: 1 !important;
}
html body.home .agency-products-swiper .agency-product-action--cart[data-tooltip]::after {
background: transparent !important;
border: 0 !important;
color: #fff !important;
content: attr(aria-label) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
opacity: 1 !important;
padding: 0 !important;
position: static !important;
transform: none !important;
visibility: visible !important;
}
html body.home .s-products-slider-wrapper .product-card__content,
html body.home .s-products-slider-wrapper .product-card__content-wrapper {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
padding: 6px 6px 0 !important;
text-align: center !important;
}
html body.home .s-products-slider-wrapper .product-card__enhanced-mini-cart,
html body.home .s-products-slider-wrapper .product-card__buttons,
html body.home .s-products-slider-wrapper salla-add-product-button,
html body.home .s-products-slider-wrapper salla-button {
display: block !important;
margin-top: auto !important;
width: 100% !important;
}
}
/* Homepage mobile product carousels: compact Salla-style phone layout only. */
@media (max-width: 767px) {
html body.home .agency-products-container {
margin-top: 28px !important;
margin-bottom: 64px !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html body.home .agency-products-container .s-slider-block__title-right,
html body.home salla-products-slider .s-slider-block__title,
html body.home .s-products-slider-wrapper .s-slider-block__title {
align-items: center !important;
border-bottom: 1px solid #e5e7eb !important;
display: flex !important;
gap: 12px !important;
justify-content: space-between !important;
margin: 0 0 16px !important;
padding: 0 20px 10px 32px !important;
position: relative !important;
}
html body.home .agency-products-container .s-slider-block__title-right::after,
html body.home salla-products-slider .s-slider-block__title::after,
html body.home .s-products-slider-wrapper .s-slider-block__title::after {
background: #163bd2 !important;
bottom: -1px !important;
content: "" !important;
height: 2px !important;
max-width: calc(100% - 150px) !important;
position: absolute !important;
right: 32px !important;
width: 200px !important;
}
html body.home .agency-products-container .s-slider-block__title-right h2,
html body.home salla-products-slider .s-slider-block__title h2,
html body.home .s-products-slider-wrapper .s-slider-block__title h2 {
border: 0 !important;
color: #111827 !important;
font-size: 18px !important;
font-weight: 700 !important;
font-variation-settings: "wght" 700 !important;
line-height: 1.2 !important;
margin: 0 !important;
padding: 0 !important;
text-align: right !important;
}
html body.home .agency-products-container .agency-view-all-btn,
html body.home salla-products-slider .s-slider-block__display-all,
html body.home .s-products-slider-wrapper .s-slider-block__display-all {
align-items: center !important;
background: #fff !important;
border: 1px solid #163bd2 !important;
border-radius: 999px !important;
color: #163bd2 !important;
display: inline-flex !important;
flex: 0 0 auto !important;
font-size: 14px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
justify-content: center !important;
line-height: 1 !important;
min-height: 32px !important;
padding: 5px 10px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
html body.home .agency-products-swiper .swiper-wrapper,
html body.home .s-products-slider-wrapper .swiper-wrapper {
align-items: stretch !important;
}
html body.home .agency-products-swiper .swiper-wrapper > .swiper-slide,
html body.home .s-products-slider-wrapper .swiper-slide,
html body.home .s-products-slider-card {
align-self: stretch !important;
display: flex !important;
height: auto !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
html body.home .agency-products-swiper .swiper-slide > .agency-product-card,
html body.home .s-products-slider-wrapper custom-salla-product-card,
html body.home .s-products-slider-wrapper .product-card {
background: #fff !important;
display: flex !important;
flex: 1 1 0 !important;
flex-direction: column !important;
height: auto !important;
justify-content: flex-start !important;
min-height: 100% !important;
position: relative !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-card-image,
html body.home .s-products-slider-wrapper .product-card__image {
background: #fff !important;
margin: 0 0 10px !important;
padding: 0 !important;
}
html body.home .agency-products-swiper .agency-product-title,
html body.home .s-products-slider-wrapper .product-card__title,
html body.home .s-products-slider-wrapper .product-card__content a {
color: #111827 !important;
font-size: 15px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
letter-spacing: 0 !important;
line-height: 1.45 !important;
margin: 0 0 6px !important;
min-height: 42px !important;
padding: 0 4px !important;
text-align: center !important;
text-decoration: none !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-product-price,
html body.home .agency-products-swiper .agency-product-card--live .agency-product-price-container,
html body.home .s-products-slider-wrapper .product-card__price {
align-items: center !important;
display: flex !important;
flex-wrap: wrap !important;
font-size: 15px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
gap: 6px !important;
justify-content: center !important;
line-height: 1.25 !important;
margin: 4px 0 8px !important;
text-align: center !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-product-old-price,
html body.home .s-products-slider-wrapper .product-card__price del {
color: #9ca3af !important;
font-size: 14px !important;
font-weight: 400 !important;
font-variation-settings: "wght" 400 !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-product-new-price,
html body.home .s-products-slider-wrapper .product-card__price ins,
html body.home .s-products-slider-wrapper .product-card__price .text-red-600 {
color: #dc2626 !important;
font-size: 15px !important;
font-weight: 700 !important;
font-variation-settings: "wght" 700 !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-product-discount-line,
html body.home .s-products-slider-wrapper .product-card__count {
color: #dc2626 !important;
font-size: 15px !important;
font-weight: 700 !important;
font-variation-settings: "wght" 700 !important;
line-height: 1.3 !important;
margin: 0 0 10px !important;
text-align: center !important;
}
html body.home .agency-products-swiper .agency-product-actions {
display: block !important;
margin-top: auto !important;
padding: 0 !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-action--view,
html body.home .agency-products-swiper .agency-product-action--heart {
background: #fff !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 2px 8px rgba(17, 24, 39, .12) !important;
color: #111827 !important;
height: 34px !important;
min-height: 34px !important;
min-width: 34px !important;
padding: 0 !important;
position: absolute !important;
right: 8px !important;
width: 34px !important;
z-index: 3 !important;
}
html body.home .agency-products-swiper .agency-product-action--heart {
top: 8px !important;
}
html body.home .agency-products-swiper .agency-product-action--view {
top: 48px !important;
}
html body.home .agency-products-swiper .agency-product-action--cart,
html body.home .s-products-slider-wrapper button.s-button-element.s-button-wide,
html body.home .s-products-slider-wrapper .s-button-element.s-button-wide,
html body.home .s-products-slider-wrapper salla-button .s-button-element {
align-items: center !important;
background: #827174 !important;
border: 1px solid #827174 !important;
border-radius: 0 0 12px 12px !important;
box-shadow: none !important;
color: #fff !important;
direction: rtl !important;
display: flex !important;
flex: 0 0 auto !important;
font-size: 14px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
gap: 8px !important;
height: 33px !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
min-height: 33px !important;
min-width: 0 !important;
overflow: hidden !important;
padding: 6px 10px !important;
position: relative !important;
text-decoration: none !important;
transform: none !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-action--cart svg {
display: none !important;
}
html body.home .agency-products-swiper .agency-product-action--cart[data-tooltip]::before {
background: transparent !important;
border: 0 !important;
bottom: auto !important;
box-shadow: none !important;
color: #fff !important;
content: "+" !important;
font-family: inherit !important;
font-size: 20px !important;
font-weight: 300 !important;
left: 12px !important;
line-height: 1 !important;
opacity: 1 !important;
padding: 0 !important;
pointer-events: none !important;
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
visibility: visible !important;
z-index: 1 !important;
}
html body.home .agency-products-swiper .agency-product-action--cart[data-tooltip]::after {
background: transparent !important;
border: 0 !important;
color: #fff !important;
content: attr(aria-label) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
opacity: 1 !important;
padding: 0 !important;
position: static !important;
transform: none !important;
visibility: visible !important;
}
html body.home .s-products-slider-wrapper .product-card__content,
html body.home .s-products-slider-wrapper .product-card__content-wrapper {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
padding: 6px 6px 0 !important;
text-align: center !important;
}
html body.home .s-products-slider-wrapper .product-card__enhanced-mini-cart,
html body.home .s-products-slider-wrapper .product-card__buttons,
html body.home .s-products-slider-wrapper salla-add-product-button,
html body.home .s-products-slider-wrapper salla-button {
display: block !important;
margin-top: auto !important;
width: 100% !important;
}
}
html body.home .agency-main-categories-grid[style*="--agency-main-category-title-size"] .agency-main-category-title,
html body.home .agency-main-categories-grid[style*="--agency-main-category-title-size"] .agency-main-category-title :where(span, strong, em, mark) {
font-size: var(--agency-main-category-title-size) !important;
}
html body.home .agency-main-categories-grid .agency-main-category-title a,
html body.home .agency-main-categories-grid .agency-main-category-description a,
html body.home .agency-main-categories-grid .agency-main-category-title a:hover,
html body.home .agency-main-categories-grid .agency-main-category-description a:hover,
html body.home .agency-main-categories-grid .agency-main-category-title a:focus,
html body.home .agency-main-categories-grid .agency-main-category-description a:focus {
color: inherit !important;
text-decoration: none !important;
}
html body.home .agency-main-categories-grid[style*="--agency-main-category-title-weight"] .agency-main-category-title,
html body.home .agency-main-categories-grid[style*="--agency-main-category-title-weight"] .agency-main-category-title :where(span, strong, em, mark) {
font-weight: var(--agency-main-category-title-weight) !important;
font-variation-settings: "wght" var(--agency-main-category-title-weight) !important;
}
html body.home .agency-main-categories-grid[style*="--agency-main-category-description-size"] .agency-main-category-description,
html body.home .agency-main-categories-grid[style*="--agency-main-category-description-size"] .agency-main-category-description :where(span, strong, em, mark) {
font-size: var(--agency-main-category-description-size) !important;
}
html body.home .agency-main-categories-grid[style*="--agency-main-category-description-weight"] .agency-main-category-description,
html body.home .agency-main-categories-grid[style*="--agency-main-category-description-weight"] .agency-main-category-description :where(span, strong, em, mark) {
font-weight: var(--agency-main-category-description-weight) !important;
font-variation-settings: "wght" var(--agency-main-category-description-weight) !important;
}
html body.home .agency-main-categories-grid[style*="--agency-main-category-description-color"] .agency-main-category-description,
html body.home .agency-main-categories-grid[style*="--agency-main-category-description-color"] .agency-main-category-description :where(span, strong, em, mark) {
color: var(--agency-main-category-description-color) !important;
}
/* Main category cards: make the description/subtext lighter on desktop. */
@media (min-width: 782px) {
html body.home .agency-main-category-description,
html body.home .agency-main-category-description :where(span, strong, em, mark) {
font-weight: 300 !important;
font-variation-settings: "wght" 300 !important;
}
}
@media (max-width: 767px) {
html body.home .agency-main-categories-grid {
display: grid !important;
grid-template-columns: repeat(var(--agency-main-mobile-cols, 2), minmax(0, 1fr)) !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 672px !important;
width: calc(100% - 48px) !important;
}
}
/* Homepage overflow: stop the whole page from sliding sideways on trackpads. */
html:has(body.home),
html body.home {
max-width: 100% !important;
overflow-x: hidden !important;
}
html body.home .wp-site-blocks,
html body.home main,
html body.home .entry-content,
html body.home .wp-block-post-content {
max-width: 100% !important;
overflow-x: clip !important;
}
html body.home .agency-swiper-block,
html body.home .wp-block-gallery.alignfull,
html body.home .wp-block-gallery.is-style-agency-banner-slider {
max-width: 100% !important;
}
/* Homepage products: keep every carousel image pinned to the same top line. */
html body.home .agency-products-container {
margin-bottom: 78px !important;
padding-bottom: 18px !important;
}
html body.home .agency-products-swiper,
html body.home .agency-products-swiper .swiper-wrapper {
align-items: flex-start !important;
}
html body.home .agency-products-swiper .swiper-wrapper > .swiper-slide {
align-self: flex-start !important;
display: block !important;
height: auto !important;
margin-top: 0 !important;
margin-block-start: 0 !important;
padding-top: 0 !important;
}
html body.home .agency-products-swiper .swiper-slide > .agency-product-card {
display: flex !important;
flex-direction: column !important;
height: auto !important;
justify-content: flex-start !important;
margin-top: 0 !important;
margin-block-start: 0 !important;
min-height: 0 !important;
padding-top: 0 !important;
}
html body.home .agency-products-swiper .agency-product-card-image {
align-items: flex-start !important;
aspect-ratio: 1 / 1 !important;
background: #fff !important;
background-color: #fff !important;
display: flex !important;
height: auto !important;
justify-content: center !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
max-height: none !important;
min-height: 0 !important;
padding: 0 !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-card-image > a,
html body.home .agency-products-swiper .agency-product-image-link {
align-items: flex-start !important;
background: #fff !important;
background-color: #fff !important;
display: flex !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
justify-content: center !important;
max-height: none !important;
min-height: 0 !important;
overflow: hidden !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-card-image img {
background: #fff !important;
background-color: #fff !important;
display: block !important;
height: 100% !important;
max-height: none !important;
max-width: 100% !important;
mix-blend-mode: normal !important;
object-fit: contain !important;
object-position: center center !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-title {
margin-top: 0 !important;
}
html body.home .agency-products-swiper .agency-product-actions {
direction: ltr !important;
display: flex !important;
flex-direction: row !important;
gap: 14px !important;
justify-content: center !important;
margin-top: 12px !important;
}
html body.home .agency-products-swiper .agency-product-action--cart {
order: 1 !important;
}
html body.home .agency-products-swiper .agency-product-action--view {
order: 2 !important;
}
html body.home .agency-products-swiper .agency-product-action--heart {
order: 3 !important;
}
html body.home .agency-products-swiper .agency-product-action--heart,
html body.home .agency-products-swiper .agency-product-action--heart:hover,
html body.home .agency-products-swiper .agency-product-action--heart:focus-visible {
background: #fff !important;
background-color: #fff !important;
border-color: #e5e7eb !important;
color: #6b7280 !important;
box-shadow: none !important;
}
html body.home .agency-products-swiper .agency-product-action--heart.is-active,
html body.home .agency-products-swiper .agency-product-action--heart.active,
html body.home .agency-products-swiper .agency-product-action--heart.added,
html body.home .agency-products-swiper .agency-product-action--heart.is-in-wishlist {
background: #fff !important;
background-color: #fff !important;
border-color: #e5e7eb !important;
color: #dc2626 !important;
box-shadow: none !important;
}
html body.home .agency-products-swiper .agency-product-action--heart svg,
html body.home .agency-products-swiper .agency-product-action--heart svg * {
fill: none !important;
stroke: currentColor !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-product-price,
html body.home .agency-products-swiper .agency-product-card--live .agency-product-price-container {
align-items: center !important;
color: #827174 !important;
display: inline-flex !important;
flex-wrap: wrap !important;
font-size: 18px !important;
font-weight: 700 !important;
font-variation-settings: "wght" 700 !important;
gap: 0.28em !important;
justify-content: center !important;
line-height: 1.25 !important;
margin: 14px 0 15px !important;
text-align: center !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-money {
align-items: baseline !important;
direction: ltr !important;
display: inline-flex !important;
flex-direction: row !important;
gap: 0.28em !important;
justify-content: center !important;
unicode-bidi: isolate !important;
white-space: nowrap !important;
}
html body.home .agency-products-swiper .agency-product-card--live .agency-sar-symbol {
display: inline-block !important;
flex: 0 0 auto !important;
height: 0.86em !important;
vertical-align: -0.03em !important;
width: 0.77em !important;
}
@media (min-width: 782px) {
html body.home .agency-products-swiper .agency-product-card-image {
height: auto !important;
}
}
@media (max-width: 781px) {
html body.home .agency-products-swiper .agency-product-card-image {
height: auto !important;
}
}
/* Homepage double banner: static two-image strip between brands and reviews. */
html body.home .agency-home-double-banner {
background: #fff !important;
margin: 64px auto 0 !important;
max-width: 100% !important;
padding: 0 24px !important;
}
html body.home .agency-home-double-banner__inner {
direction: rtl;
display: flex;
gap: 16px;
margin: 0 auto;
max-width: 1880px;
width: 100%;
}
html body.home .agency-home-double-banner__item {
border-radius: 8px;
display: block;
flex: 1 1 0;
overflow: hidden;
text-decoration: none !important;
}
html body.home .agency-home-double-banner__item img {
aspect-ratio: 4 / 1;
border: 0;
border-radius: 8px;
display: block;
height: auto;
object-fit: cover;
width: 100%;
}
@media (max-width: 767px) {
html body.home .agency-home-double-banner {
margin-top: 40px !important;
padding: 0 16px !important;
}
html body.home .agency-home-double-banner__inner {
flex-direction: column;
gap: 8px;
}
}
/* Homepage reviews: keep cached pages visually aligned with the Salla-style carousel reference. */
html body.home .agency-reviews-section .s-section-header h2::after {
content: " ✨";
display: inline-block;
margin-inline-start: 8px;
}
html body.home .agency-reviews-section .s-section-header.agency-reviews-view-all-row {
display: block !important;
gap: 0 !important;
margin-bottom: 40px !important;
margin-top: 0 !important;
max-width: none !important;
text-align: center !important;
}
html body.home .agency-reviews-section .s-section-header.agency-reviews-view-all-row::before,
html body.home .agency-reviews-section .s-section-header.agency-reviews-view-all-row::after {
content: none !important;
display: none !important;
}
html body.home .agency-reviews-section .agency-reviews-container > div:has(.agency-view-all-btn) {
align-items: center !important;
display: flex !important;
gap: 32px !important;
margin: 44px auto 0 !important;
max-width: 100% !important;
text-align: center !important;
}
html body.home .agency-reviews-section .agency-reviews-container > div:has(.agency-view-all-btn)::before,
html body.home .agency-reviews-section .agency-reviews-container > div:has(.agency-view-all-btn)::after {
background: #e5e7eb !important;
content: "";
display: block !important;
flex: 1 1 0 !important;
height: 1px !important;
}
html body.home .agency-reviews-section .agency-view-all-btn {
align-items: center !important;
background: #fff !important;
border: 1px solid #163bd2 !important;
border-radius: 0 !important;
color: #163bd2 !important;
display: inline-flex !important;
font-size: 16px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
gap: 8px !important;
height: 42px !important;
justify-content: center !important;
line-height: 1 !important;
padding: 0 14px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
html body.home .agency-reviews-section .agency-view-all-btn svg {
height: 18px !important;
margin: 0 !important;
width: 18px !important;
}
html body.home .agency-reviews-section .agency-reviews-container > .swiper-slide {
display: none !important;
}
html body.home .agency-reviews-section .agency-reviews-swiper {
cursor: grab !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-behavior: smooth !important;
scroll-snap-type: x mandatory !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
html body.home .agency-reviews-section .agency-reviews-swiper::-webkit-scrollbar {
display: none !important;
}
html body.home .agency-reviews-section .agency-reviews-swiper.agency-reviews-dragging {
cursor: grabbing !important;
}
html body.home .agency-reviews-section .agency-reviews-swiper .swiper-wrapper {
display: flex !important;
gap: 30px !important;
transform: none !important;
}
html body.home .agency-reviews-section .agency-reviews-swiper .swiper-slide {
display: block !important;
flex: 0 0 calc((100% - 60px) / 3) !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: calc((100% - 60px) / 3) !important;
min-width: calc((100% - 60px) / 3) !important;
scroll-snap-align: start !important;
width: calc((100% - 60px) / 3) !important;
}
html body.home .agency-reviews-section .agency-reviews-swiper > .swiper-slide {
display: none !important;
}
@media (max-width: 781px) {
html body.home .agency-reviews-section .agency-reviews-swiper .swiper-wrapper {
gap: 18px !important;
}
html body.home .agency-reviews-section .agency-reviews-swiper .swiper-slide {
flex-basis: calc((100% - 18px) / 1.15) !important;
max-width: calc((100% - 18px) / 1.15) !important;
min-width: calc((100% - 18px) / 1.15) !important;
width: calc((100% - 18px) / 1.15) !important;
}
}
/* Single product phone: prevent off-canvas gallery slides from creating a blank horizontal page. */
@media (max-width: 781px) {
html:has(body.single-product),
html body.single-product,
body.single-product {
max-width: 100vw !important;
overflow-x: hidden !important;
overscroll-behavior-x: none !important;
width: 100% !important;
}
body.single-product .wp-site-blocks,
body.single-product main.agency-single-product-page,
body.single-product .agency-single-product-page,
body.single-product .agency-single-breadcrumbs,
body.single-product .agency-single-product-hero,
body.single-product .agency-single-gallery-column,
body.single-product .agency-single-summary-column,
body.single-product .agency-single-details-wrap,
body.single-product .agency-single-related-wrap {
box-sizing: border-box !important;
max-width: 100vw !important;
min-width: 0 !important;
overflow-x: hidden !important;
}
body.single-product .agency-single-gallery,
body.single-product .agency-single-gallery .woocommerce-product-gallery,
body.single-product .agency-single-gallery .flex-viewport {
contain: paint !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery__wrapper {
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
body.single-product .agency-single-gallery .woocommerce-product-gallery__image,
body.single-product .agency-single-gallery .woocommerce-product-gallery__image > a,
body.single-product .agency-single-gallery .woocommerce-product-gallery__image img:not(.zoomImg) {
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
}
/* --- Dynamic Control Overrides --- */
html body.single-product .agency-single-breadcrumbs,
html body.single-product .agency-single-product-hero,
html body.single-product .agency-single-details-wrap,
html body.single-product .agency-single-related-wrap {
max-width: min(var(--agency-single-page-width, 1240px), calc(100vw - 112px)) !important;
width: min(var(--agency-single-page-width, 1240px), calc(100vw - 112px)) !important;
}
html body.single-product .agency-single-breadcrumbs,
html body.single-product .woocommerce-breadcrumb,
html body.single-product .wp-block-woocommerce-breadcrumbs,
html body.single-product .wp-block-breadcrumbs {
font-size: var(--agency-single-breadcrumb-size, 14px) !important;
margin-bottom: var(--agency-single-breadcrumb-margin-bottom, 20px) !important;
}
html body.single-product .agency-single-breadcrumbs *,
html body.single-product .woocommerce-breadcrumb *,
html body.single-product .wp-block-woocommerce-breadcrumbs *,
html body.single-product .wp-block-breadcrumbs * {
font-size: var(--agency-single-breadcrumb-size, 14px) !important;
}
html body.single-product .agency-single-sku .wc-block-components-product-sku__label,
html body.single-product .product_meta .sku_wrapper {
font-size: var(--agency-single-model-label-size, 12px) !important;
}
html body.single-product .agency-single-sku,
html body.single-product .product_meta .sku_wrapper {
margin-bottom: var(--agency-single-model-price-gap, 10px) !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready ins .woocommerce-Price-amount,
html body.single-product .agency-single-price .agency-sale-price-ready {
font-size: var(--agency-single-repeat-price-size, 22px) !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready ins {
margin-inline-end: 0 !important;
margin-right: 0 !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready del {
margin-inline-end: var(--agency-single-sale-price-gap, 0px) !important;
margin-right: var(--agency-single-sale-price-gap, 0px) !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready,
html body.single-product .agency-single-price .wc-block-components-product-price.agency-sale-price-ready,
html body.single-product .agency-single-price .price.agency-sale-price-ready,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready {
gap: 0 !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready ins,
html body.single-product .agency-single-price .wc-block-components-product-price.agency-sale-price-ready ins,
html body.single-product .agency-single-price .price.agency-sale-price-ready ins,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready ins {
margin-inline-end: 0 !important;
margin-right: 0 !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready del,
html body.single-product .agency-single-price .wc-block-components-product-price.agency-sale-price-ready del,
html body.single-product .agency-single-price .price.agency-sale-price-ready del,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready del {
margin-inline-end: var(--agency-single-sale-price-gap, 0px) !important;
margin-right: var(--agency-single-sale-price-gap, 0px) !important;
}
html body.single-product .agency-single-cart .quantity input.qty {
padding-left: var(--agency-single-qty-number-padding-x, 10px) !important;
padding-right: var(--agency-single-qty-number-padding-x, 10px) !important;
margin-left: var(--agency-single-qty-number-margin-x, 0px) !important;
margin-right: var(--agency-single-qty-number-margin-x, 0px) !important;
}
html body.single-product .agency-single-details-wrap {
padding-top: var(--agency-single-tabs-top-gap, 42px) !important;
}
/* Site Editor font-weight bridge for homepage category heading. */
html body.home .agency-main-categories-heading[style*="font-weight:100"],
html body.home .agency-main-categories-heading[style*="font-weight: 100"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:100"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 100"] {
font-weight: 100 !important;
font-variation-settings: "wght" 100 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:200"],
html body.home .agency-main-categories-heading[style*="font-weight: 200"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:200"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 200"] {
font-weight: 200 !important;
font-variation-settings: "wght" 200 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:300"],
html body.home .agency-main-categories-heading[style*="font-weight: 300"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:300"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 300"] {
font-weight: 300 !important;
font-variation-settings: "wght" 300 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:400"],
html body.home .agency-main-categories-heading[style*="font-weight: 400"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:400"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 400"] {
font-weight: 400 !important;
font-variation-settings: "wght" 400 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:500"],
html body.home .agency-main-categories-heading[style*="font-weight: 500"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:500"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 500"] {
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:600"],
html body.home .agency-main-categories-heading[style*="font-weight: 600"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:600"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 600"] {
font-weight: 600 !important;
font-variation-settings: "wght" 600 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:700"],
html body.home .agency-main-categories-heading[style*="font-weight: 700"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:700"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 700"] {
font-weight: 700 !important;
font-variation-settings: "wght" 700 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:800"],
html body.home .agency-main-categories-heading[style*="font-weight: 800"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:800"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 800"] {
font-weight: 800 !important;
font-variation-settings: "wght" 800 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:900"],
html body.home .agency-main-categories-heading[style*="font-weight: 900"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:900"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 900"] {
font-weight: 900 !important;
font-variation-settings: "wght" 900 !important;
}
/* Site Editor font-weight bridge for homepage category heading. */
html body.home .agency-main-categories-heading[style*="font-weight:100"],
html body.home .agency-main-categories-heading[style*="font-weight: 100"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:100"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 100"] {
font-weight: 100 !important;
font-variation-settings: "wght" 100 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:200"],
html body.home .agency-main-categories-heading[style*="font-weight: 200"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:200"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 200"] {
font-weight: 200 !important;
font-variation-settings: "wght" 200 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:300"],
html body.home .agency-main-categories-heading[style*="font-weight: 300"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:300"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 300"] {
font-weight: 300 !important;
font-variation-settings: "wght" 300 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:400"],
html body.home .agency-main-categories-heading[style*="font-weight: 400"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:400"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 400"] {
font-weight: 400 !important;
font-variation-settings: "wght" 400 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:500"],
html body.home .agency-main-categories-heading[style*="font-weight: 500"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:500"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 500"] {
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:600"],
html body.home .agency-main-categories-heading[style*="font-weight: 600"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:600"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 600"] {
font-weight: 600 !important;
font-variation-settings: "wght" 600 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:700"],
html body.home .agency-main-categories-heading[style*="font-weight: 700"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:700"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 700"] {
font-weight: 700 !important;
font-variation-settings: "wght" 700 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:800"],
html body.home .agency-main-categories-heading[style*="font-weight: 800"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:800"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 800"] {
font-weight: 800 !important;
font-variation-settings: "wght" 800 !important;
}
html body.home .agency-main-categories-heading[style*="font-weight:900"],
html body.home .agency-main-categories-heading[style*="font-weight: 900"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight:900"],
html body.home .agency-main-categories-section > h2.wp-block-heading[style*="font-weight: 900"] {
font-weight: 900 !important;
font-variation-settings: "wght" 900 !important;
}
/* Agency Grow: product sale badge spacing uses the red badge only. */
html body.single-product .agency-single-price .agency-sale-price-ready del,
html body.single-product .agency-single-price .wc-block-components-product-price.agency-sale-price-ready del,
html body.single-product .agency-single-price .price.agency-sale-price-ready del,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready del,
html body.single-product .agency-single-price .agency-sale-price-ready ins,
html body.single-product .agency-single-price .wc-block-components-product-price.agency-sale-price-ready ins,
html body.single-product .agency-single-price .price.agency-sale-price-ready ins,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready ins {
margin-inline-end: 0 !important;
margin-right: 0 !important;
}
html body.single-product .agency-single-price .agency-sale-price-ready .agency-sale-save-badge,
html body.single-product .agency-single-price .wc-block-components-product-price.agency-sale-price-ready .agency-sale-save-badge,
html body.single-product .agency-single-price .price.agency-sale-price-ready .agency-sale-save-badge,
html body.single-product .agency-salla-price-repeat.agency-sale-price-ready .agency-sale-save-badge {
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
margin-left: 0 !important;
margin-right: var(--agency-single-sale-badge-gap, 0px) !important;
}
/* Agency Grow: product sale badge spacing high-specificity live override. */
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-single-price .agency-sale-price-ready del,
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-single-price .wc-block-components-product-price.agency-sale-price-ready del,
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-single-price .price.agency-sale-price-ready del,
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-salla-price-repeat.agency-sale-price-ready del,
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-single-price .agency-sale-price-ready ins,
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-single-price .wc-block-components-product-price.agency-sale-price-ready ins,
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-single-price .price.agency-sale-price-ready ins,
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-salla-price-repeat.agency-sale-price-ready ins {
margin-inline-end: 0 !important;
margin-right: 0 !important;
}
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-single-price .agency-sale-price-ready .agency-sale-save-badge,
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-single-price .wc-block-components-product-price.agency-sale-price-ready .agency-sale-save-badge,
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-single-price .price.agency-sale-price-ready .agency-sale-save-badge,
html body.single-product.single-product .wp-site-blocks main#wp--skip-link--target.agency-single-product-page .agency-salla-price-repeat.agency-sale-price-ready .agency-sale-save-badge {
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
margin-left: 0 !important;
margin-right: var(--agency-single-sale-badge-gap, 0px) !important;
}
/* Agency Grow: product editor preview sale badge spacing override. */
html body.agency-product-template-live-preview-body .agency-sale-price-ready del,
html body.agency-product-template-live-preview-body .agency-sale-price-ready ins,
html body.agency-product-template-live-preview-body .agency-single-price .agency-sale-price-ready del,
html body.agency-product-template-live-preview-body .agency-single-price .agency-sale-price-ready ins,
.agency-product-template-live-preview-root .agency-sale-price-ready del,
.agency-product-template-live-preview-root .agency-sale-price-ready ins,
.agency-product-template-live-preview-body .agency-sale-price-ready del,
.agency-product-template-live-preview-body .agency-sale-price-ready ins {
margin-inline-end: 0 !important;
margin-right: 0 !important;
}
html body.agency-product-template-live-preview-body .agency-sale-price-ready .agency-sale-save-badge,
html body.agency-product-template-live-preview-body .agency-single-price .agency-sale-price-ready .agency-sale-save-badge,
.agency-product-template-live-preview-root .agency-sale-price-ready .agency-sale-save-badge,
.agency-product-template-live-preview-body .agency-sale-price-ready .agency-sale-save-badge {
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
margin-left: 0 !important;
margin-right: var(--agency-single-sale-badge-gap, 0px) !important;
}
/* Agency Grow: final old/current price gap override. */
html body.single-product .agency-single-product-page .agency-single-price .wc-block-components-product-price del,
html body.single-product .agency-single-product-page .agency-single-price .wc-block-grid__product-price del,
html body.single-product .agency-single-product-page .agency-single-price .price del,
html body.single-product .agency-single-product-page .agency-salla-price-repeat del,
.editor-styles-wrapper .agency-single-product-page .agency-single-price .wc-block-components-product-price del,
.editor-styles-wrapper .agency-single-product-page .agency-single-price .wc-block-grid__product-price del,
.editor-styles-wrapper .agency-single-product-page .agency-single-price .price del,
.editor-styles-wrapper .agency-single-product-page .agency-salla-price-repeat del,
.is-root-container .agency-single-product-page .agency-single-price .wc-block-components-product-price del,
.is-root-container .agency-single-product-page .agency-single-price .wc-block-grid__product-price del,
.is-root-container .agency-single-product-page .agency-single-price .price del,
.is-root-container .agency-single-product-page .agency-salla-price-repeat del,
.agency-product-template-live-preview-root .agency-single-product-page .agency-single-price .wc-block-components-product-price del,
.agency-product-template-live-preview-root .agency-single-product-page .agency-single-price .wc-block-grid__product-price del,
.agency-product-template-live-preview-root .agency-single-product-page .agency-single-price .price del,
.agency-product-template-live-preview-root .agency-single-product-page .agency-salla-price-repeat del {
margin-inline-start: 0 !important;
margin-left: 0 !important;
margin-inline-end: var(--agency-single-sale-price-gap, 16px) !important;
margin-right: var(--agency-single-sale-price-gap, 16px) !important;
}
html body.single-product .agency-single-product-page .agency-single-price .wc-block-components-product-price ins,
html body.single-product .agency-single-product-page .agency-single-price .wc-block-grid__product-price ins,
html body.single-product .agency-single-product-page .agency-single-price .price ins,
html body.single-product .agency-single-product-page .agency-salla-price-repeat ins,
.editor-styles-wrapper .agency-single-product-page .agency-single-price .wc-block-components-product-price ins,
.editor-styles-wrapper .agency-single-product-page .agency-single-price .wc-block-grid__product-price ins,
.editor-styles-wrapper .agency-single-product-page .agency-single-price .price ins,
.editor-styles-wrapper .agency-single-product-page .agency-salla-price-repeat ins,
.is-root-container .agency-single-product-page .agency-single-price .wc-block-components-product-price ins,
.is-root-container .agency-single-product-page .agency-single-price .wc-block-grid__product-price ins,
.is-root-container .agency-single-product-page .agency-single-price .price ins,
.is-root-container .agency-single-product-page .agency-salla-price-repeat ins,
.agency-product-template-live-preview-root .agency-single-product-page .agency-single-price .wc-block-components-product-price ins,
.agency-product-template-live-preview-root .agency-single-product-page .agency-single-price .wc-block-grid__product-price ins,
.agency-product-template-live-preview-root .agency-single-product-page .agency-single-price .price ins,
.agency-product-template-live-preview-root .agency-single-product-page .agency-salla-price-repeat ins {
margin-inline-start: 0 !important;
margin-inline-end: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Checkout: Shopify-style minimal page. */
body.woocommerce-checkout {
--agency-checkout-text: #202124;
--agency-checkout-muted: #6b7280;
--agency-checkout-border: #d9d9d9;
--agency-checkout-soft-border: #dedede;
--agency-checkout-blue: #0b5bd3;
--agency-checkout-blue-soft: #f3f6ff;
--agency-checkout-panel: #ffffff;
--agency-checkout-summary-bg: #f5f5f5;
--agency-checkout-white-start: calc(50% - clamp(88px, 5vw, 108px));
background: linear-gradient(90deg, var(--agency-checkout-summary-bg) 0 var(--agency-checkout-white-start), #ffffff var(--agency-checkout-white-start) 100%) !important;
color: var(--agency-checkout-text) !important;
}
body.woocommerce-checkout .wp-site-blocks {
background: transparent !important;
min-height: 100vh !important;
}
body.woocommerce-checkout .wp-site-blocks > header.wp-block-template-part,
body.woocommerce-checkout .custom-main-header {
display: none !important;
}
body.woocommerce-checkout .wp-site-blocks > footer.wp-block-template-part,
body.woocommerce-checkout footer.wp-block-template-part,
body.woocommerce-checkout .site-footer {
display: none !important;
}
.agency-shopify-checkout-header {
align-items: center !important;
background: #fff !important;
border-bottom: 1px solid var(--agency-checkout-soft-border) !important;
box-sizing: border-box !important;
direction: rtl !important;
display: flex !important;
justify-content: space-between !important;
margin: 0 auto !important;
max-width: none !important;
padding: 28px max(22px, calc((100vw - 1320px) / 2)) 18px !important;
width: 100% !important;
}
.agency-shopify-checkout-brand {
align-items: center !important;
color: #17346f !important;
display: inline-flex !important;
font-size: 28px !important;
font-weight: 800 !important;
line-height: 1 !important;
text-decoration: none !important;
}
.agency-shopify-checkout-logo {
display: block !important;
height: auto !important;
max-height: 46px !important;
max-width: 172px !important;
object-fit: contain !important;
width: auto !important;
}
.agency-shopify-checkout-name {
display: block !important;
letter-spacing: 0 !important;
}
.agency-shopify-checkout-cart-link {
align-items: center !important;
border: 0 !important;
color: var(--agency-checkout-blue) !important;
display: inline-flex !important;
height: 42px !important;
justify-content: center !important;
text-decoration: none !important;
width: 42px !important;
}
.agency-shopify-checkout-cart-icon {
display: block !important;
fill: none !important;
height: 27px !important;
stroke: currentColor !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
stroke-width: 1.8 !important;
width: 27px !important;
}
body.woocommerce-checkout main,
body.woocommerce-checkout .site-content,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .wp-block-post-content {
background: transparent !important;
}
body.woocommerce-checkout main,
body.woocommerce-checkout main.wp-block-group,
body.woocommerce-checkout #wp--skip-link--target {
margin: 0 auto !important;
max-width: none !important;
padding: 0 !important;
}
body.woocommerce-checkout .wp-block-post-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout .woocommerce-breadcrumb,
body.woocommerce-checkout .wp-block-woocommerce-breadcrumbs {
display: none !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout form.checkout.woocommerce-checkout {
box-sizing: border-box !important;
margin: 30px auto 82px !important;
max-width: 1320px !important;
padding: 0 clamp(18px, 3vw, 42px) !important;
width: 100% !important;
}
body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout,
body.woocommerce-checkout .wc-block-components-sidebar-layout {
align-items: flex-start !important;
box-sizing: border-box !important;
display: flex !important;
direction: ltr !important;
flex-wrap: nowrap !important;
gap: clamp(36px, 5vw, 72px) !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-checkout .wc-block-checkout__main {
background: transparent !important;
box-sizing: border-box !important;
direction: rtl !important;
flex: 0 1 660px !important;
margin: 0 !important;
max-width: 660px !important;
order: 2 !important;
padding: 0 !important;
position: relative !important;
width: 100% !important;
z-index: 1 !important;
}
body.woocommerce-checkout .wc-block-components-main::before,
body.woocommerce-checkout .wc-block-checkout__main::before {
background: #fff !important;
bottom: -140px !important;
content: "" !important;
display: block !important;
left: -32px !important;
position: absolute !important;
right: -100vw !important;
top: -56px !important;
z-index: -1 !important;
}
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
direction: rtl !important;
flex: 0 0 410px !important;
margin: 0 !important;
max-height: none !important;
max-width: 410px !important;
order: 1 !important;
overflow: visible !important;
padding: 24px 0 34px !important;
position: sticky !important;
scrollbar-width: thin !important;
top: 20px !important;
width: 410px !important;
}
body.woocommerce-checkout .wc-block-components-sidebar > *,
body.woocommerce-checkout .wc-block-checkout__sidebar > * {
margin: 0 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary,
body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary__button-text,
body.woocommerce-checkout .wc-block-components-order-summary__title,
body.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-title {
color: var(--agency-checkout-text) !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
margin: 0 !important;
padding: 0 0 18px !important;
text-align: right !important;
}
body.woocommerce-checkout .wc-block-components-order-summary__content,
body.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-totals-footer-item {
border-color: var(--agency-checkout-soft-border) !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item {
align-items: flex-start !important;
border-top: 0 !important;
direction: ltr !important;
display: grid !important;
gap: 10px 12px !important;
grid-template-columns: 88px minmax(0, 1fr) 54px !important;
padding: 13px 0 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__image {
grid-column: 3 !important;
height: 54px !important;
margin: 0 !important;
overflow: visible !important;
position: relative !important;
width: 54px !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
background: #fff !important;
border: 2px solid #fff !important;
border-radius: 12px !important;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.13) !important;
display: block !important;
height: 54px !important;
max-width: 54px !important;
object-fit: cover !important;
width: 54px !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__quantity {
align-items: center !important;
background: #000 !important;
border: 2px solid #fff !important;
border-radius: 8px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
box-sizing: border-box !important;
color: #fff !important;
display: flex !important;
font-size: 12px !important;
font-weight: 700 !important;
height: 24px !important;
justify-content: center !important;
left: -10px !important;
line-height: 1 !important;
min-width: 24px !important;
padding: 0 !important;
pointer-events: none !important;
position: absolute !important;
right: auto !important;
top: -10px !important;
transform: none !important;
width: 24px !important;
z-index: 2 !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__description {
color: var(--agency-checkout-text) !important;
direction: rtl !important;
grid-column: 2 !important;
grid-row: 1 !important;
min-width: 0 !important;
padding: 0 !important;
text-align: right !important;
}
body.woocommerce-checkout .wc-block-components-product-metadata,
body.woocommerce-checkout .wc-block-components-product-metadata *,
body.woocommerce-checkout .wc-block-components-product-metadata__description,
body.woocommerce-checkout .wc-block-components-product-details,
body.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices {
display: none !important;
}
body.woocommerce-checkout .wc-block-components-address-form__address_2-toggle,
body.woocommerce-checkout .wc-block-components-address-form__address_2-hidden-input {
display: none !important;
}
body.woocommerce-checkout .agency-checkout-summary-controls {
display: none;
}
body.woocommerce-checkout.agency-checkout-billing-choice-ready .wc-block-checkout__use-address-for-billing,
body.woocommerce-checkout.agency-checkout-billing-choice-ready #billing-fields > .wc-block-components-checkout-step__heading-container,
body.woocommerce-checkout.agency-checkout-billing-choice-ready #billing-fields .wc-block-components-address-card-wrapper {
display: none !important;
}
body.woocommerce-checkout.agency-checkout-billing-choice-ready #billing-fields:not(.agency-checkout-billing-different) {
display: none !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice {
background: transparent !important;
direction: rtl !important;
margin: 0 0 24px !important;
padding: 0 !important;
width: 100% !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice.is-different {
margin-bottom: 0 !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__title {
color: var(--agency-checkout-text) !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
margin: 0 0 12px !important;
text-align: right !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__box {
background: #fff !important;
border: 1.4px solid var(--agency-checkout-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
overflow: hidden !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice.is-different .agency-checkout-billing-choice__box {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__option {
align-items: center !important;
background: #fff !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
color: var(--agency-checkout-text) !important;
cursor: pointer !important;
direction: rtl !important;
display: flex !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 500 !important;
justify-content: flex-start !important;
line-height: 1.35 !important;
min-height: 50px !important;
padding: 0 44px 0 14px !important;
position: relative !important;
text-align: right !important;
width: 100% !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__option + .agency-checkout-billing-choice__option {
border-top: 1px solid var(--agency-checkout-border) !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__option.is-selected {
background: #f4f5f5 !important;
box-shadow: inset 0 0 0 1px #40464a !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__dot {
background: #fff !important;
border: 2px solid #d7d7d7 !important;
border-radius: 999px !important;
box-sizing: border-box !important;
display: block !important;
height: 18px !important;
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 18px !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__option.is-selected .agency-checkout-billing-choice__dot {
border: 6px solid #5a6165 !important;
}
body.woocommerce-checkout #billing-fields.agency-checkout-billing-different {
margin-top: 0 !important;
}
body.woocommerce-checkout #billing-fields.agency-checkout-billing-different .wc-block-components-checkout-step__content {
background: #f5f5f5 !important;
border: 1.4px solid var(--agency-checkout-border) !important;
border-radius: 0 0 8px 8px !important;
border-top: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 14px !important;
}
body.woocommerce-checkout #billing-fields.agency-checkout-billing-different .wc-block-components-address-address-wrapper,
body.woocommerce-checkout #billing-fields.agency-checkout-billing-different .wc-block-components-address-form-wrapper,
body.woocommerce-checkout #billing-fields.agency-checkout-billing-different .wc-block-components-address-form {
background: transparent !important;
}
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
color: var(--agency-checkout-text) !important;
font-size: 14px !important;
font-weight: 500 !important;
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start !important;
padding: 0 !important;
text-align: left !important;
}
body.woocommerce-checkout .wc-block-components-totals-item {
color: var(--agency-checkout-text) !important;
font-size: 14px !important;
padding: 11px 0 !important;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item {
border-top: 1px solid var(--agency-checkout-soft-border) !important;
margin-top: 0 !important;
padding: 18px 0 !important;
}
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-size: 22px !important;
font-weight: 700 !important;
}
body.woocommerce-checkout .woocommerce-Price-amount,
body.woocommerce-checkout .wc-block-formatted-money-amount,
body.woocommerce-checkout .wc-block-components-formatted-money-amount {
direction: ltr !important;
display: inline-block !important;
unicode-bidi: isolate !important;
white-space: nowrap !important;
}
body.woocommerce-checkout .agency-checkout-price-ready {
align-items: baseline !important;
direction: ltr !important;
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0.2em !important;
unicode-bidi: isolate !important;
white-space: nowrap !important;
}
body.woocommerce-checkout .agency-checkout-price-prefix,
body.woocommerce-checkout .agency-checkout-price-suffix {
direction: rtl !important;
}
body.woocommerce-checkout .agency-checkout-price-money {
align-items: baseline !important;
direction: ltr !important;
display: inline-flex !important;
gap: 0.18em !important;
unicode-bidi: isolate !important;
white-space: nowrap !important;
}
body.woocommerce-checkout .agency-checkout-price-currency {
color: currentColor !important;
display: inline-flex !important;
flex: 0 0 auto !important;
line-height: 1 !important;
}
body.woocommerce-checkout .agency-checkout-price-currency .agency-sar-symbol {
display: block !important;
height: 0.86em !important;
transform: translateY(0.06em) !important;
width: 0.77em !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 0 30px !important;
padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__container,
body.woocommerce-checkout .wc-block-components-checkout-step__content {
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__heading {
align-items: center !important;
display: flex !important;
justify-content: flex-start !important;
margin: 0 0 17px !important;
padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__container::after,
body.woocommerce-checkout .wc-block-components-checkout-step__heading::before,
body.woocommerce-checkout .wc-block-components-checkout-step__heading::after,
body.woocommerce-checkout .wc-block-components-checkout-step__number {
display: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout #order_review_heading {
color: var(--agency-checkout-text) !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
margin: 0 0 17px !important;
text-align: right !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__description,
body.woocommerce-checkout .wc-block-components-checkout-step__description * {
color: var(--agency-checkout-muted) !important;
font-size: 13px !important;
line-height: 1.45 !important;
margin: 0 0 12px !important;
text-align: right !important;
}
body.woocommerce-checkout .wc-block-components-address-form,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
display: grid !important;
gap: 12px 12px !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.woocommerce-checkout .wc-block-components-address-form__country,
body.woocommerce-checkout .wc-block-components-address-form__address_1,
body.woocommerce-checkout .wc-block-components-address-form__address_2,
body.woocommerce-checkout .wc-block-components-address-form__company,
body.woocommerce-checkout .wc-block-components-address-form__email,
body.woocommerce-checkout .form-row-wide,
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field,
body.woocommerce-checkout #billing_address_1_field,
body.woocommerce-checkout #shipping_address_1_field,
body.woocommerce-checkout #billing_address_2_field,
body.woocommerce-checkout #shipping_address_2_field {
grid-column: 1 / -1 !important;
}
body.woocommerce-checkout .wc-block-components-text-input,
body.woocommerce-checkout .wc-block-components-combobox,
body.woocommerce-checkout .wc-block-components-country-input,
body.woocommerce-checkout .form-row {
box-sizing: border-box !important;
margin: 0 !important;
min-width: 0 !important;
}
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-combobox .components-combobox-control__input,
body.woocommerce-checkout .wc-block-components-country-input select,
body.woocommerce-checkout .input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
background: #fff !important;
border: 1.4px solid var(--agency-checkout-border) !important;
border-radius: 4px !important;
box-shadow: none !important;
box-sizing: border-box !important;
color: var(--agency-checkout-text) !important;
direction: rtl !important;
font-size: 14px !important;
font-weight: 400 !important;
height: 47px !important;
line-height: 1.35 !important;
margin: 0 !important;
outline: none !important;
padding: 15px 10px 5px !important;
text-align: right !important;
width: 100% !important;
}
body.woocommerce-checkout textarea {
height: 96px !important;
min-height: 96px !important;
padding-top: 14px !important;
}
body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-combobox .components-combobox-control__input:focus,
body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus {
border-color: var(--agency-checkout-blue) !important;
box-shadow: 0 0 0 1px var(--agency-checkout-blue) !important;
}
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .components-base-control__label,
body.woocommerce-checkout .form-row label {
color: #4f4f4f !important;
direction: rtl !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.2 !important;
text-align: right !important;
}
body.woocommerce-checkout .wc-block-components-text-input label {
right: 10px !important;
transform-origin: top right !important;
}
body.woocommerce-checkout .wc-block-components-checkbox,
body.woocommerce-checkout .woocommerce-form__label-for-checkbox {
align-items: center !important;
color: var(--agency-checkout-text) !important;
display: flex !important;
direction: rtl !important;
flex-direction: row !important;
font-size: 14px !important;
gap: 8px !important;
justify-content: flex-start !important;
line-height: 1.4 !important;
margin: 12px 0 0 !important;
text-align: right !important;
}
body.woocommerce-checkout .wc-block-components-checkbox__input,
body.woocommerce-checkout input[type="checkbox"] {
accent-color: var(--agency-checkout-blue) !important;
border-radius: 3px !important;
height: 18px !important;
width: 18px !important;
}
body.woocommerce-checkout .wc-block-components-radio-control,
body.woocommerce-checkout .wc-block-checkout__shipping-method-option,
body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .woocommerce-checkout-review-order .shipping,
body.woocommerce-checkout .payment_methods {
background: #fff !important;
border-color: var(--agency-checkout-border) !important;
border-radius: 4px !important;
box-shadow: none !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-checkout__shipping-method-option {
align-items: center !important;
border: 1.4px solid var(--agency-checkout-border) !important;
display: flex !important;
min-height: 50px !important;
padding: 12px 44px 12px 14px !important;
position: relative !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__input,
body.woocommerce-checkout input[type="radio"] {
accent-color: var(--agency-checkout-blue) !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option .wc-block-components-radio-control__input {
left: auto !important;
margin: 0 !important;
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option-layout,
body.woocommerce-checkout .wc-block-components-radio-control__label-group {
align-items: center !important;
direction: ltr !important;
display: grid !important;
gap: 14px !important;
grid-template-columns: minmax(90px, 1fr) minmax(0, 1fr) !important;
width: 100% !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option-layout {
display: block !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__label-group {
display: grid !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
color: var(--agency-checkout-text) !important;
font-size: 14px !important;
text-align: right !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__label {
direction: ltr !important;
grid-column: 2 !important;
grid-row: 1 !important;
align-self: center !important;
justify-self: end !important;
min-width: 0 !important;
padding-right: 0 !important;
text-align: right !important;
white-space: nowrap !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
direction: rtl !important;
flex: 0 0 auto !important;
grid-column: 1 !important;
grid-row: 1 !important;
align-self: center !important;
justify-self: start !important;
min-width: 0 !important;
text-align: left !important;
width: auto !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option-checked,
body.woocommerce-checkout .wc-block-components-radio-control__option.checked,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.woocommerce-checkout .wc-block-checkout__shipping-method-option.wc-block-components-radio-control__option-checked,
body.woocommerce-checkout .wc-block-checkout__shipping-method-option.is-selected {
background: var(--agency-checkout-blue-soft) !important;
border-color: var(--agency-checkout-blue) !important;
box-shadow: 0 0 0 1px var(--agency-checkout-blue) !important;
}
body.woocommerce-checkout .wc-block-components-notice-banner,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
border-radius: 4px !important;
box-shadow: none !important;
font-size: 14px !important;
line-height: 1.45 !important;
margin: 0 0 26px !important;
padding: 15px 18px !important;
text-align: right !important;
}
body.woocommerce-checkout .wc-block-components-notice-banner.is-error,
body.woocommerce-checkout .woocommerce-error {
background: #fff1f1 !important;
border: 1px solid #ef4444 !important;
color: #4a1f1f !important;
}
body.woocommerce-checkout .wc-block-checkout__actions,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button__container,
body.woocommerce-checkout .place-order {
align-items: center !important;
border-top: 1px solid var(--agency-checkout-soft-border) !important;
display: flex !important;
gap: 18px !important;
justify-content: space-between !important;
margin-top: 28px !important;
padding-top: 26px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button,
body.woocommerce-checkout .return-to-cart,
body.woocommerce-checkout .woocommerce-form-login-toggle a {
color: var(--agency-checkout-text) !important;
font-size: 14px !important;
font-weight: 400 !important;
text-decoration: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button[type="submit"].button {
background: var(--agency-checkout-blue) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #fff !important;
cursor: pointer !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1 !important;
min-height: 50px !important;
padding: 0 30px !important;
text-align: center !important;
width: auto !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout button[type="submit"].button:hover {
background: #0649ae !important;
color: #fff !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout {
display: grid !important;
direction: ltr !important;
gap: clamp(36px, 5vw, 72px) !important;
grid-template-columns: 410px minmax(0, 660px) !important;
justify-content: center !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details {
direction: rtl !important;
grid-column: 2 !important;
grid-row: 1 / span 3 !important;
max-width: 660px !important;
width: 100% !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout .col2-set,
body.woocommerce-checkout form.checkout.woocommerce-checkout .col2-set .col-1,
body.woocommerce-checkout form.checkout.woocommerce-checkout .col2-set .col-2,
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-shipping-fields {
float: none !important;
margin: 0 0 30px !important;
max-width: none !important;
width: 100% !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review {
direction: rtl !important;
grid-column: 1 !important;
width: 410px !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout table.shop_table {
border: 0 !important;
margin: 0 !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout form.checkout.woocommerce-checkout table.shop_table td {
border-color: var(--agency-checkout-soft-border) !important;
font-size: 14px !important;
padding: 12px 18px !important;
text-align: right !important;
}
@media (max-width: 980px) {
body.woocommerce-checkout {
background: #ffffff !important;
}
.agency-shopify-checkout-header {
max-width: none !important;
min-height: 84px !important;
padding: 18px 22px 12px !important;
}
.agency-shopify-checkout-brand {
font-size: 27px !important;
}
.agency-shopify-checkout-logo {
max-height: 44px !important;
max-width: 180px !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout form.checkout.woocommerce-checkout {
margin-top: 0 !important;
padding-inline: 16px !important;
}
body.woocommerce-checkout .wp-block-post-content {
margin-top: 0 !important;
}
body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout,
body.woocommerce-checkout .wc-block-components-sidebar-layout {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 18px !important;
}
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-checkout .wc-block-checkout__main {
flex: 1 1 auto !important;
max-width: none !important;
position: static !important;
width: 100% !important;
}
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar {
background: #f5f5f5 !important;
border-bottom: 1px solid var(--agency-checkout-soft-border) !important;
margin-inline: -16px !important;
order: 1 !important;
overflow: visible !important;
padding: 0 16px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title {
align-items: center !important;
background: #f5f5f5 !important;
border: 0 !important;
border-bottom: 1px solid var(--agency-checkout-soft-border) !important;
border-top: 0 !important;
box-sizing: border-box !important;
color: var(--agency-checkout-text) !important;
direction: rtl !important;
display: flex !important;
gap: 6px !important;
margin: 0 !important;
min-height: 63px !important;
padding: 6px 14px !important;
width: 100% !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title:focus,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title:focus-visible {
box-shadow: none !important;
outline: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
color: var(--agency-checkout-blue) !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
margin: 0 !important;
order: 1 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon {
color: var(--agency-checkout-blue) !important;
display: inline-flex !important;
height: 24px !important;
order: 2 !important;
width: 24px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
color: var(--agency-checkout-text) !important;
direction: ltr !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
margin-right: auto !important;
order: 3 !important;
unicode-bidi: isolate !important;
white-space: nowrap !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__title[aria-expanded="false"] + .wc-block-components-checkout-order-summary__content {
display: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content,
body.woocommerce-checkout #disclosure_details {
background: #f5f5f5 !important;
box-sizing: border-box !important;
padding: 16px 14px !important;
width: 100% !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary,
body.woocommerce-checkout #disclosure_details .wc-block-components-order-summary {
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-cart-items-block,
body.woocommerce-checkout #disclosure_details .wp-block-woocommerce-checkout-order-summary-cart-items-block {
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary-item,
body.woocommerce-checkout #disclosure_details .wc-block-components-order-summary-item {
align-items: start !important;
gap: 0 8px !important;
grid-template-columns: 78px minmax(0, 1fr) 64px !important;
margin: 14px 0 0 !important;
min-height: 64px !important;
padding: 0 !important;
row-gap: 12px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary-item.agency-checkout-summary-item-enhanced,
body.woocommerce-checkout #disclosure_details .wc-block-components-order-summary-item.agency-checkout-summary-item-enhanced {
grid-template-rows: minmax(73px, auto) !important;
min-height: 73px !important;
position: relative !important;
row-gap: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary-item:first-child,
body.woocommerce-checkout #disclosure_details .wc-block-components-order-summary-item:first-child {
margin-top: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary-item__image,
body.woocommerce-checkout #disclosure_details .wc-block-components-order-summary-item__image {
align-self: start !important;
background: #fff !important;
border-radius: 14px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
height: 64px !important;
overflow: visible !important;
width: 64px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary-item__image img,
body.woocommerce-checkout #disclosure_details .wc-block-components-order-summary-item__image img {
border: 2px solid #fff !important;
border-radius: 14px !important;
box-shadow: none !important;
height: 64px !important;
max-width: 64px !important;
width: 64px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary-item__description,
body.woocommerce-checkout #disclosure_details .wc-block-components-order-summary-item__description {
line-height: 1.35 !important;
padding: 0 !important;
padding-top: 2px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description {
align-content: start !important;
display: grid !important;
grid-template-rows: auto auto !important;
padding-bottom: 0 !important;
position: static !important;
row-gap: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary-item__description .wc-block-components-product-name,
body.woocommerce-checkout #disclosure_details .wc-block-components-order-summary-item__description .wc-block-components-product-name {
display: block !important;
font-size: 14px !important;
line-height: 1.35 !important;
margin: 0 !important;
padding-bottom: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary-item__total-price,
body.woocommerce-checkout #disclosure_details .wc-block-components-order-summary-item__total-price {
font-size: 14px !important;
line-height: 1.25 !important;
padding-top: 2px !important;
white-space: nowrap !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__total-price,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__total-price {
direction: ltr !important;
grid-column: 1 !important;
grid-row: 1 !important;
justify-self: start !important;
max-width: 78px !important;
min-width: 78px !important;
padding-bottom: 0 !important;
text-align: left !important;
unicode-bidi: isolate !important;
width: 78px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-product-price,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-product-price,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__individual-prices,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__individual-prices {
direction: ltr !important;
display: block !important;
font-size: 14px !important;
left: 0 !important;
line-height: 1.25 !important;
max-width: 78px !important;
min-width: 78px !important;
position: absolute !important;
text-align: left !important;
top: 2px !important;
unicode-bidi: isolate !important;
white-space: nowrap !important;
width: 78px !important;
z-index: 3 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-product-price__value,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-product-price__value,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-product-price__regular,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-product-price__regular,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__individual-price,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__individual-price,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__regular-individual-price,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-order-summary-item__regular-individual-price {
direction: ltr !important;
font-size: 14px !important;
line-height: 1.25 !important;
text-align: left !important;
unicode-bidi: isolate !important;
white-space: nowrap !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-sale-badge,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description .wc-block-components-sale-badge {
display: block !important;
margin: 4px 0 0 !important;
text-align: left !important;
width: max-content !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description > .wc-block-components-sale-badge,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-item-enhanced .wc-block-components-order-summary-item__description > .wc-block-components-sale-badge {
left: 0 !important;
position: absolute !important;
top: 24px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-order-summary-item__quantity,
body.woocommerce-checkout #disclosure_details .wc-block-components-order-summary-item__quantity {
box-sizing: border-box !important;
height: 24px !important;
left: -10px !important;
min-width: 24px !important;
padding: 0 !important;
top: -10px !important;
transform: none !important;
width: 24px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .agency-checkout-summary-controls,
body.woocommerce-checkout #disclosure_details .agency-checkout-summary-controls {
align-items: center !important;
align-self: auto !important;
column-gap: 8px !important;
direction: ltr !important;
display: grid !important;
grid-column: auto !important;
grid-row: auto !important;
grid-template-columns: 22px minmax(0, 1fr) 98px !important;
margin: 0 !important;
min-height: 51px !important;
padding: 14px 0 !important;
width: 100% !important;
z-index: 2 !important;
}
body.woocommerce-checkout .agency-checkout-summary-controls * {
box-sizing: border-box !important;
}
body.woocommerce-checkout .agency-checkout-summary-remove {
align-items: center !important;
appearance: none !important;
background: transparent !important;
border: 0 !important;
color: #5f6368 !important;
cursor: pointer !important;
display: inline-flex !important;
grid-column: 1 !important;
height: 18px !important;
justify-content: center !important;
justify-self: start !important;
margin: 0 !important;
max-height: 18px !important;
max-width: 18px !important;
min-height: 18px !important;
min-width: 18px !important;
padding: 0 !important;
width: 18px !important;
}
body.woocommerce-checkout .agency-checkout-summary-remove svg {
display: block !important;
height: 18px !important;
width: 18px !important;
}
body.woocommerce-checkout .agency-checkout-summary-quantity {
align-items: center !important;
align-content: center !important;
display: inline-grid !important;
gap: 14px !important;
grid-column: 3 !important;
grid-template-columns: 18px 34px 18px !important;
height: 23px !important;
justify-content: center !important;
justify-self: end !important;
margin: 0 0 0 14px !important;
max-height: 23px !important;
max-width: 98px !important;
min-height: 23px !important;
min-width: 98px !important;
width: 98px !important;
}
body.woocommerce-checkout .agency-checkout-summary-quantity button {
align-items: center !important;
appearance: none !important;
background: transparent !important;
border: 0 !important;
color: #56595c !important;
cursor: pointer !important;
display: inline-flex !important;
font-size: 0 !important;
font-weight: 400 !important;
height: 18px !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
max-height: 18px !important;
max-width: 18px !important;
min-height: 18px !important;
min-width: 18px !important;
padding: 0 !important;
width: 18px !important;
}
body.woocommerce-checkout .agency-checkout-summary-quantity button:disabled {
color: #9a9a9a !important;
cursor: default !important;
opacity: 0.58 !important;
}
body.woocommerce-checkout .agency-checkout-summary-quantity button svg {
display: block !important;
height: 14px !important;
stroke: currentColor !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
stroke-width: 1.8 !important;
width: 14px !important;
}
body.woocommerce-checkout .agency-checkout-summary-quantity input {
appearance: textfield !important;
background: #fff !important;
border: 1px solid #ead8c4 !important;
border-radius: 0 !important;
box-sizing: border-box !important;
box-shadow: none !important;
color: #111 !important;
direction: ltr !important;
display: block !important;
flex: 0 0 34px !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 400 !important;
height: 23px !important;
line-height: 1 !important;
margin: 0 !important;
max-height: 23px !important;
max-width: 34px !important;
min-height: 23px !important;
min-width: 34px !important;
padding: 0 4px !important;
text-align: center !important;
width: 34px !important;
}
body.woocommerce-checkout .agency-checkout-summary-quantity input::-webkit-outer-spin-button,
body.woocommerce-checkout .agency-checkout-summary-quantity input::-webkit-inner-spin-button {
appearance: none !important;
margin: 0 !important;
}
body.woocommerce-checkout .agency-checkout-summary-controls.is-busy {
opacity: 0.58 !important;
pointer-events: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
body.woocommerce-checkout #disclosure_details .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
margin: 14px 0 0 !important;
padding: 12px 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-coupon-form-block.agency-checkout-coupon-field-ready .wc-block-components-panel__button,
body.woocommerce-checkout #disclosure_details .wp-block-woocommerce-checkout-order-summary-coupon-form-block.agency-checkout-coupon-field-ready .wc-block-components-panel__button {
display: none !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-coupon__form,
body.woocommerce-checkout #disclosure_details .wc-block-components-totals-coupon__form {
align-items: center !important;
direction: ltr !important;
display: grid !important;
gap: 12px !important;
grid-template-columns: 66px minmax(0, 1fr) !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-coupon__form .wc-block-components-text-input,
body.woocommerce-checkout #disclosure_details .wc-block-components-totals-coupon__form .wc-block-components-text-input {
grid-column: 2 !important;
grid-row: 1 !important;
margin: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-coupon__form input,
body.woocommerce-checkout #disclosure_details .wc-block-components-totals-coupon__form input {
border: 1px solid #d9d9d9 !important;
border-radius: 10px !important;
box-shadow: none !important;
direction: rtl !important;
font-size: 16px !important;
height: 50px !important;
padding: 0 14px !important;
text-align: right !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-coupon__form label,
body.woocommerce-checkout #disclosure_details .wc-block-components-totals-coupon__form label {
right: 14px !important;
text-align: right !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-coupon__button,
body.woocommerce-checkout #disclosure_details .wc-block-components-totals-coupon__button {
background: #fff8ef !important;
border: 1px solid #efdcc5 !important;
border-radius: 10px !important;
box-shadow: none !important;
color: #737373 !important;
font-size: 15px !important;
font-weight: 600 !important;
grid-column: 1 !important;
grid-row: 1 !important;
height: 50px !important;
margin: 0 !important;
padding: 0 !important;
width: 66px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-totals-block,
body.woocommerce-checkout #disclosure_details .wp-block-woocommerce-checkout-order-summary-totals-block {
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-subtotal-block,
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wp-block-woocommerce-checkout-order-summary-shipping-block,
body.woocommerce-checkout #disclosure_details .wp-block-woocommerce-checkout-order-summary-subtotal-block,
body.woocommerce-checkout #disclosure_details .wp-block-woocommerce-checkout-order-summary-shipping-block {
margin: 0 !important;
padding: 6px 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper,
body.woocommerce-checkout #disclosure_details .wc-block-components-totals-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-wrapper .wc-block-components-totals-item,
body.woocommerce-checkout #disclosure_details .wc-block-components-totals-wrapper .wc-block-components-totals-item {
padding: 6px 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-order-summary__content .wc-block-components-totals-footer-item,
body.woocommerce-checkout #disclosure_details .wc-block-components-totals-footer-item {
margin: 10px 0 0 !important;
padding: 12px 0 0 !important;
}
body.woocommerce-checkout .checkout-order-summary-block-fill-wrapper {
display: none !important;
}
body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-checkout .wc-block-checkout__main {
order: 2 !important;
padding: 0 2px 44px !important;
}
body.woocommerce-checkout .wc-block-components-main::before,
body.woocommerce-checkout .wc-block-checkout__main::before {
display: none !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details,
body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review {
max-width: none !important;
width: 100% !important;
}
}
@media (max-width: 640px) {
.agency-shopify-checkout-header {
min-height: 84px !important;
padding: 18px 22px 12px !important;
}
.agency-shopify-checkout-cart-link {
height: 36px !important;
width: 36px !important;
}
.agency-shopify-checkout-cart-icon {
height: 25px !important;
width: 25px !important;
}
body.woocommerce-checkout .wp-block-woocommerce-checkout,
body.woocommerce-checkout .wc-block-checkout,
body.woocommerce-checkout form.checkout.woocommerce-checkout {
padding-inline: 0 !important;
}
body.woocommerce-checkout .wc-block-components-address-form,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
gap: 10px !important;
grid-template-columns: 1fr !important;
}
body.woocommerce-checkout .wc-block-components-sidebar,
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
margin-inline: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout .wc-block-components-main,
body.woocommerce-checkout .wc-block-checkout__main {
padding: 0 18px 44px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step {
margin-bottom: 24px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__heading {
margin-bottom: 12px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__title,
body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout #order_review_heading {
font-size: 24px !important;
line-height: 1.25 !important;
margin-bottom: 18px !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__heading .wc-block-components-checkout-step__title {
margin-bottom: 0 !important;
}
body.woocommerce-checkout .wc-block-components-checkout-step__description,
body.woocommerce-checkout .wc-block-components-checkout-step__description * {
font-size: 14px !important;
}
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-combobox .components-combobox-control__input,
body.woocommerce-checkout .wc-block-components-country-input select,
body.woocommerce-checkout .input-text,
body.woocommerce-checkout select,
body.woocommerce-checkout textarea {
border: 1px solid var(--agency-checkout-border) !important;
border-radius: 9px !important;
font-size: 14px !important;
height: 49px !important;
padding: 16px 12px 5px !important;
}
body.woocommerce-checkout textarea {
height: 86px !important;
min-height: 86px !important;
padding-top: 14px !important;
}
body.woocommerce-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .components-base-control__label,
body.woocommerce-checkout .form-row label {
color: #707070 !important;
font-size: 13px !important;
}
body.woocommerce-checkout .wc-block-components-text-input label {
right: 12px !important;
}
body.woocommerce-checkout .wc-block-components-checkbox,
body.woocommerce-checkout .woocommerce-form__label-for-checkbox {
font-size: 14px !important;
gap: 8px !important;
margin-top: 12px !important;
}
body.woocommerce-checkout .wc-block-components-checkbox__input,
body.woocommerce-checkout input[type="checkbox"] {
border-radius: 4px !important;
height: 18px !important;
width: 18px !important;
}
body.woocommerce-checkout .wc-block-components-radio-control,
body.woocommerce-checkout .wc-block-checkout__shipping-method-option,
body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option,
body.woocommerce-checkout .payment_methods {
border-radius: 12px !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option,
body.woocommerce-checkout .wc-block-checkout__shipping-method-option,
body.woocommerce-checkout .wc-block-components-radio-control-accordion-option {
min-height: 50px !important;
padding: 10px 44px 10px 14px !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option .wc-block-components-radio-control__input {
right: 14px !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__option-layout,
body.woocommerce-checkout .wc-block-components-radio-control__label-group {
gap: 10px !important;
grid-template-columns: minmax(76px, 0.9fr) minmax(0, 1.1fr) !important;
}
body.woocommerce-checkout .wc-block-components-radio-control__label,
body.woocommerce-checkout .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
font-size: 14px !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice {
margin-bottom: 20px !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__title {
font-size: 22px !important;
margin-bottom: 14px !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__box,
body.woocommerce-checkout #billing-fields.agency-checkout-billing-different .wc-block-components-checkout-step__content {
border-radius: 9px !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice.is-different .agency-checkout-billing-choice__box {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__option {
font-size: 14px !important;
min-height: 50px !important;
padding: 0 46px 0 14px !important;
}
body.woocommerce-checkout .agency-checkout-billing-choice__dot {
height: 18px !important;
right: 14px !important;
width: 18px !important;
}
body.woocommerce-checkout #billing-fields.agency-checkout-billing-different .wc-block-components-checkout-step__content {
border-top: 0 !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
padding: 12px !important;
}
body.woocommerce-checkout .wc-block-checkout__actions,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button__container,
body.woocommerce-checkout .place-order {
align-items: stretch !important;
flex-direction: column-reverse !important;
}
body.woocommerce-checkout .wc-block-components-checkout-place-order-button,
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button[type="submit"].button {
border-radius: 8px !important;
font-size: 18px !important;
font-weight: 700 !important;
min-height: 56px !important;
width: 100% !important;
}
body.woocommerce-checkout .wc-block-components-notice-banner,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
border-radius: 8px !important;
font-size: 14px !important;
padding: 13px 15px !important;
}
}
/* End-loaded mobile homepage product carousel override for cached HTML. */
@media (max-width: 767px) {
html body.home .agency-products-swiper .swiper-wrapper,
html body.home .s-products-slider-wrapper .swiper-wrapper {
align-items: stretch !important;
}
html body.home .agency-products-swiper .swiper-wrapper > .swiper-slide,
html body.home .s-products-slider-wrapper .swiper-slide,
html body.home .s-products-slider-card {
align-self: stretch !important;
display: flex !important;
height: auto !important;
padding-left: 6px !important;
padding-right: 6px !important;
}
html body.home .agency-products-swiper .swiper-slide > .agency-product-card,
html body.home .s-products-slider-wrapper custom-salla-product-card,
html body.home .s-products-slider-wrapper .product-card {
background: #fff !important;
display: flex !important;
flex: 1 1 0 !important;
flex-direction: column !important;
height: auto !important;
justify-content: flex-start !important;
min-height: 100% !important;
position: relative !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-title,
html body.home .s-products-slider-wrapper .product-card__title,
html body.home .s-products-slider-wrapper .product-card__content a {
color: #111827 !important;
font-size: 15px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
letter-spacing: 0 !important;
line-height: 1.45 !important;
margin: 0 0 6px !important;
min-height: 42px !important;
padding: 0 4px !important;
text-align: center !important;
text-decoration: none !important;
}
html body.home .agency-products-swiper .agency-product-actions {
display: block !important;
margin-top: auto !important;
padding: 0 !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-action--cart,
html body.home .s-products-slider-wrapper button.s-button-element.s-button-wide,
html body.home .s-products-slider-wrapper .s-button-element.s-button-wide,
html body.home .s-products-slider-wrapper salla-button .s-button-element {
align-items: center !important;
background: #827174 !important;
border: 1px solid #827174 !important;
border-radius: 0 0 12px 12px !important;
box-shadow: none !important;
color: #fff !important;
direction: rtl !important;
display: flex !important;
flex: 0 0 auto !important;
font-size: 14px !important;
font-weight: 500 !important;
font-variation-settings: "wght" 500 !important;
gap: 8px !important;
height: 33px !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
min-height: 33px !important;
min-width: 0 !important;
overflow: hidden !important;
padding: 6px 10px !important;
position: relative !important;
text-decoration: none !important;
transform: none !important;
width: 100% !important;
}
html body.home .agency-products-swiper .agency-product-action--cart svg {
display: none !important;
}
html body.home .agency-products-swiper .agency-product-action--cart[data-tooltip]::before {
background: transparent !important;
border: 0 !important;
bottom: auto !important;
box-shadow: none !important;
color: #fff !important;
content: "+" !important;
font-family: inherit !important;
font-size: 20px !important;
font-weight: 300 !important;
left: 12px !important;
line-height: 1 !important;
opacity: 1 !important;
padding: 0 !important;
pointer-events: none !important;
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
visibility: visible !important;
z-index: 1 !important;
}
html body.home .agency-products-swiper .agency-product-action--cart[data-tooltip]::after {
background: transparent !important;
border: 0 !important;
color: #fff !important;
content: attr(aria-label) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1 !important;
opacity: 1 !important;
padding: 0 !important;
position: static !important;
transform: none !important;
visibility: visible !important;
}
}
/* Mobile-only visible product count for the homepage product carousel. */
@media (max-width: 767px) {
html body.home .agency-products-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
.editor-styles-wrapper .agency-products-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
html body.home .agency-products-container .agency-products-swiper .swiper-wrapper > .swiper-slide,
html body.home .agency-products-container .s-products-slider-wrapper .swiper-slide,
html body.home .agency-products-container .s-products-slider-card {
box-sizing: border-box !important;
flex: 0 0 calc(100% / var(--agency-products-mobile-visible, 2)) !important;
margin-left: 0 !important;
max-width: calc(100% / var(--agency-products-mobile-visible, 2)) !important;
padding-left: var(--agency-products-mobile-gap-half, 6px) !important;
padding-right: var(--agency-products-mobile-gap-half, 6px) !important;
width: calc(100% / var(--agency-products-mobile-visible, 2)) !important;
}
.editor-styles-wrapper .agency-products-container .agency-products-swiper .swiper-wrapper {
flex-wrap: nowrap !important;
gap: 0 !important;
justify-content: flex-start !important;
}
.editor-styles-wrapper .agency-products-container .agency-products-swiper .swiper-wrapper > .swiper-slide {
box-sizing: border-box !important;
flex: 0 0 calc(100% / var(--agency-products-mobile-visible, 2)) !important;
margin-left: 0 !important;
max-width: calc(100% / var(--agency-products-mobile-visible, 2)) !important;
padding-left: var(--agency-products-mobile-gap-half, 6px) !important;
padding-right: var(--agency-products-mobile-gap-half, 6px) !important;
width: calc(100% / var(--agency-products-mobile-visible, 2)) !important;
}
}
/* Mobile product carousel: snap each swipe to the next product start. */
@media (max-width: 767px) {
html body.home .agency-products-container .agency-products-swiper .swiper-wrapper,
html body.home .agency-products-container .s-products-slider-wrapper .swiper-wrapper,
.editor-styles-wrapper .agency-products-container .agency-products-swiper .swiper-wrapper {
scroll-padding-inline: 0 !important;
scroll-snap-type: x mandatory !important;
}
html body.home .agency-products-container .agency-products-swiper .swiper-wrapper > .swiper-slide,
html body.home .agency-products-container .s-products-slider-wrapper .swiper-slide,
html body.home .agency-products-container .s-products-slider-card,
.editor-styles-wrapper .agency-products-container .agency-products-swiper .swiper-wrapper > .swiper-slide {
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
}
html body.home .agency-products-container .s-slider-block__title-right::after,
html body.home .agency-products-container .s-slider-block__title::after,
.editor-styles-wrapper .agency-products-container .s-slider-block__title-right::after,
.editor-styles-wrapper .agency-products-container .s-slider-block__title::after {
left: auto !important;
max-width: 100% !important;
right: var(--agency-products-line-offset, 0px) !important;
transition: right 80ms linear !important;
width: var(--agency-products-line-width, 200px) !important;
}
html body.home .agency-products-container .s-slider-block__title-right,
html body.home .agency-products-container .s-slider-block__title,
html body.home salla-products-slider .s-slider-block__title-right,
html body.home salla-products-slider .s-slider-block__title,
html body.home .s-products-slider-wrapper .s-slider-block__title-right,
html body.home .s-products-slider-wrapper .s-slider-block__title,
.editor-styles-wrapper .agency-products-container .s-slider-block__title-right,
.editor-styles-wrapper .agency-products-container .s-slider-block__title {
padding-left: 10px !important;
}
html body.home .agency-products-container .s-slider-nav,
html body.home .agency-products-container .s-slider-block__title-nav,
html body.home salla-products-slider .s-slider-nav,
html body.home salla-products-slider .s-slider-block__title-nav,
html body.home .s-products-slider-wrapper .s-slider-nav,
html body.home .s-products-slider-wrapper .s-slider-block__title-nav,
.editor-styles-wrapper .agency-products-container .s-slider-nav,
.editor-styles-wrapper .agency-products-container .s-slider-block__title-nav {
display: none !important;
}
html body.home .agency-products-container .agency-view-all-btn,
html body.home .agency-products-container .s-slider-block__display-all,
html body.home salla-products-slider .s-slider-block__display-all,
html body.home .s-products-slider-wrapper .s-slider-block__display-all,
.editor-styles-wrapper .agency-products-container .agency-view-all-btn,
.editor-styles-wrapper .agency-products-container .s-slider-block__display-all {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* Mobile product carousel: compact sale pricing so add-to-cart buttons stay bottom-aligned. */
@media (max-width: 767px) {
html body.home .agency-products-container .agency-product-card--live .agency-product-price,
html body.home .agency-products-container .agency-product-card--live .agency-product-price-container {
align-content: flex-start !important;
align-items: center !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
justify-content: flex-start !important;
min-height: 43px !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-price:not(.agency-product-price-container--sale) {
padding-top: 2px !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-sale-row {
align-items: center !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
justify-content: center !important;
min-height: 18px !important;
}
html body.home .agency-products-container .agency-product-card--live:has(.agency-product-discount-line) .agency-product-title,
html body.home .agency-products-container custom-salla-product-card:has(.product-card__count) .product-card__title,
html body.home .agency-products-container custom-salla-product-card:has(.product-card__count) .product-card__content a,
html body.home .agency-products-container .product-card:has(.product-card__count) .product-card__title,
html body.home .agency-products-container .product-card:has(.product-card__count) .product-card__content a {
margin-bottom: 0 !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-price-container--sale,
html body.home .agency-products-container custom-salla-product-card:has(.product-card__count) .product-card__price,
html body.home .agency-products-container .product-card:has(.product-card__count) .product-card__price {
line-height: 1.15 !important;
margin-top: 0 !important;
margin-bottom: 2px !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-discount-line,
html body.home .agency-products-container custom-salla-product-card:has(.product-card__count) .product-card__count,
html body.home .agency-products-container .product-card:has(.product-card__count) .product-card__count {
line-height: 1.15 !important;
margin-top: 0 !important;
margin-bottom: 3px !important;
}
html body.home .agency-products-container .s-products-slider-wrapper .product-card__content-wrapper,
html body.home .agency-products-container custom-salla-product-card .product-card__content-wrapper,
html body.home .agency-products-container .product-card .product-card__content-wrapper {
flex: 0 0 auto !important;
min-height: 98px !important;
}
html body.home .agency-products-container .s-products-slider-wrapper .product-card__price,
html body.home .agency-products-container custom-salla-product-card .product-card__price,
html body.home .agency-products-container .product-card .product-card__price {
min-height: 20px !important;
}
html body.home .agency-products-container .s-products-slider-wrapper .product-card__count,
html body.home .agency-products-container custom-salla-product-card .product-card__count,
html body.home .agency-products-container .product-card .product-card__count {
min-height: 17px !important;
}
html body.home .agency-products-container .agency-product-actions,
html body.home .agency-products-container .product-card__enhanced-mini-cart,
html body.home .agency-products-container .product-card__buttons,
html body.home .agency-products-container salla-add-product-button,
html body.home .agency-products-container salla-button {
margin-top: auto !important;
}
}
/* Mobile product carousel: keep product text centered and cart buttons on one baseline. */
@media (max-width: 767px) {
html body.home .agency-products-container .agency-products-swiper .swiper-wrapper,
html body.home .agency-products-container .s-products-slider-wrapper .swiper-wrapper {
align-items: stretch !important;
}
html body.home .agency-products-container .agency-products-swiper .swiper-wrapper > .swiper-slide,
html body.home .agency-products-container .s-products-slider-wrapper .swiper-slide,
html body.home .agency-products-container .s-products-slider-card {
align-self: stretch !important;
display: flex !important;
height: auto !important;
}
html body.home .agency-products-container .agency-products-swiper .agency-product-card--live {
display: grid !important;
grid-template-rows: auto 42px 48px 33px !important;
height: 100% !important;
min-height: 100% !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-title {
align-items: flex-start !important;
display: flex !important;
justify-content: center !important;
margin: 0 !important;
min-height: 42px !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-price,
html body.home .agency-products-container .agency-product-card--live .agency-product-price-container {
align-items: center !important;
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
justify-content: center !important;
margin: 0 !important;
min-height: 48px !important;
padding: 0 !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-sale-row {
align-items: center !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
justify-content: center !important;
margin: 0 !important;
min-height: 20px !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-discount-line {
line-height: 1.1 !important;
margin: 0 !important;
min-height: 18px !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-actions {
align-self: end !important;
margin-top: 0 !important;
width: 100% !important;
}
html body.home .agency-products-container .s-products-slider-wrapper custom-salla-product-card,
html body.home .agency-products-container .s-products-slider-wrapper .product-card,
html body.home .agency-products-container custom-salla-product-card,
html body.home .agency-products-container .product-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 100% !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .s-products-slider-wrapper .product-card__content,
html body.home .agency-products-container custom-salla-product-card .product-card__content,
html body.home .agency-products-container .product-card .product-card__content {
align-items: stretch !important;
display: grid !important;
flex: 0 0 auto !important;
grid-template-rows: 108px 33px !important;
min-height: 141px !important;
padding: 6px 6px 0 !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .s-products-slider-wrapper .product-card__content-wrapper,
html body.home .agency-products-container custom-salla-product-card .product-card__content-wrapper,
html body.home .agency-products-container .product-card .product-card__content-wrapper {
align-items: center !important;
display: flex !important;
flex-direction: column !important;
height: 108px !important;
justify-content: flex-start !important;
min-height: 108px !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .s-products-slider-wrapper .product-card__title,
html body.home .agency-products-container custom-salla-product-card .product-card__title,
html body.home .agency-products-container .product-card .product-card__title,
html body.home .agency-products-container .s-products-slider-wrapper .product-card__content-wrapper > a:first-child,
html body.home .agency-products-container custom-salla-product-card .product-card__content-wrapper > a:first-child,
html body.home .agency-products-container .product-card .product-card__content-wrapper > a:first-child {
align-items: flex-start !important;
display: flex !important;
justify-content: center !important;
margin: 0 0 4px !important;
min-height: 42px !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .s-products-slider-wrapper .product-card__price,
html body.home .agency-products-container custom-salla-product-card .product-card__price,
html body.home .agency-products-container .product-card .product-card__price {
align-items: center !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
line-height: 1.15 !important;
margin: 0 0 2px !important;
min-height: 22px !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .s-products-slider-wrapper .product-card__count,
html body.home .agency-products-container custom-salla-product-card .product-card__count,
html body.home .agency-products-container .product-card .product-card__count {
line-height: 1.1 !important;
margin: 0 !important;
min-height: 18px !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .product-card__enhanced-mini-cart,
html body.home .agency-products-container .product-card__buttons,
html body.home .agency-products-container salla-add-product-button,
html body.home .agency-products-container salla-button {
align-self: end !important;
display: block !important;
margin-top: 0 !important;
width: 100% !important;
}
}
/* Mobile product carousel: hard-lock cart buttons and center every card's text. */
@media (max-width: 767px) {
html body.home .agency-products-container .agency-products-swiper .swiper-wrapper,
html body.home .agency-products-container .s-products-slider-wrapper .swiper-wrapper {
align-items: stretch !important;
}
html body.home .agency-products-container .agency-products-swiper .swiper-wrapper > .swiper-slide,
html body.home .agency-products-container .s-products-slider-wrapper .swiper-slide,
html body.home .agency-products-container .s-products-slider-card {
align-self: stretch !important;
box-sizing: border-box !important;
display: flex !important;
height: auto !important;
}
html body.home .agency-products-container .agency-product-card--live,
html body.home .agency-products-container custom-salla-product-card,
html body.home .agency-products-container .product-card {
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: 100% !important;
padding-bottom: 33px !important;
position: relative !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-card-image,
html body.home .agency-products-container .agency-product-card--live .agency-product-image-link,
html body.home .agency-products-container custom-salla-product-card .product-card__image,
html body.home .agency-products-container .product-card .product-card__image {
align-items: center !important;
aspect-ratio: 1 / 1 !important;
display: flex !important;
flex: 0 0 auto !important;
justify-content: center !important;
margin: 0 !important;
overflow: hidden !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-card-image img,
html body.home .agency-products-container custom-salla-product-card .product-card__image img,
html body.home .agency-products-container .product-card .product-card__image img {
display: block !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-title,
html body.home .agency-products-container custom-salla-product-card .product-card__title,
html body.home .agency-products-container .product-card .product-card__title,
html body.home .agency-products-container custom-salla-product-card .product-card__content-wrapper > a:first-child,
html body.home .agency-products-container .product-card .product-card__content-wrapper > a:first-child {
align-items: flex-start !important;
align-self: center !important;
display: flex !important;
justify-content: center !important;
margin: 8px auto 4px !important;
min-height: 42px !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-price,
html body.home .agency-products-container .agency-product-card--live .agency-product-price-container,
html body.home .agency-products-container custom-salla-product-card .product-card__price,
html body.home .agency-products-container .product-card .product-card__price {
align-items: center !important;
align-self: center !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 4px !important;
justify-content: center !important;
line-height: 1.15 !important;
margin: 0 auto 2px !important;
min-height: 22px !important;
padding: 0 !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-price,
html body.home .agency-products-container .agency-product-card--live .agency-product-price-container {
flex-direction: column !important;
min-height: 48px !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-sale-row {
align-items: center !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
justify-content: center !important;
margin: 0 auto !important;
min-height: 20px !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-discount-line,
html body.home .agency-products-container custom-salla-product-card .product-card__count,
html body.home .agency-products-container .product-card .product-card__count {
align-self: center !important;
line-height: 1.1 !important;
margin: 0 auto !important;
min-height: 18px !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container custom-salla-product-card .product-card__content,
html body.home .agency-products-container .product-card .product-card__content,
html body.home .agency-products-container custom-salla-product-card .product-card__content-wrapper,
html body.home .agency-products-container .product-card .product-card__content-wrapper {
align-items: center !important;
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
height: auto !important;
justify-content: flex-start !important;
min-height: 0 !important;
padding: 6px 6px 0 !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-actions,
html body.home .agency-products-container .product-card__enhanced-mini-cart,
html body.home .agency-products-container .product-card__buttons,
html body.home .agency-products-container salla-add-product-button,
html body.home .agency-products-container salla-button {
bottom: 0 !important;
display: block !important;
height: 33px !important;
left: 0 !important;
margin: 0 !important;
position: absolute !important;
right: 0 !important;
top: auto !important;
width: 100% !important;
z-index: 4 !important;
}
html body.home .agency-products-container .agency-product-action--cart,
html body.home .agency-products-container button.s-button-element.s-button-wide,
html body.home .agency-products-container .s-button-element.s-button-wide,
html body.home .agency-products-container salla-button .s-button-element {
bottom: auto !important;
height: 33px !important;
margin: 0 !important;
min-height: 33px !important;
position: relative !important;
top: auto !important;
width: 100% !important;
}
}
/* Mobile product carousel: final card centering and shared cart baseline. */
@media (max-width: 767px) {
html body.home .agency-products-container .agency-products-swiper .swiper-wrapper,
html body.home .agency-products-container .s-products-slider-wrapper .swiper-wrapper {
align-items: stretch !important;
}
html body.home .agency-products-container .agency-products-swiper .swiper-wrapper > .swiper-slide,
html body.home .agency-products-container .s-products-slider-wrapper .swiper-slide,
html body.home .agency-products-container .s-products-slider-card {
align-items: stretch !important;
align-self: stretch !important;
display: flex !important;
justify-content: center !important;
}
html body.home .agency-products-container .agency-product-card--live,
html body.home .agency-products-container custom-salla-product-card,
html body.home .agency-products-container .product-card {
align-items: stretch !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
min-height: calc((100vw / var(--agency-products-mobile-visible, 1.6)) + 148px) !important;
padding-bottom: 33px !important;
position: relative !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container custom-salla-product-card .product-card {
min-height: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-card-image,
html body.home .agency-products-container .agency-product-card--live .agency-product-image-link,
html body.home .agency-products-container custom-salla-product-card .product-card__image,
html body.home .agency-products-container custom-salla-product-card .product-card__image > a,
html body.home .agency-products-container .product-card .product-card__image,
html body.home .agency-products-container .product-card .product-card__image > a {
align-items: center !important;
display: flex !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-title,
html body.home .agency-products-container custom-salla-product-card .product-card__title,
html body.home .agency-products-container .product-card .product-card__title,
html body.home .agency-products-container custom-salla-product-card .product-card__content-wrapper > a:first-child,
html body.home .agency-products-container .product-card .product-card__content-wrapper > a:first-child {
align-items: flex-start !important;
display: flex !important;
justify-content: center !important;
line-height: 1.25 !important;
margin: 8px auto 4px !important;
min-height: 42px !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container custom-salla-product-card .product-card__content,
html body.home .agency-products-container .product-card .product-card__content {
align-items: center !important;
display: flex !important;
flex: 0 0 112px !important;
flex-direction: column !important;
justify-content: flex-start !important;
max-height: 112px !important;
min-height: 112px !important;
padding: 6px 6px 0 !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container custom-salla-product-card .product-card__content-wrapper,
html body.home .agency-products-container .product-card .product-card__content-wrapper {
align-items: center !important;
display: flex !important;
flex: 0 0 auto !important;
flex-direction: column !important;
justify-content: flex-start !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-price,
html body.home .agency-products-container .agency-product-price-container,
html body.home .agency-products-container custom-salla-product-card .product-card__price,
html body.home .agency-products-container .product-card .product-card__price,
html body.home .agency-products-container custom-salla-product-card .product-card__count,
html body.home .agency-products-container .product-card .product-card__count {
align-items: center !important;
align-self: center !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-actions,
html body.home .agency-products-container .product-card__enhanced-mini-cart,
html body.home .agency-products-container .product-card__buttons,
html body.home .agency-products-container salla-add-product-button {
bottom: 0 !important;
left: 0 !important;
margin: 0 !important;
position: absolute !important;
right: 0 !important;
top: auto !important;
width: 100% !important;
z-index: 5 !important;
}
html body.home .agency-products-container .agency-product-action--cart,
html body.home .agency-products-container salla-button,
html body.home .agency-products-container salla-button .s-button-element,
html body.home .agency-products-container .s-button-element.s-button-wide {
height: 33px !important;
margin: 0 !important;
min-height: 33px !important;
width: 100% !important;
}
}
/* Mobile product carousel: keep image action icons on the image. */
@media (max-width: 767px) {
html body.home .agency-products-container custom-salla-product-card .product-card__actions,
html body.home .agency-products-container .product-card .product-card__actions,
html body.home .agency-products-container custom-salla-product-card .product-card__buttons,
html body.home .agency-products-container .product-card .product-card__buttons {
align-items: center !important;
bottom: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
height: auto !important;
justify-content: flex-start !important;
left: auto !important;
margin: 0 !important;
min-height: 0 !important;
min-width: 0 !important;
padding: 0 !important;
position: absolute !important;
right: 8px !important;
top: 8px !important;
width: auto !important;
z-index: 8 !important;
}
html body.home .agency-products-container custom-salla-product-card .product-card__buttons salla-button,
html body.home .agency-products-container .product-card .product-card__buttons salla-button,
html body.home .agency-products-container custom-salla-product-card .product-card__buttons .s-button-element,
html body.home .agency-products-container .product-card .product-card__buttons .s-button-element,
html body.home .agency-products-container custom-salla-product-card .product-card__buttons button,
html body.home .agency-products-container .product-card .product-card__buttons button,
html body.home .agency-products-container custom-salla-product-card .product-card__buttons a,
html body.home .agency-products-container .product-card .product-card__buttons a,
html body.home .agency-products-container custom-salla-product-card .product-card__actions button,
html body.home .agency-products-container .product-card .product-card__actions button,
html body.home .agency-products-container custom-salla-product-card .product-card__actions a,
html body.home .agency-products-container .product-card .product-card__actions a {
border-radius: 999px !important;
flex: 0 0 36px !important;
height: 36px !important;
margin: 0 !important;
min-height: 36px !important;
min-width: 36px !important;
position: relative !important;
width: 36px !important;
}
html body.home .agency-products-container .product-card__enhanced-mini-cart,
html body.home .agency-products-container salla-add-product-button {
bottom: 0 !important;
left: 0 !important;
position: absolute !important;
right: 0 !important;
top: auto !important;
width: 100% !important;
}
}
/* Mobile product carousel: separate image icons from the cart row. */
@media (max-width: 767px) {
html body.home .agency-products-container .agency-product-card--live .agency-product-actions {
bottom: auto !important;
display: block !important;
height: 0 !important;
left: auto !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
right: auto !important;
top: auto !important;
width: auto !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-action--cart {
bottom: 0 !important;
height: 33px !important;
left: 0 !important;
min-height: 33px !important;
position: absolute !important;
right: 0 !important;
top: auto !important;
width: 100% !important;
z-index: 5 !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-action--heart,
html body.home .agency-products-container .agency-product-card--live .agency-product-action--view {
align-items: center !important;
background: #fff !important;
border-radius: 999px !important;
bottom: auto !important;
box-shadow: 0 4px 14px rgba(17, 24, 39, 0.10) !important;
display: inline-flex !important;
flex: 0 0 36px !important;
height: 36px !important;
justify-content: center !important;
left: auto !important;
margin: 0 !important;
min-height: 36px !important;
min-width: 36px !important;
position: absolute !important;
right: 8px !important;
width: 36px !important;
z-index: 9 !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-action--heart {
top: 8px !important;
}
html body.home .agency-products-container .agency-product-card--live .agency-product-action--view {
top: 52px !important;
}
html body.home .agency-products-container custom-salla-product-card .product-card__actions,
html body.home .agency-products-container .product-card .product-card__actions,
html body.home .agency-products-container custom-salla-product-card .product-card__buttons,
html body.home .agency-products-container .product-card .product-card__buttons {
bottom: auto !important;
left: auto !important;
position: absolute !important;
right: 8px !important;
top: 8px !important;
width: auto !important;
z-index: 9 !important;
}
html body.home .agency-products-container custom-salla-product-card .product-card__actions salla-button,
html body.home .agency-products-container .product-card .product-card__actions salla-button,
html body.home .agency-products-container custom-salla-product-card .product-card__buttons salla-button,
html body.home .agency-products-container .product-card .product-card__buttons salla-button,
html body.home .agency-products-container custom-salla-product-card .product-card__actions .s-button-element,
html body.home .agency-products-container .product-card .product-card__actions .s-button-element,
html body.home .agency-products-container custom-salla-product-card .product-card__buttons .s-button-element,
html body.home .agency-products-container .product-card .product-card__buttons .s-button-element {
bottom: auto !important;
display: inline-flex !important;
flex: 0 0 36px !important;
height: 36px !important;
left: auto !important;
margin: 0 !important;
min-height: 36px !important;
min-width: 36px !important;
position: relative !important;
right: auto !important;
top: auto !important;
width: 36px !important;
}
html body.home .agency-products-container .product-card__enhanced-mini-cart salla-button,
html body.home .agency-products-container salla-add-product-button salla-button,
html body.home .agency-products-container .product-card__enhanced-mini-cart .s-button-element,
html body.home .agency-products-container salla-add-product-button .s-button-element {
height: 33px !important;
min-height: 33px !important;
width: 100% !important;
}
}
/* Mobile product carousel: center regular-price cards without discount text. */
@media (max-width: 767px) {
html body.home .agency-products-container .agency-product-card--live:not(:has(.agency-product-discount-line)) .agency-product-title,
html body.home .agency-products-container .agency-product-card--live:not(:has(.agency-product-discount-line)) .agency-product-price,
html body.home .agency-products-container .agency-product-card--live:not(:has(.agency-product-discount-line)) .agency-product-price-container,
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__content,
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__content-wrapper,
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__title,
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__price,
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__content,
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__content-wrapper,
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__title,
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__price {
align-items: center !important;
align-self: center !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
width: 100% !important;
}
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__content-wrapper > *,
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__content-wrapper > *,
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__price *,
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__price * {
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
}
/* Mobile product carousel: force single-price rows to sit in the card center. */
@media (max-width: 767px) {
html body.home .agency-products-container .agency-product-card--live:not(:has(.agency-product-discount-line)) > .agency-product-price {
align-items: center !important;
align-self: stretch !important;
display: grid !important;
justify-items: center !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
place-items: center !important;
text-align: center !important;
text-align-last: center !important;
width: 100% !important;
}
html body.home .agency-products-container .agency-product-card--live:not(:has(.agency-product-discount-line)) > .agency-product-price .agency-money,
html body.home .agency-products-container .agency-product-card--live:not(:has(.agency-product-discount-line)) > .agency-product-price .agency-money-amount {
align-items: center !important;
display: inline-flex !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
text-align-last: center !important;
}
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__price,
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__price *,
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__content [class*="price"],
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__content [class*="amount"],
html body.home .agency-products-container custom-salla-product-card:not(:has(.product-card__count)) .product-card__content [class*="money"],
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__price,
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__price *,
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__content [class*="price"],
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__content [class*="amount"],
html body.home .agency-products-container .product-card:not(:has(.product-card__count)) .product-card__content [class*="money"] {
align-items: center !important;
display: flex !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
text-align-last: center !important;
width: 100% !important;
}
}
/* Agency mobile category grid padding fix 2026-06-14 */
@media (max-width: 767px) {
}
/* End agency mobile category grid padding fix */
/* Agency restore secondary mobile category grid padding */
@media (max-width: 767px) {
html body.home .wp-block-group.alignwide.is-layout-grid[style*="--agency-main-mobile-cols"]:not(.agency-main-categories-grid):not(.agency-category-grid-card-spacing) {
box-sizing: border-box !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
}
/* End agency restore secondary mobile category grid padding */