:root {
--background: 0 0% 100%;
--foreground: 216 8% 12%;
--card: 0 0% 100%;
--card-foreground: 216 8% 12%;
--popover: 0 0% 100%;
--popover-foreground: 216 8% 12%;
--primary: 148 67% 39%;
--primary-foreground: 0 0% 100%;
--secondary: 216 8% 12%;
--secondary-foreground: 0 0% 100%;
--muted: 228 8% 88%;
--muted-foreground: 220 9% 45%;
--accent: 228 8% 96%;
--accent-foreground: 216 8% 12%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%;
--border: 228 8% 88%;
--input: 228 8% 88%;
--ring: 148 67% 39%;
--radius: 0.5rem;
--topbar: 216 8% 12%;
--topbar-foreground: 228 8% 88%;
--footer: 216 10% 14%;
--footer-foreground: 228 8% 78%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: hsl(var(--background));
color: hsl(var(--foreground));
font-family: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body,
button,
input,
textarea,
select {
font: inherit;
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
border: 0;
padding: 0;
background: none;
cursor: pointer;
}
.container {
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: 1rem;
}
.site-main {
min-height: 50vh;
}
@keyframes imidjstroy-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes imidjstroy-scale-in {
from {
opacity: 0;
transform: scale(0.96) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
/* =========================================================
TOP BAR
========================================================= */
.topbar {
position: relative;
z-index: 60;
padding: 0.5rem 0;
background: hsl(var(--topbar));
color: hsl(var(--topbar-foreground));
font-size: 0.75rem;
}
.topbar__inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.topbar__left,
.topbar__right {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.topbar__item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: inherit;
}
.topbar__address {
transition: color 0.2s ease;
}
.topbar__address:hover {
color: rgb(187 247 208);
}
.topbar__icon,
.topbar__phone-icon {
width: 0.875rem;
height: 0.875rem;
color: rgb(22 163 74);
flex: none;
}
.topbar__icon svg,
.topbar__phone-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.topbar__socials {
display: flex;
align-items: center;
gap: 0.5rem;
}
.topbar__social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
color: rgb(22 163 74);
transition: color 0.2s ease;
}
.topbar__social:hover {
color: rgb(74 222 128);
}
.topbar__social svg {
width: 100%;
height: 100%;
fill: currentColor;
}
.topbar__social--max {
width: 1rem;
height: 1rem;
color: rgb(22 163 74);
}
.topbar__social--max svg {
width: 100%;
height: 100%;
display: block;
fill: currentColor;
}
.topbar__phones {
align-items: center;
}
.topbar__phones--mobile {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.topbar__phones--mobile a {
font-size: 0.75rem;
transition: color 0.2s ease;
}
.topbar__phones--mobile a:hover {
color: rgb(187 247 208);
}
.topbar__phones--desktop {
display: none;
}
.topbar__separator {
color: rgb(22 163 74);
}
.topbar__email {
transition: color 0.2s ease;
}
.topbar__email:hover {
color: rgb(187 247 208);
}
/* =========================================================
HEADER
========================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: hsl(var(--background));
border-bottom: 1px solid hsl(var(--border));
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
}
.site-logo {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.site-logo__mark {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 2.5rem;
}
.site-logo__image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.site-logo__text {
line-height: 1.1;
}
.site-logo__title {
display: block;
color: hsl(var(--foreground));
font-size: 1.125rem;
font-weight: 700;
}
.site-logo__subtitle {
display: block;
margin-top: 0.1rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.desktop-nav {
display: none;
}
.desktop-nav__link {
padding: 0.375rem 0.75rem;
border-radius: calc(var(--radius) - 2px);
color: hsl(var(--foreground));
font-size: 0.875rem;
transition:
color 0.2s ease,
background-color 0.2s ease;
}
.desktop-nav__link:hover {
color: hsl(var(--primary));
}
.desktop-nav__link.is-active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.site-header__actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.header-icon-button {
position: relative;
display: inline-flex;
width: 2.25rem;
height: 2.25rem;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
color: hsl(var(--foreground));
transition: background-color 0.2s ease;
}
.header-icon-button:hover {
background: hsl(var(--accent));
}
.header-icon-button svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.header-cart__count {
position: absolute;
top: -0.25rem;
right: -0.25rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
padding: 0;
border-radius: 999px;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 0.625rem;
font-weight: 600;
}
.account-button {
display: none;
align-items: center;
gap: 0.375rem;
min-height: 2.25rem;
padding: 0 0.75rem;
border: 1px solid hsl(var(--input));
border-radius: calc(var(--radius) - 2px);
background: hsl(var(--background));
color: hsl(var(--foreground));
font-size: 0.875rem;
font-weight: 500;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.account-button:hover {
background: hsl(var(--accent));
}
.account-button svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
.mobile-menu-button {
display: inline-flex;
}
.mobile-menu-button__close {
display: none;
}
.mobile-menu-button.is-open .mobile-menu-button__open {
display: none;
}
.mobile-menu-button.is-open .mobile-menu-button__close {
display: block;
}
.mobile-nav {
display: none;
padding-bottom: 1rem;
border-top: 1px solid hsl(var(--border));
background: hsl(var(--background));
}
.mobile-nav.is-open {
display: block;
}
.mobile-nav__link {
display: block;
padding: 0.75rem 1rem;
color: hsl(var(--foreground));
font-size: 0.875rem;
transition:
color 0.2s ease,
background-color 0.2s ease;
}
.mobile-nav__link:hover {
background: hsl(var(--accent));
}
.mobile-nav__link.is-active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.mobile-nav__account-wrap {
padding: 0.5rem 1rem 0;
}
.account-button--mobile {
display: flex;
width: 100%;
justify-content: center;
}
/* =========================================================
RESPONSIVE HEADER
========================================================= */
@media (min-width: 640px) {
.topbar__left {
flex-direction: row;
}
.account-button {
display: inline-flex;
}
.mobile-nav__account-wrap {
display: none;
}
}
@media (min-width: 768px) {
.topbar__right {
flex-direction: row;
}
}
@media (min-width: 1024px) {
.topbar__inner {
flex-direction: row;
gap: 1rem;
}
.topbar__left {
gap: 1.5rem;
}
.topbar__right {
gap: 1rem;
}
.topbar__phones--mobile {
display: none;
}
.topbar__phones--desktop {
display: flex;
flex-direction: row;
gap: 0.25rem;
}
.desktop-nav {
display: flex;
align-items: center;
gap: 0.25rem;
}
.mobile-menu-button {
display: none;
}
.mobile-nav {
display: none !important;
}
}
/* =========================================================
FOOTER
========================================================= */
.site-footer {
background: hsl(var(--footer));
color: hsl(var(--footer-foreground));
}
.site-footer__main {
padding-top: 3rem;
padding-bottom: 3rem;
}
.site-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.site-footer__brand {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.site-footer__brand-mark {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 2.5rem;
}
.site-footer__brand-image {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.site-footer__brand-name,
.site-footer__title {
color: hsl(var(--muted));
}
.site-footer__brand-name {
font-size: 1.125rem;
font-weight: 700;
}
.site-footer__description {
margin: 0;
font-size: 0.875rem;
line-height: 1.625;
}
.site-footer__title {
margin: 0 0 1rem;
font-size: 1rem;
font-weight: 600;
}
.site-footer__links,
.site-footer__contacts {
margin: 0;
padding: 0;
list-style: none;
font-size: 0.875rem;
}
.site-footer__links {
display: grid;
gap: 0.5rem;
}
.site-footer__links a,
.site-footer__contacts a,
.site-footer__map-button {
color: inherit;
transition: color 0.2s ease;
}
.site-footer__links a:hover,
.site-footer__contacts a:hover,
.site-footer__map-button:hover {
color: hsl(var(--primary));
}
.site-footer__contacts {
display: grid;
gap: 0.75rem;
}
.site-footer__contacts li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.site-footer__contacts li > div a {
display: block;
}
.site-footer__contact-icon {
width: 1rem;
height: 1rem;
margin-top: 0.125rem;
flex: 0 0 1rem;
color: hsl(var(--primary));
}
.site-footer__contact-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.site-footer__map-button {
text-align: left;
}
.site-footer__bottom {
border-top: 1px solid hsl(var(--muted-foreground) / 0.2);
}
.site-footer__bottom-inner {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.site-footer__developer {
color: rgb(245 158 11);
transition: color 0.2s ease;
}
.site-footer__developer:hover {
color: rgb(251 191 36);
}
/* =========================================================
MAP MODAL
========================================================= */
.map-modal {
position: fixed;
inset: 0;
z-index: 200;
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
}
.map-modal.is-open {
display: flex;
animation: imidjstroy-fade-in 0.25s ease-out;
}
.map-modal__backdrop {
position: absolute;
inset: 0;
background: rgb(0 0 0 / 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.map-modal__panel {
position: relative;
width: 100%;
max-width: 42rem;
overflow: hidden;
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: 28px;
background:
linear-gradient(
135deg,
rgb(255 255 255 / 0.20),
rgb(255 255 255 / 0.10) 50%,
rgb(255 255 255 / 0.05)
);
box-shadow: 0 25px 80px rgb(0 0 0 / 0.35);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
animation: imidjstroy-scale-in 0.3s ease-out;
}
.map-modal__shine {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(
circle at top left,
rgb(255 255 255 / 0.28),
transparent 30%
);
}
.map-modal__content {
position: relative;
z-index: 1;
padding: 1.5rem;
}
.map-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
.map-modal__badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.75rem;
border: 1px solid rgb(255 255 255 / 0.2);
border-radius: 999px;
background: rgb(255 255 255 / 0.1);
color: rgb(255 255 255 / 0.75);
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.map-modal__badge svg {
width: 0.875rem;
height: 0.875rem;
fill: none;
stroke: rgb(74 222 128);
stroke-width: 2;
}
.map-modal__title {
margin: 1rem 0 0;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
}
.map-modal__address {
max-width: 520px;
margin: 0.5rem 0 0;
color: rgb(255 255 255 / 0.8);
font-size: 0.875rem;
line-height: 1.625;
}
.map-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 2.5rem;
border: 1px solid rgb(255 255 255 / 0.15);
border-radius: 999px;
background: rgb(255 255 255 / 0.1);
color: rgb(255 255 255 / 0.8);
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.map-modal__close:hover {
background: rgb(255 255 255 / 0.15);
color: #fff;
}
.map-modal__close svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.map-modal__map {
position: relative;
overflow: hidden;
margin-bottom: 1.25rem;
border: 1px solid rgb(255 255 255 / 0.15);
border-radius: 1rem;
background: rgb(255 255 255 / 0.1);
}
.map-modal__map::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top, rgb(0 0 0 / 0.2), transparent);
}
.map-modal__map iframe {
display: block;
width: 100%;
height: 260px;
border: 0;
}
.map-modal__actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.map-modal__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0 1rem;
border-radius: 0.75rem;
font-size: 0.875rem;
font-weight: 500;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.map-modal__button svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.map-modal__button--primary {
background: rgb(22 163 74);
color: #fff;
box-shadow: 0 10px 30px rgb(22 163 74 / 0.35);
}
.map-modal__button--primary:hover {
background: rgb(34 197 94);
}
.map-modal__button--secondary {
border: 1px solid rgb(255 255 255 / 0.2);
background: rgb(255 255 255 / 0.1);
color: #fff;
}
.map-modal__button--secondary:hover {
background: rgb(255 255 255 / 0.15);
}
body.map-modal-open {
overflow: hidden;
}
@media (min-width: 640px) {
.map-modal {
padding: 1.5rem;
}
.map-modal__content {
padding: 1.75rem;
}
.map-modal__title {
font-size: 1.5rem;
}
.map-modal__address {
font-size: 0.9375rem;
}
.map-modal__map iframe {
height: 320px;
}
.map-modal__actions {
flex-direction: row;
}
}
@media (min-width: 768px) {
.site-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.site-footer__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 639px) {
.site-footer__bottom-inner {
align-items: flex-start;
flex-direction: column;
}
}
/* =========================================================
HOME HERO
Ported from src/components/home/HeroSection.tsx
========================================================= */
.home-hero {
position: relative;
display: flex;
min-height: 480px;
align-items: center;
overflow: hidden;
}
.home-hero__background,
.home-hero__overlay {
position: absolute;
inset: 0;
}
.home-hero__background {
background-position: center;
background-size: cover;
}
.home-hero__overlay {
background: hsl(var(--secondary) / 0.70);
}
.home-hero__container {
position: relative;
z-index: 1;
padding-top: 4rem;
padding-bottom: 4rem;
}
.home-hero__content {
max-width: 36rem;
}
.home-hero__title {
margin: 0 0 1rem;
color: hsl(var(--secondary-foreground));
font-size: 2.25rem;
font-weight: 700;
line-height: 1.25;
}
.home-hero__title span {
color: hsl(var(--primary));
}
.home-hero__text {
margin: 0 0 2rem;
color: hsl(var(--secondary-foreground) / 0.80);
font-size: 1.125rem;
line-height: 1.625;
}
.home-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 2rem;
}
.home-hero__button {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0 2rem;
border: 1px solid transparent;
border-radius: calc(var(--radius) - 2px);
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.home-hero__button svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-hero__button--primary {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.home-hero__button--primary:hover {
background: hsl(var(--primary) / 0.90);
}
.home-hero__button--outline {
border-color: hsl(var(--primary-foreground) / 0.50);
background: transparent;
color: hsl(var(--primary-foreground));
}
.home-hero__button--outline:hover {
background: hsl(var(--primary-foreground) / 0.10);
color: hsl(var(--primary-foreground));
}
.home-hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
color: hsl(var(--secondary-foreground) / 0.70);
font-size: 0.875rem;
}
.home-hero__meta-item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
a.home-hero__meta-item {
transition: color 0.2s ease;
}
a.home-hero__meta-item:hover {
color: hsl(var(--primary));
}
.home-hero__meta-item svg {
width: 1rem;
height: 1rem;
flex: 0 0 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (min-width: 768px) {
.home-hero__title {
font-size: 3rem;
}
}
.topbar__social--max img {
display: block;
width: 1rem;
height: 1rem;
object-fit: contain;
}
/* 2GIS widget */
.map-modal__map iframe {
display: block;
width: 100%;
min-height: 320px;
border: 0;
}
/* =========================================================
HOME FEATURES
Ported from home/FeaturesSection.tsx
========================================================= */
.home-features {
padding-top: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid hsl(var(--border));
}
.home-features__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.home-feature-card {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--card));
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.home-feature-card:hover {
transform: scale(1.02);
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.10),
0 4px 6px -4px rgb(0 0 0 / 0.10);
}
.home-feature-card__icon {
display: flex;
width: 3rem;
height: 3rem;
flex: 0 0 3rem;
align-items: center;
justify-content: center;
border-radius: 999px;
background: hsl(var(--primary) / 0.10);
color: hsl(var(--primary));
}
.home-feature-card__icon svg {
width: 1.5rem;
height: 1.5rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-feature-card__content {
min-width: 0;
}
.home-feature-card__title {
margin: 0;
color: hsl(var(--card-foreground));
font-size: 0.875rem;
font-weight: 600;
line-height: 1.25rem;
}
.home-feature-card__description {
margin: 0.125rem 0 0;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
line-height: 1rem;
}
@media (min-width: 640px) {
.home-features__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.home-features__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* =========================================================
HOME CATEGORIES
Ported from home/CategoriesSection.tsx + catalog/CategoryCard.tsx
========================================================= */
.home-categories {
padding-top: 3rem;
padding-bottom: 3rem;
}
.home-categories__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
}
.home-categories__title {
margin: 0;
color: hsl(var(--foreground));
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
}
.home-categories__all {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
transition: color 0.2s ease;
}
.home-categories__all:hover {
color: hsl(var(--primary));
}
.home-categories__all svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-categories__carousel-wrap {
position: relative;
padding-right: 2.5rem;
padding-left: 2.5rem;
}
.home-categories__viewport {
width: 100%;
padding-top: 0.5rem;
padding-bottom: 0.75rem;
margin-top: -0.5rem;
margin-bottom: -0.75rem;
overflow: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
}
.home-categories__viewport::-webkit-scrollbar {
display: none;
}
.home-categories__track {
display: flex;
margin-left: -0.75rem;
}
.home-categories__item {
min-width: 0;
flex: 0 0 50%;
padding-left: 0.75rem;
}
.category-card {
position: relative;
display: block;
width: 100%;
height: 10rem;
overflow: hidden;
border: 2px solid rgb(0 0 0 / 0.35);
border-radius: 0.75rem;
background: #fff;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.category-card:hover {
transform: scale(1.02);
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.10),
0 4px 6px -4px rgb(0 0 0 / 0.10);
}
.category-card__image,
.category-card__fallback,
.category-card__gradient {
position: absolute;
inset: 0;
}
.category-card__image {
background-position: center;
background-size: cover;
}
.category-card__fallback {
display: flex;
align-items: center;
justify-content: center;
color: rgb(209 213 219);
font-size: 3rem;
}
.category-card__gradient {
top: auto;
height: 35%;
background: linear-gradient(
to top,
rgb(0 0 0 / 1),
rgb(0 0 0 / 0.50),
transparent
);
}
.category-card__content {
position: relative;
z-index: 1;
display: flex;
height: 100%;
flex-direction: column;
justify-content: flex-end;
padding: 0 1rem 0.5rem;
}
.category-card__name {
display: -webkit-box;
max-width: 100%;
overflow: hidden;
color: #fff;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
-webkit-text-stroke: 0.5px rgb(0 0 0 / 0.30);
}
.category-card__count {
margin-top: 0.25rem;
color: #fff;
font-size: 0.75rem;
text-align: center;
-webkit-text-stroke: 0.5px rgb(0 0 0 / 0.20);
}
.home-categories__arrow {
position: absolute;
top: 50%;
z-index: 5;
display: inline-flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
border: 1px solid hsl(var(--border));
border-radius: 999px;
background: hsl(var(--background));
color: hsl(var(--foreground));
box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
transform: translateY(-50%);
transition:
background-color 0.2s ease,
color 0.2s ease,
opacity 0.2s ease;
}
.home-categories__arrow:hover {
background: hsl(var(--accent));
color: hsl(var(--primary));
}
.home-categories__arrow:disabled {
opacity: 0.35;
cursor: default;
}
.home-categories__arrow svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-categories__arrow--prev {
left: 0;
}
.home-categories__arrow--next {
right: 0;
}
.home-categories__empty {
padding: 2rem;
border: 1px dashed hsl(var(--border));
border-radius: var(--radius);
color: hsl(var(--muted-foreground));
text-align: center;
}
@media (min-width: 640px) {
.home-categories__item {
flex-basis: 33.333333%;
}
}
@media (min-width: 768px) {
.home-categories__item {
flex-basis: 25%;
}
}
@media (min-width: 1024px) {
.home-categories__item {
flex-basis: 20%;
}
}
/* =========================================================
HOME BUILDING MATERIALS
Ported from home/BuildingMaterialsSection.tsx
========================================================= */
.home-building {
padding-top: 3rem;
padding-bottom: 3rem;
}
.home-building__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
}
.home-building__title {
margin: 0;
color: hsl(var(--foreground));
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
}
.home-building__all {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
transition: color 0.2s ease;
}
.home-building__all:hover {
color: hsl(var(--primary));
}
.home-building__all svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-building__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.building-product-card {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.building-product-card:hover {
transform: scale(1.02);
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.10),
0 4px 6px -4px rgb(0 0 0 / 0.10);
}
.building-product-card__media {
position: relative;
display: flex;
aspect-ratio: 1 / 1;
align-items: center;
justify-content: center;
padding: 1.5rem;
overflow: hidden;
background: hsl(var(--accent));
}
.building-product-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0.5rem;
}
.building-product-card__placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.50);
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.building-product-card__badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 2;
display: inline-flex;
align-items: center;
min-height: 1.25rem;
padding: 0.125rem 0.5rem;
border-radius: calc(var(--radius) - 4px);
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 0.75rem;
font-weight: 600;
}
.building-product-card__badge.is-discount {
background: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
}
.building-product-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 1rem;
}
.building-product-card__category {
color: hsl(var(--primary));
font-size: 0.75rem;
}
.building-product-card__name {
display: -webkit-box;
min-height: 2.5rem;
margin: 0.25rem 0 0;
overflow: hidden;
color: hsl(var(--card-foreground));
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.building-product-card__name a:hover {
color: hsl(var(--primary));
}
.building-product-card__sku,
.building-product-card__stock {
display: block;
margin-top: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
}
.building-product-card__sku {
color: hsl(var(--muted-foreground));
}
.building-product-card__stock.is-in-stock {
color: rgb(22 163 74);
}
.building-product-card__stock.is-out-of-stock {
color: rgb(239 68 68);
}
.building-product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: auto;
padding-top: 0.75rem;
}
.building-product-card__price {
min-width: 0;
}
.building-product-card__amount {
display: block;
color: hsl(var(--foreground));
font-size: 1.125rem;
font-weight: 700;
line-height: 1.75rem;
white-space: nowrap;
}
.building-product-card__amount del {
margin-right: 0.25rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
font-weight: 400;
}
.building-product-card__amount ins {
text-decoration: none;
}
.building-product-card__unit {
display: block;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
line-height: 1rem;
}
.building-product-card__cart {
display: inline-flex !important;
min-height: 2rem !important;
align-items: center !important;
justify-content: center !important;
gap: 0.375rem !important;
margin: 0 !important;
padding: 0 0.75rem !important;
border: 0 !important;
border-radius: calc(var(--radius) - 2px) !important;
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
line-height: 1 !important;
white-space: nowrap;
transition:
background-color 0.2s ease,
opacity 0.2s ease;
}
.building-product-card__cart:hover {
background: hsl(var(--primary) / 0.90) !important;
color: hsl(var(--primary-foreground)) !important;
}
.building-product-card__cart svg {
width: 0.875rem;
height: 0.875rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.building-product-card__cart.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.home-building__empty {
padding: 2rem;
border: 1px dashed hsl(var(--border));
border-radius: var(--radius);
color: hsl(var(--muted-foreground));
text-align: center;
}
@media (min-width: 640px) {
.home-building__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.home-building__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 380px) {
.building-product-card__cart span {
display: none;
}
.building-product-card__cart {
width: 2rem !important;
padding: 0 !important;
}
}
/* =========================================================
HOME ADVERTISING MATERIALS
========================================================= */
.home-ad-materials {
padding-top: 3rem;
padding-bottom: 3rem;
background: hsl(var(--accent) / 0.35);
}
.home-ad-materials__heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
}
.home-ad-materials__eyebrow {
display: block;
margin-bottom: 0.25rem;
color: hsl(var(--primary));
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.home-ad-materials__title {
margin: 0;
color: hsl(var(--foreground));
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
}
.home-ad-materials__all {
display: inline-flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
transition: color 0.2s ease;
}
.home-ad-materials__all:hover {
color: hsl(var(--primary));
}
.home-ad-materials__all svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-ad-materials__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.ad-product-card {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.ad-product-card:hover {
transform: scale(1.02);
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.10),
0 4px 6px -4px rgb(0 0 0 / 0.10);
}
.ad-product-card__media {
position: relative;
display: flex;
aspect-ratio: 1 / 1;
align-items: center;
justify-content: center;
padding: 1.5rem;
overflow: hidden;
background: hsl(var(--accent));
}
.ad-product-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0.5rem;
}
.ad-product-card__placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.50);
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.ad-product-card__badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 2;
display: inline-flex;
align-items: center;
min-height: 1.25rem;
padding: 0.125rem 0.5rem;
border-radius: calc(var(--radius) - 4px);
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 0.75rem;
font-weight: 600;
}
.ad-product-card__badge.is-discount {
background: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
}
.ad-product-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 1rem;
}
.ad-product-card__category {
color: hsl(var(--primary));
font-size: 0.75rem;
}
.ad-product-card__name {
display: -webkit-box;
min-height: 2.5rem;
margin: 0.25rem 0 0;
overflow: hidden;
color: hsl(var(--card-foreground));
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.ad-product-card__name a:hover {
color: hsl(var(--primary));
}
.ad-product-card__sku,
.ad-product-card__stock {
display: block;
margin-top: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
}
.ad-product-card__sku {
color: hsl(var(--muted-foreground));
}
.ad-product-card__stock.is-in-stock {
color: rgb(22 163 74);
}
.ad-product-card__stock.is-out-of-stock {
color: rgb(239 68 68);
}
.ad-product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: auto;
padding-top: 0.75rem;
}
.ad-product-card__price {
min-width: 0;
}
.ad-product-card__amount {
display: block;
color: hsl(var(--foreground));
font-size: 1.125rem;
font-weight: 700;
line-height: 1.75rem;
white-space: nowrap;
}
.ad-product-card__amount del {
margin-right: 0.25rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
font-weight: 400;
}
.ad-product-card__amount ins {
text-decoration: none;
}
.ad-product-card__unit {
display: block;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
line-height: 1rem;
}
.ad-product-card__cart {
display: inline-flex !important;
min-height: 2rem !important;
align-items: center !important;
justify-content: center !important;
gap: 0.375rem !important;
margin: 0 !important;
padding: 0 0.75rem !important;
border: 0 !important;
border-radius: calc(var(--radius) - 2px) !important;
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
line-height: 1 !important;
white-space: nowrap;
transition:
background-color 0.2s ease,
opacity 0.2s ease;
}
.ad-product-card__cart:hover {
background: hsl(var(--primary) / 0.90) !important;
color: hsl(var(--primary-foreground)) !important;
}
.ad-product-card__cart svg {
width: 0.875rem;
height: 0.875rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ad-product-card__cart.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.home-ad-materials__empty {
padding: 2rem;
border: 1px dashed hsl(var(--border));
border-radius: var(--radius);
background: hsl(var(--background));
color: hsl(var(--muted-foreground));
text-align: center;
}
@media (min-width: 640px) {
.home-ad-materials__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.home-ad-materials__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* =========================================================
POPULAR PRODUCTS
Ported from home/PopularProducts.tsx + catalog/ProductCard.tsx
========================================================= */
.home-popular {
padding-top: 3rem;
padding-bottom: 3rem;
background: hsl(var(--accent) / 0.50);
}
.home-popular__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
}
.home-popular__title {
margin: 0;
color: hsl(var(--foreground));
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
}
.home-popular__all {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
transition: color 0.2s ease;
}
.home-popular__all:hover {
color: hsl(var(--primary));
}
.home-popular__all svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-popular__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.popular-product-card {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.popular-product-card:hover {
transform: scale(1.02);
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.10),
0 4px 6px -4px rgb(0 0 0 / 0.10);
}
.popular-product-card__media {
position: relative;
display: flex;
aspect-ratio: 1 / 1;
align-items: center;
justify-content: center;
padding: 1rem;
overflow: hidden;
background: hsl(var(--accent));
cursor: pointer;
}
.popular-product-card__media img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0.5rem;
}
.popular-product-card__placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.50);
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.popular-product-card__badge,
.popular-product-card__availability {
position: absolute;
top: 0.75rem;
z-index: 2;
display: inline-flex;
min-height: 1.25rem;
align-items: center;
padding: 0.125rem 0.5rem;
border-radius: calc(var(--radius) - 4px);
font-size: 0.75rem;
font-weight: 600;
}
.popular-product-card__badge {
left: 0.75rem;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.popular-product-card__badge.is-discount {
background: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
}
.popular-product-card__availability {
right: 0.75rem;
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
}
.popular-product-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 1rem;
}
.popular-product-card__category {
color: hsl(var(--primary));
font-size: 0.75rem;
font-weight: 500;
}
.popular-product-card__name {
display: -webkit-box;
min-height: 2.5rem;
margin: 0.25rem 0 0;
overflow: hidden;
color: hsl(var(--card-foreground));
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.popular-product-card__description {
display: -webkit-box;
margin: 0.25rem 0 0;
overflow: hidden;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
line-height: 1rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.popular-product-card__sku,
.popular-product-card__stock {
display: block;
margin-top: 0.25rem;
font-size: 0.75rem;
line-height: 1rem;
}
.popular-product-card__sku {
color: hsl(var(--muted-foreground));
}
.popular-product-card__stock.is-in-stock {
color: rgb(22 163 74);
}
.popular-product-card__stock.is-out-of-stock {
color: rgb(239 68 68);
}
.popular-product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.75rem;
}
.popular-product-card__price {
min-width: 0;
}
.popular-product-card__amount {
display: block;
color: hsl(var(--foreground));
font-size: 1.125rem;
font-weight: 700;
line-height: 1.75rem;
white-space: nowrap;
}
.popular-product-card__amount del {
margin-right: 0.25rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
font-weight: 400;
}
.popular-product-card__amount ins {
text-decoration: none;
}
.popular-product-card__unit {
display: block;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
line-height: 1rem;
}
.popular-product-card__actions {
display: flex;
gap: 0.375rem;
}
.popular-product-card__action {
display: inline-flex !important;
width: 2rem !important;
height: 2rem !important;
min-height: 2rem !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border-radius: calc(var(--radius) - 2px) !important;
font-size: 0.75rem !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
opacity 0.2s ease;
}
.popular-product-card__action svg {
width: 0.875rem;
height: 0.875rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.popular-product-card__action--view {
border: 1px solid hsl(var(--input)) !important;
background: hsl(var(--background)) !important;
color: hsl(var(--foreground)) !important;
}
.popular-product-card__action--view:hover {
background: hsl(var(--accent)) !important;
}
.popular-product-card__action--cart {
border: 1px solid hsl(var(--primary)) !important;
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
}
.popular-product-card__action--cart:hover {
background: hsl(var(--primary) / 0.90) !important;
}
.popular-product-card__action.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (min-width: 640px) {
.home-popular__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.home-popular__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* =========================================================
HOME CONTACT FORM
Ported from home/ContactFormSection.tsx
========================================================= */
.home-contact {
padding-top: 4rem;
padding-bottom: 4rem;
}
.home-contact__grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: start;
}
.home-contact__title {
margin: 0 0 1rem;
color: hsl(var(--foreground));
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
}
.home-contact__lead {
margin: 0 0 1.5rem;
color: hsl(var(--muted-foreground));
line-height: 1.625;
}
.home-contact__contacts {
display: grid;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
color: hsl(var(--foreground));
font-size: 0.875rem;
}
.home-contact__contacts li {
display: flex;
align-items: center;
gap: 0.5rem;
}
.home-contact__contacts svg {
width: 1rem;
height: 1rem;
flex: 0 0 1rem;
fill: none;
stroke: hsl(var(--primary));
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-contact__contacts a {
transition: color 0.2s ease;
}
.home-contact__contacts a:hover {
color: hsl(var(--primary));
}
.home-contact__form {
position: relative;
display: grid;
gap: 1rem;
padding: 1.5rem;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
}
.home-contact__row {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
.home-contact__field label {
display: block;
margin-bottom: 0.375rem;
color: hsl(var(--card-foreground));
font-size: 0.875rem;
font-weight: 500;
}
.home-contact__field input,
.home-contact__field textarea {
display: block;
width: 100%;
border: 1px solid hsl(var(--input));
border-radius: calc(var(--radius) - 2px);
outline: none;
background: hsl(var(--background));
color: hsl(var(--foreground));
font: inherit;
font-size: 0.875rem;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.home-contact__field input {
height: 2.5rem;
padding: 0 0.75rem;
}
.home-contact__field textarea {
min-height: 6rem;
padding: 0.625rem 0.75rem;
resize: vertical;
}
.home-contact__field input::placeholder,
.home-contact__field textarea::placeholder {
color: hsl(var(--muted-foreground));
}
.home-contact__field input:focus,
.home-contact__field textarea:focus {
border-color: hsl(var(--ring));
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.15);
}
.home-contact__submit {
display: inline-flex;
width: 100%;
min-height: 2.5rem;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0 1rem;
border-radius: calc(var(--radius) - 2px);
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 0.875rem;
font-weight: 500;
transition:
background-color 0.2s ease,
opacity 0.2s ease;
}
.home-contact__submit:hover {
background: hsl(var(--primary) / 0.90);
}
.home-contact__submit:disabled {
opacity: 0.60;
cursor: wait;
}
.home-contact__submit svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-contact__notice {
margin-bottom: 1rem;
padding: 0.875rem 1rem;
border-radius: calc(var(--radius) - 2px);
font-size: 0.875rem;
line-height: 1.5;
}
.home-contact__notice--success {
border: 1px solid rgb(22 163 74 / 0.30);
background: rgb(22 163 74 / 0.08);
color: rgb(21 128 61);
}
.home-contact__notice--error {
border: 1px solid rgb(220 38 38 / 0.30);
background: rgb(220 38 38 / 0.08);
color: rgb(185 28 28);
}
.home-contact__honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
@media (min-width: 640px) {
.home-contact__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.home-contact__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* =========================================================
CATALOG LANDING
Ported from src/pages/Catalog.tsx
========================================================= */
.catalog-landing {
padding-top: 1.5rem;
padding-bottom: 3rem;
}
.catalog-landing__title {
margin: 0 0 2.5rem;
color: hsl(var(--foreground));
font-size: 1.875rem;
font-weight: 700;
line-height: 2.25rem;
}
.catalog-landing__sections {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.catalog-section-card {
position: relative;
display: flex;
min-height: 320px;
overflow: hidden;
flex-direction: column;
justify-content: space-between;
border-radius: 1rem;
background: #fff;
box-shadow: 0 10px 40px rgb(0 0 0 / 0.08);
transition:
transform 0.5s ease,
box-shadow 0.5s ease;
}
.catalog-section-card:hover {
transform: translateY(-0.25rem);
box-shadow: 0 20px 60px rgb(0 0 0 / 0.14);
}
.catalog-section-card__background,
.catalog-section-card__shimmer {
position: absolute;
inset: 0;
}
.catalog-section-card__background img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.catalog-section-card:hover .catalog-section-card__background img {
transform: scale(1.05);
}
.catalog-section-card__placeholder {
width: 100%;
height: 100%;
background:
radial-gradient(circle at 18% 25%, rgb(34 197 94 / 0.16), transparent 24%),
linear-gradient(135deg, #f8faf9, #edf5f0 55%, #e4eee7);
}
.catalog-section-card__shimmer {
left: -35%;
top: -20%;
width: 30%;
height: 140%;
opacity: 0;
pointer-events: none;
background: linear-gradient(
to right,
transparent,
rgb(255 255 255 / 0.55),
transparent
);
transform: skewX(-10deg);
}
.catalog-section-card:hover .catalog-section-card__shimmer {
opacity: 1;
animation: catalog-card-shimmer 1.5s ease-out;
}
@keyframes catalog-card-shimmer {
from {
transform: translateX(0) skewX(-10deg);
}
to {
transform: translateX(520%) skewX(-10deg);
}
}
.catalog-section-card__content,
.catalog-section-card__footer {
position: relative;
z-index: 2;
padding: 2rem;
}
.catalog-section-card__content {
padding-bottom: 1rem;
}
.catalog-section-card__footer {
padding-top: 0;
}
.catalog-section-card__icon {
display: inline-flex;
width: 3.5rem;
height: 3.5rem;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
border-radius: 1rem;
background: rgb(255 255 255 / 0.75);
box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
color: rgb(21 128 61);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.catalog-section-card__icon svg {
width: 1.75rem;
height: 1.75rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.catalog-section-card__title {
margin: 0 0 0.75rem;
color: rgb(38 38 38);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.25;
}
.catalog-section-card__description {
max-width: 370px;
margin-bottom: 1rem;
color: rgb(115 115 115);
font-size: 0.875rem;
line-height: 1.7;
}
.catalog-section-card__description p {
margin: 0 0 0.25rem;
}
.catalog-section-card__highlight {
position: relative;
color: rgb(38 38 38);
font-weight: 600;
}
.catalog-section-card__highlight::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 6px;
background: rgb(74 222 128 / 0.20);
filter: blur(3px);
}
.catalog-section-card__features {
display: grid;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
color: rgb(115 115 115);
font-size: 0.875rem;
}
.catalog-section-card__features li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.catalog-section-card__features li > span {
width: 0.375rem;
height: 0.375rem;
flex: 0 0 0.375rem;
margin-top: 0.375rem;
border-radius: 999px;
background: linear-gradient(to right, rgb(34 197 94), rgb(52 211 153));
box-shadow: 0 0 6px rgb(34 197 94 / 0.60);
}
.catalog-section-card__button {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0 1rem;
border: 1px solid rgb(0 0 0 / 0.10);
border-radius: 0.75rem;
background: rgb(255 255 255 / 0.85);
color: rgb(38 38 38);
font-size: 0.875rem;
font-weight: 500;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.catalog-section-card__button svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.3s ease;
}
.catalog-section-card:hover .catalog-section-card__button {
border-color: rgb(22 163 74);
background: rgb(22 163 74);
color: #fff;
}
.catalog-section-card:hover .catalog-section-card__button svg {
transform: translateX(0.25rem);
}
.catalog-native {
padding-top: 2rem;
padding-bottom: 4rem;
}
@media (min-width: 768px) {
.catalog-landing {
padding-top: 2rem;
padding-bottom: 4rem;
}
.catalog-landing__sections {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.catalog-section-card__title {
font-size: 1.875rem;
}
.catalog-section-card__description {
font-size: 0.9375rem;
}
}
/* =========================================================
CATALOG TYPE
Exact layout port from src/pages/CatalogType.tsx
========================================================= */
.catalog-type {
padding-top: 2rem;
padding-bottom: 2rem;
}
.catalog-type__breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
font-size: 0.875rem;
}
.catalog-type__back {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: hsl(var(--muted-foreground));
transition: color 0.2s ease;
}
.catalog-type__back:hover {
color: hsl(var(--primary));
}
.catalog-type__back svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.catalog-type__slash {
color: hsl(var(--muted-foreground));
}
.catalog-type__current {
color: hsl(var(--foreground));
font-weight: 500;
}
.catalog-type__title {
margin: 0 0 2rem;
color: hsl(var(--foreground));
font-size: 1.875rem;
font-weight: 700;
line-height: 2.25rem;
}
.catalog-type__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
/* Same visual CategoryCard used in the original React project. */
.catalog-type-card {
position: relative;
display: block;
height: 10rem;
overflow: hidden;
border: 2px solid rgb(0 0 0 / 0.35);
border-radius: 0.75rem;
background: #fff;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.catalog-type-card:hover {
transform: translateY(-0.25rem);
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.10),
0 4px 6px -4px rgb(0 0 0 / 0.10);
}
.catalog-type-card__image,
.catalog-type-card__fallback,
.catalog-type-card__gradient {
position: absolute;
inset: 0;
}
.catalog-type-card__image {
background-position: center;
background-size: cover;
}
.catalog-type-card__fallback {
display: flex;
align-items: center;
justify-content: center;
color: rgb(209 213 219);
font-size: 3rem;
}
.catalog-type-card__gradient {
top: auto;
height: 35%;
background: linear-gradient(
to top,
rgb(0 0 0 / 1),
rgb(0 0 0 / 0.50),
transparent
);
}
.catalog-type-card__content {
position: relative;
z-index: 1;
display: flex;
height: 100%;
flex-direction: column;
justify-content: flex-end;
padding: 0 1rem 0.5rem;
}
.catalog-type-card__name {
display: -webkit-box;
max-width: 100%;
overflow: hidden;
color: #fff;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.25;
text-align: center;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
-webkit-text-stroke: 0.5px rgb(0 0 0 / 0.30);
}
.catalog-type-card__count {
margin-top: 0.25rem;
color: #fff;
font-size: 0.75rem;
text-align: center;
-webkit-text-stroke: 0.5px rgb(0 0 0 / 0.20);
}
.catalog-type__empty {
grid-column: 1 / -1;
margin: 0;
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
}
@media (min-width: 640px) {
.catalog-type__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.catalog-type__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.catalog-type__grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
/* =========================================================
LEAF CATEGORY / CATEGORY PRODUCTS
Port from src/pages/CategoryProducts.tsx + ProductCard.tsx
========================================================= */
.category-products {
padding: 2rem 0;
}
.category-products__breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
font-size: 0.875rem;
}
.category-products__breadcrumb a,
.category-products__breadcrumb span {
color: hsl(var(--muted-foreground));
}
.category-products__breadcrumb a {
transition: color 0.2s ease;
}
.category-products__breadcrumb a:hover {
color: hsl(var(--primary));
}
.category-products__breadcrumb strong {
color: hsl(var(--foreground));
font-weight: 500;
}
.category-products__title {
margin: 0 0 1.5rem;
color: hsl(var(--foreground));
font-size: 1.875rem;
font-weight: 700;
line-height: 2.25rem;
}
.category-products__layout {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.category-products__sidebar {
width: 100%;
}
.category-products__filters {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1rem;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
}
.category-products__filter > label,
.category-products__filter > div + label {
display: block;
margin-bottom: 0.5rem;
color: hsl(var(--foreground));
font-size: 0.875rem;
font-weight: 500;
}
.category-products__search {
position: relative;
}
.category-products__search svg {
position: absolute;
top: 50%;
left: 0.75rem;
width: 1rem;
height: 1rem;
fill: none;
stroke: hsl(var(--muted-foreground));
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transform: translateY(-50%);
pointer-events: none;
}
.category-products__search input,
.category-products__filter select {
width: 100%;
min-height: 2.5rem;
border: 1px solid hsl(var(--input));
border-radius: calc(var(--radius) - 2px);
background: hsl(var(--background));
color: hsl(var(--foreground));
font: inherit;
font-size: 0.875rem;
outline: none;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.category-products__search input {
padding: 0.5rem 0.75rem 0.5rem 2.5rem;
}
.category-products__filter select {
padding: 0.5rem 2rem 0.5rem 0.75rem;
}
.category-products__search input:focus,
.category-products__filter select:focus {
border-color: hsl(var(--ring));
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.18);
}
.category-products__checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
color: hsl(var(--foreground));
font-size: 0.875rem;
cursor: pointer;
}
.category-products__checkbox input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.category-products__checkbox-box {
position: relative;
width: 1rem;
height: 1rem;
flex: 0 0 auto;
border: 1px solid hsl(var(--primary));
border-radius: 0.25rem;
background: hsl(var(--background));
}
.category-products__checkbox input:checked + .category-products__checkbox-box {
background: hsl(var(--primary));
}
.category-products__checkbox input:checked + .category-products__checkbox-box::after {
content: "";
position: absolute;
top: 0.1rem;
left: 0.3rem;
width: 0.25rem;
height: 0.5rem;
border-right: 2px solid hsl(var(--primary-foreground));
border-bottom: 2px solid hsl(var(--primary-foreground));
transform: rotate(45deg);
}
.category-products__range {
position: relative;
height: 1.25rem;
margin-top: 0.5rem;
}
.category-products__range-track,
.category-products__range-fill {
position: absolute;
top: 50%;
right: 0;
left: 0;
height: 0.25rem;
border-radius: 999px;
transform: translateY(-50%);
}
.category-products__range-track {
background: hsl(var(--muted));
}
.category-products__range-fill {
background: hsl(var(--primary));
}
.category-products__range-input {
position: absolute;
inset: 0;
width: 100%;
height: 1.25rem;
margin: 0;
background: transparent;
appearance: none;
pointer-events: none;
}
.category-products__range-input::-webkit-slider-thumb {
width: 1rem;
height: 1rem;
border: 2px solid hsl(var(--primary));
border-radius: 50%;
background: hsl(var(--background));
appearance: none;
pointer-events: auto;
cursor: pointer;
}
.category-products__range-input::-moz-range-thumb {
width: 0.8rem;
height: 0.8rem;
border: 2px solid hsl(var(--primary));
border-radius: 50%;
background: hsl(var(--background));
pointer-events: auto;
cursor: pointer;
}
.category-products__filter-actions {
display: flex;
gap: 0.5rem;
}
.category-products__apply,
.category-products__reset {
display: inline-flex;
min-height: 2.25rem;
align-items: center;
justify-content: center;
border-radius: calc(var(--radius) - 2px);
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
}
.category-products__apply {
flex: 1;
border: 1px solid hsl(var(--primary));
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.category-products__reset {
border: 1px solid hsl(var(--border));
background: hsl(var(--background));
color: hsl(var(--foreground));
}
.category-products__result {
margin: 0;
padding-top: 0.75rem;
border-top: 1px solid hsl(var(--border));
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.category-products__content {
min-width: 0;
flex: 1;
}
.category-products__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
/* ProductCard.tsx */
.category-product-card {
display: flex;
min-width: 0;
flex-direction: column;
overflow: hidden;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.category-product-card:hover {
transform: scale(1.02);
box-shadow:
0 10px 15px -3px rgb(0 0 0 / 0.10),
0 4px 6px -4px rgb(0 0 0 / 0.10);
}
.category-product-card__media {
position: relative;
display: flex;
aspect-ratio: 1 / 1;
align-items: center;
justify-content: center;
padding: 1rem;
background: hsl(var(--accent));
cursor: pointer;
}
.category-product-card__image {
width: 100%;
height: 100%;
border-radius: 0.5rem;
object-fit: contain;
}
.category-product-card__placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.5);
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.category-product-card__badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 2;
padding: 0.25rem 0.625rem;
border-radius: 999px;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 0.75rem;
font-weight: 500;
}
.category-product-card__badge--sale {
background: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
}
.category-product-card__badge--stock {
right: 0.75rem;
left: auto;
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
}
.category-product-card__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 1rem;
}
.category-product-card__category {
color: hsl(var(--primary));
font-size: 0.75rem;
font-weight: 500;
}
.category-product-card__name {
display: -webkit-box;
min-height: 2.5rem;
margin: 0.25rem 0 0;
overflow: hidden;
color: hsl(var(--card-foreground));
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.category-product-card__name a {
color: inherit;
}
.category-product-card__description {
display: -webkit-box;
margin: 0.25rem 0 0;
overflow: hidden;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
line-height: 1rem;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.category-product-card__sku,
.category-product-card__stock {
display: block;
margin-top: 0.25rem;
font-size: 0.75rem;
}
.category-product-card__sku {
color: hsl(var(--muted-foreground));
}
.category-product-card__stock.is-available {
color: rgb(22 163 74);
}
.category-product-card__stock.is-unavailable {
color: rgb(239 68 68);
}
.category-product-card__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.75rem;
}
.category-product-card__price-wrap {
min-width: 0;
}
.category-product-card__price {
display: block;
color: hsl(var(--foreground));
font-size: 1.125rem;
font-weight: 700;
line-height: 1.75rem;
}
.category-product-card__price del {
margin-right: 0.25rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
font-weight: 400;
}
.category-product-card__price ins {
text-decoration: none;
}
.category-product-card__unit {
display: block;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.category-product-card__actions {
display: flex;
gap: 0.375rem;
}
.category-product-card__button {
display: inline-flex !important;
width: auto !important;
min-width: 2rem;
height: 2rem;
min-height: 2rem !important;
align-items: center;
justify-content: center;
border-radius: calc(var(--radius) - 2px) !important;
padding: 0 0.5rem !important;
font-size: 0.75rem !important;
line-height: 1 !important;
}
.category-product-card__button svg {
width: 0.875rem;
height: 0.875rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.category-product-card__button--details {
border: 1px solid hsl(var(--border));
background: hsl(var(--background));
color: hsl(var(--foreground));
}
.category-product-card__button--cart {
border: 1px solid hsl(var(--primary)) !important;
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
}
.category-product-card__button.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.category-products__empty {
padding: 4rem 1rem;
color: hsl(var(--muted-foreground));
text-align: center;
}
.category-products__empty p {
margin: 0;
font-size: 1.125rem;
}
.category-products__empty span {
display: block;
margin-top: 0.25rem;
font-size: 0.875rem;
}
.category-products__pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
margin-top: 2rem;
}
.category-products__page {
display: inline-flex;
width: 2.25rem;
height: 2.25rem;
align-items: center;
justify-content: center;
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) - 2px);
background: hsl(var(--background));
color: hsl(var(--foreground));
font-size: 0.875rem;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease;
}
.category-products__page:hover {
background: hsl(var(--accent));
}
.category-products__page.is-current {
border-color: hsl(var(--primary));
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.category-products__page.is-disabled {
opacity: 0.5;
pointer-events: none;
}
.category-products__page svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.category-products__dots {
padding: 0 0.5rem;
color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) {
.category-products__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.category-products__layout {
flex-direction: row;
}
.category-products__sidebar {
width: 16rem;
flex: 0 0 16rem;
}
}
@media (min-width: 1280px) {
.category-products__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* =========================================================
SINGLE PRODUCT PAGE
Exact visual basis: src/pages/ProductPage.tsx
========================================================= */
.product-page {
padding: 2rem 0;
}
.product-page__back {
display: inline-flex;
min-height: 2.5rem;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
padding: 0.5rem 1rem;
border: 0;
border-radius: calc(var(--radius) - 2px);
background: transparent;
color: hsl(var(--foreground));
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
}
.product-page__back:hover {
background: hsl(var(--accent));
}
.product-page__back svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.product-page__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
}
.product-page__media {
position: relative;
display: flex;
aspect-ratio: 1 / 1;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 2rem;
border-radius: 0.75rem;
background: hsl(var(--accent));
}
.product-page__image {
width: 100%;
height: 100%;
object-fit: contain;
}
.product-page__placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.5);
color: hsl(var(--muted-foreground));
}
.product-page__badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
z-index: 10;
padding: 0.25rem 0.625rem;
border-radius: 999px;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.product-page__badge--sale {
background: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
}
.product-page__badge--stock {
right: 0.75rem;
left: auto;
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
}
.product-page__info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.product-page__category {
display: inline-block;
width: fit-content;
color: hsl(var(--primary));
font-size: 0.875rem;
font-weight: 500;
}
.product-page__title {
margin: -0.25rem 0 0;
color: hsl(var(--foreground));
font-size: 1.5rem;
font-weight: 700;
line-height: 2rem;
}
.product-page__sku {
margin: -0.5rem 0 0;
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
}
.product-page__price-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.product-page__price {
color: hsl(var(--foreground));
font-size: 1.875rem;
font-weight: 700;
line-height: 2.25rem;
}
.product-page__price ins {
text-decoration: none;
}
.product-page__price del {
margin-right: 0.5rem;
color: hsl(var(--muted-foreground));
font-size: 1rem;
font-weight: 400;
}
.product-page__unit {
color: hsl(var(--muted-foreground));
}
.product-page__stock {
margin: -0.5rem 0 0;
font-size: 0.875rem;
}
.product-page__stock.is-available {
color: rgb(22 163 74);
}
.product-page__stock.is-unavailable {
color: rgb(239 68 68);
}
.product-page__actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.product-page__cart-form {
margin: 0 !important;
}
.product-page__cart-button {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1.5rem;
border: 1px solid hsl(var(--primary));
border-radius: calc(var(--radius) - 2px);
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition:
opacity 0.2s ease,
background-color 0.2s ease;
}
.product-page__cart-button:hover:not(:disabled) {
opacity: 0.92;
}
.product-page__cart-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.product-page__cart-button svg {
width: 1.25rem;
height: 1.25rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.product-page__section {
padding-top: 1rem;
border-top: 1px solid hsl(var(--border));
}
.product-page__section h2 {
margin: 0 0 0.5rem;
color: hsl(var(--foreground));
font-size: 1.125rem;
font-weight: 600;
line-height: 1.75rem;
}
.product-page__description {
color: hsl(var(--muted-foreground));
white-space: pre-wrap;
}
.product-page__description p {
margin-top: 0;
}
.product-page__description p:last-child {
margin-bottom: 0;
}
.product-page__characteristics {
margin: 0;
}
.product-page__characteristic {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 0;
border-bottom: 1px solid hsl(var(--border));
}
.product-page__characteristic dt {
color: hsl(var(--muted-foreground));
}
.product-page__characteristic dd {
margin: 0;
color: hsl(var(--foreground));
font-weight: 500;
text-align: right;
}
/* Native WooCommerce variable product fallback */
.product-page__native-cart .variations {
margin-bottom: 1rem;
}
.product-page__native-cart .variations td,
.product-page__native-cart .variations th {
padding: 0.375rem 0.5rem 0.375rem 0;
}
.product-page__native-cart select {
min-height: 2.5rem;
border: 1px solid hsl(var(--input));
border-radius: calc(var(--radius) - 2px);
background: hsl(var(--background));
color: hsl(var(--foreground));
padding: 0.5rem 0.75rem;
}
.product-page__native-cart .single_add_to_cart_button {
min-height: 2.75rem !important;
border-radius: calc(var(--radius) - 2px) !important;
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
}
/* React breakpoint: md:grid-cols-2 */
@media (min-width: 768px) {
.product-page__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-page__title {
font-size: 1.875rem;
line-height: 2.25rem;
}
}
/* =========================================================
MAP MODAL — LARGE SCREENS
========================================================= */
@media (min-width: 1024px) {
.map-modal {
padding: 2rem;
}
.map-modal__panel {
max-width: 68rem;
}
.map-modal__content {
padding: 2rem;
}
.map-modal__map iframe {
height: 500px;
min-height: 500px;
}
}
@media (min-width: 1440px) {
.map-modal__panel {
max-width: 76rem;
}
.map-modal__map iframe {
height: 540px;
min-height: 540px;
}
}
/* =========================================================
CART
========================================================= */
.cart-page {
min-height: 60vh;
background: hsl(var(--background));
}
.imidjstroy-cart {
padding: 2.5rem 0 3rem;
}
.imidjstroy-cart__container {
max-width: 1184px;
}
.imidjstroy-cart__header {
margin-bottom: 2rem;
}
.imidjstroy-cart__title {
margin: 0;
color: hsl(var(--foreground));
font-size: clamp(1.75rem, 3vw, 2rem);
font-weight: 700;
line-height: 1.2;
}
.imidjstroy-cart__subtitle {
margin: 0.5rem 0 0;
color: hsl(var(--muted-foreground));
font-size: 0.95rem;
}
.imidjstroy-cart__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 1.5rem;
align-items: start;
}
.imidjstroy-cart__items {
display: grid;
gap: 1rem;
min-width: 0;
}
.imidjstroy-cart-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
color: hsl(var(--card-foreground));
}
.imidjstroy-cart-item__media {
width: 6rem;
height: 6rem;
flex: 0 0 6rem;
overflow: hidden;
border-radius: 0.5rem;
background: hsl(var(--muted));
}
.imidjstroy-cart-item__media a,
.imidjstroy-cart-item__media img {
width: 100%;
height: 100%;
}
.imidjstroy-cart-item__media img {
object-fit: cover;
}
.imidjstroy-cart-item__info {
min-width: 0;
flex: 1;
}
.imidjstroy-cart-item__name {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: hsl(var(--foreground));
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.imidjstroy-cart-item__name a {
transition: color 0.2s ease;
}
.imidjstroy-cart-item__name a:hover {
color: hsl(var(--primary));
}
.imidjstroy-cart-item__sku,
.imidjstroy-cart-item__price,
.imidjstroy-cart-item__stock,
.imidjstroy-cart-item__backorder,
.imidjstroy-cart-item__subtotal {
margin: 0.35rem 0 0;
}
.imidjstroy-cart-item__sku {
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.imidjstroy-cart-item__price {
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
}
.imidjstroy-cart-item__price .amount {
color: inherit;
}
.imidjstroy-cart-item__stock {
font-size: 0.75rem;
}
.imidjstroy-cart-item__stock.is-in-stock {
color: rgb(22 163 74);
}
.imidjstroy-cart-item__stock.is-out-of-stock,
.imidjstroy-cart-item__backorder {
color: hsl(var(--destructive));
}
.imidjstroy-cart-item__subtotal {
display: flex;
align-items: baseline;
gap: 0.35rem;
margin-top: 0.55rem;
color: hsl(var(--foreground));
font-size: 0.875rem;
}
.imidjstroy-cart-item__subtotal strong {
font-weight: 600;
}
.imidjstroy-cart-item__controls {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.75rem;
flex: 0 0 auto;
}
.imidjstroy-cart-item__quantity {
display: flex;
align-items: center;
overflow: hidden;
min-height: 2.5rem;
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
background: hsl(var(--background));
}
.imidjstroy-cart-item__qty-button {
display: inline-flex;
width: 2.5rem;
height: 2.5rem;
align-items: center;
justify-content: center;
color: hsl(var(--foreground));
transition: background 0.2s ease, color 0.2s ease;
}
.imidjstroy-cart-item__qty-button:hover {
background: hsl(var(--accent));
color: hsl(var(--primary));
}
.imidjstroy-cart-item__qty-button svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.imidjstroy-cart-item__quantity .quantity {
margin: 0 !important;
}
.imidjstroy-cart-item__quantity .qty {
width: 2.75rem !important;
min-width: 2.75rem;
height: 2.5rem;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0;
background: transparent;
color: hsl(var(--foreground));
font-size: 0.875rem;
font-weight: 500;
text-align: center;
appearance: textfield;
-moz-appearance: textfield;
}
.imidjstroy-cart-item__quantity .qty::-webkit-inner-spin-button,
.imidjstroy-cart-item__quantity .qty::-webkit-outer-spin-button {
margin: 0;
appearance: none;
-webkit-appearance: none;
}
.imidjstroy-cart-item__remove {
display: inline-flex !important;
width: auto !important;
height: 2.25rem !important;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0 0.8rem !important;
border: 1px solid hsl(var(--border)) !important;
border-radius: 0.45rem !important;
background: transparent !important;
color: hsl(var(--foreground)) !important;
font-size: 0.8rem !important;
font-weight: 500;
line-height: 1 !important;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.imidjstroy-cart-item__remove:hover,
.imidjstroy-cart-item__remove:focus-visible {
border-color: hsl(var(--destructive)) !important;
background: hsl(var(--destructive)) !important;
color: #fff !important;
opacity: 1 !important;
text-decoration: none !important;
}
.imidjstroy-cart-item__remove:hover span,
.imidjstroy-cart-item__remove:focus-visible span {
color: #fff !important;
opacity: 1 !important;
}
.imidjstroy-cart-item__remove:hover svg,
.imidjstroy-cart-item__remove:focus-visible svg {
stroke: #fff !important;
opacity: 1 !important;
}
.imidjstroy-cart-item__remove::before,
.imidjstroy-cart-item__remove::after {
display: none !important;
}
.imidjstroy-cart-item__remove svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.imidjstroy-cart-summary {
display: grid;
gap: 1rem;
position: sticky;
top: 6.75rem;
}
.imidjstroy-cart-summary__card {
padding: 1.5rem;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
}
.imidjstroy-cart-summary__title {
margin: 0 0 1.25rem;
color: hsl(var(--foreground));
font-size: 1.25rem;
font-weight: 600;
}
.imidjstroy-cart-summary__box {
padding: 1rem;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.55);
}
.imidjstroy-cart-summary__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: hsl(var(--muted-foreground));
font-size: 0.875rem;
}
.imidjstroy-cart-summary__row + .imidjstroy-cart-summary__row {
margin-top: 0.6rem;
}
.imidjstroy-cart-summary__row strong {
color: hsl(var(--foreground));
font-weight: 500;
text-align: right;
}
.imidjstroy-cart-summary__row--total {
margin-top: 0.85rem !important;
padding-top: 0.85rem;
border-top: 1px solid hsl(var(--border));
color: hsl(var(--foreground));
font-size: 1.05rem;
font-weight: 600;
}
.imidjstroy-cart-summary__row--total strong {
font-size: 1.125rem;
font-weight: 700;
}
.imidjstroy-cart-summary__hint {
margin: 1rem 0;
color: hsl(var(--muted-foreground));
font-size: 0.78rem;
line-height: 1.5;
}
.imidjstroy-cart-summary__checkout,
.imidjstroy-cart-summary__continue,
.imidjstroy-empty-cart__button {
display: inline-flex;
width: 100%;
min-height: 2.75rem;
align-items: center;
justify-content: center;
padding: 0.7rem 1rem;
border-radius: 0.5rem;
font-size: 0.9rem;
font-weight: 600;
text-align: center;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.imidjstroy-cart-summary__checkout,
.imidjstroy-empty-cart__button {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.imidjstroy-cart-summary__checkout:hover,
.imidjstroy-empty-cart__button:hover {
background: hsl(var(--primary) / 0.9);
color: hsl(var(--primary-foreground));
}
.imidjstroy-cart-summary__continue {
border: 1px solid hsl(var(--border));
background: hsl(var(--background));
color: hsl(var(--foreground));
}
.imidjstroy-cart-summary__continue:hover {
border-color: hsl(var(--primary) / 0.45);
color: hsl(var(--primary));
}
.imidjstroy-cart__native-actions {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.imidjstroy-empty-cart {
display: flex;
min-height: 310px;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3.5rem 1.5rem;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
text-align: center;
}
.imidjstroy-empty-cart__icon {
width: 3.5rem;
height: 3.5rem;
margin-bottom: 1rem;
color: hsl(var(--muted-foreground));
}
.imidjstroy-empty-cart__icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.imidjstroy-empty-cart h2 {
margin: 0;
color: hsl(var(--foreground));
font-size: 1.5rem;
font-weight: 700;
}
.imidjstroy-empty-cart p {
max-width: 420px;
margin: 0.6rem 0 1.5rem;
color: hsl(var(--muted-foreground));
line-height: 1.55;
}
.imidjstroy-empty-cart__button {
width: auto;
min-width: 170px;
}
.imidjstroy-cart-notices {
max-width: 1280px;
}
.imidjstroy-cart-notices:empty {
display: none;
}
.imidjstroy-cart-notices .woocommerce-message,
.imidjstroy-cart-notices .woocommerce-error,
.imidjstroy-cart-notices .woocommerce-info {
width: 100%;
margin: 0 0 1.5rem !important;
box-sizing: border-box;
}
/* Undo is an action, so present it as an actual button rather than plain text. */
.imidjstroy-cart-notices .restore-item {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 2rem;
margin-left: 0.65rem;
padding: 0.35rem 0.85rem !important;
border: 1px solid hsl(var(--primary)) !important;
border-radius: 0.45rem !important;
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
font-size: 0.8rem;
font-weight: 600;
line-height: 1 !important;
text-decoration: none !important;
white-space: nowrap;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.imidjstroy-cart-notices .restore-item:hover,
.imidjstroy-cart-notices .restore-item:focus-visible {
background: hsl(var(--primary) / 0.88) !important;
border-color: hsl(var(--primary) / 0.88) !important;
color: hsl(var(--primary-foreground)) !important;
text-decoration: none !important;
}
@media (max-width: 640px) {
.imidjstroy-cart-notices .restore-item {
margin-top: 0.5rem;
margin-left: 0;
}
}
@media (max-width: 980px) {
.imidjstroy-cart__layout {
grid-template-columns: 1fr;
}
.imidjstroy-cart-summary {
position: static;
grid-row: auto;
}
}
@media (max-width: 640px) {
.imidjstroy-cart {
padding: 2rem 0 2.5rem;
}
.imidjstroy-cart__header {
margin-bottom: 1.5rem;
}
.imidjstroy-cart-item {
display: grid;
grid-template-columns: 5.25rem minmax(0, 1fr);
align-items: start;
gap: 0.9rem;
}
.imidjstroy-cart-item__media {
width: 5.25rem;
height: 5.25rem;
flex-basis: 5.25rem;
}
.imidjstroy-cart-item__controls {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
padding-top: 0.2rem;
}
.imidjstroy-cart-summary__card {
padding: 1.15rem;
}
}
@media (max-width: 420px) {
.imidjstroy-cart-item {
padding: 0.85rem;
}
.imidjstroy-cart-item__remove span {
display: none;
}
.imidjstroy-cart-item__remove {
width: 2.25rem !important;
padding: 0 !important;
}
}
/* =========================================================
WooCommerce AJAX add-to-cart UI
========================================================= */
/* The original add-to-cart icon button must never change size. */
.popular-product-card__action--cart,
.category-product-card__button--cart {
flex: 0 0 2rem !important;
width: 2rem !important;
min-width: 2rem !important;
max-width: 2rem !important;
height: 2rem !important;
min-height: 2rem !important;
padding: 0 !important;
}
/* WooCommerce adds the .added class after a successful AJAX request.
Hide the cart SVG and draw a clean check icon instead. */
.popular-product-card__action--cart.added svg,
.category-product-card__button--cart.added svg {
display: none !important;
}
.popular-product-card__action--cart.added::before,
.category-product-card__button--cart.added::before {
content: "";
display: block;
width: 0.45rem;
height: 0.75rem;
margin-top: -0.15rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
}
/* Remove WooCommerce loading/added decorative pseudo-elements
that could alter the compact icon button. */
.popular-product-card__action--cart.loading::after,
.popular-product-card__action--cart.added::after,
.category-product-card__button--cart.loading::after,
.category-product-card__button--cart.added::after {
display: none !important;
}
/* WooCommerce inserts its "View cart" link next to the add button.
Turn it into a proper compact button. */
.popular-product-card__actions .added_to_cart.wc-forward,
.category-product-card__actions .added_to_cart.wc-forward {
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
height: 2rem !important;
min-height: 2rem !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 0.7rem !important;
border: 1px solid hsl(var(--primary)) !important;
border-radius: calc(var(--radius) - 2px) !important;
background: hsl(var(--background)) !important;
color: hsl(var(--primary)) !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
line-height: 1 !important;
text-decoration: none !important;
white-space: nowrap !important;
box-sizing: border-box !important;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.popular-product-card__actions .added_to_cart.wc-forward:hover,
.category-product-card__actions .added_to_cart.wc-forward:hover {
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
}
/* =========================================================
HOME SECTION VISUAL RHYTHM + UNIFIED PRODUCT CARDS
========================================================= */
/* One subtle accent divider before the Categories block. */
.home-features {
border-bottom: 0 !important;
}
.home-categories {
background: hsl(var(--background));
border-top: 1px solid hsl(var(--primary) / 0.28);
border-bottom: 0;
}
/* Clear but soft alternating rhythm for the product sections. */
.home-building {
background: hsl(var(--accent));
border: 0;
}
.home-ad-materials {
background: hsl(var(--background));
border: 0;
}
.home-popular {
background: hsl(var(--accent));
border: 0;
}
/* All home product sections now render the same shared product-card.php.
Keep grids consistent so every card has the same width and behaviour. */
.home-building__grid,
.home-ad-materials__grid,
.home-popular__grid {
align-items: stretch;
}
/* Generic class aliases are present in the shared template. These rules
make the generic name safe to use for future product-card extensions. */
.product-card {
height: 100%;
}
.product-card__name a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.product-card__name a:hover {
color: hsl(var(--primary));
}
/* The shared card uses the compact icon actions from Popular Products. */
.product-card__actions {
display: flex;
align-items: center;
gap: 0.375rem;
}
.product-card__action--cart {
flex: 0 0 2rem !important;
width: 2rem !important;
min-width: 2rem !important;
max-width: 2rem !important;
height: 2rem !important;
min-height: 2rem !important;
}
.product-card__action--cart.added svg {
display: none !important;
}
.product-card__action--cart.added::before {
content: "";
display: block;
width: 0.45rem;
height: 0.75rem;
margin-top: -0.15rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
}
.product-card__action--cart.loading::after,
.product-card__action--cart.added::after {
display: none !important;
}
/* =========================================================
CART GLOBAL NOTICE — CLASSIC SHORTCODE
WooCommerce prints cart notices before our cart template.
========================================================= */
body.woocommerce-cart .woocommerce-notices-wrapper {
width: 100%;
max-width: 1280px;
margin-inline: auto;
padding-inline: 1rem;
box-sizing: border-box;
}
body.woocommerce-cart .woocommerce-notices-wrapper:empty {
display: none !important;
}
/* Handle both wrapped and directly printed WooCommerce notices. */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-info {
width: calc(100% - 2rem) !important;
max-width: 1280px !important;
margin: 1rem auto 0 !important;
padding: 0.8rem 1rem 0.8rem 3rem !important;
box-sizing: border-box !important;
border: 1px solid hsl(var(--primary) / 0.22) !important;
border-top: 1px solid hsl(var(--primary) / 0.22) !important;
border-bottom: 1px solid hsl(var(--primary) / 0.22) !important;
border-radius: 0.5rem !important;
background: hsl(var(--primary) / 0.055) !important;
color: hsl(var(--foreground)) !important;
box-shadow: none !important;
}
/* Remove any WooCommerce/theme pseudo-element that may create an extra
blue/colored line under the notice. */
body.woocommerce-cart .woocommerce-message::after,
body.woocommerce-cart .woocommerce-error::after,
body.woocommerce-cart .woocommerce-info::after {
display: none !important;
content: none !important;
}
/* Keep the success icon in the accent color. */
body.woocommerce-cart .woocommerce-message::before {
color: hsl(var(--primary)) !important;
}
/* Undo is a real action — make it visibly clickable. */
body.woocommerce-cart .woocommerce-message a.restore-item,
body.woocommerce-cart .woocommerce-message .restore-item {
float: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 2rem !important;
margin: 0 0 0 0.7rem !important;
padding: 0.35rem 0.85rem !important;
border: 1px solid hsl(var(--primary)) !important;
border-radius: 0.45rem !important;
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
line-height: 1 !important;
text-decoration: none !important;
white-space: nowrap !important;
cursor: pointer !important;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}
body.woocommerce-cart .woocommerce-message a.restore-item:hover,
body.woocommerce-cart .woocommerce-message a.restore-item:focus-visible,
body.woocommerce-cart .woocommerce-message .restore-item:hover,
body.woocommerce-cart .woocommerce-message .restore-item:focus-visible {
border-color: hsl(var(--primary) / 0.85) !important;
background: hsl(var(--primary) / 0.85) !important;
color: hsl(var(--primary-foreground)) !important;
text-decoration: none !important;
box-shadow: 0 4px 10px rgb(0 0 0 / 0.08) !important;
}
@media (max-width: 640px) {
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-cart .woocommerce-info {
width: calc(100% - 1rem) !important;
padding: 0.75rem 0.8rem 0.75rem 2.7rem !important;
}
body.woocommerce-cart .woocommerce-message a.restore-item,
body.woocommerce-cart .woocommerce-message .restore-item {
margin-top: 0.5rem !important;
margin-left: 0 !important;
}
}
/* =========================================================
CHECKOUT
========================================================= */
.checkout-page {
min-height: 60vh;
background: hsl(var(--background));
}
.imidjstroy-checkout {
padding: 2.5rem 0 3.5rem;
}
.imidjstroy-checkout__container {
max-width: 1184px;
}
.imidjstroy-checkout__header {
margin-bottom: 2rem;
}
.imidjstroy-checkout__title {
margin: 0;
color: hsl(var(--foreground));
font-size: clamp(1.75rem, 3vw, 2rem);
font-weight: 700;
line-height: 1.2;
}
.imidjstroy-checkout__subtitle {
margin: 0.5rem 0 0;
color: hsl(var(--muted-foreground));
font-size: 0.95rem;
}
.imidjstroy-checkout__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 1.5rem;
align-items: start;
}
.imidjstroy-checkout__main,
.imidjstroy-checkout__sidebar {
display: grid;
gap: 1rem;
min-width: 0;
}
.imidjstroy-checkout__sidebar {
position: sticky;
top: 6.75rem;
}
.imidjstroy-checkout__card {
padding: 1.5rem;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
color: hsl(var(--card-foreground));
}
.imidjstroy-checkout__card-title,
.imidjstroy-checkout-review__title,
.imidjstroy-payment__title {
margin: 0 0 1.2rem;
color: hsl(var(--foreground));
font-size: 1.15rem;
font-weight: 600;
line-height: 1.35;
}
/* Native WooCommerce billing fields, constrained to our visual system. */
.imidjstroy-checkout .woocommerce-billing-fields > h3,
.imidjstroy-checkout .woocommerce-shipping-fields,
.imidjstroy-checkout .woocommerce-additional-fields > h3 {
display: none;
}
.imidjstroy-checkout .woocommerce-billing-fields__field-wrapper,
.imidjstroy-checkout .woocommerce-account-fields,
.imidjstroy-checkout__order-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.imidjstroy-checkout .form-row {
float: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.imidjstroy-checkout .form-row-wide,
.imidjstroy-checkout .woocommerce-account-fields,
.imidjstroy-checkout__order-fields .form-row {
grid-column: 1 / -1;
}
.imidjstroy-checkout .form-row label {
display: block;
margin: 0 0 0.45rem;
color: hsl(var(--foreground));
font-size: 0.82rem;
font-weight: 500;
}
.imidjstroy-checkout .required {
color: hsl(var(--destructive));
text-decoration: none;
}
.imidjstroy-checkout .input-text,
.imidjstroy-checkout input[type='text'],
.imidjstroy-checkout input[type='tel'],
.imidjstroy-checkout input[type='email'],
.imidjstroy-checkout input[type='password'],
.imidjstroy-checkout textarea,
.imidjstroy-checkout select {
width: 100% !important;
min-height: 2.8rem;
box-sizing: border-box;
border: 1px solid hsl(var(--border)) !important;
border-radius: 0.5rem !important;
outline: none;
background: hsl(var(--background)) !important;
color: hsl(var(--foreground)) !important;
font: inherit;
font-size: 0.9rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.imidjstroy-checkout input[type='text'],
.imidjstroy-checkout input[type='tel'],
.imidjstroy-checkout input[type='email'],
.imidjstroy-checkout input[type='password'] {
padding: 0 0.85rem !important;
}
.imidjstroy-checkout textarea {
min-height: 7rem;
padding: 0.75rem 0.85rem !important;
resize: vertical;
}
.imidjstroy-checkout .input-text:focus,
.imidjstroy-checkout input:focus,
.imidjstroy-checkout textarea:focus,
.imidjstroy-checkout select:focus {
border-color: hsl(var(--primary)) !important;
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1) !important;
}
.imidjstroy-checkout .woocommerce-invalid .input-text,
.imidjstroy-checkout .woocommerce-invalid input,
.imidjstroy-checkout .woocommerce-invalid textarea {
border-color: hsl(var(--destructive)) !important;
}
.imidjstroy-checkout .woocommerce-account-fields {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid hsl(var(--border));
}
.imidjstroy-checkout .woocommerce-account-fields p {
margin: 0;
}
.imidjstroy-checkout .woocommerce-form__label-for-checkbox {
display: flex !important;
align-items: center;
gap: 0.55rem;
cursor: pointer;
}
/* Delivery selector. */
.imidjstroy-delivery-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
}
.imidjstroy-choice {
position: relative;
}
.imidjstroy-choice__input {
position: absolute;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.imidjstroy-choice__label {
display: flex;
min-height: 5.5rem;
align-items: center;
gap: 0.9rem;
padding: 1rem;
border: 1px solid hsl(var(--border));
border-radius: 0.7rem;
background: hsl(var(--background));
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.imidjstroy-choice__label:hover {
border-color: hsl(var(--primary) / 0.5);
}
.imidjstroy-choice__input:checked + .imidjstroy-choice__label {
border-color: hsl(var(--primary));
background: hsl(var(--primary) / 0.055);
box-shadow: 0 0 0 1px hsl(var(--primary) / 0.08);
}
.imidjstroy-choice__input:focus-visible + .imidjstroy-choice__label {
outline: 2px solid hsl(var(--primary));
outline-offset: 2px;
}
.imidjstroy-choice__icon,
.imidjstroy-payment-method__icon {
display: inline-flex;
width: 2.4rem;
height: 2.4rem;
flex: 0 0 2.4rem;
align-items: center;
justify-content: center;
border-radius: 999px;
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
}
.imidjstroy-choice__icon svg,
.imidjstroy-payment-method__icon svg {
width: 1.2rem;
height: 1.2rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.imidjstroy-choice__text,
.imidjstroy-payment-method__text {
min-width: 0;
}
.imidjstroy-choice__title,
.imidjstroy-payment-method__title {
display: block;
color: hsl(var(--foreground));
font-size: 0.9rem;
font-weight: 600;
}
.imidjstroy-choice__description,
.imidjstroy-payment-method__description {
display: block;
margin-top: 0.2rem;
color: hsl(var(--muted-foreground));
font-size: 0.76rem;
line-height: 1.4;
}
.imidjstroy-delivery-address {
margin-top: 1rem;
}
.imidjstroy-delivery-address[hidden] {
display: none !important;
}
.imidjstroy-delivery-address label {
display: block;
margin-bottom: 0.45rem;
color: hsl(var(--foreground));
font-size: 0.82rem;
font-weight: 500;
}
/* Order review. The root keeps WooCommerce's fragment class so checkout AJAX
can replace it normally. */
.imidjstroy-checkout-review {
min-width: 0;
}
.imidjstroy-checkout-review__items {
display: grid;
gap: 0.75rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid hsl(var(--border));
}
.imidjstroy-checkout-review__item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
color: hsl(var(--foreground));
font-size: 0.82rem;
}
.imidjstroy-checkout-review__item-name {
min-width: 0;
flex: 1;
line-height: 1.4;
}
.imidjstroy-checkout-review__item-qty {
color: hsl(var(--muted-foreground));
white-space: nowrap;
}
.imidjstroy-checkout-review__item-total {
font-weight: 500;
white-space: nowrap;
}
.imidjstroy-checkout-review__box {
padding: 1rem;
border-radius: 0.55rem;
background: hsl(var(--muted) / 0.55);
}
.imidjstroy-checkout-review__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
color: hsl(var(--muted-foreground));
font-size: 0.82rem;
}
.imidjstroy-checkout-review__row + .imidjstroy-checkout-review__row {
margin-top: 0.55rem;
}
.imidjstroy-checkout-review__row strong,
.imidjstroy-checkout-review__row .amount {
color: hsl(var(--foreground));
font-weight: 500;
text-align: right;
}
.imidjstroy-checkout-review__row--total {
margin-top: 0.85rem !important;
padding-top: 0.85rem;
border-top: 1px solid hsl(var(--border));
color: hsl(var(--foreground));
font-size: 1rem;
font-weight: 600;
}
.imidjstroy-checkout-review__row--total strong,
.imidjstroy-checkout-review__row--total .amount {
font-size: 1.1rem;
font-weight: 700;
}
/* Payment methods. */
.imidjstroy-checkout #payment {
margin-top: 1rem;
padding-top: 1.2rem;
border-top: 1px solid hsl(var(--border));
background: transparent !important;
}
.imidjstroy-checkout #payment ul.payment_methods {
display: grid;
gap: 0.75rem;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
list-style: none !important;
}
.imidjstroy-payment-method {
position: relative;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.imidjstroy-payment-method > input[type='radio'] {
position: absolute;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden;
clip: rect(0 0 0 0);
}
.imidjstroy-payment-method__label {
display: flex !important;
min-height: 4.7rem;
align-items: center;
gap: 0.85rem;
margin: 0 !important;
padding: 0.85rem !important;
border: 1px solid hsl(var(--border));
border-radius: 0.65rem;
background: hsl(var(--background));
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.imidjstroy-payment-method__label:hover {
border-color: hsl(var(--primary) / 0.5);
}
.imidjstroy-payment-method > input[type='radio']:checked + .imidjstroy-payment-method__label {
border-color: hsl(var(--primary));
background: hsl(var(--primary) / 0.055);
box-shadow: 0 0 0 1px hsl(var(--primary) / 0.08);
}
.imidjstroy-payment-method > input[type='radio']:focus-visible + .imidjstroy-payment-method__label {
outline: 2px solid hsl(var(--primary));
outline-offset: 2px;
}
.imidjstroy-payment-method__gateway-icon {
margin-left: auto;
}
.imidjstroy-payment-method__gateway-icon img {
max-height: 1.6rem;
width: auto;
}
.imidjstroy-payment-method .payment_box {
position: static !important;
width: auto !important;
margin: 0.5rem 0 0 !important;
padding: 0.75rem 0.85rem !important;
border-radius: 0.5rem !important;
background: hsl(var(--muted) / 0.5) !important;
color: hsl(var(--muted-foreground)) !important;
font-size: 0.78rem;
line-height: 1.5;
}
.imidjstroy-payment-method .payment_box::before {
display: none !important;
}
.imidjstroy-checkout #payment .place-order {
margin: 1rem 0 0 !important;
padding: 0 !important;
}
.imidjstroy-checkout #payment .woocommerce-terms-and-conditions-wrapper {
margin-bottom: 0.8rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
line-height: 1.45;
}
.imidjstroy-checkout #place_order {
display: inline-flex !important;
width: 100% !important;
min-height: 2.8rem !important;
float: none !important;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0.72rem 1rem !important;
border: 1px solid hsl(var(--primary)) !important;
border-radius: 0.5rem !important;
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
line-height: 1 !important;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.imidjstroy-checkout #place_order:hover,
.imidjstroy-checkout #place_order:focus-visible {
border-color: hsl(var(--primary) / 0.88) !important;
background: hsl(var(--primary) / 0.88) !important;
color: hsl(var(--primary-foreground)) !important;
box-shadow: 0 5px 12px rgb(0 0 0 / 0.08);
}
.imidjstroy-checkout #place_order:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.imidjstroy-checkout__back {
display: inline-flex;
width: 100%;
min-height: 2.7rem;
align-items: center;
justify-content: center;
padding: 0.65rem 1rem;
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
background: hsl(var(--background));
color: hsl(var(--foreground));
font-size: 0.86rem;
font-weight: 600;
text-decoration: none;
transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.imidjstroy-checkout__back:hover {
border-color: hsl(var(--primary) / 0.5);
background: hsl(var(--primary) / 0.04);
color: hsl(var(--primary));
}
/* Classic checkout messages and login/coupon helpers. */
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-checkout > .woocommerce-form-login-toggle,
body.woocommerce-checkout > .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .woocommerce-form-coupon {
width: calc(100% - 2rem);
max-width: 1184px;
margin-inline: auto;
box-sizing: border-box;
}
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info {
max-width: 1184px;
margin: 1rem auto !important;
box-sizing: border-box;
}
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .woocommerce-form-coupon {
padding: 1rem !important;
border: 1px solid hsl(var(--border)) !important;
border-radius: 0.65rem !important;
background: hsl(var(--card));
}
@media (max-width: 980px) {
.imidjstroy-checkout__layout {
grid-template-columns: 1fr;
}
.imidjstroy-checkout__sidebar {
position: static;
}
}
@media (max-width: 640px) {
.imidjstroy-checkout {
padding: 2rem 0 2.75rem;
}
.imidjstroy-checkout__header {
margin-bottom: 1.5rem;
}
.imidjstroy-checkout__card {
padding: 1.1rem;
}
.imidjstroy-checkout .woocommerce-billing-fields__field-wrapper,
.imidjstroy-checkout__order-fields,
.imidjstroy-delivery-options {
grid-template-columns: 1fr;
}
.imidjstroy-checkout .form-row-first,
.imidjstroy-checkout .form-row-last {
grid-column: 1 / -1;
}
}
/* =========================================================
MY ACCOUNT
========================================================= */
body.woocommerce-account article > h1 {
display: none;
}
body.woocommerce-account .page-content {
margin: 0;
}
body.woocommerce-account .woocommerce-notices-wrapper,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info {
max-width: 100%;
}
.imidjstroy-auth,
.imidjstroy-account {
padding: 3rem 0 4.5rem;
}
.imidjstroy-auth__header,
.imidjstroy-account__header {
margin-bottom: 1.75rem;
}
.imidjstroy-auth__title,
.imidjstroy-account__title {
margin: 0;
color: hsl(var(--foreground));
font-size: clamp(1.75rem, 3vw, 2.25rem);
line-height: 1.15;
}
.imidjstroy-auth__subtitle,
.imidjstroy-account__subtitle {
margin: 0.55rem 0 0;
color: hsl(var(--muted-foreground));
font-size: 0.9rem;
}
.imidjstroy-auth__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
max-width: 960px;
margin-inline: auto;
}
.imidjstroy-auth__grid--single {
grid-template-columns: minmax(0, 460px);
justify-content: center;
}
.imidjstroy-auth-card,
.imidjstroy-account__content,
.imidjstroy-account__nav,
.imidjstroy-account-card,
.imidjstroy-order-card,
.imidjstroy-order-delivery {
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
}
.imidjstroy-auth-card {
padding: 1.75rem;
}
.imidjstroy-auth-card__icon {
display: inline-flex;
width: 3rem;
height: 3rem;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
border-radius: 0.75rem;
background: hsl(var(--primary) / 0.10);
color: hsl(var(--primary));
}
.imidjstroy-auth-card__icon svg {
width: 1.4rem;
height: 1.4rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.imidjstroy-auth-card h2 {
margin: 0;
font-size: 1.25rem;
}
.imidjstroy-auth-card__lead {
margin: 0.4rem 0 1.35rem;
color: hsl(var(--muted-foreground));
font-size: 0.85rem;
}
.imidjstroy-account .form-row,
.imidjstroy-auth .form-row {
margin: 0 0 1rem;
}
.imidjstroy-account label,
.imidjstroy-auth label {
display: block;
margin-bottom: 0.4rem;
color: hsl(var(--foreground));
font-size: 0.82rem;
font-weight: 500;
}
.imidjstroy-account input[type="text"],
.imidjstroy-account input[type="email"],
.imidjstroy-account input[type="tel"],
.imidjstroy-account input[type="password"],
.imidjstroy-auth input[type="text"],
.imidjstroy-auth input[type="email"],
.imidjstroy-auth input[type="tel"],
.imidjstroy-auth input[type="password"] {
width: 100%;
min-height: 2.85rem;
padding: 0.7rem 0.85rem;
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
outline: none;
background: hsl(var(--background));
color: hsl(var(--foreground));
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.imidjstroy-account input:focus,
.imidjstroy-auth input:focus {
border-color: hsl(var(--primary));
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.10);
}
.imidjstroy-account input[disabled],
.imidjstroy-auth input[disabled] {
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
}
.imidjstroy-password-field {
position: relative;
}
.imidjstroy-password-field input {
padding-right: 3rem !important;
}
.imidjstroy-password-toggle {
position: absolute;
top: 50%;
right: 0.65rem;
display: inline-flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
background: transparent;
color: hsl(var(--muted-foreground));
transform: translateY(-50%);
cursor: pointer;
}
.imidjstroy-password-toggle:hover {
color: hsl(var(--foreground));
}
.imidjstroy-password-toggle svg {
width: 1.05rem;
height: 1.05rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.imidjstroy-password-toggle .icon-eye-off {
display: none;
}
.imidjstroy-password-toggle.is-visible .icon-eye {
display: none;
}
.imidjstroy-password-toggle.is-visible .icon-eye-off {
display: block;
}
.imidjstroy-auth__actions,
.imidjstroy-account__actions {
display: flex;
align-items: center;
gap: 0.8rem;
margin-top: 1.25rem;
}
.imidjstroy-auth .button,
.imidjstroy-account .button,
.imidjstroy-account-button {
display: inline-flex !important;
min-height: 2.65rem;
align-items: center;
justify-content: center;
padding: 0.65rem 1rem !important;
border: 1px solid hsl(var(--primary)) !important;
border-radius: 0.5rem !important;
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
line-height: 1 !important;
text-decoration: none !important;
cursor: pointer;
}
.imidjstroy-auth .button:hover,
.imidjstroy-account .button:hover,
.imidjstroy-account-button:hover {
background: hsl(var(--primary) / 0.88) !important;
color: hsl(var(--primary-foreground)) !important;
}
.imidjstroy-account-button--outline {
border-color: hsl(var(--border)) !important;
background: hsl(var(--background)) !important;
color: hsl(var(--foreground)) !important;
}
.imidjstroy-account-button--outline:hover {
border-color: hsl(var(--primary)) !important;
background: hsl(var(--primary) / 0.06) !important;
color: hsl(var(--primary)) !important;
}
.imidjstroy-auth__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: -0.2rem;
color: hsl(var(--muted-foreground));
font-size: 0.8rem;
}
.imidjstroy-auth a,
.imidjstroy-account a {
color: hsl(var(--primary));
}
.imidjstroy-auth a:hover,
.imidjstroy-account a:hover {
text-decoration: underline;
}
.imidjstroy-auth__remember {
display: inline-flex !important;
align-items: center;
gap: 0.4rem;
margin: 0 !important;
font-weight: 400 !important;
}
.imidjstroy-auth__remember input {
width: auto;
}
.imidjstroy-account__layout {
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
gap: 1.5rem;
align-items: start;
}
.imidjstroy-account__nav {
position: sticky;
top: 1.5rem;
padding: 0.65rem;
}
.imidjstroy-account__user {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 0.55rem 1rem;
border-bottom: 1px solid hsl(var(--border));
margin-bottom: 0.55rem;
}
.imidjstroy-account__avatar {
display: inline-flex;
width: 2.65rem;
height: 2.65rem;
flex: 0 0 2.65rem;
align-items: center;
justify-content: center;
border-radius: 50%;
background: hsl(var(--primary) / 0.10);
color: hsl(var(--primary));
font-size: 0.95rem;
font-weight: 700;
}
.imidjstroy-account__user strong,
.imidjstroy-account__user span {
display: block;
}
.imidjstroy-account__user strong {
overflow: hidden;
max-width: 135px;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.85rem;
}
.imidjstroy-account__user span {
overflow: hidden;
max-width: 135px;
margin-top: 0.15rem;
color: hsl(var(--muted-foreground));
font-size: 0.72rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.imidjstroy-account__nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.imidjstroy-account__nav li + li {
margin-top: 0.25rem;
}
.imidjstroy-account__nav a {
display: flex;
min-height: 2.7rem;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.7rem;
border-radius: 0.45rem;
color: hsl(var(--foreground));
font-size: 0.85rem;
font-weight: 500;
text-decoration: none !important;
}
.imidjstroy-account__nav a:hover,
.imidjstroy-account__nav .is-active a {
background: hsl(var(--primary) / 0.09);
color: hsl(var(--primary));
}
.imidjstroy-account__nav svg {
width: 1.05rem;
height: 1.05rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.imidjstroy-account__content {
min-width: 0;
padding: 1.5rem;
}
.imidjstroy-account-section__head {
margin-bottom: 1.4rem;
}
.imidjstroy-account-section__head h2 {
margin: 0;
font-size: 1.3rem;
}
.imidjstroy-account-section__head p {
margin: 0.35rem 0 0;
color: hsl(var(--muted-foreground));
font-size: 0.82rem;
}
.imidjstroy-account-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 1rem;
}
.imidjstroy-account-form__wide {
grid-column: 1 / -1;
}
.imidjstroy-account-form__passwords {
margin-top: 1.4rem;
padding-top: 1.4rem;
border-top: 1px solid hsl(var(--border));
}
.imidjstroy-account-form__passwords legend {
padding: 0;
margin-bottom: 1rem;
font-size: 1rem;
font-weight: 700;
}
.imidjstroy-orders {
display: grid;
gap: 0.75rem;
}
.imidjstroy-order-card {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(120px, 0.65fr) minmax(130px, 0.65fr) auto;
gap: 1rem;
align-items: center;
padding: 1rem;
}
.imidjstroy-order-card__main strong,
.imidjstroy-order-card__main span,
.imidjstroy-order-card__metric strong,
.imidjstroy-order-card__metric span {
display: block;
}
.imidjstroy-order-card__main strong,
.imidjstroy-order-card__metric strong {
font-size: 0.88rem;
}
.imidjstroy-order-card__main span,
.imidjstroy-order-card__metric span {
margin-top: 0.2rem;
color: hsl(var(--muted-foreground));
font-size: 0.74rem;
}
.imidjstroy-order-status {
display: inline-flex;
width: fit-content;
align-items: center;
padding: 0.35rem 0.65rem;
border-radius: 999px;
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
font-size: 0.74rem;
font-weight: 600;
}
.imidjstroy-order-status--processing,
.imidjstroy-order-status--completed {
background: hsl(var(--primary) / 0.10);
color: hsl(var(--primary));
}
.imidjstroy-order-status--on-hold,
.imidjstroy-order-status--pending {
background: #fff8e6;
color: #8a6500;
}
.imidjstroy-order-status--cancelled,
.imidjstroy-order-status--failed,
.imidjstroy-order-status--refunded {
background: rgb(220 38 38 / 0.08);
color: rgb(185 28 28);
}
.imidjstroy-account-empty {
padding: 2.75rem 1rem;
text-align: center;
}
.imidjstroy-account-empty svg {
width: 2.5rem;
height: 2.5rem;
margin-bottom: 0.85rem;
fill: none;
stroke: hsl(var(--muted-foreground));
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.imidjstroy-account-empty h3 {
margin: 0;
font-size: 1.15rem;
}
.imidjstroy-account-empty p {
margin: 0.4rem 0 1.1rem;
color: hsl(var(--muted-foreground));
font-size: 0.82rem;
}
.imidjstroy-account-pagination {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 1.25rem;
}
.imidjstroy-order-delivery {
margin-top: 1.5rem;
padding: 1.25rem;
}
.imidjstroy-order-delivery h2 {
margin: 0 0 0.9rem;
font-size: 1.05rem;
}
.imidjstroy-order-delivery__rows > div {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0;
border-top: 1px solid hsl(var(--border));
font-size: 0.82rem;
}
.imidjstroy-order-delivery__rows span {
color: hsl(var(--muted-foreground));
}
body.woocommerce-account .woocommerce-order-details,
body.woocommerce-account .woocommerce-customer-details {
margin-top: 1.5rem;
}
body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title {
font-size: 1.1rem;
}
body.woocommerce-account table.shop_table {
width: 100%;
border: 1px solid hsl(var(--border));
border-collapse: separate;
border-spacing: 0;
border-radius: 0.65rem;
overflow: hidden;
}
body.woocommerce-account table.shop_table th,
body.woocommerce-account table.shop_table td {
padding: 0.75rem;
border: 0;
border-bottom: 1px solid hsl(var(--border));
text-align: left;
font-size: 0.8rem;
}
body.woocommerce-account table.shop_table tr:last-child th,
body.woocommerce-account table.shop_table tr:last-child td {
border-bottom: 0;
}
body.woocommerce-account .woocommerce-customer-details address {
padding: 1rem;
border: 1px solid hsl(var(--border));
border-radius: 0.65rem;
font-style: normal;
line-height: 1.6;
}
.imidjstroy-lost-password {
max-width: 480px;
margin: 0 auto;
padding: 3rem 0 4.5rem;
}
.imidjstroy-lost-password__card {
padding: 1.75rem;
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
}
.imidjstroy-lost-password__card h1 {
margin: 0;
font-size: 1.5rem;
}
.imidjstroy-lost-password__card > p {
margin: 0.45rem 0 1.3rem;
color: hsl(var(--muted-foreground));
font-size: 0.85rem;
}
@media (max-width: 900px) {
.imidjstroy-account__layout {
grid-template-columns: 1fr;
}
.imidjstroy-account__nav {
position: static;
}
.imidjstroy-account__nav ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.35rem;
}
.imidjstroy-account__user {
display: none;
}
.imidjstroy-account__nav li + li {
margin-top: 0;
}
.imidjstroy-account__nav a {
justify-content: center;
}
.imidjstroy-order-card {
grid-template-columns: 1fr 1fr;
}
.imidjstroy-order-card__action {
justify-self: start;
}
}
@media (max-width: 700px) {
.imidjstroy-auth,
.imidjstroy-account {
padding: 2rem 0 3rem;
}
.imidjstroy-auth__grid {
grid-template-columns: 1fr;
}
.imidjstroy-account__content,
.imidjstroy-auth-card {
padding: 1rem;
}
.imidjstroy-account-form__grid {
grid-template-columns: 1fr;
}
.imidjstroy-account-form__wide {
grid-column: auto;
}
.imidjstroy-order-card {
grid-template-columns: 1fr;
gap: 0.65rem;
}
.imidjstroy-account__nav ul {
grid-template-columns: 1fr 1fr 1fr;
}
.imidjstroy-account__nav a {
min-height: 2.5rem;
padding-inline: 0.45rem;
font-size: 0.78rem;
}
.imidjstroy-account__nav svg {
display: none;
}
}
/* =========================================================
MY ACCOUNT UI POLISH
========================================================= */
.imidjstroy-account__layout {
grid-template-columns: 280px minmax(0, 1fr);
gap: 1.75rem;
}
.imidjstroy-account__nav {
padding: 1rem;
border-radius: 1rem;
background:
linear-gradient(180deg, hsl(var(--primary) / 0.05), transparent 96px),
hsl(var(--card));
box-shadow: 0 10px 24px rgb(0 0 0 / 0.04);
}
.imidjstroy-account__user {
align-items: center;
gap: 0.9rem;
padding: 0.15rem 0.15rem 1rem;
margin-bottom: 0.9rem;
}
.imidjstroy-account__avatar {
width: 3.25rem;
height: 3.25rem;
flex: 0 0 3.25rem;
border-radius: 1rem;
font-size: 1.05rem;
box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.10);
}
.imidjstroy-account__user strong {
max-width: none;
font-size: 1rem;
line-height: 1.25;
}
.imidjstroy-account__user span {
max-width: none;
font-size: 0.78rem;
}
.imidjstroy-account__nav ul {
display: grid;
gap: 0.55rem;
}
.imidjstroy-account__nav li + li {
margin-top: 0;
}
.imidjstroy-account__nav a {
min-height: 3rem;
gap: 0.8rem;
padding: 0.8rem 0.9rem;
border: 1px solid transparent;
border-radius: 0.8rem;
background: hsl(var(--background));
transition:
border-color 0.2s ease,
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
.imidjstroy-account__nav a svg {
width: 1.1rem;
height: 1.1rem;
flex: 0 0 1.1rem;
}
.imidjstroy-account__nav a:hover {
border-color: hsl(var(--primary) / 0.18);
background: hsl(var(--primary) / 0.05);
color: hsl(var(--foreground));
text-decoration: none !important;
box-shadow: 0 8px 16px rgb(0 0 0 / 0.04);
}
.imidjstroy-account__nav .is-active a {
border-color: hsl(var(--primary) / 0.28);
background: hsl(var(--primary) / 0.10);
color: hsl(var(--primary));
box-shadow: 0 10px 22px rgb(22 163 74 / 0.10);
}
.imidjstroy-account__nav li:last-child a {
margin-top: 0.35rem;
border-color: hsl(var(--border));
color: hsl(var(--destructive));
background: hsl(var(--background));
}
.imidjstroy-account__nav li:last-child a:hover {
border-color: rgb(220 38 38 / 0.20);
background: rgb(220 38 38 / 0.06);
color: rgb(185 28 28);
}
.imidjstroy-account__content {
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 12px 30px rgb(0 0 0 / 0.04);
}
.imidjstroy-account-section__head {
margin-bottom: 1.6rem;
}
.imidjstroy-account-section__head h2 {
font-size: 1.55rem;
}
.imidjstroy-account-section__head p {
font-size: 0.88rem;
}
.imidjstroy-account-form__grid {
gap: 0.15rem 1rem;
}
.imidjstroy-account-form__passwords {
margin-top: 1.8rem;
padding: 1.35rem 1.35rem 0.35rem;
border: 1px solid hsl(var(--border));
border-radius: 0.9rem;
background: linear-gradient(180deg, hsl(var(--primary) / 0.04), hsl(var(--background)) 110px);
}
.imidjstroy-account-form__passwords legend {
display: inline-flex;
align-items: baseline;
gap: 0.35rem;
padding: 0 0.2rem;
margin: 0 0 0.85rem;
color: hsl(var(--foreground));
font-size: 1.05rem;
font-weight: 700;
}
.imidjstroy-account-form__passwords .form-row {
margin-bottom: 1rem;
}
.imidjstroy-account-form__passwords .form-row:last-child {
margin-bottom: 0;
}
.imidjstroy-account-form__passwords .imidjstroy-password-field input {
background: hsl(var(--background));
}
.imidjstroy-account-form__passwords .imidjstroy-password-toggle {
width: 2.15rem;
height: 2.15rem;
border-radius: 999px;
}
.imidjstroy-account-form__passwords .imidjstroy-password-toggle:hover {
background: hsl(var(--accent));
}
@media (max-width: 900px) {
.imidjstroy-account__layout {
grid-template-columns: 1fr;
gap: 1rem;
}
.imidjstroy-account__nav {
padding: 0.85rem;
}
.imidjstroy-account__nav ul {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.imidjstroy-account__nav a {
min-height: 3.2rem;
justify-content: center;
padding: 0.7rem;
}
.imidjstroy-account__nav a span {
display: none;
}
.imidjstroy-account__user {
display: flex;
padding-bottom: 0.85rem;
margin-bottom: 0.85rem;
}
.imidjstroy-account__content {
padding: 1.25rem;
}
}
@media (max-width: 640px) {
.imidjstroy-account,
.imidjstroy-auth {
padding: 2rem 0 3rem;
}
.imidjstroy-account__nav ul {
grid-template-columns: 1fr;
}
.imidjstroy-account__nav a span {
display: inline;
}
.imidjstroy-account-form__grid {
grid-template-columns: 1fr;
}
.imidjstroy-account-form__wide,
.imidjstroy-account .form-row-first,
.imidjstroy-account .form-row-last {
grid-column: auto;
}
.imidjstroy-account-form__passwords {
padding: 1rem 1rem 0.25rem;
}
}
/* =========================================================
MY ACCOUNT SIDEBAR SIZE FIX
========================================================= */
.imidjstroy-account__layout {
grid-template-columns: 360px minmax(0, 1fr) !important;
gap: 2rem;
}
.imidjstroy-account__nav {
width: 100%;
min-width: 0;
padding: 1.25rem;
}
.imidjstroy-account__user {
display: grid;
grid-template-columns: 3.25rem minmax(0, 1fr);
align-items: center;
gap: 0.9rem;
}
.imidjstroy-account__user > div {
min-width: 0;
}
.imidjstroy-account__user strong,
.imidjstroy-account__user span {
max-width: none;
white-space: normal;
overflow: visible;
text-overflow: unset;
word-break: break-word;
}
.imidjstroy-account__nav ul {
gap: 0.7rem;
}
.imidjstroy-account__nav a {
width: 100%;
min-height: 3.35rem;
padding: 0.95rem 1rem;
}
.imidjstroy-account__nav li:last-child a {
margin-top: 0.6rem;
}
@media (max-width: 1100px) {
.imidjstroy-account__layout {
grid-template-columns: 300px minmax(0, 1fr) !important;
}
}
@media (max-width: 900px) {
.imidjstroy-account__layout {
grid-template-columns: 1fr !important;
}
}
/* =========================================================
MY ACCOUNT SIDEBAR WIDTH FIX
========================================================= */
@media (min-width: 901px) {
.imidjstroy-account__layout {
display: grid !important;
grid-template-columns: 340px minmax(0, 1fr) !important;
gap: 2rem !important;
align-items: start !important;
}
.imidjstroy-account__nav {
width: 340px !important;
min-width: 340px !important;
max-width: 340px !important;
padding: 1.25rem !important;
box-sizing: border-box !important;
}
.imidjstroy-account__user {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 1rem !important;
}
.imidjstroy-account__user > div {
display: block !important;
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
}
.imidjstroy-account__user strong,
.imidjstroy-account__user span {
display: block !important;
max-width: none !important;
width: auto !important;
white-space: normal !important;
word-break: break-word !important;
overflow: visible !important;
text-overflow: clip !important;
writing-mode: horizontal-tb !important;
}
.imidjstroy-account__nav ul {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.75rem !important;
}
.imidjstroy-account__nav li {
width: 100% !important;
}
.imidjstroy-account__nav a {
display: flex !important;
width: 100% !important;
min-height: 3.25rem !important;
justify-content: flex-start !important;
padding: 0.9rem 1rem !important;
box-sizing: border-box !important;
}
.imidjstroy-account__nav a span {
display: inline !important;
white-space: nowrap !important;
}
}
@media (max-width: 900px) {
.imidjstroy-account__layout {
grid-template-columns: 1fr !important;
}
.imidjstroy-account__nav {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
}
/* =========================================================
PASSWORD ICON OVERLAP FIX
========================================================= */
/* Use only the browser / WooCommerce native password UI here.
Hide the custom eye buttons to prevent double icons. */
.imidjstroy-password-toggle {
display: none !important;
}
.imidjstroy-password-field input {
padding-right: 0.85rem !important;
}
/* Hide old Edge / IE reveal controls if they appear. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none;
}
/* =========================================================
ABOUT PAGE
========================================================= */
.about-hero {
padding: 3rem 0;
background: hsl(var(--secondary));
}
.about-hero h1 {
margin: 0 0 0.45rem;
color: hsl(var(--primary-foreground));
font-size: clamp(2rem, 4vw, 2.5rem);
line-height: 1.1;
}
.about-hero p {
margin: 0;
color: hsl(var(--muted-foreground));
font-size: 0.9rem;
}
.about-stats {
padding: 3rem 0;
}
.about-stats__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.about-stat-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem;
border: 1px solid hsl(var(--border));
border-radius: 0.8rem;
background: hsl(var(--card));
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.about-stat-card:hover {
transform: scale(1.02);
box-shadow: 0 12px 26px rgb(0 0 0 / 0.08);
}
.about-stat-card__icon {
display: inline-flex;
width: 2.2rem;
height: 2.2rem;
align-items: center;
justify-content: center;
margin-bottom: 0.8rem;
color: hsl(var(--primary));
}
.about-stat-card__icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.about-stat-card strong {
font-size: clamp(1.5rem, 3vw, 1.9rem);
line-height: 1;
}
.about-stat-card > span:last-child {
margin-top: 0.4rem;
color: hsl(var(--muted-foreground));
font-size: 0.85rem;
}
.about-main {
padding: 3rem 0 4rem;
border-top: 1px solid hsl(var(--border));
}
.about-main__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 3rem;
}
.about-main h2 {
margin: 0 0 1rem;
font-size: 1.55rem;
}
.about-history__content {
color: hsl(var(--muted-foreground));
font-size: 0.9rem;
line-height: 1.75;
}
.about-history__content p {
margin: 0 0 1rem;
}
.about-advantages ol {
display: grid;
gap: 0.8rem;
margin: 0;
padding: 0;
list-style: none;
}
.about-advantages li {
display: flex;
align-items: center;
gap: 0.8rem;
}
.about-advantages li > span {
display: inline-flex;
width: 1.85rem;
height: 1.85rem;
flex: 0 0 1.85rem;
align-items: center;
justify-content: center;
border-radius: 50%;
background: hsl(var(--primary) / 0.10);
color: hsl(var(--primary));
font-size: 0.78rem;
font-weight: 700;
}
.about-advantages li strong {
font-size: 0.9rem;
font-weight: 500;
}
/* =========================================================
CONTACTS PAGE
========================================================= */
.contacts-main {
padding: 3rem 0 4.5rem;
}
.contacts-main__header {
margin-bottom: 2.5rem;
text-align: center;
}
.contacts-main__header h1 {
margin: 0;
font-size: clamp(2rem, 4vw, 2.5rem);
}
.contacts-main__header p {
margin: 0.5rem 0 0;
color: hsl(var(--muted-foreground));
}
.contact-status {
max-width: 760px;
margin: -0.75rem auto 1.5rem;
padding: 0.85rem 1rem;
border-radius: 0.55rem;
font-size: 0.85rem;
}
.contact-status--success {
border: 1px solid hsl(var(--primary) / 0.25);
background: hsl(var(--primary) / 0.07);
color: hsl(var(--primary));
}
.contact-status--error {
border: 1px solid rgb(220 38 38 / 0.22);
background: rgb(220 38 38 / 0.06);
color: rgb(185 28 28);
}
.contacts-main__grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: 1.5rem;
align-items: stretch;
}
.contacts-info {
display: grid;
gap: 1.25rem;
}
.contacts-info__top {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
}
.contact-info-card,
.contacts-form-card,
.contacts-map {
border: 1px solid hsl(var(--border));
border-radius: 0.75rem;
background: hsl(var(--card));
}
.contact-info-card {
padding: 1.5rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-info-card:hover {
transform: scale(1.02);
box-shadow: 0 12px 24px rgb(0 0 0 / 0.08);
}
.contact-info-card--wide {
cursor: pointer;
}
.contact-info-card__icon {
display: inline-flex;
width: 2.5rem;
height: 2.5rem;
margin-bottom: 0.9rem;
color: hsl(var(--primary));
}
.contact-info-card__icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.contact-info-card h2 {
margin: 0 0 0.55rem;
font-size: 1.05rem;
}
.contact-info-card a,
.contact-info-card p {
display: block;
margin: 0.15rem 0 0;
color: hsl(var(--muted-foreground));
font-size: 0.86rem;
line-height: 1.55;
}
.contact-info-card a:hover {
color: hsl(var(--primary));
}
.contacts-map {
min-height: 260px;
overflow: hidden;
background: hsl(var(--muted));
}
.contacts-map iframe {
display: block;
width: 100%;
height: 100%;
min-height: 260px;
border: 0;
}
.contacts-form-card {
padding: 2rem;
}
.contacts-form-card h2 {
margin: 0 0 1.5rem;
font-size: 1.55rem;
}
.contacts-form {
display: grid;
gap: 1rem;
}
.contacts-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.contacts-form p,
.contacts-form label {
margin: 0;
}
.contacts-form label,
.contacts-captcha > label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.82rem;
font-weight: 500;
}
.contacts-form label span,
.contacts-captcha > label span {
color: hsl(var(--destructive));
}
.contacts-form input,
.contacts-form textarea {
width: 100%;
min-height: 2.85rem;
padding: 0.7rem 0.85rem;
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
outline: none;
background: hsl(var(--background));
color: hsl(var(--foreground));
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contacts-form textarea {
min-height: 120px;
resize: vertical;
}
.contacts-form input:focus,
.contacts-form textarea:focus {
border-color: hsl(var(--primary));
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.10);
}
.contacts-form__honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
.contacts-captcha__row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.contacts-captcha__question {
display: inline-flex;
min-width: 6.2rem;
min-height: 2.65rem;
align-items: center;
justify-content: center;
padding: 0.5rem 0.9rem;
border-radius: 0.5rem;
background: hsl(var(--muted));
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 1rem;
}
.contacts-captcha__row input {
width: 7rem;
}
.contacts-captcha__refresh {
display: inline-flex;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 2.5rem;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
color: hsl(var(--muted-foreground));
transition: background-color 0.2s ease, color 0.2s ease;
}
.contacts-captcha__refresh:hover {
background: hsl(var(--primary) / 0.08);
color: hsl(var(--primary));
}
.contacts-captcha__refresh svg {
width: 1.2rem;
height: 1.2rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.contacts-form__submit {
display: inline-flex;
width: 100%;
min-height: 3rem;
align-items: center;
justify-content: center;
gap: 0.55rem;
margin-top: 0.25rem;
padding: 0.7rem 1rem;
border-radius: 0.5rem;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-weight: 600;
transition: background-color 0.2s ease;
}
.contacts-form__submit:hover {
background: hsl(var(--primary) / 0.88);
}
.contacts-form__submit svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.contacts-page__editor-content {
max-width: 850px;
margin: 2.5rem auto 0;
color: hsl(var(--muted-foreground));
line-height: 1.7;
}
/* =========================================================
BLOG
========================================================= */
.blog-main {
padding: 2.5rem 0 4.5rem;
}
.blog-main__header {
margin-bottom: 2rem;
}
.blog-main__header h1 {
margin: 0;
font-size: clamp(2rem, 4vw, 2.4rem);
}
.blog-main__header p {
margin: 0.5rem 0 0;
color: hsl(var(--muted-foreground));
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.blog-card {
overflow: hidden;
border: 1px solid hsl(var(--border));
border-radius: 1rem;
background: hsl(var(--card));
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgb(0 0 0 / 0.08);
}
.blog-card__link {
display: block;
height: 100%;
color: inherit;
text-decoration: none !important;
}
.blog-card__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: hsl(var(--muted));
}
.blog-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.blog-card:hover .blog-card__media img {
transform: scale(1.05);
}
.blog-card__placeholder {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
color: hsl(var(--muted-foreground));
}
.blog-card__placeholder svg {
width: 2.25rem;
height: 2.25rem;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
}
.blog-card__body {
padding: 1.25rem;
}
.blog-card__date,
.blog-single__date {
display: flex;
align-items: center;
gap: 0.45rem;
color: hsl(var(--muted-foreground));
font-size: 0.75rem;
}
.blog-card__date svg,
.blog-single__date svg {
width: 0.95rem;
height: 0.95rem;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
}
.blog-card h2 {
margin: 0.55rem 0 0.4rem;
font-size: 1.05rem;
line-height: 1.35;
}
.blog-card p {
margin: 0;
color: hsl(var(--muted-foreground));
font-size: 0.85rem;
line-height: 1.55;
}
.blog-card__more {
display: inline-flex;
align-items: center;
gap: 0.3rem;
margin-top: 0.9rem;
color: hsl(var(--primary));
font-size: 0.85rem;
font-weight: 500;
transition: gap 0.2s ease;
}
.blog-card:hover .blog-card__more {
gap: 0.5rem;
}
.blog-card__more svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.blog-pagination {
margin-top: 2rem;
}
.blog-pagination ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.blog-pagination a,
.blog-pagination span {
display: inline-flex;
min-width: 2.4rem;
min-height: 2.4rem;
align-items: center;
justify-content: center;
padding: 0.45rem 0.7rem;
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
background: hsl(var(--background));
font-size: 0.82rem;
}
.blog-pagination .current {
border-color: hsl(var(--primary));
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.blog-empty {
padding: 4rem 1rem;
text-align: center;
}
.blog-empty svg {
width: 2.75rem;
height: 2.75rem;
margin: 0 auto 1rem;
fill: none;
stroke: hsl(var(--muted-foreground));
stroke-width: 1.5;
}
.blog-empty h2 {
margin: 0;
font-size: 1.2rem;
}
.blog-empty p {
margin: 0.45rem 0 0;
color: hsl(var(--muted-foreground));
font-size: 0.85rem;
}
/* =========================================================
SINGLE BLOG POST
========================================================= */
.blog-single {
padding: 2rem 0 4.5rem;
}
.blog-single__container {
max-width: 820px;
}
.blog-single__back {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-bottom: 1.5rem;
color: hsl(var(--muted-foreground));
font-size: 0.85rem;
transition: color 0.2s ease;
}
.blog-single__back:hover {
color: hsl(var(--primary));
}
.blog-single__back svg {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.blog-single__image {
aspect-ratio: 16 / 9;
overflow: hidden;
margin: 0 0 1.5rem;
border-radius: 1rem;
}
.blog-single__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.blog-single h1 {
margin: 0.55rem 0 1.5rem;
font-size: clamp(2rem, 4vw, 2.5rem);
line-height: 1.18;
}
.blog-single__content {
font-size: 0.95rem;
line-height: 1.75;
}
.blog-single__content p {
margin: 0 0 1rem;
color: hsl(var(--muted-foreground));
}
.blog-single__content h2,
.blog-single__content h3 {
margin: 2rem 0 0.75rem;
line-height: 1.3;
}
.blog-single__content h2 {
font-size: 1.45rem;
}
.blog-single__content h3 {
font-size: 1.15rem;
}
.blog-single__content img {
height: auto;
margin: 1.5rem 0;
border-radius: 0.75rem;
}
.blog-single__content ul,
.blog-single__content ol {
margin: 0 0 1rem 1.25rem;
}
.blog-single__content blockquote {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border-left: 3px solid hsl(var(--primary));
background: hsl(var(--primary) / 0.05);
color: hsl(var(--muted-foreground));
}
.blog-single__footer {
margin-top: 2.5rem;
padding-top: 1.25rem;
border-top: 1px solid hsl(var(--border));
}
.blog-single__footer a {
color: hsl(var(--primary));
font-weight: 500;
}
@media (max-width: 900px) {
.about-stats__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-main__grid,
.contacts-main__grid {
grid-template-columns: 1fr;
}
.blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.about-hero,
.about-stats,
.about-main,
.contacts-main,
.blog-main {
padding-top: 2rem;
padding-bottom: 2.75rem;
}
.about-stats__grid,
.about-main__grid,
.contacts-info__top,
.contacts-form__grid,
.blog-grid {
grid-template-columns: 1fr;
}
.about-main__grid {
gap: 2rem;
}
.contacts-form-card {
padding: 1.25rem;
}
.contacts-captcha__row {
flex-wrap: wrap;
}
.blog-single {
padding-top: 1.5rem;
}
}
/* =========================================================
BLOG CARD TEXT OVERFLOW FIX
========================================================= */
.blog-card,
.blog-card__link,
.blog-card__body {
min-width: 0;
}
.blog-card h2,
.blog-card p {
overflow-wrap: anywhere;
word-break: break-word;
}
.blog-card h2 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.blog-card p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
/* =========================================================
MY ACCOUNT DEFAULT AVATAR
========================================================= */
.imidjstroy-account__avatar {
overflow: hidden;
padding: 0 !important;
background: transparent !important;
}
.imidjstroy-account__avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: inherit;
}
/* =========================================================
MODULAR HOME: NEWS / GALLERY / CTA / TEXT
========================================================= */
.home-news{padding:3.5rem 0;background:hsl(var(--background));}
.home-news__heading,.home-gallery__heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;}
.home-news__heading h2,.home-gallery__heading h2{margin:0;font-size:clamp(1.5rem,2.8vw,2rem);}
.home-news__heading a{display:inline-flex;align-items:center;gap:.35rem;color:hsl(var(--primary));font-size:.86rem;font-weight:600;}
.home-news__heading a svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.home-gallery{padding:3.5rem 0;background:hsl(var(--background));}
.home-gallery__grid{display:grid;grid-template-columns:repeat(var(--gallery-columns,4),minmax(0,1fr));gap:1rem;}
.home-gallery__item{overflow:hidden;aspect-ratio:4/3;margin:0;border-radius:.9rem;background:hsl(var(--muted));box-shadow:0 5px 14px rgb(0 0 0/.05);}
.home-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.home-gallery__item:hover img{transform:scale(1.035);}
.home-cta{padding:3.5rem 0;background:hsl(var(--accent));}
.home-cta__box{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem 2.25rem;border:1px solid hsl(var(--primary)/.15);border-radius:1rem;background:hsl(var(--card));box-shadow:0 10px 25px rgb(0 0 0/.04);}
.home-cta__box h2{margin:0;font-size:1.55rem}.home-cta__box p{margin:.45rem 0 0;color:hsl(var(--muted-foreground));}
.home-cta__button{display:inline-flex;min-height:2.8rem;align-items:center;justify-content:center;padding:.7rem 1.1rem;border-radius:.55rem;background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:600;white-space:nowrap;}
.home-text-block{padding:3.5rem 0;background:hsl(var(--background));}.home-text-block__inner{max-width:900px}.home-text-block__eyebrow{display:block;margin-bottom:.45rem;color:hsl(var(--primary));font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.home-text-block h2{margin:0 0 .8rem;font-size:clamp(1.5rem,2.8vw,2rem)}.home-text-block__content{color:hsl(var(--muted-foreground));line-height:1.7}.home-text-block__content p:last-child{margin-bottom:0}
@media(max-width:900px){.home-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-cta__box{align-items:flex-start;flex-direction:column}.home-news .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.home-news,.home-gallery,.home-cta,.home-text-block{padding:2.75rem 0}.home-news__heading,.home-gallery__heading{align-items:flex-start}.home-news .blog-grid,.home-gallery__grid{grid-template-columns:1fr}.home-cta__box{padding:1.4rem}.home-cta__button{width:100%}}
/* =========================================================
HERO — EDITABLE GUTENBERG INNER BLOCKS
========================================================= */
.home-hero--blocks .home-hero__content > *:first-child { margin-top: 0; }
.home-hero--blocks .home-hero__content > *:last-child { margin-bottom: 0; }
.home-hero--blocks .home-hero__title-first,
.home-hero--blocks .home-hero__title-accent {
max-width: 36rem;
margin: 0;
color: hsl(var(--secondary-foreground));
font-weight: 700;
line-height: 1.25;
}
.home-hero--blocks .home-hero__title-first { font-size: 2.25rem; }
.home-hero--blocks .home-hero__title-accent {
margin-top: 0.35rem;
color: hsl(var(--primary));
font-size: 2.25rem;
}
.home-hero--blocks .home-hero__text {
max-width: 36rem;
margin: 1rem 0 2rem;
color: hsl(var(--secondary-foreground) / 0.80);
font-size: 1.125rem;
line-height: 1.625;
}
.home-hero--blocks .wp-block-buttons.home-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin: 0 0 2rem;
}
.home-hero--blocks .home-hero__actions .wp-block-button { margin: 0; }
.home-hero--blocks .home-hero__actions .wp-block-button__link {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
padding: 0 2rem;
border: 1px solid transparent;
border-radius: calc(var(--radius) - 2px);
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
text-decoration: none;
box-shadow: none;
}
.home-hero--blocks .home-hero__button--primary .wp-block-button__link {
border-color: hsl(var(--primary));
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.home-hero--blocks .home-hero__button--primary .wp-block-button__link:hover {
background: hsl(var(--primary) / 0.90);
}
.home-hero--blocks .home-hero__button--outline .wp-block-button__link {
border-color: hsl(var(--primary-foreground) / 0.50);
background: transparent;
color: hsl(var(--primary-foreground));
}
.home-hero--blocks .home-hero__button--outline .wp-block-button__link:hover {
background: hsl(var(--primary-foreground) / 0.10);
color: hsl(var(--primary-foreground));
}
.home-hero--blocks .wp-block-group.home-hero__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin: 0;
color: hsl(var(--secondary-foreground) / 0.70);
font-size: 0.875rem;
}
.home-hero--blocks .home-hero__meta-item {
position: relative;
display: inline-flex;
align-items: center;
margin: 0;
padding-left: 1.35rem;
}
.home-hero--blocks .home-hero__meta-item::before {
position: absolute;
left: 0;
top: 50%;
width: 1rem;
height: 1rem;
transform: translateY(-50%);
background-color: currentColor;
content: '';
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
}
.home-hero--blocks .home-hero__meta-item--phone::before {
content: '☎';
width: auto;
height: auto;
background: none;
-webkit-mask-image: none;
mask-image: none;
}
.home-hero--blocks .home-hero__meta-item--location::before {
content: '⌖';
width: auto;
height: auto;
background: none;
-webkit-mask-image: none;
mask-image: none;
}
@media (min-width: 768px) {
.home-hero--blocks .home-hero__title-first,
.home-hero--blocks .home-hero__title-accent {
font-size: 3rem;
}
}
/* =========================================================
HERO LAYOUT CONTROLS — FRONT END
========================================================= */
.home-hero--blocks .home-hero__content {
width: 100%;
max-width: none;
}
.home-hero--blocks .wp-block-buttons.home-hero__actions {
width: 100%;
max-width: none;
}
.home-hero--blocks .home-hero__actions.is-content-justification-left {
justify-content: flex-start;
}
.home-hero--blocks .home-hero__actions.is-content-justification-center {
justify-content: center;
}
.home-hero--blocks .home-hero__actions.is-content-justification-right {
justify-content: flex-end;
}
.home-hero--blocks .home-hero__actions .wp-block-button__link {
border-radius: 8px !important;
}
.home-hero--blocks .wp-block-group.home-hero__meta {
width: 100%;
max-width: none;
}
/* =========================================================
HERO — independent button and contact elements
========================================================= */
.home-hero--blocks .wp-block-imidjstroy-button,
.home-hero--blocks .wp-block-imidjstroy-contact-item {
width: 100%;
margin: 0 0 0.85rem;
}
.home-hero--blocks .wp-block-imidjstroy-contact-item:last-child {
margin-bottom: 0;
}
.home-hero--blocks .imidjstroy-inline-button,
.home-hero--blocks .imidjstroy-contact-line {
width: 100%;
}
.home-hero--blocks .imidjstroy-inline-button__inner,
.home-hero--blocks .imidjstroy-contact-line__inner {
display: flex;
width: 100%;
}
.home-hero--blocks .imidjstroy-inline-button.is-align-left .imidjstroy-inline-button__inner,
.home-hero--blocks .imidjstroy-contact-line.is-align-left .imidjstroy-contact-line__inner { justify-content: flex-start; }
.home-hero--blocks .imidjstroy-inline-button.is-align-center .imidjstroy-inline-button__inner,
.home-hero--blocks .imidjstroy-contact-line.is-align-center .imidjstroy-contact-line__inner { justify-content: center; }
.home-hero--blocks .imidjstroy-inline-button.is-align-right .imidjstroy-inline-button__inner,
.home-hero--blocks .imidjstroy-contact-line.is-align-right .imidjstroy-contact-line__inner { justify-content: flex-end; }
.home-hero--blocks .imidjstroy-inline-button__link {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0 2rem;
border: 1px solid transparent;
border-radius: calc(var(--radius) - 2px);
font-size: 0.875rem;
font-weight: 500;
line-height: 1;
text-decoration: none;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.home-hero--blocks .imidjstroy-inline-button.is-style-primary .imidjstroy-inline-button__link {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.home-hero--blocks .imidjstroy-inline-button.is-style-primary .imidjstroy-inline-button__link:hover {
background: hsl(var(--primary) / 0.90);
}
.home-hero--blocks .imidjstroy-inline-button.is-style-outline .imidjstroy-inline-button__link {
border-color: hsl(var(--primary-foreground) / 0.50);
background: transparent;
color: hsl(var(--primary-foreground));
}
.home-hero--blocks .imidjstroy-inline-button.is-style-outline .imidjstroy-inline-button__link:hover {
background: hsl(var(--primary-foreground) / 0.10);
color: hsl(var(--primary-foreground));
}
.home-hero--blocks .imidjstroy-contact-line__inner {
display: inline-flex;
width: auto;
align-items: center;
gap: 0.6rem;
color: hsl(var(--secondary-foreground));
}
.home-hero--blocks .imidjstroy-contact-line__icon {
width: 1rem;
height: 1rem;
color: hsl(var(--primary-foreground) / 0.92);
flex: 0 0 auto;
}
.home-hero--blocks .imidjstroy-contact-line__icon svg {
display: block;
width: 1rem;
height: 1rem;
}
.home-hero--blocks .imidjstroy-contact-line__text,
.home-hero--blocks .imidjstroy-contact-line__text:visited {
color: hsl(var(--secondary-foreground));
font-size: 0.95rem;
line-height: 1.4;
text-decoration: none;
}
.home-hero--blocks .imidjstroy-contact-line__text:hover {
color: hsl(var(--primary-foreground));
}
/* =========================================================
ELEMENT ROW — FRONT END
========================================================= */
.imidjstroy-element-row,
.imidjstroy-element-row__inner {
width: 100%;
}
.imidjstroy-element-row__inner {
display: flex;
align-items: center;
gap: var(--imidjstroy-row-gap, 12px);
}
.imidjstroy-element-row.is-wrap .imidjstroy-element-row__inner { flex-wrap: wrap; }
.imidjstroy-element-row.is-nowrap .imidjstroy-element-row__inner { flex-wrap: nowrap; }
.imidjstroy-element-row.is-justify-left .imidjstroy-element-row__inner { justify-content: flex-start; }
.imidjstroy-element-row.is-justify-center .imidjstroy-element-row__inner { justify-content: center; }
.imidjstroy-element-row.is-justify-right .imidjstroy-element-row__inner { justify-content: flex-end; }
.imidjstroy-element-row .wp-block-imidjstroy-button,
.imidjstroy-element-row .wp-block-imidjstroy-contact-item {
width: auto;
flex: 0 0 auto;
margin: 0;
}
.imidjstroy-element-row .imidjstroy-inline-button,
.imidjstroy-element-row .imidjstroy-contact-line {
width: auto;
}
/* =========================================================
HERO DIRECT CONTACT GAP V2
========================================================= */
.home-hero--blocks .home-hero__content > .wp-block-imidjstroy-contact-item {
display: inline-block;
width: auto;
max-width: none;
margin: 0.25rem 2rem 0 0;
vertical-align: middle;
}
.home-hero--blocks .home-hero__content > .wp-block-imidjstroy-contact-item:last-of-type {
margin-right: 0;
}
.home-hero--blocks .home-hero__content > .wp-block-imidjstroy-contact-item .imidjstroy-contact-line,
.home-hero--blocks .home-hero__content > .wp-block-imidjstroy-contact-item .imidjstroy-contact-line__inner {
width: auto;
}
/* =========================================================
HERO PRIMARY BUTTON RADIUS FIX
Uses the theme radius variable so it can be centralized later.
========================================================= */
.home-hero .home-hero__button--primary,
.home-hero a.home-hero__button--primary,
.home-hero .home-hero__button--primary .wp-block-button__link,
.home-hero .imidjstroy-inline-button.is-style-primary .imidjstroy-inline-button__link {
border-radius: calc(var(--radius, 0.5rem) - 2px) !important;
}
/* =========================================================
HERO CONTACT SPACING FIX
- real gap between separate contact items
- preserve manually entered spaces inside contact text
========================================================= */
.home-hero .home-hero__meta {
column-gap: 1.5rem !important;
row-gap: 0.5rem !important;
}
.home-hero .home-hero__meta-item > span,
.home-hero .imidjstroy-contact-line__text,
.home-hero .wp-block-imidjstroy-contact-item .imidjstroy-contact-line__text {
white-space: break-spaces !important;
}
/* =========================================================
HERO CITY ICON FIX
Add class hero-city-line to the paragraph with city text in Hero.
========================================================= */
.home-hero .hero-city-line {
display: inline-flex !important;
align-items: center;
gap: 0.5rem;
color: #fff;
margin: 0;
line-height: 1.4;
white-space: break-spaces;
}
.home-hero .hero-city-line::before {
content: "";
width: 0.95rem;
height: 0.95rem;
flex: 0 0 0.95rem;
display: inline-block;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* =========================================================
HERO CITY ICON FIX V2
Replaces mask-based icon with inline SVG background.
========================================================= */
.home-hero .hero-city-line::before {
content: "" !important;
width: 0.95rem;
height: 0.95rem;
flex: 0 0 0.95rem;
display: inline-block;
background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20fill%3D%22%2523ffffff%22%20d%3D%22M172.3%20501.7C27.5%20291%200%20269.4%200%20192%200%2086%2086%200%20192%200s192%2086%20192%20192c0%2077.4-27.5%2099-172.3%20309.7-9.5%2013.8-29.9%2013.8-39.4%200zM192%20272a80%2080%200%201%200%200-160%2080%2080%200%201%200%200%20160z%22/%3E%3C/svg%3E") center / contain no-repeat !important;
background-color: transparent !important;
-webkit-mask: none !important;
mask: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.home-hero .hero-city-line::before {
filter: brightness(0) invert(1);
}
/* =========================================================
HERO CONTACT TEXT — STABLE CONTRAST V2
Keep only fixed service/contact elements white. Generic Gutenberg
paragraphs/headings must remain free to use their saved text colors.
========================================================= */
.home-hero--blocks .imidjstroy-contact-line__text,
.home-hero--blocks .imidjstroy-contact-line__text:visited,
.home-hero--blocks .hero-city-line,
.home-hero--blocks .hero-city-line a {
color: #fff !important;
}
/* =========================================================
INNER PAGE HERO — UNIFIED HEIGHT
========================================================= */
.inner-page-hero,
.about-hero {
min-height: 170px;
box-sizing: border-box;
display: flex;
align-items: center;
padding-top: 0;
padding-bottom: 0;
}
.inner-page-hero > .imidjstroy-flex-section__inner,
.about-hero > .container {
width: 100%;
}