/*
Theme Name: Storefront Child
Template: storefront
Version: 9.1.44
Description: TRIYAQ Fragrance — Shop + Category + Unified Card
*/
/* ============================================
CSS RESET & GLOBAL VARIABLES
============================================ */
:root {
--cream: #f2eadf;
--cream-soft: #faf4e9;
--cream-dark: #e6dcc8;
--ink: #1a1a1a;
--ink-soft: #2a2a2a;
--gold: #cea348;
--gold-bright: #b8902f;
--gold-warm: #d9b362;
--gold-soft: rgba(206, 163, 72, 0.15);
--muted: #8a8a8a;
--line: rgba(0, 0, 0, 0.08);
--serif: 'Cormorant Garamond', Georgia, serif;
--script: 'Dancing Script', cursive;
--sans: 'Jost', sans-serif;
--shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.06);
--shadow-md: 0 15px 40px rgba(0, 0, 0, 0.10);
--shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.14);
}
* {
box-sizing: border-box;
}
body {
font-family: var(--sans) !important;
background: var(--cream) !important;
color: var(--ink-soft);
font-weight: 300;
letter-spacing: 0.01em;
overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
font-family: var(--serif) !important;
color: var(--ink) !important;
font-weight: 500 !important;
}
a {
text-decoration: none !important;
}
/* ============================================
HOMEPAGE OVERRIDES
============================================ */
.home .entry-header,
.home .page-title,
.home h1.entry-title {
display: none !important;
}
.home .entry-content {
padding: 0 !important;
margin: 0 !important;
}
.home .hentry {
margin: 0 !important;
border: none !important;
}
.home #content {
padding: 0 !important;
}
.home .col-full {
max-width: 100% !important;
padding: 0 !important;
}
/* ============================================
FADE-IN ANIMATION
============================================ */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s ease, transform 1s ease;
}
.fade-in.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================
ANNOUNCEMENT BAR
============================================ */
.triyaq-announcement-bar {
background: var(--ink) !important;
color: #fff !important;
padding: 12px 20px;
font-size: 13px;
letter-spacing: 0.5px;
}
.announcement-inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
}
.announce-item {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
}
.announce-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: var(--gold);
}
.announce-icon svg {
width: 18px;
height: 18px;
}
.announce-sep {
color: rgba(255, 255, 255, 0.3);
font-weight: 300;
}
/* ============================================
HEADER
============================================ */
.site-header {
background: var(--cream) !important;
padding: 18px 0 !important;
border-bottom: 1px solid var(--line);
position: relative;
}
.site-header .col-full {
max-width: 1400px !important;
padding: 0 5% !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 30px;
}
.site-branding {
order: 2;
flex: 0 0 auto;
text-align: center;
margin: 0 auto !important;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: auto !important;
}
.site-branding img,
.custom-logo {
max-height: 60px !important;
width: auto !important;
position: relative !important;
top: 18px !important;
}
.site-branding .site-title,
.site-branding .site-description {
display: none !important;
}
.main-navigation {
order: 1 !important;
flex: 1 1 0;
width: auto !important;
margin: 0 !important;
text-align: left !important;
}
.main-navigation ul {
display: flex !important;
gap: 32px;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.main-navigation ul li {
margin: 0 !important;
list-style: none !important;
}
.main-navigation ul li::before {
display: none !important;
}
.main-navigation ul li a {
color: var(--ink) !important;
font-family: var(--sans) !important;
font-size: 13px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 400;
padding: 8px 0 !important;
position: relative;
transition: color 0.3s ease;
}
.main-navigation ul li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.main-navigation ul li.current-menu-item a::after,
.main-navigation ul li a:hover::after {
transform: scaleX(1);
}
.main-navigation ul li.current-menu-item a {
color: var(--gold-bright) !important;
}
.site-header-cart,
.secondary-navigation,
.storefront-handheld-footer-bar {
display: none !important;
}
.triyaq-header-actions {
order: 3;
display: flex;
align-items: center;
gap: 18px;
flex: 1 1 0;
justify-content: flex-end;
}
.header-action {
background: transparent;
border: none;
cursor: pointer;
color: var(--ink);
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
position: relative;
transition: color 0.3s ease;
}
.header-action svg {
width: 22px;
height: 22px;
}
.header-action:hover {
color: var(--gold-bright);
}
.cart-badge,
.wishlist-badge {
position: absolute;
top: -2px;
right: -6px;
background: var(--gold);
color: #fff;
border-radius: 50%;
font-size: 10px;
font-weight: 600;
min-width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 5px;
line-height: 1;
font-family: var(--sans);
}
.wishlist-badge {
opacity: 0;
transition: opacity 0.3s;
}
.wishlist-badge.has-items {
opacity: 1;
}
.menu-toggle {
background: transparent !important;
color: var(--ink) !important;
border: 1px solid var(--ink) !important;
border-radius: 0 !important;
}
/* ============================================
SEARCH OVERLAY
============================================ */
.triyaq-search-overlay {
position: fixed;
inset: 0;
background: rgba(26, 26, 26, 0.96);
backdrop-filter: blur(10px);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
.triyaq-search-overlay.is-open {
opacity: 1;
visibility: visible;
}
.search-close,
.wishlist-close {
position: absolute;
top: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.search-close:hover,
.wishlist-close:hover {
background: var(--gold);
transform: rotate(90deg);
}
.search-close svg,
.wishlist-close svg {
width: 22px;
height: 22px;
}
.search-inner {
max-width: 720px;
width: 100%;
text-align: center;
color: var(--cream);
animation: searchFadeUp 0.5s ease-out;
}
@keyframes searchFadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-eyebrow {
color: var(--gold);
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 18px;
display: block;
}
.search-inner h2 {
color: var(--cream) !important;
font-size: clamp(36px, 5vw, 56px) !important;
margin: 0 0 40px !important;
font-family: var(--serif) !important;
font-style: italic;
font-weight: 400 !important;
}
.search-form {
display: flex;
align-items: center;
border-bottom: 2px solid var(--gold);
padding-bottom: 8px;
margin-bottom: 35px;
}
.search-form input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 18px 0;
color: #fff;
font-family: var(--sans);
font-size: 18px;
letter-spacing: 0.5px;
}
.search-form input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.search-form button {
background: transparent;
border: none;
color: var(--gold);
cursor: pointer;
padding: 10px;
transition: transform 0.3s ease;
}
.search-form button:hover {
transform: scale(1.15);
}
.search-form button svg {
width: 24px;
height: 24px;
}
.search-suggestions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.sug-label {
color: rgba(255, 255, 255, 0.5);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
margin-right: 8px;
}
.search-suggestions a {
color: var(--cream) !important;
font-size: 13px;
padding: 8px 16px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 30px;
transition: all 0.3s ease;
letter-spacing: 1px;
text-transform: capitalize;
}
.search-suggestions a:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--ink) !important;
}
/* ============================================
WISHLIST OVERLAY
============================================ */
.triyaq-wishlist-overlay {
position: fixed;
inset: 0;
background: rgba(26, 26, 26, 0.92);
backdrop-filter: blur(10px);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
overflow-y: auto;
padding: 80px 20px 40px;
display: none;
}
.triyaq-wishlist-overlay.is-open {
opacity: 1;
visibility: visible;
display: block !important;
}
.wishlist-close {
position: fixed;
z-index: 2;
top: 30px;
right: 30px;
display: none;
}
.triyaq-wishlist-overlay.is-open .wishlist-close {
display: inline-flex !important;
position: fixed !important;
top: 30px !important;
right: 30px !important;
z-index: 100000 !important;
}
.triyaq-wishlist-overlay:not(.is-open) .wishlist-close {
display: none !important;
}
.wishlist-inner {
max-width: 1100px;
margin: 0 auto;
color: var(--cream);
opacity: 1 !important;
visibility: visible !important;
}
.wishlist-eyebrow {
color: var(--gold);
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 14px;
display: block;
text-align: center;
}
.wishlist-inner h2 {
color: var(--cream) !important;
font-size: clamp(34px, 4.5vw, 52px) !important;
margin: 0 0 50px !important;
font-family: var(--serif) !important;
font-style: italic;
font-weight: 400 !important;
text-align: center;
}
.wishlist-empty {
color: rgba(255, 255, 255, 0.6);
text-align: center;
font-size: 16px;
padding: 60px 20px;
line-height: 1.7;
}
/* ============================================
Wishlist Items — صورة + اسم + وصف
============================================ */
.wishlist-grid {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 700px;
margin: 0 auto;
}
.wl-item {
position: relative;
display: flex;
align-items: center;
gap: 18px;
padding: 16px 60px 16px 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
transition: all 0.3s ease;
min-height: 110px;
}
.wl-item:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(206,163,72,0.3);
}
.wl-img {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
border-radius: 10px;
overflow: hidden;
background: rgba(255,255,255,0.08);
padding: 6px;
}
.wl-img img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.wl-img-placeholder {
background: linear-gradient(135deg, rgba(206,163,72,0.25), rgba(206,163,72,0.05));
}
.wl-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.wl-info h4 {
margin: 0 !important;
font-size: 18px !important;
line-height: 1.3 !important;
font-weight: 500 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wl-info h4 a {
color: var(--cream) !important;
transition: color 0.3s ease;
}
.wl-info h4 a:hover {
color: var(--gold) !important;
}
.wl-desc {
color: rgba(255,255,255,0.6);
font-size: 13px;
line-height: 1.5;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* زر الحذف — X واضح */
.wl-remove {
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
width: 38px;
height: 38px;
padding: 0;
border-radius: 50%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
color: var(--cream);
font-family: inherit;
font-size: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.wl-remove::before {
content: '×';
font-size: 26px;
line-height: 1;
font-weight: 300;
color: inherit;
}
.wl-remove:hover {
background: #e74c3c;
border-color: #e74c3c;
color: #fff;
transform: translateY(-50%) rotate(90deg);
}
/* الموبايل */
@media (max-width: 600px) {
.wl-item {
padding: 12px 52px 12px 12px;
gap: 12px;
min-height: 90px;
}
.wl-img {
width: 70px;
height: 70px;
padding: 4px;
}
.wl-info h4 {
font-size: 15px !important;
}
.wl-desc {
font-size: 12px;
-webkit-line-clamp: 2;
}
.wl-remove {
width: 34px;
height: 34px;
right: 10px;
}
.wl-remove::before {
font-size: 22px;
}
}
/* ============================================
HERO SECTION
============================================ */
.triyaq-hero {
position: relative;
background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);
padding: 50px 5% 30px;
overflow: hidden;
}
.hero-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 40px;
align-items: center;
min-height: 520px;
position: relative;
}
.hero-content {
padding: 20px 0;
}
.hero-eyebrow {
display: inline-block;
color: var(--gold-bright);
font-size: 13px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 24px;
font-weight: 500;
}
.hero-title {
font-family: var(--serif) !important;
font-size: clamp(40px, 5.5vw, 72px) !important;
line-height: 1.1 !important;
margin: 0 0 28px !important;
color: var(--ink) !important;
font-weight: 400 !important;
}
.hero-title-1 {
display: block;
font-style: normal;
}
.hero-title-2 {
display: block;
font-family: var(--script) !important;
color: var(--gold-bright);
font-style: italic;
font-weight: 500 !important;
font-size: 0.95em;
margin-top: 5px;
}
.hero-subtitle {
font-size: 16px;
line-height: 1.7;
color: var(--muted);
max-width: 380px;
margin-bottom: 38px;
}
.hero-cta {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 18px 38px;
background: var(--ink);
color: #fff !important;
border-radius: 60px;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
transition: all 0.4s ease;
}
.hero-cta svg {
width: 16px;
height: 16px;
background: #fff;
color: var(--ink);
border-radius: 50%;
padding: 4px;
transition: transform 0.4s ease;
}
.hero-cta:hover {
background: var(--gold-bright);
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(184, 144, 47, 0.3);
}
.hero-cta:hover svg {
transform: translateX(4px);
}
.hero-stage {
position: relative;
height: 520px;
display: flex;
align-items: flex-end;
justify-content: center;
}
.stage-arch {
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 360px;
height: 450px;
border: 3px solid var(--gold);
border-radius: 180px 180px 0 0;
z-index: 1;
background: linear-gradient(180deg, transparent 0%, rgba(206, 163, 72, 0.06) 100%);
}
.stage-arch::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid var(--gold);
border-radius: 172px 172px 0 0;
opacity: 0.35;
}
.stage-podium {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 280px;
height: 75px;
background: linear-gradient(180deg, #ede1c8, #d8c598);
border-radius: 50%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.stage-podium::before {
content: '';
position: absolute;
inset: 8px;
border-radius: 50%;
background: linear-gradient(180deg, #f5edd6, #e5d6b3);
}
.pearl {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fff, #e8dfca 70%);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
z-index: 3;
}
.pearl-1 {
width: 18px;
height: 18px;
bottom: 50px;
left: 20%;
}
.pearl-2 {
width: 14px;
height: 14px;
bottom: 90px;
right: 15%;
}
.pearl-3 {
width: 10px;
height: 10px;
bottom: 30px;
right: 25%;
}
.pearl-4 {
width: 12px;
height: 12px;
bottom: 70px;
left: 12%;
}
.stage-bloom {
position: absolute;
bottom: 10px;
right: 5%;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(206, 163, 72, 0.4), transparent 60%);
filter: blur(15px);
z-index: 1;
}
.hero-slides {
position: relative;
width: 100%;
height: 100%;
z-index: 4;
}
.hero-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.9);
transition: opacity 0.8s ease, transform 0.8s ease;
pointer-events: none;
}
.hero-slide.is-active {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.hero-slide img {
max-height: 470px;
max-width: 90%;
object-fit: contain;
filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.25));
margin-bottom: 1px;
margin-left: 8px;
margin-top: 5px;
}
.slide-img-link {
display: block;
}
.hero-slide-empty .slide-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
color: var(--muted);
text-align: center;
}
.hero-slide-empty svg {
width: 80px;
height: 80px;
color: var(--gold);
opacity: 0.5;
}
.hero-dots {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 5;
}
.hero-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.15);
border: none;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.hero-dot.is-active {
background: var(--gold-bright);
width: 28px;
border-radius: 4px;
}
.hero-offers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 980px;
margin: 30px auto 0;
}
.offer-card {
display: flex;
align-items: center;
gap: 22px;
padding: 22px 30px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(8px);
border: 1px solid var(--line);
border-radius: 16px;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.offer-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(206, 163, 72, 0.1), transparent);
transform: translateX(-100%);
transition: transform 0.7s ease;
}
.offer-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.offer-card:hover::before {
transform: translateX(100%);
}
.offer-icon {
flex-shrink: 0;
width: 58px;
height: 58px;
border-radius: 50%;
background: linear-gradient(135deg, #ede1c6, var(--gold-warm));
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink);
}
.offer-icon svg {
width: 28px;
height: 28px;
}
.offer-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.offer-text strong {
font-family: var(--sans) !important;
font-size: 17px;
font-weight: 600;
color: var(--ink);
letter-spacing: 1px;
text-transform: uppercase;
}
.offer-text span {
font-size: 13px;
color: var(--muted);
letter-spacing: 0.5px;
text-transform: uppercase;
}
.gold-pop {
color: var(--gold-bright);
font-weight: 600;
}
/* ============================================
CATEGORIES (Home)
============================================ */
.triyaq-cats {
padding: 60px 5% 50px;
background: var(--cream);
}
.cats-header {
margin-bottom: 35px;
}
.cats-header h2 {
font-family: var(--serif) !important;
font-size: clamp(28px, 3.5vw, 40px) !important;
color: var(--ink) !important;
margin: 0 !important;
font-weight: 500 !important;
}
.cats-strip {
display: flex;
gap: 28px;
flex-wrap: wrap;
align-items: flex-start;
}
.cat-pill {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-decoration: none !important;
transition: transform 0.3s ease;
min-width: 80px;
}
.cat-pill:hover {
transform: translateY(-5px);
}
.cat-circle {
width: 75px;
height: 75px;
border-radius: 50%;
background: var(--cream-soft);
border: 1px solid var(--gold);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gold-bright);
transition: all 0.3s ease;
overflow: hidden;
}
.cat-pill:hover .cat-circle {
background: var(--gold);
color: #fff;
box-shadow: 0 10px 25px rgba(206, 163, 72, 0.35);
}
.cat-circle svg {
width: 32px;
height: 32px;
}
.cat-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cat-label {
font-family: var(--sans) !important;
font-size: 13px;
color: var(--ink);
letter-spacing: 1px;
font-weight: 500;
text-transform: capitalize;
}
/* ============================================
SIGNATURE FRAGRANCES (Home)
============================================ */
.triyaq-signature {
padding: 30px 5% 70px;
background: var(--cream);
overflow: hidden;
}
.sig-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 80px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
.sig-header h2 {
font-family: var(--serif) !important;
font-size: clamp(28px, 3.5vw, 40px) !important;
color: var(--ink) !important;
margin: 0 !important;
font-weight: 500 !important;
font-style: italic;
}
.sig-viewall {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ink) !important;
font-size: 12px;
letter-spacing: 2.5px;
font-weight: 500;
text-transform: uppercase;
transition: color 0.3s ease;
}
.sig-viewall svg {
width: 14px;
height: 14px;
transition: transform 0.3s ease;
}
.sig-viewall:hover {
color: var(--gold-bright) !important;
}
.sig-viewall:hover svg {
transform: translateX(4px);
}
.products-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 22px;
max-width: 1400px;
margin: 0 auto;
}
/* ============================================
UNIFIED LUXURY CARD (Home & Shop)
============================================ */
.luxury-card,
.woocommerce ul.products li.product.luxury-card,
.woocommerce-page ul.products li.product.luxury-card {
position: relative !important;
background: #fff !important;
border-radius: 18px !important;
padding: 0 18px 20px !important;
padding-top: 150px !important;
overflow: visible !important;
transition: 0.45s !important;
box-shadow: var(--shadow-sm) !important;
margin-top: 70px !important;
margin-bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
list-style: none !important;
width: auto !important;
text-align: left !important;
float: none !important;
}
.luxury-card:hover,
.woocommerce ul.products li.product.luxury-card:hover {
transform: translateY(-8px) !important;
box-shadow: var(--shadow-lg) !important;
}
/* Wishlist heart */
.card-wishlist {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--cream-soft);
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 25;
color: var(--ink);
transition: all 0.3s ease;
padding: 0;
overflow: hidden;
}
.card-wishlist svg {
width: 16px;
height: 16px;
}
.card-wishlist .heart-outline,
.card-wishlist .heart-filled {
position: absolute;
inset: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.card-wishlist .heart-filled {
opacity: 0;
color: #e74c3c;
transform: scale(0.5);
}
.card-wishlist:hover {
background: #fff;
color: var(--gold-bright);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.card-wishlist.is-active {
background: #fff;
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}
.card-wishlist.is-active .heart-outline {
opacity: 0;
transform: scale(0.5);
}
.card-wishlist.is-active .heart-filled {
opacity: 1;
transform: scale(1);
}
.card-wishlist.just-clicked {
animation: heartPop 0.4s ease-out;
}
@keyframes heartPop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
/* Sale badge */
.card-sale,
.woocommerce ul.products li.product.luxury-card .card-sale {
position: absolute !important;
top: 14px !important;
left: 14px !important;
right: auto !important;
margin: 0 !important;
background: var(--gold-bright) !important;
color: #fff !important;
padding: 5px 12px !important;
font-size: 9px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
z-index: 25 !important;
font-weight: 600 !important;
border-radius: 12px !important;
line-height: 1.4 !important;
min-height: 0 !important;
}
/* Product image */
.product-image,
.woocommerce ul.products li.product.luxury-card .product-image {
position: absolute !important;
top: -90px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 90% !important;
height: 230px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 20 !important;
margin: 0 !important;
}
.product-image img,
.woocommerce ul.products li.product.luxury-card .product-image img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
transition: 0.6s !important;
filter: drop-shadow(0 25px 30px rgba(0, 0, 0, 0.22)) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/*.luxury-card:hover .product-image img,*/
/*.woocommerce ul.products li.product.luxury-card:hover .product-image img {*/
/* transform: translateY(-8px) scale(1.05) !important;*/
/*}*/
/* Product content */
.product-content {
margin-top: 28px;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.product-content h3 {
margin: 0 0 4px !important;
text-align: left;
word-wrap: break-word;
}
.product-content h3 a,
.luxury-card .product-content h3 a {
text-decoration: none !important;
border-bottom: none !important;
color: var(--ink) !important;
font-family: var(--serif) !important;
font-size: 22px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
transition: color 0.3s ease !important;
}
.product-content h3 a:hover {
color: var(--gold-bright) !important;
}
.product-collection {
display: block;
color: var(--muted);
font-size: 12px;
margin-bottom: 18px;
letter-spacing: 0.5px;
font-family: var(--sans);
}
.luxury-card .product-category,
.luxury-card .posted_in,
.luxury-card .product_meta,
.luxury-card p.product-category {
display: none !important;
}
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
min-width: 0;
}
.price,
.luxury-card .price {
font-family: var(--sans) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--gold-bright) !important;
line-height: 1.2 !important;
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
min-width: 0 !important;
margin: 0 !important;
}
.price .woocommerce-Price-currencySymbol {
font-size: 11px;
font-weight: 500;
margin-right: 2px;
opacity: 0.9;
}
.price ins {
text-decoration: none;
background: transparent;
font-weight: 600;
color: var(--gold-bright);
}
.price del {
font-size: 11px !important;
opacity: 0.45;
font-weight: 400 !important;
color: var(--muted) !important;
text-decoration: line-through;
}
.add-cart-btn {
flex-shrink: 0;
}
.add-cart-btn .triyaq-add-btn {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--gold-bright) !important;
color: #fff !important;
padding: 0 !important;
text-decoration: none !important;
transition: all 0.4s ease !important;
border: none !important;
box-shadow: 0 6px 15px rgba(184, 144, 47, 0.35) !important;
position: relative;
overflow: hidden;
}
.add-cart-btn .triyaq-add-btn .btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
line-height: 0;
}
.add-cart-btn .triyaq-add-btn svg {
width: 16px;
height: 16px;
color: #fff;
}
.add-cart-btn .triyaq-add-btn:hover {
background: var(--ink) !important;
transform: rotate(90deg);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}
.add-cart-btn .added_to_cart {
display: none !important;
}
.products .button {
margin: 0 !important;
}
.no-products {
grid-column: 1 / -1;
text-align: center;
color: var(--muted);
padding: 40px;
}
/* ============================================
TRUST BADGES (Home)
============================================ */
.triyaq-trust {
background: var(--cream-dark);
padding: 40px 5%;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
max-width: 1400px;
margin: 0 auto;
}
.trust-item {
display: flex;
align-items: center;
gap: 18px;
padding: 10px 0;
}
.trust-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(206, 163, 72, 0.15);
color: var(--gold-bright);
display: inline-flex;
align-items: center;
justify-content: center;
}
.trust-icon svg {
width: 26px;
height: 26px;
}
.trust-text {
display: flex;
flex-direction: column;
gap: 3px;
}
.trust-text strong {
font-family: var(--sans) !important;
font-size: 14px;
font-weight: 600;
color: var(--ink);
letter-spacing: 1.2px;
text-transform: uppercase;
}
.trust-text span {
font-size: 12px;
color: var(--muted);
letter-spacing: 0.3px;
}
/* ============================================
STORY + NEWSLETTER
============================================ */
.triyaq-story {
padding: 120px 5%;
background: linear-gradient(135deg, #1a1a1a 0%, #2a2520 100%);
color: var(--cream);
text-align: center;
position: relative;
overflow: hidden;
}
.triyaq-story::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(206, 163, 72, 0.12), transparent 50%);
animation: rotateGlow 25s linear infinite;
}
@keyframes rotateGlow {
to {
transform: rotate(360deg);
}
}
.story-inner {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.section-eyebrow {
display: block;
color: var(--gold);
letter-spacing: 4px;
font-size: 12px;
text-transform: uppercase;
margin-bottom: 22px;
}
.triyaq-story h2 {
color: var(--cream) !important;
font-size: clamp(36px, 5vw, 60px) !important;
margin: 0 0 30px !important;
line-height: 1.1 !important;
}
.triyaq-story h2 em {
color: var(--gold);
font-style: italic;
}
.triyaq-story p {
color: rgba(242, 234, 223, 0.8);
font-size: 17px;
line-height: 1.9;
margin-bottom: 35px;
}
.link-arrow {
display: inline-block;
color: var(--ink) !important;
text-decoration: none !important;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
padding-bottom: 5px;
border-bottom: 1px solid var(--gold-bright);
transition: all 0.3s ease;
}
.link-arrow:hover {
color: var(--gold-bright) !important;
letter-spacing: 4px;
}
.link-arrow-gold {
color: var(--gold) !important;
border-color: var(--gold);
}
.link-arrow-gold:hover {
color: var(--cream) !important;
border-color: var(--cream);
}
.triyaq-newsletter {
padding: 100px 5%;
background: var(--cream-dark);
text-align: center;
}
.newsletter-inner {
max-width: 600px;
margin: 0 auto;
}
.triyaq-newsletter h2 {
font-size: clamp(34px, 4.5vw, 52px) !important;
margin: 0 0 20px !important;
line-height: 1.1 !important;
}
.triyaq-newsletter p {
color: var(--muted);
margin-bottom: 40px;
font-size: 15px;
line-height: 1.7;
}
.newsletter-form {
display: flex;
border-bottom: 1px solid var(--ink);
position: relative;
}
.newsletter-form input {
flex: 1;
padding: 18px 0;
border: none;
background: transparent;
outline: none;
font-family: var(--sans);
font-size: 15px;
color: var(--ink);
min-width: 0;
}
.newsletter-form input::placeholder {
color: var(--muted);
}
.newsletter-form button {
padding: 18px 25px;
background: transparent;
color: var(--ink);
border: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 12px;
cursor: pointer;
font-family: var(--sans);
transition: color 0.3s ease;
}
.newsletter-form button:hover {
color: var(--gold-bright);
}
.newsletter-form .success {
position: absolute;
bottom: -30px;
left: 0;
right: 0;
color: var(--gold-bright);
font-size: 12px;
letter-spacing: 2px;
opacity: 0;
transition: opacity 0.4s ease;
}
.newsletter-form .success.show {
opacity: 1;
}
/* ============================================
SHOP / CATEGORY PAGE
============================================ */
.woocommerce-page.archive #content,
.woocommerce-page.archive .col-full {
max-width: 100% !important;
padding: 0 !important;
}
.triyaq-shop-wrapper {
background: var(--cream);
padding-bottom: 80px;
}
/* Shop Hero */
.triyaq-shop-hero {
background: linear-gradient(180deg, var(--cream-dark) 0%, var(--cream) 100%);
padding: 50px 5% 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.triyaq-shop-hero::before {
content: '';
position: absolute;
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(206, 163, 72, 0.1), transparent 70%);
pointer-events: none;
}
.shop-hero-inner {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.shop-breadcrumbs {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 24px;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
}
.shop-breadcrumbs a {
color: var(--muted) !important;
transition: color 0.3s ease;
}
.shop-breadcrumbs a:hover {
color: var(--gold-bright) !important;
}
.shop-breadcrumbs strong {
color: var(--ink);
font-weight: 500;
}
.shop-breadcrumbs span {
opacity: 0.5;
}
.shop-hero-eyebrow {
display: inline-block;
color: var(--gold-bright);
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 14px;
}
.shop-hero-title {
font-family: var(--serif) !important;
font-size: clamp(40px, 5.5vw, 72px) !important;
margin: 0 0 18px !important;
color: var(--ink) !important;
font-weight: 400 !important;
line-height: 1.1 !important;
font-style: italic;
}
.shop-hero-subtitle {
color: var(--muted);
font-size: 16px;
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
/* Shop Toolbar */
.triyaq-shop-toolbar {
max-width: 1400px;
margin: 0 auto 40px;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
position: relative;
}
.shop-filter-pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.filter-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 30px;
border: 1px solid var(--line);
background: #fff;
color: var(--ink) !important;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
transition: all 0.3s ease;
text-decoration: none !important;
}
.filter-pill .pill-count {
background: var(--cream-dark);
color: var(--muted);
padding: 2px 8px;
border-radius: 30px;
font-size: 11px;
line-height: 1;
font-weight: 500;
transition: all 0.3s ease;
}
.filter-pill:hover {
border-color: var(--gold-bright);
color: var(--gold-bright) !important;
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.filter-pill.is-active {
background: var(--ink);
color: #fff !important;
border-color: var(--ink);
}
.filter-pill.is-active .pill-count {
background: var(--gold);
color: #fff;
}
.shop-toolbar-right {
display: flex;
align-items: center;
gap: 18px;
}
.shop-result-count {
color: var(--muted);
font-size: 13px;
letter-spacing: 1px;
white-space: nowrap;
}
.shop-sort-form {
margin: 0;
}
.shop-sort-select {
appearance: none;
-webkit-appearance: none;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center;
border: 1px solid var(--line);
padding: 10px 38px 10px 18px;
border-radius: 30px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
cursor: pointer;
letter-spacing: 0.5px;
transition: border 0.3s ease;
}
.shop-sort-select:hover,
.shop-sort-select:focus {
border-color: var(--gold-bright);
outline: none;
}
/* WooCommerce shop products grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 22px !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 70px 5% 0 !important;
list-style: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
display: none !important;
}
.woocommerce ul.products li.first,
.woocommerce ul.products li.last {
clear: none !important;
}
/* WC Pagination */
.woocommerce nav.woocommerce-pagination {
margin: 60px auto 0 !important;
max-width: 1400px;
padding: 0 5%;
text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
display: inline-flex !important;
gap: 8px;
border: none !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li {
border: none !important;
margin: 0 !important;
list-style: none !important;
}
.woocommerce nav.woocommerce-pagination ul li::before {
display: none !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
background: #fff !important;
color: var(--ink) !important;
border: 1px solid var(--line) !important;
border-radius: 50% !important;
padding: 0 !important;
width: 42px;
height: 42px;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-family: var(--sans) !important;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--gold-bright) !important;
color: #fff !important;
border-color: var(--gold-bright) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--ink) !important;
color: #fff !important;
border-color: var(--ink) !important;
}
/* WC notices on shop */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
border-top-color: var(--gold-bright) !important;
background: #fff !important;
border-radius: 10px;
margin: 0 5% 30px !important;
max-width: 1400px;
margin-left: auto !important;
margin-right: auto !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
color: var(--gold-bright) !important;
}
.woocommerce-message .button,
.woocommerce-info .button {
background: var(--ink) !important;
color: #fff !important;
border-radius: 30px !important;
padding: 10px 22px !important;
font-size: 12px !important;
letter-spacing: 2px;
text-transform: uppercase;
}
/* Hide WC default sidebar */
#secondary,
.widget-area,
.sidebar {
display: none !important;
}
.woocommerce-page #primary {
width: 100% !important;
float: none !important;
}
/* No products found message */
.woocommerce-no-products-found {
text-align: center;
padding: 100px 20px;
max-width: 1400px;
margin: 0 auto;
}
.woocommerce-no-products-found p {
color: var(--muted);
font-size: 16px;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1100px) {
.products-grid {
grid-template-columns: repeat(3, 1fr);
}
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: repeat(3, 1fr) !important;
}
.trust-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
}
@media (max-width: 900px) {
.site-header .col-full {
flex-wrap: wrap;
justify-content: center;
}
.site-branding {
position: static;
transform: none;
}
.main-navigation {
display: none;
}
.triyaq-hero {
padding: 30px 16px 20px;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 30px;
text-align: center;
}
.hero-content {
padding: 0;
}
.hero-subtitle {
margin: 0 auto 30px;
}
.hero-stage {
height: 420px;
}
.stage-arch {
width: 270px;
height: 340px;
border-radius: 135px 135px 0 0;
}
.stage-podium {
width: 210px;
}
.hero-offers {
grid-template-columns: 1fr;
gap: 12px;
}
.offer-card {
padding: 16px 20px;
gap: 14px;
}
.offer-icon {
width: 48px;
height: 48px;
}
.offer-icon svg {
width: 24px;
height: 24px;
}
.offer-text strong {
font-size: 15px;
}
.offer-text span {
font-size: 12px;
}
.triyaq-cats {
padding: 40px 0px 30px;
}
.cats-strip {
gap: 16px;
justify-content: center;
}
.cat-circle {
width: 65px;
height: 65px;
}
.cat-pill {
min-width: 70px;
}
.sig-header {
flex-direction: column;
gap: 14px;
text-align: center;
margin-bottom: 60px;
}
.triyaq-trust {
padding: 30px 16px;
}
.trust-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.newsletter-form {
flex-direction: column;
border-bottom: none;
}
.newsletter-form input {
border-bottom: 1px solid var(--ink);
padding: 15px 0;
}
.newsletter-form button {
margin-top: 20px;
border: 1px solid var(--ink);
padding: 16px;
}
.search-close,
.wishlist-close {
top: 16px;
right: 16px;
width: 42px;
height: 42px;
}
/* Shop */
.triyaq-shop-hero {
padding: 30px 16px 40px;
}
.triyaq-shop-toolbar {
flex-direction: column;
align-items: stretch;
gap: 18px;
padding: 0 16px;
}
.shop-filter-pills {
gap: 8px;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
}
.shop-filter-pills::-webkit-scrollbar {
display: none;
}
.filter-pill {
flex-shrink: 0;
padding: 9px 16px;
font-size: 12px;
}
.shop-toolbar-right {
justify-content: space-between;
gap: 12px;
}
.woocommerce ul.products,
.woocommerce-page ul.products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
padding: 60px 12px 0 !important;
}
/* Header mobile */
body .site-header {
position: relative !important;
padding: 0 !important;
}
body .site-header > .col-full {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
grid-template-areas: "left center right" !important;
align-items: center !important;
gap: 8px !important;
padding: 12px 12px !important;
max-width: 100% !important;
width: 100% !important;
min-height: 60px;
position: relative;
}
body .site-header > .col-full > .triyaq-header-left-actions {
grid-area: left !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
float: none !important;
}
body .site-header > .col-full > .site-branding {
grid-area: center !important;
position: static !important;
left: auto !important;
transform: none !important;
margin: 0 !important;
justify-self: center !important;
padding: 0 !important;
width: auto !important;
max-width: 100% !important;
text-align: center !important;
float: none !important;
justify-self: center !important;
}
body .site-branding img,
body .custom-logo {
max-height: 55px !important;
width: auto !important;
max-width: 100% !important;
position: static !important;
top: 0 !important;
margin: 0 auto !important;
display: inline-block !important;
}
body .site-header > .col-full > .secondary-navigation,
body .site-header > .col-full > nav.secondary-navigation {
display: none !important;
}
body .site-header .storefront-primary-navigation {
display: none !important;
}
body .site-header > .col-full > .triyaq-header-actions {
grid-area: right !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 4px !important;
position: static !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
float: none !important;
flex-wrap: nowrap !important;
justify-self: end !important;
}
body .triyaq-header-actions .header-action {
flex-shrink: 0 !important;
width: 36px !important;
height: 36px !important;
}
body .triyaq-header-actions .header-action svg {
width: 21px !important;
height: 21px !important;
}
body .triyaq-header-actions .header-search-btn {
display: none !important;
}
body .header-menu-btn svg {
width: 22px !important;
height: 22px !important;
}
.cart-badge,
.wishlist-badge {
top: -3px !important;
right: -4px !important;
min-width: 16px !important;
height: 16px !important;
font-size: 9px !important;
}
/* Prevent horizontal overflow */
html,
body {
overflow-x: hidden !important;
max-width: 100vw !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.site-header,
.site-header .col-full,
#page,
#content,
.triyaq-announcement-bar {
max-width: 100vw !important;
width: 100% !important;
box-sizing: border-box !important;
}
body .site-header > .col-full {
max-width: 100vw !important;
width: 100vw !important;
margin: 0 !important;
box-sizing: border-box !important;
padding-right: 14px !important;
padding-left: 10px !important;
}
body .triyaq-header-actions {
margin-right: 0 !important;
padding-right: 0 !important;
}
body .triyaq-header-actions .header-cart {
margin-right: 0 !important;
}
/* Shop toolbar mobile fixes */
.triyaq-shop-toolbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
overflow: visible !important;
}
.triyaq-shop-toolbar .shop-filter-pills {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
gap: 8px !important;
padding: 4px 16px 12px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100vw !important;
scroll-snap-type: x proximity !important;
scroll-padding: 16px !important;
}
.triyaq-shop-toolbar .shop-filter-pills::-webkit-scrollbar {
display: none !important;
height: 0 !important;
width: 0 !important;
}
.triyaq-shop-toolbar .filter-pill {
flex-shrink: 0 !important;
flex-grow: 0 !important;
white-space: nowrap !important;
padding: 9px 16px !important;
font-size: 12px !important;
scroll-snap-align: start !important;
gap: 6px !important;
}
.triyaq-shop-toolbar .filter-pill .pill-count {
flex-shrink: 0 !important;
font-size: 10px !important;
padding: 2px 7px !important;
}
.triyaq-shop-toolbar .shop-toolbar-right {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
padding: 0 16px !important;
width: 100% !important;
}
.triyaq-shop-toolbar .shop-result-count {
font-size: 12px !important;
flex-shrink: 0 !important;
}
.triyaq-shop-toolbar .shop-sort-select {
font-size: 12px !important;
padding: 8px 32px 8px 14px !important;
}
.triyaq-shop-toolbar::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 50px;
background: linear-gradient(to right, transparent, var(--cream) 80%);
pointer-events: none;
z-index: 2;
}
}
@media (max-width: 768px) {
.triyaq-signature {
padding: 20px 12px 50px;
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
padding-top: 30px;
}
.luxury-card,
.woocommerce ul.products li.product.luxury-card {
padding: 0 12px 14px !important;
padding-top: 110px !important;
border-radius: 14px !important;
margin-top: 60px !important;
}
.product-image,
.woocommerce ul.products li.product.luxury-card .product-image {
height: 170px !important;
top: -70px !important;
width: 95% !important;
}
.product-content {
margin-top: 18px;
}
.product-content h3 a,
.luxury-card .product-content h3 a {
font-size: 17px !important;
}
.product-collection {
font-size: 11px;
margin-bottom: 12px;
}
.product-footer {
gap: 6px;
flex-wrap: nowrap;
}
.price,
.luxury-card .price {
font-size: 13px !important;
}
.price .woocommerce-Price-currencySymbol {
font-size: 10px;
}
.price del {
font-size: 10px !important;
}
.card-wishlist {
width: 30px;
height: 30px;
top: 10px;
right: 10px;
}
.card-wishlist svg {
width: 14px;
height: 14px;
}
.card-sale,
.woocommerce ul.products li.product.luxury-card .card-sale {
font-size: 8px !important;
padding: 4px 9px !important;
top: 10px !important;
left: 10px !important;
}
.add-cart-btn .triyaq-add-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
}
.add-cart-btn .triyaq-add-btn svg {
width: 14px;
height: 14px;
}
.triyaq-header-actions {
gap: 10px;
}
.header-action {
width: 34px;
height: 34px;
}
.header-action svg {
width: 20px;
height: 20px;
}
}
@media (max-width: 480px) {
.triyaq-announcement-bar {
padding: 10px 12px;
font-size: 11px;
}
.announcement-inner {
gap: 12px;
}
.announce-sep {
display: none;
}
.hero-title {
font-size: 36px !important;
}
.hero-stage {
height: 320px;
}
.stage-arch {
width: 200px;
height: 260px;
}
.stage-podium {
width: 170px;
height: 55px;
}
.hero-slide img {
max-height: 290px;
}
.products-grid {
gap: 10px;
}
.woocommerce ul.products,
.woocommerce-page ul.products {
gap: 10px !important;
padding: 50px 10px 0 !important;
}
.luxury-card,
.woocommerce ul.products li.product.luxury-card {
padding: 0 10px 12px !important;
padding-top: 95px !important;
margin-top: 55px !important;
}
.product-image,
.woocommerce ul.products li.product.luxury-card .product-image {
height: 150px !important;
top: -60px !important;
}
.product-content h3 a,
.luxury-card .product-content h3 a {
font-size: 15px !important;
}
body .site-header > .col-full {
padding: 10px 8px !important;
gap: 2px !important;
grid-template-columns: auto 1fr auto !important;
}
body .triyaq-header-left-actions {
gap: 2px !important;
}
body .site-branding img,
body .custom-logo {
max-height: 47px !important;
}
body .triyaq-header-actions {
gap: 4px !important;
}
body .triyaq-header-actions .header-action {
width: 32px !important;
height: 32px !important;
}
body .triyaq-header-actions .header-action svg {
width: 19px !important;
height: 19px !important;
}
.triyaq-shop-toolbar .shop-filter-pills {
padding: 4px 12px 10px !important;
gap: 6px !important;
}
.triyaq-shop-toolbar .filter-pill {
padding: 8px 14px !important;
font-size: 11px !important;
}
.triyaq-shop-toolbar .shop-toolbar-right {
padding: 0 12px !important;
}
}
/* ============================================
FINAL KILL — Default WC sale + sort
============================================ */
/* Hide default sale flash everywhere */
.woocommerce span.onsale,
.woocommerce-page span.onsale,
.luxury-card span.onsale,
.woocommerce ul.products li.product span.onsale,
.woocommerce ul.products li.product.luxury-card span.onsale,
.woocommerce div.product span.onsale,
body span.onsale {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
pointer-events: none !important;
}
/* Hide default sorting/result count UI fully */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count,
.woocommerce form.woocommerce-ordering,
.woocommerce-page form.woocommerce-ordering,
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
display: none !important;
}
/* Re-enable custom sort/count inside our toolbar */
.triyaq-shop-toolbar .shop-result-count {
display: inline-block !important;
}
.triyaq-shop-toolbar .shop-sort-form {
display: block !important;
}
/* Force hide WC default sorting (mobile fix) */
body .woocommerce form.woocommerce-ordering,
body .woocommerce-page form.woocommerce-ordering,
body.woocommerce form.woocommerce-ordering,
body.woocommerce-page form.woocommerce-ordering,
body.woocommerce-shop form.woocommerce-ordering,
body.archive form.woocommerce-ordering,
body.tax-product_cat form.woocommerce-ordering,
.woocommerce-products-header + form.woocommerce-ordering,
.woocommerce > form.woocommerce-ordering,
.woocommerce-page > form.woocommerce-ordering,
#primary form.woocommerce-ordering,
.site-main form.woocommerce-ordering {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
position: absolute !important;
left: -9999px !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Same for result count */
body .woocommerce p.woocommerce-result-count,
body .woocommerce-page p.woocommerce-result-count,
.woocommerce > p.woocommerce-result-count,
.woocommerce-page > p.woocommerce-result-count,
#primary p.woocommerce-result-count,
.site-main p.woocommerce-result-count {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
}
/* But keep our custom toolbar visible */
.triyaq-shop-toolbar,
.triyaq-shop-toolbar * {
position: static;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
pointer-events: auto !important;
left: auto !important;
}
.triyaq-shop-toolbar .shop-sort-form {
display: block !important;
}
.triyaq-shop-toolbar .shop-sort-select {
display: inline-block !important;
position: static !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* ============================================
MOBILE DRAWER MENU
============================================ */
.triyaq-header-left-actions {
display: none;
align-items: center;
gap: 8px;
}
.triyaq-mobile-menu {
position: fixed;
inset: 0;
z-index: 9998;
visibility: hidden;
pointer-events: none;
}
.triyaq-mobile-menu.is-open {
visibility: visible;
pointer-events: auto;
}
.mobile-menu-backdrop {
position: absolute;
inset: 0;
background: rgba(26, 26, 26, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.4s ease;
}
.triyaq-mobile-menu.is-open .mobile-menu-backdrop {
opacity: 1;
}
.mobile-menu-panel {
position: absolute;
top: 0;
left: 0;
width: 85%;
max-width: 340px;
height: 100%;
background: var(--cream);
box-shadow: 4px 0 40px rgba(0, 0, 0, 0.18);
transform: translateX(-100%);
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.triyaq-mobile-menu.is-open .mobile-menu-panel {
transform: translateX(0);
}
.mobile-menu-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 24px 20px;
border-bottom: 1px solid var(--line);
}
.mobile-menu-eyebrow {
color: var(--gold-bright);
font-size: 11px;
letter-spacing: 3.5px;
text-transform: uppercase;
font-weight: 500;
font-family: var(--sans);
}
.mobile-menu-close {
background: transparent;
border: none;
color: var(--ink);
cursor: pointer;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
transition: all 0.3s ease;
}
.mobile-menu-close svg {
width: 20px;
height: 20px;
}
.mobile-menu-close:hover {
color: var(--gold-bright);
background: var(--cream-soft);
transform: rotate(90deg);
}
.mobile-menu-nav {
flex: 1;
padding: 14px 0 30px;
}
.mobile-menu-list,
.mobile-menu-list ul.sub-menu {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.mobile-menu-list li {
list-style: none !important;
margin: 0 !important;
}
.mobile-menu-list li::before {
display: none !important;
}
.mobile-menu-list li a {
display: block;
padding: 16px 28px;
color: var(--ink) !important;
font-family: var(--sans) !important;
font-size: 13px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 400;
border-bottom: 1px solid var(--line);
transition: all 0.3s ease;
position: relative;
text-decoration: none !important;
}
.mobile-menu-list li a:hover,
.mobile-menu-list li.current-menu-item > a,
.mobile-menu-list li.current-menu-parent > a {
color: var(--gold-bright) !important;
background: var(--cream-soft);
padding-left: 36px;
}
.mobile-menu-list li.current-menu-item > a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 55%;
background: var(--gold-bright);
border-radius: 0 3px 3px 0;
}
.mobile-menu-list .sub-menu {
background: var(--cream-soft);
}
.mobile-menu-list .sub-menu li a {
padding-left: 44px;
font-size: 12px;
letter-spacing: 1.8px;
color: var(--muted) !important;
}
.mobile-menu-list .sub-menu li a:hover {
color: var(--gold-bright) !important;
padding-left: 52px;
}
/* ============================================
SINGLE PRODUCT PAGE
============================================ */
/* Reset WC defaults on single product */
.woocommerce-page.single-product #content,
.woocommerce-page.single-product .col-full {
max-width: 100% !important;
padding: 0 !important;
}
.single-product .product .summary,
.single-product div.product .summary {
width: auto !important;
float: none !important;
margin: 0 !important;
}
.single-product .woocommerce-product-gallery {
width: auto !important;
float: none !important;
margin: 0 !important;
}
.triyaq-single-wrapper {
background: var(--cream);
padding: 0 0 80px;
}
/* Hide default WC tabs, related, upsells, meta */
.single-product .woocommerce-tabs,
.single-product .related.products,
.single-product .upsells.products,
.single-product .product_meta,
.single-product .yith-wcwl-add-to-wishlist {
display: none !important;
}
/* Breadcrumbs */
.triyaq-single-breadcrumbs-wrap {
max-width: 1400px;
margin: 0 auto;
padding: 28px 5% 0;
}
.single-breadcrumbs {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--muted);
flex-wrap: wrap;
}
.single-breadcrumbs a {
color: var(--muted) !important;
transition: color 0.3s ease;
}
.single-breadcrumbs a:hover {
color: var(--gold-bright) !important;
}
.single-breadcrumbs strong {
color: var(--gold-bright);
font-weight: 500;
}
.single-breadcrumbs span {
opacity: 0.5;
}
/* Main layout: 2-col grid */
body.single-product div.product,
body.woocommerce-page.single-product div.product,
.woocommerce.single-product div.product {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 60px !important;
align-items: start !important;
max-width: 1400px !important;
margin: 30px auto 0 !important;
padding: 0 5% !important;
width: auto !important;
float: none !important;
background: transparent !important;
border: none !important;
}
body.single-product div.product > *,
body.woocommerce-page.single-product div.product > * {
float: none !important;
width: auto !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.single-product div.product > .triyaq-single-gallery {
grid-column: 1 !important;
grid-row: 1 !important;
}
body.single-product div.product > .summary,
body.single-product div.product > .entry-summary {
grid-column: 2 !important;
grid-row: 1 !important;
padding-top: 6px;
}
/* Gallery (left column) */
.triyaq-single-gallery {
position: relative;
}
.gallery-main {
position: relative;
background: linear-gradient(180deg, var(--cream-soft) 0%, var(--cream-dark) 100%);
border-radius: 18px;
overflow: hidden;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.gallery-arch {
position: absolute;
top: 14%;
left: 50%;
transform: translateX(-50%);
width: 64%;
height: 78%;
border: 3px solid var(--gold);
border-radius: 50% 50% 0 0;
background: linear-gradient(180deg, transparent 0%, rgba(206, 163, 72, 0.06) 100%);
z-index: 1;
}
.gallery-arch::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid var(--gold);
border-radius: 50% 50% 0 0;
opacity: 0.35;
}
.gallery-zoom {
position: absolute;
top: 18px;
right: 18px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--line);
color: var(--ink);
cursor: pointer;
z-index: 10;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0;
}
.gallery-zoom svg {
width: 18px;
height: 18px;
}
.gallery-zoom:hover {
background: var(--gold-bright);
color: #fff;
border-color: var(--gold-bright);
}
.gallery-slides {
position: relative;
width: 100%;
height: 100%;
z-index: 2;
}
.gallery-slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.95);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
}
.gallery-slide.is-active {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.gallery-slide img {
max-width: 75%;
max-height: 88%;
object-fit: contain;
filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.18));
}
/* Thumbnails strip */
.gallery-thumbs-wrap {
display: flex;
align-items: center;
gap: 14px;
margin-top: 20px;
}
.gallery-nav {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--cream-soft);
border: 1px solid var(--line);
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0;
}
.gallery-nav svg {
width: 18px;
height: 18px;
}
.gallery-nav:hover {
background: var(--gold-bright);
color: #fff;
border-color: var(--gold-bright);
}
.gallery-thumbs {
display: flex;
gap: 12px;
flex: 1;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.gallery-thumbs::-webkit-scrollbar {
display: none;
}
.gallery-thumb {
flex-shrink: 0;
width: 92px;
height: 92px;
border-radius: 14px;
background: var(--cream-soft);
border: 2px solid transparent;
cursor: pointer;
overflow: hidden;
padding: 8px;
transition: all 0.3s ease;
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.gallery-thumb.is-active {
border-color: var(--gold-bright);
}
.gallery-thumb:hover {
border-color: var(--gold);
}
/* Summary (right column) */
.single-eyebrow {
display: block;
color: var(--gold-bright);
font-size: 13px;
letter-spacing: 4px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 16px;
font-family: var(--sans);
}
.single-title {
font-family: var(--serif) !important;
font-size: clamp(36px, 4.5vw, 56px) !important;
line-height: 1.05 !important;
margin: 0 0 6px !important;
color: var(--ink) !important;
font-weight: 500 !important;
}
.single-collection {
display: block;
font-family: var(--script) !important;
color: var(--gold-bright);
font-size: clamp(26px, 2.5vw, 34px);
font-weight: 500;
margin-bottom: 22px;
font-style: italic;
line-height: 1;
}
.single-price {
font-family: var(--sans) !important;
font-size: 28px !important;
font-weight: 600 !important;
color: var(--gold-bright) !important;
margin: 0 0 24px !important;
line-height: 1;
}
.single-price .woocommerce-Price-currencySymbol {
font-size: 18px;
margin-right: 4px;
opacity: 0.9;
}
.single-price del {
font-size: 18px !important;
opacity: 0.4;
margin-right: 10px;
text-decoration: line-through;
color: var(--muted) !important;
}
.single-price ins {
text-decoration: none;
background: transparent;
font-weight: 600;
}
.single-description {
color: var(--muted);
font-size: 15px;
line-height: 1.8;
margin-bottom: 28px;
max-width: 540px;
}
.single-description p {
margin: 0 0 8px;
}
.single-divider {
height: 1px;
background: var(--line);
margin-bottom: 26px;
}
/* Add to cart form */
.triyaq-cart-form-wrap {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 6px;
}
.single-product form.cart {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
display: flex !important;
flex-wrap: wrap;
align-items: flex-end;
gap: 0;
}
.triyaq-qty-wrap {
display: inline-flex;
flex-direction: column;
gap: 8px;
margin-right: 18px;
}
.triyaq-qty-wrap .qty-label {
font-family: var(--sans);
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
}
.single-product .quantity,
.triyaq-qty-wrap .quantity {
margin: 0 !important;
display: inline-flex !important;
align-items: center;
background: #fff;
border: 1px solid var(--line);
border-radius: 30px;
padding: 4px;
width: auto;
overflow: hidden;
}
.single-product .quantity input.qty,
.triyaq-qty-wrap .quantity input.qty {
width: 44px !important;
height: 38px !important;
border: none !important;
background: transparent !important;
text-align: center !important;
font-family: var(--sans) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--ink) !important;
padding: 0 !important;
box-shadow: none !important;
-moz-appearance: textfield !important;
margin: 0 !important;
}
.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.qty-btn {
width: 34px;
height: 38px;
border: none;
background: transparent;
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: color 0.3s ease;
flex-shrink: 0;
}
.qty-btn svg {
width: 16px;
height: 16px;
}
.qty-btn:hover {
color: var(--gold-bright);
}
.qty-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.single-product form.cart .single_add_to_cart_button {
flex: 1 1 280px;
background: var(--gold-bright) !important;
color: #fff !important;
border: none !important;
border-radius: 30px !important;
padding: 16px 28px !important;
font-size: 13px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
font-family: var(--sans) !important;
cursor: pointer;
transition: all 0.3s ease !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 12px;
box-shadow: 0 10px 25px rgba(184, 144, 47, 0.3) !important;
text-shadow: none !important;
margin: 0 !important;
height: 56px;
}
.single-product form.cart .single_add_to_cart_button:hover {
background: var(--ink) !important;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2) !important;
}
.single-product form.cart .single_add_to_cart_button::after {
content: '';
width: 18px;
height: 18px;
display: inline-block;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
flex-shrink: 0;
}
.single-product form.cart .single_add_to_cart_button.disabled,
.single-product form.cart .single_add_to_cart_button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
.single-buynow-btn {
width: 100%;
background: #fff;
color: var(--ink);
border: 1.5px solid var(--ink);
border-radius: 30px;
padding: 16px 28px;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 600;
font-family: var(--sans);
cursor: pointer;
transition: all 0.3s ease;
height: 56px;
}
.single-buynow-btn:hover {
background: var(--ink);
color: #fff;
transform: translateY(-2px);
}
/* Trust badges inside summary */
.single-trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 20px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
margin-top: 26px;
}
.single-trust-item {
display: flex;
align-items: center;
gap: 12px;
padding-right: 14px;
border-right: 1px solid var(--line);
}
.single-trust-item:last-child {
border-right: none;
padding-right: 0;
}
.single-trust-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--gold-bright);
}
.single-trust-icon svg {
width: 26px;
height: 26px;
}
.single-trust-text strong {
display: block;
font-family: var(--sans) !important;
font-size: 12px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.3px;
margin-bottom: 2px;
}
.single-trust-text span {
font-size: 11px;
color: var(--muted);
line-height: 1.4;
}
/* Features full-width below product */
.triyaq-single-features {
max-width: 1400px;
margin: 60px auto 0;
padding: 0 5%;
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 30px 18px;
background: var(--cream-soft);
border-radius: 18px;
align-items: center;
}
.feature-item {
display: flex;
align-items: center;
gap: 16px;
padding: 6px 22px;
border-right: 1px solid var(--line);
}
.feature-item:last-child {
border-right: none;
}
.feature-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: #fff;
color: var(--gold-bright);
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
}
.feature-icon svg {
width: 28px;
height: 28px;
}
.feature-text h4 {
font-family: var(--sans) !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--ink) !important;
margin: 0 0 4px !important;
letter-spacing: 0.3px;
}
.feature-text p {
font-size: 12px;
color: var(--muted);
line-height: 1.5;
margin: 0;
}
/* Related products carousel */
.triyaq-single-related {
max-width: 1400px;
margin: 70px auto 0;
padding: 0 5%;
}
.related-header {
text-align: center;
margin-bottom: 80px;
}
.related-header h2 {
font-family: var(--serif) !important;
font-size: clamp(28px, 3.5vw, 40px) !important;
color: var(--ink) !important;
margin: 0 !important;
font-weight: 500 !important;
font-style: italic;
}
.related-carousel-wrap {
position: relative;
display: flex;
align-items: center;
gap: 14px;
}
.related-nav {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--line);
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 5;
padding: 0;
}
.related-nav svg {
width: 20px;
height: 20px;
}
.related-nav:hover {
background: var(--gold-bright);
color: #fff;
border-color: var(--gold-bright);
box-shadow: var(--shadow-sm);
}
.related-carousel {
flex: 1;
overflow: hidden;
min-width: 0;
}
.related-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 230px;
gap: 22px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 100px 4px 14px;
margin-top: -90px;
}
.related-track::-webkit-scrollbar {
display: none;
}
.related-track > .luxury-card {
scroll-snap-align: start;
}
/* Lightbox */
.triyaq-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
opacity: 0;
transition: opacity 0.3s ease;
cursor: zoom-out;
}
.triyaq-lightbox.is-open {
opacity: 1;
}
.triyaq-lightbox img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
animation: lbFadeIn 0.4s ease;
}
@keyframes lbFadeIn {
from {
transform: scale(0.92);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.lb-close {
position: fixed;
top: 24px;
right: 24px;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
border: none;
color: #fff;
font-size: 28px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
line-height: 1;
}
.lb-close:hover {
background: var(--gold-bright);
transform: rotate(90deg);
}
/* Single product responsive */
@media (max-width: 1100px) {
.related-track {
grid-auto-columns: 210px;
}
.features-grid {
padding: 24px 12px;
}
.feature-item {
padding: 4px 14px;
gap: 12px;
}
.feature-icon {
width: 50px;
height: 50px;
}
.feature-icon svg {
width: 24px;
height: 24px;
}
.feature-text h4 {
font-size: 14px !important;
}
.feature-text p {
font-size: 11px;
}
}
@media (max-width: 900px) {
body.single-product div.product,
body.woocommerce-page.single-product div.product {
grid-template-columns: 1fr !important;
gap: 36px !important;
padding: 0 16px !important;
margin-top: 20px !important;
}
body.single-product div.product > .triyaq-single-gallery,
body.single-product div.product > .summary,
body.single-product div.product > .entry-summary {
grid-column: 1 !important;
grid-row: auto !important;
}
.triyaq-single-breadcrumbs-wrap {
padding: 18px 16px 0;
}
.single-breadcrumbs {
font-size: 12px;
gap: 8px;
}
.gallery-thumb {
width: 74px;
height: 74px;
}
.single-eyebrow {
font-size: 12px;
letter-spacing: 3px;
}
.single-title {
margin-bottom: 4px !important;
}
.single-collection {
margin-bottom: 18px;
}
.single-price {
font-size: 24px !important;
margin-bottom: 18px !important;
}
.single-description {
font-size: 14px;
margin-bottom: 22px;
}
.single-trust {
grid-template-columns: repeat(3, 1fr);
gap: 4px;
padding: 16px 14px;
}
.single-trust-icon {
width: 32px;
height: 32px;
}
.single-trust-icon svg {
width: 22px;
height: 22px;
}
.single-trust-item {
gap: 8px;
padding-right: 8px;
}
.single-trust-text strong {
font-size: 11px;
}
.single-trust-text span {
font-size: 10px;
}
.features-grid {
grid-template-columns: 1fr 1fr;
gap: 18px;
padding: 22px 16px;
}
.feature-item {
padding: 6px;
border-right: none;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
}
.feature-text {
text-align: center;
}
.feature-text p {
font-size: 11px;
max-width: 180px;
margin: 0 auto;
}
.triyaq-single-features,
.triyaq-single-related {
padding: 0 16px;
}
.related-header {
margin-bottom: 60px;
}
.related-nav {
display: none;
}
.related-track {
grid-auto-columns: calc((100vw - 50px) / 2.1);
padding: 100px 0 14px;
}
/* Overflow fix for single product */
.triyaq-single-wrapper {
overflow-x: hidden;
}
body.single-product div.product,
body.woocommerce-page.single-product div.product {
grid-template-columns: minmax(0, 1fr) !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box;
}
body.single-product div.product > *,
body.woocommerce-page.single-product div.product > * {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box;
}
.triyaq-single-gallery,
.gallery-main {
width: 100% !important;
max-width: 100% !important;
}
.single-product form.cart {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
}
.triyaq-cart-form-wrap,
.single-product form.cart > *,
.triyaq-cart-form-wrap > * {
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
.triyaq-qty-wrap {
width: auto !important;
margin-right: 0 !important;
align-self: flex-start;
}
.single-product .quantity {
width: fit-content;
max-width: 100%;
}
.single-product form.cart .single_add_to_cart_button {
width: 100% !important;
flex: 0 0 auto !important;
min-width: 0 !important;
}
.single-buynow-btn {
width: 100% !important;
box-sizing: border-box;
}
.single-trust {
grid-template-columns: 1fr !important;
gap: 12px !important;
width: 100% !important;
}
}
@media (max-width: 600px) {
.single-product form.cart {
gap: 12px;
align-items: stretch;
}
.triyaq-qty-wrap {
margin-right: 0;
width: 100%;
}
.triyaq-qty-wrap .qty-label {
letter-spacing: 2px;
}
.single-product .quantity {
width: fit-content;
}
.single-product form.cart .single_add_to_cart_button {
width: 100%;
flex: 1 1 100%;
min-width: 0;
}
.single-buynow-btn {
padding: 14px 24px;
height: 52px;
}
.gallery-zoom {
width: 36px;
height: 36px;
top: 14px;
right: 14px;
}
.gallery-zoom svg {
width: 16px;
height: 16px;
}
.gallery-nav {
width: 36px;
height: 36px;
}
.gallery-nav svg {
width: 16px;
height: 16px;
}
.gallery-thumb {
width: 62px;
height: 62px;
border-radius: 12px;
}
.single-trust {
grid-template-columns: 1fr;
gap: 12px;
}
.single-trust-item {
border-right: none;
border-bottom: 1px solid var(--line);
padding: 0 0 12px;
}
.single-trust-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.gallery-main {
aspect-ratio: 4 / 5;
}
.gallery-arch {
top: 10%;
height: 78%;
}
}
@media (max-width: 480px) {
.features-grid {
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 18px 14px;
}
.feature-icon {
width: 44px;
height: 44px;
}
.feature-icon svg {
width: 22px;
height: 22px;
}
.feature-text h4 {
font-size: 13px !important;
}
.feature-text p {
font-size: 10px;
}
.single-title {
font-size: 32px !important;
}
.single-collection {
font-size: 22px;
}
.single-price {
font-size: 22px !important;
}
}
/* Hide WooCommerce breadcrumb */
.woocommerce-breadcrumb {
display: none !important;
}
/* ============================================
CART PAGE
============================================ */
/* Reset WC/Storefront defaults on cart page */
.woocommerce-cart #content,
.woocommerce-cart .col-full {
max-width: 100% !important;
padding: 0 !important;
}
.woocommerce-cart .woocommerce {
max-width: 100% !important;
margin: 0 !important;
}
.woocommerce-cart .woocommerce-breadcrumb,
.woocommerce-cart h1.entry-title,
.woocommerce-cart .page-title {
display: none !important;
}
.woocommerce-cart .return-to-shop {
display: none !important;
}
.triyaq-cart-page-wrapper {
background: var(--cream);
padding: 0 0 80px;
min-height: 60vh;
}
.triyaq-cart-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 40px 5% 20px;
}
/* WC notices inside cart */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error {
border-top-color: var(--gold-bright) !important;
background: #fff !important;
border-radius: 12px !important;
max-width: 1400px;
margin: 20px auto !important;
padding: 18px 24px !important;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
}
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before {
color: var(--gold-bright) !important;
}
.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-info .button {
background: var(--ink) !important;
color: #fff !important;
border-radius: 30px !important;
padding: 8px 18px !important;
font-size: 11px !important;
letter-spacing: 2px;
text-transform: uppercase;
}
.triyaq-cart-header {
margin-bottom: 30px;
}
.cart-page-title {
font-family: var(--serif) !important;
font-size: clamp(38px, 5vw, 56px) !important;
font-weight: 500 !important;
color: var(--ink) !important;
margin: 0 0 8px !important;
line-height: 1.05 !important;
}
.cart-page-subtitle {
color: var(--muted);
font-size: 14px;
margin: 0;
letter-spacing: 0.3px;
}
/* Main 2-col grid */
.triyaq-cart-grid {
display: grid;
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: 30px;
align-items: start;
}
.triyaq-cart-left {
min-width: 0;
}
.triyaq-cart-right {
min-width: 0;
position: sticky;
top: 20px;
}
.triyaq-cart-form {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
/* Cart items list */
.triyaq-cart-items {
background: #fff;
border-radius: 18px;
padding: 8px 24px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.triyaq-cart-row {
display: grid;
grid-template-columns: 90px minmax(0, 1fr) 100px 130px 110px 36px;
grid-template-areas: "image info price qty subtotal remove";
align-items: center;
gap: 16px;
padding: 22px 0;
border-bottom: 1px solid var(--line);
}
.triyaq-cart-row:last-child {
border-bottom: none;
}
.triyaq-cart-row-head {
padding: 16px 0 14px !important;
border-bottom: 1px solid var(--line) !important;
grid-template-areas: "head head price qty subtotal remove";
}
.triyaq-cart-row-head .head-product {
grid-area: head;
}
.triyaq-cart-row-head .head-price {
grid-area: price;
}
.triyaq-cart-row-head .head-qty {
grid-area: qty;
text-align: center;
}
.triyaq-cart-row-head .head-subtotal {
grid-area: subtotal;
}
.triyaq-cart-row-head .head-remove {
grid-area: remove;
}
.triyaq-cart-row-head > div {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--muted);
font-weight: 500;
}
.cart-item-image {
grid-area: image;
width: 90px;
height: 110px;
border-radius: 12px;
background: var(--cream-soft);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 4px;
}
.cart-item-image a,
.cart-item-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.12));
background: transparent !important;
}
.cart-item-info {
grid-area: info;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.cart-item-title {
font-family: var(--serif) !important;
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
margin: 0 !important;
color: var(--ink) !important;
word-break: break-word;
}
.cart-item-title a {
color: var(--ink) !important;
transition: color 0.3s ease;
}
.cart-item-title a:hover {
color: var(--gold-bright) !important;
}
.cart-item-collection {
font-family: var(--sans);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.4px;
}
.cart-item-size {
font-family: var(--sans);
font-size: 12px;
color: var(--muted);
margin-top: 2px;
}
.cart-item-info .wc-item-meta,
.cart-item-info dl.variation {
margin: 4px 0 0 !important;
padding: 0 !important;
font-size: 12px;
color: var(--muted);
list-style: none;
}
.cart-item-info .wc-item-meta li,
.cart-item-info dl.variation dt,
.cart-item-info dl.variation dd {
margin: 0 !important;
padding: 0 !important;
font-weight: 400;
}
.cart-item-info dl.variation dt {
display: inline;
}
.cart-item-info dl.variation dd {
display: inline;
margin-right: 8px !important;
}
.cart-item-price,
.cart-item-subtotal {
font-family: var(--sans) !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--ink) !important;
}
.cart-item-price {
grid-area: price;
}
.cart-item-subtotal {
grid-area: subtotal;
color: var(--gold-bright) !important;
font-weight: 600 !important;
}
.cart-item-price bdi,
.cart-item-subtotal bdi {
white-space: nowrap;
}
.cart-item-qty {
grid-area: qty;
display: flex;
justify-content: center;
}
.cart-item-qty .quantity {
display: inline-flex !important;
align-items: center;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: 30px;
padding: 3px;
margin: 0 !important;
overflow: hidden;
}
.cart-item-qty input.qty {
width: 38px !important;
height: 32px !important;
border: none !important;
background: transparent !important;
text-align: center !important;
font-family: var(--sans) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--ink) !important;
padding: 0 !important;
box-shadow: none !important;
-moz-appearance: textfield !important;
margin: 0 !important;
}
.cart-item-qty input.qty::-webkit-outer-spin-button,
.cart-item-qty input.qty::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.cart-item-qty .qty-btn {
width: 28px;
height: 32px;
border: none;
background: transparent;
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition: color 0.25s ease;
flex-shrink: 0;
}
.cart-item-qty .qty-btn svg {
width: 14px;
height: 14px;
}
.cart-item-qty .qty-btn:hover {
color: var(--gold-bright);
}
.cart-item-qty .qty-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.cart-item-remove {
grid-area: remove;
display: flex;
justify-content: center;
}
.cart-remove-btn {
width: 30px;
height: 30px;
border-radius: 50%;
background: transparent;
color: var(--muted) !important;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
transition: all 0.3s ease;
border: none;
}
.cart-remove-btn svg {
width: 16px;
height: 16px;
}
.cart-remove-btn:hover {
color: #fff !important;
background: var(--ink);
transform: rotate(90deg);
}
.hidden-update-cart {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.triyaq-cart-row.is-updating {
opacity: 0.6;
transition: opacity 0.2s ease;
}
/* Promo code + gift note */
.triyaq-cart-actions {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 16px;
margin-top: 18px;
}
.triyaq-promo {
display: flex;
align-items: center;
background: #fff;
border: 1px solid var(--line);
border-radius: 30px;
padding: 6px 6px 6px 18px;
box-shadow: var(--shadow-sm);
transition: border 0.3s ease;
}
.triyaq-promo:focus-within {
border-color: var(--gold);
}
.promo-icon {
flex-shrink: 0;
color: var(--muted);
display: inline-flex;
align-items: center;
margin-right: 10px;
}
.promo-icon svg {
width: 18px;
height: 18px;
}
.promo-input {
flex: 1;
border: none !important;
background: transparent !important;
padding: 10px 0 !important;
font-family: var(--sans) !important;
font-size: 14px !important;
color: var(--ink) !important;
outline: none !important;
box-shadow: none !important;
min-width: 0 !important;
margin: 0 !important;
}
.promo-input::placeholder {
color: var(--muted);
}
.promo-apply {
flex-shrink: 0;
background: var(--gold-bright) !important;
color: #fff !important;
border: none !important;
border-radius: 30px !important;
padding: 11px 24px !important;
font-family: var(--sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
line-height: 1 !important;
}
.promo-apply:hover {
background: var(--ink) !important;
transform: translateY(-1px);
}
.triyaq-gift-note-btn {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border: 1px solid var(--line);
border-radius: 30px;
padding: 12px 22px;
cursor: pointer;
font-family: var(--sans);
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
text-align: left;
width: 100%;
}
.triyaq-gift-note-btn:hover {
border-color: var(--gold);
transform: translateY(-1px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
}
.triyaq-gift-note-btn.has-note {
border-color: var(--gold);
background: linear-gradient(135deg, #fff, var(--gold-soft));
}
.gift-btn-left {
display: inline-flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.gift-icon {
flex-shrink: 0;
color: var(--gold-bright);
display: inline-flex;
align-items: center;
}
.gift-icon svg {
width: 18px;
height: 18px;
}
.gift-label {
font-size: 13px;
color: var(--ink);
letter-spacing: 0.5px;
font-weight: 500;
}
.triyaq-gift-note-btn.has-note .gift-label::after {
content: ' • Edit';
color: var(--gold-bright);
font-weight: 600;
}
.gift-arrow {
flex-shrink: 0;
color: var(--muted);
display: inline-flex;
align-items: center;
}
.gift-arrow svg {
width: 16px;
height: 16px;
}
/* Order summary */
.triyaq-order-summary {
background: #fff;
border-radius: 18px;
padding: 30px 28px;
box-shadow: var(--shadow-sm);
margin: 0 !important;
width: 100% !important;
float: none !important;
}
.summary-title {
font-family: var(--serif) !important;
font-size: 26px !important;
font-weight: 500 !important;
color: var(--ink) !important;
font-style: italic;
margin: 0 0 22px !important;
line-height: 1 !important;
}
.summary-rows {
display: flex;
flex-direction: column;
gap: 14px;
}
.summary-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-family: var(--sans);
font-size: 14px;
}
.summary-label {
color: var(--muted);
font-weight: 400;
letter-spacing: 0.2px;
}
.summary-count {
color: var(--muted);
font-size: 13px;
margin-left: 4px;
}
.summary-value {
color: var(--ink);
font-weight: 500;
text-align: right;
}
.summary-value bdi {
white-space: nowrap;
}
.free-shipping-label {
color: var(--gold-bright);
font-weight: 700;
letter-spacing: 1px;
font-size: 13px;
}
.summary-discount-value {
color: #d8474a;
font-weight: 600;
}
.summary-discount-value a {
color: var(--muted) !important;
font-size: 11px;
text-decoration: none !important;
margin-left: 6px;
}
.summary-discount-value a:hover {
color: var(--ink) !important;
}
.summary-divider {
height: 1px;
background: var(--line);
margin: 22px 0 18px;
}
.summary-total-block {
margin-bottom: 24px;
}
.summary-total {
align-items: center;
}
.summary-total .summary-label {
font-family: var(--serif) !important;
font-size: 22px;
color: var(--ink);
font-weight: 500;
letter-spacing: 0;
}
.summary-total .summary-value {
font-family: var(--sans);
font-size: 22px;
font-weight: 700;
color: var(--gold-bright);
}
.summary-total .summary-value .woocommerce-Price-currencySymbol {
font-size: 16px;
opacity: 0.9;
margin-right: 2px;
}
.summary-vat {
color: var(--muted);
font-size: 12px;
margin-top: 4px;
letter-spacing: 0.3px;
}
.summary-actions {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 6px;
}
.summary-checkout-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px;
background: var(--gold-bright) !important;
color: #fff !important;
border: none !important;
border-radius: 30px !important;
padding: 16px 28px !important;
font-family: var(--sans) !important;
font-size: 12px !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
transition: all 0.35s ease !important;
text-decoration: none !important;
box-shadow: 0 10px 25px rgba(184, 144, 47, 0.3) !important;
text-shadow: none !important;
}
.checkout-lock {
display: inline-flex;
align-items: center;
}
.checkout-lock svg {
width: 16px;
height: 16px;
}
.summary-checkout-btn:hover {
background: var(--ink) !important;
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2) !important;
}
.summary-continue-btn {
display: block;
text-align: center;
background: #fff;
color: var(--ink) !important;
border: 1px solid var(--ink);
border-radius: 30px;
padding: 14px 28px;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
text-decoration: none !important;
transition: all 0.3s ease;
}
.summary-continue-btn:hover {
background: var(--ink);
color: #fff !important;
}
/* Trust badges under summary */
.triyaq-cart-trust {
background: #fff;
border-radius: 18px;
padding: 22px 26px;
box-shadow: var(--shadow-sm);
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 18px;
}
.cart-trust-item {
display: flex;
align-items: center;
gap: 16px;
}
.cart-trust-icon {
flex-shrink: 0;
width: 38px;
height: 38px;
color: var(--gold-bright);
display: inline-flex;
align-items: center;
justify-content: center;
}
.cart-trust-icon svg {
width: 26px;
height: 26px;
}
.cart-trust-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.cart-trust-text strong {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
color: var(--ink);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.cart-trust-text span {
font-size: 12px;
color: var(--muted);
letter-spacing: 0.2px;
}
/* You may also like */
.triyaq-cart-related {
max-width: 1400px;
margin: 60px auto 0;
padding: 0 5%;
}
.cart-related-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 80px;
}
.cart-related-header h2 {
font-family: var(--serif) !important;
font-size: clamp(26px, 3vw, 36px) !important;
color: var(--ink) !important;
margin: 0 !important;
font-weight: 500 !important;
font-style: italic;
}
.cart-related-viewall {
display: none;
align-items: center;
gap: 8px;
color: var(--ink) !important;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
transition: color 0.3s ease;
text-decoration: none !important;
}
.cart-related-viewall:hover {
color: var(--gold-bright) !important;
}
.cart-related-viewall svg {
width: 14px;
height: 14px;
}
.cart-related-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 22px;
}
.cart-related-grid-mobile {
display: none;
grid-auto-flow: column;
grid-auto-columns: calc((100vw - 50px) / 2.2);
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 100px 4px 14px;
margin-top: -90px;
}
.cart-related-grid-mobile::-webkit-scrollbar {
display: none;
}
.cart-related-grid-mobile > .luxury-card {
scroll-snap-align: start;
}
/* Empty cart state */
.triyaq-cart-empty-wrap {
max-width: 700px;
margin: 0 auto;
padding: 80px 20px 100px;
text-align: center;
}
.triyaq-cart-empty .empty-stage {
position: relative;
width: 220px;
height: 220px;
margin: 0 auto 30px;
display: flex;
align-items: center;
justify-content: center;
}
.empty-arch {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 200px;
border: 2px solid var(--gold);
border-radius: 90px 90px 0 0;
background: linear-gradient(180deg, transparent, rgba(206, 163, 72, 0.05));
z-index: 1;
}
.empty-arch::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid var(--gold);
border-radius: 85px 85px 0 0;
opacity: 0.4;
}
.empty-icon {
position: relative;
z-index: 2;
color: var(--gold-bright);
opacity: 0.7;
}
.empty-icon svg {
width: 70px;
height: 70px;
}
.empty-eyebrow {
display: block;
color: var(--gold-bright);
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 14px;
font-weight: 500;
}
.triyaq-cart-empty h2 {
font-family: var(--serif) !important;
font-size: clamp(32px, 4.5vw, 48px) !important;
color: var(--ink) !important;
margin: 0 0 16px !important;
font-weight: 500 !important;
font-style: italic;
}
.triyaq-cart-empty p {
color: var(--muted);
font-size: 15px;
line-height: 1.7;
max-width: 460px;
margin: 0 auto 32px;
}
.empty-cta {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 16px 36px;
background: var(--ink);
color: #fff !important;
border-radius: 60px;
font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
transition: all 0.4s ease;
text-decoration: none !important;
}
.empty-cta svg {
width: 16px;
height: 16px;
background: #fff;
color: var(--ink);
border-radius: 50%;
padding: 4px;
transition: transform 0.4s ease;
}
.empty-cta:hover {
background: var(--gold-bright);
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(184, 144, 47, 0.3);
}
.empty-cta:hover svg {
transform: translateX(4px);
}
/* Gift note modal */
.triyaq-giftnote-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
visibility: hidden;
opacity: 0;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
.triyaq-giftnote-modal.is-open {
visibility: visible;
opacity: 1;
}
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(26, 26, 26, 0.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.modal-panel {
position: relative;
background: var(--cream);
border-radius: 20px;
padding: 40px 36px 32px;
max-width: 520px;
width: 100%;
box-shadow: var(--shadow-lg);
transform: scale(0.92) translateY(20px);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.triyaq-giftnote-modal.is-open .modal-panel {
transform: scale(1) translateY(0);
}
.modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: transparent;
border: none;
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0;
}
.modal-close svg {
width: 18px;
height: 18px;
}
.modal-close:hover {
background: var(--gold);
color: #fff;
transform: rotate(90deg);
}
.modal-eyebrow {
display: block;
color: var(--gold-bright);
font-size: 11px;
letter-spacing: 3.5px;
text-transform: uppercase;
margin-bottom: 12px;
font-weight: 500;
font-family: var(--sans);
}
.modal-title {
font-family: var(--serif) !important;
font-size: clamp(26px, 3vw, 34px) !important;
color: var(--ink) !important;
margin: 0 0 12px !important;
font-weight: 500 !important;
font-style: italic;
line-height: 1.1 !important;
}
.modal-desc {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
margin: 0 0 22px;
}
.modal-textarea {
width: 100%;
min-height: 130px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px 18px;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
resize: vertical;
transition: border 0.3s ease;
outline: none;
box-shadow: none;
}
.modal-textarea:focus {
border-color: var(--gold);
}
.modal-counter {
text-align: right;
color: var(--muted);
font-size: 12px;
margin-top: 8px;
font-family: var(--sans);
}
.modal-counter .counter-value {
color: var(--gold-bright);
font-weight: 600;
}
.modal-actions {
display: flex;
gap: 10px;
margin-top: 24px;
}
.modal-btn {
flex: 1;
padding: 14px 24px;
border-radius: 30px;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.modal-btn-cancel {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.modal-btn-cancel:hover {
background: var(--ink);
color: #fff;
}
.modal-btn-save {
background: var(--gold-bright);
color: #fff;
border-color: var(--gold-bright);
box-shadow: 0 8px 20px rgba(184, 144, 47, 0.3);
}
.modal-btn-save:hover {
background: var(--ink);
border-color: var(--ink);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.modal-success {
text-align: center;
color: var(--gold-bright);
font-size: 13px;
margin-top: 14px;
letter-spacing: 1px;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-success.show {
opacity: 1;
}
/* Cart page responsive */
@media (max-width: 1100px) {
.triyaq-cart-grid {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 22px;
}
.cart-related-grid {
grid-template-columns: repeat(3, 1fr);
}
.triyaq-cart-row {
grid-template-columns: 80px minmax(0, 1fr) 80px 110px 90px 32px;
gap: 12px;
}
}
@media (max-width: 900px) {
.triyaq-cart-page-wrapper {
padding: 0 0 60px;
}
.triyaq-cart-wrapper {
padding: 24px 14px 0;
}
.cart-page-title {
font-size: 36px !important;
}
.cart-page-subtitle {
font-size: 13px;
}
.triyaq-cart-header {
margin-bottom: 20px;
}
.triyaq-cart-grid {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
.triyaq-cart-right {
position: static;
top: auto;
}
.triyaq-cart-items {
padding: 4px 14px;
border-radius: 14px;
}
.triyaq-cart-row-head {
display: none !important;
}
.triyaq-cart-row {
grid-template-columns: 76px minmax(0, 1fr) auto;
grid-template-areas:
"image info subtotal"
"image qty remove";
gap: 12px;
padding: 18px 0;
align-items: start;
}
.cart-item-image {
width: 76px;
height: 100px;
align-self: center;
grid-row: 1 / 3;
}
.cart-item-info {
gap: 3px;
padding-top: 2px;
}
.cart-item-title {
font-size: 16px !important;
}
.cart-item-collection {
font-size: 11px;
}
.cart-item-size {
font-size: 11px;
}
.cart-item-price {
display: none !important;
}
.cart-item-subtotal {
grid-area: subtotal;
font-size: 14px !important;
text-align: right;
align-self: start;
padding-top: 4px;
}
.cart-item-qty {
grid-area: qty;
justify-content: flex-start;
padding-left: 0;
align-self: end;
}
.cart-item-qty .quantity {
padding: 2px;
}
.cart-item-qty input.qty {
width: 34px !important;
height: 28px !important;
font-size: 13px !important;
}
.cart-item-qty .qty-btn {
width: 24px;
height: 28px;
}
.cart-item-qty .qty-btn svg {
width: 12px;
height: 12px;
}
.cart-item-remove {
grid-area: remove;
align-self: end;
justify-content: flex-end;
padding-bottom: 2px;
}
.cart-remove-btn {
width: 26px;
height: 26px;
}
.cart-remove-btn svg {
width: 14px;
height: 14px;
}
.triyaq-cart-actions {
grid-template-columns: 1fr;
gap: 10px;
margin-top: 14px;
}
.triyaq-promo {
padding: 4px 4px 4px 14px;
}
.promo-input {
padding: 9px 0 !important;
font-size: 13px !important;
}
.promo-apply {
padding: 10px 18px !important;
font-size: 11px !important;
letter-spacing: 1.5px !important;
}
.triyaq-gift-note-btn {
padding: 14px 18px;
}
.gift-label {
font-size: 13px;
}
.triyaq-order-summary {
padding: 24px 22px;
border-radius: 14px;
}
.summary-title {
font-size: 22px !important;
}
.summary-row {
font-size: 13px;
}
.summary-total .summary-label {
font-size: 19px;
}
.summary-total .summary-value {
font-size: 19px;
}
.summary-checkout-btn {
padding: 14px 22px !important;
font-size: 11px !important;
letter-spacing: 2px !important;
}
.summary-continue-btn {
padding: 12px 22px;
font-size: 11px;
letter-spacing: 2px;
}
.triyaq-cart-trust {
padding: 18px 20px;
border-radius: 14px;
gap: 14px;
}
.cart-trust-icon {
width: 32px;
height: 32px;
}
.cart-trust-icon svg {
width: 22px;
height: 22px;
}
.cart-trust-text strong {
font-size: 11px;
letter-spacing: 1.2px;
}
.cart-trust-text span {
font-size: 11px;
}
.triyaq-cart-related {
margin-top: 50px;
padding: 0 14px;
}
.cart-related-header {
margin-bottom: 30px;
}
.cart-related-viewall {
display: inline-flex;
}
.cart-related-grid {
display: none;
}
.cart-related-grid-mobile {
display: grid;
}
.triyaq-cart-empty-wrap {
padding: 50px 16px 70px;
}
.triyaq-cart-empty .empty-stage {
width: 180px;
height: 180px;
}
.empty-arch {
width: 150px;
height: 170px;
border-radius: 75px 75px 0 0;
}
.empty-arch::before {
border-radius: 70px 70px 0 0;
}
.empty-icon svg {
width: 56px;
height: 56px;
}
.modal-panel {
padding: 32px 22px 24px;
border-radius: 16px;
}
.modal-actions {
flex-direction: column-reverse;
gap: 8px;
}
.modal-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.triyaq-cart-wrapper {
padding: 18px 10px 0;
}
.cart-page-title {
font-size: 30px !important;
}
.triyaq-cart-items {
padding: 0 12px;
}
.triyaq-cart-row {
grid-template-columns: 64px minmax(0, 1fr) auto;
gap: 10px;
padding: 14px 0;
}
.cart-item-image {
width: 64px;
height: 80px;
}
.cart-item-title {
font-size: 15px !important;
}
.cart-item-subtotal {
font-size: 13px !important;
}
.triyaq-order-summary {
padding: 20px 18px;
}
.summary-title {
font-size: 20px !important;
}
.cart-related-grid-mobile {
grid-auto-columns: calc((100vw - 36px) / 1.8);
}
.empty-cta {
padding: 14px 28px;
font-size: 11px;
letter-spacing: 2px;
}
}
/* ============================================
CHECKOUT PAGE + THANK YOU PAGE
============================================ */
/* Reset WC/Storefront defaults on checkout */
.woocommerce-checkout #content,
.woocommerce-checkout .col-full {
max-width: 100% !important;
padding: 0 !important;
}
.woocommerce-checkout .woocommerce {
max-width: 100% !important;
margin: 0 !important;
}
.woocommerce-checkout .woocommerce-breadcrumb,
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout .page-title {
display: none !important;
}
.triyaq-checkout-wrapper {
background: var(--cream);
max-width: 900px;
margin: 0 auto;
padding: 40px 5% 80px;
}
/* WC notices on checkout */
.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
border-top-color: var(--gold-bright) !important;
background: #fff !important;
border-radius: 12px !important;
margin: 0 0 22px !important;
padding: 16px 22px !important;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
list-style: none !important;
}
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-error li,
.woocommerce-checkout .woocommerce-error strong,
.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-checkout .woocommerce-NoticeGroup li,
.woocommerce-checkout .woocommerce-NoticeGroup strong,
.woocommerce-checkout ul.woocommerce-error,
.woocommerce-checkout ul.woocommerce-error li {
color: #b91c1c !important;
background: #fef2f2 !important;
border-top-color: #b91c1c !important;
text-shadow: none !important;
}
.woocommerce-checkout .woocommerce-error strong,
.woocommerce-checkout ul.woocommerce-error strong {
color: #7f1d1d !important;
font-weight: 600 !important;
}
.woocommerce-checkout .woocommerce-message {
color: #166534 !important;
background: #f0fdf4 !important;
border-top-color: #16a34a !important;
}
.woocommerce-checkout .woocommerce-info {
color: var(--ink) !important;
background: var(--cream-soft) !important;
}
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before {
color: inherit !important;
background: transparent !important;
text-shadow: none !important;
}
.woocommerce-checkout .woocommerce-error li,
.woocommerce-checkout .woocommerce-message li,
.woocommerce-checkout .woocommerce-info li {
list-style: none !important;
margin: 0 !important;
}
/* Checkout header */
.triyaq-checkout-header {
margin-bottom: 28px;
}
.checkout-page-title {
font-family: var(--serif) !important;
font-size: clamp(38px, 5vw, 56px) !important;
font-weight: 500 !important;
color: var(--ink) !important;
margin: 0 0 10px !important;
line-height: 1.05 !important;
}
.checkout-breadcrumb {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--sans);
font-size: 13px;
color: var(--muted);
letter-spacing: 0.4px;
flex-wrap: wrap;
}
.checkout-breadcrumb a {
color: var(--muted) !important;
text-decoration: none !important;
transition: color 0.3s ease;
}
.checkout-breadcrumb a:hover {
color: var(--ink) !important;
}
.checkout-breadcrumb strong {
color: var(--gold-bright);
font-weight: 600;
}
.checkout-breadcrumb .bc-sep {
color: var(--muted);
opacity: 0.5;
}
.checkout-breadcrumb .bc-future {
opacity: 0.6;
}
/* Promo banner */
.triyaq-promo-banner {
margin: 0 0 22px;
padding: 14px 20px;
border-radius: 12px;
text-align: center;
font-family: var(--sans);
font-size: 13px;
line-height: 1.5;
background: #fff;
border: 1px solid var(--line);
color: var(--ink);
}
.triyaq-promo-banner.is-progress {
background: linear-gradient(135deg, #fff, var(--cream-soft));
border-color: var(--line);
}
.triyaq-promo-banner.is-active {
background: linear-gradient(135deg, #fdf6e3, var(--gold-soft));
border-color: var(--gold);
}
.triyaq-promo-banner.is-success {
background: linear-gradient(135deg, var(--gold-soft), #fdf6e3);
border-color: var(--gold);
box-shadow: 0 6px 20px rgba(206, 163, 72, 0.15);
}
.triyaq-promo-banner strong {
color: var(--gold-bright);
font-weight: 700;
}
.triyaq-promo-banner .banner-icon {
margin-right: 4px;
}
.triyaq-promo-banner .banner-highlight {
color: var(--gold-bright);
font-weight: 600;
}
/* Section cards */
.checkout-section {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
margin-bottom: 16px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.section-header {
display: flex;
align-items: center;
gap: 14px;
padding: 22px 26px 6px;
}
.section-number {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--gold-bright);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
line-height: 1;
}
.section-header h2 {
font-family: var(--serif) !important;
font-size: clamp(18px, 2.2vw, 22px) !important;
color: var(--ink) !important;
margin: 0 !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
.section-body {
padding: 18px 26px 26px;
}
.section-body-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
/* Form fields */
.triyaq-checkout-form .form-row {
margin: 0 !important;
padding: 0 !important;
position: relative;
}
.triyaq-checkout-form label {
display: block;
font-family: var(--sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--ink) !important;
letter-spacing: 1.2px !important;
text-transform: uppercase;
margin-bottom: 8px !important;
padding: 0 !important;
}
.triyaq-checkout-form label abbr.required {
color: var(--gold-bright);
text-decoration: none;
font-size: 13px;
margin-left: 2px;
}
.triyaq-checkout-form label .opt-label {
color: var(--muted);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.3px;
text-transform: none;
margin-left: 4px;
}
.triyaq-checkout-form input[type="text"],
.triyaq-checkout-form input[type="email"],
.triyaq-checkout-form input[type="tel"],
.triyaq-checkout-form input[type="number"],
.triyaq-checkout-form textarea,
.triyaq-checkout-form select {
width: 100% !important;
padding: 14px 18px !important;
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
font-family: var(--sans) !important;
font-size: 14px !important;
color: var(--ink) !important;
box-shadow: none !important;
outline: none !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
line-height: 1.4 !important;
margin: 0 !important;
height: auto !important;
min-height: 48px !important;
box-sizing: border-box;
}
.triyaq-checkout-form input:focus,
.triyaq-checkout-form textarea:focus,
.triyaq-checkout-form select:focus {
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px var(--gold-soft) !important;
}
.triyaq-checkout-form input::placeholder,
.triyaq-checkout-form textarea::placeholder {
color: var(--muted);
opacity: 1;
}
.triyaq-checkout-form textarea {
min-height: 90px !important;
resize: vertical;
font-family: var(--sans) !important;
line-height: 1.6 !important;
}
.select-wrap {
position: relative;
}
.triyaq-checkout-form select.triyaq-select {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
padding-right: 44px !important;
cursor: pointer;
background-image: none !important;
}
.select-arrow {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
color: var(--muted);
pointer-events: none;
display: inline-flex;
align-items: center;
}
.select-arrow svg {
width: 16px;
height: 16px;
}
.field-hint {
display: block;
margin-top: 6px;
font-family: var(--sans);
font-size: 11px;
color: var(--muted);
letter-spacing: 0.2px;
}
.address-help {
display: flex;
gap: 10px;
margin-top: 10px;
padding: 12px 14px;
background: var(--cream-soft);
border: 1px solid var(--gold-soft);
border-radius: 10px;
font-family: var(--sans);
font-size: 12px;
line-height: 1.6;
color: var(--ink-soft);
}
.address-help .help-icon {
flex-shrink: 0;
color: var(--gold-bright);
display: inline-flex;
align-items: flex-start;
padding-top: 1px;
}
.address-help .help-icon svg {
width: 16px;
height: 16px;
}
.address-help .help-text strong {
color: var(--gold-bright);
font-weight: 600;
}
.address-help em {
background: #fff;
padding: 1px 6px;
border-radius: 4px;
font-style: normal;
font-weight: 600;
color: var(--ink);
}
/* Phone input with prefix */
.phone-input-group {
display: flex;
align-items: stretch;
background: #fff;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.phone-input-group:focus-within {
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-soft);
}
.phone-prefix {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 0 14px;
background: var(--cream-soft);
border-right: 1px solid var(--line);
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
font-weight: 500;
}
.flag-eg {
width: 24px;
height: 16px;
border-radius: 3px;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.flag-eg svg {
width: 100%;
height: 100%;
display: block;
}
.prefix-code {
font-weight: 600;
letter-spacing: 0.3px;
}
.phone-input-group input[type="tel"] {
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
flex: 1;
min-width: 0;
}
.phone-input-group input[type="tel"]:focus {
box-shadow: none !important;
}
/* Payment option cards */
.triyaq-payment-options {
display: flex;
flex-direction: column;
gap: 12px;
}
.payment-option-card {
display: flex;
align-items: center;
gap: 16px;
padding: 30px 35px;
background: #fff;
border: 1.5px solid var(--line);
border-radius: 14px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.payment-option-card:hover {
border-color: var(--gold);
background: linear-gradient(135deg, #fff, var(--cream-soft));
}
.payment-option-card.is-selected {
border-color: var(--gold-bright);
background: linear-gradient(135deg, #fff, var(--gold-soft));
box-shadow: 0 6px 18px rgba(206, 163, 72, 0.12);
}
.payment-option-card input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.option-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 10px;
background: var(--cream-soft);
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.option-icon svg {
width: 24px;
height: 24px;
}
.payment-option-card.is-selected .option-icon {
background: var(--gold-bright);
color: #fff;
}
.option-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.option-text strong {
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.2px;
}
.option-text span {
font-family: var(--sans);
font-size: 12px;
color: var(--muted);
letter-spacing: 0.2px;
}
.option-radio {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
background: #fff;
}
.payment-option-card.is-selected .option-radio {
border-color: var(--gold-bright);
}
.payment-option-card.is-selected .option-radio::after {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gold-bright);
}
/* Order review */
.triyaq-order-review #payment {
display: none !important;
}
.triyaq-order-review table.shop_table {
border: none !important;
border-collapse: collapse !important;
width: 100% !important;
margin: 0 !important;
background: transparent !important;
}
.triyaq-order-review table.shop_table thead {
display: none;
}
.triyaq-order-review table.shop_table th,
.triyaq-order-review table.shop_table td {
border: none !important;
padding: 14px 0 !important;
background: transparent !important;
font-family: var(--sans) !important;
font-size: 14px !important;
color: var(--ink) !important;
vertical-align: middle !important;
}
.triyaq-order-review table.shop_table tbody tr {
border-bottom: 1px solid var(--line);
}
.triyaq-order-review table.shop_table tbody tr:last-child {
border-bottom: 1px solid var(--line);
}
.triyaq-order-review .cart_item .product-name {
font-family: var(--serif) !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(--ink) !important;
}
.triyaq-order-review .cart_item .product-name .product-quantity {
font-family: var(--sans) !important;
font-size: 12px !important;
color: var(--muted) !important;
margin-left: 6px;
font-weight: 400 !important;
}
.triyaq-order-review .cart_item .product-total {
text-align: right !important;
font-weight: 600 !important;
color: var(--ink) !important;
}
.triyaq-order-review tfoot tr th {
color: var(--muted) !important;
font-weight: 400 !important;
text-align: left !important;
padding: 10px 0 !important;
}
.triyaq-order-review tfoot tr td {
text-align: right !important;
font-weight: 500 !important;
padding: 10px 0 !important;
}
.triyaq-order-review tfoot tr.order-total th {
font-family: var(--serif) !important;
font-size: 18px !important;
color: var(--ink) !important;
font-weight: 500 !important;
}
.triyaq-order-review tfoot tr.order-total td {
font-size: 20px !important;
font-weight: 700 !important;
color: var(--gold-bright) !important;
}
.triyaq-order-review tfoot tr.shipping td {
color: var(--gold-bright) !important;
font-weight: 600 !important;
}
.triyaq-order-review tfoot tr.cart-discount td {
color: #d8474a !important;
font-weight: 600 !important;
}
.triyaq-order-review tfoot tr.fee th {
color: var(--gold-bright) !important;
font-weight: 500 !important;
}
.triyaq-order-review tfoot tr.fee td {
color: #d8474a !important;
font-weight: 600 !important;
}
.triyaq-order-review ul#shipping_method {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.triyaq-order-review ul#shipping_method li {
list-style: none !important;
margin: 0 !important;
}
.triyaq-order-review ul#shipping_method input[type="radio"] {
display: none;
}
.triyaq-order-review ul#shipping_method label {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
font-family: var(--sans) !important;
font-size: 13px !important;
color: var(--gold-bright) !important;
font-weight: 600 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* CTA block */
.checkout-cta-block {
margin-top: 22px;
padding: 22px 26px;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-sm);
}
.checkout-friendly-msg {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border: 1px solid #86efac;
border-radius: 12px;
margin-bottom: 18px;
font-family: var(--sans);
font-size: 13px;
line-height: 1.5;
color: #166534;
}
.checkout-friendly-msg .msg-icon {
flex-shrink: 0;
color: #25D366;
display: inline-flex;
align-items: center;
}
.checkout-friendly-msg .msg-icon svg {
width: 22px;
height: 22px;
}
.checkout-friendly-msg .msg-text {
flex: 1;
}
.checkout-place-order-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px;
width: 100% !important;
background: var(--gold-bright) !important;
color: #fff !important;
border: none !important;
border-radius: 14px !important;
padding: 18px 28px !important;
font-family: var(--sans) !important;
font-size: 13px !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.4s ease !important;
box-shadow: 0 10px 26px rgba(184, 144, 47, 0.32) !important;
text-shadow: none !important;
line-height: 1.3 !important;
margin: 0 !important;
}
.checkout-place-order-btn:hover {
background: var(--ink) !important;
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22) !important;
}
.checkout-place-order-btn .btn-lock {
display: inline-flex;
align-items: center;
}
.checkout-place-order-btn .btn-lock svg {
width: 18px;
height: 18px;
}
.checkout-place-order-btn .btn-label {
line-height: 1.3;
}
/* Trust badges bottom row */
.checkout-trust-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 22px;
padding: 22px 26px;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-sm);
}
.trust-badge {
display: flex;
align-items: center;
gap: 14px;
padding: 0 12px;
border-right: 1px solid var(--line);
}
.trust-badge:last-child {
border-right: none;
}
.trust-badge .trust-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
color: var(--gold-bright);
display: inline-flex;
align-items: center;
justify-content: center;
}
.trust-badge .trust-icon svg {
width: 26px;
height: 26px;
}
.trust-badge .trust-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.trust-badge .trust-text strong {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
color: var(--ink);
letter-spacing: 1.2px;
text-transform: uppercase;
}
.trust-badge .trust-text span {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.2px;
}
/* Thank you page */
.triyaq-thankyou-wrapper {
background: var(--cream);
min-height: 70vh;
padding: 40px 5% 80px;
}
.triyaq-thankyou-card {
max-width: 720px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
padding: 50px 40px;
text-align: center;
box-shadow: var(--shadow-md);
}
.thankyou-stage {
position: relative;
width: 180px;
height: 180px;
margin: 0 auto 24px;
display: flex;
align-items: center;
justify-content: center;
}
.thankyou-arch {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 150px;
height: 170px;
border: 2px solid var(--gold);
border-radius: 75px 75px 0 0;
background: linear-gradient(180deg, transparent, rgba(206, 163, 72, 0.05));
z-index: 1;
}
.thankyou-arch::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid var(--gold);
border-radius: 70px 70px 0 0;
opacity: 0.4;
}
.thankyou-icon-wa {
position: relative;
z-index: 2;
width: 76px;
height: 76px;
border-radius: 50%;
background: #25D366;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35);
}
.thankyou-icon-wa svg {
width: 44px;
height: 44px;
}
.thankyou-eyebrow {
display: block;
color: var(--gold-bright);
font-family: var(--sans);
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 16px;
}
.thankyou-title {
font-family: var(--serif) !important;
font-size: clamp(26px, 3.5vw, 38px) !important;
color: var(--ink) !important;
margin: 0 0 18px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
.thankyou-intro {
color: var(--ink-soft);
font-size: 15px;
line-height: 1.8;
margin: 0 0 28px;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
.thankyou-steps {
list-style: none !important;
margin: 0 0 22px !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 460px;
margin-left: auto !important;
margin-right: auto !important;
}
.thankyou-steps li {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: var(--cream-soft);
border-radius: 12px;
text-align: left;
list-style: none !important;
}
.thankyou-steps .step-num {
flex-shrink: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--gold-bright);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
}
.thankyou-steps .step-text {
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
}
.thankyou-after {
color: var(--muted);
font-size: 13px;
line-height: 1.7;
margin: 0 0 28px;
font-style: italic;
}
.thankyou-wa-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px;
background: #25D366 !important;
color: #fff !important;
padding: 18px 36px !important;
border-radius: 14px !important;
font-family: var(--sans) !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
box-shadow: 0 12px 28px rgba(37, 211, 102, 0.35) !important;
}
.thankyou-wa-btn:hover {
background: #1ebe5d !important;
transform: translateY(-2px) !important;
box-shadow: 0 16px 36px rgba(37, 211, 102, 0.45) !important;
}
.thankyou-wa-btn svg {
width: 22px;
height: 22px;
}
.thankyou-countdown {
margin-top: 18px;
font-family: var(--sans);
font-size: 13px;
color: var(--muted);
}
.thankyou-countdown strong {
color: var(--gold-bright);
font-weight: 700;
font-size: 15px;
}
.thankyou-order-details {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid var(--line);
text-align: left;
}
.thankyou-order-details h3 {
font-family: var(--serif) !important;
font-size: 20px !important;
color: var(--ink) !important;
margin: 0 0 16px !important;
font-weight: 500 !important;
text-align: center;
}
.order-detail-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 0;
border-bottom: 1px solid var(--line);
font-family: var(--sans);
font-size: 14px;
}
.order-detail-row:last-child {
border-bottom: none;
}
.order-detail-row span {
color: var(--muted);
letter-spacing: 0.3px;
}
.order-detail-row strong {
color: var(--ink);
font-weight: 600;
}
.order-detail-row strong.detail-gold {
color: var(--gold-bright);
font-weight: 700;
font-size: 16px;
}
.triyaq-thankyou-failed {
max-width: 600px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 40px;
text-align: center;
}
.triyaq-thankyou-failed h2 {
font-family: var(--serif) !important;
color: var(--ink) !important;
margin: 0 0 12px !important;
}
.triyaq-thankyou-failed p {
color: var(--muted);
margin: 0 0 18px;
}
.triyaq-thankyou-failed .button {
background: var(--gold-bright) !important;
color: #fff !important;
border-radius: 30px !important;
padding: 12px 24px !important;
}
/* Checkout responsive */
@media (max-width: 900px) {
.triyaq-checkout-wrapper {
padding: 24px 14px 50px;
}
.checkout-page-title {
font-size: 34px !important;
}
.checkout-breadcrumb {
font-size: 12px;
gap: 8px;
}
.triyaq-promo-banner {
font-size: 12px;
padding: 12px 16px;
}
.section-header {
padding: 18px 20px 4px;
gap: 12px;
}
.section-header h2 {
font-size: 17px !important;
}
.section-number {
width: 26px;
height: 26px;
font-size: 12px;
}
.section-body {
padding: 14px 20px 22px;
}
.section-body-grid {
gap: 14px;
}
.triyaq-checkout-form input,
.triyaq-checkout-form textarea,
.triyaq-checkout-form select {
padding: 12px 16px !important;
font-size: 14px !important;
}
.phone-prefix {
padding: 0 12px;
font-size: 13px;
gap: 6px;
}
.flag-eg {
width: 22px;
height: 14px;
}
.payment-option-card {
padding: 20px 25px;
gap: 12px;
}
.option-icon {
width: 40px;
height: 40px;
}
.option-icon svg {
width: 22px;
height: 22px;
}
.option-text strong {
font-size: 14px;
}
.option-text span {
font-size: 11px;
}
.checkout-cta-block {
padding: 18px 20px;
}
.checkout-friendly-msg {
padding: 12px 14px;
font-size: 12px;
}
.checkout-friendly-msg .msg-icon svg {
width: 20px;
height: 20px;
}
.checkout-place-order-btn {
padding: 16px 22px !important;
font-size: 12px !important;
letter-spacing: 1.8px !important;
}
.checkout-place-order-btn .btn-label {
font-size: 12px;
}
.checkout-trust-row {
grid-template-columns: 1fr;
gap: 16px;
padding: 18px 22px;
}
.trust-badge {
border-right: none;
border-bottom: 1px solid var(--line);
padding: 0 0 14px;
}
.trust-badge:last-child {
border-bottom: none;
padding-bottom: 0;
}
.triyaq-thankyou-wrapper {
padding: 24px 14px 50px;
}
.triyaq-thankyou-card {
padding: 36px 24px;
border-radius: 16px;
}
.thankyou-stage {
width: 140px;
height: 140px;
}
.thankyou-arch {
width: 120px;
height: 130px;
border-radius: 60px 60px 0 0;
}
.thankyou-arch::before {
border-radius: 55px 55px 0 0;
}
.thankyou-icon-wa {
width: 62px;
height: 62px;
}
.thankyou-icon-wa svg {
width: 36px;
height: 36px;
}
.thankyou-title {
font-size: 24px !important;
}
.thankyou-intro {
font-size: 14px;
}
.thankyou-wa-btn {
width: 100%;
padding: 16px 22px !important;
font-size: 13px !important;
letter-spacing: 1px !important;
}
.thankyou-steps li {
padding: 12px 14px;
}
.thankyou-steps .step-num {
width: 26px;
height: 26px;
font-size: 12px;
}
.thankyou-steps .step-text {
font-size: 13px;
}
}
@media (max-width: 480px) {
.checkout-page-title {
font-size: 28px !important;
}
.section-header {
padding: 16px 16px 2px;
}
.section-body {
padding: 12px 16px 18px;
}
.checkout-cta-block {
padding: 16px;
}
.checkout-place-order-btn {
padding: 14px 18px !important;
font-size: 11px !important;
letter-spacing: 1.4px !important;
}
.thankyou-title {
font-size: 22px !important;
}
.triyaq-thankyou-card {
padding: 28px 18px;
}
}
/* إزالة الإطار البنفسجي عند الضغط على أي عنصر */
*:focus,
*:active {
outline: none !important;
box-shadow: none !important;
}
/* استثناء: إبقاء إطار مرئي لمن يستخدم لوحة المفاتيح (accessibility) */
*:focus-visible {
outline: 2px solid var(--gold-bright) !important;
outline-offset: 2px !important;
border-radius: 4px;
}
/* ============================================
TOAST NOTIFICATION STYLES
============================================ */
.triyaq-toast {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 99999;
background: var(--ink);
color: #fff;
padding: 14px 24px;
border-radius: 50px;
font-family: var(--sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.5px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
gap: 12px;
transform: translateX(120%);
transition: transform 0.3s ease;
pointer-events: none;
}
.triyaq-toast.show {
transform: translateX(0);
}
.triyaq-toast .toast-icon {
width: 20px;
height: 20px;
background: #25D366;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.triyaq-toast .toast-icon svg {
width: 14px;
height: 14px;
fill: #fff;
}
.triyaq-toast .toast-message {
flex: 1;
}
@media (max-width: 600px) {
.triyaq-toast {
bottom: 20px;
right: 20px;
left: 20px;
padding: 12px 18px;
font-size: 12px;
border-radius: 40px;
transform: translateY(120%);
}
.triyaq-toast.show {
transform: translateY(0);
}
}
/* Force gold color for add to cart button on all devices */
.triyaq-add-btn {
background: var(--gold-bright) !important;
transition: all 0.4s ease !important;
}
.triyaq-add-btn:hover {
background: var(--ink) !important;
}
.triyaq-add-btn.loading,
.triyaq-add-btn.disabled,
.triyaq-add-btn.added {
background: var(--ink) !important;
}
/* Override any inline styles that might appear */
.triyaq-add-btn[style*="background"] {
background: var(--gold-bright) !important;
}
/* ============================================
TRIYAQ — MY ACCOUNT PAGE
v1.0 — Append to end of style.css
============================================ */
/* Reset WC/Storefront defaults */
.woocommerce-account #content,
.woocommerce-account .col-full {
max-width: 100% !important;
padding: 0 !important;
}
.woocommerce-account .woocommerce {
max-width: 100% !important;
margin: 0 !important;
}
.woocommerce-account .woocommerce-breadcrumb,
.woocommerce-account h1.entry-title,
.woocommerce-account .page-title { display: none !important; }
/* ============================================
WRAPPER
============================================ */
.triyaq-account-wrapper {
background: var(--cream);
max-width: 1280px;
margin: 0 auto;
padding: 40px 5% 50px;
}
/* WC notices on account pages */
.woocommerce-account .woocommerce-notices-wrapper > * {
border-top-color: var(--gold-bright) !important;
background: #fff !important;
border-radius: 12px !important;
margin: 0 0 22px !important;
padding: 16px 22px !important;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
list-style: none !important;
}
.woocommerce-account .woocommerce-notices-wrapper .button {
background: var(--ink) !important;
color: #fff !important;
border-radius: 30px !important;
padding: 8px 18px !important;
font-size: 12px !important;
letter-spacing: 2px;
text-transform: uppercase;
}
/* ============================================
HEADER
============================================ */
.triyaq-account-header {
margin-bottom: 30px;
}
.account-page-title {
font-family: var(--serif) !important;
font-size: clamp(38px, 5vw, 56px) !important;
font-weight: 500 !important;
color: var(--ink) !important;
margin: 0 0 10px !important;
line-height: 1.05 !important;
}
.account-welcome {
font-family: var(--sans);
color: var(--muted);
font-size: 15px;
margin: 0;
letter-spacing: 0.3px;
}
.welcome-name {
color: var(--gold-bright);
font-weight: 600;
}
/* ============================================
LAYOUT — sidebar + content
============================================ */
.triyaq-account-layout {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 30px;
align-items: start;
}
/* ============================================
SIDEBAR (.woocommerce-MyAccount-navigation)
============================================ */
.triyaq-account-sidebar {
background: #fff;
border-radius: 18px;
padding: 14px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--line);
position: sticky;
top: 20px;
}
.triyaq-account-sidebar ul,
.woocommerce-MyAccount-navigation ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 2px;
}
.triyaq-account-sidebar li,
.woocommerce-MyAccount-navigation li {
list-style: none !important;
margin: 0 !important;
}
.triyaq-account-sidebar li::before,
.woocommerce-MyAccount-navigation li::before { display: none !important; }
.triyaq-account-sidebar li a,
.woocommerce-MyAccount-navigation li a {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 13px 16px !important;
border-radius: 10px;
color: var(--ink) !important;
font-family: var(--sans) !important;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
text-decoration: none !important;
transition: all 0.3s ease;
border-bottom: none !important;
position: relative;
}
.triyaq-account-sidebar li a:hover,
.woocommerce-MyAccount-navigation li a:hover {
background: var(--cream-soft);
color: var(--gold-bright) !important;
}
.triyaq-account-sidebar li.is-active a,
.woocommerce-MyAccount-navigation li.is-active a {
background: linear-gradient(135deg, var(--gold-soft), var(--cream-soft));
color: var(--gold-bright) !important;
font-weight: 600;
}
.triyaq-account-sidebar li.is-active a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: var(--gold-bright);
border-radius: 0 3px 3px 0;
}
.triyaq-account-sidebar .nav-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
}
.triyaq-account-sidebar .nav-icon svg { width: 100%; height: 100%; }
.triyaq-account-sidebar .nav-label { flex: 1; min-width: 0; }
/* Special styling for logout item */
.woocommerce-MyAccount-navigation-link--customer-logout a {
margin-top: 8px;
border-top: 1px solid var(--line);
border-radius: 0 !important;
color: var(--muted) !important;
}
.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
color: #d8474a !important;
background: transparent !important;
}
/* ============================================
CONTENT AREA
============================================ */
.triyaq-account-content {
min-width: 0;
}
/* ============================================
DASHBOARD — STATS CARDS
============================================ */
.triyaq-dashboard {
display: flex;
flex-direction: column;
gap: 22px;
}
.account-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 28px 18px;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-sm);
text-align: center;
text-decoration: none !important;
transition: all 0.3s ease;
color: var(--ink) !important;
min-height: 130px;
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--gold);
}
.stat-icon {
color: var(--gold-bright);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.stat-icon svg { width: 30px; height: 30px; }
.stat-value {
font-family: var(--serif) !important;
font-size: 30px;
font-weight: 600;
color: var(--ink) !important;
line-height: 1;
letter-spacing: -0.5px;
}
.stat-value .woocommerce-Price-currencySymbol {
font-size: 0.7em;
margin-right: 2px;
opacity: 0.85;
color: var(--gold-bright);
}
.stat-card .stat-value bdi {
color: var(--gold-bright);
}
.stat-label {
font-family: var(--sans);
font-size: 11px;
color: var(--muted);
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
margin-top: 2px;
}
.stat-card.is-pending .stat-value { color: var(--gold-bright) !important; }
.stat-card--gold {
background: linear-gradient(135deg, #fff, var(--cream-soft));
border-color: var(--gold);
}
/* ============================================
DASHBOARD SECTIONS (cards)
============================================ */
.dashboard-section {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 26px 4px;
gap: 14px;
}
.section-head h2 {
font-family: var(--serif) !important;
font-size: clamp(20px, 2.5vw, 24px) !important;
color: var(--ink) !important;
margin: 0 !important;
font-weight: 500 !important;
line-height: 1.2 !important;
}
.section-action {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gold-bright) !important;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
text-decoration: none !important;
transition: gap 0.3s ease;
}
.section-action svg { width: 12px; height: 12px; }
.section-action:hover { gap: 10px; }
/* ============================================
ORDERS LIST (dashboard + orders page)
============================================ */
.orders-list {
padding: 8px 26px 22px;
display: flex;
flex-direction: column;
}
.order-row {
display: grid;
grid-template-columns: 60px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 24px;
align-items: center;
gap: 18px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
text-decoration: none !important;
transition: background 0.25s ease;
}
.order-row:last-child { border-bottom: none; }
.order-row:hover { background: var(--cream-soft); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.order-img {
width: 60px;
height: 70px;
background: var(--cream-soft);
border-radius: 10px;
overflow: hidden;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.order-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.order-info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.order-number {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.2px;
}
.order-product {
font-family: var(--sans);
font-size: 12px;
color: var(--muted);
}
.order-status {
display: inline-block;
align-self: flex-start;
padding: 3px 10px;
border-radius: 20px;
font-family: var(--sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 4px;
}
.order-status.status-completed { background: #d1fae5; color: #047857; }
.order-status.status-processing { background: #dbeafe; color: #1e40af; }
.order-status.status-on-hold { background: #fef3c7; color: #92400e; }
.order-status.status-pending { background: #fef3c7; color: #92400e; }
.order-status.status-cancelled { background: #fee2e2; color: #991b1b; }
.order-status.status-refunded { background: #f3e8ff; color: #6b21a8; }
.order-status.status-failed { background: #fee2e2; color: #991b1b; }
.order-date {
font-family: var(--sans);
font-size: 13px;
color: var(--muted);
text-align: right;
}
.order-total {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--gold-bright);
text-align: right;
}
.order-arrow {
color: var(--muted);
display: flex;
align-items: center;
justify-content: flex-end;
}
.order-arrow svg {
width: 16px;
height: 16px;
transform: rotate(180deg);
}
/* ============================================
ACCOUNT DETAILS LIST
============================================ */
.account-details-list {
padding: 8px 26px 22px;
}
.detail-row {
display: grid;
grid-template-columns: 24px 80px minmax(0, 1fr) 60px;
align-items: center;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.detail-row:last-child { border-bottom: none; }
.detail-icon {
color: var(--muted);
display: inline-flex;
align-items: center;
}
.detail-icon svg { width: 18px; height: 18px; }
.detail-label {
font-family: var(--sans);
font-size: 12px;
color: var(--muted);
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 500;
}
.detail-value {
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.detail-value .not-set {
color: var(--muted);
font-style: italic;
font-weight: 400;
font-size: 13px;
}
.detail-edit {
color: var(--gold-bright) !important;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
text-align: right;
text-decoration: none !important;
transition: color 0.3s ease;
}
.detail-edit:hover { color: var(--ink) !important; }
/* ============================================
ADDRESS CARD
============================================ */
.address-card {
margin: 8px 26px 22px;
padding: 22px 24px;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: 14px;
position: relative;
}
.address-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px;
height: 100%;
background: var(--gold-bright);
border-radius: 4px 0 0 4px;
}
.address-card-body p {
font-family: var(--sans);
margin: 0 0 4px;
font-size: 14px;
color: var(--ink);
line-height: 1.6;
}
.address-card-body .addr-name {
font-weight: 600;
font-size: 15px;
color: var(--ink);
margin-bottom: 8px;
}
.address-card-body .addr-line {
color: var(--ink-soft);
font-size: 13px;
}
.address-card-body .addr-phone {
margin-top: 10px;
color: var(--gold-bright);
font-weight: 500;
font-size: 13px;
}
.address-card-body .addr-phone-2 {
margin-top: 2px;
color: var(--muted);
font-size: 12px;
}
.address-card-body .addr-phone-2 span {
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1.2px;
margin-right: 4px;
}
/* ============================================
EMPTY STATES
============================================ */
.empty-state {
padding: 40px 26px;
text-align: center;
}
.empty-state .empty-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--cream-soft);
color: var(--gold-bright);
margin-bottom: 16px;
}
.empty-state .empty-icon svg { width: 32px; height: 32px; }
.empty-state h3 {
font-family: var(--serif) !important;
font-size: 20px !important;
color: var(--ink) !important;
margin: 0 0 8px !important;
font-weight: 500 !important;
}
.empty-state p {
color: var(--muted);
font-size: 14px;
margin: 0 0 22px;
line-height: 1.6;
}
.empty-cta,
.address-empty .empty-cta {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 14px 32px !important;
background: var(--gold-bright) !important;
color: #fff !important;
border-radius: 30px !important;
font-family: var(--sans);
font-size: 12px !important;
letter-spacing: 2.5px !important;
text-transform: uppercase;
font-weight: 600;
text-decoration: none !important;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(184,144,47,0.3);
border: none !important;
}
.empty-cta:hover,
.address-empty .empty-cta:hover {
background: var(--ink) !important;
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}
.address-empty {
padding: 36px 26px;
text-align: center;
}
/* ============================================
FORM PAGES (Profile / Address edit)
============================================ */
.triyaq-edit-account-page,
.triyaq-edit-address-page,
.triyaq-orders-page {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-sm);
padding: 30px 32px;
}
.page-section-head {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--line);
}
.page-section-head h2 {
font-family: var(--serif) !important;
font-size: clamp(22px, 2.8vw, 28px) !important;
color: var(--ink) !important;
margin: 0 0 4px !important;
font-weight: 500 !important;
}
.page-section-head p {
color: var(--muted);
font-size: 13px;
margin: 0;
}
.triyaq-edit-form .form-section,
.triyaq-edit-address-form .form-section {
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.form-section-title {
font-family: var(--sans) !important;
font-size: 12px !important;
color: var(--ink) !important;
margin: 16px 0 8px !important;
font-weight: 600 !important;
letter-spacing: 2px;
text-transform: uppercase;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.form-section-title:first-child { margin-top: 0 !important; }
.form-section-hint {
text-transform: none;
letter-spacing: 0.3px;
color: var(--muted);
font-size: 11px;
font-weight: 400;
margin-left: 6px;
}
/* Form inputs (reuse checkout styling — same look) */
.triyaq-edit-form .form-row,
.triyaq-edit-address-form .form-row {
margin: 0 !important;
padding: 0 !important;
}
.triyaq-edit-form label,
.triyaq-edit-address-form label {
display: block;
font-family: var(--sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--ink) !important;
letter-spacing: 1.2px !important;
text-transform: uppercase;
margin-bottom: 8px !important;
padding: 0 !important;
}
.triyaq-edit-form label abbr.required,
.triyaq-edit-address-form label abbr.required {
color: var(--gold-bright);
text-decoration: none;
font-size: 13px;
margin-left: 2px;
}
.triyaq-edit-form input[type="text"],
.triyaq-edit-form input[type="email"],
.triyaq-edit-form input[type="tel"],
.triyaq-edit-form input[type="password"],
.triyaq-edit-form textarea,
.triyaq-edit-form select,
.triyaq-edit-address-form input[type="text"],
.triyaq-edit-address-form input[type="email"],
.triyaq-edit-address-form input[type="tel"],
.triyaq-edit-address-form textarea,
.triyaq-edit-address-form select {
width: 100% !important;
padding: 14px 18px !important;
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
font-family: var(--sans) !important;
font-size: 14px !important;
color: var(--ink) !important;
box-shadow: none !important;
outline: none !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
line-height: 1.4 !important;
margin: 0 !important;
min-height: 48px !important;
box-sizing: border-box;
}
.triyaq-edit-form input:focus,
.triyaq-edit-form textarea:focus,
.triyaq-edit-form select:focus,
.triyaq-edit-address-form input:focus,
.triyaq-edit-address-form textarea:focus,
.triyaq-edit-address-form select:focus {
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px var(--gold-soft) !important;
}
.triyaq-edit-form input::placeholder,
.triyaq-edit-form textarea::placeholder,
.triyaq-edit-address-form input::placeholder,
.triyaq-edit-address-form textarea::placeholder {
color: var(--muted);
opacity: 1;
}
.triyaq-edit-address-form textarea {
min-height: 90px !important;
resize: vertical;
}
/* Phone wrap reuses checkout styles — same .phone-input-group/.phone-prefix already exists */
/* Form submit button */
.form-actions {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.triyaq-form-submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--gold-bright) !important;
color: #fff !important;
border: none !important;
border-radius: 30px !important;
padding: 14px 40px !important;
font-family: var(--sans) !important;
font-size: 12px !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 8px 20px rgba(184,144,47,0.3) !important;
text-shadow: none !important;
}
.triyaq-form-submit:hover {
background: var(--ink) !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 26px rgba(0,0,0,0.18) !important;
}
/* ============================================
ORDERS PAGE — Pagination
============================================ */
.triyaq-orders-pagination {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
padding: 20px 0 0;
border-top: 1px solid var(--line);
gap: 10px;
}
.pagination-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
background: var(--cream-soft);
color: var(--ink) !important;
border: 1px solid var(--line);
border-radius: 30px;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 500;
text-decoration: none !important;
transition: all 0.3s ease;
}
.pagination-btn:hover {
background: var(--gold-bright);
color: #fff !important;
border-color: var(--gold-bright);
}
.pagination-btn svg { width: 14px; height: 14px; }
.pagination-info {
font-family: var(--sans);
font-size: 13px;
color: var(--muted);
}
/* ============================================
LOGIN / REGISTER PAGE
============================================ */
.triyaq-auth-wrapper {
max-width: 1000px;
}
.triyaq-auth-header {
text-align: center;
margin-bottom: 36px;
}
.auth-eyebrow {
display: block;
color: var(--gold-bright);
font-family: var(--sans);
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
font-weight: 500;
margin-bottom: 16px;
}
.auth-title {
font-family: var(--serif) !important;
font-size: clamp(40px, 5.5vw, 56px) !important;
color: var(--ink) !important;
margin: 0 0 12px !important;
font-weight: 500 !important;
line-height: 1.05 !important;
}
.auth-subtitle {
font-family: var(--sans);
color: var(--muted);
font-size: 15px;
margin: 0 auto;
max-width: 500px;
line-height: 1.7;
}
.triyaq-auth-grid {
display: grid;
grid-template-columns: minmax(0, 480px);
justify-content: center;
gap: 24px;
}
.triyaq-auth-grid.has-register {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.triyaq-auth-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 32px 30px;
box-shadow: var(--shadow-sm);
}
.auth-card-title {
font-family: var(--serif) !important;
font-size: 26px !important;
color: var(--ink) !important;
margin: 0 0 22px !important;
font-weight: 500 !important;
font-style: italic;
}
.triyaq-auth-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.triyaq-auth-form .form-row {
margin: 0 !important;
padding: 0 !important;
}
.triyaq-auth-form label {
display: block;
font-family: var(--sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--ink) !important;
letter-spacing: 1.2px !important;
text-transform: uppercase;
margin-bottom: 8px !important;
padding: 0 !important;
}
.triyaq-auth-form input[type="text"],
.triyaq-auth-form input[type="email"],
.triyaq-auth-form input[type="password"] {
width: 100% !important;
padding: 14px 18px !important;
background: #fff !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
font-family: var(--sans) !important;
font-size: 14px !important;
color: var(--ink) !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
min-height: 48px !important;
box-sizing: border-box;
}
.triyaq-auth-form input:focus {
border-color: var(--gold) !important;
box-shadow: 0 0 0 3px var(--gold-soft) !important;
}
.triyaq-auth-form input::placeholder { color: var(--muted); }
.auth-remember-row {
display: flex !important;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.auth-remember {
display: inline-flex !important;
align-items: center;
gap: 8px;
cursor: pointer;
font-family: var(--sans);
font-size: 13px !important;
color: var(--ink) !important;
letter-spacing: 0 !important;
text-transform: none !important;
font-weight: 400 !important;
margin: 0 !important;
}
.auth-remember-checkbox {
width: 16px;
height: 16px;
accent-color: var(--gold-bright);
}
.auth-lost-link {
color: var(--gold-bright) !important;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.5px;
text-decoration: none !important;
}
.auth-lost-link:hover { color: var(--ink) !important; }
.triyaq-auth-submit {
display: block !important;
width: 100% !important;
background: var(--gold-bright) !important;
color: #fff !important;
border: none !important;
border-radius: 30px !important;
padding: 16px 28px !important;
font-family: var(--sans) !important;
font-size: 12px !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 10px 26px rgba(184,144,47,0.32) !important;
margin-top: 6px !important;
}
.triyaq-auth-submit:hover {
background: var(--ink) !important;
transform: translateY(-2px) !important;
box-shadow: 0 14px 32px rgba(0,0,0,0.22) !important;
}
/* ============================================
TRUST BADGES (bottom row)
============================================ */
.triyaq-account-trust {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 30px;
padding: 22px 26px;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: var(--shadow-sm);
}
.triyaq-account-trust .trust-badge {
display: flex;
align-items: center;
gap: 14px;
padding: 0 12px;
border-right: 1px solid var(--line);
}
.triyaq-account-trust .trust-badge:last-child { border-right: none; }
.triyaq-account-trust .trust-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
color: var(--gold-bright);
display: inline-flex;
align-items: center;
justify-content: center;
}
.triyaq-account-trust .trust-icon svg { width: 26px; height: 26px; }
.triyaq-account-trust .trust-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.triyaq-account-trust .trust-text strong {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
color: var(--ink);
letter-spacing: 1.2px;
text-transform: uppercase;
}
.triyaq-account-trust .trust-text span {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.2px;
}
/* ============================================
RESPONSIVE — TABLET (≤1100px)
============================================ */
@media (max-width: 1100px) {
.triyaq-account-layout {
grid-template-columns: 200px minmax(0, 1fr);
gap: 22px;
}
.triyaq-account-trust { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.triyaq-account-trust .trust-badge { border-right: none; }
}
/* ============================================
RESPONSIVE — MOBILE (≤900px)
============================================ */
@media (max-width: 900px) {
.triyaq-account-wrapper { padding: 24px 14px 40px; }
.triyaq-account-header { margin-bottom: 22px; }
.account-page-title { font-size: 34px !important; }
.account-welcome { font-size: 14px; }
/* Stack layout: sidebar becomes horizontal pill scroll above content */
.triyaq-account-layout {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
.triyaq-account-sidebar {
position: static;
top: auto;
padding: 10px;
border-radius: 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.triyaq-account-sidebar::-webkit-scrollbar { display: none; }
.triyaq-account-sidebar ul {
flex-direction: row;
gap: 6px;
flex-wrap: nowrap;
min-width: max-content;
}
.triyaq-account-sidebar li a {
padding: 10px 16px !important;
white-space: nowrap;
font-size: 12px;
}
.triyaq-account-sidebar li.is-active a::before { display: none; }
.triyaq-account-sidebar .nav-icon { width: 16px; height: 16px; }
.woocommerce-MyAccount-navigation-link--customer-logout a {
margin-top: 0;
border-top: none;
border-left: 1px solid var(--line);
padding-left: 18px !important;
margin-left: 8px;
}
/* Stats: 2 cols on mobile (3rd full-width below) */
.account-stats-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.stat-card { min-height: 110px; padding: 20px 14px; }
.stat-card--gold { grid-column: 1 / -1; }
.stat-value { font-size: 26px; }
.stat-icon svg { width: 26px; height: 26px; }
.stat-label { font-size: 10px; letter-spacing: 1.5px; }
/* Sections */
.section-head { padding: 18px 18px 4px; }
.section-head h2 { font-size: 19px !important; }
.section-action { font-size: 11px; letter-spacing: 1px; }
/* Order rows */
.orders-list { padding: 6px 18px 18px; }
.order-row {
grid-template-columns: 50px minmax(0, 1fr) auto;
gap: 12px;
padding: 12px 0;
}
.order-row .order-img { width: 50px; height: 60px; padding: 3px; border-radius: 8px; }
.order-row .order-date { display: none; }
.order-row .order-info { gap: 2px; }
.order-row .order-number { font-size: 13px; }
.order-row .order-product { font-size: 11px; }
.order-row .order-status { font-size: 9px; padding: 2px 8px; }
.order-row .order-total {
text-align: right;
font-size: 13px;
align-self: start;
white-space: nowrap;
}
.order-row .order-arrow { display: none; }
.order-row:hover { margin: 0; padding-left: 0; padding-right: 0; }
/* Account details */
.account-details-list { padding: 6px 18px 18px; }
.detail-row {
grid-template-columns: 20px 1fr auto;
gap: 10px;
padding: 12px 0;
}
.detail-row .detail-label {
grid-column: 2;
font-size: 10px;
letter-spacing: 1px;
margin-bottom: 2px;
}
.detail-row .detail-value {
grid-column: 2;
grid-row: 2;
font-size: 13px;
}
.detail-row .detail-icon {
grid-row: 1 / 3;
}
.detail-row .detail-edit {
grid-row: 1 / 3;
font-size: 11px;
}
/* Address */
.address-card { margin: 6px 18px 18px; padding: 18px 20px; }
.address-card-body .addr-name { font-size: 14px; }
.address-card-body p { font-size: 13px; }
/* Form pages */
.triyaq-edit-account-page,
.triyaq-edit-address-page,
.triyaq-orders-page {
padding: 20px 18px;
border-radius: 14px;
}
.page-section-head h2 { font-size: 22px !important; }
/* Auth pages */
.triyaq-auth-header { margin-bottom: 28px; }
.auth-title { font-size: 34px !important; }
.auth-subtitle { font-size: 13px; }
.triyaq-auth-grid.has-register {
grid-template-columns: minmax(0, 1fr);
}
.triyaq-auth-card { padding: 24px 22px; border-radius: 14px; }
.auth-card-title { font-size: 22px !important; }
/* Trust badges */
.triyaq-account-trust {
grid-template-columns: 1fr;
gap: 14px;
padding: 18px 22px;
}
.triyaq-account-trust .trust-badge {
border-right: none;
border-bottom: 1px solid var(--line);
padding: 0 0 14px;
}
.triyaq-account-trust .trust-badge:last-child {
border-bottom: none;
padding-bottom: 0;
}
}
@media (max-width: 480px) {
.account-page-title { font-size: 28px !important; }
.account-stats-grid { gap: 8px; }
.stat-card { padding: 16px 10px; min-height: 100px; }
.stat-value { font-size: 22px; }
.stat-icon svg { width: 24px; height: 24px; }
.order-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
.order-row .order-img { width: 44px; height: 54px; }
.auth-title { font-size: 28px !important; }
}
/* ============================================
ACCOUNT — REVIEWS TAB
============================================ */
.triyaq-account-reviews {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 28px;
box-shadow: var(--shadow-sm);
}
.account-reviews-head { margin-bottom: 22px; }
.account-reviews-head h2 {
font-family: var(--serif) !important;
font-size: clamp(24px, 3vw, 32px) !important;
color: var(--ink) !important;
margin: 0 0 6px !important;
font-weight: 500 !important;
font-style: italic;
}
.account-reviews-sub {
color: var(--muted);
font-size: 14px;
margin: 0;
letter-spacing: 0.3px;
}
.reviews-pending-notice {
background: linear-gradient(135deg, #fdf6e3, var(--gold-soft));
border: 1px solid var(--gold);
border-radius: 12px;
padding: 14px 18px;
margin-bottom: 18px;
font-family: var(--sans);
font-size: 13px;
color: var(--ink);
}
.reviews-pending-notice strong { color: var(--gold-bright); }
/* Empty state (no reviews yet) */
.account-empty-state {
text-align: center;
padding: 50px 20px;
}
.account-empty-state .empty-icon {
color: var(--gold-bright);
opacity: 0.55;
margin-bottom: 16px;
}
.account-empty-state .empty-icon svg { width: 64px; height: 64px; }
.account-empty-state h3 {
font-family: var(--serif) !important;
font-size: 26px !important;
color: var(--ink) !important;
margin: 0 0 10px !important;
font-weight: 500 !important;
font-style: italic;
}
.account-empty-state p {
color: var(--muted);
font-size: 14px;
line-height: 1.7;
max-width: 380px;
margin: 0 auto 22px;
}
.empty-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--ink);
color: #fff !important;
border-radius: 60px;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
text-decoration: none !important;
transition: all 0.3s ease;
}
.empty-cta-btn:hover {
background: var(--gold-bright);
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(184,144,47,0.3);
}
/* Reviews list */
.account-reviews-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.account-review-card {
display: flex;
gap: 18px;
padding: 18px;
background: var(--cream-soft);
border: 1px solid var(--line);
border-radius: 14px;
transition: all 0.3s ease;
}
.account-review-card:hover {
border-color: var(--gold-soft);
box-shadow: var(--shadow-sm);
}
.review-product-thumb {
flex-shrink: 0;
width: 80px;
height: 100px;
border-radius: 10px;
background: #fff;
padding: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.review-product-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}
.review-content-area {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.review-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.review-product-name {
font-family: var(--serif) !important;
font-size: 18px !important;
color: var(--ink) !important;
margin: 0 0 4px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
.review-product-name a {
color: var(--ink) !important;
text-decoration: none !important;
transition: color 0.3s ease;
}
.review-product-name a:hover { color: var(--gold-bright) !important; }
.review-meta-date {
color: var(--muted);
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.3px;
}
.review-content-body {
color: var(--ink-soft);
font-family: var(--sans);
font-size: 14px;
line-height: 1.65;
}
.review-content-body p { margin: 0; }
.review-card-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
.review-action-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ink-soft) !important;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.4px;
text-decoration: none !important;
transition: color 0.3s ease;
}
.review-action-link svg { width: 14px; height: 14px; }
.review-action-link:hover { color: var(--gold-bright) !important; }
.review-action-link.review-action-delete:hover { color: #d8474a !important; }
/* ============================================
STAR DISPLAY (shared)
============================================ */
.stars-display {
display: inline-flex;
align-items: center;
gap: 1px;
color: var(--gold-bright);
font-size: 16px;
line-height: 1;
}
.stars-display .star { display: inline-block; }
.stars-display .star.is-full { color: var(--gold-bright); }
.stars-display .star.is-half { color: var(--gold-bright); opacity: 0.6; }
.stars-display .star.is-empty { color: rgba(0,0,0,0.15); }
/* ============================================
SINGLE PRODUCT — REVIEWS SECTION
============================================ */
.triyaq-single-reviews {
max-width: 1400px;
margin: 70px auto 0;
padding: 0 5%;
}
.reviews-section-header {
text-align: center;
margin-bottom: 36px;
}
.reviews-eyebrow {
display: block;
color: var(--gold-bright);
font-family: var(--sans);
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 14px;
font-weight: 500;
}
.reviews-section-header h2 {
font-family: var(--serif) !important;
font-size: clamp(28px, 3.5vw, 40px) !important;
color: var(--ink) !important;
margin: 0 0 18px !important;
font-weight: 500 !important;
font-style: italic;
}
.reviews-summary {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 26px;
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow-sm);
}
.summary-rating-big {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.summary-rating-big .big-rating-value {
font-family: var(--serif);
font-size: 38px;
font-weight: 600;
color: var(--gold-bright);
line-height: 1;
}
.summary-rating-big .big-rating-out {
color: var(--muted);
font-family: var(--sans);
font-size: 14px;
}
.summary-stars-row {
display: flex;
align-items: center;
gap: 8px;
}
.summary-stars-row .stars-display { font-size: 18px; }
.summary-stars-row .summary-count {
color: var(--muted);
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.5px;
}
.no-reviews-yet {
color: var(--muted);
font-family: var(--sans);
font-size: 14px;
font-style: italic;
margin: 0;
}
/* 2-col layout: reviews list + write review form */
.reviews-grid {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 32px;
align-items: start;
}
.reviews-list-col { min-width: 0; }
.reviews-form-col {
min-width: 0;
position: sticky;
top: 20px;
}
/* Review card */
.review-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 14px;
padding: 22px;
margin-bottom: 14px;
box-shadow: var(--shadow-sm);
}
.review-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 10px;
}
.review-author {
display: flex;
align-items: center;
gap: 12px;
}
.review-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-warm), var(--gold-bright));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
flex-shrink: 0;
}
.review-author-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.review-author-info strong {
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
color: var(--ink);
}
.review-author-info .review-date {
font-family: var(--sans);
font-size: 12px;
color: var(--muted);
}
/*.verified-badge {*/
/* display: inline-flex;*/
/* align-items: center;*/
/* gap: 4px;*/
/* background: #ecfdf5;*/
/* color: #047857;*/
/* padding: 4px 10px;*/
/* border-radius: 20px;*/
/* font-family: var(--sans);*/
/* font-size: 11px;*/
/* font-weight: 600;*/
/* letter-spacing: 0.3px;*/
/*}*/
/*.verified-badge svg { width: 12px; height: 12px; }*/
.review-stars {
margin: 0 0 10px;
}
.review-stars .stars-display { font-size: 15px; }
.review-body {
color: var(--ink-soft);
font-family: var(--sans);
font-size: 14px;
line-height: 1.7;
}
.review-body p { margin: 0 0 8px; }
.review-body p:last-child { margin-bottom: 0; }
.reviews-more-link {
text-align: center;
color: var(--muted);
font-family: var(--sans);
font-size: 13px;
margin: 14px 0 0;
font-style: italic;
}
/* ============================================
REVIEW FORM
============================================ */
.review-form-card {
background: linear-gradient(135deg, #fff, var(--cream-soft));
border: 1px solid var(--line);
border-radius: 14px;
padding: 26px;
box-shadow: var(--shadow-sm);
}
.review-form-card h3 {
font-family: var(--serif) !important;
font-size: 22px !important;
color: var(--ink) !important;
margin: 0 0 18px !important;
font-weight: 500 !important;
font-style: italic;
}
.review-form-restricted {
color: var(--muted);
font-family: var(--sans);
font-size: 13px;
line-height: 1.7;
margin: 0;
padding: 14px 16px;
background: var(--cream-soft);
border-radius: 10px;
border: 1px dashed var(--gold-soft);
}
.review-form-restricted a {
color: var(--gold-bright) !important;
font-weight: 600;
text-decoration: underline !important;
}
.triyaq-review-form p { margin: 0 0 14px; }
.triyaq-review-form label {
display: block;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
color: var(--ink);
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 8px;
}
.triyaq-review-form label .req {
color: var(--gold-bright);
}
.triyaq-review-form input[type="text"],
.triyaq-review-form input[type="email"],
.triyaq-review-form textarea {
width: 100%;
padding: 12px 16px;
background: #fff;
border: 1px solid var(--line);
border-radius: 10px;
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
outline: none;
box-shadow: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-sizing: border-box;
}
.triyaq-review-form input:focus,
.triyaq-review-form textarea:focus {
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-soft);
}
.triyaq-review-form textarea {
min-height: 110px;
resize: vertical;
line-height: 1.6;
}
/* Star picker */
.triyaq-rating-picker .rating-stars-picker {
display: inline-flex;
gap: 4px;
}
.triyaq-rating-picker .star-btn {
background: transparent;
border: none;
cursor: pointer;
font-size: 28px;
line-height: 1;
color: rgba(0,0,0,0.15);
padding: 0 2px;
transition: color 0.15s ease, transform 0.15s ease;
}
.triyaq-rating-picker .star-btn:hover { transform: scale(1.15); }
.triyaq-rating-picker .star-btn.is-on { color: var(--gold-bright); }
/* Submit */
.triyaq-review-submit,
.triyaq-review-form .submit,
.triyaq-review-form input[type="submit"] {
background: var(--gold-bright) !important;
color: #fff !important;
border: none !important;
border-radius: 30px !important;
padding: 14px 32px !important;
font-family: var(--sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
box-shadow: 0 10px 22px rgba(184,144,47,0.3) !important;
margin: 0 !important;
}
.triyaq-review-submit:hover,
.triyaq-review-form input[type="submit"]:hover {
background: var(--ink) !important;
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(0,0,0,0.2) !important;
}
/* Hide default WC comment form bits we don't want */
.triyaq-review-form .comment-form-cookies-consent { display: none !important; }
/* ============================================
RESPONSIVE — REVIEWS
============================================ */
@media (max-width: 900px) {
.triyaq-single-reviews { margin-top: 50px; padding: 0 14px; }
.reviews-section-header { margin-bottom: 26px; }
.summary-rating-big .big-rating-value { font-size: 30px; }
.reviews-grid {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
}
.reviews-form-col { position: static; }
.review-card { padding: 18px; }
.review-form-card { padding: 22px; }
/* Account reviews list */
.triyaq-account-reviews { padding: 20px 18px; border-radius: 14px; }
.account-review-card {
flex-direction: row;
gap: 12px;
padding: 14px;
}
.review-product-thumb { width: 64px; height: 80px; }
.review-product-name { font-size: 16px !important; }
.review-card-top { gap: 8px; }
}
@media (max-width: 480px) {
.account-review-card { flex-direction: column; }
.review-product-thumb {
width: 80px;
height: 96px;
align-self: center;
}
.review-card-top {
flex-direction: column;
gap: 8px;
}
.triyaq-review-form input,
.triyaq-review-form textarea { font-size: 14px; padding: 11px 14px; }
}
/* ============================================
STOREFRONT DEFAULT NAV OVERRIDES — kill conflicts
============================================ */
.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-navigation,
.triyaq-account-sidebar .woocommerce-MyAccount-navigation,
.triyaq-account-sidebar nav.woocommerce-MyAccount-navigation {
width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
max-width: 100% !important;
}
.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-content {
width: 100% !important;
float: none !important;
margin: 0 !important;
}
.triyaq-account-sidebar ul li a::before,
.triyaq-account-sidebar ul li a::after,
.woocommerce-MyAccount-navigation ul li a::before,
.woocommerce-MyAccount-navigation ul li a::after {
display: none !important;
content: none !important;
}
.triyaq-account-sidebar li.is-active a::before,
.woocommerce-MyAccount-navigation li.is-active a::before {
content: '' !important;
display: block !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 3px !important;
height: 60% !important;
background: var(--gold-bright) !important;
border-radius: 0 3px 3px 0 !important;
}
.triyaq-account-sidebar nav ul li a,
.triyaq-account-sidebar ul li a {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
box-sizing: border-box !important;
white-space: nowrap !important;
}
.triyaq-account-sidebar .nav-label {
flex: 1 1 auto !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
word-break: keep-all !important;
}
.triyaq-account-sidebar .nav-icon {
flex-shrink: 0 !important;
width: 20px !important;
height: 20px !important;
}
@media (max-width: 900px) {
.triyaq-account-sidebar nav ul,
.triyaq-account-sidebar ul {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
min-width: max-content !important;
gap: 6px !important;
}
.triyaq-account-sidebar nav ul li a,
.triyaq-account-sidebar ul li a {
width: auto !important;
white-space: nowrap !important;
}
.triyaq-account-sidebar .nav-label {
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
}
/* ============================================
PAYMENT — Transfer card + Note
============================================ */
.triyaq-transfer-card {
background: var(--cream-soft);
border: 1px solid var(--gold-soft);
border-radius: 14px;
padding: 22px 24px;
margin-top: 16px;
}
.transfer-title {
font-family: var(--sans) !important;
font-size: 15px;
font-weight: 600;
color: var(--ink);
margin: 0 0 4px !important;
letter-spacing: 0.3px;
}
.transfer-method {
color: var(--muted);
font-family: var(--sans);
font-size: 13px;
margin: 0 0 16px !important;
}
.transfer-number-pill {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 24px;
background: #fff;
border: 1px dashed var(--gold);
border-radius: 12px;
cursor: pointer;
font-family: var(--sans);
transition: all 0.3s ease;
position: relative;
margin-bottom: 16px;
}
.transfer-number-pill:hover {
background: linear-gradient(135deg, #fff, var(--gold-soft));
border-style: solid;
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(206,163,72,0.15);
}
.transfer-number-pill .copy-icon { font-size: 22px; line-height: 1; }
.transfer-number-pill .transfer-number {
font-family: var(--sans);
font-size: 20px;
font-weight: 700;
color: var(--gold-bright);
letter-spacing: 1.5px;
}
.transfer-number-pill .copy-success {
position: absolute;
top: -10px;
right: 12px;
background: #10b981;
color: #fff;
font-size: 10px;
padding: 4px 10px;
border-radius: 30px;
font-weight: 700;
letter-spacing: 0.5px;
opacity: 0;
transform: translateY(8px);
transition: all 0.35s ease;
pointer-events: none;
}
.transfer-number-pill.copied .copy-success {
opacity: 1;
transform: translateY(0);
}
.transfer-amount-row {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0 !important;
}
.transfer-amount-label {
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
color: var(--ink);
}
.transfer-amount-value {
font-family: var(--sans);
font-size: 20px;
font-weight: 700;
color: var(--gold-bright);
letter-spacing: 0.5px;
}
.triyaq-payment-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 14px;
padding: 14px 18px;
background: linear-gradient(135deg, #fff, var(--cream-soft));
border: 1px solid var(--gold-soft);
border-radius: 12px;
}
.triyaq-payment-note .note-icon {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--gold-bright);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.triyaq-payment-note .note-icon svg { width: 14px; height: 14px; }
.triyaq-payment-note p {
flex: 1;
font-family: var(--sans);
font-size: 13px;
line-height: 1.65;
color: var(--ink-soft);
margin: 0;
}
.triyaq-payment-note strong { color: var(--ink); font-weight: 700; }
@media (max-width: 600px) {
.triyaq-transfer-card { padding: 18px 16px; }
.transfer-number-pill { padding: 12px 18px; gap: 10px; }
.transfer-number-pill .transfer-number { font-size: 17px; letter-spacing: 1px; }
.transfer-amount-value { font-size: 18px; }
.triyaq-payment-note { padding: 12px 14px; }
}
/* Force correct layout for payment options */
.triyaq-checkout-wrapper .triyaq-payment-options .payment-option-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
padding: 24px 28px !important;
background: #fff !important;
border: 1.5px solid var(--line) !important;
border-radius: 16px !important;
cursor: pointer !important;
}
.triyaq-checkout-wrapper .triyaq-payment-options .payment-option-card .option-text {
flex: 1 !important;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.triyaq-checkout-wrapper .triyaq-payment-options .payment-option-card .option-text strong {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--ink) !important;
}
.triyaq-checkout-wrapper .triyaq-payment-options .payment-option-card .option-text span {
font-size: 13px !important;
color: var(--muted) !important;
}
.triyaq-checkout-wrapper .triyaq-payment-options .payment-option-card .option-radio {
flex-shrink: 0 !important;
width: 22px !important;
height: 22px !important;
border: 2px solid var(--line) !important;
border-radius: 50% !important;
background: #fff !important;
margin-right: 16px !important;
order: -1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.triyaq-checkout-wrapper .triyaq-payment-options .payment-option-card.is-selected .option-radio {
border-color: var(--gold-bright) !important;
}
.triyaq-checkout-wrapper .triyaq-payment-options .payment-option-card.is-selected .option-radio::after {
content: "" !important;
width: 12px !important;
height: 12px !important;
background: var(--gold-bright) !important;
border-radius: 50% !important;
display: block !important;
}
/* ============================================
TRIYAQ — FOOTER
============================================ */
.triyaq-footer {
background: var(--ink);
color: var(--cream);
padding: 60px 5% 30px;
position: relative;
overflow: hidden;
}
.triyaq-footer::before {
content: '';
position: absolute;
top: -150px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 300px;
background: radial-gradient(ellipse at center, rgba(206,163,72,0.12), transparent 70%);
pointer-events: none;
}
.triyaq-footer-inner {
max-width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
/* Brand */
.footer-brand { margin-bottom: 30px; }
.footer-logo {
display: inline-block;
margin-bottom: 14px;
}
.footer-logo img {
max-height: 56px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.95;
}
.footer-logo-text {
font-family: var(--serif) !important;
color: var(--cream) !important;
font-size: 32px;
font-weight: 500;
letter-spacing: 6px;
text-decoration: none !important;
}
.footer-tagline {
color: var(--gold);
font-family: var(--script);
font-size: 18px;
margin: 0;
letter-spacing: 0.5px;
font-style: italic;
}
/* Socials */
.footer-socials {
display: flex;
justify-content: center;
gap: 14px;
margin-bottom: 36px;
}
.social-icon {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: var(--cream) !important;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.35s ease;
text-decoration: none !important;
}
.social-icon svg { width: 18px; height: 18px; }
.social-icon:hover {
background: var(--gold-bright);
border-color: var(--gold-bright);
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 10px 22px rgba(206,163,72,0.35);
}
/* Quick links */
.footer-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px 28px;
margin-bottom: 36px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-links a {
color: rgba(242,234,223,0.7) !important;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 1.8px;
text-transform: uppercase;
font-weight: 400;
text-decoration: none !important;
transition: color 0.3s ease;
position: relative;
}
.footer-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.footer-links a:hover {
color: var(--gold) !important;
}
.footer-links a:hover::after { transform: scaleX(1); }
/* Bottom */
.footer-bottom {
color: rgba(242,234,223,0.4);
font-family: var(--sans);
font-size: 11px;
letter-spacing: 1px;
}
.footer-bottom p {
margin: 0 0 6px;
line-height: 1.6;
}
.footer-bottom .heart {
color: var(--gold);
font-size: 13px;
margin: 0 2px;
}
/* Hide Storefront default footer */
.storefront-handheld-footer-bar,
.site-info,
.site-footer-credit {
display: none !important;
}
/* ============================================
FLOATING WHATSAPP BUTTON
============================================ */
.triyaq-float-wa {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9990;
display: inline-flex;
align-items: center;
/*gap: 10px;*/
background: #25D366;
color: #fff !important;
padding: 10px;
border-radius: 50%;
box-shadow: 0 12px 28px rgba(37,211,102,0.4);
text-decoration: none !important;
transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
align-items: center;
justify-content: center;
}
.triyaq-float-wa:hover {
background: #1ebe5d;
transform: translateY(-3px) scale(1.02);
box-shadow: 0 18px 36px rgba(37,211,102,0.55);
}
.float-wa-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.float-wa-icon svg { width: 28px; height: 28px; }
/*.float-wa-label {*/
/* line-height: 1;*/
/* transition: max-width 0.4s ease, opacity 0.4s ease, margin 0.4s ease;*/
/*}*/
/* Pulse/ping animation */
/*.float-wa-ping {*/
/* position: absolute;*/
/* top: 0;*/
/* left: 0;*/
/* right: 0;*/
/* bottom: 0;*/
/* border-radius: 60px;*/
/* background: #25D366;*/
/* z-index: -1;*/
/* animation: triyaqWaPing 2.2s ease-out infinite;*/
/*}*/
/*@keyframes triyaqWaPing {*/
/* 0% { transform: scale(1); opacity: 0.6; }*/
/* 70% { transform: scale(1.35); opacity: 0; }*/
/* 100% { transform: scale(1.35); opacity: 0; }*/
/*}*/
/* Mobile: shrink to circle only */
@media (max-width: 600px) {
.triyaq-float-wa {
padding: 0;
width: 56px;
height: 56px;
justify-content: center;
bottom: 18px;
right: 18px;
}
.float-wa-label {
max-width: 0;
opacity: 0;
margin: 0;
overflow: hidden;
white-space: nowrap;
}
.float-wa-icon { width: 28px; height: 28px; }
.float-wa-icon svg { width: 26px; height: 26px; }
}
/* Footer responsive */
@media (max-width: 600px) {
.triyaq-footer { padding: 44px 16px 22px; }
.footer-logo img, .footer-logo-text { font-size: 26px; }
.footer-socials { gap: 10px; margin-bottom: 28px; }
.social-icon { width: 38px; height: 38px; }
.social-icon svg { width: 16px; height: 16px; }
.footer-links {
gap: 6px 18px;
font-size: 11px;
margin-bottom: 24px;
padding-bottom: 22px;
}
.footer-links a { font-size: 11px; letter-spacing: 1.4px; }
.footer-bottom { font-size: 10px; }
}
/* ============================================
FIX — Footer full width (kill Storefront's col-full constraint)
============================================ */
.site-footer.triyaq-footer,
.site-footer {
width: 100% !important;
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
background: var(--ink) !important;
}
.site-footer .col-full,
.site-footer.triyaq-footer .col-full {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* تأكد إن الـ wrapper جوّه الفوتر يفضل في النص بالعرض الصحيح */
.triyaq-footer .triyaq-footer-inner {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
/* ============================================
أزرار إغلاق Overlays — أكبر وأوضح
============================================ */
.search-close,
.wishlist-close {
width: 56px !important;
height: 56px !important;
top: 24px !important;
right: 24px !important;
background: rgba(255,255,255,0.1) !important;
border: 1px solid rgba(255,255,255,0.2) !important;
color: #fff !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.search-close svg,
.wishlist-close svg {
width: 35px !important;
height: 35px !important;
stroke: #fff !important;
stroke-width: 2 !important;
color: #fff !important;
}
.search-close:hover,
.wishlist-close:hover {
background: var(--gold) !important;
border-color: var(--gold) !important;
transform: rotate(90deg) !important;
}
/* الموبايل */
@media (max-width: 600px) {
.search-close,
.wishlist-close {
width: 48px !important;
height: 48px !important;
top: 16px !important;
right: 16px !important;
}
.search-close svg,
.wishlist-close svg {
width: 30px !important;
height: 30px !important;
}
}
/* إخفاء النجوم القديمة فقط في نموذج إضافة تقييم المنتج */
#commentform .comment-form-rating .stars,
#commentform p.stars {
display: none !important;
}
/* إخفاء شريط الإضافة الثابت */
.storefront-sticky-add-to-cart {
display: none !important;
}
/* ============================================
TRIYAQ - UNIFIED WOOCOMMERCE NOTICES
شامل لكل رسائل المتجر مع أيقونات واضحة
============================================ */
/* 1. إعادة تعيين خلفية ولون كافة الرسائل */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-message,
.woocommerce-NoticeGroup .woocommerce-info,
.woocommerce-NoticeGroup .woocommerce-error {
background-color: var(--cream-soft, #faf4e9) !important;
color: var(--ink, #1a1a1a) !important;
border-left: 4px solid var(--gold, #cea348) !important;
border-radius: 12px !important;
font-family: var(--sans, 'Jost', sans-serif) !important;
font-size: 14px !important;
line-height: 1.5 !important;
padding: 14px 20px 14px 50px !important; /* مساحة كافية للأيقونة */
margin: 20px auto !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
list-style: none !important;
position: relative !important;
}
/* 2. تخصيص رسائل الخطأ بلون محايد مع احتفاظ بالتمييز */
.woocommerce-error,
.woocommerce-error li,
.woocommerce-error strong {
background-color: #fff2ef !important;
border-left-color: #d9534f !important;
color: #a94442 !important;
}
/* 3. تخصيص رسائل النجاح */
.woocommerce-message {
background-color: #eef5ea !important;
border-left-color: #5cb85c !important;
color: #2e5c2e !important;
}
/* 4. تخصيص رسائل المعلومات */
.woocommerce-info {
background-color: #eef4fa !important;
border-left-color: #5bc0de !important;
color: #2a6496 !important;
}
/* 5. الأيقونات ::before - وضعها على اليسار دون تداخل */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
position: absolute !important;
left: 18px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 18px !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
color: currentColor !important; /* يجعل لون الأيقونة مثل لون النص */
font-family: 'WooCommerce', 'dashicons', sans-serif !important;
}
/* 6. لأيقونات رسائل الخطأ (اختياري: إعطاء لون مميز) */
.woocommerce-error::before {
color: #d9534f !important;
}
/* 7. أيقونات رسائل النجاح */
.woocommerce-message::before {
color: #5cb85c !important;
}
/* 8. أيقونات رسائل المعلومات */
.woocommerce-info::before {
color: #5bc0de !important;
}
/* 9. الأزرار داخل الرسالة */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
background: var(--gold-bright, #b8902f) !important;
color: #fff !important;
border: none !important;
border-radius: 30px !important;
padding: 6px 18px !important;
font-size: 12px !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
font-weight: 600 !important;
text-decoration: none !important;
margin-left: 15px !important;
transition: all 0.3s ease !important;
display: inline-block !important;
line-height: 1.4 !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
background: var(--ink, #1a1a1a) !important;
transform: translateY(-2px) !important;
}
/* 10. إخفاء أي أيقونات إضافية قد تظهر */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
text-decoration: none !important;
}
/* 11. منع أي تداخل إضافي في الهواتف */
@media (max-width: 600px) {
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
padding: 12px 15px 12px 42px !important;
font-size: 13px !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
left: 14px !important;
font-size: 16px !important;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
display: inline-block !important;
margin-top: 6px !important;
margin-left: 0 !important;
margin-right: 8px !important;
padding: 4px 12px !important;
font-size: 10px !important;
letter-spacing: 1px !important;
}
}
/* 12. ضبط المسافات في حالة ظهور عدة رسائل */
.woocommerce-NoticeGroup {
max-width: 1400px;
margin: 0 auto;
padding: 0 5%;
}
/* 13. إزالة أي تأثيرات قد تجعل الأيقونة تختفي أو تتداخل */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
content: "" !important; /* سيتم تعبئتها بواسطة WooCommerce، نحن فقط نضمن عدم الكتابة فوقها */
display: inline-block !important;
speak: never !important;
}
/* ============================================
FIX — Show UNIT PRICE on mobile (under collection)
Desktop: keep separate column (no change)
============================================ */
@media (max-width: 900px) {
.triyaq-cart-row {
grid-template-columns: 70px minmax(0, 1fr) minmax(80px, auto) !important;
grid-template-areas:
"image info subtotal"
"image price subtotal"
"image qty remove" !important;
align-items: start !important;
gap: 2px 12px !important;
}
.triyaq-cart-row .cart-item-image {
grid-area: image !important;
align-self: center !important;
}
.triyaq-cart-row .cart-item-info { grid-area: info !important; }
/* ✅ SHOW the unit price on mobile, place it under info */
.triyaq-cart-row .cart-item-price {
display: block !important;
grid-area: price !important;
font-family: var(--sans) !important;
font-size: 12px !important;
color: var(--muted) !important;
font-weight: 500 !important;
margin: 2px 0 0 0 !important;
padding: 0 !important;
text-align: left !important;
line-height: 1.4 !important;
}
.triyaq-cart-row .cart-item-price bdi,
.triyaq-cart-row .cart-item-price .amount,
.triyaq-cart-row .cart-item-price .woocommerce-Price-amount {
color: var(--muted) !important;
font-weight: 500 !important;
white-space: nowrap !important;
background: transparent !important;
}
.triyaq-cart-row .cart-item-price .woocommerce-Price-currencySymbol {
font-size: 10px !important;
opacity: 0.9 !important;
margin-right: 1px !important;
}
.triyaq-cart-row .cart-item-subtotal {
grid-area: subtotal !important;
align-self: start !important;
padding-top: 4px !important;
}
.triyaq-cart-row .cart-item-qty {
grid-area: qty !important;
padding-top: 10px !important;
}
.triyaq-cart-row .cart-item-remove {
grid-area: remove !important;
padding-top: 10px !important;
}
}
/* ============================================
FIX — Remove empty space in product card
(between image and title) — applies everywhere
============================================ */
/* Image: anchor to BOTTOM of container (bottle hugs the title) */
.luxury-card .product-image,
.woocommerce ul.products li.product.luxury-card .product-image {
align-items: flex-end !important;
top: -70px !important; /* was -100 */
height: 180px !important; /* was 240 */
}
/* Card: tighter top padding (no more wasted whitespace) */
.luxury-card,
.woocommerce ul.products li.product.luxury-card,
.woocommerce-page ul.products li.product.luxury-card {
padding-top: 115px !important; /* was 150 */
margin-top: 55px !important; /* was 70 */
}
/* Content sits closer to where image ends */
.luxury-card .product-content,
.woocommerce ul.products li.product.luxury-card .product-content {
margin-top: 0px !important; /* was 28 */
}
/* ============================================
Mobile — keep tight
============================================ */
@media (max-width: 768px) {
.luxury-card .product-image,
.woocommerce ul.products li.product.luxury-card .product-image {
top: -45px !important;
height: 140px !important;
}
.luxury-card,
.woocommerce ul.products li.product.luxury-card {
padding-top: 90px !important;
margin-top: 45px !important;
}
.luxury-card .product-content,
.woocommerce ul.products li.product.luxury-card .product-content {
margin-top: 0px !important;
}
}
@media (max-width: 480px) {
.luxury-card .product-image,
.woocommerce ul.products li.product.luxury-card .product-image {
top: -40px !important;
height: 120px !important;
}
.luxury-card,
.woocommerce ul.products li.product.luxury-card {
padding-top: 78px !important;
margin-top: 38px !important;
}
}
/* ============================================
Product card — short description style
============================================ */
.luxury-card .product-short-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-family: var(--sans) !important;
font-size: 12.5px !important;
line-height: 1.5 !important;
color: var(--muted) !important;
margin: 4px 0 14px !important;
padding: 0 !important;
letter-spacing: 0.2px;
/* Keeps card heights equal even with different desc lengths */
min-height: 2.6em;
}
@media (max-width: 768px) {
.luxury-card .product-short-desc {
font-size: 11px !important;
line-height: 1.45 !important;
margin: 3px 0 10px !important;
min-height: 2.4em;
}
}
@media (max-width: 480px) {
.luxury-card .product-short-desc {
font-size: 10.5px !important;
margin: 2px 0 8px !important;
-webkit-line-clamp: 2;
}
}