/* ==========================================================================
Zarayat — design system
Ink on paper, one zari accent, wide-tracked uppercase labels drawn from
the wordmark. Fraunces for display, Jost for everything else.
========================================================================== */
:root {
/* Overridden by the Customizer via inline CSS — see inc/enqueue.php */
--zr-ink: #14110F;
--zr-zari: #A67C2E;
--zr-gulaab: #8C2F39;
--zr-mist: #F2F0ED;
--zr-radius: 14px;
--zr-paper: #FFFFFF;
--zr-ink-60: rgba(20, 17, 15, 0.6);
--zr-ink-40: rgba(20, 17, 15, 0.4);
--zr-line: rgba(20, 17, 15, 0.1);
--zr-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
--zr-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
--zr-shell: 1560px;
--zr-pad: 28px;
--zr-sidebar-w: 236px;
--zr-header-h: 78px;
--zr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* --------------------------------------------------------------------------
Base
-------------------------------------------------------------------------- */
body {
font-family: var(--zr-body);
color: var(--zr-ink);
margin: 0;
font-size: 14px;
line-height: 1.6;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body {
overflow-x: hidden;
/* clip guards overflow WITHOUT creating a scroll container, so the
sticky header keeps working (hidden above is the old-browser fallback). */
overflow-x: clip;
max-width: 100%;
}
body {
background: var(--zr-paper);
-webkit-font-smoothing: antialiased;
}
img, svg, video, iframe {
max-width: 100%;
}
.zr-shell {
width: 100%;
max-width: var(--zr-shell);
margin-inline: auto;
padding-inline: var(--zr-pad);
}
.zr-section {
padding-block: clamp(22px, 2.8vw, 40px);
}
h1, h2, h3, h4,
.entry-title,
.product_title {
font-family: var(--zr-display);
font-weight: 700;
letter-spacing: -0.02em;
}
/* The structural device: wide-tracked uppercase, taken from the wordmark. */
.zr-eyebrow,
.zr-card-cat,
.zr-badge,
.zr-sec-link,
.zr-banner-cta,
.zr-marquee-word,
.zr-trust li,
.zr-mobile-title {
font-family: var(--zr-body);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 11px;
font-weight: 500;
}
.zr-eyebrow {
display: block;
color: var(--zr-zari);
margin-bottom: 8px;
}
a {
color: inherit;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 2px solid var(--zr-zari);
outline-offset: 2px;
}
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.zr-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--zr-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 13px 26px;
border-radius: 999px;
border: 1px solid var(--zr-ink);
background: var(--zr-ink);
color: var(--zr-paper);
text-decoration: none;
cursor: pointer;
transition: background 0.25s var(--zr-ease), color 0.25s var(--zr-ease), transform 0.2s var(--zr-ease);
}
.zr-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
background: var(--zr-paper);
color: var(--zr-ink);
transform: translateY(-1px);
}
.zr-btn-ghost {
background: transparent;
color: var(--zr-ink);
}
/* --------------------------------------------------------------------------
Announcement + header
-------------------------------------------------------------------------- */
.zr-announce {
background: var(--zr-ink);
color: var(--zr-paper);
text-align: center;
}
.zr-announce p {
margin: 0;
padding: 9px 0;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* Two rotating lines — fade out / fade in, baari baari (v6.4.15). */
.zr-announce--rotate .zr-shell {
position: relative;
height: 34px;
}
.zr-announce--rotate .zr-announce-line {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
opacity: 0;
animation: zrAnnounceFade 10s ease-in-out infinite;
}
.zr-announce--rotate .zr-announce-line--b {
animation-delay: 5s;
}
@keyframes zrAnnounceFade {
0% { opacity: 0; transform: translateY(6px); }
6%, 44% { opacity: 1; transform: translateY(0); }
50%, 100% { opacity: 0; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.zr-announce--rotate .zr-announce-line {
animation: none;
}
.zr-announce--rotate .zr-announce-line--a {
opacity: 1;
}
}
.zr-header {
position: sticky;
top: 0;
z-index: 200;
background: var(--zr-paper);
border-bottom: 1px solid var(--zr-line);
transition: box-shadow 0.25s var(--zr-ease);
}
.zr-header.is-stuck {
box-shadow: 0 4px 20px rgba(20, 17, 15, 0.06);
}
.zr-header-inner {
display: grid;
grid-template-columns: 1fr minmax(0, 640px) 1fr;
align-items: center;
gap: 24px;
min-height: var(--zr-header-h);
padding-inline: var(--zr-pad);
max-width: var(--zr-shell);
margin-inline: auto;
}
.zr-header-inner > .zr-brand { justify-self: start; }
.zr-header-inner > .zr-header-search { justify-self: stretch; }
.zr-header-inner > .zr-actions { justify-self: end; }
.zr-brand {
flex-shrink: 0;
}
.zr-logo img {
max-height: 54px;
width: auto;
display: block;
}
.zr-wordmark {
font-family: var(--zr-display);
font-size: 24px;
letter-spacing: 0.32em;
text-transform: uppercase;
}
/* Wide search bar — the centre of gravity in the header */
.zr-header-search {
width: 100%;
position: relative;
}
/* FiboSearch dropped into the header inherits the pill look */
.zr-header-search .dgwt-wcas-search-wrapp {
max-width: 100%;
}
.zr-header-search .dgwt-wcas-search-input,
#zr-search-drawer .dgwt-wcas-search-input {
border: 1px solid var(--zr-line) !important;
border-radius: 999px !important;
font-family: var(--zr-body) !important;
font-size: 14px !important;
min-height: 46px;
background: var(--zr-paper) !important;
}
.dgwt-wcas-search-input:focus {
border-color: var(--zr-ink-40) !important;
box-shadow: 0 0 0 3px rgba(166, 124, 46, 0.12) !important;
}
.dgwt-wcas-suggestions-wrapp {
border-radius: 14px !important;
border-color: var(--zr-line) !important;
box-shadow: 0 16px 34px rgba(20, 17, 15, 0.09) !important;
font-family: var(--zr-body) !important;
}
/* Built-in AJAX suggestions (used when FiboSearch is not active) */
.zr-suggest {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--zr-paper);
border: 1px solid var(--zr-line);
border-radius: 14px;
box-shadow: 0 16px 34px rgba(20, 17, 15, 0.11);
z-index: 300;
overflow: hidden;
display: none;
}
.zr-suggest.is-open { display: block; }
.zr-suggest-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
text-decoration: none;
color: var(--zr-ink);
transition: background 0.15s var(--zr-ease);
}
.zr-suggest-item:hover { background: var(--zr-mist); }
.zr-suggest-item img {
width: 42px;
height: 42px;
object-fit: cover;
border-radius: 8px;
background: var(--zr-mist);
flex-shrink: 0;
}
.zr-suggest-name {
font-size: 13px;
line-height: 1.35;
flex: 1;
}
.zr-suggest-price {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.zr-suggest-all {
display: block;
padding: 11px 16px;
text-align: center;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
color: var(--zr-zari);
border-top: 1px solid var(--zr-line);
text-decoration: none;
}
.zr-search-header {
display: flex;
align-items: stretch;
border: 1px solid var(--zr-line);
border-radius: 999px;
overflow: hidden;
background: var(--zr-paper);
transition: border-color 0.2s var(--zr-ease), box-shadow 0.2s var(--zr-ease);
}
.zr-search-header:focus-within {
border-color: var(--zr-ink-40);
box-shadow: 0 0 0 3px rgba(166, 124, 46, 0.12);
}
.zr-search-scope {
position: relative;
border-right: 1px solid var(--zr-line);
flex-shrink: 0;
}
.zr-search-scope select {
appearance: none;
border: none;
background: transparent;
font-family: var(--zr-body);
font-size: 13px;
color: var(--zr-ink);
padding: 0 30px 0 20px;
height: 100%;
min-height: 46px;
cursor: pointer;
}
.zr-search-scope::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 5px;
height: 5px;
border-right: 1px solid var(--zr-ink-60);
border-bottom: 1px solid var(--zr-ink-60);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.zr-search-field {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 0 20px;
min-height: 46px;
}
.zr-search-field .zr-ico {
width: 19px;
height: 19px;
color: var(--zr-ink-40);
flex-shrink: 0;
}
.zr-search-field input[type="search"] {
flex: 1;
border: none;
background: none;
font-family: var(--zr-body);
font-size: 14px;
color: var(--zr-ink);
padding: 0;
min-width: 0;
}
.zr-search-field input[type="search"]:focus {
outline: none;
}
.zr-search-field input::placeholder {
color: var(--zr-ink-40);
}
.zr-actions {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
flex-shrink: 0;
}
.zr-icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: none;
background: none;
color: var(--zr-ink);
cursor: pointer;
border-radius: 50%;
transition: background 0.2s var(--zr-ease);
}
.zr-icon-btn:hover {
background: var(--zr-mist);
}
/* The magnifier button is only for small screens — the bar covers desktop. */
.zr-search-toggle {
display: none;
}
.zr-ico {
width: 21px;
height: 21px;
}
.zr-count {
position: absolute;
top: 3px;
right: 1px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: var(--zr-zari);
color: #fff;
font-size: 10px;
font-weight: 500;
line-height: 17px;
text-align: center;
}
.zr-count:empty,
.zr-count[data-count="0"] {
display: none;
}
.zr-burger {
display: none;
flex-direction: column;
gap: 5px;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
flex-shrink: 0;
}
.zr-burger span {
display: block;
width: 20px;
height: 1.5px;
background: var(--zr-ink);
}
/* --------------------------------------------------------------------------
Left sidebar navigation
-------------------------------------------------------------------------- */
.zr-sidebar {
position: fixed;
/* --zr-top is measured by JS and follows the header out on scroll,
so the sidebar always starts right under whatever is visible. */
top: var(--zr-top, 118px);
left: 0;
bottom: 0;
width: var(--zr-sidebar-w);
background: var(--zr-paper);
border-right: 1px solid var(--zr-line);
z-index: 150;
overflow: hidden;
overscroll-behavior: contain;
}
.zr-sidebar-scroll {
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
padding: 18px 0 60px;
/* Scroll still works; the grey track never shows, so opening a
sub-menu doesn't visually break the sidebar. */
scrollbar-width: none;
}
.zr-sidebar-scroll::-webkit-scrollbar {
width: 5px;
}
.zr-sidebar-scroll::-webkit-scrollbar-thumb {
background: var(--zr-line);
border-radius: 999px;
}
.zr-sidebar-menu,
.zr-sidebar-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.zr-sidebar-menu > li {
position: relative;
}
.zr-sidebar-menu > li > a {
display: block;
padding: 13px 34px 13px 26px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--zr-ink);
text-decoration: none;
transition: background 0.18s var(--zr-ease), color 0.18s var(--zr-ease);
}
.zr-sidebar-menu > li > a:hover {
background: var(--zr-mist);
}
/* Active page highlight — set EXCLUSIVELY by theme JS from the URL.
WordPress/WooCommerce current-* classes are ignored on purpose:
they lag behind AJAX navigation and WooCommerce mislabels Shop
as parent on every category page. */
.zr-sidebar-menu > li.zr-active > a,
.zr-sidebar-menu > li.zr-active-parent > a,
ul.zr-mobile-menu > li.zr-active > a,
ul.zr-mobile-menu > li.zr-active-parent > a {
background: var(--zr-mist);
}
.zr-sidebar-menu > li.accent > a {
color: var(--zr-gulaab);
}
/* Expand/collapse control injected by JS on items with children */
.zr-tree-toggle {
position: absolute;
top: 6px;
right: 12px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: var(--zr-paper);
border: 1.5px solid var(--zr-ink);
cursor: pointer;
color: var(--zr-ink);
border-radius: 50%;
z-index: 2;
}
.zr-tree-toggle:hover {
background: var(--zr-ink);
color: #fff;
}
.zr-tree-toggle .zr-ico {
width: 15px;
height: 15px;
transform: rotate(90deg);
transition: transform 0.22s var(--zr-ease);
}
.zr-tree-toggle[aria-expanded="true"] .zr-ico {
transform: rotate(-90deg);
}
/* Collapsed by default; JS opens on click. */
.zr-tree .sub-menu {
display: none;
padding-bottom: 8px;
}
.zr-tree li.is-open > .sub-menu {
display: block;
}
.zr-sidebar-menu .sub-menu a {
display: block;
padding: 9px 26px 9px 40px;
font-size: 13px;
font-weight: 500;
color: var(--zr-ink-60);
text-decoration: none;
transition: color 0.16s var(--zr-ease), padding-left 0.16s var(--zr-ease);
}
.zr-sidebar-menu .sub-menu a:hover {
color: var(--zr-ink);
padding-left: 45px;
}
.zr-sidebar-menu .sub-menu .sub-menu a {
padding-left: 54px;
font-size: 13px;
}
.zr-sidebar-menu .sub-menu .sub-menu a:hover {
padding-left: 59px;
}
.zr-sidebar-extra {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--zr-line);
display: flex;
flex-direction: column;
}
.zr-sidebar-extra a {
padding: 11px 26px;
font-size: 14px;
color: var(--zr-ink-60);
text-decoration: none;
}
.zr-sidebar-extra a:hover {
color: var(--zr-ink);
background: var(--zr-mist);
}
/* Reserve room for the sidebar — content and footer only, never the header. */
@media (min-width: 992px) {
body.zr-has-sidebar .zr-content,
body.zr-has-sidebar .zr-footer {
padding-left: var(--zr-sidebar-w);
}
/* Shells inside the shifted area shrink so sidebar + shell never
exceeds the viewport — this was the horizontal-scroll bug on 16" screens. */
body.zr-has-sidebar .zr-content .zr-shell,
body.zr-has-sidebar .zr-footer .zr-shell {
max-width: min(calc(var(--zr-shell) - var(--zr-sidebar-w)), calc(100vw - var(--zr-sidebar-w) - 2 * var(--zr-pad)));
}
}
/* --------------------------------------------------------------------------
Search drawer (small screens)
-------------------------------------------------------------------------- */
.zr-search-drawer {
border-top: 1px solid var(--zr-line);
background: var(--zr-paper);
padding: 16px 0;
}
.zr-search-drawer .zr-search-form {
display: flex;
align-items: center;
gap: 12px;
}
.zr-search-drawer .zr-search-field {
flex: 1;
border: 1px solid var(--zr-line);
border-radius: 999px;
min-height: 44px;
}
.zr-search-close {
background: none;
border: none;
font-size: 28px;
line-height: 1;
color: var(--zr-ink-40);
cursor: pointer;
flex-shrink: 0;
}
/* --------------------------------------------------------------------------
Product card — square 1:1 imagery
-------------------------------------------------------------------------- */
.zr-grid {
display: grid;
grid-template-columns: repeat(var(--zr-cols, 4), minmax(0, 1fr));
gap: 28px 20px;
}
.zr-grid-4 {
--zr-cols: 4;
}
.zr-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--zr-cols, 5) - 1) * 14px) / var(--zr-cols, 5));
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: 4px;
}
.zr-rail::-webkit-scrollbar {
display: none;
}
.zr-rail > * {
scroll-snap-align: start;
}
.zr-card {
position: relative;
display: flex;
flex-direction: column;
}
.zr-card-media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--zr-mist);
border-radius: var(--zr-radius);
overflow: hidden;
margin-bottom: 10px;
}
.zr-card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.5s var(--zr-ease), transform 0.7s var(--zr-ease);
}
.zr-card-img-alt {
opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
/* Only fade the main photo out when a second one exists to replace it —
single-image products keep showing their photo instead of going blank. */
.zr-card-media.has-alt:hover .zr-card-img-main {
opacity: 0;
}
.zr-card-media.has-alt:hover .zr-card-img-alt {
opacity: 1;
}
}
@media (hover: hover) and (pointer: fine) {
.zr-card-media:hover .zr-card-img {
transform: scale(1.03);
}
}
.zr-card-badges {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
z-index: 2;
}
/* (Old on-image badges retired — discount now shows as a chip in the
card body so the product photo stays completely clean.) */
.zr-badge {
display: none;
}
/* Chips ab image ke BOTTOM-CENTER par overlay (v6.4.54) —
har card par exact same jagah, body saaf. */
.zr-card-chips {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
gap: 6px;
margin: 0;
white-space: nowrap;
max-width: calc(100% - 16px);
}
/* Category line cards se retire (v6.4.54). */
.zr-card-cat {
display: none !important;
}
.zr-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
border: 1px solid var(--zr-line);
border-radius: 999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.5;
background: rgba(255, 255, 255, 0.96);
color: var(--zr-ink);
white-space: nowrap;
box-shadow: 0 2px 8px rgba(20, 17, 15, 0.12);
}
.zr-chip i {
display: none;
}
.zr-chip-sale {
border-color: rgba(140, 47, 57, 0.35);
color: var(--zr-gulaab);
background: rgba(255, 247, 246, 0.97);
}
.zr-chip-new {
border-color: rgba(166, 124, 46, 0.5);
color: #7A5E1F;
background: rgba(253, 248, 238, 0.97);
}
.zr-chip-out {
border-color: var(--zr-line);
color: var(--zr-ink-60);
background: rgba(255, 255, 255, 0.96);
}
.zr-badge-sale {
background: var(--zr-gulaab);
}
.zr-badge-new {
background: var(--zr-zari);
}
.zr-badge-out {
background: rgba(20, 17, 15, 0.55);
}
.zr-card-wish {
position: absolute;
top: 11px;
right: 11px;
z-index: 3;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.92);
color: var(--zr-ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s var(--zr-ease), transform 0.2s var(--zr-ease);
}
.zr-card-wish:hover {
transform: scale(1.08);
}
.zr-card-wish .zr-ico {
width: 17px;
height: 17px;
}
.zr-card-wish.is-active {
color: var(--zr-gulaab);
}
.zr-card-wish.is-active .zr-ico {
fill: var(--zr-gulaab);
}
.zr-card-cat {
color: var(--zr-ink-40);
margin: 0 0 6px;
font-size: 10px;
}
.zr-card-title {
font-family: var(--zr-body);
font-size: 13.5px;
font-weight: 400;
line-height: 1.35;
margin: 0 0 6px;
}
.zr-card-title a {
text-decoration: none;
color: var(--zr-ink);
}
.zr-card-title a:hover {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--zr-zari);
}
.zr-card-price {
font-size: 15px;
font-weight: 700;
}
.zr-card-price del {
color: var(--zr-ink-40);
font-weight: 300;
margin-right: 6px;
}
.zr-card-price ins {
text-decoration: none;
color: var(--zr-gulaab);
}
.zr-card-swatches {
display: flex;
align-items: center;
gap: 5px;
margin-top: 10px;
}
.zr-swatch {
width: 13px;
height: 13px;
border-radius: 50%;
border: 1px solid var(--zr-line);
display: inline-block;
}
.zr-swatch-more {
font-size: 11px;
color: var(--zr-ink-40);
}
.zr-card-cta {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: auto;
padding-top: 10px;
}
.zr-card-cta .button,
.zr-card .add_to_cart_button,
.zr-card .zr-card-cta a.button {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 7px 10px;
background: var(--zr-ink);
color: var(--zr-paper) !important;
border: none;
border-radius: 12px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.25;
text-transform: uppercase;
text-decoration: none !important;
text-align: center;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
overflow: hidden;
cursor: pointer;
transition: opacity 0.2s var(--zr-ease);
}
.zr-card-cta .button:hover,
.zr-card .add_to_cart_button:hover {
opacity: 0.85;
background: var(--zr-ink);
color: var(--zr-paper);
}
/* "View cart" link that WooCommerce appends after adding — becomes a
matching outline button beside the add button, not a bare text line. */
.zr-card-cta a.added_to_cart {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 9px 10px;
background: var(--zr-paper);
color: var(--zr-ink) !important;
border: 1.5px solid var(--zr-ink);
border-radius: 12px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.25;
text-transform: uppercase;
text-decoration: none !important;
box-sizing: border-box;
min-width: 0;
overflow: hidden;
}
/* Equal card heights: media fixed ratio, body flexes, CTA pinned bottom. */
.zr-card {
display: flex;
flex-direction: column;
height: 100%;
}
.zr-card-body {
display: flex;
flex-direction: column;
flex: 1;
}
.zr-card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(2 * 1.35em);
}
/* Woo shop grid reset */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid;
grid-template-columns: repeat(var(--zr-shop-cols, 4), minmax(0, 1fr));
gap: 32px 20px;
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 100% !important;
margin: 0 !important;
float: none !important;
clear: none !important;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
display: none;
}
/* --------------------------------------------------------------------------
Section headers, rails, banners
-------------------------------------------------------------------------- */
.zr-sec-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.zr-sec-title {
font-size: clamp(18px, 1.9vw, 26px);
margin: 0;
line-height: 1.1;
}
.zr-sec-head-actions {
display: flex;
align-items: center;
gap: 18px;
flex-shrink: 0;
}
.zr-sec-link {
display: inline-flex;
align-items: center;
gap: 7px;
text-decoration: none;
color: var(--zr-ink);
border-bottom: 1px solid var(--zr-zari);
padding-bottom: 3px;
}
.zr-sec-link .zr-ico {
width: 15px;
height: 15px;
transition: transform 0.25s var(--zr-ease);
}
.zr-sec-link:hover .zr-ico {
transform: translateX(4px);
}
.zr-rail-arrows {
display: flex;
gap: 8px;
}
.zr-rail-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--zr-line);
background: var(--zr-paper);
color: var(--zr-ink);
font-size: 13px;
cursor: pointer;
transition: background 0.2s var(--zr-ease), border-color 0.2s var(--zr-ease);
}
.zr-rail-btn:hover {
background: var(--zr-mist);
border-color: var(--zr-ink-40);
}
.zr-rail-btn:disabled {
opacity: 0.3;
cursor: default;
}
.zr-banners {
display: grid;
grid-template-columns: repeat(var(--zr-cols, 3), minmax(0, 1fr));
gap: 20px;
}
.zr-banner {
position: relative;
display: block;
aspect-ratio: var(--zr-ratio, 4 / 5);
border-radius: var(--zr-radius);
overflow: hidden;
background: var(--zr-mist);
text-decoration: none;
color: var(--zr-paper);
}
.zr-banner img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s var(--zr-ease);
}
.zr-banner:hover img {
transform: scale(1.05);
}
.zr-banner-body {
position: absolute;
inset: auto 0 0 0;
padding: 24px;
background: linear-gradient(to top, rgba(20, 17, 15, 0.75), transparent);
}
.zr-banner-head {
font-size: clamp(18px, 2vw, 25px);
margin: 0 0 4px;
color: var(--zr-paper);
}
.zr-banner-sub {
margin: 0 0 12px;
font-size: 13px;
opacity: 0.85;
}
.zr-banner-cta {
border-bottom: 1px solid var(--zr-zari);
padding-bottom: 3px;
}
/* --------------------------------------------------------------------------
Marquee — the signature element
-------------------------------------------------------------------------- */
.zr-marquee {
border-block: 1px solid var(--zr-line);
padding: 17px 0;
overflow: hidden;
}
.zr-marquee-track {
display: flex;
width: max-content;
animation: zr-scroll var(--zr-marquee-speed, 40s) linear infinite;
}
.zr-marquee-set {
display: flex;
align-items: center;
gap: 28px;
padding-right: 28px;
}
.zr-marquee-word {
white-space: nowrap;
color: var(--zr-ink-60);
}
.zr-marquee-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--zr-zari);
flex-shrink: 0;
}
@keyframes zr-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* --------------------------------------------------------------------------
Editorial split
-------------------------------------------------------------------------- */
.zr-split-inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(28px, 4.5vw, 64px);
}
.zr-split.is-flipped .zr-split-media {
order: 2;
}
.zr-split-media img {
width: 100%;
border-radius: var(--zr-radius);
display: block;
}
.zr-split-title {
font-size: clamp(24px, 3vw, 40px);
margin: 0 0 16px;
line-height: 1.1;
}
.zr-split-copy {
color: var(--zr-ink-60);
font-size: 16px;
line-height: 1.7;
margin-bottom: 22px;
}
/* --------------------------------------------------------------------------
Shop page + single product
-------------------------------------------------------------------------- */
.zr-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding-bottom: 16px;
margin-bottom: 26px;
border-bottom: 1px solid var(--zr-line);
}
.woocommerce .woocommerce-result-count {
margin: 0;
font-size: 13px;
color: var(--zr-ink-60);
}
.woocommerce .woocommerce-ordering select {
font-family: var(--zr-body);
font-size: 13px;
padding: 9px 14px;
border: 1px solid var(--zr-line);
border-radius: 999px;
background: var(--zr-paper);
}
.zr-breadcrumb {
font-size: 12px;
color: var(--zr-ink-40);
margin-bottom: 18px;
}
.zr-crumb-sep {
margin: 0 8px;
color: var(--zr-line);
}
.zr-trust {
list-style: none;
margin: 20px 0 0;
padding: 18px 0 0;
border-top: 1px solid var(--zr-line);
display: flex;
flex-direction: column;
gap: 9px;
}
.zr-trust li {
color: var(--zr-ink-60);
position: relative;
padding-left: 18px;
}
.zr-trust li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--zr-zari);
}
.woocommerce div.product .product_title {
font-size: clamp(23px, 2.8vw, 34px);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--zr-ink);
font-size: 22px;
font-weight: 500;
}
.woocommerce div.product p.price ins {
text-decoration: none;
color: var(--zr-gulaab);
}
/* --------------------------------------------------------------------------
Empty states
-------------------------------------------------------------------------- */
.zr-empty {
text-align: center;
padding: 64px 20px;
}
.zr-empty-title {
font-family: var(--zr-display);
font-size: 24px;
margin: 0 0 8px;
}
.zr-empty p {
color: var(--zr-ink-60);
margin-bottom: 20px;
}
/* --------------------------------------------------------------------------
Mobile panel + bottom bar
-------------------------------------------------------------------------- */
.zr-mobile-panel {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: min(86vw, 370px);
background: var(--zr-paper);
z-index: 400;
transform: translateX(-100%);
transition: transform 0.3s var(--zr-ease);
overflow-y: auto;
padding-bottom: 40px;
}
.zr-mobile-panel.is-open {
transform: translateX(0);
}
.zr-mobile-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--zr-line);
position: sticky;
top: 0;
background: var(--zr-paper);
z-index: 2;
}
.zr-mobile-close {
background: none;
border: none;
font-size: 27px;
line-height: 1;
cursor: pointer;
color: var(--zr-ink-60);
}
.zr-mobile-menu,
.zr-mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.zr-mobile-menu > li {
position: relative;
border-bottom: 1px solid var(--zr-line);
}
.zr-mobile-menu a {
display: block;
padding: 14px 44px 14px 20px;
text-decoration: none;
color: var(--zr-ink);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.zr-mobile-menu .sub-menu a {
padding-left: 36px;
font-size: 14px;
color: var(--zr-ink-60);
}
.zr-mobile-menu .sub-menu .sub-menu a {
padding-left: 52px;
font-size: 13px;
}
.zr-mobile-extra {
display: flex;
flex-direction: column;
margin-top: 10px;
border-top: 1px solid var(--zr-line);
}
.zr-mobile-extra a {
padding: 13px 20px;
font-size: 14px;
color: var(--zr-ink-60);
text-decoration: none;
}
.zr-overlay {
position: fixed;
inset: 0;
background: rgba(20, 17, 15, 0.45);
z-index: 350;
opacity: 0;
transition: opacity 0.3s var(--zr-ease);
}
.zr-overlay.is-visible {
opacity: 1;
}
.zr-bottombar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 300;
background: var(--zr-paper);
border-top: 1px solid var(--zr-line);
padding: 8px 0 max(8px, env(safe-area-inset-bottom));
}
.zr-bottombar-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
background: none;
border: none;
cursor: pointer;
text-decoration: none;
color: var(--zr-ink-60);
font-size: 10px;
letter-spacing: 0.06em;
position: relative;
}
.zr-bottombar-item .zr-ico {
width: 20px;
height: 20px;
}
.zr-bottombar-item .zr-count {
top: -4px;
right: 50%;
margin-right: -20px;
}
/* --------------------------------------------------------------------------
Homepage: category tiles + flash sale countdown
-------------------------------------------------------------------------- */
.zr-home-hero .zr-shell {
padding-top: 0;
}
.zr-cats {
--zr-cat-size: 114px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px 16px;
padding-bottom: 4px;
}
.zr-cats.is-overflow {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(var(--zr-rows, 2), auto);
grid-auto-columns: var(--zr-cat-size);
justify-content: start;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
}
.zr-cats::-webkit-scrollbar {
display: none;
}
.zr-cat {
scroll-snap-align: start;
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
width: var(--zr-cat-size, 128px);
}
.zr-cat-img {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
background: var(--zr-mist);
border-radius: var(--zr-cat-radius, var(--zr-radius));
overflow: hidden;
margin-bottom: 11px;
}
.zr-cat-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s var(--zr-ease);
}
.zr-cat:hover .zr-cat-img img {
transform: scale(1.06);
}
.zr-cat-name {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
}
.zr-flash-head {
display: flex;
align-items: center;
gap: 26px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.zr-countdown {
display: flex;
align-items: center;
gap: 8px;
}
.zr-cd-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--zr-ink-60);
margin-right: 6px;
}
.zr-cd-unit {
display: flex;
flex-direction: column;
align-items: center;
min-width: 40px;
}
.zr-cd-unit b {
background: var(--zr-ink);
color: var(--zr-paper);
font-size: 15px;
font-weight: 500;
padding: 6px 9px;
border-radius: 8px;
min-width: 38px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.zr-cd-unit i {
font-style: normal;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--zr-ink-40);
margin-top: 4px;
}
.zr-cd-sep {
color: var(--zr-ink-40);
font-weight: 500;
margin-top: -14px;
}
@media (max-width: 640px) {
.zr-cats {
--zr-cat-size: 96px;
gap: 18px 14px;
}
.zr-cat-name {
font-size: 12px;
}
.zr-flash-head {
gap: 14px;
}
}
/* --------------------------------------------------------------------------
Layout shell, pages, posts
-------------------------------------------------------------------------- */
.zr-content {
min-height: 55vh;
}
/* Homepage starts right under the header — no dead band.
The stubborn gap was margin collapse: the slider/hero markup carries its
own top margin, which escaped the zero-padding section and pushed the
whole block down. Clearing it at every level kills it for good. */
.zr-home > .zr-section:first-child {
padding-top: 0 !important;
margin-top: 0 !important;
}
.zr-home-hero,
.zr-home-hero .zr-shell {
margin-top: 0 !important;
}
.zr-home-hero .zr-shell > *,
.zr-home-hero .zr-shell > * > *:first-child {
margin-top: 0 !important;
}
/* Common slider/plugin wrappers that ship their own top spacing. */
.zr-home-hero .maati-slider,
.zr-home-hero .maati-slider-wrap,
.zr-home-hero .maati-slider-wrapper,
.zr-home-hero figure,
.zr-home-hero p:first-child {
margin-top: 0 !important;
}
/* Hero hugs its content: almost no space below it, and the next section
starts immediately so products peek above the fold on load. */
.zr-home .zr-home-hero {
/* Hero hugs the header no matter where it sits in the section order. */
padding-top: 0 !important;
padding-bottom: 4px;
}
.zr-home .zr-home-hero + .zr-section {
padding-top: 10px;
}
.zr-home-hero .zr-shell > * {
display: block;
}
.zr-page-pad {
padding-block: clamp(22px, 3vw, 40px);
}
.zr-narrow {
max-width: 860px;
}
.zr-page-title {
font-size: clamp(22px, 2.8vw, 32px);
margin: 0 0 24px;
line-height: 1.15;
}
.zr-entry {
font-size: 16px;
line-height: 1.75;
color: var(--zr-ink);
}
.zr-entry p {
margin: 0 0 1.2em;
}
.zr-entry img {
max-width: 100%;
height: auto;
border-radius: var(--zr-radius);
}
.zr-entry a {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--zr-zari);
}
.zr-post-hero img {
width: 100%;
border-radius: var(--zr-radius);
margin-bottom: 26px;
}
.zr-post-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 34px 26px;
}
.zr-post-teaser .zr-post-thumb img {
width: 100%;
border-radius: var(--zr-radius);
margin-bottom: 14px;
}
.zr-post-title {
font-size: 20px;
margin: 0 0 8px;
}
.zr-post-title a {
text-decoration: none;
}
.zr-post-excerpt {
color: var(--zr-ink-60);
font-size: 14px;
line-height: 1.65;
}
.zr-pagination {
margin-top: 40px;
text-align: center;
}
.zr-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 10px;
margin: 0 3px;
border: 1px solid var(--zr-line);
border-radius: 999px;
text-decoration: none;
font-size: 13px;
}
.zr-pagination .page-numbers.current {
background: var(--zr-ink);
color: var(--zr-paper);
border-color: var(--zr-ink);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--zr-ink);
color: var(--zr-paper);
padding: 10px 18px;
z-index: 999;
}
.skip-link:focus {
left: 12px;
top: 12px;
}
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
.zr-footer {
margin-top: clamp(44px, 6vw, 84px);
border-top: 1px solid var(--zr-line);
background: var(--zr-paper);
}
.zr-footer-grid {
display: grid;
/* Column count comes from PHP as a class (zr-fcols-N), because the CSS
spec forbids repeat(auto-fit) next to an fr track — that combination
silently invalidates the whole declaration and stacks everything. */
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 36px;
padding-block: clamp(36px, 4.5vw, 60px) 28px;
}
.zr-footer-grid.zr-fcols-1 { grid-template-columns: 1fr; }
.zr-footer-grid.zr-fcols-2 { grid-template-columns: 1.4fr 1fr; }
.zr-footer-grid.zr-fcols-3 { grid-template-columns: 1.4fr 1fr 1fr; }
.zr-footer-grid.zr-fcols-4 { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.zr-footer-grid.zr-fcols-5 { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
.zr-footer-logo img {
max-height: 60px;
width: auto;
}
.zr-footer-tagline {
color: var(--zr-ink-60);
font-size: 14px;
line-height: 1.7;
margin: 14px 0 0;
max-width: 320px;
}
.zr-footer-head {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 11px;
font-weight: 500;
margin: 0 0 14px;
color: var(--zr-ink);
}
.zr-footer-menu,
.zr-footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.zr-footer-menu a,
.zr-footer-col a {
font-size: 14px;
color: var(--zr-ink-60);
text-decoration: none;
}
.zr-footer-menu a:hover,
.zr-footer-col a:hover {
color: var(--zr-ink);
}
.zr-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
border-top: 1px solid var(--zr-line);
padding-block: 18px;
}
.zr-footer-copy,
.zr-footer-note {
margin: 0;
font-size: 12px;
color: var(--zr-ink-40);
letter-spacing: 0.04em;
}
/* .zr-fcols-N selectors (2 classes) media query ke andar wali single-class
rule ko specificity se hara rahe thay — footer mobile par collapse hi
nahi hota tha aur page horizontally overflow karta tha (v6.4.21 fix). */
@media (max-width: 991px) {
.zr-footer-grid,
.zr-footer-grid.zr-fcols-3,
.zr-footer-grid.zr-fcols-4,
.zr-footer-grid.zr-fcols-5 {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.zr-footer-grid,
.zr-footer-grid.zr-fcols-2,
.zr-footer-grid.zr-fcols-3,
.zr-footer-grid.zr-fcols-4,
.zr-footer-grid.zr-fcols-5 {
grid-template-columns: 1fr;
gap: 26px;
}
.zr-footer-bottom {
flex-direction: column;
align-items: flex-start;
}
}
/* Mobile header — bell hide, icons ko saans (v6.4.21). */
@media (max-width: 767px) {
.zr-notif-wrap {
display: none !important;
}
}
/* --------------------------------------------------------------------------
Toast
-------------------------------------------------------------------------- */
.zr-toast {
position: fixed;
left: 50%;
bottom: 34px;
transform: translate(-50%, 20px);
background: var(--zr-ink);
color: var(--zr-paper);
padding: 13px 24px;
border-radius: 999px;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
z-index: 500;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s var(--zr-ease), transform 0.25s var(--zr-ease);
}
.zr-toast.is-visible {
opacity: 1;
transform: translate(-50%, 0);
}
/* --------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1280px) {
:root {
--zr-sidebar-w: 210px;
}
.zr-header-inner {
gap: 20px;
}
}
@media (max-width: 991px) {
:root {
--zr-pad: 18px;
--zr-header-h: 62px;
}
.zr-sidebar {
display: none;
}
.zr-burger {
display: flex;
}
.zr-header-search {
display: none;
}
.zr-search-toggle {
display: inline-flex;
}
.zr-header-inner {
gap: 12px;
min-height: 62px;
}
.zr-brand {
margin-right: auto;
}
.zr-logo img {
max-height: 40px;
}
.zr-rail {
grid-auto-columns: calc((100% - 16px) / 2.2);
gap: 16px;
}
.zr-grid {
--zr-cols: 3;
gap: 24px 14px;
}
.woocommerce ul.products,
.woocommerce-page ul.products {
--zr-shop-cols: 3;
gap: 26px 14px;
}
.zr-banners {
--zr-cols: 2;
}
.zr-split-inner {
grid-template-columns: 1fr;
}
.zr-split.is-flipped .zr-split-media {
order: 0;
}
}
@media (max-width: 640px) {
.zr-bottombar {
display: flex;
}
body {
padding-bottom: 62px;
}
.zr-grid,
.woocommerce ul.products,
.woocommerce-page ul.products {
--zr-cols: 2;
--zr-shop-cols: 2;
gap: 22px 11px;
}
.zr-rail {
grid-auto-columns: calc((100% - 11px) / 2);
gap: 11px;
}
.zr-banners {
--zr-cols: 1;
}
.zr-card-cta {
opacity: 1;
transform: none;
}
.zr-announce p {
font-size: 10px;
letter-spacing: 0.1em;
}
}
/* --------------------------------------------------------------------------
Single product — modern minimal
-------------------------------------------------------------------------- */
.woocommerce div.product {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.woocommerce div.product > *:not(.images):not(.summary) {
grid-column: 1 / -1;
}
.woocommerce div.product div.images img {
border-radius: var(--zr-radius);
}
.woocommerce div.product .flex-control-thumbs {
display: flex;
gap: 10px;
margin-top: 12px;
}
.woocommerce div.product .flex-control-thumbs li {
width: 72px !important;
float: none !important;
}
.woocommerce div.product .flex-control-thumbs img {
border-radius: 10px;
border: 1.5px solid transparent;
opacity: 0.75;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
border-color: var(--zr-ink);
opacity: 1;
}
.woocommerce div.product div.summary > * {
margin-bottom: 18px !important;
}
.woocommerce div.product p.price {
font-size: 21px !important;
font-weight: 700;
}
.woocommerce div.product p.price del {
font-size: 17px;
color: var(--zr-ink-40);
font-weight: 400;
}
.woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: stretch;
padding: 18px 0;
border-top: 1px solid var(--zr-line);
border-bottom: 1px solid var(--zr-line);
}
.woocommerce div.product form.cart div.quantity {
display: flex;
margin: 0 !important;
}
.woocommerce div.product form.cart .qty {
width: 76px;
height: 48px;
border: 1px solid var(--zr-line);
border-radius: 999px;
text-align: center;
font-family: var(--zr-body);
font-size: 15px;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
flex: 1;
min-width: 200px;
height: 48px;
font-size: 13px !important;
}
.zr-wa-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
height: 48px;
margin-top: 4px;
border: 1.5px solid #1fa855;
border-radius: 999px;
background: #fff;
color: #178a45 !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none !important;
transition: background 0.2s var(--zr-ease), color 0.2s var(--zr-ease);
}
.zr-wa-btn:hover {
background: #1fa855;
color: #fff !important;
}
.zr-wa-btn svg {
width: 19px;
height: 19px;
fill: currentColor;
}
.woocommerce div.product .product_meta {
font-size: 12px;
color: var(--zr-ink-60);
display: flex;
flex-direction: column;
gap: 6px;
}
.woocommerce div.product .product_meta > span {
display: block;
}
.woocommerce div.product .product_meta a {
color: var(--zr-ink);
text-decoration: none;
border-bottom: 1px solid var(--zr-zari);
}
/* Share row */
.zr-share {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
}
.zr-share-label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--zr-ink-60);
font-weight: 600;
}
.zr-share a,
.zr-share button {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--zr-line);
border-radius: 50%;
background: var(--zr-paper);
color: var(--zr-ink);
cursor: pointer;
transition: background 0.2s var(--zr-ease);
}
.zr-share a:hover,
.zr-share button:hover {
background: var(--zr-mist);
}
.zr-share svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* Tabs → clean minimal */
.woocommerce div.product .woocommerce-tabs {
margin-top: clamp(28px, 4vw, 48px);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
gap: 4px;
padding: 0 !important;
margin: 0 0 0 !important;
border-bottom: 1px solid var(--zr-line);
background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: none !important;
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: 13px 18px !important;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--zr-ink-60) !important;
border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--zr-ink) !important;
border-bottom-color: var(--zr-zari);
}
.woocommerce div.product .woocommerce-tabs .panel {
padding: 26px 0 0 !important;
font-size: 15px;
line-height: 1.75;
color: var(--zr-ink);
max-width: 820px;
}
.woocommerce div.product .woocommerce-tabs .panel h2:first-child {
display: none; /* duplicate "Description" heading */
}
@media (max-width: 900px) {
.woocommerce div.product {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
Account dashboard — modern
-------------------------------------------------------------------------- */
body.woocommerce-account div.woocommerce {
display: flex !important;
flex-wrap: wrap;
gap: clamp(22px, 3.5vw, 44px);
align-items: flex-start;
}
/* Anything that isn't the nav or the content (notices, messages) spans full width above. */
body.woocommerce-account div.woocommerce > *:not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) {
flex: 1 1 100%;
order: -1;
}
nav.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-navigation {
flex: 0 0 225px;
width: 225px !important;
max-width: 225px;
float: none !important;
}
.woocommerce-MyAccount-content {
flex: 1 1 300px;
width: auto !important;
float: none !important;
min-width: 0;
}
.woocommerce-MyAccount-navigation ul {
position: sticky;
top: 16px;
}
@media (max-width: 860px) {
nav.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-navigation {
flex: 1 1 100%;
width: 100% !important;
max-width: 100%;
}
.woocommerce-MyAccount-navigation ul {
position: static;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
}
.woocommerce-MyAccount-navigation li {
flex: 1 1 auto;
}
.woocommerce-MyAccount-navigation li a {
text-align: center;
padding: 10px 12px;
}
.woocommerce-MyAccount-content {
flex: 1 1 100%;
}
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-orders-table {
border: 1px solid var(--zr-line);
border-radius: var(--zr-radius);
overflow: hidden;
}
@media (max-width: 900px) {
.woocommerce-account .woocommerce {
grid-template-columns: 1fr;
}
.woocommerce-MyAccount-navigation ul {
flex-direction: row;
flex-wrap: wrap;
}
}
/* --------------------------------------------------------------------------
Header notifications
-------------------------------------------------------------------------- */
.zr-notif-wrap {
position: relative;
}
.zr-notif-dot {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--zr-gulaab);
display: none;
}
.zr-notif-wrap.has-unread .zr-notif-dot {
display: block;
}
.zr-notif-panel {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 300px;
background: var(--zr-paper);
border: 1px solid var(--zr-line);
border-radius: 16px;
box-shadow: 0 16px 34px rgba(20, 17, 15, 0.12);
z-index: 320;
overflow: hidden;
display: none;
}
.zr-notif-panel.is-open {
display: block;
}
.zr-notif-head {
padding: 13px 18px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
border-bottom: 1px solid var(--zr-line);
}
.zr-notif-item {
display: block;
padding: 12px 18px;
font-size: 13px;
line-height: 1.5;
color: var(--zr-ink);
text-decoration: none;
border-bottom: 1px solid var(--zr-line);
}
.zr-notif-item:last-child {
border-bottom: none;
}
a.zr-notif-item:hover {
background: var(--zr-mist);
}
/* --------------------------------------------------------------------------
Minimal popup
-------------------------------------------------------------------------- */
.zr-popup-overlay {
position: fixed;
inset: 0;
background: rgba(20, 17, 15, 0.5);
z-index: 600;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.zr-popup-overlay.is-open {
display: flex;
}
.zr-popup {
position: relative;
width: min(92vw, 420px);
background: var(--zr-paper);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 30px 70px rgba(20, 17, 15, 0.3);
animation: zr-pop 0.35s var(--zr-ease);
}
@keyframes zr-pop {
from { opacity: 0; transform: translateY(14px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.zr-popup-img img {
width: 100%;
display: block;
max-height: 230px;
object-fit: cover;
}
.zr-popup-body {
padding: 26px 28px 30px;
text-align: center;
}
.zr-popup-title {
font-family: var(--zr-display);
font-size: 22px;
font-weight: 700;
margin: 0 0 8px;
}
.zr-popup-text {
font-size: 14px;
line-height: 1.6;
color: var(--zr-ink-60);
margin: 0 0 18px;
}
.zr-popup-close {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--zr-ink);
font-size: 18px;
line-height: 1;
cursor: pointer;
z-index: 2;
}
/* --------------------------------------------------------------------------
Footer socials
-------------------------------------------------------------------------- */
.zr-socials {
display: flex;
gap: 10px;
margin-top: 16px;
}
.zr-socials a {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--zr-line);
border-radius: 50%;
color: var(--zr-ink);
transition: background 0.2s var(--zr-ease), color 0.2s var(--zr-ease), border-color 0.2s var(--zr-ease);
}
.zr-socials a:hover {
background: var(--zr-ink);
border-color: var(--zr-ink);
color: var(--zr-paper);
}
.zr-socials svg {
width: 17px;
height: 17px;
fill: currentColor;
}
/* --------------------------------------------------------------------------
Shop grid hard fix — always the set number per row, button stays in card
-------------------------------------------------------------------------- */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
display: none !important;
content: none !important;
}
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(var(--zr-shop-cols, 4), minmax(0, 1fr)) !important;
gap: 24px 14px !important;
margin: 0 0 40px !important;
padding: 0 !important;
list-style: none;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: none !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0;
}
.woocommerce ul.products li.product .zr-card {
width: 100%;
max-width: 100%;
}
/* Grid cells become flex boxes so every card stretches to the row height —
equal boxes, buttons on one line, desktop and mobile alike. */
.woocommerce ul.products li.product,
.zr-rail-item {
display: flex;
}
.zr-rail-item .zr-card {
width: 100%;
}
/* Any button inside a card can never grow past the card. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .zr-card-cta .button,
.woocommerce ul.products li.product .add_to_cart_button {
display: block;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 10px 0 0 !important;
white-space: normal;
text-align: center;
}
@media (max-width: 991px) {
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 640px) {
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 22px 12px !important;
}
}
/* --------------------------------------------------------------------------
Product FAQs — minimal accordion
-------------------------------------------------------------------------- */
.zr-faqs {
max-width: 100%;
margin: clamp(30px, 5vw, 56px) auto 0;
}
.zr-faqs-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
gap: clamp(20px, 3vw, 40px);
align-items: start;
}
@media (max-width: 860px) {
.zr-faqs-grid { grid-template-columns: 1fr; }
}
.zr-faqs-title {
text-align: center;
font-size: clamp(18px, 2.2vw, 24px);
margin: 0 0 22px;
}
.zr-faq {
border-bottom: 1px solid var(--zr-line);
}
.zr-faq:first-of-type {
border-top: 1px solid var(--zr-line);
}
.zr-faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 17px 2px;
cursor: pointer;
list-style: none;
font-size: 15px;
font-weight: 600;
color: var(--zr-ink);
}
.zr-faq summary::-webkit-details-marker {
display: none;
}
.zr-faq-icon {
position: relative;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.zr-faq-icon::before,
.zr-faq-icon::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
background: var(--zr-ink);
transition: transform 0.25s var(--zr-ease);
}
.zr-faq-icon::before {
width: 14px;
height: 1.5px;
}
.zr-faq-icon::after {
width: 1.5px;
height: 14px;
}
.zr-faq[open] .zr-faq-icon::after {
transform: rotate(90deg);
}
.zr-faq-a {
padding: 0 34px 18px 2px;
font-size: 14px;
line-height: 1.7;
color: var(--zr-ink-60);
}
.zr-faq-a p {
margin: 0;
}
/* --------------------------------------------------------------------------
Trusted-by band
-------------------------------------------------------------------------- */
.zr-trustband {
width: 100%;
max-width: none;
margin: clamp(30px, 5vw, 56px) 0 0;
padding: clamp(30px, 4.5vw, 54px) clamp(20px, 4vw, 48px);
background: linear-gradient(135deg, #faf8f5, var(--zr-mist));
border: 1px solid #eae6df;
border-radius: calc(var(--zr-radius) + 8px);
text-align: center;
}
.zr-trustband-badge {
display: inline-block;
background: var(--zr-ink);
color: var(--zr-paper);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 999px;
margin-bottom: 16px;
}
.zr-trustband-title {
font-size: clamp(19px, 2.4vw, 26px);
margin: 0 0 8px;
}
.zr-trustband-sub {
font-size: 14px;
color: var(--zr-ink-60);
margin: 0 auto 26px;
max-width: 480px;
}
.zr-trustband-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(18px, 3vw, 32px);
background: var(--zr-paper);
border-radius: var(--zr-radius);
padding: clamp(24px, 3vw, 36px) clamp(16px, 4vw, 44px);
margin: 0 auto 24px;
max-width: none;
box-shadow: 0 10px 34px rgba(20, 17, 15, 0.06);
}
.zr-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.zr-stat-ic {
width: 52px;
height: 52px;
margin-bottom: 8px;
border-radius: 16px;
background: #F7F5F1;
display: grid;
place-items: center;
color: var(--zr-zari);
transform: scale(0.6);
opacity: 0;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s;
}
.zr-stat:nth-child(2) .zr-stat-ic { color: var(--zr-gulaab); transition-delay: 0.12s; }
.zr-stat:nth-child(3) .zr-stat-ic { color: var(--zr-ink); transition-delay: 0.24s; }
.zr-trustband.is-on .zr-stat-ic {
transform: scale(1);
opacity: 1;
}
.zr-stat-ic svg { width: 26px; height: 26px; }
.zr-stat-num {
font-size: clamp(26px, 3.6vw, 40px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--zr-ink);
}
.zr-stat-label {
font-size: 12.5px;
color: var(--zr-ink-60);
letter-spacing: 0.04em;
}
.zr-trustband-points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px 30px;
}
.zr-trustband-points li {
font-size: 13px;
font-weight: 700;
color: var(--zr-ink);
display: inline-flex;
align-items: center;
gap: 9px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s, transform 0.5s;
}
.zr-trustband.is-on .zr-trustband-points li { opacity: 1; transform: none; }
.zr-trustband.is-on .zr-trustband-points li:nth-child(1) { transition-delay: 0.35s; }
.zr-trustband.is-on .zr-trustband-points li:nth-child(2) { transition-delay: 0.45s; }
.zr-trustband.is-on .zr-trustband-points li:nth-child(3) { transition-delay: 0.55s; }
.zr-trustband.is-on .zr-trustband-points li:nth-child(4) { transition-delay: 0.65s; }
.zr-point-ic {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--zr-zari);
display: grid;
place-items: center;
}
.zr-point-ic svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) {
.zr-stat-ic,
.zr-trustband-points li { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 640px) {
.zr-trustband-stats {
grid-template-columns: 1fr;
gap: 26px;
}
.zr-trustband-points {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding-left: clamp(6px, 4vw, 20px);
}
}
/* --------------------------------------------------------------------------
Product description — modern editorial
-------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs .panel#tab-description {
background: var(--zr-paper);
border: 1px solid var(--zr-line);
border-radius: var(--zr-radius);
padding: clamp(22px, 3.5vw, 40px) !important;
max-width: none;
}
/* Tab content justified (v6.4.17). */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .panel p,
#tab-description p {
text-align: justify;
}
#tab-description h2,
#tab-description h3 {
font-size: 18px;
margin: 22px 0 10px;
letter-spacing: -0.01em;
}
#tab-description h2:first-child,
#tab-description h3:first-child {
margin-top: 0;
}
#tab-description p {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.8;
color: var(--zr-ink);
}
#tab-description ul {
margin: 0 0 16px;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px 22px;
}
#tab-description ul li {
position: relative;
padding-left: 24px;
font-size: 14px;
line-height: 1.6;
}
#tab-description ul li::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 14px;
background: var(--zr-zari);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* --------------------------------------------------------------------------
Mobile overflow guards — nothing may poke past the right edge
-------------------------------------------------------------------------- */
.zr-shell,
.zr-section,
.zr-home {
max-width: 100%;
}
.zr-content,
.zr-footer {
overflow-x: clip;
}
@media (max-width: 767px) {
:root {
--zr-pad: 14px;
}
.zr-header-inner {
grid-template-columns: auto 1fr auto;
gap: 10px;
}
.zr-header-inner > .zr-header-search {
display: none;
}
/* Single-product buy row stacks instead of overflowing. */
.woocommerce div.product form.cart {
flex-direction: column;
align-items: stretch;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
min-width: 0;
width: 100%;
}
.woocommerce div.product form.cart .qty {
width: 100%;
}
/* Wide tables (orders, cart) scroll inside themselves, not the page. */
.woocommerce table.shop_table {
display: block;
overflow-x: auto;
max-width: 100%;
}
.zr-trustband {
margin-inline: 0;
}
}
/* --------------------------------------------------------------------------
Login / Register — centered card
-------------------------------------------------------------------------- */
body.woocommerce-account:not(.logged-in) .zr-page-title {
text-align: center;
}
form.woocommerce-form-login,
form.woocommerce-form-register,
.woocommerce-ResetPassword {
max-width: 440px;
margin: 10px auto 30px !important;
padding: clamp(24px, 4vw, 36px) !important;
background: var(--zr-paper);
border: 1px solid var(--zr-line) !important;
border-radius: 18px !important;
box-shadow: 0 14px 40px rgba(20, 17, 15, 0.06);
}
form.woocommerce-form-login .form-row,
form.woocommerce-form-register .form-row,
.woocommerce-ResetPassword .form-row {
margin-bottom: 15px;
width: 100%;
float: none;
}
form.woocommerce-form-login label,
form.woocommerce-form-register label,
.woocommerce-ResetPassword label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
margin-bottom: 6px;
}
form.woocommerce-form-login .input-text,
form.woocommerce-form-register .input-text,
.woocommerce-ResetPassword .input-text {
width: 100%;
height: 46px;
border: 1px solid var(--zr-line);
border-radius: 12px;
padding: 0 14px;
font-family: var(--zr-body);
font-size: 14px;
background: var(--zr-paper);
}
form.woocommerce-form-login .input-text:focus,
form.woocommerce-form-register .input-text:focus {
outline: none;
border-color: var(--zr-ink-40);
box-shadow: 0 0 0 3px rgba(166, 124, 46, 0.12);
}
form.woocommerce-form-login button[type="submit"],
form.woocommerce-form-register button[type="submit"],
.woocommerce-ResetPassword button[type="submit"] {
width: 100%;
min-height: 46px;
background: var(--zr-ink);
color: var(--zr-paper);
border: none;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
}
form.woocommerce-form-login .woocommerce-form-login__rememberme {
display: block;
margin-bottom: 12px;
font-size: 13px;
}
.woocommerce-LostPassword {
text-align: center;
font-size: 13px;
margin: 14px 0 0;
}
/* --------------------------------------------------------------------------
Cart page — table, coupon, buttons
-------------------------------------------------------------------------- */
.woocommerce-cart table.shop_table {
border: 1px solid var(--zr-line) !important;
border-radius: var(--zr-radius);
overflow: hidden;
border-collapse: separate !important;
border-spacing: 0;
}
.woocommerce-cart table.shop_table th {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--zr-ink-60);
background: var(--zr-mist);
padding: 13px 14px !important;
border: none !important;
}
.woocommerce-cart table.shop_table td {
padding: 14px !important;
border: none !important;
border-top: 1px solid var(--zr-line) !important;
vertical-align: middle;
}
.woocommerce-cart table.cart img {
width: 58px;
border-radius: 10px;
}
.woocommerce-cart table.cart .product-remove a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--zr-line);
color: var(--zr-gulaab) !important;
font-size: 15px;
text-decoration: none !important;
background: var(--zr-paper);
}
.woocommerce-cart table.cart .product-remove a:hover {
background: var(--zr-gulaab);
color: #fff !important;
border-color: var(--zr-gulaab);
}
.woocommerce-cart table.cart input.qty {
width: 64px;
height: 40px;
border: 1px solid var(--zr-line);
border-radius: 10px;
text-align: center;
font-family: var(--zr-body);
}
/* Coupon row */
.woocommerce-cart td.actions {
background: var(--zr-paper);
}
.woocommerce-cart td.actions .coupon {
display: inline-flex;
gap: 8px;
align-items: center;
float: none;
}
.woocommerce-cart td.actions .coupon .input-text {
width: 190px !important;
height: 42px;
border: 1px solid var(--zr-line);
border-radius: 999px;
padding: 0 16px;
font-family: var(--zr-body);
font-size: 13px;
float: none !important;
margin: 0 !important;
}
.woocommerce-cart td.actions .coupon .button {
height: 42px;
padding: 0 20px;
background: var(--zr-paper);
color: var(--zr-ink);
border: 1.5px solid var(--zr-ink);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
.woocommerce-cart td.actions .coupon .button:hover {
background: var(--zr-ink);
color: var(--zr-paper);
}
/* Update cart — text must ALWAYS be visible, including disabled state */
.woocommerce-cart td.actions > .button {
float: right;
height: 42px;
padding: 0 22px;
background: var(--zr-ink) !important;
color: var(--zr-paper) !important;
border: none;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
.woocommerce-cart td.actions > .button:disabled,
.woocommerce-cart td.actions > .button[disabled],
.woocommerce-cart td.actions > .button.disabled {
background: var(--zr-ink) !important;
color: var(--zr-paper) !important;
opacity: 0.4;
cursor: not-allowed;
}
/* Totals card */
.woocommerce-cart .cart_totals {
border: 1px solid var(--zr-line);
border-radius: var(--zr-radius);
padding: 22px;
background: var(--zr-paper);
}
.woocommerce-cart .cart_totals h2 {
font-size: 18px;
margin: 0 0 14px;
}
.woocommerce-cart .cart_totals table.shop_table {
border: none !important;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 48px;
background: var(--zr-ink) !important;
color: var(--zr-paper) !important;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none !important;
}
@media (max-width: 640px) {
.woocommerce-cart td.actions .coupon {
display: flex;
width: 100%;
}
.woocommerce-cart td.actions .coupon .input-text {
flex: 1;
width: auto !important;
}
.woocommerce-cart td.actions > .button {
float: none;
width: 100%;
margin-top: 10px;
}
}
/* --------------------------------------------------------------------------
PJAX top progress bar
-------------------------------------------------------------------------- */
.zr-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 0%;
background: linear-gradient(90deg, var(--zr-zari), #d4b061);
z-index: 9999;
pointer-events: none;
box-shadow: 0 0 8px rgba(166, 124, 46, 0.55);
}
/* --------------------------------------------------------------------------
2×2 category grid sections
-------------------------------------------------------------------------- */
.zr-grid {
display: grid;
grid-template-columns: repeat(var(--zr-cols, 2), minmax(0, 1fr));
gap: 24px 16px;
}
.zr-grid > .zr-card,
.zr-grid > * {
min-width: 0;
}
@media (max-width: 991px) {
.zr-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 640px) {
.zr-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px 12px;
}
}
/* --------------------------------------------------------------------------
Delivery / exchange / COD — modern icon tiles (v6.4.14)
-------------------------------------------------------------------------- */
.zr-tstrip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 16px;
}
.zr-tstrip-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 9px;
padding: 14px 10px;
background: var(--zr-paper);
border: 1px solid var(--zr-line);
border-radius: 14px;
transition: transform 0.25s var(--zr-ease), box-shadow 0.25s var(--zr-ease), border-color 0.25s;
}
.zr-tstrip-item:hover {
transform: translateY(-3px);
border-color: #e2d7c2;
box-shadow: 0 10px 26px rgba(20, 17, 15, 0.07);
}
.zr-tstrip-ic {
width: 42px;
height: 42px;
border-radius: 13px;
background: linear-gradient(135deg, #faf6ee, var(--zr-mist));
border: 1px solid #eee5d2;
display: grid;
place-items: center;
color: var(--zr-zari);
}
.zr-tstrip-ic svg {
width: 21px;
height: 21px;
}
.zr-tstrip-txt {
display: flex;
flex-direction: column;
gap: 2px;
}
.zr-tstrip-txt strong {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--zr-ink);
}
.zr-tstrip-txt em {
font-style: normal;
font-size: 11.5px;
color: var(--zr-ink-60);
}
@media (max-width: 640px) {
.zr-tstrip {
grid-template-columns: 1fr;
gap: 8px;
}
.zr-tstrip-item {
flex-direction: row;
text-align: left;
padding: 11px 14px;
}
.zr-tstrip-txt {
flex: 1;
}
}
/* Trust band count-up number — header badge (.zr-count) se alag class. */
.zr-tb-count {
position: static;
display: inline;
background: none;
color: inherit;
font: inherit;
padding: 0;
min-width: 0;
}
/* --------------------------------------------------------------------------
WhatsApp support bar
-------------------------------------------------------------------------- */
.zr-support {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
max-width: 860px;
margin: clamp(24px, 4vw, 40px) auto 0;
padding: 14px 18px;
border: 1px solid var(--zr-line);
border-radius: 999px;
background: var(--zr-mist);
}
.zr-support-btn {
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--zr-ink);
color: #fff !important;
text-decoration: none !important;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 12px 20px;
border-radius: 999px;
white-space: nowrap;
transition: opacity 0.2s var(--zr-ease);
}
.zr-support-btn:hover {
opacity: 0.85;
}
.zr-support-btn svg {
width: 18px;
height: 18px;
}
.zr-support-divider {
width: 1px;
align-self: stretch;
background: var(--zr-line);
}
.zr-support-avatars {
display: inline-flex;
}
.zr-support-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
border: 2.5px solid #fff;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-left: -10px;
position: relative;
}
.zr-support-avatar:first-child {
margin-left: 0;
}
.zr-support-avatar::after {
content: "";
position: absolute;
right: 1px;
bottom: 1px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #22b357;
border: 1.5px solid #fff;
}
.zr-support-avatar svg {
width: 22px;
height: 22px;
}
.zr-support-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.zr-support-meta strong {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--zr-ink-60);
}
.zr-support-meta span {
font-size: 13.5px;
font-weight: 600;
color: var(--zr-ink);
}
.zr-support-online {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 7px;
background: #e6f6ec;
color: #187a41;
border: 1px solid #bfe6cd;
font-size: 12px;
font-weight: 700;
padding: 8px 15px;
border-radius: 999px;
white-space: nowrap;
}
.zr-support-online i {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22b357;
animation: zr-pulse 1.6s ease infinite;
}
@keyframes zr-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 179, 87, 0.45); }
50% { box-shadow: 0 0 0 5px rgba(34, 179, 87, 0); }
}
@media (max-width: 700px) {
.zr-support {
border-radius: 20px;
gap: 12px;
}
.zr-support-divider {
display: none;
}
.zr-support-btn {
flex: 1 1 100%;
justify-content: center;
}
.zr-support-online {
margin-left: 0;
}
}
/* --------------------------------------------------------------------------
Tabs — tighter, cleaner; clamped description
-------------------------------------------------------------------------- */
.woocommerce div.product .woocommerce-tabs .panel {
padding: 20px 0 0 !important;
font-size: 14px;
line-height: 1.65;
}
.woocommerce div.product .woocommerce-tabs .panel#tab-description {
padding: 20px 22px !important;
}
#tab-description p {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.65;
}
#tab-description h2,
#tab-description h3 {
font-size: 15.5px;
margin: 16px 0 7px;
}
#tab-description ul {
margin: 0 0 12px;
gap: 5px 18px;
}
#tab-description ul li {
font-size: 13.5px;
line-height: 1.5;
padding-left: 22px;
}
.zr-clamp.is-clamped {
max-height: 250px;
overflow: hidden;
position: relative;
}
.zr-clamp.is-clamped::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 70px;
background: linear-gradient(180deg, transparent, var(--zr-paper));
pointer-events: none;
}
.zr-readmore {
display: inline-block;
margin-top: 12px;
background: none;
border: none;
padding: 0;
font-family: var(--zr-body);
font-size: 12.5px;
font-weight: 700;
color: var(--zr-ink);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--zr-zari);
cursor: pointer;
}
/* Returns / Care tab copy */
.zr-tab-copy {
max-width: 780px;
}
.zr-tab-copy h3 {
font-size: 15.5px;
margin: 18px 0 8px;
}
.zr-tab-copy h3:first-child {
margin-top: 0;
}
.zr-tab-copy p {
margin: 0 0 10px;
color: var(--zr-ink-60);
}
.zr-tab-copy ul {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.zr-tab-copy ul li {
position: relative;
padding-left: 22px;
font-size: 13.5px;
line-height: 1.6;
}
.zr-tab-copy ul li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 13px;
height: 13px;
background: var(--zr-zari);
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* --------------------------------------------------------------------------
Filter pills bar (shop / category)
-------------------------------------------------------------------------- */
.zr-filters {
display: flex;
align-items: center;
gap: 8px;
/* Wrap instead of scroll — a scrolling bar clips its own dropdowns. */
flex-wrap: wrap;
overflow: visible;
padding: 2px 0 12px;
margin-bottom: 8px;
position: relative;
z-index: 60;
}
.zr-filter {
position: relative;
flex-shrink: 0;
}
.zr-filter > summary,
.zr-filter.zr-filter-switch,
.zr-filter-clear {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 16px;
border: 1px solid var(--zr-line);
border-radius: 999px;
background: var(--zr-paper);
font-size: 13px;
font-weight: 600;
color: var(--zr-ink);
cursor: pointer;
list-style: none;
white-space: nowrap;
user-select: none;
transition: border-color 0.15s var(--zr-ease), background 0.15s var(--zr-ease);
}
.zr-filter > summary::-webkit-details-marker {
display: none;
}
.zr-filter > summary:hover,
.zr-filter.zr-filter-switch:hover {
border-color: var(--zr-ink-40);
}
.zr-filter[open] > summary,
.zr-filter.is-active > summary,
.zr-filter-switch.is-active {
border-color: var(--zr-ink);
background: var(--zr-mist);
}
.zr-filter-caret {
width: 8px;
height: 8px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.2s var(--zr-ease);
}
.zr-filter[open] .zr-filter-caret {
transform: rotate(225deg) translateY(-2px);
}
.zr-filter-panel {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 220px;
max-height: 320px;
overflow-y: auto;
background: var(--zr-paper);
border: 1px solid var(--zr-line);
border-radius: 14px;
box-shadow: 0 16px 34px rgba(20, 17, 15, 0.18);
padding: 8px;
z-index: 500;
}
/* Mobile: pills scroll in a row, but panels open as a bottom sheet so the
scrolling bar can never clip them. */
@media (max-width: 767px) {
.zr-filters {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.zr-filters::-webkit-scrollbar {
display: none;
}
.zr-filter-panel {
position: fixed;
top: auto;
left: 10px;
right: 10px;
bottom: 10px;
max-height: 55vh;
border-radius: 18px;
box-shadow: 0 -14px 44px rgba(20, 17, 15, 0.3);
z-index: 700;
}
}
.zr-filter-opt {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 9px;
font-size: 13px;
font-weight: 500;
color: var(--zr-ink);
cursor: pointer;
text-decoration: none;
}
.zr-filter-opt:hover {
background: var(--zr-mist);
}
.zr-filter-opt span {
margin-left: auto;
font-size: 11px;
color: var(--zr-ink-40);
}
.zr-filter-opt input {
accent-color: var(--zr-ink);
width: 15px;
height: 15px;
margin: 0;
flex-shrink: 0;
}
/* In-stock switch */
.zr-filter-switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.zr-switch {
width: 34px;
height: 20px;
border-radius: 999px;
background: #d9d5d0;
position: relative;
transition: background 0.2s var(--zr-ease);
flex-shrink: 0;
}
.zr-switch::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform 0.2s var(--zr-ease);
}
.zr-filter-switch input:checked + .zr-switch {
background: var(--zr-ink);
}
.zr-filter-switch input:checked + .zr-switch::after {
transform: translateX(14px);
}
.zr-filter-clear {
color: var(--zr-gulaab);
border-color: rgba(140, 47, 57, 0.3);
text-decoration: none;
}
/* --------------------------------------------------------------------------
Infinite scroll loader
-------------------------------------------------------------------------- */
.zr-infinite {
display: flex;
justify-content: center;
padding: 26px 0 10px;
min-height: 60px;
}
.zr-infinite-spin {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2.5px solid var(--zr-line);
border-top-color: var(--zr-zari);
animation: zrspin360 0.8s linear infinite;
opacity: 0;
transition: opacity 0.2s;
}
.zr-infinite.is-loading .zr-infinite-spin {
opacity: 1;
}
@keyframes zrspin360 {
to { transform: rotate(360deg); }
}
.zr-infinite-end {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--zr-ink-40);
font-weight: 600;
}
/* Sort pill replaces the default WooCommerce ordering dropdown. */
.woocommerce-ordering {
display: none !important;
}
/* --------------------------------------------------------------------------
Product card — light bordered box
-------------------------------------------------------------------------- */
.zr-card {
border: 1px solid var(--zr-line);
border-radius: 14px;
background: var(--zr-paper);
padding: 8px 8px 10px;
transition: box-shadow 0.22s var(--zr-ease), border-color 0.22s var(--zr-ease);
}
.zr-card:hover {
border-color: var(--zr-ink-40);
box-shadow: 0 10px 26px rgba(20, 17, 15, 0.07);
}
.zr-card .zr-card-media {
border-radius: 11px;
}
.zr-card .zr-card-body {
padding: 8px 4px 0;
}
.zr-card .zr-card-wish {
top: 18px;
right: 18px;
}
.zr-card .zr-card-badges {
top: 10px;
left: 10px;
}
/* --------------------------------------------------------------------------
Checkout — Shopify-style two-column
-------------------------------------------------------------------------- */
form.checkout.woocommerce-checkout {
display: grid;
grid-template-columns: minmax(0, 1fr) 400px;
grid-template-rows: auto 1fr;
gap: 0 clamp(28px, 4vw, 56px);
align-items: start;
}
form.checkout.woocommerce-checkout #customer_details {
grid-column: 1;
grid-row: 1 / 3;
width: 100%;
}
form.checkout.woocommerce-checkout #order_review_heading {
grid-column: 2;
grid-row: 1;
font-size: 16px;
margin: 0 0 12px;
}
form.checkout.woocommerce-checkout #order_review {
grid-column: 2;
grid-row: 2;
position: sticky;
top: calc(var(--zr-top, 90px) + 16px);
border: 1px solid var(--zr-line);
border-radius: 16px;
background: var(--zr-mist);
padding: 20px;
}
/* Customer details: clean stacked fields, 2-up where Woo pairs them */
#customer_details .col-1,
#customer_details .col-2 {
float: none !important;
width: 100% !important;
}
#customer_details h3 {
font-size: 15px;
letter-spacing: 0.02em;
margin: 22px 0 12px;
}
#customer_details .woocommerce-billing-fields__field-wrapper,
#customer_details .woocommerce-shipping-fields__field-wrapper,
#customer_details .woocommerce-additional-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 14px;
}
#customer_details .form-row {
grid-column: 1 / -1;
float: none !important;
width: 100% !important;
margin: 0 0 13px;
padding: 0;
}
#customer_details .form-row-first {
grid-column: 1;
}
#customer_details .form-row-last {
grid-column: 2;
}
.woocommerce-checkout label {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
margin-bottom: 5px;
color: var(--zr-ink);
}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
width: 100%;
min-height: 46px;
border: 1px solid var(--zr-line);
border-radius: 12px;
padding: 10px 14px;
font-family: var(--zr-body);
font-size: 14px;
background: var(--zr-paper);
box-sizing: border-box;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
outline: none;
border-color: var(--zr-ink-40);
box-shadow: 0 0 0 3px rgba(166, 124, 46, 0.12);
}
.woocommerce-checkout .select2-container .select2-selection--single {
height: 46px;
border: 1px solid var(--zr-line);
border-radius: 12px;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
line-height: 44px;
padding-left: 14px;
}
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
height: 44px;
}
/* Order review table -> clean list */
#order_review table.shop_table {
background: transparent;
border: none !important;
margin: 0;
}
#order_review table.shop_table th,
#order_review table.shop_table td {
border: none !important;
border-bottom: 1px solid var(--zr-line) !important;
padding: 12px 0 !important;
background: transparent;
font-size: 13.5px;
vertical-align: middle;
}
#order_review table.shop_table thead {
display: none;
}
#order_review tr.order-total td,
#order_review tr.order-total th {
border-bottom: none !important;
font-size: 16px;
font-weight: 700;
padding-top: 14px !important;
}
.zr-review-item {
display: flex;
align-items: center;
gap: 12px;
}
.zr-review-thumb {
position: relative;
flex-shrink: 0;
}
.zr-review-thumb img {
width: 52px;
height: 52px;
object-fit: cover;
border-radius: 10px;
border: 1px solid var(--zr-line);
background: var(--zr-paper);
display: block;
}
.zr-review-qty {
position: absolute;
top: -7px;
right: -7px;
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: 999px;
background: var(--zr-ink);
color: var(--zr-paper);
font-size: 10.5px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.zr-review-name {
font-weight: 500;
line-height: 1.4;
}
#order_review .product-quantity {
display: none; /* qty bubble already shows it */
}
/* Payment methods -> bordered radio boxes */
#payment {
background: transparent !important;
border-radius: 0;
}
#payment ul.wc_payment_methods {
padding: 14px 0 0 !important;
border: none !important;
margin: 0;
list-style: none;
}
#payment ul.wc_payment_methods li {
border: 1px solid var(--zr-line);
border-radius: 12px;
background: var(--zr-paper);
padding: 13px 14px;
margin-bottom: 9px;
}
#payment ul.wc_payment_methods li label {
display: inline;
font-size: 13.5px;
font-weight: 600;
margin: 0;
}
#payment ul.wc_payment_methods li input[type="radio"] {
accent-color: var(--zr-ink);
margin-right: 8px;
}
#payment div.payment_box {
background: var(--zr-mist) !important;
border-radius: 10px;
margin: 10px 0 0 !important;
padding: 11px 13px !important;
font-size: 12.5px;
color: var(--zr-ink-60);
}
#payment div.payment_box::before {
display: none !important;
}
#payment div.form-row.place-order {
padding: 14px 0 0 !important;
}
#place_order {
width: 100%;
min-height: 50px;
background: var(--zr-ink) !important;
color: var(--zr-paper) !important;
border: none;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
}
/* Coupon toggle above the form */
.woocommerce-form-coupon-toggle .woocommerce-info {
border: 1px dashed var(--zr-line);
border-radius: 12px;
background: var(--zr-paper);
padding: 13px 16px;
font-size: 13px;
color: var(--zr-ink-60);
}
form.checkout_coupon.woocommerce-form-coupon {
display: flex;
gap: 10px;
border: 1px solid var(--zr-line) !important;
border-radius: 14px !important;
padding: 16px !important;
margin: 12px 0 20px;
align-items: flex-end;
}
form.checkout_coupon .form-row {
margin: 0;
flex: 1;
}
form.checkout_coupon .input-text {
min-height: 44px;
border: 1px solid var(--zr-line);
border-radius: 999px;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
form.checkout_coupon button {
height: 44px;
padding: 0 20px;
border: 1.5px solid var(--zr-ink);
border-radius: 999px;
background: var(--zr-paper);
color: var(--zr-ink);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
/* Ship-to-different + notes tidy */
#ship-to-different-address {
font-size: 14px;
}
#ship-to-different-address input {
accent-color: var(--zr-ink);
}
/* Thank-you page */
.woocommerce-order .woocommerce-thankyou-order-received {
font-size: clamp(19px, 2.4vw, 26px);
font-weight: 700;
margin-bottom: 18px;
}
ul.woocommerce-thankyou-order-details {
list-style: none;
margin: 0 0 24px !important;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
ul.woocommerce-thankyou-order-details li {
border: 1px solid var(--zr-line);
border-radius: 12px;
padding: 11px 15px !important;
font-size: 11px !important;
letter-spacing: 0.06em;
margin: 0 !important;
border-right-width: 1px !important;
float: none !important;
}
ul.woocommerce-thankyou-order-details li strong {
display: block;
font-size: 14px;
letter-spacing: 0;
margin-top: 3px;
}
@media (max-width: 900px) {
form.checkout.woocommerce-checkout {
display: flex;
flex-direction: column;
}
form.checkout.woocommerce-checkout #order_review {
position: static;
width: 100%;
}
#customer_details .woocommerce-billing-fields__field-wrapper {
grid-template-columns: 1fr;
}
#customer_details .form-row-first,
#customer_details .form-row-last {
grid-column: 1 / -1;
}
}
/* --------------------------------------------------------------------------
Homepage full-width banner
-------------------------------------------------------------------------- */
.zr-banner {
display: block;
border-radius: 18px;
overflow: hidden;
line-height: 0;
transition: transform 0.4s var(--zr-ease), box-shadow 0.4s var(--zr-ease);
}
.zr-banner img {
width: 100%;
height: auto;
display: block;
}
a.zr-banner:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(20, 17, 15, 0.12);
}
/* --------------------------------------------------------------------------
Product video — portrait player
-------------------------------------------------------------------------- */
.zr-pvideo {
max-width: 1100px;
margin: clamp(40px, 6vw, 70px) auto 0;
padding: 0 20px;
text-align: center;
}
.zr-pvideo-head {
margin-bottom: clamp(20px, 3vw, 30px);
}
.zr-pvideo-head h2 {
font-size: clamp(21px, 3vw, 30px);
font-weight: 700;
letter-spacing: -0.015em;
margin: 0;
}
.zr-pvideo-frame {
position: relative;
width: min(330px, 78vw);
aspect-ratio: 9 / 16;
margin: 0 auto;
border-radius: 26px;
overflow: hidden;
background: var(--zr-ink);
box-shadow: 0 24px 60px rgba(20, 17, 15, 0.22);
cursor: pointer;
}
/* Thin gold rim, like a framed piece */
.zr-pvideo-frame::after {
content: "";
position: absolute;
inset: 0;
border-radius: 26px;
border: 1px solid rgba(166, 124, 46, 0.5);
pointer-events: none;
z-index: 3;
}
.zr-pvideo-el {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Soft top/bottom vignette so the controls always read */
.zr-pvideo-frame::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20, 17, 15, 0.28), transparent 32%, transparent 62%, rgba(20, 17, 15, 0.38));
pointer-events: none;
z-index: 2;
opacity: 1;
transition: opacity 0.35s var(--zr-ease);
}
.zr-pvideo-frame.is-playing::before {
opacity: 0;
}
/* Play button — gold ring that breathes, white triangle */
.zr-pvideo-play {
position: absolute;
inset: 0;
margin: auto;
width: 74px;
height: 74px;
border: none;
background: none;
padding: 0;
cursor: pointer;
z-index: 4;
display: grid;
place-items: center;
transition: opacity 0.3s var(--zr-ease), transform 0.3s var(--zr-ease);
}
.zr-pvideo-frame.is-playing .zr-pvideo-play {
opacity: 0;
transform: scale(0.85);
pointer-events: none;
}
.zr-pvideo-ring {
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1.5px solid rgba(255, 255, 255, 0.75);
}
.zr-pvideo-ring::after {
content: "";
position: absolute;
inset: -1.5px;
border-radius: 50%;
border: 1.5px solid var(--zr-zari);
animation: zrVideoPulse 2.6s ease-out infinite;
}
@keyframes zrVideoPulse {
0% { transform: scale(1); opacity: 0.85; }
70% { transform: scale(1.45); opacity: 0; }
100% { transform: scale(1.45); opacity: 0; }
}
.zr-pvideo-tri {
position: relative;
width: 0;
height: 0;
margin-left: 5px;
border-left: 19px solid #fff;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
/* Sound toggle */
.zr-pvideo-sound {
position: absolute;
right: 12px;
bottom: 12px;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.5);
background: rgba(20, 17, 15, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
z-index: 5;
padding: 0;
}
.zr-pvideo-sound svg {
width: 18px;
height: 18px;
}
.zr-pvideo-sound .zr-snd-on { display: none; }
.zr-pvideo-sound.is-on .zr-snd-off { display: none; }
.zr-pvideo-sound.is-on .zr-snd-on { display: block; }
@media (prefers-reduced-motion: reduce) {
.zr-pvideo-ring::after { animation: none; }
}
/* --------------------------------------------------------------------------
Homepage rhythm — every section gets the SAME vertical space.
Individual sections used to stack their own (sometimes nested) padding,
which made gaps between rows wildly uneven.
-------------------------------------------------------------------------- */
.zr-home > .zr-section,
.zr-home > section {
padding-block: clamp(14px, 1.8vw, 26px) !important;
margin-block: 0 !important;
}
/* A section rendered inside another section (e.g. the product rail inside
Flash Sale) must not add its own band of padding on top. */
.zr-home .zr-section .zr-section {
padding-block: 0 !important;
margin-block: 0 !important;
}
/* First section still hugs the header. */
.zr-home > .zr-section:first-child,
.zr-home > section:first-child {
padding-top: 0 !important;
}
/* Rails never reserve height beyond their cards. */
.zr-home .zr-rail {
align-items: start;
}
/* Marquee band: modest, equal breathing room. */
.zr-home .zr-marquee-sec,
.zr-home .zr-marquee {
margin-block: 0 !important;
}
/* --------------------------------------------------------------------------
Menu dividers — AUTOMATIC. A hairline sits under every top-level item
in the sidebar and mobile menu, so new items bring their divider along
with zero setup. Sub-items (dropdown children) stay clean.
-------------------------------------------------------------------------- */
/* menu_class lands on the UL itself, so the items are direct children. */
ul.zr-sidebar-menu > li,
ul.zr-mobile-menu > li {
border-bottom: 1px solid var(--zr-line);
}
ul.zr-sidebar-menu > li:last-child,
ul.zr-mobile-menu > li:last-child {
border-bottom: none;
}
/* A touch of air so the line never crowds the label. */
ul.zr-sidebar-menu > li > a {
padding-top: 13px;
padding-bottom: 13px;
}
/* --------------------------------------------------------------------------
Support card (FAQ section's right column)
-------------------------------------------------------------------------- */
.zr-support-card {
position: sticky;
top: calc(var(--zr-header-h, 70px) + 20px);
background: linear-gradient(180deg, #faf8f5, var(--zr-mist));
border: 1px solid rgba(20, 17, 15, 0.08);
border-radius: calc(var(--zr-radius) + 6px);
padding: 24px 24px 26px;
display: flex;
flex-direction: column;
}
.zr-support-card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.zr-support-card-icon {
width: 46px;
height: 46px;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(166, 124, 46, 0.35);
display: grid;
place-items: center;
color: var(--zr-zari);
}
.zr-support-card-icon svg { width: 24px; height: 24px; }
.zr-support-card-title {
font-size: 17px;
font-weight: 700;
margin-bottom: 3px;
}
.zr-support-card-sub {
font-size: 12.5px;
color: rgba(20, 17, 15, 0.55);
margin-bottom: 16px;
}
.zr-support-card-points {
list-style: none;
margin: 0 0 20px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.zr-support-card-points li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: rgba(20, 17, 15, 0.7);
}
.zr-support-card-points svg {
width: 16px;
height: 16px;
color: var(--zr-zari);
flex-shrink: 0;
}
.zr-support-card .zr-support-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
height: 48px;
border-radius: 999px;
background: #1FA855;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.2s var(--zr-ease);
}
.zr-support-card .zr-support-btn:hover { background: #178a45; }
.zr-support-card .zr-support-btn svg { width: 17px; height: 17px; }
.zr-support-card .zr-support-online {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(31, 168, 85, 0.1);
color: #178a45;
font-size: 11.5px;
font-weight: 700;
}
.zr-support-card .zr-support-online i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #1FA855;
animation: zrOnlinePulse 1.8s ease-in-out infinite;
}
@keyframes zrOnlinePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(31, 168, 85, 0.4); }
50% { box-shadow: 0 0 0 5px rgba(31, 168, 85, 0); }
}
/* --------------------------------------------------------------------------
Floating WhatsApp button
-------------------------------------------------------------------------- */
.zr-float-wa {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9990;
width: 58px;
height: 58px;
border-radius: 50%;
background: #1FA855;
color: #fff;
display: grid;
place-items: center;
box-shadow: 0 10px 26px rgba(31, 168, 85, 0.42);
transition: transform 0.25s var(--zr-ease);
animation: zrWaIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both,
zrWaWiggle 6s ease-in-out 4s infinite;
}
.zr-float-wa:hover { transform: scale(1.08); color: #fff; }
.zr-float-wa svg { width: 29px; height: 29px; position: relative; z-index: 2; }
.zr-float-wa-ring {
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(31, 168, 85, 0.5);
animation: zrWaPulse 2.2s ease-out infinite;
}
.zr-float-wa-ring2 { animation-delay: 1.1s; }
.zr-float-wa-tip {
position: absolute;
right: 70px;
top: 50%;
transform: translateY(-50%) translateX(8px);
background: var(--zr-ink);
color: #fff;
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
padding: 8px 14px;
border-radius: 10px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s, transform 0.25s;
}
.zr-float-wa:hover .zr-float-wa-tip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
@keyframes zrWaPulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.75); opacity: 0; }
}
@keyframes zrWaIn {
from { transform: translateY(90px) scale(0.4); opacity: 0; }
to { transform: none; opacity: 1; }
}
@keyframes zrWaWiggle {
0%, 88%, 100% { transform: rotate(0); }
90% { transform: rotate(-12deg); }
93% { transform: rotate(10deg); }
96% { transform: rotate(-6deg); }
}
@media (max-width: 767px) {
/* Mobile bottom nav ke upar. */
.zr-float-wa { bottom: 84px; right: 14px; width: 54px; height: 54px; }
.zr-float-wa svg { width: 27px; height: 27px; }
.zr-float-wa-tip { display: none; }
}
/* Cart: visible Update Cart button (v6.4.15 — auto-update removed). */
.woocommerce-cart-form button[name="update_cart"] {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--zr-paper);
color: var(--zr-ink);
border: 1.5px solid var(--zr-ink);
border-radius: 999px;
padding: 11px 26px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.woocommerce-cart-form button[name="update_cart"]:hover:not(:disabled) {
background: var(--zr-ink);
color: var(--zr-paper);
}
.woocommerce-cart-form button[name="update_cart"]:disabled {
opacity: 0.35;
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
.zr-float-wa,
.zr-float-wa-ring,
.zr-support-card .zr-support-online i { animation: none; }
}
/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.zr-marquee-track {
animation: none;
}
}
/* --------------------------------------------------------------------------
Product live badges — % OFF / added-to-cart / live viewers (v6.4.13)
-------------------------------------------------------------------------- */
.zr-livebadges {
display: flex;
flex-direction: column;
gap: 9px;
margin: 14px 0 16px;
}
.zr-lb {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
max-width: 100%;
border-radius: 12px;
padding: 9px 15px;
font-size: 14px;
line-height: 1.4;
position: relative;
overflow: hidden;
}
.zr-lb svg { width: 19px; height: 19px; flex: 0 0 19px; }
.zr-lb::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-radius: 4px 0 0 4px;
}
.zr-lb-off {
background: #fdf1ec;
color: #c0392b;
font-weight: 800;
letter-spacing: 0.04em;
}
.zr-lb-off::before { background: #c0392b; }
.zr-lb-cart { background: #eef7ef; color: #1e7a3a; }
.zr-lb-cart strong { font-weight: 800; }
.zr-lb-cart::before { background: #1e7a3a; }
.zr-lb-views { background: #f4f3f1; color: var(--zr-ink); }
.zr-lb-views::before { background: var(--zr-zari); }
.zr-viewnum {
display: inline-block;
min-width: 2ch;
text-align: center;
font-weight: 800;
transition: opacity 0.25s, transform 0.25s;
}
.zr-viewnum.is-tick {
opacity: 0;
transform: translateY(-6px);
}
/* --------------------------------------------------------------------------
Checkout — modern bilingual notices + info box (v6.4.14)
-------------------------------------------------------------------------- */
.zr-note {
display: flex;
gap: 11px;
align-items: flex-start;
background: var(--zr-paper);
border: 1px solid #eee2c8;
border-radius: 14px;
padding: 12px 14px;
margin: 0 0 14px;
box-shadow: 0 4px 16px rgba(20, 17, 15, 0.05);
max-width: 720px;
}
.zr-note--warn {
border-color: #e8c9a0;
background: linear-gradient(135deg, #fffdf7, #fdf6e9);
}
.zr-note--danger {
border-color: #e5b9be;
background: linear-gradient(135deg, #fffafa, #fbf0f1);
}
.zr-note-ic {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 10px;
display: grid;
place-items: center;
}
.zr-note--warn .zr-note-ic { background: var(--zr-zari); }
.zr-note--danger .zr-note-ic { background: var(--zr-gulaab); }
.zr-note-ic svg { width: 16px; height: 16px; }
.zr-note-t {
font-weight: 800;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin: 0 0 4px;
}
.zr-note--warn .zr-note-t { color: #7c5a1e; }
.zr-note--danger .zr-note-t { color: var(--zr-gulaab); }
.zr-note-en {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: #3a352f;
}
.zr-note-ur {
margin: 5px 0 0;
font-size: 14px;
line-height: 1.9;
color: var(--zr-ink);
direction: rtl;
text-align: right;
font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
}
/* Default WC notices on checkout — modern card look. */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error {
border: 1px solid #e9e4dc !important;
border-radius: 16px !important;
background: var(--zr-paper) !important;
color: var(--zr-ink) !important;
box-shadow: 0 6px 24px rgba(20, 17, 15, 0.05);
padding: 14px 18px !important;
}
.zr-checkoutbox {
margin-top: 18px;
background: var(--zr-mist);
border-radius: 20px;
padding: 22px;
display: grid;
gap: 20px;
}
.zr-ib-row {
display: flex;
gap: 14px;
align-items: flex-start;
}
.zr-ib-ic {
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 13px;
display: grid;
place-items: center;
}
.zr-ib-ic svg { width: 21px; height: 21px; }
.zr-checkoutbox h4 {
margin: 2px 0 6px;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--zr-ink);
}
.zr-ib-en {
margin: 0;
font-size: 13.5px;
line-height: 1.7;
color: #4a453e;
}
.zr-ib-ur {
margin: 6px 0 0;
font-size: 15px;
line-height: 2;
color: var(--zr-ink);
direction: rtl;
text-align: right;
font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
}
.zr-ib-pays {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.zr-ib-pays span {
background: var(--zr-paper);
border: 1px solid #e5e0d8;
border-radius: 999px;
padding: 5px 13px;
font-size: 12px;
font-weight: 700;
color: var(--zr-ink);
letter-spacing: 0.03em;
}
/* Address field red hint — Audionic style. WC ise blue focus-tooltip bana
deta tha (blue bubble + arrow, red text unreadable) — ab hamesha-visible
static text (v6.4.16). */
#billing_address_1_field .description {
position: static !important;
display: block !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin-top: 6px;
font-size: 12.5px;
line-height: 1.7;
color: #b3402e !important;
transform: none !important;
opacity: 1 !important;
white-space: normal;
text-align: left;
}
#billing_address_1_field .description::before,
#billing_address_1_field .description::after {
display: none !important;
}
/* Checkout form labels & optional tag — clean contrast (v6.4.16). */
.woocommerce-checkout .woocommerce-billing-fields .form-row label {
font-weight: 700;
font-size: 13px;
color: var(--zr-ink);
margin-bottom: 6px;
}
.woocommerce-checkout .form-row label .required {
color: var(--zr-gulaab);
text-decoration: none;
}
.woocommerce-checkout .form-row label .optional {
font-weight: 400;
font-size: 11.5px;
color: #8a8378;
}
/* Shipping leftovers hidden — billing = shipping. */
.woocommerce-shipping-fields,
#ship-to-different-address,
#billing_state_field,
#shipping_state_field { display: none !important; }
/* --------------------------------------------------------------------------
v6.4.17 — WA channel button, free-delivery bar, sales toast, bundle
-------------------------------------------------------------------------- */
/* Free-delivery progress bar */
.zr-shipbar {
background: linear-gradient(135deg, #fffdf7, #fdf6e9);
border: 1px solid #e8d9b8;
border-radius: 14px;
padding: 14px 18px;
margin: 0 0 18px;
}
.zr-shipbar p {
margin: 0 0 9px;
font-size: 13.5px;
color: var(--zr-ink);
}
.zr-shipbar.is-unlocked {
background: linear-gradient(135deg, #f4fbf6, #e9f7ee);
border-color: #bfe3cb;
}
.zr-shipbar-track {
height: 8px;
border-radius: 999px;
background: #eee5d0;
overflow: hidden;
}
.zr-shipbar.is-unlocked .zr-shipbar-track { background: #d3ecdb; }
.zr-shipbar-fill {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--zr-zari), #c99b45);
transition: width 0.6s var(--zr-ease);
}
.zr-shipbar.is-unlocked .zr-shipbar-fill { background: linear-gradient(90deg, #1e7a3a, #2ea356); }
/* Recent-sales toast */
.zr-toast {
position: fixed;
left: 16px;
bottom: 16px;
z-index: 9980;
display: flex;
align-items: center;
gap: 12px;
max-width: 330px;
background: var(--zr-paper);
border: 1px solid #eae5dd;
border-radius: 16px;
padding: 12px 34px 12px 12px;
box-shadow: 0 14px 40px rgba(20, 17, 15, 0.16);
opacity: 0;
transform: translateY(16px);
transition: opacity 0.35s, transform 0.35s;
pointer-events: none;
}
.zr-toast.is-in {
opacity: 1;
transform: none;
pointer-events: auto;
}
.zr-toast-img {
width: 46px;
height: 46px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.zr-toast-line {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--zr-ink);
}
.zr-toast-line a {
color: var(--zr-gulaab);
font-weight: 700;
text-decoration: none;
}
.zr-toast-time {
display: block;
margin-top: 2px;
font-size: 11px;
color: #9a938a;
}
.zr-toast-x {
position: absolute;
top: 6px;
right: 8px;
background: none;
border: none;
padding: 4px;
font-size: 16px;
line-height: 1;
color: #b5aea4;
cursor: pointer;
}
/* Mobile — compact toast (v6.4.22): chhota card, chhota font/photo,
product ka naam ek line par clamp. */
@media (max-width: 767px) {
.zr-toast {
left: 10px;
right: auto;
max-width: 240px;
bottom: 74px;
gap: 8px;
padding: 8px 26px 8px 8px;
border-radius: 12px;
}
.zr-toast-img {
width: 34px;
height: 34px;
border-radius: 8px;
}
.zr-toast-line {
font-size: 11px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zr-toast-time {
font-size: 10px;
margin-top: 1px;
}
.zr-toast-x {
top: 3px;
right: 5px;
font-size: 14px;
}
}
/* Complete the Look bundle */
.zr-bundle {
margin: 34px 0 0;
background: var(--zr-paper);
border: 1px solid var(--zr-line);
border-radius: calc(var(--zr-radius) + 4px);
padding: clamp(20px, 3vw, 32px);
}
.zr-bundle-title {
font-size: clamp(17px, 2.2vw, 22px);
margin: 0 0 18px;
}
.zr-bundle-row {
display: flex;
align-items: center;
gap: clamp(10px, 2vw, 22px);
flex-wrap: wrap;
}
.zr-bundle-item {
flex: 0 0 clamp(120px, 16vw, 168px);
display: flex;
flex-direction: column;
gap: 6px;
text-decoration: none;
}
.zr-bundle-item img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 12px;
border: 1px solid var(--zr-line);
}
.zr-bundle-item strong {
font-size: 12.5px;
line-height: 1.4;
color: var(--zr-ink);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.zr-bundle-item em {
font-style: normal;
font-size: 12.5px;
font-weight: 700;
color: var(--zr-gulaab);
}
.zr-bundle-plus {
font-size: 26px;
font-weight: 300;
color: #b5aea4;
}
.zr-bundle-cta {
flex: 1 1 220px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding-left: clamp(0px, 2vw, 18px);
}
.zr-bundle-cta p {
margin: 0;
font-size: 13.5px;
color: var(--zr-ink);
}
.zr-bundle-total {
font-size: 12.5px;
color: #8a8378;
}
.zr-bundle-btn {
margin-top: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--zr-ink);
color: var(--zr-paper);
border-radius: 999px;
padding: 12px 28px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
}
.zr-bundle-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(20, 17, 15, 0.22);
color: var(--zr-paper);
}
@media (max-width: 640px) {
.zr-bundle-row { align-items: flex-start; }
.zr-bundle-item { flex-basis: calc(50% - 30px); }
.zr-bundle-cta { padding-left: 0; padding-top: 8px; }
}
/* --------------------------------------------------------------------------
v6.4.18 — Recently Viewed + WA channel mini pill
-------------------------------------------------------------------------- */
.zr-recent { margin-top: 10px; }
.zr-recent-title {
font-size: clamp(17px, 2.2vw, 22px);
margin: 0 0 18px;
}
/* Chhota "Join Channel" pill — share icons ke sath */
.zr-wa-channel-mini {
display: inline-flex;
align-items: center;
gap: 7px;
margin-left: 6px;
padding: 8px 16px;
border-radius: 999px;
background: #1FA855;
color: #fff;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 4px 14px rgba(31, 168, 85, 0.32);
transition: transform 0.2s, box-shadow 0.2s;
}
.zr-wa-channel-mini:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(31, 168, 85, 0.42);
color: #fff;
}
.zr-wa-channel-mini svg { width: 15px; height: 15px; }
/* --------------------------------------------------------------------------
v6.4.19 — share-row channel pill fix, FiboSearch dropdown polish
-------------------------------------------------------------------------- */
/* Share row ki circle-icon styles pill par override (v6.4.18 bug fix). */
.zr-share a.zr-wa-channel-mini {
width: auto;
height: auto;
border: none;
border-radius: 999px;
background: #1FA855;
color: #fff;
padding: 9px 16px;
gap: 7px;
white-space: nowrap;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 4px 14px rgba(31, 168, 85, 0.32);
}
.zr-share a.zr-wa-channel-mini:hover {
background: #178a45;
color: #fff;
transform: translateY(-2px);
}
.zr-share a.zr-wa-channel-mini svg {
width: 15px;
height: 15px;
fill: #fff;
}
.zr-share a.zr-wa-channel-mini span {
display: inline;
color: #fff;
}
/* FiboSearch dropdown — rounded card look; position JS se align hoti hai. */
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-wrapp {
border: 1px solid var(--zr-line) !important;
border-radius: 16px !important;
box-shadow: 0 18px 50px rgba(20, 17, 15, 0.14) !important;
overflow: hidden;
}
/* ==========================================================================
v6.4.23 — PRO MOBILE PASS (90% traffic mobile hai)
========================================================================== */
/* --- Global overflow hardening: koi bhi wide child page ko right taraf
cut nahi kar sakta. clip (hidden nahi) — sticky header salamat. --- */
html,
body {
overflow-x: clip;
}
.zr-content,
.zr-shell {
min-width: 0;
}
.zr-shell {
max-width: min(var(--zr-shell), 100%);
}
img,
svg,
video,
iframe {
max-width: 100%;
}
img {
height: auto;
}
/* Product page grid ke har child par min-width guard — kisi bhi unbreakable
content par column viewport se wide nahi ho sakta. */
.woocommerce div.product > *,
.woocommerce div.product div.summary > *,
.woocommerce div.product div.images > * {
min-width: 0;
max-width: 100%;
}
/* --- Single product — phone polish --- */
@media (max-width: 767px) {
.woocommerce div.product {
gap: 18px;
}
.woocommerce div.product .product_title {
font-size: 21px;
line-height: 1.3;
}
.woocommerce div.product p.price {
font-size: 19px;
}
.woocommerce div.product div.summary {
padding-inline: 2px;
}
/* Qty + Add to Cart — ek compact row */
.woocommerce div.product form.cart {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
}
.woocommerce div.product form.cart .quantity {
flex: 0 0 84px;
}
.woocommerce div.product form.cart .quantity .qty {
width: 84px;
height: 100%;
min-height: 48px;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
flex: 1 1 auto;
min-height: 48px;
font-size: 12.5px;
padding-inline: 14px;
}
.woocommerce div.product form.cart > *:not(.quantity):not(.single_add_to_cart_button) {
flex: 1 1 100%;
}
.zr-livebadges {
gap: 7px;
margin: 10px 0 12px;
}
.zr-lb {
font-size: 12.5px;
padding: 8px 12px;
gap: 8px;
}
.zr-lb svg {
width: 16px;
height: 16px;
flex-basis: 16px;
}
.zr-tstrip {
gap: 8px;
margin-top: 12px;
}
.zr-share {
flex-wrap: wrap;
gap: 10px;
}
}
/* --- Product tabs — one-line swipeable bar (2-line wrap khatam) --- */
@media (max-width: 767px) {
.woocommerce div.product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 22px;
padding-bottom: 2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
flex: 0 0 auto;
white-space: nowrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-size: 12px;
letter-spacing: 0.08em;
}
.woocommerce div.product .woocommerce-tabs .panel#tab-description {
padding: 18px 16px !important;
}
}
/* --- Complete the Look — phone compact --- */
@media (max-width: 640px) {
.zr-bundle {
padding: 16px 14px;
margin-top: 24px;
}
.zr-bundle-title {
font-size: 16px;
margin-bottom: 12px;
}
.zr-bundle-row {
gap: 8px;
align-items: flex-start;
}
.zr-bundle-item {
flex: 0 0 calc(50% - 18px);
}
.zr-bundle-item img {
border-radius: 10px;
}
.zr-bundle-item strong {
font-size: 11.5px;
}
.zr-bundle-item em {
font-size: 12px;
}
.zr-bundle-plus {
font-size: 18px;
align-self: center;
}
.zr-bundle-cta {
flex: 1 1 100%;
padding: 10px 0 0;
gap: 4px;
}
.zr-bundle-cta p {
font-size: 12.5px;
}
.zr-bundle-total {
font-size: 11.5px;
}
.zr-bundle-btn {
width: 100%;
margin-top: 8px;
padding: 13px 20px;
}
}
/* --- Recently Viewed / You May Also Like — phone spacing --- */
@media (max-width: 640px) {
.zr-recent-title {
font-size: 16px;
margin-bottom: 12px;
}
}
/* ==========================================================================
v6.4.24 — buy row, qty, vibrate button, compact notes (mobile)
========================================================================== */
/* Add to Cart — halki left-right vibrate (attention nudge), dono screens. */
@keyframes zrBuzz {
0%, 86%, 100% { transform: translateX(0); }
88% { transform: translateX(-3px); }
90% { transform: translateX(3px); }
92% { transform: translateX(-2px); }
94% { transform: translateX(2px); }
96% { transform: translateX(-1px); }
}
.woocommerce div.product form.cart .single_add_to_cart_button {
animation: zrBuzz 3.6s ease-in-out 2s infinite;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:active {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.woocommerce div.product form.cart .single_add_to_cart_button { animation: none; }
}
/* --- Mobile: summary reorder — buttons price ke foran neeche --- */
@media (max-width: 767px) {
.woocommerce div.product div.summary {
display: flex;
flex-direction: column;
}
.woocommerce div.product div.summary > * { order: 30; }
.woocommerce div.product div.summary > .product_title { order: 1; }
.woocommerce div.product div.summary > .price,
.woocommerce div.product div.summary > p.price { order: 2; }
.woocommerce div.product div.summary > form.cart { order: 3; }
.woocommerce div.product div.summary > .zr-wa-btn { order: 4; }
.woocommerce div.product div.summary > .zr-livebadges { order: 5; }
.woocommerce div.product div.summary > .woocommerce-product-details__short-description { order: 6; }
.woocommerce div.product div.summary > .zr-tstrip { order: 25; }
.woocommerce div.product div.summary > .product_meta { order: 26; }
.woocommerce div.product div.summary > .zr-share { order: 27; }
/* Buy row: [qty chhota] [ADD TO CART] [WHATSAPP] — JS WA ko form mein le aata hai. */
.woocommerce div.product form.cart.zr-buyrow {
display: flex;
flex-wrap: nowrap;
gap: 8px;
align-items: stretch;
margin: 10px 0 4px;
}
/* Qty — chhota compact pill (bara circle khatam). */
.woocommerce div.product form.cart .quantity {
flex: 0 0 58px;
}
.woocommerce div.product form.cart .quantity .qty {
width: 58px !important;
height: 46px !important;
min-height: 46px;
padding: 0 !important;
border-radius: 12px !important;
font-size: 14px;
text-align: center;
}
.woocommerce div.product form.cart.zr-buyrow .single_add_to_cart_button {
flex: 1 1 0;
min-height: 46px;
font-size: 10.5px;
letter-spacing: 0.06em;
padding: 0 8px;
white-space: nowrap;
}
.woocommerce div.product form.cart.zr-buyrow .zr-wa-btn {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 46px;
margin: 0;
padding: 0 8px;
font-size: 10.5px;
letter-spacing: 0.06em;
white-space: nowrap;
border-radius: 999px;
}
.woocommerce div.product form.cart.zr-buyrow .zr-wa-btn svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
/* Warnings — mobile aur bhi compact */
.zr-note {
padding: 10px 12px;
gap: 9px;
border-radius: 12px;
margin-bottom: 12px;
}
.zr-note-ic { flex-basis: 28px; width: 28px; height: 28px; border-radius: 9px; }
.zr-note-ic svg { width: 14px; height: 14px; }
.zr-note-t { font-size: 10px; }
.zr-note-en { font-size: 12.5px; }
.zr-note-ur { font-size: 13px; line-height: 1.85; }
}
/* ==========================================================================
v6.4.27 — Budget Buys tiles mobile size + Fibo hard fallback
========================================================================== */
/* Inline style="--zr-cols:3" media query ke var ko hara deta tha —
grid-template-columns seedha !important se override. */
@media (max-width: 991px) {
.zr-banners {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px;
}
}
@media (max-width: 640px) {
.zr-banners {
grid-template-columns: 1fr !important;
gap: 14px;
}
.zr-banner img {
width: 100%;
}
}
/* Budget Buys slider (v6.4.28) */
.zr-budget-rail {
--zr-cols: 3;
}
.zr-budget-tile {
position: relative;
display: block;
border-radius: 16px;
overflow: hidden;
scroll-snap-align: start;
}
.zr-budget-tile img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
transition: transform 0.4s var(--zr-ease);
}
.zr-budget-tile:hover img {
transform: scale(1.04);
}
.zr-budget-cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 24px 16px 12px;
background: linear-gradient(180deg, transparent, rgba(20, 17, 15, 0.55));
color: #fff;
display: flex;
flex-direction: column;
gap: 1px;
}
.zr-budget-cap strong {
font-size: 14px;
letter-spacing: 0.02em;
}
.zr-budget-cap em {
font-style: normal;
font-size: 11.5px;
opacity: 0.85;
}
@media (max-width: 991px) {
.zr-budget-rail {
grid-auto-columns: calc((100% - 16px) / 2) !important;
}
}
@media (max-width: 640px) {
/* Phone — chhoti tiles, ~1.6 nazar aati hain, swipe se aage */
.zr-budget-rail {
grid-auto-columns: calc((100% - 11px) / 1.6) !important;
}
.zr-budget-cap strong { font-size: 12.5px; }
.zr-budget-cap em { font-size: 10.5px; }
}
/* AJAX search — drawer suggest + price polish (v6.4.30) */
.zr-suggest-price del {
color: #b5aea4;
font-weight: 400;
margin-right: 4px;
}
.zr-suggest-price strong {
color: var(--zr-gulaab);
}
.zr-suggest--drawer {
position: static;
box-shadow: none;
border: 0;
border-top: 1px solid var(--zr-line);
border-radius: 0;
margin-top: 12px;
max-height: 62vh;
overflow-y: auto;
display: none;
}
.zr-suggest--drawer.is-open {
display: block;
}
/* Checkout tweaks (v6.4.32) */
/* Infobox form-grid mein left column ke andar hi rahe (billing ke neeche). */
form.checkout .zr-checkoutbox {
grid-column: 1;
}
/* Coupon block ab page ke aakhir mein — upar se thora saans. */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
margin-top: 26px;
}
@media (max-width: 900px) {
form.checkout .zr-checkoutbox {
grid-column: auto;
}
}
/* ==========================================================================
v6.4.33 — banner no-crop, coupon open box, homepage FAQ+Support
========================================================================== */
/* Full-width banner: tile wali 4/5 crop class share karta tha —
image ab apne asal ratio mein poori, koi crop / grey box nahi. */
.zr-banner-sec .zr-banner {
aspect-ratio: auto;
height: auto;
background: none;
overflow: hidden;
}
.zr-banner-sec .zr-banner img {
position: static;
width: 100%;
height: auto;
object-fit: unset;
display: block;
border-radius: var(--zr-radius);
}
/* Coupon — hamesha khula box */
.zr-coupon-open {
max-width: 640px;
margin: 26px auto 0;
background: var(--zr-paper);
border: 1px solid var(--zr-line);
border-radius: 16px;
padding: 18px 20px;
}
.zr-coupon-label {
display: block;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
margin-bottom: 10px;
color: var(--zr-ink);
}
.zr-coupon-row {
display: flex;
gap: 10px;
}
.zr-coupon-row input {
flex: 1 1 auto;
min-width: 0;
height: 46px;
border: 1px solid #ddd6cb;
border-radius: 999px;
padding: 0 18px;
}
.zr-coupon-row .button {
flex: 0 0 auto;
height: 46px;
border-radius: 999px;
padding: 0 24px;
background: var(--zr-ink);
color: var(--zr-paper);
border: none;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
}
@media (max-width: 560px) {
.zr-coupon-row {
flex-direction: column;
}
.zr-coupon-row .button {
height: 44px;
}
}
/* Homepage FAQ + Support */
.zr-home-faq {
background: linear-gradient(180deg, #FBF7F0, #F6F1E7);
}
.zr-home-faq .zr-faq {
background: transparent;
}
.zr-hfaq-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: clamp(24px, 4vw, 56px);
align-items: start;
}
.zr-hfaq-card {
background: var(--zr-paper);
border: 1px solid #eee5d2;
box-shadow: 0 12px 34px rgba(20, 17, 15, 0.06);
border-radius: calc(var(--zr-radius) + 4px);
padding: clamp(22px, 3vw, 32px);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
position: sticky;
top: 110px;
}
.zr-hfaq-art {
width: 96px;
height: 96px;
margin-bottom: 4px;
}
.zr-hfaq-art svg {
width: 100%;
height: 100%;
}
.zr-hfaq-title {
font-size: 19px;
font-weight: 800;
color: var(--zr-ink);
}
.zr-hfaq-sub {
font-size: 13px;
color: #7a746c;
margin-bottom: 6px;
}
@media (max-width: 900px) {
.zr-hfaq-grid {
grid-template-columns: 1fr;
}
.zr-hfaq-card {
position: static;
}
}
/* ==========================================================================
v6.4.35 — Cookie consent banner + ZA image preloader
========================================================================== */
.zr-consent {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
z-index: 99998;
display: flex;
justify-content: center;
pointer-events: none;
}
.zr-consent-card {
pointer-events: auto;
width: 100%;
max-width: 680px;
background: var(--zr-paper);
border: 1px solid var(--zr-line);
border-radius: 18px;
box-shadow: 0 24px 70px rgba(20, 17, 15, 0.22);
padding: 20px 22px;
transform: translateY(24px);
opacity: 0;
transition: transform 0.3s var(--zr-ease), opacity 0.3s var(--zr-ease);
}
.zr-consent.is-in .zr-consent-card {
transform: translateY(0);
opacity: 1;
}
.zr-consent-title {
display: block;
font-size: 15px;
font-weight: 800;
color: var(--zr-ink);
margin-bottom: 6px;
}
.zr-consent-text {
margin: 0 0 14px;
font-size: 13px;
line-height: 1.6;
color: #6f695f;
}
.zr-consent-text a {
color: var(--zr-gold, #A67C2E);
font-weight: 700;
text-decoration: underline;
}
.zr-consent-prefs {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
padding: 12px;
background: var(--zr-mist);
border-radius: 12px;
}
.zr-consent-opt {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 12.5px;
color: #4a453e;
cursor: pointer;
}
.zr-consent-opt input {
margin-top: 2px;
accent-color: var(--zr-ink);
}
.zr-consent-opt.is-locked {
opacity: 0.7;
cursor: default;
}
.zr-consent-actions {
display: flex;
flex-wrap: wrap;
gap: 9px;
align-items: center;
}
.zr-consent-actions button {
border: none;
cursor: pointer;
border-radius: 999px;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 11px 20px;
transition: transform 0.15s, opacity 0.15s;
}
.zr-consent-actions button:hover {
transform: translateY(-1px);
}
.zr-consent-accept {
background: var(--zr-ink);
color: var(--zr-paper);
}
.zr-consent-decline {
background: transparent;
color: #6f695f;
border: 1px solid var(--zr-line) !important;
}
.zr-consent-manage,
.zr-consent-save {
background: var(--zr-mist);
color: var(--zr-ink);
}
@media (max-width: 560px) {
.zr-consent {
left: 10px;
right: 10px;
bottom: 10px;
}
.zr-consent-card {
padding: 16px;
}
.zr-consent-actions button {
flex: 1 1 auto;
padding: 12px 10px;
}
}
/* --- ZA image preloader --- */
.zr-imgph {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
background: #ece9e4;
overflow: hidden;
border-radius: inherit;
}
.zr-imgph::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
transform: translateX(-100%);
animation: zrShimmer 1.4s ease-in-out infinite;
}
.zr-imgph svg {
width: 34%;
max-width: 74px;
opacity: 0.9;
}
@keyframes zrShimmer {
to { transform: translateX(100%); }
}
.zr-imgfade {
opacity: 0;
}
.zr-imgfade.is-loaded {
opacity: 1;
transition: opacity 0.35s var(--zr-ease);
}
@media (prefers-reduced-motion: reduce) {
.zr-imgph::after { animation: none; }
}
/* ==========================================================================
v6.4.36 — buy layout, badges tiles, trust band redesign, spacing, fixes
========================================================================== */
/* CRITICAL: consent wrapper hidden hone par SACH MEIN hide ho —
display:flex hidden attribute ko override kar ke invisible card se
mobile bottom bar ke taps block kar raha tha. */
.zr-consent[hidden] {
display: none !important;
}
/* --- Mobile: price + qty ek row --- */
@media (max-width: 767px) {
.zr-pricerow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
order: 2;
margin: 4px 0 6px;
}
.zr-pricerow > .price,
.zr-pricerow > p.price {
margin: 0 !important;
}
.zr-pricerow .quantity {
flex: 0 0 64px;
}
.zr-pricerow .quantity .qty {
width: 64px !important;
height: 44px !important;
min-height: 44px;
border-radius: 12px !important;
text-align: center;
padding: 0 !important;
}
.woocommerce div.product div.summary > .zr-pricerow { order: 2; }
}
/* --- Live badges: 3 modern tiles ek row (dono screens) --- */
.zr-livebadges {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 14px 0;
}
.zr-lb {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
gap: 4px;
padding: 14px 10px 12px;
border-radius: 14px;
border: 1px solid;
font-size: 12px;
line-height: 1.35;
}
.zr-lb svg {
width: 20px;
height: 20px;
margin-bottom: 2px;
flex: none;
}
.zr-lb strong {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.01em;
}
.zr-lb span {
font-size: 11px;
color: inherit;
opacity: 0.85;
}
.zr-lb-off {
background: #FBEFEA;
border-color: #F0D5CB;
color: #A93E2C;
}
.zr-lb-cart {
background: #EFF7F0;
border-color: #D5E8D8;
color: #1E7A3E;
}
.zr-lb-views {
background: #F7F4EE;
border-color: #E8E0CF;
color: #7A5E1F;
}
@media (max-width: 480px) {
.zr-livebadges { gap: 7px; }
.zr-lb { padding: 11px 6px 10px; border-radius: 12px; }
.zr-lb strong { font-size: 14px; }
.zr-lb span { font-size: 9.5px; }
.zr-lb svg { width: 17px; height: 17px; }
}
/* --- Trust band redesign: premium modern --- */
.zr-trustband {
background: linear-gradient(160deg, #FBF8F2, #F3EEE4);
border: 1px solid #EDE5D4;
border-radius: 22px;
padding: clamp(28px, 4vw, 52px) clamp(18px, 3vw, 44px);
box-shadow: 0 20px 50px rgba(20, 17, 15, 0.06);
}
.zr-trustband-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 2vw, 24px);
background: #fff;
border: 1px solid #F0EADD;
border-radius: 18px;
padding: clamp(18px, 2.5vw, 30px) clamp(10px, 2vw, 24px);
box-shadow: 0 10px 30px rgba(20, 17, 15, 0.05);
}
.zr-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
}
.zr-stat-ic {
width: 46px;
height: 46px;
border-radius: 14px;
display: grid;
place-items: center;
background: linear-gradient(140deg, #C9A45C, #A67C2E);
color: #fff;
box-shadow: 0 8px 18px rgba(166, 124, 46, 0.35);
}
.zr-stat-ic svg {
width: 22px;
height: 22px;
}
.zr-stat-num {
font-size: clamp(22px, 3vw, 34px);
font-weight: 800;
color: var(--zr-ink);
letter-spacing: -0.01em;
}
.zr-stat-label {
font-size: clamp(10.5px, 1.2vw, 13px);
color: #7a746c;
letter-spacing: 0.04em;
}
.zr-trustband-points {
list-style: none;
margin: clamp(16px, 2.5vw, 26px) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.zr-trustband-points li {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid #EDE5D4;
border-radius: 999px;
padding: 9px 16px;
font-size: 12.5px;
font-weight: 700;
color: #4a453e;
}
.zr-point-ic {
color: #A67C2E;
display: inline-flex;
}
.zr-point-ic svg {
width: 15px;
height: 15px;
}
@media (max-width: 640px) {
.zr-trustband { border-radius: 16px; }
.zr-stat-ic { width: 36px; height: 36px; border-radius: 11px; }
.zr-stat-ic svg { width: 17px; height: 17px; }
.zr-stat-num { font-size: 18px; }
.zr-stat-label { font-size: 9.5px; }
.zr-trustband-points {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.zr-trustband-points li {
justify-content: flex-start;
border-radius: 12px;
padding: 10px 12px;
font-size: 11.5px;
}
}
/* --- Section spacing normalize (product page) --- */
.woocommerce div.product .related.products,
.woocommerce div.product .zr-recent,
.woocommerce div.product .zr-trustband,
.woocommerce div.product .zr-bundle,
.woocommerce div.product .woocommerce-tabs {
margin-top: clamp(26px, 3.5vw, 44px);
margin-bottom: 0;
}
.zr-recent.zr-section,
.woocommerce div.product .related.products {
padding-block: 0;
}
.zr-recent { margin-top: clamp(26px, 3.5vw, 44px); }
/* --- Gallery thumbnails tight --- */
.woocommerce div.product div.images .flex-control-thumbs {
margin: 8px 0 0;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.woocommerce div.product div.images .flex-control-thumbs li {
margin: 0 !important;
padding: 0;
width: 72px;
}
.woocommerce div.product div.images .flex-control-thumbs img {
border-radius: 12px;
border: 1.5px solid transparent;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
border-color: var(--zr-ink);
}
/* --- Sale badge redesign --- */
.woocommerce span.onsale {
position: absolute;
top: 14px;
left: 14px;
z-index: 5;
min-width: 0;
min-height: 0;
width: auto;
height: auto;
line-height: 1;
border-radius: 999px;
padding: 7px 14px;
background: var(--zr-gulaab, #7D2A35);
color: #fff;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: 0 6px 16px rgba(125, 42, 53, 0.35);
}
/* ==========================================================================
v6.4.37 — mobile header, tiles size, bundle polish, tabs, no-select
========================================================================== */
/* --- Mobile header: sirf hamburger + centered logo + account --- */
@media (max-width: 767px) {
.zr-actions .zr-search-toggle,
.zr-actions .zr-wishlist-link,
.zr-actions .zr-cart-link {
display: none !important;
}
.zr-header-bar {
position: relative;
}
.zr-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.zr-actions {
margin-left: auto;
}
}
/* --- Live badge tiles: wide + compact --- */
.zr-livebadges {
gap: 8px;
}
.zr-lb {
padding: 10px 8px 9px;
gap: 2px;
width: 100%;
}
.zr-lb svg {
width: 18px;
height: 18px;
margin-bottom: 1px;
}
.zr-lb strong {
font-size: 15px;
}
/* --- Complete the Look: modern card + vibrate CTA --- */
.zr-bundle {
background: linear-gradient(155deg, #FBF8F1, #F5EFE3);
border: 1px solid #ECE3D0;
box-shadow: 0 14px 40px rgba(20, 17, 15, 0.06);
}
.zr-bundle-btn {
animation: zrBuzz 4.2s ease-in-out 2.6s infinite;
}
.zr-bundle-btn:hover {
animation: none;
}
@media (prefers-reduced-motion: reduce) {
.zr-bundle-btn { animation: none; }
}
/* --- Description tab: box khatam, baqi tabs jaisa plain --- */
.woocommerce div.product .woocommerce-tabs .panel#tab-description {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
@media (max-width: 767px) {
.woocommerce div.product .woocommerce-tabs .panel#tab-description {
padding: 0 !important;
}
}
/* --- Images: selection + drag ghost band (slider samet, poori site) --- */
.zr-site img,
.maati-slider img,
.zr-banner img,
.zr-card img {
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
}
/* Copy button tick state */
.zr-copy-link.is-copied {
background: #1FA855 !important;
border-color: #1FA855 !important;
color: #fff !important;
}
/* Photo/Logo upload box (v6.4.38) */
.zr-upload-box {
flex: 1 1 100%;
display: flex;
flex-direction: column;
gap: 8px;
border: 1.5px dashed #d8d0c2;
border-radius: 14px;
padding: 16px 18px;
margin: 6px 0 10px;
background: #FBF9F5;
}
.zr-upload-title {
font-size: 13.5px;
font-weight: 800;
color: var(--zr-ink);
}
.zr-upload-box input[type="file"] {
font-size: 12.5px;
}
.zr-upload-hint {
font-size: 12px;
color: #8a8378;
line-height: 1.55;
}
@media (max-width: 767px) {
.woocommerce div.product div.summary > form.cart .zr-upload-box {
order: 10;
}
}
/* ==========================================================================
v6.4.40 — WPCode migration frontend styles
========================================================================== */
/* Pages ka title hide (S10) */
body.page:not(.post-type-archive-product) .zr-page-title { display: none; }
/* Menu badges (S04) */
li.zr-tag-hot > a::after,
li.zr-tag-new > a::after,
li.zr-tag-popular > a::after {
display: inline-block;
margin-left: 7px;
padding: 2.5px 7px;
border-radius: 999px;
background: #E02424;
color: #fff;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.4;
vertical-align: middle;
transform: translateY(-1px);
animation: zrTagPulse 2.2s ease-in-out infinite;
}
li.zr-tag-hot > a::after { content: "HOT"; }
li.zr-tag-new > a::after { content: "NEW"; }
li.zr-tag-popular > a::after { content: "POPULAR"; }
@keyframes zrTagPulse {
0%, 100% { transform: translateY(-1px) scale(1); box-shadow: 0 0 0 0 rgba(224, 36, 36, 0.35); }
50% { transform: translateY(-1px) scale(1.05); box-shadow: 0 0 0 4px rgba(224, 36, 36, 0); }
}
@media (prefers-reduced-motion: reduce) {
li.zr-tag-hot > a::after, li.zr-tag-new > a::after, li.zr-tag-popular > a::after { animation: none; }
}
/* Preloader (S13) */
#zr-preloader {
position: fixed;
inset: 0;
background: #fff;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.45s ease, visibility 0.45s ease;
}
#zr-preloader.is-done { opacity: 0; visibility: hidden; }
.zr-preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.zr-preloader-ring {
width: 46px;
height: 46px;
border-radius: 50%;
border: 2.5px solid rgba(20, 17, 15, 0.12);
border-top-color: #A67C2E;
animation: zrspin 0.8s linear infinite;
}
.zr-preloader-brand { font-size: 13px; font-weight: 700; letter-spacing: 0.35em; color: #14110F; }
@keyframes zrspin { to { transform: rotate(360deg); } }
/* My Account hero + tiles (S01) */
.zr-acc-hero {
display: flex;
align-items: center;
gap: 16px;
background: linear-gradient(140deg, #1c1815, #14110F);
color: #fff;
border-radius: 18px;
padding: 22px 24px;
margin-bottom: 18px;
}
.zr-acc-avatar {
width: 52px;
height: 52px;
flex: none;
border-radius: 50%;
background: linear-gradient(140deg, #C9A45C, #A67C2E);
display: grid;
place-items: center;
font-size: 22px;
font-weight: 800;
color: #fff;
}
.zr-acc-hero strong { display: block; font-size: 17px; margin-bottom: 3px; }
.zr-acc-hero span { font-size: 12.5px; opacity: 0.75; }
.zr-acc-tiles {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 22px;
}
.zr-acc-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
border: 1px solid var(--zr-line);
border-radius: 14px;
padding: 18px 10px;
text-decoration: none;
color: var(--zr-ink);
font-size: 12.5px;
font-weight: 700;
transition: transform 0.2s, box-shadow 0.2s;
background: var(--zr-paper);
}
.zr-acc-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 17, 15, 0.1); }
.zr-acc-tile svg { width: 22px; height: 22px; color: #A67C2E; }
@media (max-width: 640px) {
.zr-acc-tiles { grid-template-columns: 1fr 1fr; }
}
/* Price on request (S02) */
.zr-por { color: #7a746c; font-weight: 700; }
.zr-por-btn { background: #1FA855 !important; color: #fff !important; border: none !important; }
.zr-por-box {
border: 1.5px dashed #b8dcc4;
background: #f2faf5;
border-radius: 14px;
padding: 16px 18px;
margin: 12px 0;
}
.zr-por-box p { margin: 0 0 12px; font-size: 13px; color: #3c6b4c; }
.zr-por-cta {
display: inline-flex;
align-items: center;
gap: 9px;
background: #1FA855;
color: #fff !important;
border-radius: 999px;
padding: 13px 24px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 8px 20px rgba(31, 168, 85, 0.32);
}
/* Custom Order wizard (S06) */
.zr-cob { max-width: 640px; margin: 0 auto; padding: 30px 20px 60px; color: var(--zr-ink); }
.zr-cob-progress { display: flex; justify-content: center; gap: 28px; margin-bottom: 36px; }
.zr-cob-dot { width: 28px; height: 28px; border-radius: 50%; background: #F2F0ED; color: rgba(20,17,15,.4); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; position: relative; }
.zr-cob-dot em { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; white-space: nowrap; color: rgba(20,17,15,.45); }
.zr-cob-dot.is-active, .zr-cob-dot.is-done { background: #14110F; color: #fff; }
.zr-cob-step { display: none; }
.zr-cob-step.is-active { display: block; }
.zr-cob-step h2 { font-size: 19px; font-weight: 700; text-align: center; margin: 0 0 22px; }
.zr-cob-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
.zr-cob-type input { position: absolute; opacity: 0; width: 0; height: 0; }
.zr-cob-type-card { display: flex; flex-direction: column; gap: 10px; border: 1.5px solid rgba(20,17,15,.12); border-radius: 14px; padding: 10px; cursor: pointer; text-align: center; }
.zr-cob-type-card img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; }
.zr-cob-type-card strong { font-size: 13px; }
.zr-cob-type-card span { font-size: 11.5px; color: rgba(20,17,15,.5); }
.zr-cob-type input:checked + .zr-cob-type-card { border-color: #A67C2E; background: rgba(166,124,46,.06); }
.zr-cob-upload { border: 1.5px dashed rgba(20,17,15,.2); border-radius: 16px; padding: 36px 20px; text-align: center; cursor: pointer; margin-bottom: 24px; }
.zr-cob-upload-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(20,17,15,.5); font-size: 13px; }
.zr-cob-upload-empty svg { width: 30px; height: 30px; color: #A67C2E; }
.zr-cob-preview { max-width: 100%; max-height: 220px; border-radius: 10px; }
.zr-cob-qty { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.zr-cob-qty button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(20,17,15,.15); background: #fff; font-size: 18px; cursor: pointer; }
.zr-cob-qty input { width: 70px; height: 40px; text-align: center; border: 1px solid rgba(20,17,15,.15); border-radius: 10px; font-size: 15px; }
.zr-cob-line-total { text-align: center; font-size: 13px; color: rgba(20,17,15,.55); margin-bottom: 20px; }
.zr-cob textarea { width: 100%; border: 1px solid rgba(20,17,15,.15); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 14px; box-sizing: border-box; margin-bottom: 18px; }
.zr-cob-summary { border: 1px solid rgba(20,17,15,.1); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: rgba(20,17,15,.65); margin-bottom: 20px; line-height: 1.8; }
.zr-cob-actions { display: flex; gap: 10px; }
.zr-cob-actions button, .zr-cob-next { flex: 1; height: 48px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; border: none; }
.zr-cob-next, .zr-cob-submit { background: #14110F; color: #fff; }
.zr-cob-next:disabled { opacity: .35; cursor: not-allowed; }
.zr-cob-back { background: #fff; border: 1.5px solid #14110F !important; color: #14110F; }
.zr-cob-error { color: #8C2F39; font-size: 13px; text-align: center; margin-top: 14px; }
@media (max-width: 480px) { .zr-cob-types { grid-template-columns: repeat(2, 1fr); } }
/* Danger note variant */
.zr-note--danger { border-color: #F0D5CB; }
.zr-note--danger .zr-note-ic { background: #FBEFEA; color: #A93E2C; }
/* ==========================================================================
v6.4.41 — Description tab content spacing (box gaya, saans wapas)
========================================================================== */
.woocommerce div.product .woocommerce-tabs #tab-description p {
margin: 0 0 14px;
line-height: 1.75;
}
.woocommerce div.product .woocommerce-tabs #tab-description ul,
.woocommerce div.product .woocommerce-tabs #tab-description ol {
margin: 0 0 16px;
padding-left: 20px;
}
.woocommerce div.product .woocommerce-tabs #tab-description li {
margin-bottom: 7px;
line-height: 1.7;
}
.woocommerce div.product .woocommerce-tabs #tab-description h2,
.woocommerce div.product .woocommerce-tabs #tab-description h3,
.woocommerce div.product .woocommerce-tabs #tab-description h4 {
margin: 22px 0 10px;
}
.woocommerce div.product .woocommerce-tabs #tab-description > *:last-child {
margin-bottom: 0;
}
/* ==========================================================================
v6.4.42 — search related + rails snap (2-card categories feel)
========================================================================== */
.zr-suggest-label {
display: block;
padding: 10px 14px 4px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #A67C2E;
}
/* Product rails — categories jaisa snap slide */
.zr-products-section .zr-rail {
scroll-snap-type: x proximity;
scroll-padding-left: 2px;
}
.zr-products-section .zr-rail > * {
scroll-snap-align: start;
}
@media (max-width: 767px) {
.zr-products-section .zr-rail {
--zr-cols: 2;
scroll-snap-type: x mandatory;
}
}
/* ==========================================================================
v6.4.43 — account dashboard, trending, reels, search polish
========================================================================== */
/* WC ka default dashboard text hide (hamara hero hai) */
body.zr-acc-dash .woocommerce-MyAccount-content > p:nth-of-type(1),
body.zr-acc-dash .woocommerce-MyAccount-content > p:nth-of-type(2) {
display: none;
}
/* Account nav — icon pills */
.woocommerce-MyAccount-navigation { margin-bottom: 24px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li::before { display: none !important; }
.woocommerce-MyAccount-navigation li a {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 16px;
border-radius: 14px;
background: #fff;
border: 1px solid #eceae6;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--zr-ink);
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.woocommerce-MyAccount-navigation li a:hover { transform: translateX(4px); box-shadow: 0 8px 22px rgba(20,17,15,0.08); border-color: #e0d6c4; }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--zr-ink); color: #fff; border-color: var(--zr-ink); }
.zr-nav-ic { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--zr-ink); }
.zr-nav-ic svg { width: 16px; height: 16px; }
.zr-nav-ic--orders { background: #A67C2E; }
.zr-nav-ic--downloads { background: #6B4FA1; }
.zr-nav-ic--edit-address { background: #2F6B4F; }
.zr-nav-ic--edit-account { background: #3C5A8C; }
.zr-nav-ic--customer-logout { background: #8C2F39; }
.woocommerce-MyAccount-navigation li.is-active a .zr-nav-ic { background: rgba(255,255,255,0.16); }
/* Avatar upload + stats */
.zr-acc-avatar-form { flex: none; }
.zr-acc-avatar { position: relative; cursor: pointer; overflow: hidden; }
.zr-acc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.zr-acc-cam {
position: absolute;
right: -2px;
bottom: -2px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
color: var(--zr-ink);
display: grid;
place-items: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.zr-acc-cam svg { width: 11px; height: 11px; }
.zr-acc-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 18px;
}
.zr-acc-stats > div {
background: #fff;
border: 1px solid var(--zr-line);
border-radius: 14px;
padding: 16px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
text-align: center;
}
.zr-acc-stats strong { font-size: clamp(17px, 2.4vw, 24px); font-weight: 800; color: var(--zr-ink); }
.zr-acc-stats span { font-size: 11px; color: #8a8378; letter-spacing: 0.04em; }
/* Trending chips */
.zr-trend { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px 14px; }
.zr-trend-chip {
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--zr-line);
border-radius: 999px;
padding: 7px 13px;
font-size: 12.5px;
font-weight: 600;
color: var(--zr-ink);
text-decoration: none;
background: #fff;
transition: border-color 0.15s, background 0.15s;
}
.zr-trend-chip:hover { border-color: #C9A45C; background: #FBF7F0; }
/* Reels rail */
.zr-reels { --zr-cols: 4; }
.zr-reel {
position: relative;
border-radius: 16px;
overflow: hidden;
background: #14110F;
aspect-ratio: 9 / 15;
}
.zr-reel video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
.zr-reel-play {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.45);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
backdrop-filter: blur(4px);
}
.zr-reel-play svg { width: 18px; height: 18px; }
.zr-reel.is-playing .zr-reel-play svg { display: none; }
.zr-reel.is-playing .zr-reel-play::after { content: "❚❚"; font-size: 11px; }
.zr-reel-link { position: absolute; inset: auto 0 0 0; height: 34%; z-index: 2; }
.zr-reel-meta {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: 30px 14px 12px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
color: #fff;
pointer-events: none;
}
.zr-reel-meta strong { display: block; font-size: 13px; line-height: 1.35; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zr-reel-meta span { font-size: 14px; font-weight: 800; }
@media (max-width: 767px) {
.zr-reels { --zr-cols: 2; }
.zr-acc-stats strong { font-size: 16px; }
}
/* Search form — scope select gaya, field full width */
.zr-search-form .zr-search-field { flex: 1; }
/* ==========================================================================
v6.4.45 — header search hard-lock (checkout/Astra input styles ke khilaf)
========================================================================== */
/* Astra/Woo checkout par input[type=search] ko padding/min-height/border
de kar pill ke andar ka input phula dete thay — normalize LOCK. */
body .zr-search-header {
flex-wrap: nowrap;
}
body .zr-search-header .zr-search-field {
min-height: 46px;
height: 46px;
padding: 0 20px;
}
body .zr-search-header .zr-search-field input[type="search"] {
flex: 1 1 auto !important;
width: 100% !important;
max-width: none !important;
text-overflow: ellipsis;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
border: none !important;
background: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
line-height: normal !important;
font-size: 14px !important;
}
body .zr-search-header .zr-search-field input[type="search"]:focus {
border: none !important;
box-shadow: none !important;
background: none !important;
}
.zr-search-field input[type="search"]::-webkit-search-decoration,
.zr-search-field input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* ==========================================================================
v6.4.47 — cats mobile 2-col rail + account mobile reorder
========================================================================== */
/* Shop By Category — mobile: 2 baray tiles ka snap rail (grid khatam) */
@media (max-width: 767px) {
.zr-cats,
.zr-cats.is-overflow {
display: grid !important;
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
grid-auto-columns: calc((100% - 24px) / 3);
gap: 16px 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 2px;
justify-content: start;
padding-bottom: 8px;
scrollbar-width: none;
}
.zr-cats::-webkit-scrollbar {
display: none;
}
.zr-cats .zr-cat {
scroll-snap-align: start;
width: 100%;
}
.zr-cats .zr-cat-img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
}
.zr-cats .zr-cat-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.zr-cats .zr-cat-name {
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
text-align: center;
}
}
/* My Account — mobile: content pehle, nav neeche compact pills row */
@media (max-width: 767px) {
.woocommerce-account:not(.woocommerce-checkout) .woocommerce {
display: flex;
flex-direction: column;
}
.woocommerce-account:not(.woocommerce-checkout) .woocommerce-MyAccount-content {
order: 1;
width: 100% !important;
float: none !important;
}
.woocommerce-account:not(.woocommerce-checkout) .woocommerce-MyAccount-navigation {
order: 2;
width: 100% !important;
float: none !important;
margin: 26px 0 4px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
flex-direction: row;
overflow-x: auto;
gap: 8px;
padding-bottom: 6px;
scrollbar-width: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
display: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
flex: 0 0 auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
padding: 8px 14px 8px 8px;
border-radius: 999px;
font-size: 12px;
white-space: nowrap;
gap: 8px;
}
.woocommerce-account .woocommerce-MyAccount-navigation .zr-nav-ic {
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
}
.woocommerce-account .woocommerce-MyAccount-navigation .zr-nav-ic svg {
width: 13px;
height: 13px;
}
}
/* v6.4.48 — YouTube reels */
.zr-reel-thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
.zr-reel iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
z-index: 2;
}
.zr-reel--yt.is-playing .zr-reel-meta,
.zr-reel--yt.is-playing .zr-reel-play,
.zr-reel--yt.is-playing .zr-reel-link {
display: none;
}
/* v6.4.49 — YouTube product video */
img.zr-pvideo-thumb {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
display: block;
}
.zr-pvideo-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
z-index: 3;
}
.zr-pvideo-frame.is-playing .zr-pvideo-play,
.zr-pvideo-frame.is-playing .zr-pvideo-sound {
display: none;
}
/* v6.4.50 — category tile badges */
.zr-cat-img {
position: relative;
}
.zr-cat-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px 3px 8px;
border-radius: 8px;
border: 1px solid;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
white-space: nowrap;
line-height: 1.4;
max-width: calc(100% - 16px);
overflow: hidden;
text-overflow: ellipsis;
backdrop-filter: blur(2px);
}
.zr-cat-badge svg {
flex: none;
}
.zr-cb-red {
color: #B42318;
background: rgba(254, 243, 242, 0.95);
border-color: #B42318;
}
.zr-cb-green {
color: #005824;
background: rgba(243, 246, 244, 0.95);
border-color: #193908;
}
.zr-cb-gold {
color: #7A5E1F;
background: rgba(251, 244, 230, 0.95);
border-color: #A67C2E;
}
@media (max-width: 767px) {
.zr-cat-badge {
top: 6px;
left: 6px;
font-size: 9px;
padding: 2px 8px 2px 7px;
}
}
/* --------------------------------------------------------------------------
Mouse drag-to-slide (v6.4.56)
-------------------------------------------------------------------------- */
.zr-rail,
.zr-cats.is-overflow {
cursor: grab;
}
.zr-rail.zr-dragging,
.zr-cats.zr-dragging {
cursor: grabbing;
user-select: none;
}
/* Drag ke doran snap off — warna scroll jhatke khata hai. */
.zr-rail.zr-drag-active,
.zr-cats.zr-drag-active {
scroll-snap-type: none !important;
scroll-behavior: auto !important;
}