/* PATTERN CSS bundle: product */
/* ---- css/fonts.css ---- */
/* Self-hosted Google Fonts — generated automatically */
/* Eliminates render-blocking Google Fonts @import */
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtFmSq17w.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtMmSq17w.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtHmSq17w.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFkD-vYSZviVYUb_rj3ij__anPXDTnohkk72xU.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojUk72xU.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFkD-vYSZviVYUb_rj3ij__anPXDTnojEk72xU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTjYgFE_.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgFE_.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ─────────────────────────────────────────────
* CAIRO — Arabic + Latin (self-hosted)
* Used for Arabic RTL interface text
* ───────────────────────────────────────────── */
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscQyyS4J0.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscSCyS4J0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cairo';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../fonts/cairo-SLXVc1nY6HkvangtZmpQdkhzfH5lkSscRiyS.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ---- css/global.css ---- */
/*
Theme Name: Pattern Gold — Luxury Edition
Theme URI: https://patternjewellery.com
Author: Pattern Gold & Diamond Jewellery
Author URI: https://patternjewellery.com
Description: A complete luxury WooCommerce jewellery theme for Pattern Gold & Diamond Jewellery. Features mega menus, transparent sticky header, wishlist, quick view, ring builder, diamond education, 360° viewer support, AR virtual try-on placeholder, ring size calculator, metal selector, schema markup, and a full luxury pearl-white design system.
Version: 2.1.0
License: Proprietary
Text Domain: pattern-gold
Tags: woocommerce, jewellery, luxury, light, gold, mega-menu, wishlist
*/
/* =========================================================
1. DESIGN TOKENS — Pearl Blue & Gold (v2.1.0)
Palette inspired by the PATTERN brand photography:
diamond jewellery on sky-blue satin + gold logo.
========================================================= */
:root {
/* ── GOLD — brand accent ──────────────────────────────────────────
* ACCESSIBILITY: measured contrast on the ivory background (#FAF8F3):
*
* --gold #C9A84C 2.15:1 ✗ fails AA normal (4.5:1) AND large (3:1)
* --gold-dark #A8852E 3.27:1 ✗ fails AA normal, passes large only
* --gold-text #856D28 4.69:1 ✓ passes AA normal
*
* The brand gold was being used for 10–11px text — product spec lines,
* filter counts, eyebrows, "VIEW DETAILS" — i.e. purchase-relevant
* information rendered at roughly half the legibility AA requires.
*
* Rather than change the brand colour, the palette is now split by ROLE:
* --gold decoration only — borders, dividers, swatches, rules,
* icon fills, and display type at 32px+ where it reads
* as a graphic element rather than as copy.
* --gold-text any gold TEXT on ivory or white.
* --gold-on-dark gold text on the navy footer (#0F2336) — the brand
* gold already passes there at 6.99:1, so it is reused.
*
* --gold-text keeps the brand hue (44°) and saturation exactly; only
* lightness is reduced, so it still reads unmistakably as gold.
* ───────────────────────────────────────────────────────────────── */
--gold: #C9A84C;
--gold-dark: #A8852E;
--gold-brand: #C9A84C; /* the untouched brand gold, always available */
/* ── ALERT / NOTIFICATION ──────────────────────────────────────────
* A hardcoded magenta #ba1264 appeared in 20 places across
* single-product.php, header.php, global.css, nav-fix.css and
* product.css — as SVG strokes, accordion border rules, and the
* cart/wishlist count badges. Magenta sits outside the gold / ivory /
* navy palette entirely and read as a leftover from another project.
*
* Decorative uses are repointed to gold. Genuine notification badges
* keep a distinct attention colour, but as a deep burgundy that
* belongs with gold and navy. White on it measures 8.89:1.
* ───────────────────────────────────────────────────────────────── */
--alert: #8C1D3F;
--gold-text: #856D28; /* AA-compliant gold for text on light bg */
--gold-on-dark: #C9A84C; /* gold text on navy — 6.99:1 */
--gold-light: #DFC06A;
--gold-xlight: #F5ECD5;
--champagne: #E8D5A0;
--rose-gold: #C9826A;
--white-gold: #C0C0C0;
/* ── PEARL BLUE — sky satin palette (new v2.1) ── */
--sky: #87C5DC; /* mid sky blue — hero sparkle accents, borders */
--sky-light: #C2DFF0; /* soft sky — hover states, dividers */
--sky-xlight: #EEF6FB; /* near-white blue — feature section washes */
--sky-dark: #4E8FAA; /* deeper sky — active states */
--sky-glow: rgba(135,197,220,.15); /* subtle sky glow for shadows */
--sky-border: rgba(135,197,220,.30); /* sky-tinted border */
/* ── NAVY — premium dark (footer + dark sections) ── */
--navy: #0F2336; /* deep navy — footer bg, dark section bg */
--navy-mid: #1A3A54; /* mid navy — card bg in dark sections */
--navy-light: #2A5070; /* lighter navy — borders in dark mode */
/* ── PEARL / IVORY — page surfaces (warm ivory stays primary) ── */
--ivory: #FAF8F3; /* main page background — warm pearl white */
--pearl: #FAFCFD; /* cool pearl — shop/category page bg */
--card: #FFFFFF; /* card surface — pure white */
--soft: #F5F0E8; /* subtle warm off-white — hover states */
--soft-2: #EDE8DE; /* deeper cream — borders, dividers */
--overlay: rgba(250,248,243,.96);
--overlay-navy: rgba(15,35,54,.85); /* navy overlay for hero on blue sections */
--black: #FAF8F3; /* legacy alias → keep pointing to ivory */
/* ── CRYSTAL — diamond sparkle ── */
--crystal: rgba(255,255,255,0.85);
--prismatic: linear-gradient(135deg,#87C5DC 0%,#DFC06A 40%,#FFFFFF 70%,#87C5DC 100%);
/* ── BORDERS ── */
--gold-border: rgba(201,168,76,.22);
--gold-muted: rgba(201,168,76,.07);
--gold-glow: rgba(201,168,76,.15);
--border: rgba(201,168,76,.15);
--border-hover: rgba(201,168,76,.50);
/* ── TEXT — charcoal hierarchy (on ivory/white) ── */
--text-bright: #1A1814; /* near-black charcoal — headings */
--text-mid: #3D3730; /* warm dark brown — body text */
--text-muted: #7A6F64; /* warm medium-grey — secondary text */
--text-dim: #6E6560; /* warm grey — captions. Was #A09590, which
measured 2.75:1 on ivory and failed AA;
this is 5.36:1 at the same hue. */
--text-deep: #1A1814;
--text-light: #5C5450;
/* ── TEXT on coloured backgrounds ── */
--text-on-sky: #0F2336; /* navy text on sky-blue sections */
--text-on-navy: #FAF8F3; /* ivory text on navy sections */
--text-on-gold: #1A1814; /* charcoal text on gold bar */
/* ── SEMANTIC ── */
--cream: #EDE8DE;
--muted: #7A6F64;
--dark-grey: #3D3730;
--light-grey: #F0EDE8;
--ivory-bg: #FAF8F3;
--success: #2ECC71;
--error: #E74C3C;
--rose-gold-spec: #E6B7A9;
/* ── FONTS ── */
--font-serif: 'Playfair Display', Georgia, serif;
--font-alt: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Montserrat', sans-serif;
--font-sans: 'Montserrat', sans-serif;
/* ── SPACING RHYTHM ── */
--sp-xs: 8px;
--sp-sm: 16px;
--sp-md: 32px;
--sp-lg: 60px;
--sp-xl: 90px;
--sp-xxl: 120px;
/* ── 8pt Spacing Scale ── */
--space-4: 4px; --space-8: 8px; --space-12: 12px;
--space-16: 16px; --space-24: 24px; --space-32: 32px;
--space-48: 48px; --space-64: 64px; --space-96: 96px;
--space-128: 128px;
/* ── TRANSITIONS ── */
--ease: cubic-bezier(.4,0,.2,1);
--fast: .2s var(--ease);
--medium: .35s var(--ease);
--slow: .6s var(--ease);
/* ── TYPOGRAPHY SCALE (fluid via clamp on key sizes) ── */
--type-h1: clamp(40px, 6vw, 72px);
--type-h2: clamp(28px, 4vw, 48px);
--type-h3: clamp(22px, 3vw, 32px);
--type-h4: 22px;
--type-body-lg: 18px;
--type-body: 16px;
--type-small: 14px;
--type-caption: 12px;
/* ── RADII ── */
--radius: 4px;
--radius-lg: 8px;
--radius-btn: 8px;
--radius-card: 12px;
--radius-cat: 16px;
/* ── LAYOUT ── */
--btn-h: 48px;
--container: 1280px;
--max-content: 1440px;
--nav-h: 80px;
--topbar-h: 40px;
--filter-w: 280px;
--cart-summary-w:320px;
/* ── SECTION BACKGROUNDS (semantic zone system) ── */
--bg-page: var(--ivory); /* default page — warm ivory */
--bg-shop: var(--pearl); /* shop/category pages — cool pearl */
--bg-feature: var(--sky-xlight); /* featured sections — pale sky wash */
--bg-dark: var(--navy); /* footer + dark editorial sections */
--bg-card: var(--card); /* product cards — pure white */
--bg-gold-bar: var(--gold); /* gold rate bar */
}
/* =========================================================
2. RESET & BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Montserrat', sans-serif;
background: var(--ivory);
color: var(--text-mid);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
::selection { background: rgba(201,168,76,.22); color: var(--text-bright); }
a { color: var(--gold-dark); text-decoration: none; transition: color var(--fast); }
a:hover { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; padding: 0; margin: 0; }
button, input, select, textarea { font-family: 'Montserrat', sans-serif; }
p { font-size: .82rem; color: var(--text-muted); line-height: 1.9; margin-bottom: 1rem; }
strong { color: var(--text-mid); font-weight: 600; }
em { color: var(--gold-dark); font-style: italic; }
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
font-weight: 400;
color: var(--text-bright);
line-height: 1.2;
}
/* =========================================================
3. TOPBAR
========================================================= */
.pg-topbar {
background: var(--gold-brand);
color: var(--text-on-gold);
text-align: center;
padding: 9px 20px;
font-size: 11px; /* WCAG fix: was .54rem ≈ 8.6px — now min 11px */
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
position: relative;
z-index: 10000;
}
.pg-topbar a { color: var(--text-on-gold); text-decoration: none; }
.pg-topbar a:hover { opacity: .75; }
.pg-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1440px;
margin: 0 auto;
flex-wrap: wrap;
gap: 8px;
}
.pg-topbar-msg { flex: 1; text-align: center; }
.pg-topbar-links { display: flex; gap: 20px; flex-shrink: 0; }
.pg-topbar-links a { font-size: 10px; letter-spacing: 2px; color: var(--text-on-gold); text-transform: uppercase; }
/* =========================================================
4. HEADER + NAVIGATION
========================================================= */
.pg-site-header {
position: sticky;
top: 0;
z-index: 9000;
background: rgba(250,248,243,.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: .5px solid var(--gold-border);
transition: background var(--medium), box-shadow var(--medium);
}
.pg-site-header.is-transparent {
background: transparent;
border-bottom-color: transparent;
}
.pg-site-header.is-scrolled {
background: rgba(250,248,243,.98);
border-bottom-color: var(--gold-border);
box-shadow: 0 4px 24px rgba(26,24,20,.12);
}
.pg-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
max-width: 1440px;
margin: 0 auto;
padding: 0 48px;
gap: 24px;
}
/* Logo */
.pg-logo {
display: flex;
flex-direction: column;
text-decoration: none;
flex-shrink: 0;
}
.pg-logo-name {
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
letter-spacing: 6px;
color: var(--gold);
text-transform: uppercase;
line-height: 1.1;
}
.pg-logo-sub {
font-size: .4rem;
letter-spacing: 5px;
color: var(--text-dim);
text-transform: uppercase;
margin-top: 3px;
}
/* PRIMARY NAV */
.pg-primary-nav {
display: flex;
align-items: center;
height: 100%;
flex: 1;
justify-content: center;
}
.pg-nav-list {
display: flex;
align-items: stretch;
height: 100%;
gap: 0;
}
.pg-nav-list > li {
position: relative;
display: flex;
align-items: center;
}
.pg-nav-list > li > a {
font-size: .54rem;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--text-muted);
padding: 0 14px;
height: 100%;
display: flex;
align-items: center;
position: relative;
transition: color var(--fast);
}
.pg-nav-list > li > a::after {
content: '';
position: absolute;
bottom: 0;
left: 14px;
right: 14px;
height: 1px;
background: var(--gold-brand);
transform: scaleX(0);
transition: transform var(--fast);
}
.pg-nav-list > li:hover > a,
.pg-nav-list > li.current-menu-item > a,
.pg-nav-list > li.current-menu-ancestor > a { color: var(--gold); }
.pg-nav-list > li:hover > a::after,
.pg-nav-list > li.current-menu-item > a::after { transform: scaleX(1); }
/* =========================================================
5. MEGA MENU
========================================================= */
.pg-mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
min-width: 760px;
background: #FFFFFF;
border: .5px solid var(--gold-border);
border-top: 2px solid var(--gold);
padding: 32px;
display: none;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
box-shadow: 0 20px 60px rgba(26,24,20,.14);
z-index: 9100;
}
.pg-nav-list > li:hover .pg-mega-menu { display: grid; }
.pg-mega-col { display: flex; flex-direction: column; gap: 4px; }
.pg-mega-col-title {
font-size: .52rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
font-weight: 600;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: .5px solid var(--gold-border);
}
.pg-mega-link {
font-size: .64rem;
color: var(--text-dim);
padding: 6px 0;
letter-spacing: .5px;
transition: all var(--fast);
display: flex;
align-items: center;
gap: 8px;
}
.pg-mega-link:hover { color: var(--gold); padding-left: 6px; }
.pg-mega-featured {
grid-column: span 2;
position: relative;
overflow: hidden;
background: var(--soft);
border: .5px solid var(--gold-border);
}
.pg-mega-featured img { width: 100%; height: 160px; object-fit: cover; opacity: .7; transition: opacity var(--medium); }
.pg-mega-featured:hover img { opacity: .9; }
.pg-mega-feat-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
background: linear-gradient(to top, rgba(26,24,20,.45), transparent);
font-size: .58rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--gold);
}
/* Simple dropdown */
.pg-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: #FFFFFF;
border: .5px solid var(--gold-border);
border-top: 2px solid var(--gold);
padding: 8px 0;
display: none;
box-shadow: 0 16px 40px rgba(26,24,20,.12);
z-index: 9100;
}
.pg-nav-list > li:hover .pg-dropdown { display: block; }
.pg-dropdown a {
display: block;
padding: 10px 20px;
font-size: .62rem;
letter-spacing: 1px;
color: var(--text-dim);
transition: all var(--fast);
border-bottom: .5px solid rgba(26,24,20,.07);
}
.pg-dropdown a:hover { color: var(--gold); background: rgba(201,168,76,.04); padding-left: 26px; }
/* Header icons */
.pg-header-icons {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.pg-icon-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
position: relative;
transition: color var(--fast);
cursor: pointer;
background: none;
border: none;
text-decoration: none;
}
.pg-icon-btn:hover { color: var(--gold); }
.pg-icon-badge {
position: absolute;
top: 6px;
right: 5px;
width: 16px;
height: 16px;
background: var(--gold-brand);
color: var(--black);
font-size: .42rem;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* Search overlay */
.pg-search-overlay {
position: fixed;
inset: 0;
background: rgba(26,24,20,.9);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--medium);
}
.pg-search-overlay.is-open { opacity: 1; pointer-events: all; }
.pg-search-inner {
width: 100%;
max-width: 700px;
padding: 0 32px;
}
.pg-search-label {
font-size: .52rem;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
display: block;
}
.pg-search-form {
display: flex;
border-bottom: 1px solid var(--gold-border);
}
.pg-search-inp {
flex: 1;
background: none;
border: none;
font-family: 'Playfair Display', serif;
font-size: clamp(1.4rem, 3vw, 2.4rem);
color: #fff;
padding: 16px 0;
outline: none;
}
.pg-search-inp::placeholder { color: rgba(255,255,255,.2); }
.pg-search-submit {
background: none;
border: none;
color: var(--gold);
cursor: pointer;
padding: 0 16px;
}
.pg-search-close {
position: absolute;
top: 32px;
right: 32px;
background: none;
border: .5px solid var(--gold-border);
color: var(--gold);
width: 44px;
height: 44px;
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--fast);
}
.pg-search-close:hover { background: var(--gold-brand); color: var(--black); }
/* Mobile hamburger */
.pg-hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.pg-hamburger span {
display: block;
width: 24px;
height: 1.5px;
background: var(--gold-brand);
transition: all var(--medium);
transform-origin: center;
}
.pg-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.pg-hamburger.is-open span:nth-child(2) { opacity: 0; }
.pg-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobile nav drawer */
.pg-mobile-drawer {
position: fixed;
top: 0;
right: -100%;
width: min(400px, 90vw);
height: 100vh;
background: #FAF8F3;
border-left: .5px solid var(--gold-border);
z-index: 9500;
overflow-y: auto;
transition: right var(--medium);
padding: 80px 32px 40px;
}
.pg-mobile-drawer.is-open { right: 0; }
.pg-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(26,24,20,.35);
z-index: 9400;
opacity: 0;
pointer-events: none;
transition: opacity var(--medium);
}
.pg-drawer-overlay.is-open { opacity: 1; pointer-events: all; }
.pg-drawer-close {
position: absolute;
top: 24px;
right: 24px;
background: none;
border: .5px solid var(--gold-border);
color: var(--gold);
width: 38px;
height: 38px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--fast);
}
.pg-drawer-close:hover { background: var(--gold-brand); color: var(--black); }
.pg-drawer-nav { margin-bottom: 32px; }
.pg-drawer-nav > li {
border-bottom: .5px solid rgba(201,168,76,.08);
}
.pg-drawer-nav > li > a {
display: block;
padding: 16px 0;
font-size: .8rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-mid);
font-family: 'Playfair Display', serif;
}
.pg-drawer-nav > li > a:hover { color: var(--gold); }
.pg-drawer-sub { padding: 0 0 8px 16px; display: none; }
.pg-drawer-sub.is-open { display: block; }
.pg-drawer-sub a { font-size: .64rem; color: var(--text-dim); display: block; padding: 7px 0; letter-spacing: 1px; }
.pg-drawer-sub a:hover { color: var(--gold); }
.pg-drawer-toggle { float: right; background: none; border: none; color: var(--gold); font-size: 1rem; cursor: pointer; padding: 16px 0; }
/* =========================================================
6. TYPOGRAPHY SYSTEM
========================================================= */
.pg-label {
display: block;
font-size: .54rem;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
font-weight: 500;
}
.pg-heading-xl {
font-family: 'Playfair Display', serif;
font-size: clamp(2.8rem, 5.5vw, 5.2rem);
font-weight: 400;
line-height: 1.08;
color: var(--text-bright);
}
.pg-heading-lg {
font-family: 'Playfair Display', serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 400;
line-height: 1.12;
color: var(--text-bright);
}
.pg-heading-md {
font-family: 'Playfair Display', serif;
font-size: clamp(1.6rem, 3vw, 2.6rem);
font-weight: 400;
line-height: 1.2;
color: var(--text-bright);
}
.pg-heading-sm {
font-family: 'Playfair Display', serif;
font-size: clamp(1.2rem, 2vw, 1.8rem);
font-weight: 400;
color: var(--text-bright);
}
.pg-subhead {
font-family: 'Cormorant Garamond', 'Playfair Display', serif;
font-size: clamp(1rem, 1.8vw, 1.4rem);
color: var(--text-muted);
font-style: italic;
line-height: 1.6;
}
.pg-body { font-size: .8rem; color: var(--text-muted); line-height: 1.9; }
.pg-body-sm { font-size: .72rem; color: var(--text-muted); line-height: 1.8; }
.pg-cap {
font-size: .52rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-dim);
}
/* =========================================================
7. LAYOUT UTILITIES
========================================================= */
.pg-container {
max-width: 1440px;
margin: 0 auto;
padding: 0 48px;
}
.pg-container-md { max-width: 1100px; margin: 0 auto; padding: 0 48px; }
.pg-container-sm { max-width: 800px; margin: 0 auto; padding: 0 48px; }
.pg-section { padding: var(--sp-xl) var(--sp-lg); background: var(--ivory); }
.pg-section-alt { padding: var(--sp-xl) var(--sp-lg); background: var(--soft); }
.divider { height: .5px; background: var(--gold-border); border: none; margin: 0; }
.pg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.pg-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.pg-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
/* =========================================================
8. BUTTONS
========================================================= */
.btn-gold {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--gold-brand);
color: #1A1814;
font-size: .58rem;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 700;
padding: 14px 32px;
border: none;
cursor: pointer;
transition: all .3s;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 2px 12px rgba(201,168,76,.22);
}
.btn-gold:hover { background: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,168,76,.35); color: #1A1814; }
.btn-outline {
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
color: var(--gold-dark);
font-size: .58rem;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
padding: 14px 32px;
border: 1px solid var(--gold);
cursor: pointer;
transition: all .3s;
text-decoration: none;
white-space: nowrap;
}
.btn-outline:hover { background: var(--gold-brand); color: #1A1814; box-shadow: 0 4px 16px rgba(201,168,76,.28); }
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: var(--text-muted);
font-size: .56rem;
letter-spacing: 2.5px;
text-transform: uppercase;
border: 1px solid rgba(26,24,20,.15);
padding: 12px 24px;
cursor: pointer;
transition: all var(--fast);
text-decoration: none;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-dark); background: var(--gold-xlight); }
.btn-ghost:hover { border-color: var(--gold-border); color: var(--gold); }
.btn-wa {
display: inline-flex;
align-items: center;
gap: 10px;
background: #25D366;
color: #fff;
font-size: .58rem;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
padding: 14px 28px;
border: none;
cursor: pointer;
transition: all .3s;
text-decoration: none;
}
.btn-wa:hover { background: #1da851; transform: translateY(-2px); color: #fff; }
.view-all {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: .54rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
border-bottom: .5px solid rgba(201,168,76,.3);
padding-bottom: 3px;
transition: all var(--fast);
text-decoration: none;
}
.view-all:hover { letter-spacing: 4px; border-bottom-color: var(--gold); color: var(--gold); }
/* =========================================================
9. HERO SECTION
========================================================= */
.pg-hero {
position: relative;
min-height: 96vh;
display: flex;
align-items: center;
overflow: hidden;
background: var(--black);
}
.pg-hero-video-wrap {
position: absolute;
inset: 0;
z-index: 0;
}
.pg-hero-video {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .35;
}
.pg-hero-img-bg {
position: absolute;
inset: 0;
background-image: var(--hero-image, none);
background-size: cover;
background-position: center;
opacity: .3;
z-index: 0;
transition: opacity 1s ease;
}
.pg-hero-grad {
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
rgba(10,10,10,.95) 0%,
rgba(10,10,10,.7) 50%,
rgba(10,10,10,.2) 100%
);
z-index: 1;
}
.pg-hero-glow {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 68% 45%, rgba(201,168,76,.08) 0%, transparent 60%);
z-index: 1;
pointer-events: none;
}
.pg-hero-content {
position: relative;
z-index: 2;
padding: 0 60px;
max-width: 720px;
}
.pg-hero-eyebrow {
font-size: .56rem;
letter-spacing: 6px;
text-transform: uppercase;
color: var(--gold);
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
opacity: 0;
animation: pg-fadeUp .8s var(--ease) .2s forwards;
}
.pg-hero-eyebrow::before {
content: '';
width: 32px;
height: .5px;
background: var(--gold-brand);
}
.pg-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 5.5vw, 5.5rem);
font-weight: 400;
line-height: 1.08;
color: #fff;
margin-bottom: 24px;
opacity: 0;
animation: pg-fadeUp .8s var(--ease) .4s forwards;
}
.pg-hero-sub {
font-size: .84rem;
color: rgba(255,255,255,.6);
line-height: 1.9;
max-width: 420px;
margin-bottom: 40px;
opacity: 0;
animation: pg-fadeUp .8s var(--ease) .6s forwards;
}
.pg-hero-btns {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 56px;
opacity: 0;
animation: pg-fadeUp .8s var(--ease) .8s forwards;
}
.pg-hero-stats {
display: flex;
gap: 40px;
padding-top: 32px;
border-top: .5px solid rgba(201,168,76,.15);
opacity: 0;
animation: pg-fadeUp .8s var(--ease) 1s forwards;
}
.pg-hero-stat-num { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--gold); display: block; line-height: 1; }
.pg-hero-stat-lbl { font-size: .48rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-top: 4px; display: block; }
.pg-hero-scroll-cue {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 3;
animation: pg-fadeUp 1s var(--ease) 1.4s both;
}
.pg-hero-scroll-cue span { font-size: .44rem; letter-spacing: 4px; text-transform: uppercase; color: rgba(201,168,76,.4); }
.pg-scroll-chevron { width: 20px; height: 20px; border-right: 1px solid rgba(201,168,76,.4); border-bottom: 1px solid rgba(201,168,76,.4); transform: rotate(45deg); animation: pg-bounce 2s ease-in-out infinite; }
@keyframes pg-bounce { 0%,100%{ transform:rotate(45deg) translateY(0);opacity:.4; } 50%{ transform:rotate(45deg) translateY(7px);opacity:1; } }
@keyframes pg-fadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
@keyframes pg-fadeIn { from{opacity:0;} to{opacity:1;} }
/* =========================================================
10. MARQUEE TICKER
========================================================= */
.pg-ticker {
background: var(--card);
border-top: .5px solid var(--gold-border);
border-bottom: .5px solid var(--gold-border);
padding: 14px 0;
overflow: hidden;
position: relative;
}
.pg-ticker::before, .pg-ticker::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.pg-ticker::before { left:0; background:linear-gradient(to right,var(--card),transparent); }
.pg-ticker::after { right:0; background:linear-gradient(to left,var(--card),transparent); }
.pg-ticker-track {
display: flex;
width: max-content;
animation: pg-ticker 30s linear infinite;
}
.pg-ticker-track:hover { animation-play-state: paused; }
.pg-ticker-item {
display: inline-flex;
align-items: center;
gap: 20px;
padding: 0 28px;
font-size: .54rem;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
flex-shrink: 0;
white-space: nowrap;
}
.pg-ticker-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(201,168,76,.5); }
@keyframes pg-ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* =========================================================
11. COLLECTION GRID
========================================================= */
.pg-cat-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 2px;
}
.pg-cat-grid.cols-4 { grid-template-columns: repeat(4,1fr); }
.pg-cat-card {
position: relative;
overflow: hidden;
aspect-ratio: 3/4;
cursor: pointer;
display: block;
text-decoration: none;
background: var(--soft);
}
.pg-cat-card.wide { grid-column: span 2; aspect-ratio: 3/2; }
.pg-cat-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--slow);
}
.pg-cat-card:hover .pg-cat-img { transform: scale(1.06); }
.pg-cat-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(26,24,20,.65) 0%, rgba(26,24,20,.12) 60%, transparent 100%);
transition: background var(--medium);
}
.pg-cat-card:hover .pg-cat-overlay { background: linear-gradient(to top, rgba(26,24,20,.72) 0%, rgba(26,24,20,.2) 60%, transparent 100%); }
.pg-cat-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px 22px;
}
.pg-cat-name {
font-family: 'Playfair Display', serif;
font-size: clamp(.9rem,1.5vw,1.3rem);
color: #fff;
font-weight: 400;
margin-bottom: 6px;
transition: color var(--fast);
}
.pg-cat-count { font-size: .52rem; letter-spacing: 2px; color: rgba(255,255,255,.5); text-transform: uppercase; }
.pg-cat-shop {
display: inline-block;
font-size: .5rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-top: 10px;
border-bottom: .5px solid rgba(201,168,76,.4);
padding-bottom: 2px;
transform: translateY(8px);
opacity: 0;
transition: all var(--medium);
}
.pg-cat-card:hover .pg-cat-shop { opacity: 1; transform: translateY(0); }
/* Placeholder category card */
.pg-cat-ph {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--soft);
}
.pg-cat-ph-icon {
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
color: rgba(201,168,76,.22);
line-height: 1;
}
/* =========================================================
12. PRODUCT CARDS
========================================================= */
.pg-products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.pg-products-grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.pg-product-card {
background: var(--card);
border: .5px solid rgba(201,168,76,.10);
overflow: hidden;
position: relative;
transition: all var(--medium);
cursor: pointer;
}
.pg-product-card:hover {
border-color: rgba(212,175,55,.45);
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(26,24,20,.1);
}
.pg-product-img-wrap {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--soft);
}
.pg-product-img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 20px;
transition: transform var(--slow);
}
.pg-product-card:hover .pg-product-img { transform: scale(1.05); }
/* Sale / New badge */
.pg-prod-badge {
position: absolute;
top: 12px;
left: 12px;
font-size: .46rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 5px 10px;
z-index: 3;
}
.pg-prod-badge.sale { background: var(--gold-brand); color: var(--black); }
.pg-prod-badge.new { background: #fff; color: var(--black); }
.pg-prod-badge.featured { background: rgba(201,168,76,.15); color: var(--gold); border: .5px solid rgba(201,168,76,.3); }
/* Month tags */
.pg-month-tag {
position: absolute;
top: 12px;
right: 12px;
font-size: .44rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 4px 9px;
z-index: 3;
}
.m1-tag { background:rgba(201,168,76,.15);color:var(--gold);border:.5px solid rgba(201,168,76,.3); }
.m2-tag { background:rgba(100,180,255,.1);color:#64b4ff;border:.5px solid rgba(100,180,255,.25); }
.m3-tag { background:rgba(100,200,150,.1);color:#64c896;border:.5px solid rgba(100,200,150,.25); }
/* Wishlist button on card */
.pg-card-wishlist {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
background: rgba(245,240,232,.88);
border: .5px solid var(--gold-border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 4;
transition: all var(--fast);
color: var(--text-muted);
}
.pg-card-wishlist:hover,
.pg-card-wishlist.is-wishlisted { background: rgba(201,168,76,.15); color: var(--gold); border-color: rgba(201,168,76,.5); }
/* Hover overlay */
.pg-card-overlay {
position: absolute;
inset: 0;
background: rgba(245,240,232,.82);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
opacity: 0;
transition: opacity var(--medium);
z-index: 2;
}
.pg-product-card:hover .pg-card-overlay { opacity: 1; }
.pg-quick-view-btn {
font-size: .52rem;
letter-spacing: 2px;
text-transform: uppercase;
background: var(--gold-brand);
color: var(--black);
padding: 10px 18px;
font-weight: 700;
border: none;
cursor: pointer;
transition: background var(--fast);
white-space: nowrap;
}
.pg-quick-view-btn:hover { background: var(--gold-light); }
/* Product body */
.pg-product-body {
padding: 14px 16px 18px;
border-top: .5px solid rgba(201,168,76,.08);
}
.pg-product-type {
font-size: .48rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 4px;
}
.pg-product-title {
font-size: .7rem;
color: var(--text-mid);
letter-spacing: .5px;
line-height: 1.4;
margin-bottom: 10px;
transition: color var(--fast);
display: block;
text-decoration: none;
}
.pg-product-card:hover .pg-product-title { color: var(--gold); }
.pg-product-price {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.pg-price-now {
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
color: var(--gold);
line-height: 1;
}
.pg-price-was {
font-size: .68rem;
color: var(--text-dim);
text-decoration: line-through;
}
.pg-price-save {
font-size: .46rem;
letter-spacing: 1px;
background: rgba(201,168,76,.10);
color: var(--gold);
border: .5px solid rgba(201,168,76,.25);
padding: 2px 7px;
font-weight: 600;
}
.pg-product-specs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
.pg-spec-chip {
font-size: .46rem;
letter-spacing: .5px;
color: var(--text-dim);
background: rgba(26,24,20,.03);
border: .5px solid rgba(26,24,20,.10);
padding: 3px 7px;
}
.pg-spec-chip.diamond { color: var(--gold); }
.pg-spec-chip.sapphire { color: #4a90d9; }
.pg-spec-chip.emerald { color: #50c878; }
.pg-spec-chip.ruby { color: #e0115f; }
/* Rating stars */
.pg-product-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pg-stars { color: var(--gold); font-size: .6rem; letter-spacing: 2px; }
.pg-rating-count { font-size: .52rem; color: var(--text-dim); }
/* =========================================================
13. QUICK VIEW MODAL
========================================================= */
.pg-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(26,24,20,.55);
z-index: 9800;
opacity: 0;
pointer-events: none;
transition: opacity var(--medium);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.pg-modal-backdrop.is-open { opacity: 1; pointer-events: all; }
.pg-modal {
background: var(--card);
border: .5px solid var(--gold-border);
max-width: 960px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
transform: scale(.95);
transition: transform var(--medium);
}
.pg-modal-backdrop.is-open .pg-modal { transform: scale(1); }
.pg-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
background: none;
border: .5px solid var(--gold-border);
color: var(--gold);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
z-index: 2;
transition: all var(--fast);
}
.pg-modal-close:hover { background: var(--gold-brand); color: var(--black); }
.pg-modal-inner { display: grid; grid-template-columns: 1fr 1fr; }
.pg-modal-gallery { height: 480px; background: var(--soft); overflow: hidden; }
.pg-modal-gallery img { width: 100%; height: 100%; object-fit: contain; padding: 32px; }
.pg-modal-details { padding: 40px 36px; overflow-y: auto; }
.pg-modal-loading { padding: 80px; text-align: center; color: var(--text-dim); font-size: .64rem; letter-spacing: 2px; }
/* =========================================================
14. WISHLIST SYSTEM
========================================================= */
.pg-wishlist-panel {
position: fixed;
top: 0;
right: -480px;
width: 440px;
height: 100vh;
background: #FFFFFF;
border-left: .5px solid var(--gold-border);
z-index: 9600;
overflow-y: auto;
transition: right var(--medium);
display: flex;
flex-direction: column;
}
.pg-wishlist-panel.is-open { right: 0; }
.pg-wishlist-header {
padding: 24px 24px 20px;
border-bottom: .5px solid var(--gold-border);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.pg-wishlist-title {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
color: #fff;
font-weight: 400;
}
.pg-wishlist-close {
width: 34px;
height: 34px;
background: none;
border: .5px solid var(--gold-border);
color: var(--gold);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--fast);
}
.pg-wishlist-close:hover { background: var(--gold-brand); color: var(--black); }
.pg-wishlist-items { flex: 1; padding: 16px; overflow-y: auto; }
.pg-wishlist-item {
display: flex;
gap: 14px;
padding: 14px 0;
border-bottom: .5px solid rgba(255,255,255,.04);
align-items: center;
}
.pg-wishlist-item-img { width: 70px; height: 70px; object-fit: contain; background: var(--soft); flex-shrink: 0; padding: 6px; }
.pg-wishlist-item-info { flex: 1; min-width: 0; }
.pg-wishlist-item-name { font-size: .66rem; color: var(--text-mid); margin-bottom: 6px; display: block; text-decoration: none; }
.pg-wishlist-item-price { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--gold); }
.pg-wishlist-item-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: .9rem; flex-shrink: 0; transition: color var(--fast); }
.pg-wishlist-item-remove:hover { color: #ff4444; }
.pg-wishlist-empty { text-align: center; padding: 60px 24px; }
.pg-wishlist-empty-icon { font-family: 'Playfair Display', serif; font-size: 3rem; color: rgba(201,168,76,.10); margin-bottom: 16px; }
/* =========================================================
15. PRODUCT SLIDER (Best Sellers)
========================================================= */
.pg-slider-wrap { position: relative; }
.pg-slider { display: flex; gap: 20px; overflow-x: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.pg-slide { flex: 0 0 calc(25% - 15px); scroll-snap-align: start; }
.pg-slide.wide { flex: 0 0 calc(33.333% - 14px); }
.pg-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: rgba(245,240,232,.95);
border: .5px solid var(--gold-border);
color: var(--gold);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
transition: all var(--fast);
font-size: 1.1rem;
}
.pg-slider-btn:hover { background: var(--gold-brand); color: var(--black); }
.pg-slider-btn.prev { left: -22px; }
.pg-slider-btn.next { right: -22px; }
.pg-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.pg-slider-dot { width: 24px; height: 2px; background: rgba(201,168,76,.22); cursor: pointer; transition: background var(--fast); }
.pg-slider-dot.active { background: var(--gold-brand); }
/* =========================================================
16. RING BUILDER SECTION
========================================================= */
.pg-builder-section {
background: var(--card);
padding: var(--sp-xl) var(--sp-lg);
position: relative;
overflow: hidden;
}
.pg-builder-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,.04) 0%, transparent 70%);
pointer-events: none;
}
.pg-builder-steps {
display: flex;
gap: 0;
margin: 48px 0;
position: relative;
}
.pg-builder-steps::before {
content: '';
position: absolute;
top: 28px;
left: calc(10% + 20px);
right: calc(10% + 20px);
height: .5px;
background: var(--gold-border);
}
.pg-builder-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
position: relative;
cursor: pointer;
transition: opacity var(--fast);
}
.pg-builder-step:hover { opacity: .85; }
.pg-step-num {
width: 56px;
height: 56px;
border: .5px solid var(--gold-border);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
color: var(--text-dim);
background: var(--card);
position: relative;
z-index: 2;
transition: all var(--medium);
}
.pg-builder-step.active .pg-step-num,
.pg-builder-step:hover .pg-step-num {
background: var(--gold-brand);
color: var(--black);
border-color: var(--gold);
box-shadow: 0 0 24px rgba(201,168,76,.3);
}
.pg-step-label {
font-size: .56rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-dim);
font-weight: 500;
transition: color var(--fast);
}
.pg-builder-step.active .pg-step-label,
.pg-builder-step:hover .pg-step-label { color: var(--gold); }
.pg-step-desc { font-size: .62rem; color: var(--text-deep); }
/* =========================================================
17. BRAND STORY SECTION
========================================================= */
.pg-story-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 600px;
}
.pg-story-media { position: relative; overflow: hidden; background: var(--soft); }
.pg-story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.pg-story-media:hover img { transform: scale(1.03); }
.pg-story-frame-corner {
position: absolute;
width: 40px;
height: 40px;
z-index: 3;
}
.pg-story-frame-corner.tl { top: 16px; left: 16px; border-top: .5px solid rgba(201,168,76,.4); border-left: .5px solid rgba(201,168,76,.4); }
.pg-story-frame-corner.br { bottom: 16px; right: 16px; border-bottom: .5px solid rgba(201,168,76,.4); border-right: .5px solid rgba(201,168,76,.4); }
.pg-story-content {
padding: 80px 60px;
background: var(--card);
display: flex;
flex-direction: column;
justify-content: center;
}
.pg-story-divider { width: 48px; height: 1px; background: var(--gold-brand); margin: 24px 0; }
/* =========================================================
18. WHY US / TRUST ICONS
========================================================= */
.pg-trust-grid {
display: grid;
grid-template-columns: repeat(5,1fr);
gap: 1px;
background: rgba(201,168,76,.08);
}
.pg-trust-item {
padding: 44px 24px;
background: var(--card);
text-align: center;
transition: background var(--fast);
}
.pg-trust-item:hover { background: var(--soft-2); }
.pg-trust-icon {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: rgba(201,168,76,.35);
display: block;
margin: 0 auto 14px;
line-height: 1;
}
.pg-trust-title {
font-size: .56rem;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
margin-bottom: 8px;
}
.pg-trust-text { font-size: .68rem; color: var(--text-dim); line-height: 1.7; }
/* =========================================================
19. BRIDAL SECTION
========================================================= */
.pg-bridal-hero {
position: relative;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--soft);
}
.pg-bridal-bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .4; }
.pg-bridal-grad {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 50%, rgba(10,10,10,.3) 0%, rgba(10,10,10,.85) 100%);
}
.pg-bridal-inner { position: relative; z-index: 2; text-align: center; padding: 0 48px; max-width: 700px; }
/* =========================================================
20. INSTAGRAM GALLERY
========================================================= */
.pg-instagram-grid {
display: grid;
grid-template-columns: repeat(6,1fr);
gap: 2px;
}
.pg-insta-item {
aspect-ratio: 1;
overflow: hidden;
position: relative;
background: var(--soft);
cursor: pointer;
}
.pg-insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--medium); }
.pg-insta-item:hover img { transform: scale(1.08); }
.pg-insta-overlay {
position: absolute;
inset: 0;
background: rgba(212,175,55,.0);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--fast);
}
.pg-insta-item:hover .pg-insta-overlay { background: rgba(201,168,76,.12); }
.pg-insta-icon { color: #fff; opacity: 0; transition: opacity var(--fast); font-size: 1.4rem; }
.pg-insta-item:hover .pg-insta-icon { opacity: 1; }
/* =========================================================
21. TESTIMONIALS
========================================================= */
.pg-testimonials-wrap { position: relative; }
.pg-testi-slider { display: flex; gap: 24px; overflow: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.pg-testi-slide { flex: 0 0 calc(33.333% - 16px); scroll-snap-align: start; }
.pg-testi-card {
border: .5px solid var(--gold-border);
padding: 36px 30px;
background: var(--card);
transition: all var(--medium);
height: 100%;
}
.pg-testi-card:hover { border-color: rgba(201,168,76,.4); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(26,24,20,.1); }
.pg-testi-q { font-family: 'Playfair Display', serif; font-size: 4rem; color: rgba(201,168,76,.10); line-height: 1; margin-bottom: 8px; }
.pg-testi-stars { color: var(--gold); font-size: .68rem; letter-spacing: 3px; margin-bottom: 16px; }
.pg-testi-body { font-size: .76rem; color: #777; line-height: 1.9; font-style: italic; margin-bottom: 22px; }
.pg-testi-author { font-size: .58rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.pg-testi-loc { font-size: .52rem; color: var(--text-dim); letter-spacing: 1px; margin-top: 4px; }
/* =========================================================
22. NEWSLETTER / VIP CLUB
========================================================= */
.pg-newsletter {
background: var(--card);
border-top: .5px solid rgba(201,168,76,.15);
border-bottom: .5px solid rgba(201,168,76,.15);
padding: 60px 48px;
position: relative;
overflow: hidden;
}
.pg-newsletter::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.05) 0%, transparent 70%);
pointer-events: none;
}
.pg-newsletter-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.pg-newsletter-title { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #fff; font-weight: 400; margin-bottom: 6px; }
.pg-newsletter-sub { font-size: .68rem; color: var(--text-dim); }
.pg-newsletter-perks { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.pg-newsletter-perk { font-size: .54rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 8px; }
.pg-newsletter-perk::before { content: '✦'; font-size: .44rem; }
.pg-newsletter-form { display: flex; flex: 1; max-width: 500px; min-width: 280px; }
.pg-nl-inp {
flex: 1;
background: var(--soft);
border: .5px solid rgba(201,168,76,.22);
border-right: none;
color: var(--text-mid);
font-size: .72rem;
padding: 15px 18px;
outline: none;
transition: border-color var(--fast);
}
.pg-nl-inp:focus { border-color: var(--gold); }
.pg-nl-inp::placeholder { color: var(--text-deep); }
.pg-nl-btn {
background: var(--gold-brand);
color: var(--black);
font-size: .54rem;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 700;
padding: 15px 22px;
border: none;
cursor: pointer;
transition: background var(--fast);
flex-shrink: 0;
}
.pg-nl-btn:hover { background: var(--gold-dark); }
/* =========================================================
23. FOOTER
========================================================= */
.pg-footer { background: #1A1814; border-top: .5px solid rgba(201,168,76,.12); }
.pg-footer-main { padding: 70px 48px 56px; }
.pg-footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; gap: 48px; }
.pg-f-logo-name { font-family: 'Playfair Display', serif; font-size: 1.15rem; letter-spacing: 5px; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 3px; }
.pg-f-logo-sub { font-size: .42rem; letter-spacing: 5px; text-transform: uppercase; color: var(--text-deep); display: block; margin-bottom: 20px; }
.pg-f-about { font-size: .66rem; color: var(--text-deep); line-height: 1.9; margin-bottom: 24px; max-width: 280px; }
.pg-f-socials { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-f-social {
width: 36px; height: 36px;
border: .5px solid rgba(201,168,76,.15);
display: flex; align-items: center; justify-content: center;
color: var(--text-deep);
cursor: pointer;
transition: all var(--fast);
text-decoration: none;
font-size: .7rem;
}
.pg-f-social:hover { border-color: var(--gold); color: var(--gold); }
.pg-f-col-title { font-size: .5rem; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; font-weight: 600; }
.pg-f-links li { border-bottom: .5px solid rgba(26,24,20,.07); }
.pg-f-links li:last-child { border-bottom: none; }
.pg-f-links a {
font-size: .64rem;
color: var(--text-deep);
padding: 8px 0;
display: flex;
align-items: center;
gap: 8px;
transition: all var(--fast);
text-decoration: none;
}
.pg-f-links a::before { content: '›'; color: rgba(201,168,76,.22); font-size: .9rem; transition: color var(--fast); }
.pg-f-links a:hover { color: var(--gold); padding-left: 6px; }
.pg-f-links a:hover::before { color: var(--gold); }
.pg-footer-certs {
border-top: .5px solid rgba(255,255,255,.04);
padding: 22px 48px;
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.pg-footer-certs-lbl { font-size: .46rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-deep); }
.pg-footer-cert { font-family: 'Playfair Display', serif; font-size: .95rem; color: rgba(212,175,55,.22); letter-spacing: 2.5px; }
.pg-footer-bottom {
background: #F0EDE8;
border-top: .5px solid rgba(255,255,255,.04);
padding: 18px 48px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.pg-footer-copy { font-size: .52rem; color: var(--text-bright); letter-spacing: 1px; }
.pg-footer-legal { display: flex; gap: 20px; }
.pg-footer-legal a { font-size: .5rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-bright); text-decoration: none; transition: color var(--fast); }
.pg-footer-legal a:hover { color: var(--gold); }
.pg-pay-methods { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pg-pay-chip { font-size: .44rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-bright); border: .5px solid rgba(26,24,20,.10); padding: 4px 8px; }
/* WhatsApp FAB */
.pg-wa-fab {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9999;
width: 56px;
height: 56px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 24px rgba(37,211,102,.4);
transition: all .3s;
text-decoration: none;
}
.pg-wa-fab:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 6px 32px rgba(37,211,102,.55); }
.pg-wa-fab::before {
content: '';
position: absolute;
width: 100%; height: 100%;
border-radius: 50%;
background: #25D366;
opacity: .25;
animation: pg-wa-pulse 2.5s ease-out infinite;
}
@keyframes pg-wa-pulse { 0%{transform:scale(1);opacity:.25} 100%{transform:scale(1.8);opacity:0} }
/* Toast */
.pg-toast {
position: fixed;
bottom: 100px;
right: 28px;
background: var(--card);
border: .5px solid var(--gold-border);
border-left: 3px solid var(--gold);
padding: 14px 20px;
font-size: .62rem;
color: var(--text-mid);
letter-spacing: 1px;
z-index: 9990;
transform: translateX(calc(100% + 40px));
transition: transform var(--medium);
max-width: 300px;
}
.pg-toast.is-visible { transform: translateX(0); }
/* =========================================================
24. SHOP PAGE
========================================================= */
.pg-shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 36px; padding: 40px 48px 80px; }
.pg-shop-sidebar {
position: sticky;
top: 90px;
height: fit-content;
border: .5px solid rgba(201,168,76,.10);
background: var(--card);
padding: 28px;
}
.pg-filter-group { margin-bottom: 28px; padding-bottom: 28px; border-bottom: .5px solid rgba(255,255,255,.04); }
.pg-filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.pg-filter-title {
font-size: .54rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
font-weight: 600;
margin-bottom: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
}
.pg-filter-toggle { font-size: .8rem; color: var(--text-dim); transition: transform var(--fast); }
.pg-filter-toggle.collapsed { transform: rotate(-90deg); }
.pg-filter-options { display: flex; flex-direction: column; gap: 4px; }
.pg-filter-option {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
cursor: pointer;
font-size: .64rem;
color: var(--text-dim);
letter-spacing: .5px;
transition: color var(--fast);
border-bottom: .5px solid rgba(255,255,255,.02);
}
.pg-filter-option:hover { color: var(--gold); }
.pg-filter-option input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border: .5px solid rgba(201,168,76,.22); flex-shrink: 0; cursor: pointer; transition: all var(--fast); position: relative; }
.pg-filter-option input[type="checkbox"]:checked { background: var(--gold-brand); border-color: var(--gold); }
.pg-filter-option input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: -2px; left: 1px; font-size: .6rem; color: var(--black); font-weight: 700; }
.pg-filter-count { margin-left: auto; font-size: .52rem; color: var(--text-deep); }
/* Price range */
.pg-price-range-wrap { padding: 8px 0; }
.pg-price-range-vals { display: flex; justify-content: space-between; font-size: .58rem; color: var(--gold); margin-bottom: 12px; }
.pg-range-slider { width: 100%; accent-color: var(--gold); }
/* Metal swatches */
.pg-metal-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-metal-swatch {
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: all var(--fast);
position: relative;
}
.pg-metal-swatch.active, .pg-metal-swatch:hover { border-color: var(--gold); transform: scale(1.1); }
.pg-metal-swatch.yellow { background: radial-gradient(circle at 35% 35%, #f5d660, #C9A84C 50%, #9a7318); }
.pg-metal-swatch.white { background: radial-gradient(circle at 35% 35%, #f4f4f4, #d0d0d0 50%, #9a9a9a); }
.pg-metal-swatch.rose { background: radial-gradient(circle at 35% 35%, #e8a898, #c9826a 50%, #8b4a2a); }
.pg-metal-swatch.platinum { background: radial-gradient(circle at 35% 35%, #e8e8f0, #c8c8d8 50%, #909098); }
/* Diamond shape filter */
.pg-shape-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.pg-shape-opt {
border: .5px solid rgba(201,168,76,.15);
padding: 10px 6px;
cursor: pointer;
text-align: center;
transition: all var(--fast);
font-size: .5rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-dim);
}
.pg-shape-opt:hover, .pg-shape-opt.active { border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,.05); }
.pg-shape-icon { font-size: 1.1rem; display: block; margin-bottom: 4px; color: rgba(201,168,76,.4); }
/* Shop main area */
.pg-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: .5px solid rgba(201,168,76,.08);
flex-wrap: wrap;
gap: 12px;
}
.pg-shop-results { font-size: .58rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }
.pg-shop-sort-wrap { display: flex; align-items: center; gap: 12px; }
.pg-shop-sort {
background: var(--soft);
border: .5px solid rgba(201,168,76,.15);
color: var(--text-mid);
font-size: .6rem;
padding: 9px 14px;
letter-spacing: 1px;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23D4AF37'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.pg-view-toggle { display: flex; gap: 4px; }
.pg-view-btn {
width: 34px; height: 34px;
border: .5px solid rgba(201,168,76,.15);
background: none;
color: var(--text-dim);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--fast);
font-size: .7rem;
}
.pg-view-btn.active, .pg-view-btn:hover { background: rgba(201,168,76,.08); color: var(--gold); border-color: var(--gold-border); }
/* Active filters */
.pg-active-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.pg-active-filter {
font-size: .5rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--gold);
background: rgba(201,168,76,.08);
border: .5px solid rgba(201,168,76,.25);
padding: 5px 10px 5px 12px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all var(--fast);
}
.pg-active-filter:hover { background: rgba(212,175,55,.14); }
.pg-active-filter-x { font-size: .7rem; }
.pg-clear-filters { font-size: .52rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); background: none; border: none; cursor: pointer; text-decoration: underline; transition: color var(--fast); }
.pg-clear-filters:hover { color: var(--gold); }
/* =========================================================
25. SINGLE PRODUCT PAGE
========================================================= */
/* Main page wrapper - add top padding to clear fixed header */
.pg-product-main {
padding-top: 80px;
background: var(--black);
}
/* The 2-column layout container (gallery left | details right) */
.pg-product-layout,
.pg-product-single {
display: grid;
grid-template-columns: 54% 1fr;
gap: 56px;
padding: 48px 0 64px;
align-items: start;
}
/* Gallery column — sticky so it stays visible while user scrolls details */
.pg-gallery {
position: sticky;
top: 90px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Product details / summary column */
.pg-product-summary {
display: flex;
flex-direction: column;
gap: 0;
}
.pg-gallery-sticky { position: sticky; top: 90px; }
.pg-gallery-main,
.pg-gallery-main-img {
height: 520px;
background: var(--soft);
border: .5px solid rgba(201,168,76,.15);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
margin-bottom: 12px;
cursor: zoom-in;
}
.pg-gallery-main img {
width: 100%; height: 100%;
object-fit: contain;
padding: 32px;
transition: transform var(--medium);
}
.pg-gallery-main.is-zoomed img { transform: scale(1.8); cursor: zoom-out; }
.pg-gallery-360-btn {
position: absolute;
bottom: 14px;
right: 14px;
background: rgba(245,240,232,.92);
border: .5px solid var(--gold-border);
color: var(--gold);
font-size: .5rem;
letter-spacing: 2px;
text-transform: uppercase;
padding: 8px 12px;
cursor: pointer;
z-index: 3;
display: flex;
align-items: center;
gap: 6px;
transition: all var(--fast);
}
.pg-gallery-360-btn:hover { background: var(--gold-brand); color: var(--black); }
.pg-gallery-thumbs, .pg-thumbnails { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pg-gallery-thumb, .pg-thumb {
flex-shrink: 0;
width: 72px;
height: 72px;
aspect-ratio: 1;
background: var(--soft);
border: .5px solid rgba(201,168,76,.10);
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transition: border-color var(--fast);
}
.pg-gallery-thumb img, .pg-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: opacity var(--fast); }
.pg-gallery-thumb:hover img, .pg-gallery-thumb.active img,
.pg-thumb:hover img, .pg-thumb.is-active { opacity: 1; }
.pg-gallery-thumb:hover, .pg-gallery-thumb.active,
.pg-thumb:hover, .pg-thumb.is-active { border-color: var(--gold); opacity: 1; }
/* Product summary */
.pg-product-sale-pill {
display: inline-block;
background: var(--gold-brand);
color: var(--black);
font-size: .5rem;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 5px 12px;
margin-bottom: 16px;
}
.pg-product-cat-link {
font-size: .54rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 8px;
text-decoration: none;
}
.pg-product-name {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 3vw, 2.8rem);
color: #fff;
font-weight: 400;
line-height: 1.18;
margin-bottom: 6px;
}
.pg-product-sku {
font-size: .54rem;
letter-spacing: 2px;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 14px;
}
.pg-product-rating-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pg-product-price-block {
padding: 22px 0;
border-top: .5px solid rgba(201,168,76,.12);
border-bottom: .5px solid rgba(201,168,76,.12);
margin-bottom: 24px;
display: flex;
align-items: flex-end;
gap: 20px;
flex-wrap: wrap;
}
.pg-product-price-now {
font-family: 'Playfair Display', serif;
font-size: 2.6rem;
color: var(--gold);
line-height: 1;
}
.pg-product-price-was { font-size: 1rem; color: var(--text-dim); text-decoration: line-through; }
.pg-product-price-save {
font-size: .5rem;
font-weight: 700;
letter-spacing: 2px;
background: rgba(201,168,76,.10);
border: .5px solid rgba(201,168,76,.3);
color: var(--gold);
padding: 8px 14px;
text-transform: uppercase;
}
/* Customisation options */
.pg-customise-options { margin-bottom: 24px; }
.pg-option-group { margin-bottom: 20px; }
.pg-option-label {
font-size: .54rem;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.pg-option-label span { font-size: .6rem; color: var(--text-mid); letter-spacing: 0; text-transform: none; font-weight: 400; }
/* Metal options */
.pg-metal-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.pg-metal-opt {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 10px 12px;
border: .5px solid rgba(201,168,76,.15);
min-width: 70px;
transition: all var(--fast);
}
.pg-metal-opt:hover, .pg-metal-opt.selected { border-color: var(--gold); background: rgba(201,168,76,.04); }
.pg-metal-ball { width: 28px; height: 28px; border-radius: 50%; }
.pg-metal-name { font-size: .5rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; transition: color var(--fast); }
.pg-metal-opt.selected .pg-metal-name { color: var(--gold); }
/* Size selector */
.pg-size-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-size-opt {
width: 44px; height: 44px;
border: .5px solid rgba(201,168,76,.15);
display: flex;
align-items: center;
justify-content: center;
font-size: .64rem;
color: var(--text-dim);
cursor: pointer;
transition: all var(--fast);
}
.pg-size-opt:hover, .pg-size-opt.selected { background: var(--gold-brand); color: var(--black); border-color: var(--gold); }
.pg-size-opt.unavailable { opacity: .3; cursor: not-allowed; position: relative; }
.pg-size-opt.unavailable::after { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 45%, rgba(255,0,0,.4) 45%, rgba(255,0,0,.4) 55%, transparent 55%); }
.pg-size-guide-link { font-size: .52rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(201,168,76,.5); cursor: pointer; text-decoration: underline; transition: color var(--fast); background: none; border: none; }
.pg-size-guide-link:hover { color: var(--gold); }
/* Engraving */
.pg-engraving-inp {
width: 100%;
background: var(--soft);
border: .5px solid rgba(212,175,55,.18);
color: var(--text-mid);
font-size: .74rem;
padding: 13px 16px;
outline: none;
transition: border-color var(--fast);
font-family: 'Cormorant Garamond', serif;
letter-spacing: 2px;
}
.pg-engraving-inp:focus { border-color: var(--gold); }
.pg-engraving-inp::placeholder { color: var(--text-deep); font-family: 'Montserrat', sans-serif; font-size: .68rem; letter-spacing: .5px; }
.pg-engraving-count { font-size: .5rem; color: var(--text-dim); text-align: right; margin-top: 4px; }
/* Add to cart row */
.pg-add-to-cart-row { display: flex; gap: 12px; margin-bottom: 14px; }
.pg-qty-wrap {
display: flex;
align-items: center;
border: .5px solid rgba(201,168,76,.22);
flex-shrink: 0;
}
.pg-qty-btn {
width: 40px; height: 52px;
background: var(--soft);
border: none;
color: var(--gold);
cursor: pointer;
font-size: 1.2rem;
transition: background var(--fast);
}
.pg-qty-btn:hover { background: rgba(201,168,76,.10); }
.pg-qty-inp { width: 48px; height: 52px; background: var(--card); border: none; color: var(--text-mid); text-align: center; font-size: .8rem; }
.pg-atc-btn {
flex: 1;
background: var(--gold-brand);
color: var(--black);
border: none;
font-size: .6rem;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 700;
padding: 0 24px;
cursor: pointer;
transition: all .3s;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.pg-atc-btn:hover { background: var(--gold-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,168,76,.3); }
.pg-wishlist-atc {
width: 52px; height: 52px;
border: .5px solid rgba(201,168,76,.22);
background: var(--soft);
color: var(--text-dim);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--fast);
}
.pg-wishlist-atc:hover, .pg-wishlist-atc.is-wishlisted { background: rgba(201,168,76,.10); color: var(--gold); border-color: var(--gold-border); }
/* Specs table */
.pg-specs-table-wrap { border: .5px solid rgba(201,168,76,.12); margin: 22px 0; }
.pg-specs-table-head { font-size: .52rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); padding: 12px 18px; background: rgba(201,168,76,.04); border-bottom: .5px solid rgba(201,168,76,.10); font-weight: 600; }
.pg-specs-tbl { width: 100%; border-collapse: collapse; }
.pg-specs-tbl tr { border-bottom: .5px solid rgba(26,24,20,.07); }
.pg-specs-tbl tr:last-child { border-bottom: none; }
.pg-specs-tbl td:first-child { font-size: .58rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); padding: 12px 18px; width: 44%; vertical-align: top; }
.pg-specs-tbl td:last-child { font-size: .72rem; color: var(--text-mid); padding: 12px 18px 12px 0; text-align: right; }
.pg-specs-tbl td:last-child strong { color: var(--gold); font-weight: 500; }
/* Trust badges */
.pg-product-trust { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(201,168,76,.08); margin-top: 20px; }
.pg-product-trust-item { background: var(--card); padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.pg-product-trust-icon { font-size: 1.2rem; color: var(--gold); line-height: 1; }
.pg-product-trust-text { font-size: .5rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); line-height: 1.5; }
/* =========================================================
26. RING SIZE CALCULATOR MODAL
========================================================= */
.pg-size-calc {
position: fixed;
inset: 0;
background: rgba(26,24,20,.85);
z-index: 9900;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity var(--medium);
}
.pg-size-calc.is-open { opacity: 1; pointer-events: all; }
.pg-size-calc-inner {
background: var(--card);
border: .5px solid var(--gold-border);
max-width: 600px;
width: 100%;
padding: 48px;
position: relative;
}
.pg-size-table { width: 100%; border-collapse: collapse; font-size: .64rem; }
.pg-size-table th { font-size: .5rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold); padding: 10px 14px; text-align: left; background: rgba(201,168,76,.04); border-bottom: .5px solid rgba(201,168,76,.15); }
.pg-size-table td { padding: 10px 14px; border-bottom: .5px solid rgba(26,24,20,.07); color: var(--text-dim); }
.pg-size-table tr:last-child td { border-bottom: none; }
.pg-size-table tr:hover td { background: rgba(212,175,55,.03); color: var(--text-mid); }
/* =========================================================
27. DIAMOND EDUCATION PAGE
========================================================= */
.pg-4cs-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(201,168,76,.08); }
.pg-4c-card { padding: 56px 36px; background: var(--card); text-align: center; transition: background var(--medium); }
.pg-4c-card:hover { background: var(--soft-2); }
.pg-4c-icon { font-family: 'Playfair Display', serif; font-size: 3.5rem; color: rgba(201,168,76,.15); line-height: 1; margin-bottom: 20px; display: block; }
.pg-4c-letter { font-family: 'Playfair Display', serif; font-size: 4.5rem; color: rgba(201,168,76,.08); position: absolute; top: 16px; right: 20px; line-height: 1; pointer-events: none; }
.pg-4c-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: #fff; font-weight: 400; margin-bottom: 10px; }
.pg-4c-scale { display: flex; flex-direction: column; gap: 3px; margin: 16px 0; }
.pg-4c-scale-item { display: flex; align-items: center; gap: 8px; font-size: .58rem; color: var(--text-dim); }
.pg-4c-bar { height: 3px; background: var(--gold-brand); border-radius: 0; }
.pg-shapes-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.pg-shape-card {
border: .5px solid rgba(201,168,76,.12);
padding: 28px 16px;
text-align: center;
cursor: pointer;
transition: all var(--fast);
background: var(--card);
}
.pg-shape-card:hover, .pg-shape-card.active { border-color: var(--gold); background: rgba(201,168,76,.04); transform: translateY(-3px); }
.pg-shape-svg { height: 50px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.pg-shape-name { font-size: .54rem; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); transition: color var(--fast); }
.pg-shape-card:hover .pg-shape-name, .pg-shape-card.active .pg-shape-name { color: var(--gold); }
/* =========================================================
28. BLOG LAYOUTS
========================================================= */
.pg-blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.pg-blog-card { background: var(--card); border: .5px solid rgba(201,168,76,.08); overflow: hidden; transition: all var(--medium); }
.pg-blog-card:hover { border-color: rgba(201,168,76,.3); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(26,24,20,.1); }
.pg-blog-img { aspect-ratio: 16/9; overflow: hidden; background: var(--soft); }
.pg-blog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow); }
.pg-blog-card:hover .pg-blog-img img { transform: scale(1.05); }
.pg-blog-body { padding: 24px 22px; }
.pg-blog-cat { font-size: .5rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.pg-blog-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: #fff; font-weight: 400; margin-bottom: 12px; line-height: 1.35; }
.pg-blog-title a { color: inherit; text-decoration: none; transition: color var(--fast); }
.pg-blog-title a:hover { color: var(--gold); }
.pg-blog-meta { display: flex; gap: 16px; font-size: .52rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-top: 14px; }
.pg-blog-excerpt { font-size: .7rem; color: var(--text-muted); line-height: 1.8; }
.pg-blog-read-more { font-size: .52rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; transition: gap var(--fast); }
.pg-blog-read-more:hover { gap: 12px; }
/* =========================================================
29. BREADCRUMBS
========================================================= */
.pg-breadcrumb {
padding: 18px 48px;
background: var(--black);
border-bottom: .5px solid rgba(201,168,76,.06);
font-size: .54rem;
letter-spacing: 1.5px;
color: var(--text-dim);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.pg-breadcrumb a { color: var(--text-dim); text-decoration: none; transition: color var(--fast); }
.pg-breadcrumb a:hover { color: var(--gold); }
.pg-breadcrumb-sep { color: rgba(201,168,76,.25); }
/* pg-bc-sep — alias used in cart/checkout/shop breadcrumbs */
.pg-bc-sep { color: rgba(201,168,76,.25); margin: 0 8px; font-size: 12px; }
.pg-breadcrumb-current { color: var(--text-mid); font-weight: 500; }
/* ── Section heading helpers (used across all pages) ── */
.pg-section-label {
display: block;
font-size: 10px; letter-spacing: .25em; text-transform: uppercase;
color: var(--gold); margin-bottom: 4px;
}
.pg-section-title {
font-family: var(--font-serif);
font-size: clamp(22px, 3vw, 32px);
font-weight: 400; color: var(--text-bright, #1A1814); margin: 0;
}
.pg-section-head {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 28px; flex-wrap: wrap; gap: 10px;
}
.pg-section-view-all {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--gold); text-decoration: none;
border-bottom: .5px solid transparent; transition: border-color .2s;
}
.pg-section-view-all:hover { border-bottom-color: var(--gold); }
.pg-section-footer { text-align: center; margin-top: 32px; }
/* =========================================================
30. PAGE HERO (inner pages)
========================================================= */
.pg-page-hero {
padding: 100px 48px 80px;
background: var(--black);
position: relative;
overflow: hidden;
}
.pg-page-hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 70% 50%, rgba(212,175,55,.05) 0%, transparent 60%);
pointer-events: none;
}
.pg-page-hero-content { max-width: 680px; position: relative; z-index: 2; }
/* =========================================================
31. COMPARISON TABLE
========================================================= */
.pg-compare-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--card);
border-top: 2px solid var(--gold);
padding: 16px 48px;
z-index: 8000;
transform: translateY(100%);
transition: transform var(--medium);
display: flex;
align-items: center;
gap: 20px;
}
.pg-compare-bar.is-visible { transform: translateY(0); }
.pg-compare-item { display: flex; align-items: center; gap: 12px; border: .5px solid var(--gold-border); padding: 8px 12px; }
.pg-compare-item img { width: 48px; height: 48px; object-fit: contain; }
.pg-compare-item-name { font-size: .62rem; color: var(--text-mid); max-width: 120px; }
.pg-compare-remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: .9rem; }
.pg-compare-btn { margin-left: auto; }
/* =========================================================
32. SCROLL ANIMATIONS
========================================================= */
.pg-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.pg-reveal.is-visible { opacity: 1; transform: translateY(0); }
.pg-reveal-delay-1 { transition-delay: .1s; }
.pg-reveal-delay-2 { transition-delay: .2s; }
.pg-reveal-delay-3 { transition-delay: .3s; }
.pg-reveal-delay-4 { transition-delay: .4s; }
/* =========================================================
33. WC OVERRIDES
========================================================= */
.woocommerce-page, .woocommerce { background: var(--black); }
.woocommerce .col2-set, .woocommerce-page .col2-set { width: 100%; }
.woocommerce span.onsale { background: var(--gold-brand) !important; color: var(--black) !important; border-radius: 0 !important; font-family: 'Montserrat', sans-serif !important; font-size: .5rem !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; min-height: unset !important; min-width: unset !important; padding: 5px 10px !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--gold-brand) !important; color: var(--black) !important; font-family: 'Montserrat', sans-serif !important; font-size: .58rem !important; letter-spacing: 3px !important; text-transform: uppercase !important; font-weight: 700 !important; border-radius: 0 !important; padding: 14px 28px !important; transition: all .3s !important; }
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--gold-dark) !important; transform: translateY(-1px) !important; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--gold-brand) !important; }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { background: var(--card); border: .5px solid var(--gold-border); padding: 32px; }
.woocommerce table.shop_table { background: var(--card); border: .5px solid rgba(201,168,76,.10) !important; border-radius: 0 !important; }
.woocommerce table.shop_table th { font-family: 'Montserrat', sans-serif; font-size: .52rem; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); background: rgba(201,168,76,.04); border-bottom: .5px solid rgba(201,168,76,.15) !important; }
.woocommerce table.shop_table td { border-bottom: .5px solid rgba(255,255,255,.04) !important; color: var(--text-mid); }
.woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info { background: rgba(201,168,76,.08) !important; border-top-color: var(--gold) !important; color: var(--text-mid) !important; }
.woocommerce-form-login input[type="text"], .woocommerce-form-login input[type="password"], .woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"], .woocommerce-checkout input[type="tel"], .woocommerce-checkout select, .woocommerce-checkout textarea { background: var(--soft) !important; border: .5px solid rgba(212,175,55,.18) !important; color: var(--text-mid) !important; border-radius: 0 !important; padding: 13px 16px !important; }
.woocommerce-checkout input:focus, .woocommerce-checkout select:focus, .woocommerce-checkout textarea:focus { border-color: var(--gold) !important; outline: none !important; }
.woocommerce label { color: var(--text-muted) !important; font-size: .64rem !important; letter-spacing: 1px !important; }
/* Star ratings */
.woocommerce .star-rating span::before { color: var(--gold) !important; }
.woocommerce .star-rating { color: rgba(201,168,76,.25) !important; }
/* Wishlist Active States */
.is-wishlisted svg, button.is-wishlisted svg, .pcard__wish.is-wishlisted svg, .pg-wishlist-btn.is-wishlisted svg {
fill: var(--gold) !important;
color: var(--gold) !important;
}
.pg-wishlist-count {
font-size: 10px !important;
}
/* WC Blocks Overrides */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout {
background: var(--black) !important;
padding: 20px 0;
}
.wc-block-cart-items, .wc-block-components-sidebar, .wc-block-checkout__main, .wc-block-checkout__sidebar {
background: var(--card) !important;
border: .5px solid rgba(201,168,76,.15) !important;
border-radius: 8px !important;
padding: 32px !important;
}
.wc-block-cart-items th, .wc-block-components-sidebar th, .wc-block-components-order-summary th {
font-family: 'Montserrat', sans-serif !important;
font-size: .52rem !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--gold) !important;
background: rgba(201,168,76,.04) !important;
border-bottom: .5px solid rgba(201,168,76,.15) !important;
}
.wc-block-cart-items td, .wc-block-components-totals-item {
border-bottom: .5px solid rgba(255,255,255,.04) !important;
}
.wc-block-components-product-name, .wc-block-components-totals-item__label, .wc-block-components-totals-item__value, .wc-block-components-address-card__contact {
color: var(--text-bright) !important;
}
.wc-block-components-product-price, .wc-block-components-totals-item__value {
color: var(--gold) !important;
font-weight: 500 !important;
}
.wc-block-components-button:not(.is-link) {
background: var(--gold-brand) !important;
color: var(--black) !important;
font-family: 'Montserrat', sans-serif !important;
font-size: .58rem !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
font-weight: 700 !important;
border-radius: 0 !important;
padding: 14px 28px !important;
transition: all .3s !important;
border: none !important;
}
.wc-block-components-button:not(.is-link):hover {
background: var(--gold-dark) !important;
transform: translateY(-1px) !important;
}
.wc-block-components-text-input input, .wc-block-components-radio-control input[type="radio"] {
background: var(--soft) !important;
border: .5px solid rgba(212,175,55,.18) !important;
color: var(--text-mid) !important;
}
.wc-block-components-text-input label {
color: var(--text-muted) !important;
}
.wc-block-cart__totals-title, .wc-block-checkout__title {
font-family: var(--font-serif) !important;
color: var(--gold) !important;
font-weight: 400 !important;
font-size: 1.5rem !important;
}
/* =========================================================
34. RESPONSIVE
========================================================= */
@media (max-width: 1280px) {
.pg-header-inner { padding: 0 32px; }
.pg-footer-main { padding: 60px 32px 48px; }
.pg-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
.pg-section, .pg-section-alt { padding: var(--sp-lg) var(--sp-md); }
.pg-shop-layout { padding: 30px 32px 60px; }
}
@media (max-width: 1024px) {
.pg-primary-nav { display: none; }
.pg-hamburger { display: flex; }
.pg-header-inner { padding: 0 24px; }
.pg-product-single { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px; }
.pg-gallery-sticky { position: static; }
.pg-modal-inner { grid-template-columns: 1fr; }
.pg-modal-gallery { height: 300px; }
.pg-shop-layout { grid-template-columns: 1fr; padding: 24px; }
.pg-shop-sidebar { position: static; display: none; }
.pg-shop-sidebar.is-open { display: block; }
.pg-story-wrap { grid-template-columns: 1fr; }
.pg-story-content { padding: 48px 32px; }
.pg-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.pg-trust-grid { grid-template-columns: repeat(3,1fr); }
.pg-4cs-grid { grid-template-columns: repeat(2,1fr); }
.pg-shapes-grid { grid-template-columns: repeat(4,1fr); }
.pg-instagram-grid { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 768px) {
.pg-container, .pg-container-md { padding: 0 20px; }
.pg-section, .pg-section-alt { padding: 60px 20px; }
.pg-hero-content { padding: 0 24px; max-width: 100%; }
.pg-products-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
.pg-cat-grid { grid-template-columns: repeat(2,1fr); }
.pg-cat-card.wide { grid-column: span 1; aspect-ratio: 3/4; }
.pg-blog-grid { grid-template-columns: 1fr; }
.pg-footer-grid { grid-template-columns: 1fr; gap: 32px; }
.pg-footer-main { padding: 48px 20px 40px; }
.pg-footer-bottom { padding: 16px 20px; flex-direction: column; gap: 14px; }
.pg-testi-slide { flex: 0 0 90%; }
.pg-builder-steps { flex-direction: column; align-items: center; gap: 16px; }
.pg-builder-steps::before { display: none; }
.pg-trust-grid { grid-template-columns: repeat(2,1fr); }
.pg-4cs-grid { grid-template-columns: 1fr; }
.pg-shapes-grid { grid-template-columns: repeat(3,1fr); }
.pg-instagram-grid { grid-template-columns: repeat(3,1fr); }
.pg-breadcrumb { padding: 14px 20px; }
.pg-page-hero { padding: 70px 20px 56px; }
.pg-newsletter-inner { flex-direction: column; gap: 28px; }
.pg-wishlist-panel { width: 100%; right: -100%; }
.pg-compare-bar { padding: 14px 20px; flex-wrap: wrap; }
}
@media (max-width: 480px) {
.pg-products-grid { grid-template-columns: 1fr; }
.pg-hero-btns { flex-direction: column; }
.pg-hero-stats { gap: 24px; }
.pg-cat-grid { grid-template-columns: 1fr; }
.pg-shapes-grid { grid-template-columns: repeat(2,1fr); }
.pg-instagram-grid { grid-template-columns: repeat(2,1fr); }
.pg-add-to-cart-row { flex-wrap: wrap; }
.pg-atc-btn { min-height: 52px; }
.pg-product-price-now { font-size: 2rem; }
}
/* ═══════════════════════════════════════════════════════════
HOMEPAGE ADDITIONS — PATTERN jewellery-theme
Added: pg-marquee, pg-why-grid 6-col, pg-craft, pg-bridal-stats,
pg-sale-banner, pg-builder-steps, cart/checkout, newsletter AJAX
═══════════════════════════════════════════════════════════ */
/* ── pg-h1 / pg-h2 / pg-lead / pg-eyebrow / pg-container ── */
.pg-container { max-width: var(--container, 1280px); margin: 0 auto; padding: 0 40px; }
.pg-h1 { font-family: var(--font-serif); font-size: clamp(36px,6vw,80px); font-weight: 400; line-height: 1.1; color: #e8dab8; }
.pg-h1 em { color: var(--gold); font-style: italic; }
.pg-h2 { font-family: var(--font-serif); font-size: clamp(28px,4vw,52px); font-weight: 400; line-height: 1.15; color: var(--text-mid); }
.pg-h2 em { color: var(--gold); font-style: italic; }
.pg-eyebrow { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 12px; }
.pg-lead { font-size: 15px; color: var(--text-muted); line-height: 1.85; }
.pg-text-center { text-align: center; }
.pg-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); transition: all var(--fast); cursor: pointer; border: none; font-family: var(--font-body, 'Montserrat', sans-serif); }
.pg-btn-gold { background: linear-gradient(135deg, var(--gold-brand) 0%, var(--champagne) 100%); color: #000; }
.pg-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,168,76,.35); color: #000; }
.pg-btn-ghost { background: transparent; color: var(--gold); border: .5px solid rgba(201,168,76,.4); }
.pg-btn-ghost:hover { background: rgba(201,168,76,.08); border-color: var(--gold); }
.pg-btn-outline { background: transparent; color: var(--text-muted); border: .5px solid rgba(200,191,168,.25); }
.pg-btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.pg-btn-sm { padding: 10px 22px; font-size: 8px; }
.pg-section { padding: 100px 0; }
.pg-section--sm { padding: 64px 0; }
.pg-section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; flex-wrap: wrap; gap: 16px; }
.pg-section-header-left { display: flex; flex-direction: column; }
.pg-products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.pg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
/* ── pg-reveal scroll animation ── */
.pg-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pg-reveal.is-visible { opacity: 1; transform: none; }
.pg-reveal-delay-1 { transition-delay: .1s; }
.pg-reveal-delay-2 { transition-delay: .2s; }
.pg-reveal-delay-3 { transition-delay: .3s; }
/* ── Marquee (§2) ── */
.pg-marquee { background: #FAF8F3; border-top: .5px solid rgba(201,168,76,.12); border-bottom: .5px solid rgba(201,168,76,.12); overflow: hidden; padding: 14px 0; }
.pg-marquee-track { display: flex; gap: 0; animation: pg-ticker 28s linear infinite; white-space: nowrap; width: max-content; }
.pg-marquee:hover .pg-marquee-track { animation-play-state: paused; }
.pg-marquee-item { display: inline-flex; align-items: center; gap: 12px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: #777; padding: 0 32px; }
.pg-marquee-item .gem { color: var(--gold); font-size: 10px; }
@keyframes pg-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ── Sale Banner (§2b) ── */
.pg-sale-banner { background: linear-gradient(90deg,#1A1814 0%,#2D2924 40%,#1A1814 100%); border-top: .5px solid rgba(201,168,76,.15); border-bottom: .5px solid rgba(201,168,76,.15); padding: 14px 0; }
.pg-sale-banner-inner { display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap; }
.pg-sale-banner-badge { background: var(--gold-brand); color: #000; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; flex-shrink: 0; }
.pg-sale-banner-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pg-sale-banner-headline { font-family: var(--font-serif); font-size: 16px; font-weight: 400; color: var(--champagne); letter-spacing: .04em; }
.pg-sale-banner-sub { font-size: 11px; color: var(--text-muted); letter-spacing: .04em; }
.pg-sale-banner-sub::before { content: '—'; margin-right: 8px; color: rgba(201,168,76,.3); }
/* ── Cat grid (§3) ── */
.pg-cat-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 2px; }
.pg-cat-card { position: relative; overflow: hidden; text-decoration: none; aspect-ratio: 1; }
.pg-cat-card.is-wide { grid-row: span 2; aspect-ratio: auto; }
.pg-cat-card-img { position: absolute; inset: 0; }
.pg-cat-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,24,20,.7) 0%, rgba(26,24,20,.15) 50%, transparent 100%); transition: background var(--medium); }
.pg-cat-card:hover .pg-cat-card-overlay { background: linear-gradient(to top, rgba(26,24,20,.78) 0%, rgba(26,24,20,.25) 60%, rgba(26,24,20,.08) 100%); }
.pg-cat-card-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 1; }
.pg-cat-card-body .pg-eyebrow { color: var(--gold); opacity: .7; margin-bottom: 6px; }
.pg-cat-card-body h3 { font-family: var(--font-serif); font-size: 20px; font-weight: 400; color: var(--text-mid); line-height: 1.2; margin-bottom: 4px; }
.pg-cat-card-body p { font-size: 10px; color: var(--text-muted); letter-spacing: .06em; margin: 0; }
.pg-cat-card-arrow { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; background: rgba(201,168,76,.12); border: .5px solid rgba(201,168,76,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold); opacity: 0; transform: translateY(-4px); transition: all var(--fast); }
.pg-cat-card:hover .pg-cat-card-arrow { opacity: 1; transform: none; }
/* ── Product card ── */
.pg-product-card { background: var(--card); border: .5px solid rgba(201,168,76,.08); border-radius: var(--radius-lg); overflow: hidden; transition: all var(--medium); display: flex; flex-direction: column; }
.pg-product-card:hover { border-color: rgba(212,175,55,.28); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.pg-product-card-img { position: relative; padding-top: 100%; overflow: hidden; }
.pg-product-card-img img { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.pg-product-card-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.pg-badge { font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; }
.pg-badge-new { background: var(--gold-brand); color: #000; }
.pg-badge-sale { background: #c0392b; color: #fff; }
.pg-product-card-actions { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; opacity: 0; transition: opacity var(--fast); }
.pg-product-card:hover .pg-product-card-actions { opacity: 1; }
.pg-product-card-actions button { width: 34px; height: 34px; background: rgba(245,240,232,.92); backdrop-filter: blur(8px); border: .5px solid rgba(201,168,76,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; transition: all var(--fast); }
.pg-product-card-actions button:hover { background: rgba(201,168,76,.15); border-color: var(--gold); color: var(--gold); }
.pg-product-card-body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pg-product-card-meta { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.pg-product-card-title { font-family: var(--font-serif); font-size: 15px; font-weight: 400; color: #d4cfc5; line-height: 1.35; text-decoration: none; margin-top: 2px; }
.pg-product-card-title:hover { color: var(--gold); }
.pg-product-card-price { font-size: 13px; font-weight: 600; color: var(--gold); margin-top: 6px; }
.pg-product-card-price del { color: #555; font-weight: 400; margin-right: 6px; }
/* ── Slider ── */
.pg-slider-outer { position: relative; }
.pg-slider-viewport { overflow: hidden; }
.pg-slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(25% - 18px); gap: 24px; transition: transform .4s var(--ease); }
.pg-slider-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.pg-slider-btn { width: 44px; height: 44px; background: rgba(201,168,76,.06); border: .5px solid rgba(201,168,76,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; transition: all var(--fast); }
.pg-slider-btn:hover { background: rgba(212,175,55,.14); border-color: var(--gold); color: var(--gold); }
.pg-slider-dots { display: flex; gap: 6px; align-items: center; }
.pg-slider-dot { width: 4px; height: 4px; border-radius: 50%; background: #444; cursor: pointer; transition: all var(--fast); }
.pg-slider-dot.is-active { background: var(--gold-brand); transform: scale(1.6); }
/* ── Builder CTA (§5) ── */
.pg-builder-cta { background: linear-gradient(135deg,#1A1814 0%,#2D2924 50%,#1A1814 100%); border-top: .5px solid rgba(201,168,76,.08); border-bottom: .5px solid rgba(201,168,76,.08); }
.pg-builder-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.pg-builder-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg-builder-step { background: rgba(201,168,76,.04); border: .5px solid rgba(201,168,76,.10); border-radius: var(--radius-lg); padding: 24px; transition: all var(--fast); }
.pg-builder-step:hover { border-color: rgba(201,168,76,.35); background: rgba(212,175,55,.07); transform: translateY(-3px); }
.pg-builder-step-num { font-family: var(--font-serif); font-size: 32px; font-weight: 400; color: rgba(201,168,76,.25); line-height: 1; margin-bottom: 10px; }
.pg-builder-step h4 { font-family: var(--font-serif); font-size: 16px; font-weight: 400; color: var(--text-mid); margin-bottom: 6px; }
.pg-builder-step p { font-size: 11px; color: #777; line-height: 1.6; margin: 0; }
/* ── Craftsmanship (§6) ── */
.pg-craft { background: var(--card); }
.pg-craft-img { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 480px; background: linear-gradient(135deg,#F5ECD5,#FAF8F3); display: flex; align-items: center; justify-content: center; }
.pg-craft-img-bg { font-size: 140px; opacity: .07; user-select: none; }
.pg-craft-img-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom,transparent 30%,rgba(26,24,20,.4) 100%); }
.pg-craft-img-tag { position: absolute; bottom: 24px; left: 24px; background: rgba(245,240,232,.95); border: .5px solid rgba(201,168,76,.22); border-radius: var(--radius-lg); padding: 16px 20px; backdrop-filter: blur(8px); text-align: center; }
.pg-craft-img-tag .num { font-family: var(--font-serif); font-size: 32px; color: var(--gold); line-height: 1; }
.pg-craft-img-tag .lbl { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.pg-craft-steps { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.pg-craft-step { display: flex; gap: 16px; }
.pg-craft-step-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.pg-craft-step-body h4 { font-family: var(--font-serif); font-size: 15px; font-weight: 400; color: #d4cfc5; margin-bottom: 4px; }
.pg-craft-step-body p { font-size: 11.5px; color: #777; line-height: 1.65; margin: 0; }
/* ── Why Choose Us 6-card grid (§7) ── */
.pg-why { background: var(--black); }
.pg-why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 56px; }
.pg-why-card { background: var(--card); border: .5px solid rgba(201,168,76,.06); padding: 40px 32px; transition: all var(--medium); position: relative; overflow: hidden; }
.pg-why-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(201,168,76,.04) 0%,transparent 60%); opacity: 0; transition: opacity var(--medium); }
.pg-why-card:hover { border-color: rgba(201,168,76,.3); transform: translateY(-4px); }
.pg-why-card:hover::before { opacity: 1; }
.pg-why-icon { width: 56px; height: 56px; border: .5px solid rgba(201,168,76,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 24px; transition: all var(--fast); background: rgba(201,168,76,.04); }
.pg-why-card:hover .pg-why-icon { background: rgba(201,168,76,.12); border-color: rgba(201,168,76,.5); transform: scale(1.08); }
.pg-why-card h4 { font-family: var(--font-serif); font-size: 18px; font-weight: 400; color: var(--text-mid); margin-bottom: 10px; }
.pg-why-card p { font-size: 12px; color: #777; line-height: 1.7; margin: 0; }
/* ── Bridal mini-stats (§8) ── */
.pg-bridal-stats { display: flex; gap: 40px; margin-top: 48px; padding-top: 32px; border-top: .5px solid rgba(201,168,76,.15); flex-wrap: wrap; }
.pg-bridal-stat-num { font-family: var(--font-serif); font-size: 28px; font-weight: 400; color: var(--gold); line-height: 1; }
.pg-bridal-stat-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.pg-bridal-title { font-size: clamp(32px,5vw,64px) !important; }
/* ── Bridal decorative diamond ── */
.pg-bridal-diamond-deco { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); opacity: .08; z-index: 1; pointer-events: none; }
.pg-bridal-diamond-outer { width: 320px; height: 320px; border: .5px solid var(--champagne); transform: rotate(45deg); }
.pg-bridal-diamond-inner { position: absolute; top: 10%; left: 10%; right: 10%; bottom: 10%; border: .5px solid var(--champagne); }
/* ── Instagram grid (§10) ── */
.pg-insta-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 4px; margin-top: 40px; }
.pg-insta-cell { position: relative; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.pg-insta-cell.is-wide { grid-row: span 2; aspect-ratio: auto; min-height: 400px; }
.pg-insta-cell-img { position: absolute; inset: 0; }
.pg-insta-cell-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.0); display: flex; align-items: center; justify-content: center; transition: background var(--fast); }
.pg-insta-cell:hover .pg-insta-cell-overlay { background: rgba(26,24,20,.42); }
.pg-insta-cell-icon { color: #fff; opacity: 0; transition: opacity var(--fast); }
.pg-insta-cell:hover .pg-insta-cell-icon { opacity: 1; }
/* ── Testimonials (§11) ── */
.pg-testi { background: var(--black); }
.pg-testi-slider { position: relative; overflow: hidden; margin-top: 56px; }
.pg-testi-track { display: flex; transition: transform var(--medium); }
.pg-testi-slide { flex: 0 0 100%; padding: 0 16px; }
.pg-testi-card { background: var(--card); border: .5px solid rgba(201,168,76,.10); border-radius: var(--radius-lg); padding: 48px; max-width: 760px; margin: 0 auto; position: relative; }
.pg-testi-card::before { content: '\201C'; position: absolute; top: 24px; left: 32px; font-family: var(--font-serif); font-size: 80px; color: rgba(201,168,76,.15); line-height: 1; pointer-events: none; }
.pg-testi-text { font-family: var(--font-alt,'Cormorant Garamond',serif); font-size: 18px; font-weight: 300; line-height: 1.8; color: var(--text-muted); position: relative; z-index: 1; margin: 0; }
.pg-testi-author { display: flex; align-items: center; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: .5px solid rgba(201,168,76,.10); }
.pg-testi-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,var(--gold-dark,#b8961e),#888); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 18px; color: var(--black); font-weight: 600; flex-shrink: 0; }
.pg-testi-name { font-weight: 600; font-size: 13px; color: var(--text-mid); }
.pg-testi-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pg-testi-stars { margin-left: auto; color: var(--gold); font-size: 14px; letter-spacing: 2px; }
/* ── Newsletter AJAX (§12) ── */
.pg-newsletter { background: linear-gradient(135deg,#F5ECD5 0%,#FAF8F3 50%,#F5ECD5 100%); border-top: .5px solid rgba(201,168,76,.10); position: relative; overflow: hidden; }
.pg-newsletter::before { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle,rgba(212,175,55,.05) 0%,transparent 70%); }
.pg-newsletter-inner { text-align: center; position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.pg-newsletter-form { display: flex; gap: 0; margin-top: 32px; max-width: 480px; margin-left: auto; margin-right: auto; }
.pg-newsletter-form .pg-newsletter-email { flex: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(201,168,76,.22); border-right: none; border-radius: var(--radius) 0 0 var(--radius); padding: 14px 20px; font-size: 13px; color: var(--text-mid); outline: none; transition: border-color var(--fast); font-family: var(--font-body,'Montserrat',sans-serif); }
.pg-newsletter-form .pg-newsletter-email:focus { border-color: rgba(201,168,76,.5); }
.pg-newsletter-form .pg-newsletter-email::placeholder { color: #555; }
.pg-newsletter-form button { padding: 14px 28px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.pg-newsletter-perks { display: flex; justify-content: center; gap: 32px; margin-top: 24px; }
.pg-newsletter-perks span { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.pg-newsletter-perks span::before { content: '\2736'; color: var(--gold); font-size: 8px; }
.pg-newsletter-msg { margin-top: 14px; font-size: 13px; text-align: center; padding: 10px 20px; border-radius: var(--radius); }
.pg-newsletter-msg.is-success { background: rgba(76,175,80,.1); border: 1px solid rgba(76,175,80,.3); color: #4caf80; }
.pg-newsletter-msg.is-error { background: rgba(224,85,85,.08); border: 1px solid rgba(224,85,85,.25); color: #e05555; }
.pg-newsletter-btn-loading { display: inline-flex; align-items: center; }
@keyframes pg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.pg-spinner { animation: pg-spin .7s linear infinite; display: block; }
/* ── Quick View Modal ── */
.pg-qv-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity var(--medium), visibility var(--medium); pointer-events: none; }
.pg-qv-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.pg-qv-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; background: rgba(26,24,20,.06); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; border: none; transition: all var(--fast); z-index: 1; }
.pg-qv-close:hover { background: rgba(201,168,76,.12); color: var(--gold); }
.pg-qv-inner { padding: 40px; }
/* ── Toast notification ── */
.pg-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--card); border: .5px solid var(--gold); border-radius: var(--radius-lg); padding: 14px 24px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-mid); z-index: 2000; opacity: 0; transition: all var(--medium); white-space: nowrap; box-shadow: 0 8px 24px rgba(26,24,20,.12); }
.pg-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.pg-toast-icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(201,168,76,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--gold); }
/* ── Hero scroll indicator ── */
.pg-hero-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: #555; cursor: pointer; transition: opacity .3s; }
.pg-hero-scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(201,168,76,.5), transparent); animation: pg-scrollLine 2s ease-in-out infinite; }
@keyframes pg-scrollLine { 0%,100% { opacity: .4; height: 48px; } 50% { opacity: 1; height: 60px; } }
/* ── WooCommerce WC notices ── */
.woocommerce-message, .woocommerce-error, .woocommerce-info { border-radius: 8px; padding: .9rem 1.25rem .9rem 2.75rem; margin-bottom: 1.25rem; font-size: .85rem; position: relative; list-style: none; }
.woocommerce-message { background: rgba(76,175,80,.12); border: 1px solid rgba(76,175,80,.3); color: #4caf80; }
.woocommerce-error { background: rgba(224,85,85,.1); border: 1px solid rgba(224,85,85,.3); color: #e05555; }
.woocommerce-info { background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.22); color: var(--gold); }
/* ── Cart / Checkout (complete) ── */
.pg-cart-img-strip { width: 100%; height: 4px; background: linear-gradient(90deg,var(--gold-brand) 0%,var(--champagne) 50%,var(--gold) 100%); }
.pg-cart-breadcrumb { font-size: 11px; color: #555; letter-spacing: .1em; text-transform: uppercase; padding: 20px 0 0; }
.pg-cart-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.pg-cart-breadcrumb span { margin: 0 8px; }
.pg-checkout-progress { padding: 24px 0 32px; }
.pg-steps { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 480px; margin: 0 auto; }
.pg-step { display: flex; align-items: center; flex: 1; }
.pg-step-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; z-index: 1; }
.pg-step-num { width: 32px; height: 32px; border-radius: 50%; background: rgba(26,24,20,.06); border: .5px solid rgba(26,24,20,.15); display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: var(--text-muted); transition: all .3s; }
.pg-step.is-active .pg-step-num { background: var(--gold-brand); color: #000; border-color: var(--gold); }
.pg-step.is-done .pg-step-num { background: rgba(201,168,76,.22); color: var(--gold); border-color: var(--gold); }
.pg-step-label { font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: #555; }
.pg-step.is-active .pg-step-label { color: var(--gold); }
.pg-step-line { flex: 1; height: .5px; background: rgba(255,255,255,.08); margin: 0 8px; margin-bottom: 18px; }
.pg-cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.pg-cart-table-wrap { background: var(--card); border: .5px solid rgba(201,168,76,.10); border-radius: var(--radius-lg); overflow: hidden; }
.pg-cart-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 20px; padding: 20px 24px; border-bottom: .5px solid rgba(201,168,76,.06); align-items: start; }
.pg-cart-item:last-child { border-bottom: none; }
.pg-cart-item-img { width: 88px; height: 88px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,.04); }
.pg-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.pg-cart-item-meta { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.pg-cart-item-name { font-family: var(--font-serif); font-size: 15px; font-weight: 400; color: #d4cfc5; text-decoration: none; }
.pg-cart-item-name:hover { color: var(--gold); }
.pg-cart-item .qty { background: rgba(255,255,255,.05); border: .5px solid rgba(201,168,76,.22); border-radius: var(--radius); color: var(--text-mid); font-size: .85rem; padding: 6px 12px; width: 70px; margin-top: 10px; text-align: center; }
.pg-cart-item-subtotal { font-size: 15px; font-weight: 600; color: var(--gold); text-align: right; white-space: nowrap; padding-top: 4px; }
.pg-cart-remove { display: block; font-size: 9px; letter-spacing: .08em; color: #555; text-decoration: none; margin-top: 6px; }
.pg-cart-remove:hover { color: #e05555; }
.pg-coupon-inline { display: flex; gap: 8px; padding: 20px 24px; border-top: .5px solid rgba(201,168,76,.06); flex-wrap: wrap; }
.pg-coupon-input { flex: 1; min-width: 180px; background: rgba(255,255,255,.04); border: .5px solid rgba(212,175,55,.18); border-radius: var(--radius); padding: 10px 16px; color: var(--text-mid); font-size: .82rem; outline: none; }
.pg-coupon-input:focus { border-color: rgba(201,168,76,.5); }
.pg-coupon-btn { padding: 10px 24px; background: transparent; border: .5px solid rgba(201,168,76,.3); border-radius: var(--radius); color: var(--gold); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: all var(--fast); white-space: nowrap; font-family: var(--font-body,'Montserrat',sans-serif); }
.pg-coupon-btn:hover { background: rgba(201,168,76,.08); border-color: var(--gold); }
.pg-update-cart { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; background: transparent; border: .5px solid rgba(26,24,20,.12); color: var(--text-muted); border-radius: var(--radius); cursor: pointer; transition: all var(--fast); font-family: var(--font-body,'Montserrat',sans-serif); }
.pg-update-cart:hover { border-color: rgba(201,168,76,.3); color: var(--gold); }
.pg-empty-cart { padding: 80px 24px; text-align: center; }
.pg-empty-cart-icon { font-size: 64px; opacity: .3; margin-bottom: 20px; }
.pg-empty-cart h3 { font-family: var(--font-serif); font-size: 22px; color: var(--text-muted); margin-bottom: 12px; }
.pg-empty-cart p { font-size: 13px; color: #555; margin-bottom: 24px; }
.pg-summary-card { background: var(--card); border: .5px solid rgba(201,168,76,.12); border-radius: var(--radius-lg); padding: 28px; position: sticky; top: 100px; }
.pg-summary-card h3 { font-family: var(--font-serif); font-size: 18px; color: var(--text-mid); margin-bottom: 20px; padding-bottom: 16px; border-bottom: .5px solid rgba(201,168,76,.10); }
.pg-summary-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.pg-summary-row { display: flex; justify-content: space-between; font-size: .82rem; }
.pg-summary-row span:first-child { color: #777; }
.pg-summary-row span:last-child { color: var(--text-muted); }
.pg-coupon-row span:last-child { color: #4caf80; }
.pg-summary-total-row { display: flex; justify-content: space-between; padding-top: 16px; border-top: .5px solid rgba(201,168,76,.15); margin-bottom: 20px; }
.pg-summary-total-row span:first-child { font-family: var(--font-serif); font-size: 15px; color: var(--text-mid); }
.pg-summary-total-row span:last-child { font-family: var(--font-serif); font-size: 18px; color: var(--gold); font-weight: 600; }
.pg-checkout-btn { display: block; background: linear-gradient(135deg,var(--gold-brand) 0%,var(--champagne) 100%); color: #000; font-weight: 700; text-align: center; padding: .9rem 1.5rem; border-radius: 8px; font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 1.5rem; text-decoration: none; transition: transform .2s, box-shadow .2s; border: none; cursor: pointer; font-family: var(--font-body,'Montserrat',sans-serif); }
.pg-checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,.35); color: #000; }
.pg-wa-order-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 12px; background: rgba(37,211,102,.08); border: .5px solid rgba(37,211,102,.25); border-radius: 8px; color: #25D366; font-size: 12px; font-weight: 600; text-decoration: none; transition: all var(--fast); }
.pg-wa-order-btn:hover { background: rgba(37,211,102,.15); border-color: #25D366; color: #25D366; }
.pg-trust-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.pg-trust-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; background: rgba(26,24,20,.03); border: .5px solid rgba(201,168,76,.06); border-radius: 6px; }
.pg-trust-badge-icon { font-size: 16px; }
.pg-trust-badge-label { font-size: 8px; letter-spacing: .1em; color: #555; text-transform: uppercase; text-align: center; }
/* Checkout layout */
.pg-checkout-layout { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: start; padding: 48px 0; }
.pg-checkout-fields { background: var(--card); border: .5px solid rgba(201,168,76,.10); border-radius: var(--radius-lg); padding: 32px; }
.pg-checkout-fields h3 { font-family: var(--font-serif); font-size: 18px; color: var(--text-mid); margin-bottom: 24px; padding-bottom: 16px; border-bottom: .5px solid rgba(201,168,76,.08); }
.pg-wc-billing-grid .woocommerce-billing-fields__field-wrapper,
.pg-wc-billing-grid .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.woocommerce-billing-fields p, .woocommerce-shipping-fields p, .woocommerce-additional-fields p { margin-bottom: 0; }
.woocommerce-billing-fields label, .woocommerce-shipping-fields label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 6px; }
.woocommerce-billing-fields input, .woocommerce-shipping-fields input,
.woocommerce-billing-fields select, .woocommerce-shipping-fields select { width: 100%; background: rgba(255,255,255,.04); border: .5px solid rgba(212,175,55,.18); border-radius: var(--radius); padding: 11px 16px; color: var(--text-mid); font-size: .82rem; outline: none; }
.woocommerce-billing-fields input:focus, .woocommerce-shipping-fields input:focus { border-color: rgba(201,168,76,.5); }
.pg-order-notes textarea { width: 100%; background: rgba(255,255,255,.04); border: .5px solid rgba(212,175,55,.18); border-radius: var(--radius); padding: 11px 16px; color: var(--text-mid); font-size: .82rem; resize: vertical; min-height: 80px; outline: none; font-family: var(--font-body,'Montserrat',sans-serif); }
/* Checkout order summary */
.pg-order-review-card { background: var(--card); border: .5px solid rgba(201,168,76,.12); border-radius: var(--radius-lg); padding: 28px; position: sticky; top: 100px; }
.pg-order-review-card h3 { font-family: var(--font-serif); font-size: 18px; color: var(--text-mid); margin-bottom: 20px; padding-bottom: 16px; border-bottom: .5px solid rgba(201,168,76,.10); }
.pg-checkout-items { border-bottom: 1px solid rgba(201,168,76,.08); margin-bottom: 1rem; padding-bottom: 1rem; }
.pg-checkout-item { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid rgba(212,175,55,.07); }
.pg-checkout-item:last-child { border-bottom: none; }
.pg-checkout-item-img { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.pg-checkout-item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.pg-checkout-item-qty { position: absolute; top: -6px; right: -6px; background: var(--gold-brand); color: #000; width: 18px; height: 18px; border-radius: 50%; font-size: .64rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pg-checkout-item-info { flex: 1; min-width: 0; }
.pg-checkout-item-name { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }
.pg-checkout-item-price { font-size: .82rem; color: var(--gold); font-weight: 600; margin-top: .2rem; }
.pg-payment-options { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.pg-payment-option { background: rgba(26,24,20,.04); border: .5px solid rgba(201,168,76,.10); border-radius: var(--radius); padding: 12px 16px; cursor: pointer; transition: all var(--fast); }
.pg-payment-option.is-selected { background: rgba(212,175,55,.05); border-color: rgba(201,168,76,.4); }
.pg-payment-option:hover { border-color: rgba(201,168,76,.3); }
.pg-payment-radio { display: flex; align-items: center; gap: 10px; }
.pg-payment-card { flex: 1; }
.pg-payment-name { font-size: .82rem; color: var(--text-muted); font-weight: 600; }
.pg-payment-desc { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.pg-place-order-btn { display: block; width: 100%; background: linear-gradient(135deg,var(--gold-brand) 0%,var(--champagne) 100%); color: #000; font-weight: 700; text-align: center; padding: 1rem; border-radius: 8px; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; margin-top: 1.25rem; border: none; cursor: pointer; transition: transform .2s, box-shadow .2s; font-family: var(--font-body,'Montserrat',sans-serif); }
.pg-place-order-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,.4); }
/* Coupon remove */
.pg-coupon-remove-link { color: #555; margin-left: .5rem; font-size: .8rem; text-decoration: none; }
.pg-coupon-remove-link:hover { color: #e05555; }
/* ── Responsive ── */
@media (max-width: 1200px) {
.pg-slider-track { grid-auto-columns: calc(33.333% - 16px); }
}
@media (max-width: 1023px) {
.pg-builder-inner, .pg-grid-2 { grid-template-columns: 1fr; gap: 40px; }
.pg-why-grid { grid-template-columns: repeat(2,1fr) !important; }
.pg-bridal-diamond-deco { display: none; }
.pg-products-grid { grid-template-columns: repeat(2,1fr); }
.pg-cart-layout, .pg-checkout-layout { grid-template-columns: 1fr; }
.pg-summary-card, .pg-order-review-card { position: static; }
.pg-cat-grid { grid-template-columns: 1fr 1fr; }
.pg-cat-card.is-wide { grid-row: auto; }
}
@media (max-width: 767px) {
.pg-container { padding: 0 20px; }
.pg-why-grid { grid-template-columns: 1fr 1fr !important; }
.pg-sale-banner-sub { display: none; }
.pg-bridal-stats { gap: 24px; }
.pg-newsletter-form { flex-direction: column; gap: 8px; }
.pg-newsletter-form .pg-newsletter-email { border-right: 1px solid rgba(201,168,76,.22); border-radius: var(--radius); }
.pg-newsletter-form button { border-radius: var(--radius); justify-content: center; }
.pg-slider-track { grid-auto-columns: calc(50% - 12px); }
.pg-insta-grid { grid-template-columns: 1fr 1fr; }
.pg-insta-cell.is-wide { grid-row: auto; grid-column: span 2; }
.pg-testi-card { padding: 32px 24px; }
.pg-wc-billing-grid .woocommerce-billing-fields__field-wrapper,
.pg-wc-billing-grid .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
.pg-why-grid { grid-template-columns: 1fr !important; }
.pg-bridal-stats { flex-direction: column; gap: 16px; }
.pg-products-grid { grid-template-columns: 1fr; }
.pg-slider-track { grid-auto-columns: 90%; }
.pg-cat-grid { grid-template-columns: 1fr; }
.pg-sale-banner-badge { font-size: 8px; }
.pg-steps { gap: 0; }
.pg-step-label { font-size: .5rem; }
.pg-cart-item { grid-template-columns: 70px 1fr auto; gap: 12px; }
.pg-cart-item-img { width: 70px; height: 70px; }
}
/* =========================================================
PATCH — Aliases & Missing Classes
Maps template class names to design-system styles
========================================================= */
/* ── HEADER: .pg-header aliases .pg-site-header ── */
.pg-header {
position: fixed;
top: var(--topbar-h, 36px);
left: 0;
right: 0;
z-index: 100;
background: rgba(250,248,243,.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: .5px solid var(--gold-border);
transition: background var(--medium, .3s), box-shadow var(--medium, .3s);
}
.pg-header.is-transparent { background: transparent; border-bottom-color: transparent; }
.pg-header.site-header--scrolled,
.pg-header.is-scrolled {
background: rgba(250,248,243,.98);
border-bottom-color: var(--gold-border);
box-shadow: 0 4px 24px rgba(26,24,20,.12);
}
/* ── NAV INNER — flex container matching .pg-header-inner ── */
.pg-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
max-width: 1440px;
margin: 0 auto;
padding: 0 48px;
gap: 24px;
}
/* ── NAV LINKS LIST ── */
.pg-nav-links {
display: flex;
align-items: stretch;
height: 100%;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
}
@media (max-width: 1023px) { .pg-nav-links { display: none; } }
/* ── NAV ITEM ── */
.pg-nav-item {
position: relative;
display: flex;
align-items: center;
}
/* ── NAV LINK ── */
.pg-nav-link {
display: flex;
align-items: center;
gap: 5px;
padding: 0 16px;
font-family: 'Montserrat', sans-serif;
font-size: .65rem;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--text-mid);
text-decoration: none;
white-space: nowrap;
height: 100%;
transition: color var(--fast, .15s);
position: relative;
}
.pg-nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 16px; right: 16px;
height: 1px;
background: var(--gold-brand);
transform: scaleX(0);
transition: transform var(--medium, .3s);
transform-origin: left;
}
.pg-nav-link:hover,
.pg-nav-item.current-menu-item .pg-nav-link,
.pg-nav-item.current-menu-ancestor .pg-nav-link {
color: var(--gold);
}
.pg-nav-link:hover::after { transform: scaleX(1); }
.pg-nav-link svg { transition: transform var(--fast, .15s); }
.pg-nav-item:hover > .pg-nav-link svg { transform: rotate(180deg); }
/* ── NAV ICONS (cart / search / wishlist) ── */
.pg-nav-icons {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.pg-nav-icon-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border: none;
background: transparent;
color: var(--text-mid);
cursor: pointer;
border-radius: 50%;
transition: color var(--fast, .15s), background var(--fast, .15s);
text-decoration: none;
}
.pg-nav-icon-btn:hover { color: var(--gold); background: var(--gold-muted); }
/* ── BACKDROP / MODAL OVERLAY ── */
.pg-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(26,24,20,.38);
z-index: 200;
backdrop-filter: blur(4px);
}
.pg-backdrop.is-open { display: block; }
/* ── TICKER WRAP ── */
.pg-ticker-wrap {
display: flex;
align-items: center;
animation: pg-ticker 35s linear infinite;
white-space: nowrap;
width: max-content;
}
@keyframes pg-ticker {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.pg-topbar:hover .pg-ticker-wrap { animation-play-state: paused; }
/* ── WHATSAPP FAB ── */
.pg-whatsapp-fab {
position: fixed;
bottom: 28px;
right: 24px;
z-index: 90;
width: 52px; height: 52px;
border-radius: 50%;
background: #25D366;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(37,211,102,.4);
transition: transform var(--fast, .15s), box-shadow var(--fast, .15s);
text-decoration: none;
}
.pg-whatsapp-fab:hover {
transform: scale(1.08) translateY(-2px);
box-shadow: 0 8px 30px rgba(37,211,102,.5);
color: #fff;
}
.pg-whatsapp-fab svg { width: 26px; height: 26px; }
/* ── HAMBURGER (mobile) ── */
.pg-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px; height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
color: var(--text-mid);
}
@media (max-width: 1023px) { .pg-hamburger { display: flex; } }
.pg-hamburger span {
display: block;
height: 1.5px;
background: currentColor;
transition: transform .3s, opacity .3s;
transform-origin: center;
}
.pg-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.pg-hamburger.is-open span:nth-child(2) { opacity: 0; }
.pg-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ── MOBILE DRAWER ── */
.pg-drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(340px, 90vw);
background: #FAF8F3;
z-index: 9500; /* Must be ABOVE .pg-backdrop (400) and .pg-header (9000) */
transform: translateX(100%);
transition: transform .35s cubic-bezier(.4,0,.2,1);
overflow-y: auto;
display: flex;
flex-direction: column;
pointer-events: auto; /* Always clickable when open */
}
.pg-drawer.is-open { transform: translateX(0); }
.pg-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--gold-border);
}
.pg-drawer-close {
background: none; border: none;
color: var(--text-mid);
cursor: pointer;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
}
.pg-drawer-nav {
display: flex;
flex-direction: column;
padding: 16px 0;
}
.pg-drawer-link {
display: flex;
align-items: center;
padding: 14px 24px;
font-size: .75rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-mid);
text-decoration: none;
border-bottom: 1px solid var(--gold-muted);
transition: color var(--fast, .15s), background var(--fast, .15s);
}
.pg-drawer-link:hover { color: var(--gold); background: var(--gold-glow); }
.pg-drawer-contact {
margin-top: auto;
padding: 20px 24px;
border-top: 1px solid var(--gold-border);
font-size: .7rem;
color: var(--text-dim);
}
/* ── HERO BACKGROUND & ELEMENTS ── */
.pg-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.pg-hero-bg-img {
position: absolute;
inset: 0;
/* Was url('https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../images/hero-desktop.webp') — that file has never existed in
this theme, so the hero backdrop silently rendered blank. Pointing at
the real asset, preferring the AVIF/WebP derivatives. */
background-image: url('https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../images/hero-desktop.png');
background-image: image-set(
url('https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../images/hero-desktop.png.avif') type('image/avif'),
url('https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../images/hero-desktop.png.webp') type('image/webp'),
url('https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../images/hero-desktop.png'));
background-size: cover;
background-position: center 30%;
opacity: .28;
transition: opacity 1s;
}
@media (max-width: 767px) {
/* hero-mobile.webp also never existed; hero-mobile.svg does. */
.pg-hero-bg-img { background-image: url('https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../images/hero-mobile.svg'); }
}
/* Fallback to SVG if webp not present */
.pg-hero-bg-img::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--gold-glow) 0%, transparent 60%);
}
.pg-hero-diamond {
position: absolute;
top: 50%; right: 8%;
transform: translateY(-50%) rotate(45deg);
width: clamp(180px, 22vw, 380px);
height: clamp(180px, 22vw, 380px);
border: 1px solid var(--gold-border);
opacity: .15;
z-index: 0;
animation: pg-diamond-pulse 6s ease-in-out infinite;
}
.pg-hero-diamond::before {
content: '';
position: absolute;
inset: 15px;
border: 1px solid var(--gold-border);
}
@keyframes pg-diamond-pulse {
0%, 100% { opacity: .15; transform: translateY(-50%) rotate(45deg) scale(1); }
50% { opacity: .25; transform: translateY(-50%) rotate(45deg) scale(1.04); }
}
/* ── HERO KICKER / SUBTITLE / ACTIONS ── */
.pg-hero-kicker {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(.65rem, 1.2vw, .8rem);
letter-spacing: 5px;
text-transform: uppercase;
color: var(--champagne);
margin-bottom: 18px;
opacity: .85;
}
.pg-hero-sub {
font-size: clamp(.8rem, 1.4vw, .95rem);
color: var(--text-muted);
max-width: 520px;
line-height: 1.85;
margin-bottom: 36px;
}
.pg-hero-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 56px;
}
.pg-hero-stat-label {
font-size: .55rem;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--text-dim);
margin-top: 4px;
}
/* ── SALE BANNER SUB-ELEMENTS ── */
.pg-sale-banner-eyebrow {
display: inline-block;
font-size: .55rem;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
opacity: .9;
}
.pg-sale-banner-title {
font-family: 'Playfair Display', serif;
font-size: clamp(1.4rem, 3vw, 2.4rem);
color: var(--text-bright);
margin-bottom: 12px;
line-height: 1.2;
}
.pg-sale-banner-sub {
font-size: .8rem;
color: var(--text-muted);
margin-bottom: 28px;
}
.pg-sale-banner-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.pg-sale-banner-countdown {
display: flex;
flex-direction: column;
align-items: center;
}
.pg-sale-timer {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.pg-sale-timer-unit {
display: flex;
flex-direction: column;
align-items: center;
min-width: 52px;
padding: 8px;
background: rgba(201,168,76,.06);
border: 1px solid var(--gold-border);
border-radius: 4px;
}
.pg-sale-timer-unit .num {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--gold);
line-height: 1;
}
.pg-sale-timer-unit .label {
font-size: .45rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-dim);
margin-top: 4px;
}
.pg-sale-timer-sep { color: var(--gold); font-size: 1.2rem; align-self: flex-start; padding-top: 8px; }
/* ── BRIDAL CONTENT ── */
.pg-bridal-content {
position: relative;
z-index: 2;
max-width: 560px;
}
/* ── SEARCH OVERLAY ── */
.pg-search-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(250,248,243,.96);
z-index: 500;
align-items: center;
justify-content: center;
padding: 0 24px;
}
.pg-search-overlay.is-open { display: flex; }
.pg-search-wrap {
width: 100%;
max-width: 640px;
}
.pg-search-form {
position: relative;
display: flex;
align-items: center;
}
.pg-search-form input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--gold-border);
color: var(--text-bright);
font-size: 1.5rem;
padding: 16px 48px 16px 0;
outline: none;
font-family: 'Playfair Display', serif;
}
.pg-search-form input::placeholder { color: var(--text-dim); }
.pg-search-close {
position: absolute;
right: 0;
background: none; border: none;
color: var(--text-muted); cursor: pointer;
font-size: 1.2rem;
padding: 8px;
}
.pg-search-suggestions {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pg-search-suggestions a {
font-size: .65rem;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 14px;
border: 1px solid var(--gold-border);
border-radius: 20px;
color: var(--text-dim);
transition: all var(--fast, .15s);
}
.pg-search-suggestions a:hover { color: var(--gold); border-color: var(--gold); }
/* ── WISHLIST PANEL ── */
.pg-wishlist-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(380px, 92vw);
background: var(--card);
z-index: 300;
transform: translateX(100%);
transition: transform .35s cubic-bezier(.4,0,.2,1);
display: flex;
flex-direction: column;
}
.pg-wishlist-panel.is-open { transform: translateX(0); }
.pg-wishlist-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--gold-border);
}
.pg-wishlist-items {
flex: 1;
overflow-y: auto;
padding: 16px 24px;
}
.pg-wishlist-empty {
text-align: center;
padding: 48px 0;
color: var(--text-dim);
font-size: .8rem;
}
.pg-wishlist-footer {
padding: 20px 24px;
border-top: 1px solid var(--gold-border);
}
/* ── CART COUNT BADGE ── */
.pg-cart-count {
position: absolute;
top: 4px; right: 4px;
min-width: 16px; height: 16px;
background: var(--gold-brand);
color: var(--black);
font-size: .55rem;
font-weight: 700;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
pointer-events: none;
}
/* ── MEGA MENU FEAT ── */
.pg-mega-feat {
background: var(--gold-glow);
border: 1px solid var(--gold-border);
border-radius: 6px;
overflow: hidden;
text-decoration: none;
transition: border-color var(--fast, .15s);
display: block;
}
.pg-mega-feat:hover { border-color: rgba(201,168,76,.4); }
.pg-mega-feat-img {
aspect-ratio: 16/9;
overflow: hidden;
}
.pg-mega-feat-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .6s;
}
.pg-mega-feat:hover .pg-mega-feat-img img { transform: scale(1.05); }
.pg-mega-feat-body { padding: 12px 14px; }
.pg-mega-feat-body h4 {
font-family: 'Playfair Display', serif;
font-size: .85rem;
color: var(--text-bright);
margin-bottom: 4px;
}
.pg-mega-feat-body p {
font-size: .65rem;
color: var(--text-dim);
margin: 0;
}
/* ── RESPONSIVE FIXES ── */
@media (max-width: 1023px) {
.pg-nav-inner { padding: 0 20px; }
}
@media (max-width: 767px) {
.pg-hero-actions { flex-direction: column; align-items: flex-start; }
.pg-hero-diamond { display: none; }
.pg-whatsapp-fab { bottom: 80px; }
}
/* ── LOGO markup fix: PATTERN + ── */
.pg-logo {
display: flex;
flex-direction: column;
text-decoration: none;
flex-shrink: 0;
line-height: 1;
color: var(--gold);
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
letter-spacing: 6px;
text-transform: uppercase;
}
.pg-logo span {
color: var(--champagne);
font-style: italic;
}
.pg-logo small {
display: block;
font-size: .38rem;
letter-spacing: 5px;
color: var(--text-dim);
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
margin-top: 3px;
}
/* ── SVG SIZE NORMALISATION (prevents unsized SVGs rendering huge) ── */
svg { overflow: hidden; vertical-align: middle; }
/* Nav chevrons and icon-button SVGs */
.pg-nav-link svg { width: 10px; height: 10px; flex-shrink: 0; }
.pg-nav-icon-btn svg { width: 18px; height: 18px; pointer-events: none; }
.pg-hamburger svg { width: 18px; height: 18px; }
/* Search form submit button SVG */
.pg-search-form button svg { width: 18px; height: 18px; }
/* Drawer close / panel close */
.pg-drawer-close svg { width: 18px; height: 18px; }
/* Wishlist empty heart */
.pg-wishlist-empty svg { width: 40px; height: 40px; color: var(--text-dim); margin: 0 auto 12px; display: block; }
/* WhatsApp FAB — already sized via parent, but enforce SVG */
.pg-whatsapp-fab svg { width: 26px; height: 26px; fill: #fff; flex-shrink: 0; }
/* Toast icon */
.pg-toast-icon svg { width: 14px; height: 14px; }
/* Mega-menu and dropdown chevrons */
.pg-mega svg, .pg-dropdown svg { width: 14px; height: 14px; }
/* Product card action SVGs */
.pg-product-card svg { width: 16px; height: 16px; }
/* Button SVGs */
.pg-btn svg { width: 15px; height: 15px; flex-shrink: 0; pointer-events: none; }
/* Hero action arrow */
.pg-hero-actions .pg-btn svg { width: 16px; height: 16px; }
/* General fallback: any SVG without explicit width/height inside a known container */
button svg, a svg { max-width: 24px; max-height: 24px; }
/* ── HERO LAYOUT: ensure hero starts below fixed header ── */
.pg-hero {
/* Override: ensure dark background even if bg-img fails to load */
background-color: var(--black);
}
.pg-hero > * { position: relative; z-index: 1; }
/* Sections are not padded since hero is full-bleed */
/* ── TOPBAR height helper ── */
body {
padding-top: 0; /* topbar is position:relative, header is position:fixed */
}
/* ── Ensure the fixed header sits below topbar ── */
/* .pg-header top is set via top: var(--topbar-h, 40px) in the patch above */
/* ── Main content area: offset for topbar height ── */
/* #main-content: topbar is position:relative so it naturally pushes content down;
fixed header overlaps but hero is full-height so it looks correct */
/* ── Accessibility: skip-link position ── */
.screen-reader-text {
position: absolute;
clip: rect(1px,1px,1px,1px);
padding: 0; border: 0;
width: 1px; height: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
clip: auto;
width: auto; height: auto;
padding: 8px 16px;
background: var(--gold-brand);
color: var(--black);
z-index: 9999;
top: 0; left: 0;
}
/* ── WP admin bar spacer ── */
.admin-bar .pg-topbar { top: 32px; }
.admin-bar .pg-header { top: calc(var(--topbar-h, 40px) + 32px); }
@media screen and (max-width: 782px) {
.admin-bar .pg-topbar { top: 46px; }
.admin-bar .pg-header { top: calc(var(--topbar-h, 40px) + 46px); }
}
/* ── LOGO FINAL FIX: use display:block so PATTERN stays inline ──
The flex+column approach made each text node ("PATT", span, "RN") a separate
flex row. Switching to display:block lets inline content flow naturally. */
.pg-logo {
display: block !important; /* override any flex-direction:column above */
text-decoration: none;
flex-shrink: 0;
color: var(--gold);
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
letter-spacing: 8px;
text-transform: uppercase;
line-height: 1.1;
white-space: nowrap;
}
.pg-logo span {
display: inline !important; /* keep the E on the same line */
color: var(--champagne);
font-style: italic;
letter-spacing: 8px;
}
.pg-logo small {
display: block;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: .38rem;
letter-spacing: 5px;
color: var(--text-dim);
text-transform: uppercase;
margin-top: 4px;
white-space: nowrap;
}
/* =========================================================
FINAL PATCH — Footer, Collections, Product Image,
Newsletter button text, remaining gaps
========================================================= */
/* ── FOOTER STRUCTURE ── */
.pg-footer {
background: var(--card);
border-top: 1px solid var(--gold-border);
padding: 0;
margin-top: 0;
}
.pg-footer-main {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 60px;
border-bottom: 1px solid var(--gold-border);
}
@media (max-width: 1023px) {
.pg-footer-main { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 767px) {
.pg-footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 479px) {
.pg-footer-main { grid-template-columns: 1fr; }
.pg-footer { padding-top: 48px; }
}
/* Brand Column */
/* .pg-footer-brand — children styled below */
.pg-footer-brand p {
font-size: .7rem;
color: var(--text-dim);
line-height: 1.8;
margin-top: 16px;
margin-bottom: 20px;
}
/* Social Links */
.pg-footer-social {
display: flex;
align-items: center;
gap: 10px;
}
.pg-footer-social a {
display: flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border: 1px solid var(--gold-border);
border-radius: 50%;
color: var(--text-dim);
transition: color var(--fast, .15s), border-color var(--fast, .15s), background var(--fast, .15s);
}
.pg-footer-social a:hover {
color: var(--gold);
border-color: var(--gold);
background: var(--gold-glow);
}
.pg-footer-social a svg { width: 14px; height: 14px; }
/* Nav Column */
.pg-footer-col h4 {
font-family: 'Montserrat', sans-serif;
font-size: .55rem;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-bright);
margin-bottom: 18px;
}
.pg-footer-col a,
.pg-footer-col address {
display: block;
font-size: .7rem;
color: var(--text-dim);
font-style: normal;
margin-bottom: 10px;
line-height: 1.6;
text-decoration: none;
transition: color var(--fast, .15s);
}
.pg-footer-col a:hover { color: var(--gold); }
/* Certifications bar */
.pg-footer-certs {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 24px 0;
border-bottom: 1px solid var(--gold-border);
flex-wrap: wrap;
}
.pg-cert-badge {
display: flex;
align-items: center;
gap: 8px;
font-size: .6rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text-dim);
}
.pg-cert-badge span { font-size: 1rem; }
/* Footer bottom bar */
.pg-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
gap: 16px;
flex-wrap: wrap;
}
.pg-footer-bottom p {
font-size: .62rem;
color: var(--text-dim);
margin: 0;
}
.pg-footer-legal {
display: flex;
align-items: center;
gap: 16px;
}
.pg-footer-legal a {
font-size: .6rem;
letter-spacing: 1px;
color: var(--text-dim);
text-decoration: none;
transition: color var(--fast, .15s);
}
.pg-footer-legal a:hover { color: var(--gold); }
/* Payment icons */
.pg-footer-pay {
display: flex;
align-items: center;
gap: 8px;
}
.pg-pay-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border: 1px solid var(--gold-border);
border-radius: 4px;
font-size: .55rem;
font-weight: 600;
letter-spacing: 1px;
color: var(--text-dim);
background: var(--gold-glow);
white-space: nowrap;
}
/* .pg-collections — inherits pg-section spacing + dark background */
/* ── PRODUCT CARD IMAGE (inside a positioned wrapper) ── */
.pg-product-card-img {
display: block;
position: relative;
overflow: hidden;
aspect-ratio: 3/4;
background: var(--soft);
}
.pg-img-main {
/* Inline styles handle position/fill; this ensures the img is block */
display: block;
}
/* .pg-newsletter-btn-text: shown by default, hidden when loading (JS-toggled) */
.pg-newsletter-btn-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* ── SECTION UTILITY (used by .pg-collections and other sections) ── */
.pg-section {
padding: 100px 0;
}
@media (max-width: 767px) {
.pg-section { padding: 64px 0; }
}
/* ── PRODUCT CARD EXTRA DETAIL ── */
.pg-product-card-badges {
position: absolute;
top: 12px; left: 12px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 2;
}
.pg-product-card-actions {
position: absolute;
top: 12px; right: 12px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 2;
opacity: 0;
transition: opacity var(--fast, .15s);
}
.pg-product-card:hover .pg-product-card-actions { opacity: 1; }
.pg-product-card-actions button {
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid var(--gold-border);
background: rgba(245,240,232,.92);
color: var(--text-mid);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--fast, .15s);
backdrop-filter: blur(4px);
}
.pg-product-card-actions button:hover {
background: var(--gold-brand);
color: var(--black);
border-color: var(--gold);
}
.pg-product-card-body {
padding: 16px 0 8px;
}
.pg-product-card-cat {
font-size: .55rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 4px;
}
.pg-product-card-title {
display: block;
font-family: 'Playfair Display', serif;
font-size: .9rem;
color: var(--text-bright);
margin-bottom: 8px;
text-decoration: none;
line-height: 1.3;
transition: color var(--fast, .15s);
}
.pg-product-card-title:hover { color: var(--gold); }
.pg-product-card-price {
font-size: .8rem;
color: var(--gold);
}
.pg-product-card-price del {
color: var(--text-dim);
font-size: .7rem;
margin-right: 6px;
}
.pg-product-card-footer {
padding-top: 8px;
}
.js-atc-btn {
width: 100%;
background: transparent;
border: 1px solid var(--gold-border);
color: var(--text-mid);
font-size: .6rem;
letter-spacing: 2px;
text-transform: uppercase;
padding: 10px;
cursor: pointer;
border-radius: var(--radius, 4px);
transition: all var(--fast, .15s);
}
.js-atc-btn:hover {
background: var(--gold-brand);
color: var(--black);
border-color: var(--gold);
}
/* ── RESPONSIVE: footer on mobile ── */
@media (max-width: 479px) {
.pg-footer-bottom { flex-direction: column; align-items: flex-start; }
.pg-footer-certs { gap: 14px; }
.pg-footer-pay { flex-wrap: wrap; }
}
/* ══════════════════════════════════════════════════════════
PATCH 6 — Missing container classes (pg-bridal, pg-hero-stat,
pg-insta section, pg-bridal-stat)
2026-04-06
══════════════════════════════════════════════════════════ */
/* ── HERO STAT individual item ── */
.pg-hero-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 0 20px;
border-right: .5px solid rgba(201,168,76,.12);
}
.pg-hero-stat:last-child { border-right: none; }
@media (max-width: 479px) {
.pg-hero-stat { padding: 0 12px; }
}
/* ── BRIDAL section wrapper ── */
.pg-bridal {
position: relative;
overflow: hidden;
background: var(--black);
padding: 120px 0;
}
@media (max-width: 767px) {
.pg-bridal { padding: 80px 0; }
}
/* ── BRIDAL STAT individual item ── */
.pg-bridal-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
/* ── INSTAGRAM / LOOKBOOK section modifier ── */
/* pg-section--sm already provides padding; pg-insta adds background */
.pg-insta {
background: var(--card);
}
/* ══════════════════════════════════════════════════════════
PATCH 7 — Remaining missing classes found via audit:
pg-badge-gia, pg-img-hover, pg-price-current,
pg-product-card-rating, pg-search-input
2026-04-06
══════════════════════════════════════════════════════════ */
/* ── GIA / certification badge ── */
.pg-badge-gia {
background: linear-gradient(135deg, #0a3d62, #1a6fa0);
color: #fff;
}
/* ── Product card hover image layer ── */
.pg-img-hover {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--medium, .4s);
background-size: cover;
background-position: center;
}
.pg-product-card:hover .pg-img-hover { opacity: 1; }
/* ── Price: current / active price ── */
.pg-price-current {
font-family: var(--font-serif, 'Playfair Display', serif);
font-size: 1rem;
color: var(--gold);
font-weight: 400;
}
/* ── Product card star rating ── */
.pg-product-card-rating {
display: flex;
align-items: center;
gap: 4px;
font-size: .58rem;
color: var(--gold);
letter-spacing: 1px;
margin-bottom: 6px;
}
.pg-product-card-rating span {
color: var(--text-dim);
font-size: .55rem;
}
/* ── Search overlay input ── */
#pg-search-input,
.pg-search-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(201,168,76,.3);
color: var(--text-bright, #f5f0e8);
font-size: clamp(1.2rem, 3vw, 2rem);
font-family: var(--font-serif, 'Playfair Display', serif);
padding: 12px 0;
outline: none;
caret-color: var(--gold);
transition: border-color var(--fast, .15s);
}
#pg-search-input:focus,
.pg-search-input:focus {
border-bottom-color: var(--gold);
}
#pg-search-input::placeholder,
.pg-search-input::placeholder {
color: rgba(201,168,76,.25);
font-style: italic;
}
/* ══════════════════════════════════════════════════════════
PATCH 8 — Progressive Enhancement for .pg-reveal
Sections are VISIBLE BY DEFAULT. JS adds 'pg-js-ready' to
to enable scroll-triggered animations. Without JS
(screenshots, search crawlers, no-JS users) all content is
fully visible with no opacity gaps.
2026-04-06
══════════════════════════════════════════════════════════ */
/* Step 1: Default state — fully visible, no transform */
.pg-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Step 2: Animations are now disabled to prevent invisible content bugs */
body.pg-js-ready .pg-reveal {
opacity: 1 !important;
transform: none !important;
}
/* ── HERO BG: use SVG since webp images not yet uploaded ── */
.pg-hero-bg-img {
background-image: url('https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../images/hero-desktop.svg') !important;
opacity: .18 !important;
}
/* ── SCROLL CUE: alias .pg-hero-scroll → .pg-hero-scroll-cue styles ── */
.pg-hero-scroll {
position: absolute;
bottom: 36px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 3;
cursor: pointer;
}
.pg-hero-scroll span {
font-size: .44rem;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(201,168,76,.4);
}
.pg-hero-scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, rgba(201,168,76,.5), transparent);
animation: pg-scroll-line 1.6s ease-in-out infinite;
}
@keyframes pg-scroll-line {
0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}
/* ── CATEGORY GRID: ensure proper grid layout ── */
.pg-cat-grid {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr !important;
grid-template-rows: auto auto !important;
gap: 3px !important;
min-height: 520px;
}
.pg-cat-card { aspect-ratio: unset; min-height: 240px; }
.pg-cat-card.is-wide { grid-row: span 2; min-height: 483px; }
/* ── PRODUCTS GRID: 4-column with proper gap ── */
.pg-products-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
}
.pg-products-grid li.product {
width: 100% !important;
margin: 0 !important;
float: none !important;
}
/* ── BRIDAL SECTION: full-bleed dark bg with centered content ── */
.pg-bridal {
background: linear-gradient(135deg, #1A1814 0%, #2D2924 50%, #1A1814 100%) !important;
}
.pg-bridal-content { max-width: 600px; }
/* ── INSTAGRAM GRID: proper 3+2 layout ── */
.pg-insta-grid {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr !important;
grid-template-rows: auto auto !important;
gap: 4px !important;
margin-top: 40px !important;
}
.pg-insta-cell { min-height: 200px; }
.pg-insta-cell.is-wide { grid-row: span 2; min-height: 404px; }
.pg-insta-cell-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
/* ── TESTI SLIDER: full-width single slide ── */
.pg-testi-track {
display: flex !important;
transition: transform .4s cubic-bezier(.4,0,.2,1) !important;
}
.pg-testi-slide { flex: 0 0 100% !important; }
/* ── NEWSLETTER: dark gold shimmer section ── */
.pg-newsletter-inner {
max-width: 560px !important;
margin: 0 auto !important;
}
/* ── SECTION BACKGROUNDS ── */
.pg-collections { background: var(--black) !important; }
.pg-why { background: var(--card) !important; }
.pg-craft { background: var(--black) !important; }
.pg-builder-cta { background: var(--soft-2, #141209) !important; }
.pg-testi { background: var(--black) !important; }
.pg-newsletter { background: linear-gradient(135deg,#F5ECD5 0%,#FAF8F3 50%,#F5ECD5 100%) !important; }
/* ── WHY GRID: 3-column at desktop ── */
.pg-why-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 24px !important;
margin-top: 56px !important;
}
@media (max-width: 1023px) {
.pg-why-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 599px) {
.pg-why-grid { grid-template-columns: 1fr !important; }
.pg-cat-grid { grid-template-columns: 1fr !important; }
.pg-insta-grid { grid-template-columns: 1fr 1fr !important; }
.pg-products-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ── WHY CARD ── */
.pg-why-card {
background: var(--black);
border: .5px solid rgba(201,168,76,.08);
border-radius: 8px;
padding: 32px 28px;
transition: border-color .2s, transform .2s;
}
.pg-why-card:hover {
border-color: rgba(201,168,76,.25);
transform: translateY(-3px);
}
.pg-why-icon {
width: 48px; height: 48px;
background: rgba(201,168,76,.06);
border: .5px solid rgba(201,168,76,.15);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
margin-bottom: 18px;
}
.pg-why-card h4 {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 400;
color: var(--text-mid);
margin-bottom: 10px;
}
.pg-why-card p { font-size: 12.5px; color: #777; line-height: 1.8; margin: 0; }
/* ── BUILDER CTA LAYOUT ── */
.pg-builder-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
@media (max-width: 767px) {
.pg-builder-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
}
.pg-builder-steps {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.pg-builder-step {
background: rgba(201,168,76,.04);
border: .5px solid rgba(201,168,76,.10);
border-radius: 8px;
padding: 24px 20px;
}
.pg-builder-step-num {
font-family: var(--font-serif);
font-size: 28px;
color: rgba(201,168,76,.25);
margin-bottom: 10px;
line-height: 1;
}
.pg-builder-step h4 { font-family: var(--font-serif); font-size: 15px; color: #d4cfc5; margin-bottom: 6px; }
.pg-builder-step p { font-size: 11.5px; color: var(--text-muted); line-height: 1.7; margin: 0; }
/* ── CRAFTSMANSHIP LAYOUT ── */
.pg-craft-img {
position: relative;
aspect-ratio: 4/5;
background: linear-gradient(135deg,#FAF8F3,#F5ECD5);
border-radius: 8px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.pg-craft-img-bg { font-size: 120px; opacity: .12; }
.pg-craft-img-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,10,10,.7) 0%, transparent 60%);
}
.pg-craft-img-tag {
position: absolute;
bottom: 24px; left: 24px;
background: rgba(245,240,232,.95);
border: .5px solid rgba(201,168,76,.3);
border-radius: 6px;
padding: 12px 18px;
backdrop-filter: blur(8px);
}
.pg-craft-img-tag .num {
font-family: var(--font-serif);
font-size: 28px;
color: var(--gold);
line-height: 1;
}
.pg-craft-img-tag .lbl {
font-size: 9px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 3px;
}
.pg-craft-steps { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.pg-craft-step {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: rgba(212,175,55,.03);
border-left: 2px solid rgba(212,175,55,.18);
border-radius: 0 6px 6px 0;
transition: border-color .2s, background .2s;
}
.pg-craft-step:hover { border-left-color: rgba(201,168,76,.5); background: rgba(201,168,76,.06); }
.pg-craft-step-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.pg-craft-step-body h4 { font-family: var(--font-serif); font-size: 15px; color: #d4cfc5; margin-bottom: 4px; }
.pg-craft-step-body p { font-size: 12px; color: var(--text-muted); line-height: 1.7; margin: 0; }
/* ── RESPONSIVE: adjust grid on tablet ── */
@media (max-width: 1023px) {
.pg-grid-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
.pg-products-grid { grid-template-columns: repeat(2, 1fr) !important; }
.pg-cat-grid { grid-template-columns: 1fr 1fr !important; }
.pg-cat-card.is-wide { grid-row: auto !important; }
.pg-builder-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
.pg-insta-grid { grid-template-columns: repeat(3, 1fr) !important; }
.pg-insta-cell.is-wide { grid-row: auto !important; min-height: 200px !important; }
}
@media (max-width: 767px) {
.pg-container { padding: 0 20px !important; }
.pg-section { padding: 64px 0 !important; }
.pg-section--sm { padding: 48px 0 !important; }
.pg-cat-grid { grid-template-columns: 1fr !important; }
.pg-products-grid { grid-template-columns: 1fr 1fr !important; }
.pg-builder-steps { grid-template-columns: 1fr !important; }
.pg-insta-grid { grid-template-columns: 1fr 1fr !important; }
.pg-insta-cell.is-wide { grid-row: auto !important; grid-column: span 2 !important; }
}
/* ══════════════════════════════════════════════════════════
PATCH 9 — Instagram grid 6th cell fix
Cell 6 overflowed into an implicit 3rd row (596px tall).
Fix: span it full-width across the bottom as a panoramic strip.
2026-04-06
══════════════════════════════════════════════════════════ */
.pg-insta-grid .pg-insta-cell:nth-child(6) {
grid-column: 1 / -1;
aspect-ratio: 16 / 4 !important;
min-height: 140px !important;
}
/* ── Also: Instagram section should NOT have aspect-ratio on .pg-insta-cell by default ── */
.pg-insta-cell {
aspect-ratio: 1;
min-height: 180px;
}
.pg-insta-cell.is-wide {
aspect-ratio: unset !important;
grid-row: span 2;
min-height: 364px;
}
/* ══════════════════════════════════════════════════════════
PATCH 10 — Full-Width Layout & Perfect Alignment
Ensures the page is 100vw, sections are properly centered,
hero is full-screen, and all components are aligned.
2026-04-06
══════════════════════════════════════════════════════════ */
/* ── Global: ensure full-width page with no horizontal overflow ── */
html, body {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
/* ── Every section/block is full-width ── */
.pg-hero,
.pg-marquee,
.pg-sale-banner,
.pg-section,
.pg-section--sm,
.pg-section-alt,
.pg-bridal,
.pg-collections,
.pg-builder-cta,
.pg-craft,
.pg-why,
.pg-insta,
.pg-testi,
.pg-newsletter,
.pg-footer,
footer {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ── Container: properly centered, full-width content with padding ── */
.pg-container {
width: 100% !important;
max-width: var(--container, 1280px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 40px !important;
padding-right: 40px !important;
box-sizing: border-box !important;
}
/* ── Hero: full-screen, centered content ── */
.pg-hero {
position: relative !important;
width: 100vw !important;
min-height: 100vh !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
background: var(--black) !important;
left: 0 !important;
}
.pg-hero-bg {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
}
.pg-hero-bg-img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background-size: cover !important;
background-position: center !important;
}
.pg-hero > .pg-container {
position: relative !important;
z-index: 2 !important;
}
.pg-hero-content {
position: relative !important;
z-index: 2 !important;
padding: 0 !important;
max-width: 700px !important;
}
/* ── Hero heading: full legible sizing ── */
.pg-h1 {
font-size: clamp(2.4rem, 5.5vw, 5rem) !important;
line-height: 1.08 !important;
margin-bottom: 20px !important;
}
.pg-h2 {
font-size: clamp(1.8rem, 3.5vw, 3.2rem) !important;
line-height: 1.15 !important;
}
/* ── Hero stats: horizontal row ── */
.pg-hero-stats {
display: flex !important;
flex-direction: row !important;
gap: 0 !important;
padding-top: 28px !important;
margin-top: 20px !important;
border-top: .5px solid rgba(201,168,76,.15) !important;
}
.pg-hero-stat,
.pg-stat {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 0 28px !important;
border-right: .5px solid rgba(201,168,76,.10) !important;
flex: 1 !important;
}
.pg-hero-stat:first-child,
.pg-stat:first-child { padding-left: 0 !important; align-items: flex-start !important; }
.pg-hero-stat:last-child,
.pg-stat:last-child { border-right: none !important; }
/* ── Marquee: full-width gold line ── */
.pg-marquee {
overflow: hidden !important;
padding: 12px 0 !important;
}
/* ── Section padding: uniform ── */
.pg-section { padding: 100px 0 !important; }
.pg-section--sm { padding: 72px 0 !important; }
.pg-section-alt { padding: 100px 0 !important; }
.pg-bridal { padding: 120px 0 !important; }
/* ── Section header: title left, button right ── */
.pg-section-header {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
margin-bottom: 48px !important;
gap: 20px !important;
flex-wrap: wrap !important;
}
/* ── Collections grid: 3-col layout matching reference ── */
.pg-cat-grid {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr !important;
gap: 3px !important;
}
.pg-cat-card {
min-height: 260px !important;
aspect-ratio: unset !important;
}
.pg-cat-card.is-wide {
grid-row: span 2 !important;
min-height: 523px !important;
}
/* ── Product grid: Base Grid Setup ── */
.pg-products-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
}
.pg-products-grid.view-3 {
grid-template-columns: repeat(3, 1fr) !important;
}
.pg-products-grid.view-list {
grid-template-columns: 1fr !important;
}
.pg-products-grid li.product {
width: 100% !important;
margin: 0 !important;
float: none !important;
}
.pg-product-card {
background: var(--card) !important;
}
.pg-product-card-img {
position: relative !important;
padding-top: 100% !important;
overflow: hidden !important;
}
/* ── Why grid: 3 columns ── */
.pg-why-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
margin-top: 56px !important;
}
/* ── Builder inner: 2-col grid ── */
.pg-builder-inner {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 80px !important;
align-items: start !important;
}
/* ── Craft section: 2-col ── */
.pg-grid-2 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 80px !important;
align-items: center !important;
}
/* ── Bridal section: left-align content ── */
.pg-bridal {
background: linear-gradient(135deg, #1A1814, #2D2924, #1A1814) !important;
}
.pg-bridal-content { max-width: 580px; }
/* ── Newsletter: centered ── */
.pg-newsletter-inner {
text-align: center !important;
max-width: 560px !important;
margin: 0 auto !important;
position: relative !important;
z-index: 1 !important;
}
.pg-newsletter-form {
display: flex !important;
gap: 0 !important;
margin-top: 32px !important;
max-width: 480px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ── Testimonials slider ── */
.pg-testi-slider { position: relative !important; overflow: hidden !important; margin-top: 56px !important; }
.pg-testi-track { display: flex !important; }
.pg-testi-slide { flex: 0 0 100% !important; }
.pg-testi-card { max-width: 760px !important; margin: 0 auto !important; }
/* ── Slider product cards ── */
.pg-slider-track {
display: grid !important;
grid-auto-flow: column !important;
grid-auto-columns: calc(25% - 18px) !important;
gap: 24px !important;
transition: transform .4s cubic-bezier(.4,0,.2,1) !important;
}
/* ── Footer: full-width dark ── */
.pg-footer {
width: 100% !important;
background: var(--navy, #0F2336) !important;
}
.pg-footer-grid {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr !important;
gap: 40px !important;
}
/* ── Text utility ── */
.pg-text-center { text-align: center !important; }
/* ═══ RESPONSIVE BREAKPOINTS ═══ */
@media (max-width: 1200px) {
.pg-container { padding-left: 32px !important; padding-right: 32px !important; }
.pg-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr !important; }
.pg-products-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 1023px) {
.pg-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
.pg-cat-card.is-wide { grid-row: auto !important; min-height: 260px !important; }
.pg-builder-inner { grid-template-columns: 1fr !important; gap: 40px !important; }
.pg-grid-2 { grid-template-columns: 1fr !important; gap: 40px !important; }
.pg-why-grid { grid-template-columns: repeat(2, 1fr) !important; }
.pg-products-grid { grid-template-columns: repeat(2, 1fr) !important; }
.pg-footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
.pg-slider-track { grid-auto-columns: calc(50% - 12px) !important; }
}
@media (max-width: 767px) {
.pg-container { padding-left: 20px !important; padding-right: 20px !important; }
.pg-h1 { font-size: 2.2rem !important; }
.pg-h2 { font-size: 1.6rem !important; }
.pg-section, .pg-section-alt { padding: 60px 0 !important; }
.pg-section--sm { padding: 48px 0 !important; }
.pg-bridal { padding: 80px 0 !important; }
.pg-hero-stats { flex-wrap: wrap !important; gap: 16px !important; padding-top: 20px !important; }
.pg-hero-stat { flex: 0 0 40% !important; border-right: none !important; padding: 8px 0 !important; }
.pg-hero-actions { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
.pg-hero-actions .pg-btn { width: 100% !important; justify-content: center !important; }
.pg-cat-grid { grid-template-columns: 1fr !important; }
.pg-products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
.pg-why-grid { grid-template-columns: 1fr !important; }
.pg-footer-grid { grid-template-columns: 1fr !important; }
.pg-builder-steps { grid-template-columns: 1fr !important; }
.pg-insta-grid { grid-template-columns: 1fr 1fr !important; }
.pg-insta-cell.is-wide { grid-column: span 2 !important; grid-row: auto !important; }
.pg-slider-track { grid-auto-columns: calc(100% - 24px) !important; }
.pg-section-header { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 479px) {
.pg-products-grid { grid-template-columns: 1fr !important; }
.pg-h1 { font-size: 1.9rem !important; }
.pg-hero-stat { flex: 0 0 45% !important; }
}
/* ══════════════════════════════════════════════════════════
PATCH 11 — Hero background opacity + final polish
2026-04-06
══════════════════════════════════════════════════════════ */
/* Better hero background — show the luxury SVG clearly */
.pg-hero-bg-img {
background-image: url('https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../images/hero-desktop.svg') !important;
background-size: cover !important;
background-position: center center !important;
opacity: .65 !important;
}
@media (max-width: 767px) {
.pg-hero-bg-img { background-image: url('https://test.patternjewellery.com/wp-content/themes/pattern-jewellery-theme/assets/css/../images/hero-mobile.svg') !important; }
}
/* Dark overlay gradient on hero for text legibility */
.pg-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
rgba(10,10,10,.85) 0%,
rgba(10,10,10,.55) 50%,
rgba(10,10,10,.15) 100%
);
z-index: 1;
pointer-events: none;
}
.pg-hero > * { position: relative; z-index: 2; }
.pg-hero-bg { z-index: 0 !important; }
/* ── Hero content: better vertical positioning ── */
.pg-hero .pg-container {
padding-top: 60px;
padding-bottom: 60px;
}
/* ── Stats: ensure they sit above the overlay ── */
.pg-hero-stats {
position: relative;
z-index: 3 !important;
}
/* ── Sale banner: full-width gold strip ── */
.pg-sale-banner {
background: linear-gradient(90deg, #1A1814 0%, #2D2924 50%, #1A1814 100%) !important;
width: 100% !important;
}
/* ── Marquee: ensure it scrolls properly ── */
.pg-marquee { background: #F5ECD5 !important; }
.pg-marquee-track {
animation: pg-ticker 32s linear infinite !important;
will-change: transform;
}
/* ══════════════════════════════════════════════════════════════════
PATCH 12 — MENU SYSTEM FIXES
══════════════════════════════════════════════════════════════════
Fixes:
1. .pg-mega (HTML class) vs .pg-mega-menu (old CSS) mismatch
2. Hover trigger: .pg-nav-list > li → .pg-nav-item (actual HTML)
3. Mega menu column headings: bare