)
carry the corner arrow badge — the plain blurbs
used on the About/Services pages don't, so their headings shouldn't
reserve space for one. */
a.cat-card h3 { padding-right: 34px; }
/* The lone "tap here" affordance now that the "View Category" text is
gone — a small circular arrow badge tucked in the corner, the way a
premium app tile hints "this opens something" without spelling it
out. Always visible (not just on hover) since most visits are on a
phone, where hover never fires — the card is the button. */
.cat-card__go {
position: absolute;
top: 18px;
right: 18px;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--c-light);
border: 1px solid var(--c-border);
color: var(--c-navy);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.cat-card__go svg { width: 15px; height: 15px; transition: transform 0.35s ease; }
.cat-card:hover .cat-card__go {
background: var(--c-navy);
color: var(--c-white);
border-color: var(--c-navy);
box-shadow: var(--shadow-md);
}
.cat-card:hover .cat-card__go svg { transform: translate(2px, -2px); }
.cat-card:active .cat-card__go { background: var(--c-gold); color: var(--c-navy); border-color: var(--c-gold); }
/* The "minimal" category display style (Appearance > Customize) is
already background-free and centered — a floating corner badge would
look out of place with nothing to anchor to, so it sits this one out. */
.cat-card--minimal .cat-card__go { display: none; }
/* ==========================================================================
7. PRODUCT CARDS / CATALOG
========================================================================== */
.product-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 34px;
}
.product-toolbar a {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.88rem;
padding: 8px 18px 8px 10px;
border-radius: 999px;
background: var(--c-light);
color: var(--c-navy);
border: 1px solid var(--c-border);
transition: var(--transition);
}
.product-toolbar a img,
.product-toolbar a svg {
width: 26px; height: 26px;
object-fit: contain;
border-radius: 50%;
flex: none;
background: #ffffff;
box-shadow: 0 2px 6px rgba(15,37,64,0.12);
padding: 3px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-toolbar a:hover img,
.product-toolbar a.is-active img {
transform: scale(1.1);
box-shadow: 0 0 0 3px rgba(254,206,0,0.55), 0 2px 8px rgba(15,37,64,0.18);
}
.product-toolbar a:hover,
.product-toolbar a.is-active { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
/* Shop layout: category sidebar (left) + product grid (right) on the
Products archive and category pages. */
.shop-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 40px;
align-items: start;
}
.shop-layout > * { min-width: 0; }
.shop-sidebar {
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: 24px 22px;
position: sticky;
top: 24px;
}
.shop-sidebar h3 {
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--c-text-muted);
margin: 0 0 14px;
}
.shop-sidebar ul { list-style: none; margin: 0; padding: 0; }
.shop-sidebar li { margin-bottom: 4px; }
.shop-sidebar a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 8px;
font-family: var(--font-heading);
font-size: 0.92rem;
font-weight: 600;
color: var(--c-navy);
transition: var(--transition);
}
.shop-sidebar a:hover { background: var(--c-light); }
.shop-sidebar a.is-active { background: var(--c-navy); color: var(--c-white); }
.shop-sidebar__icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--c-white);
box-shadow: 0 2px 6px rgba(15,37,64,0.12);
flex: none;
overflow: hidden;
color: var(--c-blue);
}
.shop-sidebar__icon img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.shop-sidebar__icon svg { width: 16px; height: 16px; }
.shop-sidebar a.is-active .shop-sidebar__icon { box-shadow: 0 0 0 2px rgba(254,206,0,0.6); }
.shop-sidebar__label { flex: 1; }
.shop-sidebar a .count { font-size: 0.78rem; font-weight: 500; color: var(--c-text-muted); flex: none; }
.shop-sidebar a.is-active .count { color: rgba(255,255,255,0.7); }
/* Sub-categories (e.g. "Cable" → "Pakistani Cable" / "English Cable")
nested and indented under their parent, with a connecting guide line and
a slightly smaller icon/text so the hierarchy reads at a glance. */
.shop-sidebar__children {
list-style: none;
margin: 4px 0 4px 15px;
padding: 0 0 0 14px;
border-left: 2px solid var(--c-light);
}
.shop-sidebar__children .shop-sidebar__icon { width: 24px; height: 24px; }
.shop-sidebar__children .shop-sidebar__icon svg { width: 13px; height: 13px; }
.shop-sidebar__children .shop-sidebar__icon img { padding: 3px; }
.shop-sidebar__children .shop-sidebar__label { font-size: 0.9rem; }
.shop-sidebar__children .shop-sidebar__children { margin-left: 10px; }
/* Homepage "Categories + Products" split section (Layout 3): the same
category sidebar used on the shop pages, on the left, and a
horizontally-scrolling row of product cards on the right — browse a
category, then swipe/scroll through what's in stock without a full
page reload. */
.shop-split__grid {
display: grid;
grid-template-columns: 270px 1fr;
gap: 32px;
align-items: start;
margin-top: 8px;
}
.shop-split__grid > * { min-width: 0; }
.shop-split__cats .shop-sidebar { margin: 0; }
.shop-split__products-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.shop-split__arrows { display: flex; gap: 8px; flex: none; }
.shop-split__arrow {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--c-border);
background: var(--c-white);
color: var(--c-navy);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 2px 8px rgba(15,37,64,0.06);
}
.shop-split__arrow svg { width: 18px; height: 18px; }
.shop-split__arrow:hover { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); transform: translateY(-1px); }
.shop-split__products-scroll { position: relative; }
.shop-split__products-scroll::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 10px;
width: 56px;
background: linear-gradient(90deg, rgba(246,248,251,0), var(--c-light) 82%);
pointer-events: none;
}
.shop-split__track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding: 4px 4px 14px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.shop-split__track::-webkit-scrollbar { display: none; }
.shop-split__track .product-card {
flex: 0 0 250px;
scroll-snap-align: start;
}
@media (max-width: 960px) {
.shop-split__grid { grid-template-columns: 1fr; gap: 18px; }
.shop-split__products-head { justify-content: center; text-align: center; }
.shop-split__arrows { display: none; }
}
@media (max-width: 480px) {
.shop-split__track .product-card { flex-basis: 210px; }
}
.shop-main__search { margin-bottom: 22px; }
.shop-search-form {
display: flex;
align-items: center;
gap: 10px;
max-width: 460px;
margin: 0 auto;
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: 999px;
padding: 6px 6px 6px 20px;
transition: var(--transition);
}
.shop-search-form:focus-within { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(24,117,187,0.14); }
.shop-search-form__input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 0.94rem;
color: var(--c-navy);
padding: 8px 0;
}
.shop-search-form__submit {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--c-navy);
color: var(--c-white);
flex: none;
transition: var(--transition);
}
.shop-search-form__submit:hover { background: var(--c-blue); }
.shop-search-form__submit svg { width: 17px; height: 17px; }
.shop-main__head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--c-border);
}
.shop-main__count { margin: 0; color: var(--c-text-muted); font-size: 0.9rem; }
.shop-main__sort select {
border: 1px solid var(--c-border);
border-radius: 8px;
padding: 9px 14px;
font-family: var(--font-heading);
font-size: 0.86rem;
font-weight: 600;
color: var(--c-navy);
background: var(--c-white);
cursor: pointer;
}
.shop-main .grid--4 { grid-template-columns: repeat(3, 1fr); }
/* "Shop within Cable:" sub-category quick-picks at the top of a parent
category's archive page (taxonomy-ies_product_cat.php). */
.shop-subcats {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.shop-subcats__label {
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.88rem;
color: var(--c-navy);
flex: none;
}
.shop-subcats__list { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-subcats__chip {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--c-light-border, #e2e6ec);
border-radius: 999px;
padding: 7px 14px;
font-size: 0.84rem;
font-weight: 500;
color: var(--c-navy);
background: var(--c-white);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.shop-subcats__chip:hover,
.shop-subcats__chip:focus-visible,
.shop-subcats__chip.is-active {
background: var(--c-navy);
color: var(--c-white);
border-color: var(--c-navy);
}
.shop-subcats__chip .count { font-size: 0.76rem; opacity: 0.7; }
.shop-subcats__chip--clear {
background: none;
border-style: dashed;
color: var(--c-text-muted);
}
.shop-subcats__chip--clear:hover,
.shop-subcats__chip--clear:focus-visible {
background: var(--c-light);
color: var(--c-navy);
border-color: var(--c-light-border, #e2e6ec);
}
/* A second "Shop within" / "Filter by Brand" row on the same page (a
category with both sub-categories and a brand filter) needs a little
breathing room between the two rows. */
.shop-subcats + .shop-subcats { margin-top: -8px; }
@media (max-width: 960px) {
.shop-layout { grid-template-columns: 1fr; gap: 20px; }
.shop-sidebar {
position: static;
padding: 16px 16px 10px;
}
.shop-sidebar h3 { margin-bottom: 12px; }
.shop-sidebar ul {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
max-width: 100%;
gap: 10px;
margin: 0 -16px;
padding: 0 16px 10px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.shop-sidebar ul::-webkit-scrollbar { display: none; }
.shop-sidebar li { margin-bottom: 0; flex: none; }
.shop-sidebar a {
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 6px 0;
width: 76px;
text-align: center;
white-space: normal;
}
.shop-sidebar a:hover { background: none; }
.shop-sidebar a.is-active { background: none; color: var(--c-navy); }
.shop-sidebar__icon { width: 46px; height: 46px; }
.shop-sidebar__icon svg { width: 20px; height: 20px; }
.shop-sidebar a.is-active .shop-sidebar__icon { box-shadow: 0 0 0 2px var(--c-navy), 0 0 0 4px rgba(254,206,0,0.6); }
.shop-sidebar__label {
flex: none;
font-size: 0.76rem;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.shop-sidebar a.is-active .shop-sidebar__label { color: var(--c-navy); }
.shop-sidebar a .count { font-size: 0.68rem; }
/* The sidebar becomes one horizontal scrolling row of pills at this
width, so sub-categories (e.g. "Pakistani Cable" / "English Cable"
under "Cable") are hidden from this strip — a nested indented list
doesn't read as a hierarchy in a single horizontal row, it just looks
broken. Tapping the parent's own pill (e.g. "Cable") still reaches
them: its category page offers them as its own set of quick-pick
chips right at the top (see taxonomy-ies_product_cat.php). */
.shop-sidebar .shop-sidebar__children {
display: none;
}
}
@media (max-width: 640px) {
.shop-main .grid--4 { grid-template-columns: repeat(2, 1fr); }
.shop-search-form { max-width: 100%; }
}
.product-card {
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: var(--radius);
overflow: hidden;
transition: var(--transition);
display: flex;
flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.product-card__media { aspect-ratio: 4/3; background: var(--c-light); position: relative; overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .product-card__media img { transform: scale(1.06); }
.product-card__media .placeholder-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--c-blue); opacity: 0.35; }
.product-card__media .placeholder-icon svg { width: 46px; height: 46px; }
.product-card__cat {
position: absolute; top: 12px; left: 12px;
background: rgba(15,37,64,0.85);
color: var(--c-gold);
font-size: 0.72rem;
font-weight: 600;
padding: 5px 11px;
border-radius: 999px;
font-family: var(--font-heading);
}
.product-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-card__body h3 { font-size: 1.05rem; margin: 0; }
.product-card__body h3 a { color: var(--c-navy); }
.product-card__price { font-family: var(--font-heading); font-weight: 700; color: var(--c-blue); font-size: 1.05rem; }
.product-card__price span { font-size: 0.78rem; color: var(--c-text-muted); font-weight: 500; margin-left: 4px; }
.product-card__actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
/* min-width: 0 overrides the flex-item default of min-width: auto, which
otherwise refuses to shrink a flex child below its own content's
natural width — without it, a narrow product-card column can push
this button row wider than the card itself instead of the button
text shrinking or wrapping to fit. This protects every card width
the theme uses, not just the "Products Per Row" breakpoints below. */
.product-card__actions .btn { flex: 1; min-width: 0; padding: 10px 14px; font-size: 0.85rem; white-space: normal; line-height: 1.2; }
.product-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.product-hero__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); aspect-ratio: 1/1; background: var(--c-light); }
.product-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.product-hero__brand { font-size: 0.92rem; color: var(--c-text-muted); margin: 4px 0 10px; }
.product-hero__brand a { color: var(--c-navy); font-weight: 600; text-decoration: underline; }
.product-hero .price { font-family: var(--font-heading); font-size: 1.9rem; color: var(--c-blue); font-weight: 700; margin-bottom: 6px; }
.product-hero .unit { color: var(--c-text-muted); font-size: 0.95rem; margin-bottom: 22px; }
.product-hero__meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0; }
.product-hero__meta span { background: var(--c-light); border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; color: var(--c-navy); font-weight: 600; }
.product-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* ==========================================================================
8. WHY CHOOSE US
========================================================================== */
.feature-row { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 30px; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row__icon {
width: 46px; height: 46px; border-radius: 12px;
background: rgba(254,206,0,0.14);
color: var(--c-gold);
display: flex; align-items: center; justify-content: center;
flex: none;
}
.feature-row__icon svg { width: 24px; height: 24px; }
.feature-row h4 { color: var(--c-white); margin-bottom: 4px; font-size: 1.05rem; }
.feature-row p { color: #b7c0cc; font-size: 0.92rem; margin-bottom: 0; }
/* ==========================================================================
9. GALLERY
========================================================================== */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-grid a { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); position: relative; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-grid a:hover img { transform: scale(1.08); }
.gallery-grid a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,37,64,0.35), transparent 55%); opacity: 0; transition: var(--transition); }
.gallery-grid a:hover::after { opacity: 1; }
/* ==========================================================================
10. TESTIMONIALS
========================================================================== */
.testimonial-card {
background: var(--c-white);
border-radius: var(--radius);
padding: 28px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--c-border);
}
.testimonial-card .stars { color: var(--c-gold-dark); margin-bottom: 12px; display: flex; gap: 3px; }
.testimonial-card .stars svg { width: 16px; height: 16px; }
.testimonial-card p { color: var(--c-text); font-style: italic; }
.testimonial-card__author { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.testimonial-card__avatar {
width: 42px; height: 42px; border-radius: 50%;
background: var(--c-navy); color: var(--c-gold);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-heading); font-weight: 700;
}
.testimonial-card__author strong { display: block; color: var(--c-navy); font-size: 0.92rem; }
.testimonial-card__author span { font-size: 0.8rem; color: var(--c-text-muted); }
/* ==========================================================================
11. CTA / WHATSAPP BANNER
========================================================================== */
.cta-banner {
background: linear-gradient(120deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
border-radius: 20px;
padding: 46px 48px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.cta-banner h2, .cta-banner p { color: var(--c-navy); }
.cta-banner p { margin-bottom: 0; }
.whatsapp-float {
position: fixed;
bottom: 24px;
right: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25d366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(37,211,102,0.45);
z-index: 998;
color: #fff;
animation: pulse-wa 2.4s infinite;
}
.whatsapp-float svg { width: 30px; height: 30px; }
@keyframes pulse-wa {
0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
/* ==========================================================================
12. FOOTER
========================================================================== */
.site-footer { background: var(--c-dark); color: #b7c0cc; }
.site-footer a { color: #d7dce2; }
.site-footer a:hover { color: var(--c-gold); }
.footer-top { padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 40px; }
.footer-brand img { max-height: 50px; margin-bottom: 16px; }
.footer-brand p { font-size: 0.9rem; color: #9aa4b1; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.08);
display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: var(--c-gold); color: var(--c-navy) !important; }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 { color: var(--c-white); font-size: 1rem; margin-bottom: 18px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; font-size: 0.92rem; }
.footer-col .contact-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.footer-col .contact-item svg { width: 18px; height: 18px; color: var(--c-gold); flex: none; margin-top: 2px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.84rem; color: #8b95a3; }
/* ==========================================================================
13. BLOG / SINGLE POST / COMMENTS
========================================================================== */
.post-list { display: grid; gap: 34px; }
.post-card { display: grid; grid-template-columns: 280px 1fr; gap: 26px; border-bottom: 1px solid var(--c-border); padding-bottom: 34px; }
.post-card__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--c-light); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card .post-meta { font-size: 0.82rem; color: var(--c-text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.post-card h2 { font-size: 1.4rem; margin-bottom: 10px; }
.post-card h2 a { color: var(--c-navy); }
.single-content { max-width: 780px; margin: 0 auto; }
.single-content .post-thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 30px; }
.single-content h1 { margin-bottom: 12px; }
.single-content .post-meta { color: var(--c-text-muted); font-size: 0.9rem; margin-bottom: 30px; }
.single-content .entry-content h2 { margin-top: 1.4em; }
.single-content .entry-content img { border-radius: var(--radius); }
.single-content .entry-content a { text-decoration: underline; }
.single-content .entry-content blockquote {
border-left: 4px solid var(--c-gold);
margin: 1.5em 0;
padding: 4px 22px;
font-style: italic;
color: var(--c-navy);
background: var(--c-light);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.tags-links { margin-top: 30px; font-size: 0.88rem; }
.tags-links a { background: var(--c-light); padding: 5px 12px; border-radius: 999px; margin-right: 6px; display: inline-block; margin-bottom: 6px; }
.tags-links--admin-only { padding: 8px 10px; background: #fff8e1; border: 1px dashed #d9a52a; border-radius: var(--radius-sm); }
.tags-links--admin-only .tags-links__hint { display: block; font-weight: 600; color: #8a6100; margin-bottom: 6px; }
#comments { margin-top: 50px; border-top: 1px solid var(--c-border); padding-top: 34px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list .comment { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--c-border); }
.comment-author { font-weight: 700; color: var(--c-navy); font-family: var(--font-heading); }
.comment-metadata { font-size: 0.8rem; color: var(--c-text-muted); margin-bottom: 8px; }
.comment-form input, .comment-form textarea {
width: 100%; padding: 12px 14px; border: 1px solid var(--c-border);
border-radius: var(--radius-sm); margin-bottom: 14px;
}
.comment-form textarea { min-height: 130px; }
.pagination { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pagination a, .pagination span {
padding: 10px 16px; border-radius: var(--radius-sm);
border: 1px solid var(--c-border); font-weight: 600; font-size: 0.88rem;
color: var(--c-navy);
}
.pagination .current { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.widget { margin-bottom: 34px; }
.widget-title { font-size: 1.05rem; margin-bottom: 16px; }
.sidebar .widget ul { list-style: none; padding: 0; margin: 0; }
.sidebar .widget li { padding: 9px 0; border-bottom: 1px solid var(--c-border); font-size: 0.92rem; }
/* ==========================================================================
14. FORMS (Contact page)
========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-form { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 600; font-size: 0.88rem; color: var(--c-navy); margin-bottom: 6px; font-family: var(--font-heading); }
.form-row input, .form-row select, .form-row textarea {
width: 100%; padding: 13px 15px; border: 1px solid var(--c-border);
border-radius: var(--radius-sm); background: var(--c-light);
}
.form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--c-blue); background: var(--c-white); }
.form-row textarea { min-height: 140px; resize: vertical; }
.contact-info-card { background: var(--c-navy); color: var(--c-white); border-radius: var(--radius); padding: 32px; margin-bottom: 20px; }
.contact-info-card .contact-item { display: flex; gap: 14px; margin-bottom: 22px; align-items: flex-start; }
.contact-info-card .contact-item:last-child { margin-bottom: 0; }
.contact-info-card .contact-item svg { width: 22px; height: 22px; color: var(--c-gold); flex: none; margin-top: 2px; }
.contact-info-card .contact-item strong { display: block; color: var(--c-white); margin-bottom: 3px; }
.contact-info-card .contact-item span, .contact-info-card .contact-item a { color: #c3cddb; font-size: 0.92rem; }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-border); }
.map-embed iframe { width: 100%; height: 320px; border: 0; display: block; }
/* ==========================================================================
15. PAGE BANNER (inner pages)
========================================================================== */
.page-banner {
background: linear-gradient(120deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
color: var(--c-white);
padding: 56px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.page-banner::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle at 90% 10%, rgba(254,206,0,0.14), transparent 40%);
}
.page-banner h1 { color: var(--c-white); margin-bottom: 10px; position: relative; }
.page-banner .breadcrumb { position: relative; color: #b7c0cc; font-size: 0.9rem; }
.page-banner .breadcrumb a { color: #d7dce2; }
.page-banner .breadcrumb a:hover { color: var(--c-gold); }
/* ==========================================================================
16. UTILITIES
========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.screen-reader-text {
position: absolute !important;
clip: rect(1px,1px,1px,1px);
width: 1px; height: 1px; overflow: hidden;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 10000;
background: var(--c-navy); color: var(--c-white); padding: 12px 20px;
}
.skip-link:focus { left: 10px; top: 10px; }
/* ==========================================================================
17. RESPONSIVE
========================================================================== */
@media (max-width: 1024px) {
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.hero-slider { min-height: unset; overflow: visible; }
.hero-slide {
position: relative; inset: auto; display: none;
opacity: 1; visibility: visible; pointer-events: auto; transition: none;
}
/* On a phone the slides stack in normal document flow instead of
layering with position:absolute (their height varies with each
slide's text, and cross-fading two stacked-flow elements at once
would overlap/jump) — so a plain "display: none/flex" swap is the
safe way to show only one at a time. That swap alone is an
instant, flat cut though, which is why it felt lifeless. This
keyframe animation plays every time a slide newly becomes active,
giving it a confident pop-and-settle entrance (fades in while
easing down from slightly above and slightly scaled up) instead of
just appearing. */
.hero-slide.is-active {
display: flex;
animation: ies-hero-mobile-in 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes ies-hero-mobile-in {
0% { opacity: 0; transform: translateY(22px) scale(0.95); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.hero-slide .container { grid-template-columns: 1fr; padding-top: 50px; padding-bottom: 40px; }
.hero__media { max-width: 560px; }
.hero-arrow { display: none; }
.hero-nav { bottom: 14px; }
.product-hero { grid-template-columns: 1fr; }
.contact-grid { grid-template-columns: 1fr; }
.post-card { grid-template-columns: 1fr; }
}
/* Placed after the block above so it wins the cascade (equal specificity,
later source order) and switches off the new mobile entrance animation
for anyone who has asked their device for less motion. */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
.hero-slide.is-active { animation: none; }
}
@media (max-width: 782px) {
.topbar { display: none; }
.primary-nav-wrap { position: fixed; top: 0; right: -100%; height: 100vh; width: min(320px, 85vw);
background: var(--c-white); flex-direction: column; align-items: stretch; padding: 90px 24px 24px;
box-shadow: var(--shadow-lg); transition: right 0.3s ease; overflow-y: auto; z-index: 1000; }
.primary-nav-wrap.is-open { right: 0; }
.primary-menu { flex-direction: column; align-items: stretch; gap: 2px; }
.primary-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; margin-left: 10px; }
.primary-menu li.is-open .sub-menu { display: block; }
.header-cta .btn span.btn-label { display: none; }
.menu-toggle { display: inline-flex; }
.header-home { display: inline-flex; }
.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
.cta-banner { flex-direction: column; text-align: center; }
.mobile-nav-contact {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid var(--c-border);
font-size: 0.9rem;
}
.mobile-nav-contact a,
.mobile-nav-contact span {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--c-navy);
font-weight: 500;
}
.mobile-nav-contact svg { width: 16px; height: 16px; flex: none; color: var(--c-blue); }
.mobile-nav-contact__social { display: flex; gap: 10px; margin-top: 4px; }
.mobile-nav-contact__social a {
width: 34px; height: 34px; border-radius: 50%;
background: var(--c-light);
color: var(--c-navy);
display: inline-flex; align-items: center; justify-content: center;
}
.mobile-nav-contact__social a:hover { background: var(--c-gold); }
.mobile-nav-contact__social svg { width: 15px; height: 15px; }
}
@media (max-width: 560px) {
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
.gallery-grid { grid-template-columns: 1fr; }
.hero__stats { gap: 20px; }
.section { padding: 52px 0; }
.footer-grid { grid-template-columns: 1fr; }
.whatsapp-float { width: 52px; height: 52px; bottom: 16px; right: 16px; }
}
/* ===================================================================
* Scroll animations — content gently rises into view as you scroll,
* plus a playful floating "bubbles" effect on a few key sections.
* All of it is skipped for visitors whose OS asks for reduced motion.
* =================================================================== */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0s);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal--pop {
transform: translateY(20px) scale(0.94);
}
.reveal--pop.is-visible {
transform: translateY(0) scale(1);
}
.ies-bubbles {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.ies-bubble {
position: absolute;
bottom: -80px;
left: var(--x, 50%);
width: var(--size, 14px);
height: var(--size, 14px);
border-radius: 50%;
background: radial-gradient(circle at 32% 30%, rgba(254,206,0,0.85), rgba(254,206,0,0.08) 70%);
box-shadow: 0 0 10px rgba(254,206,0,0.25);
opacity: 0;
animation-name: ies-bubble-rise;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
animation-duration: var(--dur, 12s);
animation-delay: var(--delay, 0s);
}
.ies-bubbles--light .ies-bubble {
background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.1) 70%);
box-shadow: 0 0 10px rgba(255,255,255,0.3);
}
@keyframes ies-bubble-rise {
0% { transform: translateY(0) translateX(0); opacity: 0; }
12% { opacity: 0.85; }
85% { opacity: 0.5; }
100% { transform: translateY(-620px) translateX(var(--drift, 24px)); opacity: 0; }
}
.hero-slider, .section--navy, .cta-banner { position: relative; }
.hero-slider { z-index: 0; }
.hero-slide .container { position: relative; z-index: 1; }
.section--navy > .container { position: relative; z-index: 1; }
.cta-banner { overflow: hidden; }
.cta-banner > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
.ies-bubbles { display: none; }
}
@media (max-width: 640px) {
.ies-bubble { display: none; }
.ies-bubble:nth-child(-n+4) { display: block; }
}
/* ===================================================================
* Premium mobile scroll reveal — a "window" effect: on a phone,
* content doesn't just fade in, it appears to rise up from behind a
* mask that lifts away as you scroll, like looking through a window
* opening. Unlike the desktop reveal (which only ever plays once),
* this one is allowed to replay both ways — scrolling down into a
* section and back up out of it — for a livelier feel where you
* spend all your time: the phone. Desktop is untouched; this whole
* block only applies at phone widths. Respects reduced-motion via the
* shared .reveal rule above, which still wins if that's set.
* =================================================================== */
@media (max-width: 782px) {
.reveal {
opacity: 1;
transform: translateY(34px);
/* 98%, not 100% — a fully zero-area clip-path stops some phone
browsers from ever reporting this element as visible again to
IntersectionObserver (it reads as permanently "0% on screen"
even once scrolled fully into view), which would silently
freeze the section hidden forever. A hairline sliver keeps a
real, tiny, non-zero visible area — invisible in practice,
but enough for the browser to correctly detect scroll-in. */
clip-path: inset(0 0 98% 0 round 16px);
-webkit-clip-path: inset(0 0 98% 0 round 16px);
transition:
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1),
-webkit-clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: var(--reveal-delay, 0s);
will-change: transform, clip-path;
}
.reveal.is-visible {
transform: translateY(0);
clip-path: inset(0 0 0% 0 round 16px);
-webkit-clip-path: inset(0 0 0% 0 round 16px);
}
/* Cards (category tiles, product cards, feature rows, trust-strip
items, stat numbers): the same window reveal, with an extra
settle-into-place scale + tilt for a bouncier, more eye-catching
entrance than plain text gets. */
.reveal--card {
transform: translateY(34px) scale(0.9) rotate(-1.2deg);
}
.reveal--card.is-visible {
transform: translateY(0) scale(1) rotate(0deg);
}
/* Gallery photos: the mask lifts the same way, but the photo itself
zooms gently out from a tighter crop as it settles — a small
photographic flourish that reads as "premium" without being busy. */
.reveal--photo {
transform: translateY(20px) scale(1.14);
}
.reveal--photo.is-visible {
transform: translateY(0) scale(1);
}
}
@media (max-width: 782px) and (prefers-reduced-motion: reduce) {
.reveal,
.reveal--card,
.reveal--photo {
opacity: 1;
transform: none;
clip-path: none;
-webkit-clip-path: none;
transition: none;
}
}
/* ===================================================================
* Hero animated tagline (typewriter effect)
* =================================================================== */
.hero__typing {
display: flex;
align-items: center;
gap: 10px;
margin: 22px 0 0;
min-height: 26px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 1rem;
color: var(--c-gold);
}
.hero__typing .icon { width: 18px; height: 18px; flex: none; }
.hero__typing-text { white-space: nowrap; overflow: hidden; }
.hero__typing-cursor {
display: inline-block;
width: 2px;
height: 1.1em;
background: var(--c-gold);
animation: ies-typing-blink 0.85s step-end infinite;
}
@keyframes ies-typing-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero__typing-cursor { animation: none; }
}
@media (max-width: 480px) {
.hero__typing { font-size: 0.9rem; }
}
/* ===================================================================
* Category display options (Appearance > Customize > Category Display)
* =================================================================== */
.cat-card--icon-small .cat-card__icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 14px; }
.cat-card--icon-small .cat-card__icon svg { width: 24px; height: 24px; }
.cat-card--icon-small .cat-card__icon img { width: 32px; height: 32px; }
.cat-card--icon-large .cat-card__icon { width: 92px; height: 92px; border-radius: 24px; margin-bottom: 22px; }
.cat-card--icon-large .cat-card__icon svg { width: 42px; height: 42px; }
.cat-card--icon-large .cat-card__icon img { width: 60px; height: 60px; }
.cat-card--shadow { border-color: transparent; box-shadow: var(--shadow-md); }
.cat-card--shadow:hover { box-shadow: var(--shadow-lg); }
.cat-card--minimal {
background: transparent;
border: none;
padding: 18px 10px;
text-align: center;
}
.cat-card--minimal .cat-card__icon { margin-left: auto; margin-right: auto; }
.cat-card--minimal:hover { transform: translateY(-4px); box-shadow: none; }
a.cat-card--minimal h3 { padding-right: 0; }
/* ===================================================================
* Chat assistant widget (guided product finder, not an AI chatbot)
* =================================================================== */
.ies-chat { position: fixed; bottom: 96px; right: 24px; z-index: 997; }
.ies-chat__toggle {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--c-navy);
color: var(--c-white);
border: none;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(15,37,64,0.35);
cursor: pointer;
transition: var(--transition);
}
.ies-chat__toggle:hover { background: var(--c-blue); transform: translateY(-2px); }
.ies-chat__toggle svg { width: 26px; height: 26px; }
.ies-chat.is-open .ies-chat__toggle { background: var(--c-blue); }
.ies-chat__panel {
position: absolute;
bottom: 68px;
right: 0;
width: min(340px, calc(100vw - 32px));
max-height: min(480px, 70vh);
background: var(--c-white);
border-radius: 16px;
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(12px) scale(0.98);
transform-origin: bottom right;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.ies-chat.is-open .ies-chat__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.ies-chat__head {
background: var(--c-navy);
color: var(--c-white);
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
flex: none;
}
.ies-chat__head strong { display: block; font-family: var(--font-heading); font-size: 0.95rem; }
.ies-chat__head span { display: block; font-size: 0.75rem; color: #b7c0cc; }
.ies-chat__close { background: none; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; }
.ies-chat__body {
flex: 1 1 auto;
overflow-y: auto;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
background: var(--c-light);
}
.ies-chat__msg { max-width: 88%; font-size: 0.88rem; line-height: 1.5; padding: 10px 13px; border-radius: 14px; }
.ies-chat__msg--bot { align-self: flex-start; background: var(--c-white); color: var(--c-text); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.ies-chat__msg--user { align-self: flex-end; background: var(--c-navy); color: var(--c-white); border-bottom-right-radius: 4px; }
.ies-chat__msg--fact,
.ies-chat__msg--ai {
background: linear-gradient(135deg, rgba(212,175,55,0.14), rgba(212,175,55,0.05));
border: 1px solid rgba(212,175,55,0.35);
}
.ies-chat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ies-chat__chip {
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 600;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid var(--c-border);
background: var(--c-white);
color: var(--c-navy);
cursor: pointer;
transition: var(--transition);
}
.ies-chat__chip:hover { background: var(--c-navy); color: var(--c-white); border-color: var(--c-navy); }
.ies-chat__chip--fact { border-color: var(--c-gold); color: #8a6d00; background: rgba(212,175,55,0.1); }
.ies-chat__chip--fact:hover { background: var(--c-gold); color: var(--c-navy); border-color: var(--c-gold); }
.ies-chat__results { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 100%; }
.ies-chat__product {
display: flex;
align-items: center;
gap: 10px;
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: 12px;
padding: 8px;
box-shadow: var(--shadow-sm);
}
.ies-chat__product:hover { border-color: var(--c-blue); }
.ies-chat__product img, .ies-chat__product-noimg { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--c-blue-light); flex: none; }
.ies-chat__product-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ies-chat__product-body strong { font-size: 0.85rem; color: var(--c-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ies-chat__product-price { font-size: 0.8rem; color: var(--c-blue); font-weight: 600; }
.ies-chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--c-border); background: var(--c-white); flex: none; }
.ies-chat__form input { flex: 1; border: 1px solid var(--c-border); border-radius: 999px; padding: 10px 16px; font-size: 0.88rem; }
.ies-chat__form input:focus { outline: none; border-color: var(--c-blue); }
.ies-chat__form button { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--c-gold); color: var(--c-navy); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ies-chat__form button svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
.ies-chat { bottom: 86px; right: 16px; }
.ies-chat__toggle { width: 50px; height: 50px; }
.ies-chat__panel { bottom: 60px; }
}
/* ===================================================================
* Homepage Layout 2 — full-width banner hero, brand strip, promo tiles
* (Appearance > Customize > Homepage Layout)
* =================================================================== */
.banner-hero {
position: relative;
min-height: clamp(460px, 56vw, 640px);
display: flex;
align-items: center;
overflow: hidden;
}
.banner-hero__media { position: absolute; inset: 0; z-index: 0; }
.banner-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.banner-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(15,37,64,0.92) 0%, rgba(15,37,64,0.68) 42%, rgba(15,37,64,0.22) 75%, rgba(15,37,64,0.05) 100%);
}
.banner-hero__inner { position: relative; z-index: 1; width: 100%; }
.banner-hero__content { max-width: 560px; padding: 60px 0; }
.banner-hero__content h1 { color: var(--c-white); margin-bottom: 18px; }
.banner-hero__content h1 span { color: var(--c-gold); }
.banner-hero__content .lead { color: #d7e0ea; }
.banner-hero__content .hero__actions { margin-top: 26px; }
.banner-hero__content .hero__typing { color: var(--c-gold); }
.brand-strip-section { background: var(--c-light); padding: 26px 0; border-bottom: 1px solid var(--c-border); }
.brand-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 44px; }
.brand-strip__item {
font-family: var(--font-heading);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.02em;
color: var(--c-text-muted);
opacity: 0.75;
white-space: nowrap;
}
.promo-tile {
position: relative;
display: block;
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4/5;
background-size: cover;
background-position: center;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.promo-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.promo-tile__overlay {
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(15,37,64,0.92) 0%, rgba(15,37,64,0.35) 55%, rgba(15,37,64,0.05) 100%);
}
.promo-tile__body {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 22px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.promo-tile__body strong { font-family: var(--font-heading); font-size: 1.2rem; color: var(--c-white); }
.promo-tile__body > span:not(.btn) { font-size: 0.85rem; color: #d7e0ea; margin-bottom: 6px; }
.promo-tile__body .btn { pointer-events: none; }
@media (max-width: 1024px) {
.banner-hero__scrim { background: linear-gradient(0deg, rgba(15,37,64,0.94) 10%, rgba(15,37,64,0.55) 60%, rgba(15,37,64,0.25) 100%); }
.banner-hero__content { max-width: 100%; padding: 40px 0; }
}
@media (max-width: 640px) {
.promo-tile { aspect-ratio: 4/4; }
.brand-strip { gap: 20px 28px; }
.brand-strip__item { font-size: 0.85rem; }
}
/* ===================================================================
* Homepage Layout 3 — dual promo hero + product tabs
* (Appearance > Customize > Homepage Layout)
* =================================================================== */
.dual-hero { background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-2) 100%); padding: 56px 0; }
.dual-hero__grid { gap: 28px; align-items: stretch; }
.dual-hero__card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: center;
}
.dual-hero__card--icon {
background: linear-gradient(150deg, rgba(254,206,0,0.16) 0%, rgba(254,206,0,0.02) 100%);
border: 1px solid rgba(254,206,0,0.25);
padding: 42px;
}
.dual-hero__card--icon h2 { color: var(--c-white); font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.dual-hero__card--icon h2 span { color: var(--c-gold); }
.dual-hero__card--icon p { color: #cbd6e3; max-width: 420px; }
.dual-hero__card--icon .btn { align-self: flex-start; margin-top: 8px; }
.dual-hero__icon {
width: 76px; height: 76px;
border-radius: 20px;
background: var(--c-gold);
color: var(--c-navy);
display: flex; align-items: center; justify-content: center;
margin: 8px 0 22px;
box-shadow: 0 10px 26px rgba(254,206,0,0.28);
}
.dual-hero__icon .icon { width: 38px; height: 38px; }
.dual-hero__card--photo { background-size: cover; background-position: center; padding: 0; }
.dual-hero__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,37,64,0.9) 10%, rgba(15,37,64,0.25) 70%); }
.dual-hero__photo-body { position: relative; z-index: 1; padding: 32px; margin-top: auto; }
.dual-hero__photo-body .hero__badge { position: static; display: inline-flex; margin-bottom: 14px; }
.dual-hero__photo-body h3 { color: var(--c-white); font-size: 1.5rem; margin-bottom: 18px; }
.promo-tile--wide { aspect-ratio: 16/10; }
@media (max-width: 640px) {
.dual-hero__card { min-height: 300px; }
.dual-hero__card--icon { padding: 30px 24px; }
.promo-tile--wide { aspect-ratio: 4/3.4; }
}
/* Real phone widths (not just "not-desktop") — the 1024px rules above
only stack the hero to one column; on an actual phone the text block
also needs to shrink, or it ends up taller than the screen and pushes
the picture out of view entirely. Placed at the very end of the file
so it wins the cascade against unconditional base rules declared
earlier (equal specificity, later source order wins). */
@media (max-width: 640px) {
.hero-slide .container { padding-top: 32px; padding-bottom: 26px; gap: 20px; }
.hero__eyebrow { font-size: 0.66rem; padding: 7px 14px; margin-bottom: 12px; }
.hero__eyebrow .icon { width: 15px; height: 15px; }
.hero h1 { font-size: 1.6rem; line-height: 1.25; margin-bottom: 12px; }
.hero p.lead { font-size: 0.9rem; line-height: 1.55; max-width: none; }
.hero__actions { margin-top: 18px; gap: 10px; }
.hero__actions .btn { padding: 11px 18px; font-size: 0.84rem; flex: 1 1 auto; }
.hero__actions .btn svg { width: 15px; height: 15px; }
/* The rotating tagline is a nice extra on a roomy screen, but on a
phone it's one more block of text between the heading and the
photo — drop it here so the photo isn't buried under text. */
.hero__typing { display: none; }
.hero__media { max-width: 100%; }
.hero__badge { padding: 10px 14px; font-size: 0.8rem; gap: 10px; bottom: 12px; left: 12px; right: 12px; }
.hero__badge svg { width: 20px; height: 20px; }
.hero__stats { gap: 16px; margin-top: 24px; }
.hero__stats div strong { font-size: 1.2rem; }
.hero__stats div span { font-size: 0.7rem; }
.hero__stats-row { padding-top: 16px; padding-bottom: 20px; }
/* Category cards: sized for a 3-4 column desktop grid — far too
roomy at 2 columns on a phone-width screen. */
.cat-card { padding: 18px 16px; }
.cat-card__icon,
.cat-card--icon-small .cat-card__icon,
.cat-card--icon-large .cat-card__icon {
width: 50px; height: 50px; border-radius: 14px; margin-bottom: 12px;
}
.cat-card__icon svg,
.cat-card--icon-small .cat-card__icon svg,
.cat-card--icon-large .cat-card__icon svg { width: 22px; height: 22px; }
.cat-card__icon img,
.cat-card--icon-small .cat-card__icon img,
.cat-card--icon-large .cat-card__icon img { width: 32px; height: 32px; }
.cat-card h3 { font-size: 0.96rem; margin-bottom: 4px; }
a.cat-card h3 { padding-right: 26px; }
.cat-card p { font-size: 0.78rem; }
.cat-card__go { width: 26px; height: 26px; top: 12px; right: 12px; }
.cat-card__go svg { width: 12px; height: 12px; }
}
/* ===================================================================
* Products Per Row (Phone) — Appearance > Customize > Products Page.
* Below desktop width, product grids (Products page, category pages,
* search results, related products, homepage Popular Products) used
* to fall through a stack of older, unrelated breakpoints (1024px,
* 782px, a shop-specific 640px, then 560px) that disagreed with each
* other on column count and never touched the card's own sizing —
* so a phone/tablet in the 561–1024px band could get 2 columns of
* full desktop-sized cards, with the button row wider than the card
* itself. This block now owns the whole sub-1024px range for product
* grids specifically (its selectors are already more specific than
* every one of those older rules, so it wins regardless of order),
* applying the shop owner's chosen column count and matching compact
* sizing consistently the entire way down to the smallest phone.
* Desktop and non-product grids (like the "Shop by Category" tiles)
* are untouched. Placed at the very end of the file for good measure.
* =================================================================== */
@media (max-width: 1024px) {
body.ies-mobile-products-1 .product-grid { grid-template-columns: 1fr; }
body.ies-mobile-products-2 .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
body.ies-mobile-products-3 .product-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* 2 or 3 per row: compact the card so it still reads cleanly at a
fraction of its original width. The WhatsApp button (icon-only
already) becomes a small fixed square instead of stretching, so
"View Details" gets the room it actually needs for its text. */
body.ies-mobile-products-2 .product-grid .product-card__body,
body.ies-mobile-products-3 .product-grid .product-card__body {
padding: 10px 10px 12px;
gap: 6px;
}
body.ies-mobile-products-2 .product-grid .product-card__body h3,
body.ies-mobile-products-3 .product-grid .product-card__body h3 {
font-size: 0.82rem;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.ies-mobile-products-2 .product-grid .product-card__price,
body.ies-mobile-products-3 .product-grid .product-card__price {
font-size: 0.86rem;
}
body.ies-mobile-products-2 .product-grid .product-card__price span,
body.ies-mobile-products-3 .product-grid .product-card__price span {
font-size: 0.66rem;
}
body.ies-mobile-products-2 .product-grid .product-card__cat,
body.ies-mobile-products-3 .product-grid .product-card__cat {
font-size: 0.62rem;
padding: 3px 9px;
top: 8px;
left: 8px;
}
body.ies-mobile-products-2 .product-grid .product-card__actions,
body.ies-mobile-products-3 .product-grid .product-card__actions {
gap: 6px;
}
body.ies-mobile-products-2 .product-grid .product-card__actions .btn--navy,
body.ies-mobile-products-3 .product-grid .product-card__actions .btn--navy {
flex: 1 1 auto;
padding: 7px 6px;
font-size: 0.7rem;
/* "View Details" doesn't always fit on one line at this width —
text-overflow:ellipsis doesn't work reliably on a centered
flex button (it can clip from both sides with no visible
"…"), so instead let it wrap to two short lines, which reads
fine on a small button and never gets silently cut off. */
white-space: normal;
line-height: 1.15;
text-align: center;
}
body.ies-mobile-products-2 .product-grid .product-card__actions .btn--whatsapp,
body.ies-mobile-products-3 .product-grid .product-card__actions .btn--whatsapp {
flex: 0 0 32px;
width: 32px;
height: 32px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
body.ies-mobile-products-2 .product-grid .product-card__actions .btn--whatsapp .icon,
body.ies-mobile-products-3 .product-grid .product-card__actions .btn--whatsapp .icon,
body.ies-mobile-products-2 .product-grid .product-card__actions .btn--whatsapp svg,
body.ies-mobile-products-3 .product-grid .product-card__actions .btn--whatsapp svg {
width: 15px;
height: 15px;
}
/* 3 per row needs everything a notch smaller again, plus a square
image (instead of 4/3) so each card stays a sensible height. */
body.ies-mobile-products-3 .product-grid .product-card__media { aspect-ratio: 1/1; }
body.ies-mobile-products-3 .product-grid .product-card__body { padding: 8px 8px 10px; gap: 4px; }
body.ies-mobile-products-3 .product-grid .product-card__body h3 { font-size: 0.72rem; }
body.ies-mobile-products-3 .product-grid .product-card__price { font-size: 0.76rem; }
body.ies-mobile-products-3 .product-grid .product-card__price span { font-size: 0.58rem; margin-left: 2px; }
body.ies-mobile-products-3 .product-grid .product-card__cat { font-size: 0.55rem; padding: 2px 7px; }
body.ies-mobile-products-3 .product-grid .product-card__actions .btn--navy { font-size: 0.6rem; padding: 6px 4px; }
body.ies-mobile-products-3 .product-grid .product-card__actions .btn--whatsapp { flex-basis: 26px; width: 26px; height: 26px; }
body.ies-mobile-products-3 .product-grid .product-card__actions .btn--whatsapp .icon,
body.ies-mobile-products-3 .product-grid .product-card__actions .btn--whatsapp svg { width: 13px; height: 13px; }
}
/* ============================================================
Animated Social Icons — a soft "breathing" glow to catch the
eye at rest, a light shine sweeping across each icon in turn,
and each platform's real brand color on hover/focus. Applies
wherever .social-link icons appear (header bar, footer, mobile
menu) since they all share this class.
============================================================ */
.social-link {
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
animation: ies-social-glow 2.6s ease-in-out infinite;
}
.social-link svg { position: relative; z-index: 1; transition: transform 0.3s ease; }
/* Stagger each icon's glow/shine slightly so they pulse in a gentle wave
rather than all flashing in lockstep — reads as lively, not jarring. */
.social-link:nth-child(1) { animation-delay: 0s; }
.social-link:nth-child(2) { animation-delay: 0.18s; }
.social-link:nth-child(3) { animation-delay: 0.36s; }
.social-link:nth-child(4) { animation-delay: 0.54s; }
.social-link:nth-child(5) { animation-delay: 0.72s; }
.social-link:nth-child(6) { animation-delay: 0.9s; }
@keyframes ies-social-glow {
0%, 74%, 100% { box-shadow: 0 0 0 0 rgba(254, 206, 0, 0); }
87% { box-shadow: 0 0 0 5px rgba(254, 206, 0, 0.3), 0 0 14px 2px rgba(254, 206, 0, 0.35); }
}
.social-link::after {
content: '';
position: absolute;
top: -60%;
left: -60%;
width: 35%;
height: 220%;
background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
transform: rotate(20deg) translateX(-260%);
animation: ies-social-shine 4.4s ease-in-out infinite;
pointer-events: none;
z-index: 2;
}
.social-link:nth-child(2)::after { animation-delay: 0.5s; }
.social-link:nth-child(3)::after { animation-delay: 1s; }
.social-link:nth-child(4)::after { animation-delay: 1.5s; }
.social-link:nth-child(5)::after { animation-delay: 2s; }
.social-link:nth-child(6)::after { animation-delay: 2.5s; }
@keyframes ies-social-shine {
0%, 80% { transform: rotate(20deg) translateX(-260%); }
96%, 100% { transform: rotate(20deg) translateX(260%); }
}
.social-link:hover,
.social-link:focus-visible {
transform: translateY(-4px) scale(1.15) rotate(-4deg);
animation-play-state: paused;
box-shadow: 0 10px 18px -6px rgba(0, 0, 0, 0.4);
z-index: 3;
}
.social-link:hover svg { transform: scale(1.1); }
/* Real brand colors, kept off at rest so the icon row stays calm and
on-theme until a visitor's attention actually lands on it. */
a.social-link.social-link--facebook:hover, a.social-link.social-link--facebook:focus-visible { background: #1877f2 !important; color: #fff !important; }
a.social-link.social-link--instagram:hover, a.social-link.social-link--instagram:focus-visible { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7) !important; color: #fff !important; }
a.social-link.social-link--youtube:hover, a.social-link.social-link--youtube:focus-visible { background: #ff0000 !important; color: #fff !important; }
a.social-link.social-link--tiktok:hover, a.social-link.social-link--tiktok:focus-visible { background: linear-gradient(135deg, #25f4ee, #010101 55%, #fe2c55) !important; color: #fff !important; }
a.social-link.social-link--google:hover, a.social-link.social-link--google:focus-visible { background: conic-gradient(from 180deg, #4285f4, #ea4335, #fbbc05, #34a853, #4285f4) !important; color: #fff !important; }
a.social-link.social-link--whatsapp:hover, a.social-link.social-link--whatsapp:focus-visible { background: #25d366 !important; color: #06340f !important; }
@media (prefers-reduced-motion: reduce) {
.social-link { animation: none; }
.social-link::after { display: none; }
.social-link:hover { transform: translateY(-2px); }
}
/* ============================================================
Rating Badge — a floating "4.9 ★★★★★ 1,000+ Verified Ratings"
style pill for the homepage hero. Only appears once a real rating
is entered in the Customizer (see ies_trust_rating_badge()), so
there is nothing to hide here for the "no rating set" case.
============================================================ */
.trust-rating-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(15, 37, 64, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
padding: 10px 18px;
color: #fff;
text-decoration: none;
font-family: var(--font-heading);
box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
transition: var(--transition);
max-width: max-content;
}
a.trust-rating-badge:hover {
transform: translateY(-2px);
border-color: rgba(254, 206, 0, 0.55);
color: #fff;
}
.trust-rating-badge__score { font-size: 1.15rem; font-weight: 800; color: var(--c-gold); line-height: 1; }
.trust-rating-badge__stars {
position: relative;
display: inline-block;
font-size: 1rem;
line-height: 1;
letter-spacing: 2px;
white-space: nowrap;
}
.trust-rating-badge__stars-bg { color: rgba(255, 255, 255, 0.3); }
.trust-rating-badge__stars-fg {
position: absolute;
inset: 0;
overflow: hidden;
width: var(--ies-rating-fill, 100%);
color: var(--c-gold);
}
.trust-rating-badge__divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.25); }
.trust-rating-badge__count {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.35;
color: #e8edf3;
white-space: nowrap;
}
/* Layout 1 — floats over the top-left corner of the hero photo, clear of
the "Genuine Products" bar which already owns the bottom edge. */
.hero__media .trust-rating-badge { position: absolute; top: 16px; left: 16px; z-index: 3; }
/* Layout 2 — sits inline under the hero buttons, over the full-width photo
(the dark scrim behind the text already gives it a readable backdrop). */
.banner-hero__rating:empty { display: none; }
.banner-hero__rating { margin-top: 22px; }
/* Layout 3 — inline above the heading, same static treatment as the
existing "Genuine Products" badge in this card. */
.dual-hero__photo-body .trust-rating-badge { margin-bottom: 14px; }
@media (max-width: 640px) {
.trust-rating-badge { padding: 8px 14px; gap: 8px; }
.trust-rating-badge__score { font-size: 1rem; }
.trust-rating-badge__stars { font-size: 0.85rem; letter-spacing: 1px; }
.trust-rating-badge__count { font-size: 0.6rem; }
.hero__media .trust-rating-badge { top: 10px; left: 10px; }
}