/* ---------- global.css ---------- */
html {
scroll-behavior: smooth;
}
/* HEADER */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: white;
backdrop-filter: blur(8px);
border-bottom: 1px solid #eee;
}
.header-container {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
}
.header-logo img {
height: 48px;
width: auto;
transition: var(--transition);
}
.nav-menu {
list-style: none;
display: flex;
gap: 28px;
margin: 0;
padding: 0;
}
.nav-menu a {
color: var(--text-color);
font-weight: 500;
text-decoration: none;
transition: var(--transition);
}
.nav-menu a:hover {
color: var(--copper);
}
.hamburger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 26px;
height: 18px;
cursor: pointer;
margin-left: 15px;
}
.hamburger span {
display: block;
height: 3px;
width: 100%;
background: #333;
border-radius: 2px;
transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
}
.header-utilities {
display: flex;
align-items: center;
gap: 20px;
}
.fa-search{font-size:18px;}
.cta-button {
background: #444;
color: #fff;
padding: 10px 18px;
border-radius: 32px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.cta-button:hover {
background: var(--copper);
}
/* overlay base: hidden by default, shown with .active */
.search-overlay {
position: fixed; /* cover viewport and stay with scroll */
left: 50%; /* center horizontally via transform */
transform: translateX(-50%);
top: 80px; /* distance from top (adjust if header height changes) */
z-index: 9999;
width: min(750px, calc(100% - 48px)); /* fluid: up to 950px, but never wider than viewport - padding */
max-width: 750px;
background: #fff;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
padding: 12px;
display: none;
flex-direction: column;
transition: opacity 0.18s ease, transform 0.18s ease;
opacity: 0;
pointer-events: none;
}
/* show when active */
.search-overlay.active {
display: flex;
opacity: 1;
pointer-events: auto;
}
#ajax-search-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 6px;
}
#ajax-search-results {
margin-top: 8px;
max-height: 240px;
overflow-y: auto;
}
#ajax-search-results a {
display: flex;
align-items: center;
gap: 8px;
padding: 6px;
text-decoration: none;
color: var(--text-color);
transition: var(--transition);
}
#ajax-search-results a:hover {
background: #f6f6f6;
}
#ajax-search-results img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 4px;
}
/* Buttons */
.btn-primary,
.btn-secondary {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 600;
text-align: center;
transition: 0.2s ease-in-out;
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-white);
}
.btn-primary:hover {
background-color: #efb276;
}
.btn-secondary {
border: 1.5px solid #fff;
color: #fff;
}
.btn-secondary:hover {
background-color: #efb276;
border: 1.5px solid transparent;
color:#333;
}
/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
/* ====== Mega Menu Base ====== */
.nav-menu {
list-style: none;
display: flex;
align-items: center;
gap: 2rem;
margin: 0;
padding: 0;
}
.nav-menu li {
position: relative;
}
.nav-menu a {
color: #222;
text-decoration: none;
font-weight: 500;
padding: 10px 0;
display: block;
}
/* ================================== */
/* ==== Start Mega Menu Container === */
/* === Mega Menu === */
.has-mega-menu {
position: relative;
}
.mega-menu {
position: fixed;
top: 100px; /* adjust depending on your header height */
left: 50%;
transform: translateX(-50%);
max-width: 1280px;
width: 100%;
background: #ffffff;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
opacity: 0;
visibility: hidden;
border-radius: 14px;
padding: 2rem 2.5rem;
transition: all 0.3s ease;
z-index: 9999;
}
.has-mega-menu:hover .mega-menu {
opacity: 1;
visibility: visible;
top: calc(100% + 1px);
}
/* --- Inner Container --- */
.mega-menu-container {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 3 columns + 1 featured */
gap: 2rem;
align-items: start;
}
/* --- Columns --- */
.mega-column h4 {
font-size: 1.05rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #222;
border-bottom: 2px solid var(--accent-color, #b87333);
display: inline-block;
padding-bottom: 0.3rem;
}
.mega-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.mega-column li {
margin-bottom: 0;
}
.mega-column a {
color: #555;
text-decoration: none;
font-size: 0.95rem;
transition: color 0.2s ease, padding-left 0.2s ease;
padding:5px 0;
}
.mega-column a:hover {
color: var(--accent-color, #b87333);
padding-left: 4px;
}
/* --- Featured Product --- */
.mega-feature {
text-align: center;
padding: 15px;
background: #fff;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.mega-feature h4 {
margin-bottom: 12px;
font-size: 1.1rem;
font-weight: 600;
color: #333;
}
.mega-feature .featured-link {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: inherit;
}
.dynamic-featured-image {
width: 260px;
height: 150px;
background-size: cover;
background-position: center;
border-radius: 8px;
transition: transform 0.3s ease;
}
.mega-feature .featured-details {
margin-top: 10px;
text-align: center;
}
.featured-title {
display: block;
font-weight: 500;
margin-bottom: 8px;
color: #222;
font-size: 0.95rem;
}
.featured-btn {
display: inline-block;
padding: 8px 16px;
background-color: #b87333; /* Copper tone */
color: #fff;
border: none;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.featured-btn:hover {
background-color: #a5662b;
}
.featured-link:hover .dynamic-featured-image {
transform: scale(1.03);
}
/* === Responsive === */
@media (max-width: 1280px) {
.mega-menu {
width: 95%;
}
}
@media (max-width: 1024px) {
.mega-menu-container {
grid-template-columns: repeat(2, 1fr);
}
.mega-feature {
grid-column: span 2;
}
}
@media (max-width: 768px) {
.has-mega-menu > a {
pointer-events: auto;
}
.mega-menu {
display: none;
position: static;
transform: none;
width: 100%;
box-shadow: none;
opacity: 1;
visibility: visible;
padding: 1.5rem 1rem;
}
.has-mega-menu.mega-open .mega-menu {
display: block;
}
.mega-menu-container {
grid-template-columns: 1fr;
}
.mega-feature {
grid-column: span 1;
}
}
/* ===== End Mega Menu Container ==== */
/* ================================== */
/* ---------- FEATURED COLLECTIONS SECTION ---------- */
.featured-collections {
padding: 100px 0;
text-align: center;
background-color: #f9fafb;
}
.featured-collections h2 {
font-size: 2rem;
margin-bottom: 10px;
color: #1a1a1a;
}
.featured-collections .intro {
font-size: 1rem;
color: #555;
margin-bottom: 50px;
}
.collection-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 50px;
}
.collection-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.collection-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.badge {
position: absolute;
top: 15px;
right: 15px;
padding: 4px 12px;
border-radius: 9999px;
font-size: 0.8rem;
color: #fff;
font-weight: 600;
}
.badge.bestseller { background: #b25900; }
.badge.new { background: #0047ff; }
.badge.premium { background: #8b5a00; }
.card-image {
background: #f5f5f5;
}
.card-content {
padding: 20px 25px;
text-align: left;
}
.card-content .category {
color: #b25900;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 5px;
}
.card-content h3 {
font-size: 1.1rem;
margin-bottom: 5px;
}
.card-content .desc {
color: #555;
font-size: 0.9rem;
margin-bottom: 12px;
}
.price-row {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
}
.details-link {
color: #b25900;
text-decoration: none;
font-size: 0.9rem;
}
.details-link:hover {
text-decoration: underline;
}
.btn-dark {
display: inline-block;
background: #111827;
color: #fff;
padding: 12px 28px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: background 0.3s;
}
.btn-dark:hover {
background: #000;
}
.view-btn {
margin: 40px 0 60px;
}
.stats-row {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.stat-box {
background: #fff;
border-radius: 12px;
padding: 25px 40px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.stat-box strong {
display: block;
font-size: 1.1rem;
color: #1a1a1a;
}
.stat-box span {
font-size: 0.9rem;
color: #777;
}
.site-footer {
background-color: #141922;
color: #d1d5db;
padding: 60px 0 30px;
font-family: 'Inter', sans-serif;
}
.footer-container {
width: 85%;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 40px;
}
.footer-logo img {
width: 180px;
height: auto;
display: block;
margin-bottom: 20px;
}
.footer-column h3,
.footer-column h4 {
color: #fff;
margin-bottom: 15px;
}
.footer-column p {
line-height: 1.6;
margin-bottom: 20px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 10px;
}
.footer-column a {
color: #d1d5db;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column a:hover {
color: #c2702d; /* Copper tone */
}
.footer-column.contact i {
color: #c2702d;
margin-right: 10px;
}
.social-icons a {
display: inline-block;
background: #1f2630;
padding: 10px;
border-radius: 8px;
margin-right: 10px;
color: #d1d5db;
transition: all 0.3s ease;
}
.social-icons a:hover {
background: #c2702d;
color: #fff;
}
.footer-bottom {
border-top: 1px solid #2b3240;
margin-top: 40px;
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 85%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.footer-links a {
margin-left: 20px;
color: #d1d5db;
text-decoration: none;
}
.footer-links a:hover {
color: #c2702d;
}
.testimonials-section {
padding: 60px 0;
text-align: center;
background: rgb(247, 244, 239);
}
.rating-badge {
background-color: #fff7ed;
color: #c05621;
display: inline-block;
padding: 6px 14px;
border-radius: 20px;
font-size: 14px;
margin-bottom: 10px;
}
.section-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 10px;
}
.section-subtitle {
color: #555;
max-width: 600px;
margin: 0 auto 50px;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.testimonial-card {
background: #fafafa;
border-radius: 12px;
padding: 30px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
text-align: left;
}
.quote-icon {
font-size: 24px;
color: #c05621;
}
.stars {
color: #c05621;
margin: 5px 0;
}
.testimonial-text {
font-style: italic;
margin-bottom: 20px;
color: #333;
}
.author {
border-top: 1px solid #eaeaea;
padding-top: 10px;
font-size: 14px;
color: #666;
}
.featured-in {
margin: 60px 0;
font-size: 14px;
color: #888;
text-align: center;
}
.featured-in .brands {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 10px;
font-weight: 500;
}
.cta-section {
background: #2a1710;
color: white;
padding: 60px 20px;
max-width: 100%;
margin: 0px auto;
}
.cta-container {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.cta-container h3 {
font-size: 22px;
margin-bottom: 10px;
color:#fff;
}
.cta-container p {
margin-bottom: 25px;
color: #fff;
}
.cta-buttons {
display: flex;
justify-content: center;
gap: 15px;
}
.btn {
padding: 10px 25px;
border-radius: 32px;
text-decoration: none;
font-weight: 400;
transition: 0.2s;
}
.btn-light {
background: white;
color: #2a1710;
}
.btn-light:hover {
opacity: 0.9;
}
.btn-outline {
border: 2px solid white;
color: white;
}
.btn-outline:hover {
background: white;
color: #2a1710;
}
.btn-outline {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1.5px solid #fff;
border-radius: 8px;
padding: 10px 18px;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
border-radius: 32px;
}
/*=====================================================
Homepage Bespoke Quote Section
=====================================================*/
.quote-section-redesign {
--quote-panel: #f8f5f0;
--quote-text: #1e1d1a;
--quote-muted: #6f6962;
--quote-border: #d9ccc1;
--quote-copper: #a96d3f;
--quote-error: #b33d36;
position: relative;
min-height: 900px;
padding: clamp(70px, 7vw, 120px) clamp(24px, 5vw, 80px);
display: flex;
align-items: center;
overflow: hidden;
/*
* Full section background.
* Update the filename if required.
*/
background-image:
linear-gradient(
90deg,
rgba(15, 13, 11, 0.08) 0%,
rgba(15, 13, 11, 0.02) 48%,
rgba(15, 13, 11, 0.16) 100%
),
url("../images/quote-section-background.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.quote-section-redesign *,
.quote-section-redesign *::before,
.quote-section-redesign *::after {
box-sizing: border-box;
}
/*=====================================================
Main Layout
=====================================================*/
.quote-section-redesign .quote-container {
position: relative;
z-index: 2;
width: min(1460px, 100%);
margin: 0 auto;
display: flex;
justify-content: flex-end;
align-items: center;
background: transparent;
box-shadow: none;
overflow: visible;
}
/*
* The image is now applied to the full section,
* so this separate visual column is not required.
*/
.quote-section-redesign .quote-visual {
display: none;
}
/*=====================================================
Form Card
=====================================================*/
.quote-section-redesign .quote-form-wrapper {
width: min(800px, 50%);
min-height: 665px;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(55px, 2vw, 82px) clamp(48px, 2vw, 78px);
background: var(--quote-panel);
border-radius: 4px;
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.18);
}
.quote-section-redesign .quote-form,
.quote-section-redesign .quote-success-message {
width: 100%;
max-width: 760px;
}
/*=====================================================
Heading
=====================================================*/
.quote-section-redesign .quote-form-heading {
margin: 0 0 48px;
text-align: center;
}
.quote-section-redesign .quote-form-heading h2 {
margin: 0;
color: var(--quote-text);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(44px, 4vw, 66px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.025em;
}
.quote-section-redesign .quote-form-heading p {
max-width: 570px;
margin: 13px auto 0;
color: var(--quote-muted);
font-size: 15px;
line-height: 1.55;
}
/*=====================================================
Form Grid
=====================================================*/
.quote-section-redesign .quote-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 18px;
}
.quote-section-redesign .quote-field {
display: flex;
flex-direction: column;
min-width: 0;
}
.quote-section-redesign .quote-field-half {
grid-column: span 1;
}
.quote-section-redesign .quote-field-full {
grid-column: 1 / -1;
}
/*=====================================================
Fields
=====================================================*/
.quote-section-redesign .quote-field input,
.quote-section-redesign .quote-field select,
.quote-section-redesign .quote-field textarea {
display: block;
width: 100%;
margin: 0;
border: 1px solid var(--quote-border);
border-radius: 8px;
outline: none;
color: var(--quote-text);
background: rgba(255, 255, 255, 0.18);
font-family: inherit;
font-size: 15px;
box-shadow: none;
transition:
border-color 160ms ease,
background-color 160ms ease,
box-shadow 160ms ease;
}
.quote-section-redesign .quote-field input,
.quote-section-redesign .quote-field select {
height: 40px;
padding: 0 18px;
}
.quote-section-redesign .quote-field textarea {
min-height: 135px;
padding: 16px 18px;
line-height: 1.55;
resize: vertical;
}
.quote-section-redesign .quote-field select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
/* Change this value */
background-position: right 18px center;
background-size: 14px;
}
.quote-section-redesign .quote-field input::placeholder,
.quote-section-redesign .quote-field textarea::placeholder {
color: #9a928a;
opacity: 1;
}
.quote-section-redesign .quote-field input:hover,
.quote-section-redesign .quote-field select:hover,
.quote-section-redesign .quote-field textarea:hover {
border-color: #bea38d;
}
.quote-section-redesign .quote-field input:focus,
.quote-section-redesign .quote-field select:focus,
.quote-section-redesign .quote-field textarea:focus {
border-color: var(--quote-copper);
background: #fff;
box-shadow: 0 0 0 3px rgba(169, 109, 63, 0.09);
}
/*=====================================================
Submit Button
=====================================================*/
.quote-section-redesign #quote-submit,
.quote-section-redesign .success-card .btn-dark {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
min-height: 58px;
margin: 27px 0 0;
padding: 14px 24px;
border: 1px solid #1b1b18;
border-radius: 1px;
color: #fff;
background: #1b1b18;
font-family: inherit;
font-size: 19px;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
transition:
background-color 180ms ease,
border-color 180ms ease,
transform 180ms ease,
box-shadow 180ms ease;
}
.quote-section-redesign #quote-submit:hover,
.quote-section-redesign #quote-submit:focus-visible,
.quote-section-redesign .success-card .btn-dark:hover,
.quote-section-redesign .success-card .btn-dark:focus-visible {
border-color: #342f29;
background: #342f29;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(22, 18, 14, 0.14);
}
.quote-section-redesign #quote-submit:disabled {
opacity: 0.66;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.quote-section-redesign #quote-submit .btn-arrow {
font-size: 15px;
transition: transform 180ms ease;
}
.quote-section-redesign #quote-submit:hover .btn-arrow {
transform: translateX(4px);
}
.quote-section-redesign .btn-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: quoteSpinner 700ms linear infinite;
}
@keyframes quoteSpinner {
to {
transform: rotate(360deg);
}
}
.quote-section-redesign .form-note {
margin: 14px 0 0;
color: var(--quote-muted);
font-size: 13px;
line-height: 1.45;
text-align: center;
}
/*=====================================================
Validation
=====================================================*/
.quote-section-redesign .field-error,
.quote-section-redesign input.field-error,
.quote-section-redesign select.field-error,
.quote-section-redesign textarea.field-error {
border-color: var(--quote-error) !important;
box-shadow: 0 0 0 3px rgba(179, 61, 54, 0.08) !important;
}
.quote-section-redesign .quote-error,
.quote-section-redesign .form-error,
.quote-section-redesign .quote-form-message {
grid-column: 1 / -1;
margin: 0 0 18px;
padding: 11px 14px;
border: 1px solid rgba(179, 61, 54, 0.26);
color: #912f2a;
background: #fff0ee;
font-size: 14px;
line-height: 1.5;
}
/*=====================================================
Success State
=====================================================*/
.quote-section-redesign .quote-success-message {
margin: auto;
}
.quote-section-redesign .success-card {
padding: clamp(52px, 7vw, 84px) clamp(30px, 5vw, 72px);
border: 1px solid var(--quote-border);
background: rgba(255, 255, 255, 0.3);
text-align: center;
}
.quote-section-redesign .success-card::before {
content: "β";
display: flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
margin: 0 auto 25px;
border: 1px solid rgba(169, 109, 63, 0.45);
border-radius: 50%;
color: var(--quote-copper);
font-size: 29px;
}
.quote-section-redesign .success-card h3 {
margin: 0;
color: var(--quote-text);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(31px, 3vw, 45px);
font-weight: 400;
line-height: 1.2;
}
.quote-section-redesign .success-card p {
max-width: 500px;
margin: 15px auto 0;
color: var(--quote-muted);
font-size: 16px;
line-height: 1.6;
}
.quote-section-redesign .success-card .btn-dark {
width: auto;
min-width: 260px;
margin: 29px auto 0;
}
/*=====================================================
Medium Desktop
=====================================================*/
@media (max-width: 1250px) {
.quote-section-redesign {
min-height: 820px;
padding-right: 42px;
padding-left: 42px;
background-position: 38% center;
}
.quote-section-redesign .quote-form-wrapper {
width: min(790px, 65%);
padding-right: 48px;
padding-left: 48px;
}
.quote-section-redesign .quote-form-heading h2 {
font-size: clamp(42px, 4.4vw, 56px);
}
}
/*=====================================================
Tablet
=====================================================*/
@media (max-width: 950px) {
.quote-section-redesign {
min-height: auto;
padding: 500px 28px 60px;
align-items: flex-start;
background-position: center top;
background-size: auto 580px;
background-color: #171713;
}
.quote-section-redesign .quote-container {
justify-content: center;
}
.quote-section-redesign .quote-form-wrapper {
width: min(820px, 100%);
min-height: 0;
padding: 60px 45px;
}
}
/*=====================================================
Mobile
=====================================================*/
@media (max-width: 640px) {
.quote-section-redesign {
padding: 350px 14px 28px;
background-size: auto 420px;
background-position: center top;
}
.quote-section-redesign .quote-form-wrapper {
padding: 45px 22px;
border-radius: 0;
}
.quote-section-redesign .quote-form-heading {
margin-bottom: 34px;
}
.quote-section-redesign .quote-form-heading h2 {
font-size: 39px;
}
.quote-section-redesign .quote-form-heading p {
font-size: 14px;
}
.quote-section-redesign .quote-form-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.quote-section-redesign .quote-field-half,
.quote-section-redesign .quote-field-full {
grid-column: 1;
}
.quote-section-redesign .quote-field input,
.quote-section-redesign .quote-field select {
height: 54px;
}
.quote-section-redesign .quote-field textarea {
min-height: 120px;
}
.quote-section-redesign #quote-submit {
min-height: 56px;
font-size: 17px;
}
.quote-section-redesign .success-card {
padding: 48px 22px;
}
.quote-section-redesign .success-card .btn-dark {
width: 100%;
min-width: 0;
}
}
.btn-spinner {
width: 14px;
height: 14px;
border: 2px solid #fff;
border-top: 2px solid transparent;
border-radius: 50%;
display: inline-block;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.btn-dark.disabled {
opacity: 0.7;
cursor: not-allowed;
}
.form-note {
margin-top: 10px;
font-size: 13px;
text-align: center;
opacity: 0.9;
}
.shop-archive-wrapper { max-width: var(--max-width); margin: 0 auto; padding: 40px 20px; }
.shop-topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
/* Shop page Search container*/
.shop-search {
min-width:260px;
}
.shop-search input[type="search"], #ajax-global-search {
width:100%; max-width:700px; padding:12px 16px; border-radius:999px; border:1px solid #e6e6e6; outline:none;
box-shadow: var(--card-shadow);
}
.shop-content { display:flex; gap:20px; align-items:flex-start; }
.shop-filters {
display: none; /* Hidden by default */
}
.shop-content.filters-visible .shop-filters {
display: block;
}
/* When filters are hidden */
.shop-content.filters-hidden .shop-filters {
width: 0 !important;
padding: 0 !important;
opacity: 0;
overflow: hidden;
margin: 0;
transform: translateX(-20px);
transition: all 0.3s ease;
}
/* Filter button hidden on mobile */
@media (max-width: 768px) {
.shop-filters-toggle {
display: none;
}
}
/* Filter button hidden on tablet */
@media (max-width: 1024px) {
.shop-filters-toggle {
display: none !important;
}
}
/* Main content expands automatically because flex:1 already exists */
.shop-content.filters-hidden {
transition: all 0.3s ease;
gap:0px !important;
}
/* filters */
.shop-filters { width:260px; background:#fff; padding:18px; border-radius:12px; box-shadow: var(--card-shadow); position:relative; }
.filter-block { margin-bottom:14px; }
.filter-block h4 { margin:0 0 8px; font-size:14px; color:#333; }
.filter-block select { width:100%; padding:10px; border-radius:8px; border:1px solid #e8e8e8; }
/* main grid */
.shop-main { flex:1; }
.product-grid { min-height:200px; }
/* Material-style product card */
/* === PRODUCT CARD BASE === */
ul.products li.product {
list-style: none;
margin: 0;
}
.product-card {
display: flex;
flex-direction: column;
background: #fff;
box-shadow: var(--card-shadow);
border-radius: 10px;
overflow: hidden;
transition: all 0.25s ease;
}
/* Make whole card clickable */
.product-card-link {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
height: 100%;
}
/* === IMAGE WRAPPER === */
.product-image-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; /* square */
overflow: visible;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.product-image-inner {
position: relative;
width: 92%;
height: 92%;
border-radius: 10px;
overflow: hidden;
background: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-image-inner img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Hover effect: only image moves */
.product-card:hover .product-image-inner {
transform: translateY(-8px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
/* === PRODUCT INFO SECTION === */
.product-info {
padding: 15px;
text-align: left;
margin-bottom:45px;
}
.product-info h2 {
font-size: 1.1rem;
}
.product-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-meta .price {
font-weight: 600;
font-size: 1rem;
}
.product-meta .add-to-cart a.button {
border: none;
background: none;
color: var(--primary-color, #444);
font-size: 18px;
padding: 0;
transition: transform 0.2s ease, color 0.2s ease;
}
.product-meta .add-to-cart a.button:hover {
color: var(--accent-color, #b87333); /* copper tone */
transform: scale(1.1);
}
/* Subtle hover lift on entire card */
.product-card:hover {
border-color: #ddd;
}
/* --- Shop search styling --- */
.shop-topbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
/* Input styling */
#ajax-global-search {
width: 100%;
padding: 12px 16px;
font-size: 1rem;
border: 1px solid var(--border-color, #ddd);
border-radius:999px;
box-shadow: var(--card-shadow, 0 2px 5px rgba(0,0,0,0.1));
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Add focus effect */
#ajax-global-search:focus {
border-color: var(--accent-color, #c46b37);
box-shadow: 0 0 0 3px rgba(196,107,55,0.2);
outline: none;
}
/* Filters button */
.shop-filters-toggle button {
padding: 12px 20px;
border: none;
border-radius: 8px;
background: var(--accent-color, #c46b37);
color: #fff;
cursor: pointer;
transition: background 0.3s ease;
/*display: none; temporarily hiding as need to work on filter system */
}
.shop-filters-toggle button:hover {
background: var(--accent-color-dark, #a5532e);
}
/* --- Responsive behavior --- */
@media (max-width: 768px) {
.shop-topbar {
flex-direction: column;
align-items: stretch;
}
.shop-search {
max-width: 100%;
}
}
/* π Refined Cart Page Styling - Phase 2 */
body.woocommerce-cart .page-header h1.page-title{display: none;}
body.woocommerce-cart .page-container .wp-block-woocommerce-cart{margin-top:0px;}
body.woocommerce-cart .wc-block-cart-item__prices{display: none;}
body.woocommerce-cart .wc-block-components-product-metadata{display: none;}
/* Add spacing below header */
.wp-block-woocommerce-cart{
margin-top: 40px;
}
/* Main cart container refinement */
.wc-block-cart {
background: var(--color-bg, #fff);
padding: 2.5rem !important;
margin: 3rem auto;
max-width: 1200px;
}
/* Image styling */
.wc-block-cart-item__image img {
border-radius: 12px;
width: 100px;
height: 100px;
object-fit: cover;
box-shadow: var(--card-shadow);
}
/* Product details */
.wc-block-cart-item__product {
font-size: 1.05rem;
font-weight: 500;
line-height: 1.4;
}
/* Hide duplicate big title */
body.woocommerce-cart h1.product_title {
display: none !important;
}
/* Price alignment */
.wc-block-cart-item__total {
font-weight: 600;
color: var(--color-primary, #222);
}
/* Quantity selector refinement */
.wc-block-cart-item__quantity .wc-block-components-quantity-selector__input {
border: 1px solid #ddd;
border-radius: 8px;
width: 60px;
text-align: center;
transition: all 0.2s ease;
}
.wc-block-cart-item__quantity .wc-block-components-quantity-selector__input:focus {
border-color: var(--color-accent, #b87333);
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.2);
outline: none;
}
/* Cart totals block */
.wp-block-woocommerce-cart-totals-block {
background: var(--color-surface, #fafafa);
border-radius: 20px;
box-shadow: var(--card-shadow);
padding: 2rem;
}
.wc-block-cart-totals-block h2 {
font-size: 1.25rem;
color: var(--color-primary, #333);
font-weight: 600;
margin-bottom: 1rem;
}
/* Checkout button */
.wc-block-cart__submit-container, .wc-block-components-button {
background: var(--color-accent, #b87333);
color: #fff;
border: none;
border-radius: 12px;
padding: 1rem 2rem;
font-weight: 600;
transition: background 0.3s ease, transform 0.2s ease;
}
.wc-block-cart__submit-container:hover, .wc-block-components-button:hover {
background: #a5622c !important;
transform: translateY(-2px);
}
/* Remove item link styling */
.wc-block-cart-item__remove-link {
color: #999;
font-size: 0.9rem;
text-decoration: underline;
transition: color 0.2s ease;
}
.wc-block-cart-item__remove-link:hover {
color: var(--color-accent, #b87333);
}
/* Responsive layout */
@media (max-width: 768px) {
.wc-block-cart-items-block .wc-block-cart-items__row {
flex-direction: column;
align-items: flex-start;
}
.wc-block-cart {
padding: 1.5rem;
}
}
/* β¨ Modern Checkout Page Styling β Coppersmith Theme */
/* === Checkout Page Refinement === */
body.woocommerce-checkout .page-wrapper .page-container{padding:0px;}
body.woocommerce-checkout .wp-block-woocommerce-checkout{max-width:1280px; margin:2.5rem auto; padding: 2.5rem; box-shadow: var(--card-shadow); border-radius: 12px;}
.wc-block-checkout__form > div {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
gap: 4rem; /* wider breathing space */
max-width: 1200px;
margin: 0 auto;
}
/* Left: form column */
.wc-block-checkout-fields-block {
flex: 1 1 65%;
min-width: 500px;
}
/* Right: order summary */
.wp-block-woocommerce-checkout-order-summary-block {
flex: 1 1 35%;
min-width: 360px;
background: #fff;
border-radius: 20px !important;
box-shadow: var(--card-shadow, 0 2px 12px rgba(0,0,0,0.06));
padding: 2rem 2rem;
position: sticky;
top: 120px; /* keeps visible while scrolling */
}
body.woocommerce-checkout .page-wrapper .page-container .page-header h1.page-title{display: none;}
/* Adjust overall page spacing */
.wc-block-checkout {
background: #fafafa;
padding-top: 30px;
padding-bottom: 60px;
}
/* Product titles inside summary */
.wc-block-checkout-order-summary-block .wc-block-components-product-name {
font-size: 0.95rem !important;
font-weight: 500;
line-height: 1.4;
color: #222;
margin-bottom: 4px;
text-transform: none;
}
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__individual-prices {display: none;}
body.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-metadata{display: none;}
/* Product image spacing */
.wc-block-checkout-order-summary-block .wc-block-components-order-summary-item__image {
border-radius: 8px;
overflow: hidden;
margin-right: 10px;
}
/* Totals and labels alignment */
.wc-block-checkout-totals-block .wc-block-components-totals-wrapper {
margin-top: 2rem;
}
/* Return to Cart + Place Order area */
.wc-block-checkout__actions {
display: flex;
justify-content: space-between;
margin-top: 2rem;
}
.wc-block-checkout__actions button,
.wc-block-checkout__actions a {
border-radius: 8px;
}
/* Responsive behavior */
@media (max-width: 960px) {
.wc-block-checkout__form > div {
flex-direction: column;
gap: 2rem;
padding: 2rem 1rem;
}
.wc-block-checkout-fields-block,
.wc-block-checkout-totals-block {
flex: 1 1 100%;
width: 100%;
min-width: auto;
}
.wc-block-checkout-totals-block {
position: static;
box-shadow: none;
}
}
#ajax-products.loading {
opacity: 0.5;
position: relative;
}
#ajax-products.loading::after {
content: "Loading productsβ¦";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 8px 16px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Start of Global styles for General Pages */
/* ==================================
General Page Styling (Gutenberg)
================================== */
.page-wrapper {
background-color: var(--light);
padding: var(--space-xl) var(--space-md);
}
.page-container {
width: min(1280px, 90%);
margin-inline: auto;
background: #fff;
box-shadow: var(--card-shadow);
border-radius: var(--radius);
padding:2rem;
margin: 2rem auto;
}
.page-title {
font-family: var(--font-heading);
font-size: 2.2rem;
text-align: center;
margin: 12px 0;
color: var(--dark);
}
.page-body p {
margin: 12px 0;
color: var(--text);
font-size: 1.05rem;
line-height: 1.75;
}
/* Gutenberg blockquote */
.wp-block-quote {
border-left: 4px solid var(--copper);
padding-left: var(--space-md);
margin: var(--space-lg) 0;
font-style: italic;
color: var(--dark);
background: #fdfaf8;
border-radius: 4px;
}
.wp-block-quote cite {
display: block;
margin-top: var(--space-sm);
font-size: 0.9rem;
color: var(--accent);
}
/* Gutenberg image blocks */
.wp-block-image {
margin: var(--space-lg) auto;
text-align: center;
}
.wp-block-image img {
border-radius: var(--radius);
box-shadow: var(--shadow);
max-width: 100%;
height: auto;
}
/* Gutenberg headings */
.page-body h2,
.page-body h3,
.page-body h4 {
font-family: var(--font-heading);
color: var(--dark);
margin-top: var(--space-lg);
margin-bottom: var(--space-sm);
}
/* Lists */
.page-body ul,
.page-body ol {
margin-left: var(--space-md);
margin-bottom: var(--space-md);
padding:20px;
}
.page-body li {
margin-bottom: 0.4rem;
}
/* Buttons added via Gutenberg */
.wp-block-button__link {
background: var(--copper);
color: #fff;
padding: 0.8rem 1.6rem;
border-radius: var(--radius);
font-weight: 600;
transition: 0.3s ease;
}
.wp-block-button__link:hover {
background: var(--accent);
}
/* End of Global styles for General Pages */
/*=========================================
/* Start Blog Post Single Post Styles */
/* Layout */
.single-post-page .post-entry {
background: var(--color-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-top: 2.5rem;
}
/* Featured image */
.single-post-page .post-thumbnail img {
width: 100%;
border-radius: var(--radius) var(--radius) 0 0;
object-fit: cover;
max-height: 500px;
}
/* Header */
.single-post-page .entry-header {
padding: 2rem;
text-align: center;
}
.single-post-page .entry-title {
font-family: var(--font-heading);
font-size: 2.4rem;
color: var(--color-heading);
margin-bottom: 0.6rem;
}
.single-post-page .entry-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.2rem;
color: var(--color-muted);
font-size: 0.95rem;
}
/* Content */
.single-post-page .entry-content {
padding: 2rem;
}
.single-post-page .entry-content p {
margin-bottom: 1.5rem;
font-size: 1.05rem;
}
.single-post-page .entry-content h2,
.single-post-page .entry-content h3,
.single-post-page .entry-content h4 {
font-family: var(--font-heading);
margin-top: 2rem;
margin-bottom: 0.8rem;
color: var(--color-heading);
}
.single-post-page .entry-content ul {
padding-left: 1.2rem;
margin-bottom: 1.5rem;
}
.single-post-page .entry-content li {
margin-bottom: 0.4rem;
}
.single-post-page blockquote,
.single-post-page .wp-block-quote {
margin: 2rem 0;
padding: 1.2rem 1.5rem;
border-left: 4px solid var(--color-accent);
background: #faf9f8;
color: var(--color-muted);
font-style: italic;
border-radius: var(--radius);
}
/* Footer / Tags */
.single-post-page .entry-footer {
border-top: 1px solid var(--color-border);
padding: 1.5rem 2rem;
}
.single-post-page .post-tags {
font-size: 0.95rem;
}
.single-post-page .post-tags a {
background: var(--color-light-bg);
border: 1px solid var(--color-border);
padding: 0.3rem 0.6rem;
border-radius: var(--radius);
margin-right: 0.4rem;
color: var(--color-accent-dark);
}
/* Navigation */
.post-navigation {
display: flex;
justify-content: space-between;
padding: 2rem 0;
border-top: 1px solid var(--color-border);
margin-top: 2rem;
}
.post-navigation a {
color: var(--color-accent);
font-weight: 500;
}
.post-navigation a:hover {
color: var(--color-accent-dark);
}
/* Comments */
.comments-area,
#respond {
margin-top: 3rem;
padding: 2rem;
border-top: 1px solid var(--color-border);
border-radius: var(--radius);
background: #fff;
}
.comment-form-comment textarea {
width: 100%;
padding: 0.8rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-family: var(--font-body);
}
.comment-form .submit {
background: var(--color-accent);
color: #fff;
border: none;
padding: 0.8rem 1.5rem;
border-radius: var(--radius);
cursor: pointer;
margin-top: 1rem;
}
.comment-form .submit:hover {
background: var(--color-accent-dark);
}
/* End Blog Post Single Post Styles */
/*=========================================
/*=========================================/
/* Start of index.php theme file Styles */
.container {
max-width: 1280px;
margin: 20px auto;
}
.archive-header {
margin-bottom: 2rem;
text-align: center;
display: none;
}
.post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
}
.post-item {
background: #fff;
border-radius: 10px;
box-shadow: var(--card-shadow);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-item:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.post-thumbnail img {
width: 100%;
height: auto;
display: block;
}
.post-content {
padding: 1rem 1.2rem;
}
.post-title {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.post-meta {
font-size: 0.85rem;
color: #777;
margin-bottom: 0.8rem;
}
.read-more {
color: var(--accent-color, #b87333);
text-decoration: none;
font-weight: 500;
}
/* End of index.php theme file Styles */
/*=========================================/
/* ==========================
Start SINGLE PRODUCT PAGE
========================== */
.single-product-page {
padding: 4rem 1rem;
}
.product-container {
max-width: 1280px;
margin: 0 auto;
}
.product-main-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.product-gallery {
position: relative;
}
/* ==========================
MODERN PRODUCT GALLERY β FIXED CARD STYLE
========================== */
/* Main gallery container */
.woocommerce-product-gallery {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
}
/* Main image wrapper as card */
.woocommerce-product-gallery__wrapper {
position: relative;
width: 100%;
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce-product-gallery__wrapper:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
/* Product Image */
.woocommerce-product-gallery__image {
border-radius: 14px;
overflow: hidden;
}
.woocommerce-product-gallery__image img {
width: 100%;
height: auto;
display: block;
border-radius: 14px;
object-fit: cover;
transition: transform 0.5s ease;
}
/* Preserve rounded corners on hover and zoom */
.woocommerce-product-gallery__image:hover img {
transform: scale(1.06);
border-radius: 14px;
}
/* Remove WooCommerce default zoom icon */
.woocommerce-product-gallery__trigger {
display: none !important;
}
/* Thumbnails row as cards */
.flex-control-thumbs {
display: flex !important;
gap: 0.9rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1rem;
padding: 0.5rem 0;
}
.flex-control-thumbs li {
list-style: none;
flex: 0 0 80px;
height: 80px;
border-radius: 10px;
overflow: hidden;
background: #fff;
box-shadow: var(--shadow);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.flex-control-thumbs li:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.flex-control-thumbs li img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
border: 2px solid transparent;
transition: all 0.3s ease;
}
/* Active/hover state */
.flex-control-thumbs li:hover img,
.flex-control-thumbs li.flex-active-slide img {
border-color: var(--accent-color, #b87333);
transform: scale(1.05);
}
/* Responsive tweaks */
@media (max-width: 768px) {
.flex-control-thumbs {
gap: 0.6rem;
}
.flex-control-thumbs li {
flex: 0 0 65px;
height: 65px;
}
}
.product-summary {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.product-title {
font-size: 2rem;
font-weight: 600;
color: #222;
margin-bottom: 0.5rem;
}
.price {
color: var(--accent-color, #b87333);
}
.woocommerce-product-details__short-description {
font-size: 1rem;
line-height: 1.6;
color: #444;
}
.product-meta {
font-size: 0.9rem;
color: #777;
}
/* =========================================
PRODUCT SUMMARY SECTION (RIGHT SIDE)
========================================= */
.product-summary {
background: #fff;
border-radius: 14px;
padding: 2rem 2.5rem;
box-shadow: var(--card-shadow);
display: flex;
flex-direction: column;
gap: 1.2rem;
}
/* --- Product Title --- */
.product-summary .product-title {
font-size: 1.8rem;
font-weight: 700;
color: #222;
margin-bottom: 0.5rem;
line-height: 1.3;
letter-spacing: 0.3px;
}
/* --- Price --- */
.product-summary .price {
font-size: 1.4rem;
font-weight: 600;
color: var(--accent-color, #b87333);
margin-bottom: 1rem;
}
/* --- Short Description --- */
.product-summary .woocommerce-product-details__short-description {
font-size: 1.02rem;
color: #555;
line-height: 1.7;
margin-bottom: 1rem;
border-top: 1px solid #eee;
padding-top: 1rem;
}
/* --- Bulleted List --- */
.product-summary .woocommerce-product-details__short-description ul {
list-style: none;
padding: 0;
margin-top: 1rem;
}
.product-summary .woocommerce-product-details__short-description ul li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.6rem;
color: #444;
}
.product-summary .woocommerce-product-details__short-description ul li::before {
content: "β";
position: absolute;
left: 0;
top: 0.1rem;
color: var(--accent-color, #b87333);
font-weight: bold;
}
/* --- Add to Cart --- */
.product-summary form.cart .single_add_to_cart_button {
background-color: var(--accent-color, #b87333);
color: #fff;
font-weight: 600;
font-size: 1rem;
padding: 0.9rem 1.8rem;
margin-top:1rem;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(184,115,51,0.25);
}
.product-summary form.cart .single_add_to_cart_button:hover {
background-color: #a45f27;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
/* --- Quantity Input --- */
.product-summary .quantity input {
width: 70px;
text-align: center;
border: 1px solid #ccc;
border-radius: 6px;
padding: 0.5rem;
margin-right: 0.6rem;
}
/* --- Meta Info --- */
.product-summary .product-meta,
.product-summary .product_meta {
font-size: 0.9rem;
color: #777;
}
.product-summary .product_meta a {
color: var(--accent-color, #b87333);
text-decoration: none;
}
.product-summary .product_meta a:hover {
text-decoration: underline;
}
/* --- Responsive --- */
@media (max-width: 992px) {
.product-summary {
padding: 1.5rem;
}
.product-summary .product-title {
font-size: 1.5rem;
}
}
/* =========================================
PRODUCT TABS STYLING
========================================= */
.product-tabs-wrapper {
margin: 4rem 0 4rem 0;
background: #fff;
border-radius: 14px;
box-shadow: var(--card-shadow);
padding: 2rem 2.5rem;
}
/* --- Tabs Navigation --- */
.woocommerce-tabs .tabs {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
list-style: none;
margin: 0 0 2rem 0;
padding: 0;
border-bottom: 2px solid #eee;
gap: 1rem;
}
.woocommerce-tabs .tabs li {
margin: 0;
}
.woocommerce-tabs .tabs a {
display: inline-block;
padding: 0.8rem 1.6rem;
border-radius: 8px 8px 0 0;
background: #f9f9f9;
color: #555;
font-weight: 500;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid transparent;
border-bottom: none;
}
.woocommerce-tabs .tabs a:hover {
background: #fff;
color: var(--accent-color, #b87333);
border-color: #ddd;
}
/* --- Active Tab --- */
.woocommerce-tabs .tabs .active a {
background: #fff;
color: var(--accent-color, #b87333);
font-weight: 600;
border: 1px solid #ddd;
border-bottom: 2px solid #fff;
box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
}
/* --- Tab Panels --- */
.woocommerce-Tabs-panel {
display: block;
background: #fff;
border-radius: 0 0 10px 10px;
padding: 1.5rem 1rem;
color: #444;
font-size: 1.05rem;
line-height: 1.7;
animation: fadeIn 0.3s ease;
}
.woocommerce-Tabs-panel h2 {
font-size: 1.4rem;
color: #222;
margin-bottom: 1rem;
border-left: 4px solid var(--accent-color, #b87333);
padding-left: 0.8rem;
}
/* --- Description Lists --- */
.woocommerce-Tabs-panel ul {
list-style: none;
padding: 0;
margin-top: 1rem;
}
.woocommerce-Tabs-panel ul li {
position: relative;
padding-left: 1.5rem;
margin-bottom: 0.6rem;
}
.woocommerce-Tabs-panel ul li::before {
content: "β’";
color: var(--accent-color, #b87333);
position: absolute;
left: 0;
font-size: 1.4rem;
line-height: 1rem;
}
/* --- Additional Info Table --- */
.woocommerce-product-attributes {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
padding: 0.8rem 1rem;
border-bottom: 1px solid #eee;
text-align: left;
}
.woocommerce-product-attributes th {
width: 30%;
color: #333;
font-weight: 600;
}
.woocommerce-product-attributes td {
color: #555;
}
/* --- Reviews Section --- */
#reviews {
padding: 1rem 0;
}
#reviews h2 {
font-size: 1.3rem;
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}
.woocommerce-noreviews {
color: #777;
}
.comment-form label {
font-weight: 500;
color: #444;
display: block;
margin-bottom: 0.4rem;
}
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
width: 100%;
padding: 0.8rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
}
.comment-form textarea:focus,
.comment-form input:focus {
border-color: var(--accent-color, #b87333);
outline: none;
}
.comment-form .submit {
background-color: var(--accent-color, #b87333);
color: #fff;
padding: 0.9rem 1.6rem;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
margin-top: 1rem;
transition: background 0.3s ease, transform 0.3s ease;
}
.comment-form .submit:hover {
background-color: #a45f27;
transform: translateY(-2px);
}
/* --- Animation --- */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Responsive --- */
@media (max-width: 768px) {
.woocommerce-tabs .tabs {
flex-direction: column;
}
.woocommerce-tabs .tabs a {
border-radius: 8px;
}
}
/* === Related Products Slider === */
.related-products-section {
margin-top: 4rem;
}
.related.products h2 {
text-align: center;
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 2rem;
color: #222;
}
/* Owl Carousel adjustments */
.related.products .owl-stage {
display: flex;
}
.related.products .owl-item {
display: flex;
justify-content: center;
}
/* Product Card */
.related.products li.product-card {
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: var(--card-shadow);
transition: all 0.3s ease;
width: 100%;
display: flex;
flex-direction: column;
}
.related.products li.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
/* Image */
.related.products .product-image-wrap img {
width: 100%;
height: auto;
border-radius: 14px 14px 0 0;
transition: transform 0.3s ease;
}
.related.products li.product-card:hover .product-image-wrap img {
transform: scale(1.05);
}
/* Info */
.related.products .product-info {
padding: 1rem;
text-align: center;
}
.related.products .woocommerce-loop-product__title {
font-size: 1rem;
font-weight: 500;
color: #333;
margin: 0.4rem 0;
line-height: 1.4;
}
.related.products .price {
font-weight: 600;
color: #000;
margin-bottom: 0.6rem;
}
/* Cart icon */
.related.products .add-to-cart a {
color: #555;
font-size: 1.1rem;
transition: color 0.3s;
}
.related.products .add-to-cart a:hover {
color: #b87333;
}
/* Nav Buttons */
.related.products .owl-nav button {
position: absolute;
top: 35%;
background: rgba(255,255,255,0.9);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
transition: background 0.3s;
font-size: 1.2rem;
cursor: pointer;
}
.related.products .owl-nav button:hover {
background: #f1f1f1;
}
.related.products .owl-nav .owl-prev {
left: -45px;
}
.related.products .owl-nav .owl-next {
right: -45px;
}
/* Fix narrow related product cards inside Owl Carousel */
.related-products-section .owl-carousel .product {
width: 100% !important;
margin: 0 auto;
}
/* Make sure the carousel items have room */
.related-products-section .owl-stage-outer {
padding: 10px 0 0 0;
}
/* Override WooCommerce default columns grid inside Owl */
.related-products-section ul.products.columns-4 {
display: block !important;
}
/* Override WooCommerce default product card margin */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
margin: 0 0 2.992em 0 !important
}
/* Ensure images and content align nicely */
.related-products-section .product-card,
.related-products-section .product {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border-radius: 16px;
background: #fff;
box-shadow: var(--shadow, 0 4px 10px rgba(0,0,0,0.1));
padding: 10px;
transition: all 0.3s ease;
}
.related-products-section .product:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.related-products-section .product img {
width: 100%;
height: auto;
border-radius: 10px;
margin-bottom: 15px;
}
/* --- Product card bottom section --- */
.related-products-section .product-meta {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: auto;
padding-top: 10px;
border-top: 1px solid #eee;
}
/* Price styling */
.related-products-section .price,
.related-products-section .woocommerce-Price-amount {
font-weight: 600;
color: var(--accent-color, #b87333);
font-size: 15px;
margin: 0;
}
/* Cart icon button */
.related-products-section .add-to-cart a.button {
background: #f6f6f6;
border-radius: 50%;
width: 34px;
height: 34px;
padding:7px;
display: flex;
align-items: center;
justify-content: center;
color: #444;
font-size: 16px;
transition: all 0.25s ease;
border: 1px solid #ddd;
margin-top:0px !important;
}
.related-products-section .add-to-cart a.button:hover {
background: var(--accent-color, #b87333);
color: #fff;
border-color: #b2935b;
transform: translateY(-2px);
}
/* Slight lift on hover for card */
.related-products-section .product:hover {
transform: translateY(-6px);
box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}
/* ==========================
End SINGLE PRODUCT PAGE
========================== */
/* =======================================
Start Front PAGE Category Product Slider
==================================== */
.frontpage-product-slider {
padding: 50px 0;
}
.copper-bathtubs{background: #FBFEFB;}
.copper-kitchen-sinks{background: #EFE5DC;}
.copper-basins{background: #FBFEFB;}
.frontpage-product-slider .section-title {
text-align: center;
font-size: 1.8rem;
margin-bottom: 30px;
font-weight: 600;
}
/* Make the carousel container smaller and centered */
.product-carousel-wrapper {
max-width: 1280px; /* adjust width as needed */
margin: 0 auto; /* centers the carousel */
padding: 0 15px; /* optional: some side padding */
}
/* Optional: make carousel items scale nicely */
.product-carousel .owl-item {
display: flex;
justify-content: center;
}
.product-carousel .owl-stage-outer{padding: 10px 0;}
/* === Owl Carousel Product Card Styling === */
.product-carousel .product-card {
background: #fff;
border-radius: 16px;
box-shadow: var(--card-shadow, 0 2px 10px rgba(0,0,0,0.08));
overflow: hidden;
text-align: center;
padding: 1.2rem;
transition: all 0.3s ease;
position: relative;
}
.product-carousel .product-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
/* Product Image */
.product-carousel .product-card img {
width: 100%;
height: auto;
border-radius: 12px;
object-fit: cover;
margin-bottom: 1rem;
transition: transform 0.3s ease;
}
.product-carousel .product-card:hover img {
transform: scale(1.05);
}
/* Product Title */
.product-carousel .product-title {
font-size: 1rem;
font-weight: 600;
color: #222;
line-height: 1.4;
margin: 0.6rem 0 0.8rem;
text-decoration: none;
}
.product-carousel .product-link:hover .product-title {
color: var(--primary-color, #b87333); /* use your copper accent */
}
/* === PRICE + CART ICON INLINE === */
.product-carousel .product-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
padding: 0 0.4rem;
}
/* Price */
.product-carousel .price {
font-weight: 600;
color: var(--text-dark, #333);
font-size: 1.1rem;
}
/* Cart Button */
.product-carousel .add_to_cart_button {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 50%;
width: 42px;
height: 42px;
font-size: 1.2rem;
text-decoration: none;
transition: all 0.3s ease;
flex-shrink: 0;
}
.product-carousel .add_to_cart_button:hover {
background: #eee;
transform: scale(1.1);
}
/* Adjust spacing inside carousel */
.product-carousel .owl-stage-outer {
padding: 10px 0;
}
/* Nav buttons */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
position: absolute;
top: 40%;
transform: translateY(-50%);
background: #fff;
border-radius: 50%;
width: 40px;
height: 40px;
box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.1));
transition: all 0.3s ease;
}
.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover {
background: var(--primary-color, #b87333);
color: #fff;
}
.owl-nav button.owl-prev {
left: -20px;
}
.owl-nav button.owl-next {
right: -20px;
}
.owl-nav button span {
font-size: 1.4rem;
line-height: 1;
}
/* =======================================
End Front PAGE Category Product Slider
==================================== */
/* ==================================================
/* Start Success Message Container styling of Quote*/
.quote-success-message {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 40px;
}
/* Card Styling */
.success-card {
max-width: 500px;
background: #ffffff;
padding: 40px;
border-radius: 18px;
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
animation: fadeInUp 0.4s ease-out;
}
/* Heading */
.success-card h3 {
font-size: 26px;
font-weight: 700;
color: #0d1b2a;
margin-bottom: 10px;
}
/* Subtext */
.success-card p {
font-size: 16px;
color: #4a4a4a;
margin-bottom: 25px;
}
/* Button inside success message */
.success-card .btn-dark {
width: 100%;
display: inline-block;
padding: 14px 20px;
border-radius: 10px;
}
/* Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Start Success Message Container styling of Quote*/
/* ==================================================
/* =======================================================================//
/*Start Product Detail Page Description Section YouTube Video Embedd Styling
/* Wrapper ensures full width in tab-description */
#tab-description .product-video-wrapper {
width: 100%;
margin: 25px 0;
}
/* Creates responsive 16:9 container */
.product-video-frame {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
border-radius: 16px; /* Modern rounded corners */
background: #000; /* Placeholder before video loads */
box-shadow: 0 8px 25px rgba(0,0,0,0.12);
border: 4px solid rgba(0,0,0,0.08);
}
/* Responsive iframe */
.product-video-frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 16px;
}
/* End Product Detail Page Description Section YouTube Video Embedd Styling */
/* ========================================================================/*/
/*/ ==================================================================//
// ======= Start Product Inquiry Modal Styles on Product Page ======/*/
.cart-inquiry-wrapper form.cart {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: nowrap;
}
.cart .quantity {
width: 90px;
flex: 0 0 90px;
}
.cart .quantity input.qty {
width: 100%;
padding: 10px;
text-align: center;
}
form.cart .single_add_to_cart_button {
flex: 1;
margin-top:0px !important;
}
.inquiry-button-wrap {
margin-top: 14px;
}
.inquiry-btn {
width: 100%;
padding: 14px 20px;
border: none;
border-radius: 4px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
background: #555;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background 0.25s ease;
}
.inquiry-btn:hover {
background: #444;
}
@media (max-width: 600px) {
.cart-inquiry-wrapper form.cart {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
form.cart .single_add_to_cart_button,
.cart .quantity {
width: 100%;
flex: unset;
}
.inquiry-button-wrap {
margin-top: 12px;
width: 100%;
}
}
/* Modal container */
.inquiry-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(3px);
}
/* Modal box */
.inquiry-modal-content {
background: #fff;
width: 90%;
max-width: 480px;
margin: 10% auto;
padding: 2rem;
border-radius: 12px;
box-shadow: var(--card-shadow);
animation: fadeIn 0.3s ease;
position: relative;
}
/* Close button */
.inquiry-close {
position: absolute;
right: 18px;
top: 12px;
font-size: 24px;
cursor: pointer;
}
/* Fields */
.inquiry-modal-content .field {
margin-bottom: 1.2rem;
}
.inquiry-modal-content input,
.inquiry-modal-content textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
}
.inquiry-submit {
width: 100%;
background: var(--accent-color, #b87333);
color: #fff;
border: none;
padding: 12px;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
}
.inquiry-submit:hover {
background: #a45f27;
}
/*/ ==================================================================//
// ======= End Product Inquiry Modal Styles on Product Page ======/*/
.woocommerce nav.woocommerce-pagination {
text-align: center;
margin-top: 20px;
}
/*/ =================================================================================//
// ======= start Pirates SMTP contact form on contact page styled in modern Coppersmith Creations 2025 style======/*/
/* Form container */
.pirate_forms_container {
max-width: 700px;
margin: 0 auto;
padding: 40px;
background: #ffffff;
border-radius: 18px;
/*box-shadow: 0 10px 25px rgba(0,0,0,0.08);*/
}
/* Remove bootstrap grid conflicts */
.pirate_forms_container .col-xs-12,
.pirate_forms_container .col-sm-6 {
padding: 0 !important;
margin-bottom: 20px;
}
/* Two-column layout (name + email) */
.pirate_forms_three_inputs_wrap {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.pirate_forms_three_inputs_wrap .contact_name_wrap,
.pirate_forms_three_inputs_wrap .contact_email_wrap {
flex: 1 1 calc(50% - 15px);
}
/* Single full-width fields */
.contact_subject_wrap,
.contact_message_wrap {
width: 100%;
}
/* Inputs & textareas */
.pirate_forms_container input.form-control,
.pirate_forms_container textarea.form-control {
width: 100%;
padding: 14px 18px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 12px;
background-color: #fafafa;
transition: all 0.2s ease-in-out;
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
/* Focus state */
.pirate_forms_container input.form-control:focus,
.pirate_forms_container textarea.form-control:focus {
outline: none;
border-color: #c27c48;
background: #fff;
box-shadow: 0 0 0 3px rgba(194, 124, 72, 0.15);
}
/* Textarea */
.pirate_forms_container textarea {
resize: vertical;
min-height: 150px;
}
/* Submit button */
.pirate_forms_container .pirate-forms-submit-button {
width: 100%;
padding: 14px;
font-size: 18px;
font-weight: 600;
background: #c27c48;
border: none !important;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(194, 124, 72, 0.3);
color: #fff;
cursor: pointer;
transition: 0.25s ease-in-out;
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
/* Button Hover */
.pirate_forms_container .pirate-forms-submit-button:hover {
background: #a76534;
box-shadow: 0 8px 18px rgba(194, 124, 72, 0.4);
transform: translateY(-2px);
}
/* Button active */
.pirate_forms_container .pirate-forms-submit-button:active {
transform: translateY(0);
}
/* Improve spacing around form container */
.page-body .pirate_forms_container {
margin-top: 30px;
}
/* Page title modern style */
.page-header .page-title {
text-align: center;
font-size: 36px;
font-weight: 700;
letter-spacing: -0.5px;
margin-bottom: 15px;
color: #333;
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
/* Contact page container width */
.page-container {
margin: 20px auto;
padding: 20px;
}
/*/ ======= start Pirates SMTP contact form on contact page styled in modern Coppersmith Creations 2025 style======/*/
/*/ =================================================================================/*/
/* ============================================================
Start MODERN VERTICAL VARIATION SELECTORS β Product Detail Page
============================================================ */
/* Remove WooCommerce table layout */
.variations {
border: none !important;
width: 100% !important;
margin: 0 0 0 0 !important;
}
.variations tbody,
.variations tr,
.variations td,
.variations th {
display: block !important;
width: 100% !important;
padding: 0 !important;
border: none !important;
margin: 0 !important;
}
/* Each variation field becomes a vertical stacked block */
.variations tr {
margin-bottom: 0.5rem !important;
}
/* Labels */
.variations label {
display: block !important;
font-size: 1rem;
font-weight: 600;
color: #333;
margin-bottom: 0.45rem;
letter-spacing: 0.2px;
text-align: left;
}
/* Select dropdown styling */
.variations select {
width: 100% !important;
padding: 12px 14px !important;
font-size: 1rem !important;
border: 1px solid #ddd !important;
border-radius: 10px !important;
background: #fff !important;
color: #333 !important;
outline: none !important;
transition: all 0.25s ease !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* Hover + focus */
.variations select:hover,
.variations select:focus {
border-color: var(--accent-color, #b87333) !important;
box-shadow: 0 4px 14px rgba(184,115,51,0.18);
}
/* Reset "clear" link */
.reset_variations {
display: inline-block;
margin-top: 4px;
color: var(--accent-color, #b87333);
font-size: 0.9rem;
font-weight: 500;
visibility: visible !important;
}
.reset_variations:hover {
text-decoration: underline;
}
/* Fix spacing above Add to Cart button */
.single_variation_wrap {
margin-top: 0;
}
/* Variation price alignment */
.woocommerce-variation-price {
margin-bottom: 0.75rem;
}
.woocommerce-variation-price .price {
font-size: 1.2rem;
font-weight: 600;
color: var(--accent-color, #b87333);
}
/* Variation description (if used) */
.woocommerce-variation-description {
font-size: 0.98rem;
color: #555;
margin-bottom: 1rem;
line-height: 1.6;
}
/* Mobile adjustments */
@media (max-width: 600px) {
.variations tr {
margin-bottom: 1.1rem !important;
}
.variations select {
padding: 11px 12px !important;
font-size: 0.98rem !important;
}
}
/* Force quantity + add to cart into a clean vertical stack */
.single-product form.cart {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 16px !important;
margin-top: 10px;
}
/* Style quantity input */
.single-product form.cart .quantity {
width: 100% !important;
display: flex;
}
.single-product form.cart .quantity input.qty {
width: 100% !important;
max-width: 100% !important;
padding: 14px 16px;
border: 1px solid #ddd;
border-radius: 12px;
font-size: 16px;
margin-bottom: 1rem;
}
/* Full-width, modern add to cart button */
.single-product form.cart .single_add_to_cart_button {
width: 100% !important;
padding: 16px;
border-radius: 14px;
font-size: 17px;
font-weight: 600;
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
background-color: var(--accent-color, #b87333) !important;
}
/* ============================================================
Start MODERN VERTICAL VARIATION SELECTORS β Product Detail Page
============================================================ */
/* ================= Start About Page β Clean Luxury Minimal ================= */
.about-page { padding: 1rem 0; color: #222; }
.about-hero { background: url('/wp-content/themes/CoppersmithCreations2025/assets/images/4-1.webp') center/cover no-repeat; border-radius: 16px; padding: 6rem 2rem; text-align: center; margin-bottom: 3rem; }
.about-hero h1 { font-size: 2.4rem; margin-bottom: .6rem; font-weight:700; color:white; }
.about-hero .lead { color: #fff; font-size: 1.05rem; margin-bottom: 1.25rem; }
.about-hero .btn { display: inline-block; padding: .85rem 1.25rem; border-radius: 10px; text-decoration: none; }
.about-hero .btn-outline { border: 1px solid rgba(255, 255, 255); background: transparent; color: #fff; }
.about-hero .btn:hover{background: white; color:#333;}
/* Who we are */
.grid.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin-bottom: 3rem; }
.who-we-are .image img { width: 100%; border-radius: 12px; box-shadow: var(--card-shadow); }
.who-we-are .copy h2 { font-size: 1.6rem; margin-bottom: .75rem; }
.who-we-are .copy p { color: #444; line-height: 1.7; }
/* USPs */
.usps { margin-bottom: 3rem; }
.usp-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.usp { background:#fff; border-radius:12px; padding:1.25rem; text-align:center; box-shadow: var(--card-shadow); }
.usp h3 { margin-top:.6rem; font-size:1.05rem; }
.usp p { color:#666; font-size:.95rem; }
/* Clients carousel card */
.clients-showcase { margin: 3rem 0; }
.clients-showcase h2{margin-bottom: 2rem;}
.clients-carousel .client-card { position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--card-shadow); }
.clients-carousel .client-card img { width: 100%; height: 320px; object-fit: cover; display:block; transition: transform .35s ease; }
.clients-carousel .client-card:hover img { transform: scale(1.03); }
.clients-carousel .client-overlay { position:absolute; left:0; right:0; bottom:0; padding: 12px 16px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%); color: #fff; }
.clients-carousel .client-name { font-weight:700; font-size:1rem; }
.clients-carousel .client-location { font-size:0.85rem; opacity:0.9; margin-top: 4px; }
/* Map */
.global-presence { text-align:center; margin: 3rem 0; }
.map-wrap img { width: 100%; max-width: 900px; margin: 0 auto; display:block; }
/* Trademarks accordion */
.trademarks { margin: 2.5rem 0; }
.trademarks h2{margin-bottom:2rem;}
.accordion .accordion-toggle { width:100%; text-align:left; padding:12px 14px; border-radius:8px; background:#fafafa; border:1px solid #eee; cursor:pointer; font-weight:600; }
.accordion .accordion-panel { display:none; padding:12px 14px; border-left:4px solid var(--accent-color, #b87333); margin-top:8px; background:#fff; }
.accordion .accordion-item + .accordion-item { margin-top: 0.75rem; }
/* CTA */
.about-cta { text-align:center; padding: 3rem 1rem; background:#fff; border-radius:12px; box-shadow:var(--card-shadow); margin-top:2rem; }
.about-cta h3 { font-size:2.35rem; margin-bottom: .9rem; }
.about-cta p{margin:0;}
.btn-primary { background:var(--accent-color,#fff); color:#333; padding: 10px 22px; font-weight:400; border-radius:32px; }
/* Responsive */
@media (max-width: 992px) {
.grid.two-col { grid-template-columns: 1fr; }
.usp-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px) {
.usp-grid { grid-template-columns: 1fr; }
.clients-carousel .client-card img { height: 220px; }
}
/* ================= About Page β Clean Luxury Minimal ================= */
/* ================= start Preloader Spinenr for Hero Image section ================= */
.square-image {
position: relative;
background: #eee; /* fallback color */
}
/* Skeleton loading effect */
.square-image.loading::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
#f0f0f0 0%,
#e2e2e2 50%,
#f0f0f0 100%
);
background-size: 200% 100%;
animation: skeleton-loading 1.2s infinite;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Hide the image until loaded */
.square-image img {
opacity: 0;
transition: opacity 0.4s ease;
}
/* ================= End Preloader Spinenr for Hero Image section ================= */
/*===== start custom BNPL (Buy Now Pay Later) comparison widget styling =====*/
.bnpl-wrapper {
border: 1px solid #e5e5e5;
border-radius: 16px;
padding: 22px;
background: #fafafa;
font-family: inherit;
}
.bnpl-heading {
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
color: #7a7a7a;
margin-bottom: 18px;
}
.bnpl-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 18px;
border-radius: 14px;
border: 1px solid #e5e5e5;
margin-bottom: 14px;
background: #fff;
transition: all 0.2s ease;
}
.bnpl-card.active {
border: 2px solid #111;
}
.bnpl-left {
display: flex;
align-items: center;
gap: 14px;
}
.bnpl-left input {
width: 18px;
height: 18px;
}
.bnpl-badge {
padding: 6px 12px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
}
.bnpl-badge.klarna {
background: #ffb3c7;
}
.bnpl-badge.clearpay {
background: #b6f0d2;
}
.bnpl-left img.bnpl-logo {
height: 30px;
border-radius: 5px;
}
.bnpl-text .bnpl-main {
font-size: 16px;
font-weight: 500;
}
.bnpl-text .bnpl-sub {
font-size: 13px;
color: #7a7a7a;
margin-top: 2px;
}
.bnpl-price {
text-align: right;
font-size: 12px;
font-weight: 300;
}
.bnpl-price span {
font-size: 13px;
color: #111;
font-weight: 600;
}
.bnpl-legal {
font-size: 12px;
color: #777;
margin-top: 10px;
line-height: 1.5;
}
/* ===== end custom BNPL (Buy Now Pay Later) comparison widget styling =====*/
/* start Product Detail Page Buttons Styling */
.custom-top-buttons {
display: flex;
gap: 12px;
margin-top: 14px;
flex-direction: row; /* IMPORTANT */
}
.custom-top-buttons .top-btn {
flex: 1;
text-align: center;
padding: 14px 10px;
font-weight: 400;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
border: none;
font-size: 14px;
white-space: nowrap; /* prevents wrapping */
}
/* Buy Now - Premium Copper */
.buy-now-btn {
background: #504136;
color: #fff;
}
.buy-now-btn:hover {
background: linear-gradient(135deg, #a55220, #8e431a);
transform: translateY(-1px);
}
/* Customization - Elegant Dark */
.custom-btn {
background: #2b2d42;
color: #fff;
}
.custom-btn:hover {
background: #296eb4;
transform: translateY(-1px);
}
/* WhatsApp - Muted Premium Green */
.whatsapp-btn {
background: #204e4a;
color: #fff;
}
.whatsapp-btn:hover {
background: #167a4c;
transform: translateY(-1px);
}
/* End Product Detail Page Buttons Styling */
/* move recaptcha badge sightly up from bottom so it does not hide behind twak to chat icon */
.grecaptcha-badge{
bottom: 94px !important;
}
/* turning off the visibility of distracting iubenda button */
.iubenda-tp-btn:not(.iubenda-floatable-tb-btn)[data-tp-icon=data-tp-icon]{
display: none !important;
}
/*removing box shadow from the container element on contact page */
.page-id-7387 .page-container{
box-shadow: none !important;
}
/*===============================
Start Hero Global root varaiables
===============================*/
:root{
--hero-overlay:rgba(0,0,0,.45);
--hero-tag-bg:rgba(255,255,255,.15);
--hero-tag-border:rgba(255,255,255,.30);
--color-white:#ffffff;
--hero-text:rgba(255,255,255,.92);
--copper:#b87333;
--light-bg:#f7f4ef;
}
/*===============================
End Hero Global root varaiables
===============================*/
/*=====================================================
CTA Statistics
=====================================================*/
.CTA .cta-stats {
padding: clamp(55px, 6vw, 90px) 24px;
background: #fff;
}
.CTA .cta-stats-container {
width: min(1600px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
}
.CTA .cta-stat {
position: relative;
padding: 0 clamp(20px, 3vw, 55px);
text-align: center;
}
.CTA .cta-stat:not(:last-child)::after {
content: "";
position: absolute;
top: 18%;
right: 0;
width: 1px;
height: 64%;
background: #ece3dc;
}
.CTA .cta-stat-value {
margin: 0 0 16px;
color: #986040;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(30px, 3vw, 65px);
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.035em;
}
.CTA .cta-stat-value sup {
position: relative;
top: -0.55em;
margin-left: 3px;
font-family: inherit;
font-size: 0.34em;
line-height: 1;
vertical-align: baseline;
}
.CTA .cta-stat-value-word {
font-size: clamp(30px, 3vw, 65px);
}
.CTA .cta-stat-label {
color: #57504a;
font-size: clamp(12px, 0.1vw, 16px);
font-weight: 300;
line-height: 1.4;
letter-spacing: 0.22em;
text-transform: uppercase;
}
/*=====================================================
CTA Statistics Responsive
=====================================================*/
@media (max-width: 980px) {
.CTA .cta-stats-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 50px;
}
.CTA .cta-stat:nth-child(2)::after {
display: none;
}
.CTA .cta-stat:nth-child(1),
.CTA .cta-stat:nth-child(2) {
padding-bottom: 35px;
border-bottom: 1px solid #ece3dc;
}
}
@media (max-width: 560px) {
.CTA .cta-stats {
padding: 45px 20px;
}
.CTA .cta-stats-container {
grid-template-columns: 1fr;
row-gap: 0;
}
.CTA .cta-stat {
padding: 30px 10px;
border-bottom: 1px solid #ece3dc;
}
.CTA .cta-stat::after {
display: none;
}
.CTA .cta-stat:last-child {
border-bottom: 0;
}
.CTA .cta-stat-value {
margin-bottom: 13px;
font-size: 58px;
}
.CTA .cta-stat-value-word {
font-size: 56px;
}
.CTA .cta-stat-label {
font-size: 12px;
letter-spacing: 0.18em;
}
}
/*================================================================
Start Styling of Product Infinite Scroll on Category Archive Pages
================================================================*/
.js-infinite-scroll .shop-pagination-fallback {
display: none;
}
.product-load-sentinel {
width: 100%;
height: 1px;
}
.product-load-status {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 80px;
padding: 20px;
color: #6f675f;
font-size: 14px;
}
.product-load-spinner {
width: 26px;
height: 26px;
border: 2px solid #e6ddd5;
border-top-color: #a96d3f;
border-radius: 50%;
animation: productLoadSpin 700ms linear infinite;
}
@keyframes productLoadSpin {
to {
transform: rotate(360deg);
}
}
.products-end-message {
margin: 10px 0 40px;
color: #746d66;
font-size: 14px;
text-align: center;
}
.shop-pagination-fallback {
margin: 40px 0;
}
/*================================================================
End Styling of Product Infinite Scroll on Category Archive Pages
================================================================*/
/*==========================================================
Shop Top Bar
==========================================================*/
.shop-topbar {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
margin-bottom: 28px;
}
/*==========================================================
Shop Search
==========================================================*/
.shop-search {
position: relative;
width: min(100%, 700px);
}
.shop-search input[type="search"] {
display: block;
width: 100%;
height: 48px;
padding: 0 18px;
font: inherit;
font-size: 15px;
line-height: 1;
color: #2d2d2d;
background: #fff;
border: 1px solid #d9d9d9;
border-radius: 12px;
outline: none;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.06);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.shop-search input[type="search"]::placeholder {
color: #777;
opacity: 1;
}
.shop-search input[type="search"]:hover {
border-color: #c7c7c7;
}
.shop-search input[type="search"]:focus {
border-color: #bd6f3b;
box-shadow:
0 0 0 3px rgba(189, 111, 59, 0.12),
0 2px 6px rgba(0, 0, 0, 0.06);
}
/*==========================================================
Filter Toggle
==========================================================*/
.shop-filters-toggle {
display: flex;
align-items: center;
justify-content: flex-end;
}
/*
* Filter icon created with CSS so no additional
* HTML or icon library is required.
*/
#toggle-filters {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 46px;
padding: 0 17px;
font: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1;
color: #333;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 10px;
cursor: pointer;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.06);
transition:
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
/* Filter/sliders icon */
#toggle-filters::before {
content: "\f1de";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 14px;
color: #bd6f3b;
transition:
color 0.2s ease,
transform 0.2s ease;
}
/* Hover */
#toggle-filters:hover {
color: #bd6f3b;
border-color: #bd6f3b;
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.09);
transform: translateY(-1px);
}
/* Keyboard accessibility */
#toggle-filters:focus-visible {
outline: none;
border-color: #bd6f3b;
box-shadow:
0 0 0 3px rgba(189, 111, 59, 0.15);
}
/*==========================================================
Filters Open State
==========================================================*/
#toggle-filters[aria-expanded="true"] {
color: #fff;
background: #bd6f3b;
border-color: #bd6f3b;
box-shadow:
0 3px 9px rgba(189, 111, 59, 0.22);
}
#toggle-filters[aria-expanded="true"]::before {
color: #fff;
}
/* Open-state hover */
#toggle-filters[aria-expanded="true"]:hover {
background: #a95f32;
border-color: #a95f32;
color: #fff;
}
/*==========================================================
Mobile
==========================================================*/
@media (max-width: 767px) {
.shop-topbar {
gap: 12px;
margin-bottom: 20px;
}
.shop-search {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
.shop-search input[type="search"] {
height: 44px;
font-size: 14px;
padding: 0 14px;
}
#toggle-filters {
flex: 0 0 auto;
min-height: 44px;
padding: 0 14px;
font-size: 13px;
}
}