/*
Theme Name: Borbila
Theme URI: https://example.com/
Description: Child theme for Hello Elementor
Author: Your Name
Author URI: https://example.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: borbila
*/
/* Custom CSS goes below */
/* ==========================================================
FOUNDATION (spacing, radius, breakpoints)
Base unit 4px. Radius follows the concentric rule:
outer radius = inner radius + padding.
Breakpoints mirror Elementor exactly:
mobile <= 760 | tablet 761-1024 | desktop >= 1025
Never write a layout query at 767px.
========================================================== */
:root {
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sp-16: 64px;
/* Fluid: scale between breakpoints instead of jumping at them */
--sp-gutter: clamp(16px, 4vw, 32px);
--sp-section: clamp(40px, 6vw, 88px);
--sp-stack: clamp(16px, 2.5vw, 28px);
--r-1: 8px;
--r-2: 12px;
--r-3: 16px;
--r-pill: 999px;
--c-bg: #FBFAFF;
--c-surface: #FFFFFF;
--c-ink: #111111;
--c-muted: #65758B;
--c-accent: #FF5C00; /* was var(--e-global-color-primary, #FF5C00) - but this site's "Primary" global color is actually mapped to near-black (#030712), not orange, so the fallback never triggered and every rule using --c-accent silently rendered black instead of orange. Hardcoded directly to guarantee correctness. */
--c-hairline: #ECECEC;
--shadow-hairline: 0 0 0 1px rgba(17, 17, 17, 0.06), 0 1px 2px -1px rgba(17, 17, 17, 0.06), 0 2px 4px 0 rgba(17, 17, 17, 0.04);
--shadow-hairline-hover: 0 0 0 1px rgba(17, 17, 17, 0.09), 0 1px 2px -1px rgba(17, 17, 17, 0.09), 0 2px 6px 0 rgba(17, 17, 17, 0.06);
--measure: 68ch;
}
/* Crisper text rendering on macOS */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Stops a single overflowing child forcing a sideways scroll on mobile */
html,
body {
overflow-x: clip;
}
/* Fluid gutter fallback. Only lands on containers where Elementor has set no
explicit padding, so it never fights per-element settings. */
.e-con-boxed {
--padding-left: var(--sp-gutter);
--padding-right: var(--sp-gutter);
}
.e-con-boxed .e-con {
--padding-left: 0px;
--padding-right: 0px;
}
/* Text wrapping */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.woocommerce-loop-product__title {
text-wrap: balance;
}
p,
.elementor-widget-text-editor,
.woocommerce-product-details__short-description {
text-wrap: pretty;
}
/* Numbers that update in place should not shift the layout */
.price,
.woocommerce-Price-amount,
.quantity input,
.cart-subtotal td,
.order-total td,
.woocommerce-Price-amount bdi,
.borbila-track-item-price,
.borbila-track-payment-list strong {
font-variant-numeric: tabular-nums;
}
/* Consistent edge on imagery */
.elementor-widget-image img,
ul.products li.product img,
.woocommerce-product-gallery__image img {
outline: 1px solid rgba(17, 17, 17, 0.09);
outline-offset: -1px;
}
/* Comfortable measure on running text */
.elementor-widget-text-editor p,
.woocommerce-product-details__short-description p {
max-width: var(--measure);
}
.woocommerce-account {
--borbila-account-chip-bg: var(--e-global-color-primary, #6550f5);
--borbila-account-chip-bg-hover: var(--e-global-color-secondary, #4f46e5);
--borbila-account-chip-text: #ffffff;
}
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content .borbila-account-intro {
line-height: 1.8;
margin-bottom: 12px;
}
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content .borbila-account-shortcuts {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin-top: 18px;
}
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content .borbila-account-shortcuts a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 14px !important;
border-radius: 999px !important;
background: var(--borbila-account-chip-bg) !important;
border: 0 !important;
color: var(--borbila-account-chip-text) !important;
text-decoration: none !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-color 0.18s ease;
}
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content .borbila-account-shortcuts a:hover,
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content .borbila-account-shortcuts a:focus {
background: var(--borbila-account-chip-bg-hover) !important;
transform: translateY(-1px);
filter: brightness(1.02);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16) !important;
}
@media (max-width: 760px) {
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content .borbila-account-shortcuts {
gap: 8px;
}
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content .borbila-account-shortcuts a {
width: 100%;
}
}
.borbila-auth-wrap {
position: relative;
overflow: hidden;
max-width: 460px;
margin: 0 auto;
padding: var(--sp-6);
background:
linear-gradient(180deg, color-mix(in srgb, var(--borbila-auth-surface, #ffffff) 98%, #ffffff) 0%, var(--borbila-auth-surface, #ffffff) 100%),
radial-gradient(circle at top right, rgba(163, 0, 49, 0.08), transparent 36%),
radial-gradient(circle at top left, color-mix(in srgb, var(--borbila-auth-primary, #6550f5) 6%, transparent), transparent 28%);
border: 0;
border-radius: calc(var(--r-1) + var(--sp-6));
box-shadow: var(--shadow-hairline), 0 28px 70px rgba(15, 23, 42, 0.08);
}
.borbila-auth-register {
max-width: 540px;
}
.borbila-auth-wrap::before {
content: none;
}
.borbila-register-header {
margin-bottom: 16px;
text-align: center;
}
.borbila-auth-wrap h2 {
margin: 0 0 10px !important;
font-size: 30px;
line-height: 1.2;
font-weight: 800;
color: var(--borbila-auth-primary, #6550f5);
}
.borbila-auth-login h2,
.borbila-auth-login .borbila-auth-subtitle {
text-align: center;
}
.borbila-auth-subtitle {
margin: 0 auto 14px !important;
width: 100%;
max-width: 40ch;
font-size: 14px;
line-height: 1.65;
color: #65758b;
text-align: center;
}
.borbila-register-subtitle {
max-width: 44ch;
margin-bottom: 24px !important;
}
.borbila-auth-wrap .form-row {
margin-bottom: 14px;
}
.borbila-login-form .borbila-auth-actions {
margin-top: 12px;
}
.borbila-auth-wrap .woocommerce-form-login {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
height: auto !important;
}
.borbila-register-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.borbila-register-grid .form-row {
margin-bottom: 0;
}
.borbila-auth-register .borbila-register-password-row {
margin-top: 4px !important;
padding-top: 12px !important;
}
.borbila-auth-register .borbila-register-confirm-row {
margin-top: 4px !important;
padding-top: 12px !important;
}
.borbila-auth-register .borbila-register-submit {
width: 100%;
}
.borbila-register-terms {
margin: 6px 0 20px;
}
.borbila-register-terms-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
line-height: 1.5;
color: #1f2937;
font-weight: 500;
cursor: pointer;
}
.borbila-register-terms-label span {
font-weight: 500;
}
.borbila-register-terms-label input[type="checkbox"] {
margin-top: 3px;
flex: 0 0 auto;
accent-color: var(--e-global-color-primary, #6550f5);
}
.borbila-auth-wrap label {
display: block;
margin-bottom: 8px;
font-weight: 700;
color: #161e2f;
}
.borbila-auth-register label {
font-size: 15px;
font-weight: 600;
}
/* ==========================================================
Borbila Order Tracking
========================================================== */
.borbila-track-wrap {
width: min(100%, 1120px);
margin: 0 auto;
padding: var(--sp-5) var(--sp-gutter) var(--sp-section);
color: #111111;
box-sizing: border-box;
}
.borbila-track-hero {
max-width: 760px;
margin: 0 auto 28px;
text-align: center;
}
.borbila-track-kicker {
margin: 0 0 10px;
color: #6b7280;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.borbila-track-hero h2 {
margin: 0;
color: #111111;
font-size: 40px;
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.03em;
}
.borbila-track-subtitle {
max-width: 62ch;
margin: 12px auto 0;
color: #555555;
font-size: 16px;
line-height: 1.65;
}
.borbila-track-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
justify-content: center;
gap: 12px;
margin: 24px auto 0;
width: 100%;
max-width: 760px;
}
.borbila-track-form input[type="number"] {
width: 100%;
min-width: 0;
height: 54px;
margin: 0;
padding: 0 var(--sp-5);
border: 1px solid var(--c-hairline);
border-radius: var(--r-2);
background: #ffffff;
color: #111111;
font-size: 16px;
font-weight: 500;
box-shadow: none;
appearance: textfield;
}
.borbila-track-form input[type="number"]::-webkit-outer-spin-button,
.borbila-track-form input[type="number"]::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
.borbila-track-form input[type="number"]::placeholder {
color: #7a7a7a;
opacity: 1;
}
.borbila-track-form input[type="number"]:focus {
border-color: #111111;
box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
outline: none;
}
.borbila-track-form button {
min-width: 148px;
height: 54px;
padding: 0 var(--sp-6);
border: 0;
border-radius: var(--r-2);
background: #111111;
color: #ffffff;
font-size: 16px;
font-weight: 800;
cursor: pointer;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.borbila-track-form button:hover,
.borbila-track-form button:focus {
transform: translateY(-1px);
opacity: 0.94;
}
.borbila-track-result {
max-width: 960px;
margin: 32px auto 0;
}
.borbila-track-summary {
padding: var(--sp-5);
border: 0;
border-radius: calc(var(--r-2) + var(--sp-5));
background: var(--c-surface);
box-shadow: var(--shadow-hairline), 0 18px 50px rgba(17, 17, 17, 0.05);
}
.borbila-track-summary-head {
padding-bottom: 18px;
border-bottom: 1px solid #ececec;
}
.borbila-track-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
padding: 6px 11px;
border: 1px solid #111111;
border-radius: 999px;
background: #111111;
color: #ffffff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.borbila-track-summary-head h3 {
margin: 0;
color: #111111;
font-size: 24px;
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.02em;
}
.borbila-track-summary-head p {
margin: 8px 0 0;
color: #666666;
font-size: 13px;
line-height: 1.55;
}
.borbila-track-meta-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-top: 18px;
}
.borbila-track-meta,
.borbila-track-estimate {
padding: var(--sp-3) var(--sp-4);
border: 0;
border-radius: var(--r-2);
background: #fafafa;
box-shadow: var(--shadow-hairline);
}
.borbila-track-meta span,
.borbila-track-estimate span {
display: block;
margin-bottom: 6px;
color: #6b7280;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.borbila-track-meta strong,
.borbila-track-estimate strong {
color: #111111;
font-size: 14px;
font-weight: 800;
}
.borbila-track-estimate {
margin-top: 14px;
}
.borbila-track-panels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-top: 18px;
}
.borbila-track-panel,
.borbila-track-items {
padding: var(--sp-5);
border: 0;
border-radius: calc(var(--r-2) + var(--sp-5));
background: var(--c-surface);
box-shadow: var(--shadow-hairline);
}
.borbila-track-panel h4,
.borbila-track-items h4 {
margin: 0 0 12px;
color: #111111;
font-size: 16px;
line-height: 1.3;
font-weight: 800;
}
.borbila-track-panel p {
margin: 0;
color: #555555;
font-size: 14px;
line-height: 1.65;
word-break: break-word;
}
.borbila-track-payment-list {
list-style: none;
margin: 0;
padding: 0;
}
.borbila-track-payment-list li {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-top: 1px solid #f0f0f0;
color: #111111;
}
.borbila-track-payment-list li:first-child {
padding-top: 0;
border-top: 0;
}
.borbila-track-payment-list span {
color: #6b7280;
font-size: 13px;
font-weight: 600;
}
.borbila-track-payment-list strong {
color: #111111;
font-size: 13px;
font-weight: 800;
text-align: right;
}
.borbila-track-items {
margin-top: 16px;
}
.borbila-track-items-list {
display: grid;
gap: 10px;
}
.borbila-track-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
border-top: 1px solid #f0f0f0;
}
.borbila-track-item:first-child {
border-top: 0;
padding-top: 0;
}
.borbila-track-item-thumb {
flex: 0 0 auto;
width: 64px;
height: 64px;
border: 0;
border-radius: var(--r-2);
box-shadow: var(--shadow-hairline);
background: #fafafa;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.borbila-track-item-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.borbila-track-item-body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
min-width: 0;
}
.borbila-track-item-name {
color: #111111;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
}
.borbila-track-item-price {
color: #111111;
font-size: 14px;
font-weight: 800;
white-space: nowrap;
}
.borbila-track-error {
max-width: 760px;
margin: 20px auto 0;
padding: var(--sp-5);
border: 1px solid var(--c-ink);
border-radius: calc(var(--r-1) + var(--sp-5));
background: #ffffff;
color: #111111;
text-align: center;
}
.borbila-track-error strong {
display: block;
margin-bottom: 6px;
font-size: 16px;
font-weight: 800;
}
.borbila-track-error p {
margin: 0;
color: #555555;
font-size: 14px;
line-height: 1.6;
}
.woocommerce-notices-wrapper .woocommerce-message .wc-forward,
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward,
.woocommerce-notices-wrapper .woocommerce-message a.wc-forward,
.woocommerce-notices-wrapper .woocommerce-message a[href*="/cart"] {
display: none !important;
}
.elementor-wc-products a.added_to_cart,
.elementor-loop-item a.added_to_cart,
.e-loop-item a.added_to_cart,
ul.products li.product a.added_to_cart,
.products a.added_to_cart {
display: none !important;
}
.borbila-loop-view-cart {
pointer-events: auto;
}
.woocommerce-checkout .elementor-10 .elementor-element.elementor-element-8fb6bbd .woocommerce-checkout #payment {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.woocommerce-checkout .elementor-10 .elementor-element.elementor-element-8fb6bbd .woocommerce-checkout #payment .payment_methods,
.woocommerce-checkout .elementor-10 .elementor-element.elementor-element-8fb6bbd .woocommerce-checkout #payment .payment_methods .payment_box {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
@media (max-width: 760px) {
.elementor-1259 .elementor-element.elementor-element-2616284 {
--flex-direction: column !important;
--justify-content: flex-start !important;
--align-items: stretch !important;
flex-direction: column !important;
}
.elementor-1259 .elementor-element.elementor-element-ec96da4,
.elementor-1259 .elementor-element.elementor-element-91fc15d {
--width: 100% !important;
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
}
.elementor-1248 .elementor-element.elementor-element-c0c9938,
.elementor-1492 .elementor-element.elementor-element-7e0a2bf,
.elementor-1689 .elementor-element.elementor-element-56d6027d {
--gap: 8px 0 !important;
--row-gap: 8px !important;
--column-gap: 0 !important;
--justify-content: flex-start !important;
}
.elementor-1259 .elementor-element.elementor-element-e583c99,
.elementor-1248 .elementor-element.elementor-element-39fadc4,
.elementor-1492 .elementor-element.elementor-element-6ab168b5,
.elementor-1689 .elementor-element.elementor-element-c758dd2 {
margin-bottom: 0 !important;
}
.elementor-1259 .elementor-element.elementor-element-e583c99 .elementor-heading-title,
.elementor-1248 .elementor-element.elementor-element-39fadc4 .elementor-heading-title,
.elementor-1492 .elementor-element.elementor-element-6ab168b5 .elementor-heading-title,
.elementor-1689 .elementor-element.elementor-element-c758dd2 .elementor-heading-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.elementor-1259 .elementor-element.elementor-element-1aa87d3,
.elementor-1248 .elementor-element.elementor-element-6262083,
.elementor-1492 .elementor-element.elementor-element-6cc0c2a7,
.elementor-1689 .elementor-element.elementor-element-7f15c95b {
display: flex;
align-items: center;
min-height: 22px;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.elementor-1259 .elementor-element.elementor-element-03e551a,
.elementor-1248 .elementor-element.elementor-element-e3c4cdc,
.elementor-1492 .elementor-element.elementor-element-a49c601,
.elementor-1689 .elementor-element.elementor-element-8beb99e {
width: 100%;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.elementor-1259 .elementor-element.elementor-element-03e551a .elementor-button,
.elementor-1248 .elementor-element.elementor-element-e3c4cdc .button,
.elementor-1492 .elementor-element.elementor-element-a49c601 .button,
.elementor-1689 .elementor-element.elementor-element-8beb99e .button {
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
width: 100%;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.woocommerce-shop .elementor-1689 .elementor-element.elementor-element-7f15c95b .price {
line-height: 16px !important;
}
body.woocommerce-shop .elementor-1689 .elementor-element.elementor-element-7f15c95b .price del {
font-size: 13px !important;
line-height: 16px !important;
}
body.woocommerce-shop .elementor-1689 .elementor-element.elementor-element-7f15c95b .price ins {
font-size: 14px !important;
line-height: 16px !important;
}
}
.elementor-13 .elementor-element.elementor-element-caf61c6 :is(.swiper, .swiper-container):not(.swiper-initialized) .swiper-wrapper {
display: flex;
gap: 12px;
transform: none !important;
}
.elementor-13 .elementor-element.elementor-element-caf61c6 :is(.swiper, .swiper-container):not(.swiper-initialized) .swiper-slide {
flex: 0 0 calc((100% - 60px) / 6);
width: calc((100% - 60px) / 6) !important;
max-width: calc((100% - 60px) / 6);
margin-right: 0 !important;
}
@media (max-width: 1024px) {
.elementor-13 .elementor-element.elementor-element-caf61c6 :is(.swiper, .swiper-container):not(.swiper-initialized) .swiper-wrapper {
gap: 12px;
}
.elementor-13 .elementor-element.elementor-element-caf61c6 :is(.swiper, .swiper-container):not(.swiper-initialized) .swiper-slide {
flex-basis: calc((100% - 24px) / 3);
width: calc((100% - 24px) / 3) !important;
max-width: calc((100% - 24px) / 3);
}
}
@media (max-width: 760px) {
.elementor-13 .elementor-element.elementor-element-caf61c6 :is(.swiper, .swiper-container):not(.swiper-initialized) .swiper-wrapper {
gap: 8px;
}
.elementor-13 .elementor-element.elementor-element-caf61c6 :is(.swiper, .swiper-container):not(.swiper-initialized) .swiper-slide {
flex-basis: calc((100% - 16px) / 3);
width: calc((100% - 16px) / 3) !important;
max-width: calc((100% - 16px) / 3);
}
}
@media (max-width: 760px) {
.borbila-track-wrap {
padding: 16px 12px 28px;
}
.borbila-track-hero {
margin-bottom: 20px;
}
.borbila-track-form {
grid-template-columns: 1fr;
gap: 10px;
}
.borbila-track-form input[type="number"],
.borbila-track-form button {
width: 100%;
max-width: none;
min-width: 0;
height: 48px;
border-radius: var(--r-2);
}
.borbila-track-summary {
padding: var(--sp-4);
border-radius: calc(var(--r-2) + var(--sp-4));
}
.borbila-track-panel,
.borbila-track-items {
padding: var(--sp-4);
border-radius: calc(var(--r-2) + var(--sp-4));
}
.borbila-track-item {
align-items: flex-start;
}
.borbila-track-item-thumb {
width: 56px;
height: 56px;
border-radius: var(--r-2);
}
.borbila-track-item-body {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
}
@media (max-width: 520px) {
.borbila-track-hero h2 {
font-size: 28px;
}
.borbila-track-subtitle {
margin-top: 10px;
font-size: 15px;
line-height: 1.55;
}
.borbila-track-summary-head h3 {
font-size: 22px;
}
.borbila-track-summary-head p,
.borbila-track-panel p,
.borbila-track-error p {
font-size: 14px;
}
.borbila-track-meta strong,
.borbila-track-estimate strong,
.borbila-track-payment-list strong,
.borbila-track-item-price {
font-size: 14px;
}
.borbila-track-item-name {
font-size: 14px;
}
}
@media (max-width: 380px) {
.borbila-track-wrap {
padding-left: 10px;
padding-right: 10px;
}
.borbila-track-summary,
.borbila-track-panel,
.borbila-track-items {
padding: 14px;
}
.borbila-track-status-pill {
font-size: 10px;
padding: 6px 10px;
}
}
.borbila-auth-wrap input[type="text"],
.borbila-auth-wrap input[type="password"],
.borbila-auth-wrap input[type="email"] {
width: 100% !important;
height: 46px !important;
min-height: 46px !important;
padding: 8px 12px !important;
border: 1px solid var(--borbila-auth-border, #d8dde6) !important;
border-radius: var(--r-1) !important;
background: #fbfbfd !important;
color: #111827 !important;
box-sizing: border-box !important;
box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.02) !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
line-height: 28px !important;
}
.borbila-auth-wrap input::placeholder {
color: color-mix(in srgb, var(--borbila-auth-primary, #6550f5) 18%, #ffffff);
opacity: 1;
font-size: calc(1em - 2px);
}
.borbila-auth-register input::placeholder {
color: rgba(0, 0, 0, 0.48) !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.borbila-auth-register input::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.48) !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.borbila-auth-register input::-moz-placeholder {
color: rgba(0, 0, 0, 0.48) !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.borbila-auth-register input:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.48) !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.borbila-auth-register input::-ms-input-placeholder {
color: rgba(0, 0, 0, 0.48) !important;
opacity: 1 !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.borbila-auth-wrap input[type="text"]:focus,
.borbila-auth-wrap input[type="password"]:focus,
.borbila-auth-wrap input[type="email"]:focus {
border-color: var(--borbila-auth-primary, #6550f5) !important;
background: #ffffff !important;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--borbila-auth-primary, #6550f5) 14%, transparent) !important;
outline: none !important;
}
.borbila-auth-actions,
.borbila-auth-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.borbila-auth-actions {
flex-direction: column;
align-items: stretch;
margin-top: 4px;
}
.borbila-login-form .borbila-auth-actions {
flex-direction: column;
align-items: stretch;
}
.borbila-login-form .woocommerce-form-login__submit {
width: 100%;
}
.borbila-login-form .woocommerce-form-login__submit + .woocommerce-form-login__submit {
margin-top: 0;
}
.borbila-login-form .woocommerce-form-login__submit,
.borbila-login-form .woocommerce-form-login__submit:hover,
.borbila-login-form .woocommerce-form-login__submit:focus {
align-self: stretch;
}
.borbila-auth-links {
flex-direction: column;
align-items: stretch;
margin-top: 16px;
text-align: center;
}
.borbila-auth-wrap .woocommerce-form-login__submit,
.borbila-auth-wrap .borbila-register-submit,
.borbila-auth-wrap .borbila-create-account-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: var(--sp-3) var(--sp-5);
border-radius: var(--r-1);
font-weight: 700;
text-transform: none !important;
letter-spacing: 0;
text-decoration: none;
transition: none;
}
.borbila-auth-wrap .woocommerce-form-login__submit,
.borbila-auth-wrap .borbila-register-submit {
background: var(--borbila-auth-primary, #6550f5) !important;
color: #ffffff !important;
border: 0 !important;
box-shadow: 0 16px 30px color-mix(in srgb, var(--borbila-auth-primary, #6550f5) 20%, transparent) !important;
}
.borbila-auth-wrap .borbila-create-account-button {
background: color-mix(in srgb, var(--borbila-auth-primary, #6550f5) 6%, #ffffff);
color: var(--borbila-auth-primary, #6550f5) !important;
border: 1px solid var(--borbila-auth-border, #d8dde6);
width: 100%;
font-weight: 700;
}
.borbila-auth-wrap .woocommerce-form-login__submit:hover,
.borbila-auth-wrap .woocommerce-form-login__submit:focus,
.borbila-auth-wrap .borbila-register-submit:hover,
.borbila-auth-wrap .borbila-register-submit:focus,
.borbila-auth-wrap .borbila-create-account-button:hover,
.borbila-auth-wrap .borbila-create-account-button:focus {
transform: none;
filter: none;
}
.borbila-auth-wrap .woocommerce-form-login__submit:hover,
.borbila-auth-wrap .woocommerce-form-login__submit:focus,
.borbila-auth-wrap .borbila-register-submit:hover,
.borbila-auth-wrap .borbila-register-submit:focus {
background: var(--borbila-auth-primary, #6550f5) !important;
box-shadow: 0 16px 30px color-mix(in srgb, var(--borbila-auth-primary, #6550f5) 20%, transparent) !important;
}
.borbila-auth-wrap .borbila-create-account-button:hover,
.borbila-auth-wrap .borbila-create-account-button:focus {
background: var(--borbila-auth-secondary, #4f46e5) !important;
border-color: var(--borbila-auth-secondary, #4f46e5) !important;
color: #ffffff !important;
}
.borbila-auth-wrap .lost_password,
.borbila-register-login-link {
margin: 0;
font-size: 14px;
text-align: center;
}
.borbila-login-form .lost_password {
order: 2;
margin-top: 2px;
}
.borbila-login-form .woocommerce-form-login__submit {
order: 1;
}
.borbila-auth-wrap .lost_password a,
.borbila-register-login-link a {
color: var(--borbila-auth-primary, #6550f5) !important;
text-decoration: none;
font-weight: 700;
}
.borbila-register-login-link a {
display: inline;
}
.borbila-auth-wrap .lost_password a:hover,
.borbila-register-login-link a:hover {
color: var(--borbila-auth-secondary, #4f46e5) !important;
text-decoration: underline;
}
.borbila-register-login-link {
margin-top: 18px;
}
body.woocommerce-account.woocommerce-lost-password .woocommerce {
display: flex;
justify-content: center;
}
body.woocommerce-account.woocommerce-lost-password .woocommerce-MyAccount-content {
width: 100%;
}
body.woocommerce-account.woocommerce-lost-password .woocommerce .woocommerce-ResetPassword,
body.woocommerce-account.woocommerce-lost-password .woocommerce .lost_reset_password {
width: min(100%, 640px);
margin-left: auto;
margin-right: auto;
}
body.woocommerce-account.woocommerce-lost-password .woocommerce form.lost_reset_password,
body.woocommerce-account.woocommerce-lost-password .woocommerce form.woocommerce-ResetPassword {
max-width: 640px;
margin: 0 auto;
}
body.woocommerce-account.woocommerce-lost-password .woocommerce .woocommerce-ResetPassword p:first-child,
body.woocommerce-account.woocommerce-lost-password .woocommerce .lost_reset_password p:first-child {
text-align: center;
}
body.woocommerce-account.woocommerce-lost-password .woocommerce .woocommerce-ResetPassword .form-row,
body.woocommerce-account.woocommerce-lost-password .woocommerce .lost_reset_password .form-row {
max-width: 100%;
}
body.woocommerce-account.woocommerce-lost-password .woocommerce form.lost_reset_password p:first-child,
body.woocommerce-account.woocommerce-lost-password .woocommerce form.woocommerce-ResetPassword p:first-child {
text-align: center;
}
body.woocommerce-account.woocommerce-lost-password .woocommerce form.lost_reset_password .form-row,
body.woocommerce-account.woocommerce-lost-password .woocommerce form.woocommerce-ResetPassword .form-row {
max-width: 100%;
}
body.woocommerce-account.woocommerce-lost-password .woocommerce form.lost_reset_password .woocommerce-button,
body.woocommerce-account.woocommerce-lost-password .woocommerce form.woocommerce-ResetPassword .woocommerce-button {
display: block;
margin: 18px auto 0;
}
@media (max-width: 760px) {
.borbila-auth-wrap {
max-width: 100%;
margin: 12px auto;
padding: var(--sp-5) var(--sp-4);
border-radius: calc(var(--r-1) + var(--sp-4));
}
.borbila-auth-register {
max-width: 100%;
padding: 18px 12px 16px;
}
.borbila-auth-wrap h2 {
font-size: 28px !important;
line-height: 1.1 !important;
margin-bottom: 8px !important;
}
.borbila-auth-subtitle {
font-size: 13px;
line-height: 1.55;
margin-bottom: 12px !important;
max-width: 100%;
}
.borbila-register-header {
margin-bottom: 12px;
}
.borbila-register-grid {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 12px;
}
.borbila-register-subtitle {
margin-bottom: 14px !important;
}
.borbila-auth-register .borbila-register-password-row,
.borbila-auth-register .borbila-register-confirm-row {
margin-top: 4px !important;
padding-top: 8px !important;
}
.borbila-register-terms {
margin: 8px 0 14px;
}
.borbila-register-terms-label {
font-size: 12.5px;
line-height: 1.45;
}
.borbila-auth-wrap .form-row {
margin-bottom: 12px;
}
.borbila-auth-wrap label {
margin-bottom: 6px;
font-size: 14px;
}
.borbila-auth-wrap input[type="text"],
.borbila-auth-wrap input[type="password"],
.borbila-auth-wrap input[type="email"] {
height: 44px !important;
min-height: 44px !important;
padding: 7px 11px !important;
border-radius: var(--r-1) !important;
}
.borbila-auth-actions,
.borbila-auth-links {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.borbila-auth-wrap .woocommerce-form-login__submit,
.borbila-auth-wrap .borbila-register-submit,
.borbila-auth-wrap .borbila-create-account-button {
width: 100%;
min-height: 44px;
padding: 10px 14px;
}
.borbila-auth-register label {
font-size: 14px;
font-weight: 600;
}
.borbila-auth-wrap .lost_password,
.borbila-register-login-link {
font-size: 13px;
}
}
/* ==========================================================
Product cards
Elementor gives every widget a bottom margin of
--kit-widget-spacing (20px). Inside a product card that
fights the layout, which is why these templates carried 1px
line-heights and negative margins to claw the space back.
Zeroing it here lets the container gap own the vertical
rhythm and lets the type keep a readable line-height.
========================================================== */
.elementor-1248 .elementor-widget:not(:last-child),
.elementor-1259 .elementor-widget:not(:last-child),
.elementor-1492 .elementor-widget:not(:last-child),
.elementor-1689 .elementor-widget:not(:last-child) {
margin-block-end: 0 !important;
}
/* MOBILE HEADER ROW FIX (icon/logo/cart) */
@media (max-width: 760px) {
.elementor-element-5259543 {
flex-wrap: nowrap !important;
}
.elementor-element-3a13153 {
width: auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
.elementor-element-ede3448,
.elementor-element-df0b6c8 {
flex: 0 0 auto !important;
width: auto !important;
}
}
/* MOBILE MENU TOGGLE: remove gray background */
.elementor-element-ede3448 .elementor-menu-toggle,
.elementor-element-ede3448 .elementor-menu-toggle:hover,
.elementor-element-ede3448 .elementor-menu-toggle:focus {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Exclude header logo from the site-wide product-image outline */
.elementor-element-83d20c4 img,
.elementor-element-2ae45a24 img {
outline: none !important;
border: none !important;
}
/* CHECKOUT TABLE RESPONSIVE (mobile only, desktop table untouched) */
.acr-order-table{width:100%;max-width:100%;table-layout:auto;}
.acr-order-table img{max-width:100%;height:auto;}
@media (max-width:600px){
.acr-order-table{font-size:14px;}
.acr-order-table th,.acr-order-table td{padding:8px 6px;vertical-align:middle;}
.acr-order-table .acr-product-line{display:flex;align-items:center;gap:8px;}
.acr-order-table .acr-product-thumb img{width:44px;height:44px;object-fit:cover;border-radius:6px;}
.acr-order-table .acr-product-name{font-size:13px;line-height:1.3;word-break:break-word;}
.acr-order-table .acr-quantity-control{display:inline-flex;align-items:center;}
.acr-order-table .acr-qty-action{width:26px;height:26px;font-size:15px;line-height:1;}
.acr-order-table .acr-qty-input{width:30px;height:26px;text-align:center;}
.acr-order-table .acr-cell-price{white-space:nowrap;font-weight:600;}
.acr-order-table tfoot th,.acr-order-table tfoot td{padding:8px 6px;}
}
@media (max-width:380px){
.acr-order-table th,.acr-order-table td{padding:7px 4px;}
.acr-order-table .acr-product-thumb img{width:40px;height:40px;}
.acr-order-table .acr-product-name{font-size:12.5px;}
}
/* Hide Buy Now in Top Selling loop template */
.elementor-1259 .subhan-eac-buy-now { display: none !important; }
/* Hide View Cart button from the cart sidebar */
.elementor-menu-cart__footer-buttons .elementor-button--view-cart,
.woocommerce-mini-cart__buttons a.button:not(.checkout) {
display: none !important;
}
/* ==========================================================
UNIFIED PRODUCT CARD SYSTEM
One visual language for every product card on the site. The
four Elementor loop templates (1248, 1492, 1689, 1259) are
normalized to follow the site's design system tokens:
- Card Shell: No borders, smooth var(--r-2) (12px) rounding,
clean var(--shadow-hairline) shadow, and var(--c-surface) background.
- Card Hover: Smooth shadow transition (var(--shadow-hairline-hover))
and a modern, subtle 3px lift.
- Typography: Clean Inter headings at 600 weight, balanced line-heights,
and tabular numbers for prices.
- Buttons: Solid var(--c-accent) (#FF5C00) background, white text,
transitioning to var(--c-deep) (#C24600) on hover with a tactile click press.
- Responsiveness: Tighter fluid margins, smaller fonts, and scaled
touch targets on smaller viewports.
========================================================== */
/* ---- 1. Card Sizing and Alignment ---- */
html body .elementor-1248.e-loop-item,
html body .elementor-1492.e-loop-item,
html body .elementor-1689.e-loop-item,
html body .elementor-1259.e-loop-item {
display: flex;
height: auto;
align-self: stretch;
}
html body .elementor-1248.e-loop-item > .e-con,
html body .elementor-1492.e-loop-item > .e-con,
html body .elementor-1689.e-loop-item > .e-con,
html body .elementor-1259.e-loop-item > .e-con {
width: 100%;
}
html body .elementor-loop-container .swiper-slide {
height: auto;
}
html body .elementor-loop-container.elementor-grid {
align-items: stretch;
}
/* Text body column: fills available card height, stacks content from top.
justify-content: flex-start keeps name/price together at the top.
The button wrapper gets margin-top:auto to pin it to the bottom.
This way extra height from grid-row equalization collects BELOW the
button — not as gaps between name, price and button. */
html body .elementor-1248 .elementor-element.elementor-element-c0c9938,
html body .elementor-1492 .elementor-element.elementor-element-7e0a2bf,
html body .elementor-1689 .elementor-element.elementor-element-56d6027d,
html body .elementor-1259 .elementor-element.elementor-element-91fc15d {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 0;
}
/* Button wrapper: pinned to the bottom of the text column via margin-top:auto.
This gives a common button baseline across cards in a row WITHOUT
stretching the gaps between name and price when cards are unequal height. */
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc,
html body .elementor-1492 .elementor-element.elementor-element-a49c601,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e {
margin-top: auto;
padding-top: var(--sp-3);
}
/* ---- 2. Card Container Shell & Elevation ---- */
html body .elementor-1248 .elementor-element.elementor-element-2a59111,
html body .elementor-1492 .elementor-element.elementor-element-66e81ce2,
html body .elementor-1689 .elementor-element.elementor-element-5d1163ad,
html body .elementor-1259 .elementor-element.elementor-element-2616284 {
border: none !important; /* Remove the harsh border */
--border-style: none !important;
--border-width: 0px !important;
border-radius: var(--r-2) !important; /* 12px rounding */
--border-radius: var(--r-2) !important;
box-shadow: var(--shadow-hairline) !important; /* Soft multi-layered shadow */
background-color: var(--c-surface, #FFFFFF) !important;
overflow: hidden;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Normalize content alignment to left (aligns with storefront guidelines) */
html body .elementor-1492 .elementor-element.elementor-element-66e81ce2 {
--align-items: stretch;
--justify-content: flex-start;
}
/* ---- 3. Imagery Formatting ---- */
html body .elementor-1248 .elementor-element.elementor-element-9705ac2 img,
html body .elementor-1492 .elementor-element.elementor-element-48d0fe4a img,
html body .elementor-1689 .elementor-element.elementor-element-597ee65f img,
html body .elementor-1259 .elementor-element.elementor-element-ea98a1a img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center center;
display: block;
transition: transform 0.35s ease;
}
/* ---- 4. Card Body Layout and Spacing ---- */
html body .elementor-1248 .elementor-element.elementor-element-c0c9938,
html body .elementor-1492 .elementor-element.elementor-element-7e0a2bf,
html body .elementor-1689 .elementor-element.elementor-element-56d6027d {
--padding-top: 1rem;
--padding-bottom: 1.125rem;
--padding-left: 1.125rem;
--padding-right: 1.125rem;
--gap: 0.5rem 0px;
--row-gap: 0.5rem;
--column-gap: 0px;
--align-items: stretch;
}
/* Top Selling card's info column had noticeably tighter padding
(12-16px via --sp-3/--sp-4) than the other three templates above
(16-18px) - aligning it here for consistent breathing room, while
keeping its side-by-side layout and two-button footer as-is. */
html body .elementor-1259 .elementor-element.elementor-element-91fc15d {
--padding-top: 1rem;
--padding-bottom: 1.125rem;
--padding-left: 1rem;
--padding-right: 1.125rem;
--gap: 0.5rem 0px;
--row-gap: 0.5rem;
--column-gap: 0px;
--align-items: stretch;
}
html body .elementor-1248 .elementor-element.elementor-element-2a59111,
html body .elementor-1492 .elementor-element.elementor-element-66e81ce2,
html body .elementor-1689 .elementor-element.elementor-element-5d1163ad {
--gap: 0px 0px;
--row-gap: 0px;
--column-gap: 0px;
--justify-content: flex-start;
}
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc,
html body .elementor-1492 .elementor-element.elementor-element-a49c601,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e {
margin-top: auto;
}
html body .elementor-1259 .elementor-element.elementor-element-91fc15d {
--padding-top: var(--sp-3);
--padding-bottom: var(--sp-4);
--padding-left: var(--sp-3);
--padding-right: var(--sp-4);
--gap: var(--sp-1) 0px;
--row-gap: var(--sp-1);
}
/* ---- 5. Product Titles ---- */
html body .elementor-1248 .elementor-element.elementor-element-39fadc4,
html body .elementor-1492 .elementor-element.elementor-element-66e81ce2 .elementor-element-6ab168b5,
html body .elementor-1689 .elementor-element.elementor-element-c758dd2,
html body .elementor-1259 .elementor-element.elementor-element-e583c99 {
text-align: start;
}
/* Title: 2-line clamp on carousel contexts (1248 home, 1492 combo).
The min-height reservation keeps rows aligned in a carousel where cards
don't stretch to match neighbors. On a full grid (1689 shop) the cards
already stretch row-height via flexbox, so the blank reserved line is
dead space — 1689 gets no min-height (see the shop-specific override below). */
html body .elementor-1248 .elementor-element.elementor-element-39fadc4 .elementor-heading-title,
html body .elementor-1492 .elementor-element.elementor-element-6ab168b5 .elementor-heading-title {
margin: 0;
font-family: "Inter", sans-serif;
font-size: clamp(0.875rem, 0.5vw + 0.75rem, 0.9375rem);
line-height: 1.35;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--c-ink, #111111);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: auto;
}
/* Shop / Archive grid (1689): no min-height reservation.
Cards stretch to the tallest in each row, so alignment is already
handled structurally. Reserving a blank line here would add visible
dead space below a short 1-line product name. */
html body .elementor-1689 .elementor-element.elementor-element-c758dd2 .elementor-heading-title {
margin: 0;
font-family: "Inter", sans-serif;
font-size: clamp(0.875rem, 0.5vw + 0.75rem, 0.9375rem);
line-height: 1.35;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--c-ink, #111111);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: auto;
}
html body .elementor-1259 .elementor-element.elementor-element-e583c99 .elementor-heading-title {
margin: 0;
font-family: "Inter", sans-serif;
font-size: clamp(0.8125rem, 0.5vw + 0.75rem, 0.9375rem);
line-height: 1.35;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--c-ink, #111111);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: auto;
}
/* ---- 6. Prices ---- */
html body .woocommerce .elementor-1248 .elementor-element.elementor-element-6262083 .price,
html body .woocommerce .elementor-1492 .elementor-element.elementor-element-6cc0c2a7 .price,
html body .woocommerce .elementor-1689 .elementor-element.elementor-element-7f15c95b .price,
html body .woocommerce .elementor-1259 .elementor-element.elementor-element-1aa87d3 .price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
margin: 2px 0 0;
font-family: "Inter", sans-serif;
font-size: clamp(1rem, 0.6vw + 0.85rem, 1.125rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--c-accent, #FF5C00);
}
html body .woocommerce .elementor-1248 .elementor-element.elementor-element-6262083 .price ins,
html body .woocommerce .elementor-1492 .elementor-element.elementor-element-6cc0c2a7 .price ins,
html body .woocommerce .elementor-1689 .elementor-element.elementor-element-7f15c95b .price ins,
html body .woocommerce .elementor-1259 .elementor-element.elementor-element-1aa87d3 .price ins {
font-size: inherit;
font-weight: 700;
color: inherit;
text-decoration: none;
background: transparent;
}
html body .woocommerce .elementor-1248 .elementor-element.elementor-element-6262083 .price del,
html body .woocommerce .elementor-1492 .elementor-element.elementor-element-6cc0c2a7 .price del,
html body .woocommerce .elementor-1689 .elementor-element.elementor-element-7f15c95b .price del,
html body .woocommerce .elementor-1259 .elementor-element.elementor-element-1aa87d3 .price del {
margin: 0;
font-size: 0.8em;
font-weight: 400;
color: var(--c-muted, #65758B);
opacity: 0.85;
}
/* ---- 7. Action Buttons ---- */
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc .cart button,
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc .cart .button,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e .cart button,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e .cart .button,
html body .elementor-1492 .elementor-element.elementor-element-a49c601 .cart button,
html body .elementor-1492 .elementor-element.elementor-element-a49c601 .cart .button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 2.75rem; /* 44px for ideal target */
padding: 0.625rem 1rem;
border: 0;
border-radius: var(--r-1, 8px);
font-family: "Inter", sans-serif;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
color: #FFFFFF !important;
background-color: var(--c-accent, #FF5C00) !important;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s ease, box-shadow 0.2s ease !important;
}
/* Button Hover State: transition to deep accent color */
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc .cart button:hover,
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc .cart .button:hover,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e .cart button:hover,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e .cart .button:hover,
html body .elementor-1492 .elementor-element.elementor-element-a49c601 .cart button:hover,
html body .elementor-1492 .elementor-element.elementor-element-a49c601 .cart .button:hover {
background-color: var(--c-deep, #C24600) !important;
color: #FFFFFF !important;
}
/* Button Pressed/Active State: tactile feedback */
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc .cart button:active,
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc .cart .button:active,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e .cart button:active,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e .cart .button:active,
html body .elementor-1492 .elementor-element.elementor-element-a49c601 .cart button:active,
html body .elementor-1492 .elementor-element.elementor-element-a49c601 .cart .button:active {
transform: scale(0.97) !important;
}
/* Focus indicator for keyboard navigation */
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc .cart .button:focus-visible,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e .cart .button:focus-visible,
html body .elementor-1492 .elementor-element.elementor-element-a49c601 .cart .button:focus-visible {
outline: 2px solid var(--c-accent, #FF5C00) !important;
outline-offset: 2px;
}
/* Accessibility: respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
html body .elementor-1248 .elementor-element.elementor-element-2a59111,
html body .elementor-1492 .elementor-element.elementor-element-66e81ce2,
html body .elementor-1689 .elementor-element.elementor-element-5d1163ad,
html body .elementor-1259 .elementor-element.elementor-element-2616284 {
transition: none !important;
}
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc .cart .button:active,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e .cart .button:active,
html body .elementor-1492 .elementor-element.elementor-element-a49c601 .cart .button:active {
transform: none !important;
}
}
/* High contrast accessibility options */
@media (prefers-contrast: more) {
html body .elementor-1248 .elementor-element.elementor-element-2a59111,
html body .elementor-1492 .elementor-element.elementor-element-66e81ce2,
html body .elementor-1689 .elementor-element.elementor-element-5d1163ad,
html body .elementor-1259 .elementor-element.elementor-element-2616284 {
border: 1px solid var(--c-ink, #111111) !important;
box-shadow: none !important;
}
}
/* Top Selling special layout matching button */
html body .elementor-1259 .elementor-element.elementor-element-497953a .subhan-eac-buttons .subhan-eac-btn {
min-height: 40px;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-1, 8px);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
/* ---- 8. Badges Formatting ---- */
html body .elementor-1259 .elementor-element.elementor-element-a7b07aa .elementor-button,
html body .elementor-1492 .elementor-element.elementor-element-24e1109 .elementor-button {
line-height: 1.3;
padding: var(--sp-1) var(--sp-2);
letter-spacing: 0.01em;
}
/* 1259 badge sits top-right (ribbon rounds on the left side) */
html body .elementor-1259 .elementor-element.elementor-element-a7b07aa .elementor-button {
border-radius: var(--r-1, 8px) 0 0 var(--r-1, 8px) !important;
}
/* 1492 badge sits top-left (ribbon rounds on the right side) */
html body .elementor-1492 .elementor-element.elementor-element-24e1109 .elementor-button {
border-radius: 0 var(--r-1, 8px) var(--r-1, 8px) 0 !important;
}
/* ---- 9. Responsiveness & Tablet/Mobile Viewports ---- */
@media (max-width: 1024px) {
html body .elementor-1248 .elementor-element.elementor-element-c0c9938,
html body .elementor-1492 .elementor-element.elementor-element-7e0a2bf,
html body .elementor-1689 .elementor-element.elementor-element-56d6027d {
--padding-top: 0.875rem;
--padding-bottom: 1rem;
--padding-left: 0.875rem;
--padding-right: 0.875rem;
}
}
@media (max-width: 760px) {
html body .elementor-1248 .elementor-element.elementor-element-c0c9938,
html body .elementor-1492 .elementor-element.elementor-element-7e0a2bf,
html body .elementor-1689 .elementor-element.elementor-element-56d6027d,
html body .elementor-1259 .elementor-element.elementor-element-91fc15d {
--padding-top: 0px;
--padding-bottom: 0.75rem;
--padding-left: 0.625rem;
--padding-right: 0.625rem;
--gap: 0.375rem 0px;
--row-gap: 0.375rem;
--column-gap: 0px;
}
html body .elementor-1248 .elementor-element.elementor-element-9705ac2,
html body .elementor-1492 .elementor-element.elementor-element-48d0fe4a,
html body .elementor-1689 .elementor-element.elementor-element-597ee65f {
padding: 0px 0px 0.5rem 0px;
}
html body .elementor-1248 .elementor-element.elementor-element-39fadc4 .elementor-heading-title,
html body .elementor-1492 .elementor-element.elementor-element-6ab168b5 .elementor-heading-title,
html body .elementor-1689 .elementor-element.elementor-element-c758dd2 .elementor-heading-title {
font-size: 0.8125rem;
line-height: 1.35;
height: auto;
}
html body .woocommerce .elementor-1248 .elementor-element.elementor-element-6262083 .price,
html body .woocommerce .elementor-1492 .elementor-element.elementor-element-6cc0c2a7 .price,
html body .woocommerce .elementor-1689 .elementor-element.elementor-element-7f15c95b .price {
font-size: 1rem;
line-height: 1.25;
gap: 4px;
}
html body .elementor-1689 .elementor-element.elementor-element-5d1163ad {
--gap: 0px 0px;
--row-gap: 0px;
--column-gap: 0px;
}
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc .cart button,
html body .elementor-1248 .elementor-element.elementor-element-e3c4cdc .cart .button,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e .cart button,
html body .elementor-1689 .elementor-element.elementor-element-8beb99e .cart .button,
html body .elementor-1492 .elementor-element.elementor-element-a49c601 .cart button,
html body .elementor-1492 .elementor-element.elementor-element-a49c601 .cart .button {
min-height: 2.5rem;
font-size: 0.8125rem;
padding: 0.5rem 0.75rem;
}
}
/* ---- 10. Filter plugin grid optimization ---- */
@media (max-width: 1024px) {
html body .borbila-pfs__cards {
gap: var(--sp-4);
}
}
@media (max-width: 760px) {
html body .borbila-pfs__cards {
gap: var(--sp-2);
}
}
/* ---- 11. Fallback for Native WooCommerce grids ---- */
html body ul.products li.product img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: var(--r-2) !important;
}
html body ul.products li.product {
border: none !important;
border-radius: var(--r-2) !important;
box-shadow: var(--shadow-hairline) !important;
background-color: var(--c-surface, #FFFFFF) !important;
padding: 1.125rem !important;
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body ul.products li.product .woocommerce-loop-product__title {
font-family: "Inter", sans-serif;
font-size: clamp(0.875rem, 0.5vw + 0.75rem, 0.9375rem);
line-height: 1.35;
font-weight: 600;
margin: 0.75rem 0 0.25rem;
color: var(--c-ink, #111111);
}
html body ul.products li.product .price {
font-family: "Inter", sans-serif;
font-size: clamp(1rem, 0.6vw + 0.85rem, 1.125rem);
font-weight: 700;
color: var(--c-accent, #FF5C00);
}
html body ul.products li.product .price del {
font-size: 0.8em;
font-weight: 400;
color: var(--c-muted, #65758B);
opacity: 0.85;
}
html body ul.products li.product .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
margin-top: 0.75rem;
padding: 0.625rem 1rem;
border-radius: var(--r-1, 8px);
font-weight: 600;
text-transform: none;
background-color: var(--c-accent, #FF5C00) !important;
color: #FFFFFF !important;
transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s ease !important;
}
html body ul.products li.product .button:hover {
background-color: var(--c-deep, #C24600) !important;
}
html body ul.products li.product .button:active {
transform: scale(0.97) !important;
}
@media (max-width: 760px) {
html body ul.products {
gap: var(--sp-2) !important;
}
html body ul.products li.product {
padding: 0.75rem !important;
}
html body ul.products li.product .woocommerce-loop-product__title {
font-size: 0.8125rem;
margin-top: 0.5rem;
}
html body ul.products li.product .price {
font-size: 1rem;
}
html body ul.products li.product .button {
min-height: 2.5rem;
font-size: 0.8125rem;
}
}
/* =========================================================================
12. Product Card Redesign (Top Selling / Featured / Achar / Chutney /
Combo Offer / Shop archive) - matches reference layout, brand colors
========================================================================= */
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) {
height: 100%;
}
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) .elementor-widget-theme-post-featured-image,
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) .elementor-widget-theme-post-featured-image .elementor-widget-container {
width: 100%;
}
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) .elementor-widget-theme-post-featured-image img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1;
object-fit: cover !important;
display: block;
}
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) .woocommerce-loop-product__title,
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) h2.woocommerce-loop-product__title,
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) h3.woocommerce-loop-product__title {
font-family: "Inter", sans-serif;
font-size: clamp(0.8125rem, 0.5vw + 0.75rem, 0.9375rem) !important;
line-height: 1.35;
font-weight: 600;
color: var(--c-ink, #111111);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) .price {
font-variant-numeric: tabular-nums;
}
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) .price del {
color: var(--c-muted, #65758B);
opacity: 0.85;
font-weight: 400;
}
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) .price ins {
text-decoration: none;
color: var(--c-accent, #FF5C00) !important;
}
/* NOTE: add-to-cart button styling intentionally NOT overridden here.
The site already hides the native .add_to_cart_button inside
.e-loop-add-to-cart-form-container and replaces it with its own
quantity-stepper button (.nv-atc / .nv-qty-stepper) via a site-wide
script. Forcing display/width on .add_to_cart_button here previously
fought that hiding rule and caused a duplicate button to appear. */
/* Row-gap consistency across the loop-grid/loop-carousel wrappers used by these sections */
:is(.elementor-loop-container) {
row-gap: var(--sp-4, 16px);
}
@media (max-width: 1024px) {
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) .woocommerce-loop-product__title {
font-size: 0.8125rem !important;
}
}
@media (max-width: 760px) {
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) .woocommerce-loop-product__title {
font-size: 0.75rem !important;
line-height: 1.3;
}
:is(.elementor-1259, .elementor-1248, .elementor-1492, .elementor-1689) .price {
font-size: 0.9375rem !important;
}
}
/* =========================================================================
13. Brand color for the site's own quantity-stepper Add to Cart button
(.nv-atc / .nv-qty-*), scoped to the product-card templates only —
does NOT touch the global Elementor color used elsewhere on the site.
========================================================================= */
:is(.elementor-1248, .elementor-1492, .elementor-1689) .e-loop-add-to-cart-form-container,
:is(.elementor-1259, .elementor-1792) .subhan-eac-buttons {
--e-global-color-primary: #FF5C00;
}
/* Belt-and-suspenders: force the stepper's own background/color directly
on the single product page too, in case of any stale cached CSS. */
.elementor-1792 .nv-atc-btn,
.elementor-1792 .nv-qty-btn {
background: #FF5C00 !important;
background-color: #FF5C00 !important;
color: #FFFFFF !important;
}
/* Real "Buy now" link button (Top Selling Products card) - plain link,
not touched by the site's add-to-cart-hiding script. */
.mamonis-buy-now-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
min-height: 2.5rem;
padding: 10px 8px;
border-radius: var(--r-1, 8px);
background-color: #FF5C00;
color: #FFFFFF !important;
font-family: "Inter", sans-serif;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease;
}
.mamonis-buy-now-btn:hover {
background-color: #C24600;
color: #FFFFFF !important;
}
@media (max-width: 760px) {
.mamonis-buy-now-btn {
font-size: 12px;
min-height: 2.25rem;
padding: 8px 4px;
}
}
/* =========================================================================
14. Tighten title / price / button spacing inside product cards
(was using justify-content:space-between + equal-height grid cards,
which stretched large gaps between title/price/button on rows where
a neighboring card had taller content).
========================================================================= */
:is(.elementor-1248, .elementor-1492, .elementor-1689, .elementor-1259) .e-con.e-child {
--justify-content: flex-start !important;
justify-content: flex-start !important;
row-gap: 6px !important;
}
@media (max-width: 760px) {
:is(.elementor-1248, .elementor-1492, .elementor-1689, .elementor-1259) .e-con.e-child {
row-gap: 4px !important;
}
}
/* =========================================================================
15. Kill Elementor's automatic "widget spacing" (--kit-widget-spacing:
20px, applied by the theme's global kit CSS to every widget that
isn't the last child) inside product cards. Our flex container
already provides the intended small gap; this extra 20px margin
was stacking on top of it, pushing price/title far from the
button below.
========================================================================= */
:is(.elementor-1248, .elementor-1492, .elementor-1689, .elementor-1259) .elementor-widget-woocommerce-product-title,
:is(.elementor-1248, .elementor-1492, .elementor-1689, .elementor-1259) .elementor-widget-woocommerce-product-price,
:is(.elementor-1248, .elementor-1492, .elementor-1689, .elementor-1259) .elementor-widget-woocommerce-product-add-to-cart,
:is(.elementor-1259) .elementor-widget-shortcode {
margin-bottom: 0 !important;
}
/* =========================================================================
16. Force consistent violet hover/focus/active/tap states on every
Add to Cart control (the site's own quantity-stepper button and
its +/- controls, plus the Buy Now link), and kill any stray
browser default tap-highlight color on mobile.
========================================================================= */
.nv-atc-btn,
.nv-qty-btn,
.mamonis-buy-now-btn {
-webkit-tap-highlight-color: transparent;
}
.nv-atc-btn:hover,
.nv-atc-btn:focus,
.nv-atc-btn:active,
.nv-qty-btn:hover,
.nv-qty-btn:focus,
.nv-qty-btn:active {
background: #C24600 !important;
background-color: #C24600 !important;
color: #fff !important;
}
.mamonis-buy-now-btn:hover,
.mamonis-buy-now-btn:focus,
.mamonis-buy-now-btn:active {
background-color: #C24600 !important;
color: #fff !important;
}
/* =========================================================================
17. Shop page "Filters" toggle button - restyled to look like a
shadcn/ui outline button (subtle border, small shadow, muted hover)
instead of the default glossy rose pill.
========================================================================= */
html body .borbila-pfs .borbila-pfs__toggle {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
height: 40px !important;
min-height: 40px !important;
padding: 0 16px !important;
border-radius: 8px !important;
background: #ffffff !important;
border: 1px solid #e5e7eb !important;
color: #111827 !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: normal !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
transform: none !important;
}
html body .borbila-pfs .borbila-pfs__toggle:hover {
background: #f9fafb !important;
border-color: #d1d5db !important;
color: #111827 !important;
transform: none !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
html body .borbila-pfs .borbila-pfs__toggle:focus-visible {
transform: none !important;
box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.25) !important;
border-color: #FF5C00 !important;
}
html body .borbila-pfs .borbila-pfs__toggle:active {
background: #f3f4f6 !important;
}
html body .borbila-pfs .borbila-pfs__toggle-label {
font-size: 14px !important;
font-weight: 500 !important;
color: #111827 !important;
}
html body .borbila-pfs .borbila-pfs__toggle-icon {
width: 16px !important;
height: 16px !important;
color: #FF5C00 !important;
opacity: 1 !important;
}
@media (max-width: 760px) {
html body .borbila-pfs .borbila-pfs__toggle {
height: 40px !important;
min-height: 40px !important;
padding: 0 14px !important;
font-size: 14px !important;
}
}
/* =========================================================================
18. Fix mobile filter panel appearing behind the bottom mobile nav bar.
WP Bottom Mobile Menu uses z-index:999999, while the filter
panel/backdrop only used 9999/9998 - raise the filter above it,
and hide the bottom nav while the filter is open for good measure.
========================================================================= */
@media (max-width: 1024px) {
html body .borbila-pfs__backdrop {
z-index: 1000000 !important;
}
html body .borbila-pfs__panel {
z-index: 1000001 !important;
}
}
/* =========================================================================
19. Filter panel close (X) button - neon orange icon on a 5%-opacity
neon orange background.
========================================================================= */
html body .borbila-pfs__close {
background: rgba(255, 92, 0, 0.05) !important;
color: #FF5C00 !important;
}
html body .borbila-pfs__close:hover,
html body .borbila-pfs__close:focus-visible {
background: rgba(255, 92, 0, 0.12) !important;
color: #FF5C00 !important;
}
/* =========================================================================
20. Extra bottom padding on the footer's bottom bar for small screens,
so the copyright line isn't hidden behind the fixed bottom mobile
nav bar (which is ~80-90px tall including its safe-area inset).
========================================================================= */
@media (max-width: 767px) {
html body .elementor-210 .elementor-element.elementor-element-1c3b66de {
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}
}
/* =========================================================================
21. Customer Reviews carousel - equal-height cards with a truncated,
ellipsis-clamped quote so a long review doesn't stretch its card
taller than the others.
========================================================================= */
.elementor-13 .elementor-element-490e524 .swiper-slide {
height: auto !important;
display: flex !important;
}
.elementor-13 .elementor-element-490e524 .swiper-slide > * {
width: 100%;
}
/* Each slide's outer wrapper + card stretch to fill the tallest card in view */
.elementor-13 .elementor-element-c313c90,
.elementor-13 .elementor-element-4e26a1a,
.elementor-13 .elementor-element-a2cf20a,
.elementor-13 .elementor-element-a7c54b0 {
display: flex !important;
height: 100% !important;
}
.elementor-13 .elementor-element-bb12292,
.elementor-13 .elementor-element-4b42b428,
.elementor-13 .elementor-element-1b27efe,
.elementor-13 .elementor-element-8cd6523,
.elementor-13 .elementor-element-af769eb {
height: 100% !important;
}
.elementor-13 .elementor-element-4b42b428,
.elementor-13 .elementor-element-1b27efe,
.elementor-13 .elementor-element-8cd6523,
.elementor-13 .elementor-element-af769eb {
display: flex !important;
flex-direction: column !important;
}
.elementor-13 .elementor-testimonial-wrapper {
display: flex !important;
flex-direction: column !important;
height: 100%;
}
/* Clamp the quote to 4 lines with an ellipsis so every card's text block
takes up the same amount of space regardless of review length. */
.elementor-13 .elementor-testimonial-content {
display: -webkit-box !important;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Push the avatar/name/job block to the bottom of the card so short quotes
don't leave the author info floating in the middle. */
.elementor-13 .elementor-testimonial-content {
margin-bottom: auto;
}
/* =========================================================================
22. Hero banner carousel - cap the height on larger screens now that it
spans the full boxed width (a wider image at the same aspect ratio
became too tall). Object-fit:cover keeps the crop looking natural.
Mobile/tablet are left untouched.
========================================================================= */
@media (min-width: 1025px) {
html body .elementor-13 .elementor-element-3e2140f .swiper-slide-image {
height: 420px !important;
width: 100% !important;
object-fit: cover !important;
}
}
/* =========================================================================
23. About Us page - founder video frame + readable story typography.
========================================================================= */
.elementor-1264 .elementor-element-ab00004 .elementor-wrapper {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(17, 17, 17, 0.12);
border: 1px solid #E5E7EB;
}
.elementor-1264 .elementor-element-e663e35 p {
margin: 0 0 16px;
}
.elementor-1264 .elementor-element-e663e35 p:last-child {
margin-bottom: 0;
}
/* =========================================================================
22. Single Product Page (#1792) - shadcn-inspired refresh
Consolidates fonts onto Inter (was a mix of Poppins/Anek Bangla),
swaps hard gray borders for the site's hairline-shadow elevation,
moves button/badge radii onto the --r-* scale, replaces ad-hoc
negative-margin spacing with the --sp-* scale, and gives the tabs a
real active/inactive distinction (both states were rendering
identically: orange background, white text).
========================================================================= */
/* --- Gallery: hairline shadow instead of a hard border, larger radius --- */
.elementor-1792 .elementor-element-122f49a {
border: none !important;
box-shadow: none !important;
}
.elementor-1792 .elementor-element-122f49a .woocommerce-product-gallery__wrapper,
.elementor-1792 .elementor-element-122f49a .woocommerce-product-gallery__image img {
border-radius: var(--r-3, 16px) !important;
}
.elementor-1792 .elementor-element-122f49a .flex-control-thumbs img {
border-radius: var(--r-1, 8px) !important;
border-color: var(--c-hairline, #ECECEC) !important;
}
/* --- Typography: consolidate title/price/description onto Inter --- */
/* Elementor auto-adds a 20px gap after every widget (margin-block-end on
.elementor-widget, the OUTER wrapper) on top of any margin set on an
inner element. The title fix below only touched the inner heading tag,
so the wrappers automatic 20px was still stacking on top of it - fixed
here by zeroing the wrapper and controlling spacing from one place. */
.elementor-1792 .elementor-element-2a95df6 {
margin-block-end: 0 !important;
margin-bottom: 0 !important;
}
.elementor-1792 .elementor-element-2a95df6 .elementor-heading-title {
font-family: 'Inter', sans-serif !important;
margin-bottom: var(--sp-1, 4px) !important;
}
.woocommerce .elementor-1792 .elementor-element-cfffb85 .price {
font-family: 'Inter', sans-serif !important;
}
.woocommerce .elementor-1792 .elementor-element-cfffb85 {
margin: 0 0 var(--sp-2, 8px) 0 !important;
}
.elementor-1792 .elementor-element-652b506,
.elementor-1792 .elementor-element-652b506 * {
font-family: 'Inter', sans-serif !important;
}
.elementor-1792 .elementor-element-652b506 {
margin: 0 0 var(--sp-2, 8px) 0 !important;
padding: 0 !important;
color: var(--c-muted, #65758B) !important;
}
/* --- Buy box rhythm: hairline divider instead of a heavy gray rule --- */
.elementor-1792 .elementor-element-09c7bd3 {
margin: 0 0 var(--sp-2, 8px) 0 !important;
}
.elementor-1792 .elementor-element-09c7bd3 .elementor-divider-separator {
border-top-color: var(--c-hairline, #ECECEC) !important;
}
/* The Add to Cart / Buy Now widget also picks up the automatic 20px gap
above and below it. Two widget instances exist (mobile-only and
desktop/tablet-only versions) - fix both. */
.elementor-1792 .elementor-element-fa6bbe0,
.elementor-1792 .elementor-element-46551de {
margin-block-end: var(--sp-2, 8px) !important;
margin-bottom: var(--sp-2, 8px) !important;
}
/* --- Buttons: onto the site's 8px button radius, not a sharp 3px --- */
.elementor-1792 .subhan-eac-btn {
border-radius: var(--r-1, 8px) !important;
font-family: "Inter", sans-serif !important;
}
/* --- Brand badge: pill shape, hairline border instead of medium gray --- */
.elementor-1792 .elementor-element-b49a163 {
border-radius: var(--r-pill, 999px) !important;
border-color: var(--c-hairline, #ECECEC) !important;
}
.elementor-1792 .elementor-element-b49a163,
.elementor-1792 .elementor-element-b49a163 * {
font-family: "Inter", sans-serif !important;
}
/* --- Tabs: clear active/inactive states (both rendered identically before) --- */
.elementor-1792 .wc-tabs-wrapper {
background: transparent !important;
}
.elementor-1792 ul.wc-tabs {
display: flex !important;
flex-wrap: wrap !important;
gap: var(--sp-2, 8px) !important;
background: var(--c-bg, #FBFAFF) !important;
border-radius: var(--r-pill, 999px) !important;
padding: var(--sp-1, 4px) !important;
border: 1px solid var(--c-hairline, #ECECEC) !important;
margin: 0 0 var(--sp-5, 20px) 0 !important;
list-style: none !important;
}
.elementor-1792 ul.wc-tabs li {
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: var(--r-pill, 999px) !important;
}
.elementor-1792 ul.wc-tabs li a {
display: inline-flex !important;
align-items: center !important;
padding: var(--sp-2, 8px) var(--sp-4, 16px) !important;
border-radius: var(--r-pill, 999px) !important;
font-family: "Inter", sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
color: var(--c-muted, #65758B) !important;
background: transparent !important;
transition: background-color 0.2s ease, color 0.2s ease;
}
.elementor-1792 ul.wc-tabs li.active {
background: transparent !important;
}
.elementor-1792 ul.wc-tabs li.active a {
color: #FFFFFF !important;
background: var(--c-accent, #FF5C00) !important;
}
.elementor-1792 .woocommerce-tabs .woocommerce-Tabs-panel {
background: var(--c-surface, #FFFFFF) !important;
border: none !important;
border-radius: var(--r-2, 12px) !important;
box-shadow: var(--shadow-hairline) !important;
padding: var(--sp-3, 12px) var(--sp-4, 16px) !important;
}
.elementor-1792 .woocommerce-tabs .woocommerce-Tabs-panel,
.elementor-1792 .woocommerce-tabs .woocommerce-Tabs-panel * {
font-family: "Inter", sans-serif !important;
}
/* --- Related products: breathing room on tablet, not a squeeze from 5 to 3 cols --- */
@media (max-width: 1024px) and (min-width: 761px) {
.elementor-1792 .elementor-element-1fd8f5b {
--column-gap: 16px !important;
--row-gap: 16px !important;
}
}
/* --- Reduce the gap between the gallery column and the buy-box column
(image vs title/price/description/buttons). Was Elementor's default
20px container gap, applies both as horizontal spacing on desktop/
tablet (row layout) and vertical spacing on mobile (stacked column). --- */
.elementor-1792 .elementor-element-c2a5717 {
gap: var(--sp-4, 16px) !important;
row-gap: var(--sp-4, 16px) !important;
column-gap: var(--sp-4, 16px) !important;
}
/* --- Mobile only: gap between gallery and buy-box was still 16px after
the previous fix, which felt like "way too much" once they're stacked
vertically on a phone. Tighten further, phone-only. --- */
@media (max-width: 760px) {
.elementor-1792 .elementor-element-c2a5717 {
gap: var(--sp-2, 8px) !important;
row-gap: var(--sp-2, 8px) !important;
column-gap: var(--sp-2, 8px) !important;
}
}
/* --- WooCommerce's own core stylesheet adds margin-bottom:2em (32px) to
the gallery itself (.images / .woocommerce-product-gallery), completely
separate from and in addition to the gallery<->buy-box container gap
set above. That's what was still pushing the section below away. --- */
.elementor-1792 .elementor-element-122f49a .woocommerce-product-gallery {
margin-bottom: 0 !important;
}
/* --- "Related Products" heading: was Elementor's divider widget in
line+text mode (a line on each side of centered text). Left-aligning
it (text_align:left, set in Elementor) removes the leading line, but
the trailing line after the text still remains - remove that too so
there's no line at all, just left-aligned text. --- */
.elementor-1792 .elementor-element-fdec323 .elementor-divider-separator:after {
content: none !important;
}
.elementor-1792 .elementor-element-fdec323 .elementor-divider__text {
font-family: 'Inter', sans-serif !important;
}
/* --- Mobile only: title/price/description/divider/buttons gaps were
still 8px each, which reads as "too much" stacked on a narrow phone
screen. Tighten to 4px on mobile specifically, desktop/tablet unchanged. --- */
@media (max-width: 760px) {
.elementor-1792 .elementor-element-2a95df6 .elementor-heading-title {
margin-bottom: var(--sp-1, 4px) !important;
}
.woocommerce .elementor-1792 .elementor-element-cfffb85 {
margin: 0 0 var(--sp-1, 4px) 0 !important;
}
.elementor-1792 .elementor-element-652b506 {
margin: 0 0 var(--sp-1, 4px) 0 !important;
}
.elementor-1792 .elementor-element-09c7bd3 {
margin: 0 0 var(--sp-1, 4px) 0 !important;
}
.elementor-1792 .elementor-element-fa6bbe0,
.elementor-1792 .elementor-element-46551de {
margin-block-end: var(--sp-1, 4px) !important;
margin-bottom: var(--sp-1, 4px) !important;
}
}
/* --- Mobile only: the title's line-height was fixed at 30px regardless
of screen size, so even though the font shrinks to 20px on mobile, the
line box stayed 30px tall - adding ~10px of invisible space above and
below the text that no margin setting could remove. Tighten it to match
the smaller mobile font size. --- */
@media (max-width: 760px) {
.elementor-1792 .elementor-element-2a95df6 .elementor-heading-title {
line-height: 24px !important;
}
}
/* =========================================================================
23. Single Product Page (#1792) - breadcrumb refresh
Currently the crumb links and the current-page text render in the
exact same color, with no hover feedback, so there's no visual cue
for what's clickable. Muting the links and keeping the current page
in ink (the shadcn/ui breadcrumb convention) plus a hover state
fixes that. Also tidies the wrapping container's odd asymmetric
padding (19px / 5px / 0 / 10px) onto the site's spacing scale.
========================================================================= */
.elementor-1792 .elementor-element-ec639bd {
padding: var(--sp-4, 16px) 0 var(--sp-2, 8px) 0 !important;
}
.elementor-1792 .woocommerce-breadcrumb {
font-family: 'Inter', sans-serif !important;
color: var(--c-ink, #111111) !important;
}
.elementor-1792 .woocommerce-breadcrumb a {
color: var(--c-muted, #65758B) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}
.elementor-1792 .woocommerce-breadcrumb a:hover,
.elementor-1792 .woocommerce-breadcrumb a:focus-visible {
color: var(--c-accent, #FF5C00) !important;
text-decoration: underline !important;
}
/* --- Gallery hover zoom (WooCommerce's own .zoomImg overlay) has no
border-radius of its own, so on hover it visually covers the rounded
image with a sharp-cornered zoomed copy. Match its radius so hovering
doesn't appear to remove the rounding. --- */
.elementor-1792 .elementor-element-122f49a .zoomImg {
border-radius: var(--r-3, 16px) !important;
}
/* --- Breadcrumb wrapper: add horizontal padding to match the vertical
padding already set. --- */
.elementor-1792 .elementor-element-ec639bd {
padding: var(--sp-4, 16px) var(--sp-4, 16px) var(--sp-2, 8px) var(--sp-4, 16px) !important;
}
/* --- Price and description: zero out all vertical margin/padding and
let height be automatic (content-driven), per explicit request.
Wins over the earlier 8px/4px spacing rules since it's later in the
cascade with the same specificity + !important. --- */
.woocommerce .elementor-1792 .elementor-element-cfffb85 {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
height: auto !important;
}
.elementor-1792 .elementor-element-652b506 {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
height: auto !important;
}
/* --- The REAL remaining cause of the mobile title/price/description gap:
both the price (
) and the description's inner
tag
are actual
elements, and browsers apply a default ~1em top/bottom
margin to
tags automatically. All my earlier fixes only zeroed the
OUTER widget wrapper divs - these inner
tags still had their
untouched browser-default margin the whole time. --- */
.woocommerce .elementor-1792 .elementor-element-cfffb85 .price {
margin: 0 !important;
}
.elementor-1792 .elementor-element-652b506 .woocommerce-product-details__short-description p {
margin: 0 !important;
}
/* --- WooCommerce core's own add-to-cart.js independently inserts a
standard View cart link right
after any button carrying its .ajax_add_to_cart class - which the single
product page's custom Buy Now/Add to Cart button apparently still does,
separately from the shop-loop script already excluded from this page.
Hide it here specifically. --- */
.elementor-1792 .added_to_cart.wc-forward {
display: none !important;
}
/* =========================================================================
24. Cart sidebar (Elementor Menu Cart widget) - structural polish beyond
what the widget's own color/typography controls expose: rounded
product thumbnails, a softer drawer shadow, and better-defined
hover states on the close/remove icon buttons.
========================================================================= */
.elementor-menu-cart__main {
font-family: 'Inter', sans-serif;
box-shadow: -8px 0 32px rgba(17, 17, 17, 0.12) !important;
}
.elementor-menu-cart__product-image img {
border-radius: var(--r-2, 12px);
object-fit: cover;
}
.elementor-menu-cart__close-button {
border-radius: 999px;
padding: 6px;
margin: -6px -6px 14px auto;
transition: background-color 0.15s ease;
}
.elementor-menu-cart__close-button:hover {
background-color: var(--c-bg, #FBFAFF);
}
.elementor-menu-cart__product-remove {
background-color: #FFFFFF;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.elementor-menu-cart__product-remove:hover {
background-color: var(--c-bg, #FBFAFF);
}
/* --- Cart sidebar price+quantity: this is a CSS grid cell, not flex, so
the price text and our wider stepper control (vs the tiny original
"x 2" text) could wrap onto their own line when they didn't both fit
inline - which looked like the price sliding left and the stepper
sliding right. Force a simple, non-wrapping row so they always sit
together. --- */
.elementor-menu-cart__product-price {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: 6px !important;
}
.elementor-menu-cart__product-price .nv-mini-qty-control {
flex-shrink: 0 !important;
}
/* --- Top Selling Products card: the Add to Cart