/** Shopify CDN: Minification failed
Line 13360:2 "positon" is not a known CSS property
Line 17671:12 Unexpected "/"
Line 17901:0 Unexpected "}"
**/
@charset "UTF-8";
.surface-pick-up-embed {
--surface-pick-up-embed-theme-success-color: rgb(50, 205, 50);
--surface-pick-up-embed-theme-error-color: rgb(179, 58, 58);
--surface-pick-up-embed-theme-paragraph-font-size: 16px;
--surface-pick-up-embed-theme-paragraph-smaller-font-size: calc(var(--surface-pick-up-embed-theme-paragraph-font-size) - 4px);
--surface-pick-up-embed-theme-body-font-weight-bold: 600;
--surface-pick-up-embed-theme-body-text-color: #808080;
--surface-pick-up-embed-theme-link-text-decoration: underline;
--surface-pick-up-embed-row-gap: 10px;
--surface-pick-up-embed-column-gap: 10px;
display: grid;
grid-template-columns: min-content auto;
row-gap: var(--surface-pick-up-embed-row-gap);
column-gap: var(--surface-pick-up-embed-column-gap);
justify-content: flex-start;
text-align: left;
}
.surface-pick-up-embed__in-stock-icon,
.surface-pick-up-embed__out-of-stock-icon {
grid-column-start: 1;
grid-column-end: 2;
margin-top: 3px;
}
.surface-pick-up-embed__in-stock-icon {
fill: var(--surface-pick-up-embed-theme-success-color);
}
.surface-pick-up-embed__out-of-stock-icon {
fill: var(--surface-pick-up-embed-theme-error-color);
}
.surface-pick-up-embed__location-info,
.surface-pick-up-embed__modal-btn {
grid-column-start: 2;
grid-column-end: 3;
}
.surface-pick-up-embed__location-info {
grid-row-start: 1;
grid-row-end: 2;
}
.surface-pick-up-embed__location-availability {
margin-top: 0;
margin-bottom: 0;
font-family: inherit;
font-size: var(--surface-pick-up-embed-theme-paragraph-font-size);
font-weight: inherit;
color: var(--surface-pick-up-embed-theme-body-text-color);
}
.surface-pick-up-embed__location-availability b {
font-weight: var(--surface-pick-up-embed-theme-body-font-weight-bold);
}
.surface-pick-up-embed__location-pick-up-time {
font-size: var(--surface-pick-up-embed-theme-paragraph-smaller-font-size);
color: var(--surface-pick-up-embed-theme-body-text-color);
}
.surface-pick-up-embed__modal-btn {
grid-row-start: 2;
grid-row-end: 3;
justify-self: start;
padding: 0;
font-size: var(--surface-pick-up-embed-theme-paragraph-smaller-font-size);
color: var(--surface-pick-up-theme-embed-body-text-color);
text-align: left;
-webkit-text-decoration: var(--surface-pick-up-embed-theme-link-text-decoration);
text-decoration: var(--surface-pick-up-embed-theme-link-text-decoration);
cursor: pointer;
background-color: initial;
border: 0;
}
.surface-pick-up-items {
padding: 0;
margin: 0;
}
.surface-pick-up-item {
--surface-pick-up-item-theme-success-color: rgb(50, 205, 50);
--surface-pick-up-item-theme-error-color: rgb(179, 58, 58);
--surface-pick-up-item-theme-paragraph-font-size: 16px;
--surface-pick-up-item-theme-paragraph-smaller-font-size: calc(var(--surface-pick-up-item-theme-paragraph-font-size) - 4px);
--surface-pick-up-item-theme-body-font-weight-bold: 600;
--surface-pick-up-item-theme-body-text-color: #808080;
--surface-pick-up-item-theme-border-color: #d9d9d9;
--surface-pick-up-item-theme-link-text-decoration: underline;
--surface-pick-up-item-row-gap: 10px;
--surface-pick-up-item-column-gap: 5px;
--surface-pick-up-item-gap: 28px;
display: grid;
grid-template-columns: repeat(2, auto) 1fr;
row-gap: var(--surface-pick-up-item-row-gap);
column-gap: var(--surface-pick-up-item-column-gap);
justify-content: flex-start;
padding-bottom: var(--surface-pick-up-item-gap);
margin: var(--surface-pick-up-item-gap) 0 0;
text-align: left;
border-bottom: 1px solid var(--surface-pick-up-item-theme-border-color);
}
.surface-pick-up-item:last-child {
padding-bottom: 0;
border-bottom: none;
}
.surface-pick-up-item__header {
display: flex;
grid-column: span 3;
align-items: flex-end;
}
.surface-pick-up-item__pick-up-location {
margin-top: 0;
margin-bottom: 0;
font-family: inherit;
font-size: var(--surface-pick-up-item-theme-paragraph-font-size);
font-weight: var(--surface-pick-up-item-theme-body-font-weight-bold);
color: var(--surface-pick-up-item-theme-body-text-color);
}
.surface-pick-up-item__pick-up-distance {
padding-left: 2rem;
margin: 0 0 0 auto;
}
.surface-pick-up-item__in-stock-icon,
.surface-pick-up-item__out-of-stock-icon {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 2;
margin-top: 1px;
}
.surface-pick-up-item__in-stock-icon {
fill: var(--surface-pick-up-item-theme-success-color);
}
.surface-pick-up-item__out-of-stock-icon {
fill: var(--surface-pick-up-item-theme-error-color);
}
.surface-pick-up-item__availability {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
font-size: var(--surface-pick-up-item-theme-paragraph-smaller-font-size);
color: var(--surface-pick-up-item-theme-body-text-color);
}
.surface-pick-up-item__address-info {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;
font-size: var(--surface-pick-up-item-theme-paragraph-smaller-font-size);
font-style: normal;
line-height: 1.4;
color: var(--surface-pick-up-item-theme-body-text-color);
}
.surface-pick-up-item__address-info p {
margin: 0;
}
.surface-pick-up-item__address-info a,
.surface-pick-up-item__address-info a:visited {
color: inherit;
text-decoration: none;
}
.surface-pick-up-item__address-info a:focus,
.surface-pick-up-item__address-info a:active,
.surface-pick-up-item__address-info a:hover {
color: inherit;
}
.surface-pick-up-item__confirm-address {
margin-top: var(--surface-pick-up-item-row-gap);
}
.surface-pick-up-item__confirm-address-icon {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 5px;
}
/******************************************************************
Theme Name: Turbo
Theme URI: https://outofthesandbox.com/collections/turbo-theme
Author: Out of the Sandbox (https://outofthesandbox.com)
Description: Shopify Theme (https://www.shopify.com/&ref=out-of-the-sandbox)
******************************************************************/
/* Table of Contents
==================================================
#Variables
#Mixins
#Helper Classes
#Functions
#Grid/layout
#Reset
#Basic Styles
#Breadcrumbs
#Typography
#Links
#Lists
#Menu
#Images
#Placeholders
#Videos
#Buttons
#Tabs
#Product tabs
#Collapsible tab
#Accordions
#Forms
#Contact Form
#Newsletter
#Tables
#Misc
#Testimonials
#FAQ Template
#Team Template
#Logo-list
#Gallery Section
#Ratings
#Recently Viewed
#Search autocomplete
#Search page
#Site Styles
#Header
#Currency / Language switcher
#Swatch Styles
#Sidebar
#Plyr
#Flickity
#Password Page
#Account
#Policy pages
#Product page
#Product Media
#Product Details
#Product Recommendations
#Home page - General
#Home page - Slideshow
#Home page - Search
#Home page - Image with text
#Home page - Divider
#Home page - Quote
#Home page - Rich text and image
#Home page - Featured promotions
#Home page - Featured product
#Home page - Featured collection
#Home page - Image with text overlay
#Home page - Video
#Home page - Newsletter
#Home page - Text column with images
#Font-Face
#Custom Styles */
/* #Variables
================================================== */
/* Responsiveness */
/* The `$breakpoints` list is used to build our media queries.
- You can use these in the media-query mixin.
*/
/* #Mixins
================================================== */
/* Media query mixin */
/* Responsive Show/Hide Helper */
/* Responsive Text Alignment Helper */
/* #Helper Classes
================================================== */
/* Flexbox */
.is-flex {
display: flex;
}
.is-inline-flex {
display: inline-flex;
}
.is-align-start,
.is-align-left {
align-items: flex-start;
}
.is-align-end,
.is-align-right {
align-items: flex-end;
}
.is-align-self-end,
.is-align-self-right {
align-self: flex-end;
}
.is-align-baseline {
align-items: baseline;
}
.is-align-center {
align-items: center;
}
.is-align-stretch {
align-items: stretch;
}
.is-justify-start,
.is-justify-left {
justify-content: flex-start;
}
.is-justify-end,
.is-justify-right {
justify-content: flex-end;
}
.is-justify-center {
justify-content: center;
}
.is-justify-space-around {
justify-content: space-around;
}
.is-justify-space-between {
justify-content: space-between;
}
.is-flex-nowrap {
flex-wrap: nowrap;
}
.is-flex-wrap {
flex-wrap: wrap;
}
.is-flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
.is-flex-row {
flex-direction: row;
}
.is-flex-row-reverse {
flex-direction: row-reverse;
}
.is-flex-column {
flex-direction: column;
}
.is-flex-column-reverse {
flex-direction: column-reverse;
}
/* Flex position order */
.is-order-aligned-left {
order: -1;
}
@media only screen and (max-width: 480px) {
.is-order-aligned-left {
order: inherit;
}
}
.is-order-aligned-right {
order: 1;
}
@media only screen and (max-width: 480px) {
.is-order-aligned-right {
order: inherit;
}
}
/* Padding helpers */
.has-padding-top {
padding-top: 20px;
}
.has-padding-bottom {
padding-bottom: 20px;
}
.has-padding-left {
padding-left: 20px;
}
.has-padding-right {
padding-right: 20px;
}
.has-padding {
padding: 20px;
}
/* Margin helpers */
.has-margin-top {
margin-top: 20px;
}
.has-margin-bottom {
margin-bottom: 20px;
}
/* Text alignment */
.text-align-center {
text-align: center;
}
.text-align-left,
.text-align-start {
text-align: left;
}
.text-align-left h1, .text-align-left h2, .text-align-left h3,
.text-align-left h1.title,
.text-align-left h2.title,
.text-align-left h3.title,
.text-align-start h1,
.text-align-start h2,
.text-align-start h3,
.text-align-start h1.title,
.text-align-start h2.title,
.text-align-start h3.title {
text-align: left;
}
.text-align-right,
.text-align-end {
text-align: right;
}
.text-align-right h1, .text-align-right h2, .text-align-right h3,
.text-align-right h1.title,
.text-align-right h2.title,
.text-align-right h3.title,
.text-align-end h1,
.text-align-end h2,
.text-align-end h3,
.text-align-end h1.title,
.text-align-end h2.title,
.text-align-end h3.title {
text-align: right;
}
/* Visibility */
.is-hidden {
display: none !important;
}
/* .is-visible was `display: block !important` — this broke every flex/grid
container on the site because the reveal animation applies .is-visible on
scroll, and `display: block` overrode `display: flex/grid`. Result: collection
product grids stacked one-per-row, hgbj-reveal wrappers collapsed.
Switched to opacity + visibility (which doesn't clobber display mode) and
excluded any element that opts-in to flex/grid via class. */
.is-visible {
opacity: 1;
visibility: visible;
}
/* Legacy fallback: force display:block on elements that don't declare their own
layout mode. Excludes every flex/grid container class present. */
.is-visible:not(.is-flex):not(.is-grid):not([class*="grid"]):not([class*="product-list"]):not([class*="collection-list"]):not([class*="has-multiple-image"]):not([class*="hgbj-flex"]) {
display: block !important;
}
/* Positive override: explicitly force flex on containers that declare .is-flex
(some upstream ancestor rule was coercing them to block). */
.is-flex.is-visible,
.is-grid.is-visible,
[class*="product-list"].is-visible,
[class*="collection-list"].is-visible,
[class*="has-multiple-image"].is-visible,
[class*="hgbj-flex"].is-visible,
.product-list.product-list--collection.is-visible {
display: flex !important;
}
.is-grid.is-visible,
[class*="grid"][class*="is-visible"]:not([class*="product-list"]):not([class*="collection-list"]) {
display: grid !important;
}
.is-sr-only {
border: none !important;
clip: rect(0, 0, 0, 0) !important;
height: 0.01em !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 0.01em !important;
}
.is-invisible {
visibility: hidden !important;
}
@media only screen and (min-width: 481px) and (max-width: 798px) {
.is-hidden-small {
display: none !important;
}
}
@media only screen and (min-width: 799px) and (max-width: 1024px) {
.is-hidden-medium {
display: none !important;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1400px) {
.is-hidden-large {
display: none !important;
}
}
@media only screen and (max-width: 798px) {
.is-hidden-mobile-only {
display: none !important;
}
}
@media only screen and (min-width: 799px) {
.is-hidden-desktop-only {
display: none !important;
}
}
@media only screen and (min-width: 1401px) {
.is-hidden-widescreen {
display: none !important;
}
}
@media only screen and (max-width: 798px) {
.is-visible--mobile {
display: block !important;
}
}
@media only screen and (max-width: 798px) {
.is-hidden-offset-mobile-only {
left: 0 !important;
}
}
.is-invisible {
visibility: hidden !important;
}
/* #Functions
================================================== */
/* #Grid/Layout
================================================== */
.index {
display: flex;
flex-wrap: wrap;
}
/* Home page sections are set to flex so that half sizes may sit side-by-side */
.page-blocks {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
/* Controls the width and spacing of each section - the class ".shopify-section" is generated by Shopify and applied to each element (along with unique ID) - uses CSS variables which are set in liquid files */
.shopify-section {
width: 100%;
}
@media only screen and (max-width: 480px) {
.shopify-section {
width: 100% !important;
padding-left: 0 !important; /* Ignores padding set on larger screen sizes */
padding-right: 0 !important; /* Ignores padding set on larger screen sizes */
}
}
/* Handles the background color and margins depending on what width has been chosen */
.section {
max-width: 1200px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.section.is-width-wide {
width: 100%;
max-width: none;
}
.section-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}.section-wrapper--product {
max-width: 1200px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.section-wrapper--product .section {
width: 100%;
}
.section-wrapper--product.is-width-wide {
width: 100%;
max-width: none;
}
@media only screen and (max-width: 798px) {
.mobile_nav-fixed--true .section-wrapper {
display: block;
margin-top: 40px;
}
}
@media only screen and (max-width: 798px) {
.mobile_nav-fixed--true.promo-banner--show .section-wrapper {
display: block;
margin-top: 70px;
}
}
/* Parent container for column elements - uses flexbox, so this container can be made smaller and the columns will shrink in relation */
.container {
position: relative;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container .column,
.container .columns {
margin-left: calc(20px / 2);
margin-right: calc(20px / 2);
}
.product-container {
width: 100%;
}
/* Applies flex styling for columns created using Content Creator */
.row {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
@media only screen and (max-width: 798px) {
.row .column,
.row .columns {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
[class*=offset-by] {
position: relative;
}
/*================ Build Base Grid Classes ================*/
.hidden {
display: none;
}
.visible {
display: block;
}
/* Base Grid */
.one {
width: calc(6.25% - 20px);
}
.two {
width: calc(12.5% - 20px);
}
.three {
width: calc(18.75% - 20px);
}
.four {
width: calc(25% - 20px);
}
.five {
width: calc(31.25% - 20px);
}
.six {
width: calc(37.5% - 20px);
}
.seven {
width: calc(43.75% - 20px);
}
.eight {
width: calc(50% - 20px);
}
.nine {
width: calc(56.25% - 20px);
}
.ten {
width: calc(62.5% - 20px);
}
.eleven {
width: calc(68.75% - 20px);
}
.twelve {
width: calc(75% - 20px);
}
.thirteen {
width: calc(81.25% - 20px);
}
.fourteen {
width: calc(87.5% - 20px);
}
.fifteen {
width: calc(93.75% - 20px);
}
.sixteen {
width: calc(100% - 20px);
}
/* Whole */
.one-whole {
width: calc(100% - 20px);
}
/* Halves */
.one-half {
width: calc(50% - 20px);
}
/* Thirds */
.one-third {
width: calc(33.3333333333% - 20px);
}
.two-thirds {
width: calc(66.6666666667% - 20px);
}
/* Fourths */
.one-fourth {
width: calc(25% - 20px);
}
.two-fourths {
width: calc(50% - 20px);
}
.three-fourths {
width: calc(75% - 20px);
}
/* Fifths */
.one-fifth {
width: calc(20% - 20px);
}
.two-fifths {
width: calc(40% - 20px);
}
.three-fifths {
width: calc(60% - 20px);
}
.four-fifths {
width: calc(80% - 20px);
}
/* Sixths */
.one-sixth {
width: calc(16.6666666667% - 20px);
}
.two-sixths {
width: calc(33.3333333333% - 20px);
}
.three-sixths {
width: calc(50% - 20px);
}
.four-sixths {
width: calc(66.6666666667% - 20px);
}
.five-sixths {
width: calc(83.3333333333% - 20px);
}
/* Sevenths */
.one-seventh {
width: calc(14.2857142857% - 20px);
}
.two-sevenths {
width: calc(28.5714285714% - 20px);
}
.three-sevenths {
width: calc(42.8571428571% - 20px);
}
.four-sevenths {
width: calc(57.1428571429% - 20px);
}
.five-sevenths {
width: calc(71.4285714286% - 20px);
}
/* Eighths */
.one-eighth {
width: calc(12.5% - 20px);
}
.two-eighths {
width: calc(25% - 20px);
}
.three-eighths {
width: calc(37.5% - 20px);
}
.four-eighths {
width: calc(50% - 20px);
}
.five-eighths {
width: calc(62.5% - 20px);
}
.six-eighths {
width: calc(75% - 20px);
}
.seven-eighths {
width: calc(87.5% - 20px);
}
/* Tenths */
.one-tenth {
width: calc(10% - 20px);
}
.two-tenths {
width: calc(20% - 20px);
}
.three-tenths {
width: calc(30% - 20px);
}
.four-tenths {
width: calc(40% - 20px);
}
.five-tenths {
width: calc(50% - 20px);
}
.six-tenths {
width: calc(60% - 20px);
}
.seven-tenths {
width: calc(70% - 20px);
}
.eight-tenths {
width: calc(80% - 20px);
}
.nine-tenths {
width: calc(90% - 20px);
}
/* Twelfths */
.one-twelfth {
width: calc(8.3333333333% - 20px);
}
.two-twelfths {
width: calc(16.6666666667% - 20px);
}
.three-twelfths {
width: calc(25% - 20px);
}
.four-twelfths {
width: calc(33.3333333333% - 20px);
}
.five-twelfths {
width: calc(41.6666666667% - 20px);
}
.six-twelfths {
width: calc(50% - 20px);
}
.seven-twelfths {
width: calc(58.3333333333% - 20px);
}
.eight-twelfths {
width: calc(66.6666666667% - 20px);
}
.nine-twelfths {
width: calc(75% - 20px);
}
.ten-twelfths {
width: calc(83.3333333333% - 20px);
}
.eleven-twelfths {
width: calc(91.6666666667% - 20px);
}
/* Offsets */
.offset-by-one {
left: calc(6.25%);
}
.offset-by-two {
left: calc(12.5%);
}
.offset-by-three {
left: calc(18.75%);
}
.offset-by-four {
left: calc(25%);
}
.offset-by-five {
left: calc(31.25%);
}
.offset-by-six {
left: calc(37.5%);
}
.offset-by-seven {
left: calc(43.75%);
}
.offset-by-eight {
left: calc(50%);
}
.offset-by-nine {
left: calc(56.25%);
}
.offset-by-ten {
left: calc(62.5%);
}
.offset-by-eleven {
left: calc(68.75%);
}
.offset-by-twelve {
left: calc(75%);
}
.offset-by-thirteen {
left: calc(81.25%);
}
.offset-by-fourteen {
left: calc(87.5%);
}
.offset-by-fifteen {
left: calc(93.75%);
}
/* Remove gutter on first and last column (must be consistent size) */
.equal-columns--outside-trim .one-half:nth-of-type(2n),
.equal-columns--outside-trim .eight:nth-of-type(2n),
.equal-columns--outside-trim .one-third:nth-of-type(3n),
.equal-columns--outside-trim .one-fourth:nth-of-type(4n),
.equal-columns--outside-trim .four:nth-of-type(4n),
.equal-columns--outside-trim .one-fifth:nth-of-type(5n),
.equal-columns--outside-trim .one-sixth:nth-of-type(6n),
.equal-columns--outside-trim .one-seventh:nth-of-type(7n),
.equal-columns--outside-trim .two:nth-of-type(8n) {
margin-right: 0;
}
.equal-columns--outside-trim .one-half:nth-of-type(2n+1),
.equal-columns--outside-trim .eight:nth-of-type(2n+1),
.equal-columns--outside-trim .one-third:nth-of-type(3n+1),
.equal-columns--outside-trim .one-fourth:nth-of-type(4n+1),
.equal-columns--outside-trim .four:nth-of-type(4n+1),
.equal-columns--outside-trim .one-fifth:nth-of-type(5n+1),
.equal-columns--outside-trim .one-sixth:nth-of-type(6n+1),
.equal-columns--outside-trim .one-seventh:nth-of-type(7n+1),
.equal-columns--outside-trim .two:nth-of-type(8n+1) {
margin-left: 0;
}
.equal-columns--outside-trim .one-whole:nth-of-type(1n+1) {
width: 100%;
margin-right: 0;
margin-left: 0;
}
.equal-columns--outside-trim .one-half {
width: calc(50% - (20px - (20px / 2)));
}
.equal-columns--outside-trim .one-third {
width: calc(33.3333333333% - (20px - (20px / 3)));
}
.equal-columns--outside-trim .one-fifth {
width: calc(20% - (20px - (20px / 5)));
}
.equal-columns--outside-trim .one-fourth {
width: calc(25% - (20px - (20px / 4)));
}
.equal-columns--outside-trim .one-sixth {
width: calc(16.6666666667% - (20px - (20px / 6)));
}
.equal-columns--outside-trim .one-seventh {
width: calc(14.2857142857% - (20px - (20px / 7)));
}
.equal-columns--outside-trim .two {
width: calc(12.5% - (20px - (20px / 8)));
}
.equal-columns--outside-trim .four {
width: calc(25% - (20px - (20px / 4)));
}
.equal-columns--outside-trim .seven {
width: calc(43.75% - (20px - (20px / 2)));
}
.equal-columns--outside-trim .eight {
width: calc(50% - (20px / 2));
}
.equal-columns--outside-trim .nine {
width: calc(56.25% - (20px - (20px / 2)));
}
/* Remove side gutter on all columns */
.has-no-side-gutter.has-background {
padding-right: 0px;
padding-left: 0px;
}
.has-no-side-gutter .one-whole,
.has-no-side-gutter .one-half,
.has-no-side-gutter .eight,
.has-no-side-gutter .one-third,
.has-no-side-gutter .two-thirds,
.has-no-side-gutter .one-fourth,
.has-no-side-gutter .four,
.has-no-side-gutter .one-fifth,
.has-no-side-gutter .three-fifths,
.has-no-side-gutter .two-fifths,
.has-no-side-gutter .one-sixth,
.has-no-side-gutter .one-seventh,
.has-no-side-gutter .one-eighth,
.has-no-side-gutter .two {
margin-right: 0;
margin-left: 0;
}
.has-no-side-gutter .one-whole {
width: 100%;
}
.has-no-side-gutter .one-half {
width: 50%;
}
.has-no-side-gutter .one-third {
width: 33.3333333333%;
}
.has-no-side-gutter .one-fourth {
width: 25%;
}
.has-no-side-gutter .one-fifth {
width: 20%;
}
.has-no-side-gutter .two-fifths {
width: 40%;
}
.has-no-side-gutter .three-fifths {
width: 60%;
}
.has-no-side-gutter .one-sixth {
width: 16.6666666667%;
}
.has-no-side-gutter .one-seventh {
width: 14.2857142857%;
}
.has-no-side-gutter .one-eighth {
width: 12.5%;
}
.has-no-side-gutter .two-thirds {
width: 66.6666666667%;
}
.has-no-side-gutter .two {
width: 12.5%;
}
.has-no-side-gutter .four {
width: 25%;
}
.has-no-side-gutter .seven {
width: 43.75%;
}
.has-no-side-gutter .eight {
width: 50%;
}
.has-no-side-gutter .nine {
width: 56.25%;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
/*============================================================================
Generate breakpoint-specific column widths and push classes
- Default column widths: $breakpoint-has-widths: ($small, $medium-up);
- Default is no push classes
- Will not work if `styles/global/grid.scss` is removed
==============================================================================*/
/*================ Build Responsive Grid Classes ================*/
@media only screen and (max-width: 1024px) {
.large-down--hidden {
display: none;
}
.large-down--visible {
display: block;
}
/* Base Grid */
.large-down--one {
width: calc(6.25% - 20px);
}
.large-down--two {
width: calc(12.5% - 20px);
}
.large-down--three {
width: calc(18.75% - 20px);
}
.large-down--four {
width: calc(25% - 20px);
}
.large-down--five {
width: calc(31.25% - 20px);
}
.large-down--six {
width: calc(37.5% - 20px);
}
.large-down--seven {
width: calc(43.75% - 20px);
}
.large-down--eight {
width: calc(50% - 20px);
}
.large-down--nine {
width: calc(56.25% - 20px);
}
.large-down--ten {
width: calc(62.5% - 20px);
}
.large-down--eleven {
width: calc(68.75% - 20px);
}
.large-down--twelve {
width: calc(75% - 20px);
}
.large-down--thirteen {
width: calc(81.25% - 20px);
}
.large-down--fourteen {
width: calc(87.5% - 20px);
}
.large-down--fifteen {
width: calc(93.75% - 20px);
}
.large-down--sixteen {
width: calc(100% - 20px);
}
/* Whole */
.large-down--one-whole {
width: calc(100% - 20px);
}
/* Halves */
.large-down--one-half {
width: calc(50% - 20px);
}
/* Thirds */
.large-down--one-third {
width: calc(33.3333333333% - 20px);
}
.large-down--two-thirds {
width: calc(66.6666666667% - 20px);
}
/* Fourths */
.large-down--one-fourth {
width: calc(25% - 20px);
}
.large-down--two-fourths {
width: calc(50% - 20px);
}
.large-down--three-fourths {
width: calc(75% - 20px);
}
/* Fifths */
.large-down--one-fifth {
width: calc(20% - 20px);
}
.large-down--two-fifths {
width: calc(40% - 20px);
}
.large-down--three-fifths {
width: calc(60% - 20px);
}
.large-down--four-fifths {
width: calc(80% - 20px);
}
/* Sixths */
.large-down--one-sixth {
width: calc(16.6666666667% - 20px);
}
.large-down--two-sixths {
width: calc(33.3333333333% - 20px);
}
.large-down--three-sixths {
width: calc(50% - 20px);
}
.large-down--four-sixths {
width: calc(66.6666666667% - 20px);
}
.large-down--five-sixths {
width: calc(83.3333333333% - 20px);
}
/* Sevenths */
.large-down--one-seventh {
width: calc(14.2857142857% - 20px);
}
.large-down--two-sevenths {
width: calc(28.5714285714% - 20px);
}
.large-down--three-sevenths {
width: calc(42.8571428571% - 20px);
}
.large-down--four-sevenths {
width: calc(57.1428571429% - 20px);
}
.large-down--five-sevenths {
width: calc(71.4285714286% - 20px);
}
/* Eighths */
.large-down--one-eighth {
width: calc(12.5% - 20px);
}
.large-down--two-eighths {
width: calc(25% - 20px);
}
.large-down--three-eighths {
width: calc(37.5% - 20px);
}
.large-down--four-eighths {
width: calc(50% - 20px);
}
.large-down--five-eighths {
width: calc(62.5% - 20px);
}
.large-down--six-eighths {
width: calc(75% - 20px);
}
.large-down--seven-eighths {
width: calc(87.5% - 20px);
}
/* Tenths */
.large-down--one-tenth {
width: calc(10% - 20px);
}
.large-down--two-tenths {
width: calc(20% - 20px);
}
.large-down--three-tenths {
width: calc(30% - 20px);
}
.large-down--four-tenths {
width: calc(40% - 20px);
}
.large-down--five-tenths {
width: calc(50% - 20px);
}
.large-down--six-tenths {
width: calc(60% - 20px);
}
.large-down--seven-tenths {
width: calc(70% - 20px);
}
.large-down--eight-tenths {
width: calc(80% - 20px);
}
.large-down--nine-tenths {
width: calc(90% - 20px);
}
/* Twelfths */
.large-down--one-twelfth {
width: calc(8.3333333333% - 20px);
}
.large-down--two-twelfths {
width: calc(16.6666666667% - 20px);
}
.large-down--three-twelfths {
width: calc(25% - 20px);
}
.large-down--four-twelfths {
width: calc(33.3333333333% - 20px);
}
.large-down--five-twelfths {
width: calc(41.6666666667% - 20px);
}
.large-down--six-twelfths {
width: calc(50% - 20px);
}
.large-down--seven-twelfths {
width: calc(58.3333333333% - 20px);
}
.large-down--eight-twelfths {
width: calc(66.6666666667% - 20px);
}
.large-down--nine-twelfths {
width: calc(75% - 20px);
}
.large-down--ten-twelfths {
width: calc(83.3333333333% - 20px);
}
.large-down--eleven-twelfths {
width: calc(91.6666666667% - 20px);
}
/* Offsets */
.large-down--offset-by-one {
left: calc(6.25%);
}
.large-down--offset-by-two {
left: calc(12.5%);
}
.large-down--offset-by-three {
left: calc(18.75%);
}
.large-down--offset-by-four {
left: calc(25%);
}
.large-down--offset-by-five {
left: calc(31.25%);
}
.large-down--offset-by-six {
left: calc(37.5%);
}
.large-down--offset-by-seven {
left: calc(43.75%);
}
.large-down--offset-by-eight {
left: calc(50%);
}
.large-down--offset-by-nine {
left: calc(56.25%);
}
.large-down--offset-by-ten {
left: calc(62.5%);
}
.large-down--offset-by-eleven {
left: calc(68.75%);
}
.large-down--offset-by-twelve {
left: calc(75%);
}
.large-down--offset-by-thirteen {
left: calc(81.25%);
}
.large-down--offset-by-fourteen {
left: calc(87.5%);
}
.large-down--offset-by-fifteen {
left: calc(93.75%);
}
/* Remove gutter on first and last column (must be consistent size) */
.equal-columns--outside-trim .large-down--one-half:nth-of-type(2n),
.equal-columns--outside-trim .large-down--eight:nth-of-type(2n),
.equal-columns--outside-trim .large-down--one-third:nth-of-type(3n),
.equal-columns--outside-trim .large-down--one-fourth:nth-of-type(4n),
.equal-columns--outside-trim .large-down--four:nth-of-type(4n),
.equal-columns--outside-trim .large-down--one-fifth:nth-of-type(5n),
.equal-columns--outside-trim .large-down--one-sixth:nth-of-type(6n),
.equal-columns--outside-trim .large-down--one-seventh:nth-of-type(7n),
.equal-columns--outside-trim .large-down--two:nth-of-type(8n) {
margin-right: 0;
}
.equal-columns--outside-trim .large-down--one-half:nth-of-type(2n+1),
.equal-columns--outside-trim .large-down--eight:nth-of-type(2n+1),
.equal-columns--outside-trim .large-down--one-third:nth-of-type(3n+1),
.equal-columns--outside-trim .large-down--one-fourth:nth-of-type(4n+1),
.equal-columns--outside-trim .large-down--four:nth-of-type(4n+1),
.equal-columns--outside-trim .large-down--one-fifth:nth-of-type(5n+1),
.equal-columns--outside-trim .large-down--one-sixth:nth-of-type(6n+1),
.equal-columns--outside-trim .large-down--one-seventh:nth-of-type(7n+1),
.equal-columns--outside-trim .large-down--two:nth-of-type(8n+1) {
margin-left: 0;
}
/* Remove side gutter on all columns */
}
@media only screen and (max-width: 1024px) and (max-width: 1024px) {
.equal-columns--outside-trim {
/* Reset previous margins */
/* Set new margins on right */
/* Set new margins on left */
}
.equal-columns--outside-trim .large-down--one-half.large-down--one-half,
.equal-columns--outside-trim .large-down--eight.large-down--eight,
.equal-columns--outside-trim .large-down--one-third.large-down--one-third,
.equal-columns--outside-trim .large-down--one-fourth.large-down--one-fourth,
.equal-columns--outside-trim .large-down--four.large-down--four,
.equal-columns--outside-trim .large-down--one-fifth.large-down--one-fifth,
.equal-columns--outside-trim .large-down--one-sixth.large-down--one-sixth,
.equal-columns--outside-trim .large-down--one-seventh.large-down--one-seventh,
.equal-columns--outside-trim .large-down--two.large-down--two {
margin-left: calc(20px / 2);
margin-right: calc(20px / 2);
}
.equal-columns--outside-trim .large-down--one-half:nth-of-type(2n),
.equal-columns--outside-trim .large-down--eight:nth-of-type(2n),
.equal-columns--outside-trim .large-down--one-third:nth-of-type(3n),
.equal-columns--outside-trim .large-down--one-fourth:nth-of-type(4n),
.equal-columns--outside-trim .large-down--four:nth-of-type(4n),
.equal-columns--outside-trim .large-down--one-fifth:nth-of-type(5n),
.equal-columns--outside-trim .large-down--one-sixth:nth-of-type(6n),
.equal-columns--outside-trim .large-down--one-seventh:nth-of-type(7n),
.equal-columns--outside-trim .large-down--two:nth-of-type(8n) {
margin-right: 0;
}
.equal-columns--outside-trim .large-down--one-half:nth-of-type(2n+1),
.equal-columns--outside-trim .large-down--eight:nth-of-type(2n+1),
.equal-columns--outside-trim .large-down--one-third:nth-of-type(3n+1),
.equal-columns--outside-trim .large-down--one-fourth:nth-of-type(4n+1),
.equal-columns--outside-trim .large-down--four:nth-of-type(4n+1),
.equal-columns--outside-trim .large-down--one-fifth:nth-of-type(5n+1),
.equal-columns--outside-trim .large-down--one-sixth:nth-of-type(6n+1),
.equal-columns--outside-trim .large-down--one-seventh:nth-of-type(7n+1),
.equal-columns--outside-trim .large-down--two:nth-of-type(8n+1) {
margin-left: 0;
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--one-whole:nth-of-type(1n+1) {
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--one-half {
width: calc(50% - (20px - (20px / 2)));
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--one-third {
width: calc(33.3333333333% - (20px - (20px / 3)));
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--one-fifth {
width: calc(20% - (20px - (20px / 5)));
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--one-fourth {
width: calc(25% - (20px - (20px / 4)));
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--one-sixth {
width: calc(16.6666666667% - (20px - (20px / 6)));
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--one-seventh {
width: calc(14.2857142857% - (20px - (20px / 7)));
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--two {
width: calc(12.5% - (20px - (20px / 8)));
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--four {
width: calc(25% - (20px - (20px / 4)));
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--seven {
width: calc(43.75% - (20px - (20px / 2)));
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--eight {
width: calc(50% - (20px / 2));
}
}
@media only screen and (max-width: 1024px) {
.equal-columns--outside-trim .large-down--nine {
width: calc(56.25% - (20px - (20px / 2)));
}
}
@media only screen and (max-width: 1024px) {
.has-no-side-gutter.has-background {
padding-right: 0px;
padding-left: 0px;
}
.has-no-side-gutter .large-down--one-whole,
.has-no-side-gutter .large-down--one-half,
.has-no-side-gutter .large-down--eight,
.has-no-side-gutter .large-down--one-third,
.has-no-side-gutter .large-down--two-thirds,
.has-no-side-gutter .large-down--one-fourth,
.has-no-side-gutter .large-down--four,
.has-no-side-gutter .large-down--one-fifth,
.has-no-side-gutter .large-down--three-fifths,
.has-no-side-gutter .large-down--two-fifths,
.has-no-side-gutter .large-down--one-sixth,
.has-no-side-gutter .large-down--one-seventh,
.has-no-side-gutter .large-down--one-eighth,
.has-no-side-gutter .large-down--two {
margin-right: 0;
margin-left: 0;
}
.has-no-side-gutter .large-down--one-whole {
width: 100%;
}
.has-no-side-gutter .large-down--one-half {
width: 50%;
}
.has-no-side-gutter .large-down--one-third {
width: 33.3333333333%;
}
.has-no-side-gutter .large-down--one-fourth {
width: 25%;
}
.has-no-side-gutter .large-down--one-fifth {
width: 20%;
}
.has-no-side-gutter .large-down--two-fifths {
width: 40%;
}
.has-no-side-gutter .large-down--three-fifths {
width: 60%;
}
.has-no-side-gutter .large-down--one-sixth {
width: 16.6666666667%;
}
.has-no-side-gutter .large-down--one-seventh {
width: 14.2857142857%;
}
.has-no-side-gutter .large-down--one-eighth {
width: 12.5%;
}
.has-no-side-gutter .large-down--two-thirds {
width: 66.6666666667%;
}
.has-no-side-gutter .large-down--two {
width: 12.5%;
}
.has-no-side-gutter .large-down--four {
width: 25%;
}
.has-no-side-gutter .large-down--seven {
width: 43.75%;
}
.has-no-side-gutter .large-down--eight {
width: 50%;
}
.has-no-side-gutter .large-down--nine {
width: 56.25%;
}
}
@media only screen and (max-width: 1024px) {
.large-down--show {
display: block !important;
}
}
@media only screen and (max-width: 1024px) {
.large-down--hide {
display: none !important;
}
}
@media only screen and (max-width: 1024px) {
.large-down--text-left {
text-align: left !important;
}
}
@media only screen and (max-width: 1024px) {
.large-down--text-right {
text-align: right !important;
}
}
@media only screen and (max-width: 1024px) {
.large-down--text-center {
text-align: center !important;
}
}
@media only screen and (max-width: 798px) {
.medium-down--hidden {
display: none;
}
.medium-down--visible {
display: block;
}
/* Base Grid */
.medium-down--one {
width: calc(6.25% - 20px);
}
.medium-down--two {
width: calc(12.5% - 20px);
}
.medium-down--three {
width: calc(18.75% - 20px);
}
.medium-down--four {
width: calc(25% - 20px);
}
.medium-down--five {
width: calc(31.25% - 20px);
}
.medium-down--six {
width: calc(37.5% - 20px);
}
.medium-down--seven {
width: calc(43.75% - 20px);
}
.medium-down--eight {
width: calc(50% - 20px);
}
.medium-down--nine {
width: calc(56.25% - 20px);
}
.medium-down--ten {
width: calc(62.5% - 20px);
}
.medium-down--eleven {
width: calc(68.75% - 20px);
}
.medium-down--twelve {
width: calc(75% - 20px);
}
.medium-down--thirteen {
width: calc(81.25% - 20px);
}
.medium-down--fourteen {
width: calc(87.5% - 20px);
}
.medium-down--fifteen {
width: calc(93.75% - 20px);
}
.medium-down--sixteen {
width: calc(100% - 20px);
}
/* Whole */
.medium-down--one-whole {
width: calc(100% - 20px);
}
/* Halves */
.medium-down--one-half {
width: calc(50% - 20px);
}
/* Thirds */
.medium-down--one-third {
width: calc(33.3333333333% - 20px);
}
.medium-down--two-thirds {
width: calc(66.6666666667% - 20px);
}
/* Fourths */
.medium-down--one-fourth {
width: calc(25% - 20px);
}
.medium-down--two-fourths {
width: calc(50% - 20px);
}
.medium-down--three-fourths {
width: calc(75% - 20px);
}
/* Fifths */
.medium-down--one-fifth {
width: calc(20% - 20px);
}
.medium-down--two-fifths {
width: calc(40% - 20px);
}
.medium-down--three-fifths {
width: calc(60% - 20px);
}
.medium-down--four-fifths {
width: calc(80% - 20px);
}
/* Sixths */
.medium-down--one-sixth {
width: calc(16.6666666667% - 20px);
}
.medium-down--two-sixths {
width: calc(33.3333333333% - 20px);
}
.medium-down--three-sixths {
width: calc(50% - 20px);
}
.medium-down--four-sixths {
width: calc(66.6666666667% - 20px);
}
.medium-down--five-sixths {
width: calc(83.3333333333% - 20px);
}
/* Sevenths */
.medium-down--one-seventh {
width: calc(14.2857142857% - 20px);
}
.medium-down--two-sevenths {
width: calc(28.5714285714% - 20px);
}
.medium-down--three-sevenths {
width: calc(42.8571428571% - 20px);
}
.medium-down--four-sevenths {
width: calc(57.1428571429% - 20px);
}
.medium-down--five-sevenths {
width: calc(71.4285714286% - 20px);
}
/* Eighths */
.medium-down--one-eighth {
width: calc(12.5% - 20px);
}
.medium-down--two-eighths {
width: calc(25% - 20px);
}
.medium-down--three-eighths {
width: calc(37.5% - 20px);
}
.medium-down--four-eighths {
width: calc(50% - 20px);
}
.medium-down--five-eighths {
width: calc(62.5% - 20px);
}
.medium-down--six-eighths {
width: calc(75% - 20px);
}
.medium-down--seven-eighths {
width: calc(87.5% - 20px);
}
/* Tenths */
.medium-down--one-tenth {
width: calc(10% - 20px);
}
.medium-down--two-tenths {
width: calc(20% - 20px);
}
.medium-down--three-tenths {
width: calc(30% - 20px);
}
.medium-down--four-tenths {
width: calc(40% - 20px);
}
.medium-down--five-tenths {
width: calc(50% - 20px);
}
.medium-down--six-tenths {
width: calc(60% - 20px);
}
.medium-down--seven-tenths {
width: calc(70% - 20px);
}
.medium-down--eight-tenths {
width: calc(80% - 20px);
}
.medium-down--nine-tenths {
width: calc(90% - 20px);
}
/* Twelfths */
.medium-down--one-twelfth {
width: calc(8.3333333333% - 20px);
}
.medium-down--two-twelfths {
width: calc(16.6666666667% - 20px);
}
.medium-down--three-twelfths {
width: calc(25% - 20px);
}
.medium-down--four-twelfths {
width: calc(33.3333333333% - 20px);
}
.medium-down--five-twelfths {
width: calc(41.6666666667% - 20px);
}
.medium-down--six-twelfths {
width: calc(50% - 20px);
}
.medium-down--seven-twelfths {
width: calc(58.3333333333% - 20px);
}
.medium-down--eight-twelfths {
width: calc(66.6666666667% - 20px);
}
.medium-down--nine-twelfths {
width: calc(75% - 20px);
}
.medium-down--ten-twelfths {
width: calc(83.3333333333% - 20px);
}
.medium-down--eleven-twelfths {
width: calc(91.6666666667% - 20px);
}
/* Offsets */
.medium-down--offset-by-one {
left: calc(6.25%);
}
.medium-down--offset-by-two {
left: calc(12.5%);
}
.medium-down--offset-by-three {
left: calc(18.75%);
}
.medium-down--offset-by-four {
left: calc(25%);
}
.medium-down--offset-by-five {
left: calc(31.25%);
}
.medium-down--offset-by-six {
left: calc(37.5%);
}
.medium-down--offset-by-seven {
left: calc(43.75%);
}
.medium-down--offset-by-eight {
left: calc(50%);
}
.medium-down--offset-by-nine {
left: calc(56.25%);
}
.medium-down--offset-by-ten {
left: calc(62.5%);
}
.medium-down--offset-by-eleven {
left: calc(68.75%);
}
.medium-down--offset-by-twelve {
left: calc(75%);
}
.medium-down--offset-by-thirteen {
left: calc(81.25%);
}
.medium-down--offset-by-fourteen {
left: calc(87.5%);
}
.medium-down--offset-by-fifteen {
left: calc(93.75%);
}
/* Remove gutter on first and last column (must be consistent size) */
.equal-columns--outside-trim .medium-down--one-half:nth-of-type(2n),
.equal-columns--outside-trim .medium-down--eight:nth-of-type(2n),
.equal-columns--outside-trim .medium-down--one-third:nth-of-type(3n),
.equal-columns--outside-trim .medium-down--one-fourth:nth-of-type(4n),
.equal-columns--outside-trim .medium-down--four:nth-of-type(4n),
.equal-columns--outside-trim .medium-down--one-fifth:nth-of-type(5n),
.equal-columns--outside-trim .medium-down--one-sixth:nth-of-type(6n),
.equal-columns--outside-trim .medium-down--one-seventh:nth-of-type(7n),
.equal-columns--outside-trim .medium-down--two:nth-of-type(8n) {
margin-right: 0;
}
.equal-columns--outside-trim .medium-down--one-half:nth-of-type(2n+1),
.equal-columns--outside-trim .medium-down--eight:nth-of-type(2n+1),
.equal-columns--outside-trim .medium-down--one-third:nth-of-type(3n+1),
.equal-columns--outside-trim .medium-down--one-fourth:nth-of-type(4n+1),
.equal-columns--outside-trim .medium-down--four:nth-of-type(4n+1),
.equal-columns--outside-trim .medium-down--one-fifth:nth-of-type(5n+1),
.equal-columns--outside-trim .medium-down--one-sixth:nth-of-type(6n+1),
.equal-columns--outside-trim .medium-down--one-seventh:nth-of-type(7n+1),
.equal-columns--outside-trim .medium-down--two:nth-of-type(8n+1) {
margin-left: 0;
}
/* Remove side gutter on all columns */
}
@media only screen and (max-width: 798px) and (max-width: 798px) {
.equal-columns--outside-trim {
/* Reset previous margins */
/* Set new margins on right */
/* Set new margins on left */
}
.equal-columns--outside-trim .medium-down--one-half.medium-down--one-half,
.equal-columns--outside-trim .medium-down--eight.medium-down--eight,
.equal-columns--outside-trim .medium-down--one-third.medium-down--one-third,
.equal-columns--outside-trim .medium-down--one-fourth.medium-down--one-fourth,
.equal-columns--outside-trim .medium-down--four.medium-down--four,
.equal-columns--outside-trim .medium-down--one-fifth.medium-down--one-fifth,
.equal-columns--outside-trim .medium-down--one-sixth.medium-down--one-sixth,
.equal-columns--outside-trim .medium-down--one-seventh.medium-down--one-seventh,
.equal-columns--outside-trim .medium-down--two.medium-down--two {
margin-left: calc(20px / 2);
margin-right: calc(20px / 2);
}
.equal-columns--outside-trim .medium-down--one-half:nth-of-type(2n),
.equal-columns--outside-trim .medium-down--eight:nth-of-type(2n),
.equal-columns--outside-trim .medium-down--one-third:nth-of-type(3n),
.equal-columns--outside-trim .medium-down--one-fourth:nth-of-type(4n),
.equal-columns--outside-trim .medium-down--four:nth-of-type(4n),
.equal-columns--outside-trim .medium-down--one-fifth:nth-of-type(5n),
.equal-columns--outside-trim .medium-down--one-sixth:nth-of-type(6n),
.equal-columns--outside-trim .medium-down--one-seventh:nth-of-type(7n),
.equal-columns--outside-trim .medium-down--two:nth-of-type(8n) {
margin-right: 0;
}
.equal-columns--outside-trim .medium-down--one-half:nth-of-type(2n+1),
.equal-columns--outside-trim .medium-down--eight:nth-of-type(2n+1),
.equal-columns--outside-trim .medium-down--one-third:nth-of-type(3n+1),
.equal-columns--outside-trim .medium-down--one-fourth:nth-of-type(4n+1),
.equal-columns--outside-trim .medium-down--four:nth-of-type(4n+1),
.equal-columns--outside-trim .medium-down--one-fifth:nth-of-type(5n+1),
.equal-columns--outside-trim .medium-down--one-sixth:nth-of-type(6n+1),
.equal-columns--outside-trim .medium-down--one-seventh:nth-of-type(7n+1),
.equal-columns--outside-trim .medium-down--two:nth-of-type(8n+1) {
margin-left: 0;
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--one-whole:nth-of-type(1n+1) {
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--one-half {
width: calc(50% - (20px - (20px / 2)));
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--one-third {
width: calc(33.3333333333% - (20px - (20px / 3)));
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--one-fifth {
width: calc(20% - (20px - (20px / 5)));
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--one-fourth {
width: calc(25% - (20px - (20px / 4)));
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--one-sixth {
width: calc(16.6666666667% - (20px - (20px / 6)));
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--one-seventh {
width: calc(14.2857142857% - (20px - (20px / 7)));
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--two {
width: calc(12.5% - (20px - (20px / 8)));
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--four {
width: calc(25% - (20px - (20px / 4)));
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--seven {
width: calc(43.75% - (20px - (20px / 2)));
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--eight {
width: calc(50% - (20px / 2));
}
}
@media only screen and (max-width: 798px) {
.equal-columns--outside-trim .medium-down--nine {
width: calc(56.25% - (20px - (20px / 2)));
}
}
@media only screen and (max-width: 798px) {
.has-no-side-gutter.has-background {
padding-right: 0px;
padding-left: 0px;
}
.has-no-side-gutter .medium-down--one-whole,
.has-no-side-gutter .medium-down--one-half,
.has-no-side-gutter .medium-down--eight,
.has-no-side-gutter .medium-down--one-third,
.has-no-side-gutter .medium-down--two-thirds,
.has-no-side-gutter .medium-down--one-fourth,
.has-no-side-gutter .medium-down--four,
.has-no-side-gutter .medium-down--one-fifth,
.has-no-side-gutter .medium-down--three-fifths,
.has-no-side-gutter .medium-down--two-fifths,
.has-no-side-gutter .medium-down--one-sixth,
.has-no-side-gutter .medium-down--one-seventh,
.has-no-side-gutter .medium-down--one-eighth,
.has-no-side-gutter .medium-down--two {
margin-right: 0;
margin-left: 0;
}
.has-no-side-gutter .medium-down--one-whole {
width: 100%;
}
.has-no-side-gutter .medium-down--one-half {
width: 50%;
}
.has-no-side-gutter .medium-down--one-third {
width: 33.3333333333%;
}
.has-no-side-gutter .medium-down--one-fourth {
width: 25%;
}
.has-no-side-gutter .medium-down--one-fifth {
width: 20%;
}
.has-no-side-gutter .medium-down--two-fifths {
width: 40%;
}
.has-no-side-gutter .medium-down--three-fifths {
width: 60%;
}
.has-no-side-gutter .medium-down--one-sixth {
width: 16.6666666667%;
}
.has-no-side-gutter .medium-down--one-seventh {
width: 14.2857142857%;
}
.has-no-side-gutter .medium-down--one-eighth {
width: 12.5%;
}
.has-no-side-gutter .medium-down--two-thirds {
width: 66.6666666667%;
}
.has-no-side-gutter .medium-down--two {
width: 12.5%;
}
.has-no-side-gutter .medium-down--four {
width: 25%;
}
.has-no-side-gutter .medium-down--seven {
width: 43.75%;
}
.has-no-side-gutter .medium-down--eight {
width: 50%;
}
.has-no-side-gutter .medium-down--nine {
width: 56.25%;
}
}
@media only screen and (max-width: 798px) {
.medium-down--show {
display: block !important;
}
}
@media only screen and (max-width: 798px) {
.medium-down--hide {
display: none !important;
}
}
@media only screen and (max-width: 798px) {
.medium-down--text-left {
text-align: left !important;
}
}
@media only screen and (max-width: 798px) {
.medium-down--text-right {
text-align: right !important;
}
}
@media only screen and (max-width: 798px) {
.medium-down--text-center {
text-align: center !important;
}
}
@media only screen and (max-width: 480px) {
.small-down--hidden {
display: none;
}
.small-down--visible {
display: block;
}
/* Base Grid */
.small-down--one {
width: calc(6.25% - 20px);
}
.small-down--two {
width: calc(12.5% - 20px);
}
.small-down--three {
width: calc(18.75% - 20px);
}
.small-down--four {
width: calc(25% - 20px);
}
.small-down--five {
width: calc(31.25% - 20px);
}
.small-down--six {
width: calc(37.5% - 20px);
}
.small-down--seven {
width: calc(43.75% - 20px);
}
.small-down--eight {
width: calc(50% - 20px);
}
.small-down--nine {
width: calc(56.25% - 20px);
}
.small-down--ten {
width: calc(62.5% - 20px);
}
.small-down--eleven {
width: calc(68.75% - 20px);
}
.small-down--twelve {
width: calc(75% - 20px);
}
.small-down--thirteen {
width: calc(81.25% - 20px);
}
.small-down--fourteen {
width: calc(87.5% - 20px);
}
.small-down--fifteen {
width: calc(93.75% - 20px);
}
.small-down--sixteen {
width: calc(100% - 20px);
}
/* Whole */
.small-down--one-whole {
width: calc(100% - 20px);
}
/* Halves */
.small-down--one-half {
width: calc(50% - 20px);
}
/* Thirds */
.small-down--one-third {
width: calc(33.3333333333% - 20px);
}
.small-down--two-thirds {
width: calc(66.6666666667% - 20px);
}
/* Fourths */
.small-down--one-fourth {
width: calc(25% - 20px);
}
.small-down--two-fourths {
width: calc(50% - 20px);
}
.small-down--three-fourths {
width: calc(75% - 20px);
}
/* Fifths */
.small-down--one-fifth {
width: calc(20% - 20px);
}
.small-down--two-fifths {
width: calc(40% - 20px);
}
.small-down--three-fifths {
width: calc(60% - 20px);
}
.small-down--four-fifths {
width: calc(80% - 20px);
}
/* Sixths */
.small-down--one-sixth {
width: calc(16.6666666667% - 20px);
}
.small-down--two-sixths {
width: calc(33.3333333333% - 20px);
}
.small-down--three-sixths {
width: calc(50% - 20px);
}
.small-down--four-sixths {
width: calc(66.6666666667% - 20px);
}
.small-down--five-sixths {
width: calc(83.3333333333% - 20px);
}
/* Sevenths */
.small-down--one-seventh {
width: calc(14.2857142857% - 20px);
}
.small-down--two-sevenths {
width: calc(28.5714285714% - 20px);
}
.small-down--three-sevenths {
width: calc(42.8571428571% - 20px);
}
.small-down--four-sevenths {
width: calc(57.1428571429% - 20px);
}
.small-down--five-sevenths {
width: calc(71.4285714286% - 20px);
}
/* Eighths */
.small-down--one-eighth {
width: calc(12.5% - 20px);
}
.small-down--two-eighths {
width: calc(25% - 20px);
}
.small-down--three-eighths {
width: calc(37.5% - 20px);
}
.small-down--four-eighths {
width: calc(50% - 20px);
}
.small-down--five-eighths {
width: calc(62.5% - 20px);
}
.small-down--six-eighths {
width: calc(75% - 20px);
}
.small-down--seven-eighths {
width: calc(87.5% - 20px);
}
/* Tenths */
.small-down--one-tenth {
width: calc(10% - 20px);
}
.small-down--two-tenths {
width: calc(20% - 20px);
}
.small-down--three-tenths {
width: calc(30% - 20px);
}
.small-down--four-tenths {
width: calc(40% - 20px);
}
.small-down--five-tenths {
width: calc(50% - 20px);
}
.small-down--six-tenths {
width: calc(60% - 20px);
}
.small-down--seven-tenths {
width: calc(70% - 20px);
}
.small-down--eight-tenths {
width: calc(80% - 20px);
}
.small-down--nine-tenths {
width: calc(90% - 20px);
}
/* Twelfths */
.small-down--one-twelfth {
width: calc(8.3333333333% - 20px);
}
.small-down--two-twelfths {
width: calc(16.6666666667% - 20px);
}
.small-down--three-twelfths {
width: calc(25% - 20px);
}
.small-down--four-twelfths {
width: calc(33.3333333333% - 20px);
}
.small-down--five-twelfths {
width: calc(41.6666666667% - 20px);
}
.small-down--six-twelfths {
width: calc(50% - 20px);
}
.small-down--seven-twelfths {
width: calc(58.3333333333% - 20px);
}
.small-down--eight-twelfths {
width: calc(66.6666666667% - 20px);
}
.small-down--nine-twelfths {
width: calc(75% - 20px);
}
.small-down--ten-twelfths {
width: calc(83.3333333333% - 20px);
}
.small-down--eleven-twelfths {
width: calc(91.6666666667% - 20px);
}
/* Offsets */
.small-down--offset-by-one {
left: calc(6.25%);
}
.small-down--offset-by-two {
left: calc(12.5%);
}
.small-down--offset-by-three {
left: calc(18.75%);
}
.small-down--offset-by-four {
left: calc(25%);
}
.small-down--offset-by-five {
left: calc(31.25%);
}
.small-down--offset-by-six {
left: calc(37.5%);
}
.small-down--offset-by-seven {
left: calc(43.75%);
}
.small-down--offset-by-eight {
left: calc(50%);
}
.small-down--offset-by-nine {
left: calc(56.25%);
}
.small-down--offset-by-ten {
left: calc(62.5%);
}
.small-down--offset-by-eleven {
left: calc(68.75%);
}
.small-down--offset-by-twelve {
left: calc(75%);
}
.small-down--offset-by-thirteen {
left: calc(81.25%);
}
.small-down--offset-by-fourteen {
left: calc(87.5%);
}
.small-down--offset-by-fifteen {
left: calc(93.75%);
}
/* Remove gutter on first and last column (must be consistent size) */
.equal-columns--outside-trim .small-down--one-half:nth-of-type(2n),
.equal-columns--outside-trim .small-down--eight:nth-of-type(2n),
.equal-columns--outside-trim .small-down--one-third:nth-of-type(3n),
.equal-columns--outside-trim .small-down--one-fourth:nth-of-type(4n),
.equal-columns--outside-trim .small-down--four:nth-of-type(4n),
.equal-columns--outside-trim .small-down--one-fifth:nth-of-type(5n),
.equal-columns--outside-trim .small-down--one-sixth:nth-of-type(6n),
.equal-columns--outside-trim .small-down--one-seventh:nth-of-type(7n),
.equal-columns--outside-trim .small-down--two:nth-of-type(8n) {
margin-right: 0;
}
.equal-columns--outside-trim .small-down--one-half:nth-of-type(2n+1),
.equal-columns--outside-trim .small-down--eight:nth-of-type(2n+1),
.equal-columns--outside-trim .small-down--one-third:nth-of-type(3n+1),
.equal-columns--outside-trim .small-down--one-fourth:nth-of-type(4n+1),
.equal-columns--outside-trim .small-down--four:nth-of-type(4n+1),
.equal-columns--outside-trim .small-down--one-fifth:nth-of-type(5n+1),
.equal-columns--outside-trim .small-down--one-sixth:nth-of-type(6n+1),
.equal-columns--outside-trim .small-down--one-seventh:nth-of-type(7n+1),
.equal-columns--outside-trim .small-down--two:nth-of-type(8n+1) {
margin-left: 0;
}
/* Remove side gutter on all columns */
}
@media only screen and (max-width: 480px) and (max-width: 480px) {
.equal-columns--outside-trim {
/* Reset previous margins */
/* Set new margins on right */
/* Set new margins on left */
}
.equal-columns--outside-trim .small-down--one-half.small-down--one-half,
.equal-columns--outside-trim .small-down--eight.small-down--eight,
.equal-columns--outside-trim .small-down--one-third.small-down--one-third,
.equal-columns--outside-trim .small-down--one-fourth.small-down--one-fourth,
.equal-columns--outside-trim .small-down--four.small-down--four,
.equal-columns--outside-trim .small-down--one-fifth.small-down--one-fifth,
.equal-columns--outside-trim .small-down--one-sixth.small-down--one-sixth,
.equal-columns--outside-trim .small-down--one-seventh.small-down--one-seventh,
.equal-columns--outside-trim .small-down--two.small-down--two {
margin-left: calc(20px / 2);
margin-right: calc(20px / 2);
}
.equal-columns--outside-trim .small-down--one-half:nth-of-type(2n),
.equal-columns--outside-trim .small-down--eight:nth-of-type(2n),
.equal-columns--outside-trim .small-down--one-third:nth-of-type(3n),
.equal-columns--outside-trim .small-down--one-fourth:nth-of-type(4n),
.equal-columns--outside-trim .small-down--four:nth-of-type(4n),
.equal-columns--outside-trim .small-down--one-fifth:nth-of-type(5n),
.equal-columns--outside-trim .small-down--one-sixth:nth-of-type(6n),
.equal-columns--outside-trim .small-down--one-seventh:nth-of-type(7n),
.equal-columns--outside-trim .small-down--two:nth-of-type(8n) {
margin-right: 0;
}
.equal-columns--outside-trim .small-down--one-half:nth-of-type(2n+1),
.equal-columns--outside-trim .small-down--eight:nth-of-type(2n+1),
.equal-columns--outside-trim .small-down--one-third:nth-of-type(3n+1),
.equal-columns--outside-trim .small-down--one-fourth:nth-of-type(4n+1),
.equal-columns--outside-trim .small-down--four:nth-of-type(4n+1),
.equal-columns--outside-trim .small-down--one-fifth:nth-of-type(5n+1),
.equal-columns--outside-trim .small-down--one-sixth:nth-of-type(6n+1),
.equal-columns--outside-trim .small-down--one-seventh:nth-of-type(7n+1),
.equal-columns--outside-trim .small-down--two:nth-of-type(8n+1) {
margin-left: 0;
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--one-whole:nth-of-type(1n+1) {
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--one-half {
width: calc(50% - (20px - (20px / 2)));
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--one-third {
width: calc(33.3333333333% - (20px - (20px / 3)));
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--one-fifth {
width: calc(20% - (20px - (20px / 5)));
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--one-fourth {
width: calc(25% - (20px - (20px / 4)));
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--one-sixth {
width: calc(16.6666666667% - (20px - (20px / 6)));
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--one-seventh {
width: calc(14.2857142857% - (20px - (20px / 7)));
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--two {
width: calc(12.5% - (20px - (20px / 8)));
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--four {
width: calc(25% - (20px - (20px / 4)));
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--seven {
width: calc(43.75% - (20px - (20px / 2)));
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--eight {
width: calc(50% - (20px / 2));
}
}
@media only screen and (max-width: 480px) {
.equal-columns--outside-trim .small-down--nine {
width: calc(56.25% - (20px - (20px / 2)));
}
}
@media only screen and (max-width: 480px) {
.has-no-side-gutter.has-background {
padding-right: 0px;
padding-left: 0px;
}
.has-no-side-gutter .small-down--one-whole,
.has-no-side-gutter .small-down--one-half,
.has-no-side-gutter .small-down--eight,
.has-no-side-gutter .small-down--one-third,
.has-no-side-gutter .small-down--two-thirds,
.has-no-side-gutter .small-down--one-fourth,
.has-no-side-gutter .small-down--four,
.has-no-side-gutter .small-down--one-fifth,
.has-no-side-gutter .small-down--three-fifths,
.has-no-side-gutter .small-down--two-fifths,
.has-no-side-gutter .small-down--one-sixth,
.has-no-side-gutter .small-down--one-seventh,
.has-no-side-gutter .small-down--one-eighth,
.has-no-side-gutter .small-down--two {
margin-right: 0;
margin-left: 0;
}
.has-no-side-gutter .small-down--one-whole {
width: 100%;
}
.has-no-side-gutter .small-down--one-half {
width: 50%;
}
.has-no-side-gutter .small-down--one-third {
width: 33.3333333333%;
}
.has-no-side-gutter .small-down--one-fourth {
width: 25%;
}
.has-no-side-gutter .small-down--one-fifth {
width: 20%;
}
.has-no-side-gutter .small-down--two-fifths {
width: 40%;
}
.has-no-side-gutter .small-down--three-fifths {
width: 60%;
}
.has-no-side-gutter .small-down--one-sixth {
width: 16.6666666667%;
}
.has-no-side-gutter .small-down--one-seventh {
width: 14.2857142857%;
}
.has-no-side-gutter .small-down--one-eighth {
width: 12.5%;
}
.has-no-side-gutter .small-down--two-thirds {
width: 66.6666666667%;
}
.has-no-side-gutter .small-down--two {
width: 12.5%;
}
.has-no-side-gutter .small-down--four {
width: 25%;
}
.has-no-side-gutter .small-down--seven {
width: 43.75%;
}
.has-no-side-gutter .small-down--eight {
width: 50%;
}
.has-no-side-gutter .small-down--nine {
width: 56.25%;
}
}
@media only screen and (max-width: 480px) {
.small-down--show {
display: block !important;
}
}
@media only screen and (max-width: 480px) {
.small-down--hide {
display: none !important;
}
}
@media only screen and (max-width: 480px) {
.small-down--text-left {
text-align: left !important;
}
}
@media only screen and (max-width: 480px) {
.small-down--text-right {
text-align: right !important;
}
}
@media only screen and (max-width: 480px) {
.small-down--text-center {
text-align: center !important;
}
}
/*================ Build Grid Push Classes ================*/
/* Can be used on inner div inside container element to apply borders (that maintain the same width as columns) */
.container-border--top::before {
display: block;
content: "";
height: 0;
width: calc(100% - 20px);
border-top: thin solid #D4C4AF;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
float: left;
}
@media only screen and (max-width: 480px) {
.container-border--top::before {
width: 100%;
}
}
.container-border--bottom::after {
display: block;
content: "";
height: 0;
width: calc(100% - 20px);
border-top: thin solid #D4C4AF;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
clear: both;
}
@media only screen and (max-width: 480px) {
.container-border--bottom::after {
width: 100%;
}
}
/* Applied to container elements that need to be smaller than the $site-width */
.narrow-width--true.container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
/* Override the max-width on container element and stretch full screen (wide_display) */
.container.full-width--true,
.full-width--true > .container {
width: 100%;
max-width: 100%;
}
@media only screen and (max-width: 480px) {
.container.fullWidthMobile--true,
.column.fullWidthMobile--true,
.columns.fullWidthMobile--true {
width: 100% !important;
max-width: 100%;
}
}
/* #Reset & Basics
================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
display: block;
}
audio, canvas, video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
h1 {
font-size: 2em;
}
abbr[title] {
border-bottom: 1px dotted;
}
b, strong {
font-weight: 700;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
code, kbd, pre, samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
q {
quotes: '\201C' '\201D' '\2018' '\2019';
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button, input {
line-height: normal;
}
button, html input[type=button],
input[type=reset], input[type=submit] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled], input[disabled] {
cursor: default;
}
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
}
input[type=search] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body, figure {
margin: 0;
}
legend, button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: "";
clear: both;
height: 0;
}
* {
box-sizing: border-box;
}
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
@media only screen and (max-width: 798px) {
.clear {
display: none;
}
}
/* #Fonts
================================================== */@font-face {
font-family: "EB Garamond";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_n4.f03b4ad40330b0ec2af5bb96f169ce0df8a12bc0.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_n4.73939a8b7fe7c6b6b560b459d64db062f2ba1a29.woff") format("woff");
}
@font-face {
font-family: "EB Garamond";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_n7.d08d282a03b4a9cde493a0a5c170eb41fd0a48a6.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_n7.7c8306185882f01a9ed6edf77ce46bbf9dd53b41.woff") format("woff");
}
@font-face {
font-family: "EB Garamond";
font-weight: 400;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_i4.8a8d350a4bec29823a3db2f6d6a96a056d2e3223.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_i4.ac4f3f00b446eda80de7b499ddd9e019a66ddfe2.woff") format("woff");
}
@font-face {
font-family: "EB Garamond";
font-weight: 700;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_i7.a554120900e2a1ba4ba64bd80ad36a8fd44041f5.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_i7.7101ca1f5cf9647cc8a47fe8b7268d197f62e702.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n4.bd66e8e0031690b46374315bd1c15a17a8dcd450.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n4.e5604516683cb4cc166c001f2ff5f387255e3b45.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n7.c51184f59f7d2caf4999bcef8df2fc4fc4444aec.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n7.c9ca63ec9e4d37ba28b9518c6b06672c0f43cd49.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 400;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i4.0b95f138bb9694e184a2ebaf079dd59cf448e2d3.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i4.75684eb0a368d69688996f5f8e72c62747e6c249.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 700;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i7.fa6e55789218717259c80e332e32b03d0c0e36e1.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i7.b5766b6262212587af58cec3328f4ffbc7c29531.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n4.bd66e8e0031690b46374315bd1c15a17a8dcd450.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n4.e5604516683cb4cc166c001f2ff5f387255e3b45.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n7.c51184f59f7d2caf4999bcef8df2fc4fc4444aec.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n7.c9ca63ec9e4d37ba28b9518c6b06672c0f43cd49.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 400;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i4.0b95f138bb9694e184a2ebaf079dd59cf448e2d3.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i4.75684eb0a368d69688996f5f8e72c62747e6c249.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 700;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i7.fa6e55789218717259c80e332e32b03d0c0e36e1.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i7.b5766b6262212587af58cec3328f4ffbc7c29531.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 300;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n3.0b17a542c8aa1ebff75081c7c3a854475090bf40.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n3.c357ee519b5baa7a2389366dbc1017e7bfccb716.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 300;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i3.daccd1544064a8f91b945b46407eb35b026a568b.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i3.8b483976a1a48ce4720cab824f30f7347747ed2c.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n4.bd66e8e0031690b46374315bd1c15a17a8dcd450.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n4.e5604516683cb4cc166c001f2ff5f387255e3b45.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n7.c51184f59f7d2caf4999bcef8df2fc4fc4444aec.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_n7.c9ca63ec9e4d37ba28b9518c6b06672c0f43cd49.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 400;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i4.0b95f138bb9694e184a2ebaf079dd59cf448e2d3.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i4.75684eb0a368d69688996f5f8e72c62747e6c249.woff") format("woff");
}
@font-face {
font-family: Cormorant;
font-weight: 700;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i7.fa6e55789218717259c80e332e32b03d0c0e36e1.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/cormorant/cormorant_i7.b5766b6262212587af58cec3328f4ffbc7c29531.woff") format("woff");
}
@font-face {
font-family: "EB Garamond";
font-weight: 400;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_n4.f03b4ad40330b0ec2af5bb96f169ce0df8a12bc0.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_n4.73939a8b7fe7c6b6b560b459d64db062f2ba1a29.woff") format("woff");
}
@font-face {
font-family: "EB Garamond";
font-weight: 700;
font-style: normal;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_n7.d08d282a03b4a9cde493a0a5c170eb41fd0a48a6.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_n7.7c8306185882f01a9ed6edf77ce46bbf9dd53b41.woff") format("woff");
}
@font-face {
font-family: "EB Garamond";
font-weight: 400;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_i4.8a8d350a4bec29823a3db2f6d6a96a056d2e3223.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_i4.ac4f3f00b446eda80de7b499ddd9e019a66ddfe2.woff") format("woff");
}
@font-face {
font-family: "EB Garamond";
font-weight: 700;
font-style: italic;
font-display: swap;
src: url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_i7.a554120900e2a1ba4ba64bd80ad36a8fd44041f5.woff2") format("woff2"),
url("//www.hattongardenbespokejewellery.com/cdn/fonts/ebgaramond/ebgaramond_i7.7101ca1f5cf9647cc8a47fe8b7268d197f62e702.woff") format("woff");
}
/* #Basic Styles
================================================== */
body {
font-family: "EB Garamond", serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
text-transform: none;
color: #333333;
line-height: 1.6em;
overflow: auto;
background-color: #ffffff;
}body.blocked-scroll {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
left: 0;
pointer-events: none;
}
body.blocked-overflow {
overflow: hidden;
}
::selection {
background: #FFF7B6;
color: black;
}
abbr {
border-bottom: 1px dotted #D4C4AF;
}
details summary::-webkit-details-marker {
display: none;
}
/* Theme editor */
.editor-visible--true {
display: block !important;
}
/* Lazyloading styles */.transition--appear {
opacity: 0;
transition: opacity 0s !important; /* !important is to override the fade-in transition on product img */
}
.transition--appear.lazyloaded {
opacity: 1;
}img[data-sizes=auto].lazyloaded {
height: auto;
}
img[data-sizes=auto],
img[data-sizes="100vw"] {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Ensures that small images are not stretched larger */
.image__container {
display: block;
margin-left: auto;
margin-right: auto;
}
.image-element__wrap {
overflow: hidden;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.image-element__wrap img {
height: auto;
}
/* #Typography
================================================== */
.logo,
.header__logo {
font-family: "system_ui", -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
font-weight: 400;
font-style: normal;
font-size: 12px;
text-transform: uppercase;
line-height: 1.2em;
}.logo a span,
.header__logo a span {
color: #ffffff;
}
/* Headings */
h1 {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1.5;
color: #1C1C1C;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
font-size: 38px;
margin: 0 auto 15px;
clear: both;
font-weight: 400;
padding-top: 4px;
}
h1 a:link, h1 a:visited {
font-weight: inherit;
color: #1C1C1C;
}
h1 a:hover, h1 a:active {
color: #B8973A;
}
h1.collection_title_tags {
padding-right: 25px;
border-right: solid 1px #D4C4AF;
}
h2,
.h2,
h2.title {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1.5;
color: #1C1C1C;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
font-size: 34px;
margin-bottom: 0.75em;
}
h2 a,
.h2 a,
h2.title a {
font-weight: inherit;
}
h2.collection_title,
.h2.collection_title,
h2.title.collection_title {
margin-bottom: 0;
display: inline;
}
h2.product_name a,
.h2.product_name a,
h2.title.product_name a {
color: #1C1C1C;
}
.cart h2 {
margin-top: 0;
}
h3,
.h3 {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1.5;
color: #1C1C1C;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
font-size: 30px;
margin: 0 auto 15px 0;
}
h3 a,
h3 a:visited,
.h3 a,
.h3 a:visited {
font-weight: inherit;
color: #1C1C1C;
}
h3.title,
.h3.title {
line-height: 1.3;
margin: 0 auto 15px;
clear: both;
padding-top: 4px;
}
h3.title a,
h3.title a:visited,
.h3.title a,
.h3.title a:visited {
color: #1C1C1C;
}
h3.sub_title,
.h3.sub_title {
padding: 5px 0;
color: #1C1C1C;
}
h3.sub_title a,
.h3.sub_title a {
color: #1C1C1C;
}
h4,
.h4 {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1.5;
color: #1C1C1C;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
font-size: 26px;
margin: 0 0 0.5em 0;
padding: 7px 0;
}
h4 a,
.h4 a {
font-weight: inherit;
}
h4.title a,
.h4.title a {
border: 0;
padding: 0;
margin: 0;
}
h5,
.h5 {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1.5;
color: #1C1C1C;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
font-size: 24px;
margin: 0 0 0.5em 0;
padding: 7px 0;
}
h5 a,
.h5 a {
font-weight: inherit;
}
h5.sub_title,
.h5.sub_title {
padding: 5px 0;
color: #1C1C1C;
}
h5.sub_title a,
.h5.sub_title a {
color: #1C1C1C;
}
h6,
.h6 {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1.5;
color: #1C1C1C;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
font-size: 22px;
letter-spacing: 0px;
margin: 0 0 0.5em 0;
padding: 7px 0;
}
h6 a,
.h6 a {
font-weight: inherit;
}
h6.title,
.h6.title {
line-height: 32px;
margin: 0 0 0.5em 0;
color: #1C1C1C;
}
.cart h6 {
margin-top: 0;
}
.collection_title {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1.5;
color: #1C1C1C;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
font-size: 38px;
margin: 0 auto 15px;
clear: both;
padding-top: 4px;
}
.collection_title a {
font-weight: inherit;
color: #1C1C1C;
}
.collection_title a:hover, .collection_title a:active {
color: #B8973A;
}
div.collection_title {
margin-bottom: 0;
line-height: 38px;
display: inline;
}
div.collection_title_tags {
padding-right: 25px;
border-right: solid 1px #D4C4AF;
}
.headline,
.empty_cart,
.promo-banner,
.title {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1.5;
color: #1C1C1C;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
font-size: 38px;
}
.title.center.blog a {
color: #1C1C1C;
}
/* Content */
p {
margin: 0 0 15px;
font-style: normal;
line-height: 1.6em;
}
p img {
margin: 0;
}
sub {
font-size: 60%;
}
i,
em {
font-style: italic;
}
b,
strong {
font-weight: bold;
}
small {
font-size: 90%;
}
.feature img {
position: relative;
top: 7px;
margin-right: 5px;
width: 25px;
height: 25px;
}
.onboard-text {
margin: 0;
}
.feature p {
font-size: smaller;
}
#featured_links {
padding: 20px 0;
}
#featured_links h2 {
padding-top: 15px;
}#featured_links .column,
#featured_links .columns {
opacity: 1;
}/* Add default spacing to allow room for stars (from Shopify review app) */
.slider-gallery .shopify-product-reviews-badge {
height: 30px;
display: block;
}
/* Add spacing below review stars (from Shopify review app) */
.spr-badge + .feature-divider {
margin-top: 15px;
}
.spr-badge {
padding: 5px 0;
}
.thumbnail .spr-badge-caption {
display: none;
}
.spr-badge-container {
cursor: pointer;
display: inline-block;
}
div#shopry-review-photos a {
display: block !important;
}
/* Feature divider variables */
.feature-divider {
width: 100%;
margin-bottom: 20px;
display: block;
border: 0;
border-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.feature-divider.feature-divider--no-margin {
margin-bottom: 0px;
}
@media only screen and (max-width: 798px) {
.feature-divider {
margin-bottom: 10px;
}
}
.page .feature-divider,
.page h2.title + .feature-divider {
margin-bottom: 15px;
}
/* Blockquotes */
blockquote,
blockquote p {
font-size: 17px;
line-height: 24px;
font-style: italic;
}
blockquote {
margin: 0 0 20px;
padding: 9px 20px 0 19px;
border-left: 1px solid #D4C4AF;
}
blockquote cite {
display: block;
font-size: 12px;
color: #555;
}
blockquote cite a,
blockquote cite a:visited {
color: #555;
}
blockquote cite:before {
content: “\2014 “;
}
hr {
border-color: #000000;
border-style: solid;
clear: both;
margin: 12px 0;
height: 0;
}hr {
border-width: 1px;
}.cart-container hr {
border-top-width: 0;
}
.collection_description {
margin: 0 0 1.5em 0;
}
/* #Breadcrumbs
================================================== */
.breadcrumb-wrapper {
padding-bottom: 1rem;
}
div.breadcrumb-collection {
margin-bottom: 1rem;
}
div.breadcrumb-collection.breadcrumb-collection--product {
margin: 0;
}
@media only screen and (max-width: 798px) {
div.breadcrumb-collection {
text-align: center;
}
}
.breadcrumb_text,
.article-pagination {
margin-top: 0px;
text-transform: uppercase;
font-size: 12px;
margin-bottom: 0;
}
@media only screen and (max-width: 798px) {
.breadcrumb_text,
.article-pagination {
margin-top: 0;
}
}
/* Brand gold variant — 4.6:1 contrast, WCAG AA. Site-wide breadcrumb. */
.breadcrumb_text .breadcrumb-divider,
.article-pagination .breadcrumb-divider {
color: #8a6f26;
margin: 0 5px;
}
.breadcrumb_link,
.breadcrumb_link span {
color: #8a6f26;
}
.breadcrumb_link:hover span {
color: #9A7D2E;
}
.breadcrumb {
font-size: 15px;
}
@media only screen and (max-width: 798px) {
.breadcrumb {
margin-bottom: 20px;
}
}
/* #Links
================================================== */
a,
a:visited,
a span {
color: #B8973A;
text-decoration: none;
position: relative;
transition: color 0.1s linear;
}
a:hover,
a:focus {
color: #9A7D2E;
}
a,
button,
input,
select,
textarea,
label,
summary {
touch-action: manipulation;
}
/* #Lists
================================================== */
ul,
ol {
margin-bottom: 20px;
}
ul ul,
ul ol,
ol ul,
ol ol {
margin: 4px 0 5px 30px;
}
ul ul li,
ul ol li,
ol ul li,
ol ol li {
margin-bottom: 6px;
}
ul li,
ol li {
margin-bottom: 12px;
}
ul {
list-style: disc outside;
}
ul.square {
list-style: square outside;
}
ul.circle {
list-style: circle outside;
}
ul.disc {
list-style: disc outside;
}
ul.large li {
line-height: 21px;
}
ul.none {
list-style: none outside;
margin-left: 0;
}
ul.border {
list-style: none outside;
line-height: 26px;
}
ul.border li {
border-bottom: 1px solid #D4C4AF;
list-style: none outside none;
padding: 12px 0;
margin-bottom: 0;
}
ol {
list-style: decimal;
}
/* #Menu
================================================== */
.header {
position: relative;
z-index: 1000;
width: 100%;
top: 0;
}
.header select.currencies {
color: #f7f7f7;
text-shadow: none;
}
.header div.container {
padding-bottom: 5px;
padding-top: 5px;
}
body.is-active {
overflow-y: hidden;
height: 100vh;
}
body.is-active #header {
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
#header.mobile_nav-fixed--true,
.mobile_nav-fixed--false.is-active #header {
position: fixed;
z-index: 1001;
width: 100%;
top: 0;
left: 0;
}
#header {
display: none;
pointer-events: all;
}
#header .top-bar {
text-align: center;
display: flex;
align-items: center;
}
#header .top-bar a.right {
left: auto;
right: 15px;
font-size: 20px;
padding-top: 8px;
top: 4px;
z-index: 1;
}
#header .top-bar a.mobile_nav {
display: flex;
align-items: center;
z-index: 1;
}
#header .top-bar > a,
#header .top-bar > a:visited,
#header .top-bar > a:active {
display: block;
font-size: 25px;
}
#header .top-bar a span {
color: #F9F7F4;
display: inline-block;
padding-left: 4px;
position: relative;
}
#header .top-bar a.icon-bag:before,
#header .top-bar a.icon-cart:before {
font-size: 18px !important;
}
.nav ul.mobile_menu li a {
display: inline-block;
}
/* Mobile nav */
#header .mobile_nav.dropdown_link {
width: 25%;
}
#header .mobile_nav.dropdown_link span.menu_title {
position: absolute;
left: 40px;
}
.mobile_nav {
display: flex;
align-items: center;
cursor: pointer;
}
.mobile_nav div {
flex-shrink: 0;
width: 30px;
height: 40px;
position: relative;
float: left;
margin: 0 8px 0 5px;
transform: rotate(0deg);
transition: 0.1s ease-in-out;
}
.mobile_nav div span {
display: block !important;
position: absolute !important;
height: 1px !important;
width: 100%;
background: #F9F7F4;
border-radius: 9px;
opacity: 1;
left: 0;
padding: 0 !important;
transform: rotate(0deg);
transition: 0.1s ease-in-out;
}
.mobile_nav div span:nth-child(1) {
top: 10px;
}
.mobile_nav div span:nth-child(2),
.mobile_nav div span:nth-child(3) {
top: 20px;
}
.mobile_nav div span:nth-child(4) {
top: 30px;
}
.mobile_nav div.open span:nth-child(1) {
top: 9px;
width: 0%;
left: 50%;
}
.mobile_nav div.open span:nth-child(2) {
transform: rotate(45deg);
}
.mobile_nav div.open span:nth-child(3) {
transform: rotate(-45deg);
}
.mobile_nav div.open span:nth-child(4) {
top: 9px;
width: 0%;
left: 50%;
}
#mobile_menu {
margin: 10px 20px;
}
#mobile_menu .sublink ul {
display: none;
margin-left: 0;
padding-left: 10px;
}
#mobile_menu li {
display: block;
padding-right: 0;
padding-left: 0;
}
#mobile_menu li a span.icon-down-arrow {
padding: 0 15px !important;
color: inherit;
}
.mobile-menu-item-title {
display: inline-block;
}
/* Currency / language switcher on mobile */
.mobile-disclosure-link {
cursor: pointer;
}
.mobile-menu__disclosure .selectors-form__wrap {
justify-content: center;
flex-direction: column;
}
.mobile-menu__disclosure .selectors-form__item {
margin-left: 0;
}
.mobile-menu__disclosure .selectors-form__item:first-of-type .disclosure__toggle {
border-top: none;
}
.mobile-menu__disclosure .disclosure {
padding-top: 0;
}
.mobile-menu__disclosure .disclosure-list__item {
padding: 0;
}
.mobile-menu__disclosure button.disclosure__button {
justify-content: flex-start;
font-size: 13px;
color: #f7f7f7;
padding-left: 0;
min-height: 0;
height: unset;
width: 100%;
padding-top: 12px;
padding-bottom: 12px;
line-height: 1.9em;
}
.mobile-menu__disclosure button.disclosure__button:hover, .mobile-menu__disclosure button.disclosure__button:focus {
color: #D4B862;
}
#mobile_menu li.sublink span.currency-code {
display: inline;
padding-left: 0;
}
.feature_image.editor-hover--true .main-nav,
.feature_image.editor-hover--true .dropdown {
clear: both;
transition: all 0.2s linear;
animation: fadeIn 0.2s linear none;
}.feature_image.editor-hover--true .main-nav,
.feature_image.editor-hover--true .dropdown {
background: rgba(31, 95, 94, 0.9);
}.cart-container {
float: right;
}
p.cart-message a {
display: inline-block;
}
.top-bar {
display: flex;
justify-content: space-between;
background-color: #1A1A2E;
}
.top-bar .social_icons {
margin: 0;
padding-left: 10px;
}
.top-bar .social_icons li {
padding: 5px;
}
.top-bar a {
display: flex;
align-items: center;
}
.top-bar ul.social_icons a {
display: inline;
flex: none;
}
.top-bar .top-bar--right {
display: flex;
align-items: center;
margin-left: auto;
height: 40px;
}
.top-bar .top-bar--right .icon-search {
height: 100%;
z-index: 10;
position: relative;
padding-right: 10px;
padding-left: 10px;
color: #F9F7F4;
}
.top-bar .top-bar--right .icon-search:before {
margin-left: 0;
font-size: 18px;
}
.top-bar .top-bar--right .icon-search:visited {
color: #F9F7F4;
}
.top-bar .top-bar--right .icon-search:hover, .top-bar .top-bar--right .icon-search:focus, .top-bar .top-bar--right .icon-search:active {
color: #283737;
}
.top-bar .top-bar--right .cart-container {
display: inline-block;
}
.top-bar .mini-cart__item-title a {
display: block;
}
.top-bar .mini-cart__item-title span {
color: #333333;
}
.top-bar .mini-cart__item-title .sale {
color: #d54d4d;
margin-right: 3px;
}
.top-bar .mini-cart__item-title .was_price {
color: #8c8b8b;
}
.top-bar--right-menu {
display: flex;
flex-wrap: nowrap;
flex: 0 0 auto;
}
.main-nav,
.dropdown {
clear: both;
transition: all 0.2s linear;
animation: fadeIn 0.2s linear none;
}.main-nav,
.dropdown {
background: rgba(31, 95, 94, 0.9);
}.is-active .sticky_nav {
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}
.nav--combined {
width: 100%;
display: flex;
}
.nav--combined.center {
justify-content: center;
}
.nav--combined.align_right {
justify-content: flex-end;
}
.combined-menu-container {
width: 100%;
display: flex;
column-gap: 13px;
}
.center .combined-menu-container {
justify-content: center;
}
.align_right .combined-menu-container {
justify-content: flex-end;
}
.sticky_nav {
display: none;
position: fixed;
width: 100%;
z-index: 35;
top: 0;
left: 0;
padding: 0;
transform: translateY(-100%);
opacity: 0;
}
.sticky_nav .main-nav {
flex-wrap: nowrap;
padding: 0 0 0 20px;
}
.sticky_nav .nav--left {
padding-left: 20px;
}
.sticky_nav .nav--combined ul.menu {
padding: 0 20px;
}
.sticky_nav ul.menu {
font-size: 12px;
padding-bottom: 0 !important; /* Override non-sticky menu padding */
}
.sticky_nav .header__logo {
padding: 12px 0;
}
.sticky_nav .menu-position--block.search-enabled--true .nav.nav--center {
padding-left: 0;
}
.sticky_nav .menu-position--block .header__logo {
margin-right: 20px;
padding-left: 0;
padding-right: 0;
}
.sticky_nav .menu-position--inline.logo-position--center.search-enabled--false .nav--right {
width: calc(45% - 70px);
}
.sticky_nav .menu-position--inline.logo-position--center .nav--right {
width: calc(45% - 130px);
}
.sticky_nav .header__logo span {
color: #f7f7f7;
}
.sticky_nav .search-container {
max-width: 60px;
padding: 12px 0;
}
.sticky_nav .search-container a {
padding: 0 20px;
color: #f7f7f7;
}
.sticky_nav .mini_cart {
font-size: 18px;
padding: 12px;
align-items: center;
}
.sticky_nav .mini_cart:before {
margin: 0;
}
.sticky_nav .mini_cart .cart_count {
margin: 0;
padding: 0 0 0 8px;
}
.sticky_nav[data-animation] {
display: block;
transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
.sticky_nav[data-animation-state=open] {
display: block;
opacity: 1;
transform: translateY(0);
}
@media only screen and (max-width: 798px) {
.sticky_nav--stick {
display: none;
}
}
.main-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
}
.menu {
flex: 1 1 auto;
display: block;
border: none;
padding: 0;
margin: 0;
}
.menu li {
margin: 0;
border: 0;
display: inline-block;
}
.menu-position--inline {
flex-wrap: nowrap;
}
.menu-position--inline .header__logo {
width: 100%;
}
.menu-position--block.search-enabled--true .nav.nav--center {
padding-left: 200px;
}
.menu-position--block .header__logo {
width: 100%;
max-width: none; /* Undo max-width so menu appears below logo */
}
.top-bar__menu {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.top-bar__menu li {
margin: 0;
padding: 0;
}
.top-bar__menu .icon-user {
padding: 0;
}
.header__logo {
width: auto;
line-height: 1;
margin-left: 20px;
margin-right: 20px;
}
.header__logo a {
display: inline-block;
}
.header__logo img,
.header__logo span.header__logo-text {
width: 100%;
display: inline-block;
color: #ffffff;
}
.logo-alignment--left.menu-position--block .header__logo {
padding-right: 0;
padding-left: 0;
}
.logo-alignment--center .header__logo {
text-align: center;
}
.logo-position--left .header__logo {
padding-right: 20px;
margin-right: 0;
margin-left: 0;
}
.logo-position--center.menu-position--block .header__logo {
margin: 0;
}
.logo-position--center.search-enabled--true .nav--right {
width: calc(45% - 220px); /* Includes 20px to account for padding on search container */
}
.logo-position--center.menu-position--inline .nav--left {
width: 45%;
}
.menu-position--inline.logo-position--center.search-enabled--false .nav--right {
width: 45%;
}
.cart-container .mini_cart {
display: flex;
justify-content: center;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
font-size: 13px;
color: #F9F7F4;
letter-spacing: 1px;
width: 70px;
max-width: 70px;
white-space: nowrap;
}
.cart-container .mini_cart .cart_count {
color: inherit;
}
@media only screen and (max-width: 480px) {
.cart-container .mini_cart {
width: 50px;
max-width: 50px;
}
}
.search-container {
width: 100%;
max-width: 200px;
padding-left: 20px;
}
.search-container .search-link {
display: none;
}
.search-container input {
z-index: 29;
}
.nav ul li a.sub-menu {
padding: 10px 4px 10px 4px;
z-index: 1001;
}
.nav ul li:hover a.sub-menu {
color: #f7f7f7;
}
.menu a,
.menu a:visited,
.menu a span,
select.currencies {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
text-transform: uppercase;
color: #f7f7f7;
padding-top: 12px;
padding-bottom: 12px;
position: relative;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
}
@media only screen and (max-width: 798px) {
.menu a,
.menu a:visited,
.menu a span,
select.currencies {
font-size: 13px;
}
}
.menu a:hover, .menu a:active {
color: #D4B862;
}
#header span.menu_title,
.menu a span, select.currencies,
.mini_cart span {
padding-left: 5px;
padding-right: 5px;
}
#header span.menu_title {
cursor: pointer;
height: 40px;
line-height: 20px;
margin-top: -2px;
}
.menu li {
vertical-align: top;
padding-right: 10px;
}
.shopify-currency-form {
margin-bottom: 0;
}
select.currencies {
height: 40px;
min-height: 40px;
padding-top: 0;
padding-bottom: 0;
cursor: pointer;
background-image: url(//www.hattongardenbespokejewellery.com/cdn/shop/t/150/assets/select_light.png?v=153136132513795776861776936398);
}
@media only screen and (max-width: 798px) {
select.currencies {
font-size: 16px;
}
}
#mobile_menu select.currencies {
padding-left: 0;
}
.top-bar li {
padding-left: 10px;
padding-right: 10px;
}
.top-bar .social_icons a {
height: 40px;
line-height: 40px;
padding: 0;
}
.top-bar .top-bar__menu a,
.top-bar .social_icons a,
.top-bar .mobile-menu-title {
padding: 0;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
font-size: 13px;
color: #F9F7F4;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: #F9F7F4;
text-transform: uppercase;
}
.top-bar .top-bar__menu a:visited,
.top-bar .social_icons a:visited,
.top-bar .mobile-menu-title:visited {
color: #F9F7F4;
}
.top-bar .top-bar__menu a:hover, .top-bar .top-bar__menu a:focus, .top-bar .top-bar__menu a:active,
.top-bar .social_icons a:hover,
.top-bar .social_icons a:focus,
.top-bar .social_icons a:active,
.top-bar .mobile-menu-title:hover,
.top-bar .mobile-menu-title:focus,
.top-bar .mobile-menu-title:active {
color: #283737;
}
/* Mini cart */
.mini_cart,
.nav a.mini_cart {
float: right;
text-align: center;
cursor: pointer;
background-color: #cccccc;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
z-index: 2001;
}
@media only screen and (min-width: 799px) {
.mini_cart,
.nav a.mini_cart {
padding-left: 15px;
padding-right: 15px;
}
}
@media only screen and (max-width: 798px) {
.mini_cart,
.nav a.mini_cart {
right: 0;
}
}
.cart-container li.mini-cart__item {
display: flex;
justify-content: space-between;
}
.top-bar a.mini_cart span {
padding-top: 0;
padding-bottom: 0;
line-height: 40px;
}
a.tos_icon,
.cart_content a.tos_icon {
font-size: 13px;
color: #B8973A;
}
a.tos_icon:visited,
.cart_content a.tos_icon:visited {
color: #B8973A;
}
a.tos_icon:hover,
.cart_content a.tos_icon:hover {
color: #9A7D2E;
}
.cart_content__continue-shopping {
display: none;
}
.no-touchevents a.cart_content__continue-shopping.secondary_button {
display: none;
}
.no-touchevents a.cart_content__continue-shopping.secondary_button,
.touchevents a.cart_content__continue-shopping.secondary_button {
display: none;
}
@media only screen and (max-width: 798px) {
.no-touchevents a.cart_content__continue-shopping.secondary_button,
.touchevents a.cart_content__continue-shopping.secondary_button {
display: block;
border-top: 0;
margin: 0 auto;
padding-top: 0;
padding-bottom: 10px;
margin-bottom: 10px;
position: static;
font-size: inherit;
letter-spacing: inherit;
}
}
.mini_cart span {
display: inline-block;
}
.cart-container .cart_content {
display: none;
}
.active_link {
pointer-events: all;
}
.cart-container.active_link .cart_content {
display: block;
overflow-y: auto;
max-height: calc(90vh - 100px);
}
.cart-container.active_link .cart_content::-webkit-scrollbar {
-webkit-appearance: none;
appearance: none;
width: 7px;
}
.cart-container.active_link .cart_content::-webkit-scrollbar-thumb {
border-radius: 0;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
#cart_form {
width: 100%;
}
#cart_form p.modal_price {
margin-bottom: 0;
padding-bottom: 0;
}
@media only screen and (max-width: 480px) {
#cart_form p.modal_price {
font-size: inherit;
}
}
#cart_form .product-quantity-box {
margin: 15px 0;
width: 130px;
}
.cart_content .product-quantity-box {
margin: 15px 0 0;
width: 130px;
}
.cart_content .product-plus.is-disabled,
.cart_content .product-minus.is-disabled,
#cart_form .product-plus.is-disabled,
#cart_form .product-minus.is-disabled {
pointer-events: none;
}
.cart_content .product-quantity-box .quantity,
#cart_form .product-quantity-box .quantity {
padding: 0 5px;
width: 30%;
min-height: 30px;
height: 30px;
}
.cart_content .product-quantity-box .product-plus,
#cart_form .product-quantity-box .product-plus {
font-size: 15px;
line-height: 30px;
height: 30px;
padding-right: 2px;
width: 25%;
}
.cart_content .product-quantity-box .product-minus,
#cart_form .product-quantity-box .product-minus {
font-size: 15px;
line-height: 30px;
height: 30px;
padding-right: 2px;
width: 25%;
}
#cart_form .product-quantity-box .product-minus,
#cart_form .product-quantity-box .product-plus,
.nav .product-quantity-box .product-minus,
.nav .product-quantity-box .product-plus {
padding-right: 0;
}
#cart_form .icon-minus,
#cart_form .icon-plus {
position: relative;
left: 1px;
}
.cart__continue-shopping {
width: 100%;
margin-top: 25px;
}.cart-container.active_link .mini_cart,
.cart-container.active_link .mini_cart span {
background-color: #f6f7f9;
color: #333333 !important;
}
.cart_content {
top: 40px;
right: 0;
position: absolute;
z-index: 2000;
background-color: #f6f7f9;
font-family: "EB Garamond", serif;
font-weight: 400;
font-style: normal;
text-transform: none;
color: #333333;
border: 1px solid #D4C4AF;
border-top: 0;
border-right: 0;
width: 100%;
max-width: 320px;
}
@media only screen and (min-width: 799px) {
.cart_content {
max-width: 420px;
}
}
div.cart_content form {
margin: 15px 0 0 0;
padding: 0;
}
.mini-cart__item.animated,
.cart__item.animated {
animation-duration: 0.7s;
}
.mini-cart__item--image {
width: 40%;
}
.cart_content li.mini-cart__item {
position: relative;
}
.cart_content li.mini-cart__item a.cart__remove-btn {
position: absolute;
top: 0;
right: 0;
}
.cart_content li.mini-cart__item a.cart__remove-btn:active {
position: absolute;
}
.cart_content li.mini-cart__item a.cart__remove-btn span {
color: #333333;
}
.cart_content li.mini-cart__item a.cart__remove-btn .remove-icon {
margin-left: 0;
}
.cart_content li.mini-cart__item a.cart__remove-btn .remove-icon:before {
font-size: 25px;
}
#header .top-bar a span.remove-icon {
color: #333333;
}
#header li.mini-cart__item a.cart__remove-btn {
top: 0;
}
/* Mini cart */
.mini-cart__item-content {
display: flex;
flex: 1;
flex-direction: column;
flex-wrap: wrap;
position: relative;
text-align: left;
}
.mini-cart__item-price {
padding-top: 10px;
line-height: 1;
font-weight: bold;
}
.mini-cart__unit-price {
margin: 0;
font-size: 0.925em;
}
.mini-cart__item-title {
display: flex;
flex-direction: column;
padding-right: 20px;
}
.cart__item {
display: flex;
align-items: center;
margin: 10px 0;
padding: 10px 0;
position: relative;
border-bottom: 1px solid #D4C4AF;
}
@media only screen and (max-width: 798px) {
.cart__item--content {
margin-left: 20px;
}
}
@media only screen and (max-width: 798px) {
.cart__item--image {
max-width: 33.333%;
}
}
.container .column.cart__item--image {
margin-left: 0;
}
.cart__item--title {
margin-right: 15%;
}
@media only screen and (max-width: 798px) {
.cart__item--title {
margin-right: 20px;
}
}
.cart__item-unit-price,
.order-details__unit-price,
.product-details__unit-price,
.thumbnail .unit-pricing {
margin: 0;
font-size: 0.925em;
}
.product-details__unit-price {
margin-bottom: 5px;
}
.order-details__unit-price {
display: block;
}
.product-details__unit-price,
.product-details__unit-price span {
color: #333333;
}
.thumbnail-overlay .product-details__unit-price,
.thumbnail-overlay .product-details__unit-price span {
color: #ffffff;
}
.cart__item--discount,
.meta.cart__item--discount .label {
color: #d54d4d;
margin-top: 15px;
}
.cart_discounts {
display: flex;
align-items: flex-start;
line-height: 1;
}
.cart_discounts .cart_discounts--title {
width: 60%;
margin-right: 20px;
}
.cart_discounts .cart_discounts--price {
width: calc(40% - 20px);
text-align: right;
}
.cart__remove-btn {
display: flex;
cursor: pointer;
position: absolute;
right: 0;
top: 10px;
}
.cart__remove-btn span.remove-text,
.cart__remove-btn span.remove-icon {
color: #333333;
}
.cart__remove-btn:hover span, .cart__remove-btn:active span {
color: #9A7D2E;
}
@media only screen and (max-width: 1024px) {
.cart__remove-btn .remove-text {
display: none;
}
}
.cart__remove-btn .remove-icon {
margin-left: 5px;
}
.cart__remove-btn .remove-icon:before {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
font-size: 25px;
line-height: 1em;
display: block;
content: "\00D7";
}
.cart .cart_subtotal {
font-weight: bold;
font-size: larger;
}
.cart_content .cart_subtotal {
text-align: left;
font-weight: bold;
}
.cart_content a,
.cart_content a:visited,
.cart_content a:hover,
.cart_content a .price,
.cart_content a .price span {
color: #333333 !important;
}
.cart_content a .price span {
padding-left: 5px;
}
.cart_content ul {
list-style: none;
margin: 0;
padding: 15px 20px;
}
.cart_content ul li {
padding-left: 0;
padding-right: 0;
}
.cart_content ul li:empty {
margin-bottom: 0;
}
.cart_content ul li .cart_discounts--title {
text-align: left;
}
.cart_content ul li {
list-style: none;
clear: both;
}
.mini_cart,
.top-bar [class^=icon-]:before,
.top-bar [class*=" icon-"]:before {
font-size: 16px;
margin-right: 0;
}
#customer_login,
#customer_login_guest {
display: inline;
}
@media only screen and (max-width: 480px) {
#customer_login,
#customer_login_guest {
display: block;
}
}
input[type=submit].guest_button,
input[type=button].guest_button {
color: #B8973A;
box-shadow: none;
background: transparent;
border: 0;
padding: 0;
text-align: left;
}
input[type=submit].guest_button:hover,
input[type=button].guest_button:hover {
background: transparent;
border: 0;
color: #9A7D2E;
}
@media only screen and (min-width: 799px) {
input[type=submit].guest_button,
input[type=button].guest_button {
text-align: center;
}
}
.menu ul li .mini_cart span {
padding-left: 5px;
top: -1px;
}
.dropdown_container {
clear: both;
width: 100%;
display: none;
position: absolute;
bottom: 0;
left: 0;
}
@media only screen and (max-width: 798px) {
.dropdown_container {
position: relative;
bottom: initial; /* Reset default bottom positioning */
}
}
.dropdown_container img {
max-width: 100%;
}
.dropdown {
position: absolute;
width: 100%;
z-index: 1000;
}
.dropdown_content {
display: table;
width: 100%;
margin: 0 auto;
}
.mega-menu .dropdown_content {
display: flex;
flex-direction: row;
width: 100%;
margin: 0 auto;
}
.mega-menu__richtext,
.mega-menu__image-caption-link {
padding: 0 5px;
}
.mega-menu__richtext a,
.mega-menu__richtext a:active,
.mega-menu__richtext a:hover {
display: inline-block;
text-transform: none;
padding: 0;
}
.mega-menu__image-caption-link {
text-align: center;
margin-bottom: 10px;
}
.mega-menu__image-caption-link a,
.mega-menu__image-caption-link a:visited,
.mega-menu__image-caption-link a:active,
.mega-menu__image-caption-link a:hover {
text-transform: none;
display: block;
}
.mega-menu__image-caption,
.mobile-mega-menu__image-caption {
margin: 10px 0;
}
.dropdown_content a p,
.mobile-mega-menu a p {
padding: 0;
}
.dropdown_content p,
.mobile-mega-menu p {
font-family: Cormorant, serif;
font-size: 12px;
font-style: normal;
color: #f7f7f7;
padding-top: 12px;
padding-bottom: 12px;
position: relative;
display: block;
text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: 0;
margin-bottom: 0;
}
.dropdown_content p,
.dropdown_content a,
.dropdown_content a:hover,
.dropdown_content a:active {
font-size: 15px;
letter-spacing: 0px;
}
.dropdown_column__menu + .dropdown_column__menu {
margin-top: 10px;
}
.dropdown_narrow {
width: 60%;
}
.dropdown_column {
display: table-cell;
padding: 15px 20px 30px 20px;
width: 16.666%;
vertical-align: top;
}
.dropdown_column img {
max-width: 100%;
}
.dropdown_column ul {
margin: 0;
padding: 0;
}
.dropdown_column ul.dropdown_title {
border-bottom: solid 1px #f7f7f7;
padding-bottom: 10px;
}
.dropdown_column ul.dropdown_item {
text-align: center;
}
.mega-menu .dropdown_column {
width: 100%;
padding: 15px 20px 30px 20px;
}
.mega-menu {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
.dropdown_column li {
display: block;
}
.dropdown_column li a,
.dropdown_column li a:hover,
.dropdown_column li a:active {
padding-bottom: 0;
text-transform: none;
}
.dropdown_row {
display: table-row;
}
select.currencies {
border: 0 !important;
background-color: transparent;
margin-bottom: 0 !important;
min-width: 65px;
outline: 0;
background-position: 96.5% 55%;
background-size: 18px 12px;
text-shadow: none !important;
box-shadow: none !important;
text-indent: 0.01px;
text-overflow: "";
-webkit-appearance: none;
appearance: none;
}
select.currencies:active {
border: 0;
outline: 0;
text-shadow: 0;
box-shadow: 0;
}
select.currencies option {
color: #f7f7f7;
}select.currencies option {
background: rgba(31, 95, 94, 0.6);
}.menu li.currencies {
padding: 0;
}
.container div.collection_nav {
margin-bottom: 1.5em;
}
.collection_menu,
.collection_menu li {
display: inline;
list-style: none;
border: none;
position: relative;
top: -3px;
margin: 0;
}
.collection_menu li {
padding-left: 25px;
}
.sidebar-wrap {
border-right: 1px solid #D4C4AF;
margin-right: 10px;
padding-right: 20px;
}
@media only screen and (max-width: 798px) {
.sidebar-wrap {
border: none;
padding-right: 0;
}
}
.sidebar a,
.sidebar a:visited {
color: #363636;
}
.sidebar a:hover,
.sidebar a:active {
color: #B8973A;
}
.sidebar .meta {
margin-left: 2px;
}
.sidebar .spr-badge {
color: #333333;
}
.sidebar .recently-viewed-list .brand {
color: #333333;
}
.toggle-all--true h4.toggle {
cursor: pointer;
pointer-events: all;
}
.toggle-all--true .toggle span {
display: block;
}
.content_block.toggle_list a {
display: inline;
position: static;
padding-left: 0;
margin-left: 0;
border-left: none;
color: #B8973A;
}
.content_block.toggle_list a:hover {
border-left: none;
color: #9A7D2E;
}
.toggle_list {
margin: 0;
padding: 10px 0 15px 0;
}
.toggle_list a {
display: inline-block;
position: relative;
margin-left: 0;
max-width: 80%;
border-left: solid 2px transparent;
transition: border 200ms ease-out;
}
.toggle_list a.active,
.toggle_list a.active--default {
padding-left: 8px;
border-left: solid 2px ;
}
ul.toggle_list li ul {
display: none;
}
ul.toggle_list li ul.active {
display: block;
}
.sidebar .toggle_list a.active {
border-left: solid 9px #B8973A;
}
.toggle_list li {
list-style: none;
line-height: 1.4em;
padding: 8px 0 8px 0;
}
.toggle_list .meta span {
line-height: 2.5;
}
.sidebar_text {
margin-bottom: 12px;
padding-top: 10px;
}
.sidebar__content {
border-left: solid 1px #D4C4AF;
padding-left: 20px;
}
.sidebar__content .toggle_list li {
line-height: 1.2;
}
.sidebar .newsletter {
margin-bottom: 20px;
}
.sidebar .newsletter form {
width: 100%;
}
.sidebar li ul {
margin: 8px 0 0 15px;
}
.sidebar .toggle_list li ul {
padding-left: 0;
}
.sidebar ul li {
margin-bottom: 0;
}
.sidebar input.newsletter-form__sign-up[type=submit],
.sidebar input.contact_email[type=email] {
width: 100% !important;
margin-left: 0;
}
.blog_search {
position: relative;
}
.sidebar-block {
position: relative;
height: var(--closed-height, auto);
overflow: hidden;
padding-left: var(--sidebar-left-safe-area);
}
.sidebar-block::after {
content: "";
position: absolute;
height: 1px;
right: 0;
bottom: 0;
left: var(--sidebar-left-safe-area);
background: #D4C4AF;
}
.sidebar-block[open] {
height: var(--open-height, auto);
}
.sidebar-block[data-sidebar-block-state=closed] {
height: var(--closed-height, auto);
}
.sidebar-block[data-sidebar-block-animation="closed=>open"] {
transition: height 250ms ease-in-out;
}
.sidebar-block[data-sidebar-block-animation="open=>closed"] {
transition: height 200ms ease-in-out;
}
.sidebar-block[data-sidebar-block-state=open] {
height: var(--open-height, auto);
}
.sidebar > .sidebar-block:last-child {
border-bottom: none;
}
.sidebar-block:empty {
border-bottom: none;
display: none;
}
.sidebar-block:blank {
border-bottom: none;
}
/* Filter collections */
.sidebar .filter-active-tag {
position: relative;
}
.color-filter--true label {
display: flex;
align-items: center;
}
.sidebar__collection-filter a,
.sidebar__collection-filter label {
cursor: pointer;
}
.sidebar__collection-filter label {
text-transform: none;
font-weight: normal;
font-size: inherit;
}
.sidebar__collection-filter label:hover {
color: #9A7D2E;
}
.sidebar__collection-filter input[type=checkbox] {
display: none;
}
.sidebar__collection-filter input.styled-checkbox[type=checkbox] {
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
width: 20px;
height: 20px;
display: inline-block;
cursor: pointer;
position: relative;
vertical-align: top;
background-size: cover;
margin-right: 15px;
}.sidebar__collection-filter button.clear-active-filter,
.sidebar__collection-filter button.clear-active-filter:active {
color: #B8973A;
background-color: transparent;
border: none;
outline: 0;
box-shadow: 0;
font-family: inherit;
letter-spacing: 0;
text-transform: none;
position: absolute;
transform: translateY(-50%);
top: 0;
right: 0;
left: auto;
padding: 2px 4px;
line-height: 1.2;
display: block;
height: auto;
min-height: auto;
}
.sidebar__collection-filter button.clear-active-filter:hover {
color: #9A7D2E;
}
.sidebar__collection-filter .x-icon,
.faceted-filter-form .x-icon {
position: relative;
display: inline-block;
overflow: visible;
width: 15px;
height: 15px;
margin: 0 2px 0 0;
padding: 0;
cursor: pointer;
transition: color 0.2s;
text-decoration: none;
font-style: normal;
color: #95979c;
border: 0;
outline: 0;
background: transparent;
vertical-align: middle;
top: -1px;
}
.sidebar__collection-filter .x-icon:before,
.faceted-filter-form .x-icon:before {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
font-size: 25px;
line-height: 15px;
position: absolute;
top: 0;
left: 0;
display: block;
width: 15px;
content: "\00D7";
text-align: center;
}
::-webkit-input-placeholder {
color: #888;
}
:-moz-placeholder { /* Firefox 18- */
color: #888;
}
::-moz-placeholder { /* Firefox 19+ */
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
/* Sub Collections */
.featured_collections.sub-collection {
margin-bottom: 10px;
}
.featured_collections.sub-collection .thumbnail {
margin-bottom: 10px;
}
@media only screen and (max-width: 798px) {
.featured_collections.sub-collection .thumbnail {
width: 100%;
}
}
.sub-collection--2 .thumbnail {
width: calc(50% - 20px);
}
.sub-collection--2 .thumbnail:nth-child(2n+1) {
clear: both;
}
.sub-collection--3 .thumbnail {
width: calc(33.33333% - 20px);
}
.sub-collection--3 .thumbnail:nth-child(3n+1) {
clear: both;
}
.sub-collection--4 .thumbnail {
width: calc(25% - 20px);
}
.sub-collection--4 .thumbnail:nth-child(4n+1) {
clear: both;
}
.list-collections-wrapper img[src*="/no-image"] ~ .thumbnail-overlay {
opacity: 1 !important;
}
.list-collections-wrapper img[src*="/no-image"] ~ .thumbnail-overlay .collection-details {
opacity: 1;
transform: none;
}
@media only screen and (max-width: 798px) {
.list-collections-wrapper img[src*="/no-image"] ~ .collection-info__caption {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.list-collections-wrapper .img {
width: 100%;
}
.list-collections-wrapper .collection-info__caption {
margin-top: 20px;
}.list-collections-wrapper .collection-info__caption {
display: block;
}@media only screen and (max-width: 798px) {
.list-collections-wrapper .collection-info__caption {
display: block;
position: static;
}
}.blog-header {
margin-bottom: 5px;
}
@media only screen and (max-width: 798px) {
.blog-header .blog-title {
width: 100%;
margin-bottom: 0;
}
}
/* Blog Article Styling */
.article .icon-slash {
padding-right: 5px;
}
/* Styles for blog, collections */
.section_select {
padding: 0;
text-align: right;
}
.section_select .blog_filter,
.section_select .tag_filter,
.section_select .sort_by {
color: #333333;
display: inline-block;
border: none;
padding-right: 30px;
background-position: 100% 50%;
background-color: #ffffff;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
text-transform: uppercase;
width: auto;
margin-bottom: 0;
max-width: 80%;
}
@media only screen and (max-width: 798px) {
.section_select .blog_filter,
.section_select .tag_filter,
.section_select .sort_by {
width: 100%;
max-width: 100%;
font-size: 16px;
padding-left: 0;
}
}
/* #Images
================================================== */
/*
The purpose of the below declaration is to make sure images don't
exceed the width of columns they are put into when resizing window.
Unfortunately, this declaration breaks certain lightbox, slider or other plugins,
so the best solution is to individually call these properties on images that
are children of the grid that you want to resize with grid.
*/
.product_row img,
.product_image_col img,
.article img,
.section img,
.thumbnail img,
.page img,
.sidebar img,
.logo img,
.cart_image img,
.footer img,
#target img,
.column img,
.columns img {
max-width: 100%;
height: auto;
}
.image-crop--left img,
.image-crop--left .image-element__wrap {
object-fit: cover;
object-position: left;
height: 100% !important;
}
.image-crop--right img,
.image-crop--right .image-element__wrap {
object-fit: cover;
object-position: right;
height: 100% !important;
}
.image-crop--center img,
.image-crop--center .image-element__wrap {
object-fit: cover;
height: 100% !important;
}
.zoom-container {
display: block;
}
/* #Placeholders
================================================== */
.placeholder-svg {
fill: rgba(28, 28, 28, 0.9);
background-color: rgba(28, 28, 28, 0.5);
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
display: block;
}
.placeholder-svg--banner,
.placeholder-svg--slideshow,
.placeholder-svg--video {
height: 500px;
}
@media only screen and (max-width: 798px) {
.placeholder-svg--banner,
.placeholder-svg--slideshow,
.placeholder-svg--video {
height: 350px;
}
}
@media only screen and (max-width: 480px) {
.placeholder-svg--banner,
.placeholder-svg--slideshow,
.placeholder-svg--video {
height: 250px;
}
}
.shopify-section--featured-promotions .feature-section:nth-child(even) .placeholder-svg--promotions {
background-color: rgba(28, 28, 28, 0.6);
}
.image-with-text-section .featured-link--image:nth-child(odd) .placeholder-svg--promotions {
background-color: rgba(51, 51, 51, 0.6);
fill: rgba(28, 28, 28, 0.9);
}
.homepage-slideshow .flickity-slider .gallery-cell:nth-child(2n+1) .placeholder-svg--slideshow {
background-color: rgba(28, 28, 28, 0.6);
}
.homepage-slideshow .flickity-slider .gallery-cell:nth-child(2n) .placeholder-svg--slideshow {
background-color: rgba(28, 28, 28, 0.8);
}
/* #Videos
================================================== */
.video-wrapper {
position: relative;
background-color: #ffffff;
/* Allows users to click embedded iframe ui when video paused */
}
.video-wrapper .video__overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin-left: auto;
margin-right: auto;
z-index: 1;
pointer-events: none;
}
.video-wrapper.darken-video--true .video__overlay {
background: rgba(0, 0, 0, 0.3);
}
.video-wrapper .plyr--video.plyr--paused .plyr__video-embed iframe {
z-index: 5;
}
.video-wrapper .plyr--full-ui.plyr--video .plyr__control--overlaid {
display: none;
}
.video-wrapper.play-button-icon--visible .plyr--paused .plyr__control--overlaid {
display: block;
opacity: 1;
}
.video-wrapper video {
display: block;
width: 100%;
height: auto;
}
.video-wrapper .video__text-container {
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 100%;
margin: auto;
z-index: 2;
pointer-events: none;
}
.video-wrapper .video__text-wrapper {
margin: 0;
padding: 30px;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 798px) {
.video-wrapper {
display: flex;
flex-direction: column;
}
}
/* #Buttons
================================================== */
.global-button,
product-cta,
.custom-html-container button,
.shopify-payment-button__button.shopify-payment-button__button--unbranded,
.sidebar .faceted-active-filters__clear,
.sidebar .faceted-active-filters__remove-filter {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid;
padding: 13px 20px;
text-align: center;
line-height: 1.2;
font-family: Cormorant, serif;
font-weight: normal;
font-style: normal;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
word-break: break-word;
cursor: pointer;
transition: all 0.2s linear;
border-color: var(--button-color-border, #B8973A);
background: var(--button-color-background, #B8973A);
color: var(--button-color-text, #ffffff);
}.global-button,
product-cta,
.custom-html-container button,
.shopify-payment-button__button.shopify-payment-button__button--unbranded,
.sidebar .faceted-active-filters__clear,
.sidebar .faceted-active-filters__remove-filter {
border-radius: 0;
}.global-button:visited,
product-cta:visited,
.custom-html-container button:visited,
.shopify-payment-button__button.shopify-payment-button__button--unbranded:visited,
.sidebar .faceted-active-filters__clear:visited,
.sidebar .faceted-active-filters__remove-filter:visited {
color: var(--button-color-text, #ffffff);
}
.global-button:hover:not([disabled]), .global-button:active,
product-cta:hover:not([disabled]),
product-cta:active,
.custom-html-container button:hover:not([disabled]),
.custom-html-container button:active,
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover:not([disabled]),
.shopify-payment-button__button.shopify-payment-button__button--unbranded:active,
.sidebar .faceted-active-filters__clear:hover:not([disabled]),
.sidebar .faceted-active-filters__clear:active,
.sidebar .faceted-active-filters__remove-filter:hover:not([disabled]),
.sidebar .faceted-active-filters__remove-filter:active {
background: var(--button-color-background-hover, var(--button-color-background, #9A7D2E));
border-color: var(--button-color-border-hover, var(--button-color-border, #9A7D2E));
color: var(--button-color-text-hover, var(--button-color-text, #ffffff));
}
.global-button:active,
product-cta:active,
.custom-html-container button:active,
.shopify-payment-button__button.shopify-payment-button__button--unbranded:active,
.sidebar .faceted-active-filters__clear:active,
.sidebar .faceted-active-filters__remove-filter:active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
outline: 0;
}
.global-button[disabled],
product-cta[disabled],
.custom-html-container button[disabled],
.shopify-payment-button__button.shopify-payment-button__button--unbranded[disabled],
.sidebar .faceted-active-filters__clear[disabled],
.sidebar .faceted-active-filters__remove-filter[disabled] {
cursor: not-allowed;
}
.global-button--product-grid-text-hover {
--button-color-border: #ffffff;
--button-color-background: transparent;
--button-color-text: #ffffff;
--button-color-border-hover: #ffffff;
--button-color-background-hover: #ffffff;
--button-color-text-hover:
#333333
;
}
@media only screen and (min-width: 481px) {
.global-button--primary-desktop {
--button-color-border: #B8973A;
--button-color-background: #B8973A;
--button-color-text: #ffffff;
--button-color-border-hover: #9A7D2E;
--button-color-background-hover: #9A7D2E;
--button-color-text-hover: #ffffff;
}
.global-button--secondary-desktop {
--button-color-border: #B8973A;
--button-color-background: transparent;
--button-color-text: #B8973A;
--button-color-border-hover: #9A7D2E;
--button-color-background-hover: #9A7D2E;
--button-color-text-hover: #ffffff;
}
.global-button--text-desktop {
--button-color-border: #333333;
--button-color-background: transparent;
--button-color-text: #333333;
--button-color-border-hover: #333333;
--button-color-background-hover: #333333;
--button-color-text-hover:
#ffffff
;
}
.global-button--text-highlighted-desktop {
--button-color-border: #333333;
--button-color-background: #333333;
--button-color-text:
#ffffff
;
--button-color-border-hover:
#3c3c3c
;
--button-color-background-hover:
#3c3c3c
;
--button-color-text-hover:
#ffffff
;
}
.global-button--banner-text-desktop {
--button-color-border: #f5f1ef;
--button-color-background: transparent;
--button-color-text: #f5f1ef;
--button-color-border-hover: #f5f1ef;
--button-color-background-hover: #f5f1ef;
--button-color-text-hover:
#333333
;
}
.global-button--banner-text-highlighted-desktop {
--button-color-border: #f5f1ef;
--button-color-background: #f5f1ef;
--button-color-text:
#333333
;
--button-color-border-hover:
#e6dcd7
;
--button-color-background-hover:
#e6dcd7
;
--button-color-text-hover:
#333333
;
}
.global-button--banner-desktop {
--button-color-border: #2c5656;
--button-color-background: transparent;
--button-color-text: #2c5656;
--button-color-border-hover: #2c5656;
--button-color-background-hover: #2c5656;
--button-color-text-hover:
#ffffff
;
}
.global-button--banner-highlighted-desktop {
--button-color-border: #2c5656;
--button-color-background: #2c5656;
--button-color-text:
#ffffff
;
--button-color-border-hover:
#264b4b
;
--button-color-background-hover:
#264b4b
;
--button-color-text-hover:
#ffffff
;
}
}
@media only screen and (max-width: 480px) {
.global-button--primary-mobile {
--button-color-border: #B8973A;
--button-color-background: #B8973A;
--button-color-text: #ffffff;
--button-color-border-hover: #9A7D2E;
--button-color-background-hover: #9A7D2E;
--button-color-text-hover: #ffffff;
}
.global-button--secondary-mobile {
--button-color-border: #B8973A;
--button-color-background: transparent;
--button-color-text: #B8973A;
--button-color-border-hover: #9A7D2E;
--button-color-background-hover: #9A7D2E;
--button-color-text-hover: #ffffff;
}
.global-button--text-mobile {
--button-color-border: #333333;
--button-color-background: transparent;
--button-color-text: #333333;
--button-color-border-hover: #333333;
--button-color-background-hover: #333333;
--button-color-text-hover:
#ffffff
;
}
.global-button--text-highlighted-mobile {
--button-color-border: #333333;
--button-color-background: #333333;
--button-color-text:
#ffffff
;
--button-color-border-hover:
#3c3c3c
;
--button-color-background-hover:
#3c3c3c
;
--button-color-text-hover:
#ffffff
;
}
.global-button--banner-text-mobile {
--button-color-border: #f5f1ef;
--button-color-background: transparent;
--button-color-text: #f5f1ef;
--button-color-border-hover: #f5f1ef;
--button-color-background-hover: #f5f1ef;
--button-color-text-hover:
#333333
;
}
.global-button--banner-text-highlighted-mobile {
--button-color-border: #f5f1ef;
--button-color-background: #f5f1ef;
--button-color-text:
#333333
;
--button-color-border-hover:
#e6dcd7
;
--button-color-background-hover:
#e6dcd7
;
--button-color-text-hover:
#333333
;
}
.global-button--banner-mobile {
--button-color-border: #2c5656;
--button-color-background: transparent;
--button-color-text: #2c5656;
--button-color-border-hover: #2c5656;
--button-color-background-hover: #2c5656;
--button-color-text-hover:
#ffffff
;
}
.global-button--banner-highlighted-mobile {
--button-color-border: #2c5656;
--button-color-background: #2c5656;
--button-color-text:
#ffffff
;
--button-color-border-hover:
#264b4b
;
--button-color-background-hover:
#264b4b
;
--button-color-text-hover:
#ffffff
;
}
}
.global-button--primary {
--button-color-border: #B8973A;
--button-color-background: #B8973A;
--button-color-text: #ffffff;
--button-color-border-hover: #9A7D2E;
--button-color-background-hover: #9A7D2E;
--button-color-text-hover: #ffffff;
}
.global-button--secondary {
--button-color-border: #B8973A;
--button-color-background: transparent;
--button-color-text: #B8973A;
--button-color-border-hover: #9A7D2E;
--button-color-background-hover: #9A7D2E;
--button-color-text-hover: #ffffff;
}
.global-button--text {
--button-color-border: #333333;
--button-color-background: transparent;
--button-color-text: #333333;
--button-color-border-hover: #333333;
--button-color-background-hover: #333333;
--button-color-text-hover:
#ffffff
;
}
.global-button--text-highlighted {
--button-color-border: #333333;
--button-color-background: #333333;
--button-color-text:
#ffffff
;
--button-color-border-hover:
#3c3c3c
;
--button-color-background-hover:
#3c3c3c
;
--button-color-text-hover:
#ffffff
;
}
.global-button--banner-text {
--button-color-border: #f5f1ef;
--button-color-background: transparent;
--button-color-text: #f5f1ef;
--button-color-border-hover: #f5f1ef;
--button-color-background-hover: #f5f1ef;
--button-color-text-hover:
#333333
;
}
.global-button--banner-text-highlighted {
--button-color-border: #f5f1ef;
--button-color-background: #f5f1ef;
--button-color-text:
#333333
;
--button-color-border-hover:
#e6dcd7
;
--button-color-background-hover:
#e6dcd7
;
--button-color-text-hover:
#333333
;
}
.global-button--banner {
--button-color-border: #2c5656;
--button-color-background: transparent;
--button-color-text: #2c5656;
--button-color-border-hover: #2c5656;
--button-color-background-hover: #2c5656;
--button-color-text-hover:
#ffffff
;
}
.global-button--banner-highlighted {
--button-color-border: #2c5656;
--button-color-background: #2c5656;
--button-color-text:
#ffffff
;
--button-color-border-hover:
#264b4b
;
--button-color-background-hover:
#264b4b
;
--button-color-text-hover:
#ffffff
;
}
product-cta[hidden] {
display: none;
}
.add_to_cart,
.product_form input.add_to_cart {
width: 100%;
margin-bottom: 0px;
}
/* Animation for checkmark on add to cart button */
button.add_to_cart {
position: relative;
}
button.add_to_cart .text {
display: block;
width: 100%;
animation-duration: 0.5s;
}
button.add_to_cart .fadeInDown.text {
animation-duration: 0.8s;
}
button .checkmark {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
button .checkmark path {
stroke-dasharray: 19.79 19.79;
stroke-dashoffset: 19.79;
stroke: #ffffff;
opacity: 0;
}
button .checkmark.checkmark-active path {
animation: drawCheckmark 0.5s linear alternate forwards;
}
@keyframes drawCheckmark {
from {
stroke-dashoffset: 19.79;
opacity: 1;
}
to {
stroke-dashoffset: 0;
opacity: 1;
}
}
.ie button .checkmark path {
stroke-dashoffset: 0;
opacity: 0;
}
.ie button .checkmark.checkmark-active path {
animation: fadeCheckmark 0.5s linear alternate forwards;
}
@keyframes fadeCheckmark {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
button .checkmark path {
stroke-dashoffset: 0;
opacity: 0;
}
button .checkmark.checkmark-active path {
animation: fadeCheckmark 0.5s linear alternate forwards;
}
@keyframes fadeCheckmark {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
label.tos_label {
display: inline;
font-weight: normal;
text-transform: none;
cursor: pointer;
padding-left: 5px;
}
.tos {
text-align: center;
margin: 15px 20px 15px 0;
}
.cart_text {
text-align: center;
}
.disabled {
pointer-events: none;
}
.add_to_cart span.icon-lock {
margin-right: 10px;
font-size: larger;
}
.add_to_cart span.icon-lock:before {
margin: 0;
}
.shopify-product-form {
margin-bottom: 0;
}
/* Shopify smart payment buttons */
.shopify-payment-button {
position: relative;
height: 44px;
}
.shopify-payment-button div {
height: auto;
}
.shopify-payment-button button {
line-height: 1.2;
padding-top: 11px;
padding-bottom: 11px;
margin-bottom: 0;
}
button.shopify-payment-button__button.shopify-payment-button__button--unbranded {
height: 100%;
}div.shopify-payment-button__button {
border-radius: 0;
}.shopify-payment-button__button--branded,
.shopify-payment-button__button--unbranded {
overflow: hidden;
min-height: 44px;
}
button.shopify-payment-button__more-options {
color: #333333;
box-shadow: none;
text-transform: none;
font-size: 0.8rem;
letter-spacing: 0;
padding: 16px 0 28px;
max-width: 80%;
margin: 0 auto;
position: absolute;
top: 100%;
left: 50%;
font-weight: normal;
font-family: "EB Garamond", serif;
font-style: normal;
transform: translateX(-50%);
}
button.shopify-payment-button__more-options:hover {
background-color: transparent;
border: none;
}
.purchase-details {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.shopify-payment-button__button--unbranded .purchase-details {
padding: 0 !important;
}
.product_section .smart-payment-button--true.product_form {
max-width: 100%;
}
.smart-payment-button--true .purchase-details {
padding-bottom: 40px;
}
.smart-payment-button--true .purchase-details .shopify-payment-button__button--branded {
padding-bottom: 30px;
}
.smart-payment-button--true .purchase-details .shopify-payment-button__more-options {
top: 70%;
}
.smart-payment-button--true button .checkmark path {
stroke: #B8973A;
}
.smart-payment-button--false .purchase-details {
align-items: flex-end;
padding-bottom: 40px;
}
.smart-payment-button--false {
margin-bottom: 20px;
}
.product-quantity-box.purchase-details__quantity {
margin-right: 5px;
width: calc(50% - 12px);
}
@media only screen and (max-width: 480px) {
.product-quantity-box.purchase-details__quantity {
width: 100%;
}
}
.product-quantity-box.purchase-details__quantity input.quantity {
padding-top: 11px;
padding-bottom: 11px;
line-height: 1.4;
min-height: 44px;
margin-bottom: 0;
width: calc(100% - 88px);
}
.smart-payment-button--true .product-quantity-box.purchase-details__quantity {
width: calc(50% - 6px);
}
@media only screen and (max-width: 798px) {
.smart-payment-button--true .product-quantity-box.purchase-details__quantity {
width: 100%;
margin-right: 0;
}
.smart-payment-button--true .product-quantity-box.purchase-details__quantity .input.quantity {
width: calc(100% - 88px);
}
}
p.checkout_button {
margin-bottom: 0;
}
.purchase-details__buttons {
display: flex;
flex: 1 0 calc(50% - 12px);
flex-wrap: wrap;
margin-left: 6px;
}
@media only screen and (max-width: 798px) {
.purchase-details__buttons {
margin-top: 20px;
margin-left: 12px;
flex: 1 0 calc(50% - 12px);
}
}
@media only screen and (max-width: 480px) {
.purchase-details__buttons {
margin-top: 12px;
margin-left: 0;
flex: 1 0 100%;
}
}
.purchase-details__buttons .shopify-payment-button {
flex: 1 0 100%;
margin-bottom: 0;
max-width: 100%;
}
@media only screen and (min-width: 1401px) {
.purchase-details__buttons .shopify-payment-button {
flex: 1 0 calc(50% - 4px);
max-width: calc(50% - 4px);
}
}
.purchase-details__buttons product-cta {
flex: 1 0 50%;
max-width: calc(50% - 6px);
margin-left: 6px;
}
@media only screen and (max-width: 798px) {
.purchase-details__buttons product-cta {
flex: 1 0 100%;
margin-left: 0;
margin-top: 0;
margin-bottom: 10px;
max-width: 100%;
}
}
.purchase-details__buttons.purchase-details__spb--true {
flex: 1 0 100%;
margin-top: 10px;
margin-left: 0;
}
@media only screen and (max-width: 798px) {
.purchase-details__buttons.purchase-details__spb--true {
margin-left: 0;
margin-bottom: 0;
}
}
.purchase-details__buttons.purchase-details__spb--true .add_to_cart {
flex: 1 0 50%;
max-width: 50%;
}
@media only screen and (max-width: 798px) {
.purchase-details__buttons.purchase-details__spb--true .add_to_cart {
flex: 1 0 100%;
margin-right: 0px;
margin-top: 0;
margin-bottom: 10px;
max-width: 100%;
}
}
.purchase-details__buttons.purchase-details__spb--true .shopify-payment-button {
margin-left: 6px;
max-width: calc(50% - 6px);
}
@media only screen and (max-width: 798px) {
.purchase-details__buttons.purchase-details__spb--true .shopify-payment-button {
margin-left: 0;
margin-top: 0;
margin-bottom: 10px;
max-width: 100%;
}
}
/* When product is unavailable */
.purchase-details__buttons.product-is-unavailable .add_to_cart,
.purchase-details__buttons.product-is-unavailable .shopify-payment-button {
opacity: 0.5;
pointer-events: none;
}
.purchase-details__buttons.product-is-unavailable .add_to_cart {
padding: 10px 5px;
}
@media only screen and (max-width: 1024px) {
.sidebar--true .purchase-details {
flex-direction: column;
align-items: flex-start;
}
.sidebar--true .purchase-details .purchase-details__quantity,
.sidebar--true .purchase-details .purchase-details__buttons {
margin: 0 0 10px;
width: 100%;
}
.sidebar--true .purchase-details .add_to_cart,
.sidebar--true .purchase-details .shopify-payment-button {
flex: 1 0 100%;
margin: 0 0 10px;
max-width: 100%;
}
}
#checkout {
min-height: 54px; /* Match the height of additional checkout buttons. */
}
.additional-checkout-button + .additional-checkout-button {
margin-left: 0 !important;
max-width: 100% !important;
}
.additional-checkout-button,
.additional-checkout-button.additional-checkout-button--paypal,
.additional-checkout-button.additional-checkout-button--google-pay {
min-width: 100% !important; /* Overwrite inline style */
}
/* #Tabs
================================================== */
ul.tabs {
display: block;
margin: 25px 0;
border-bottom: solid 1px #D4C4AF;
border-top: 0;
list-style: none outside;
margin-left: 0;
text-transform: uppercase;
padding-left: 0;
}
ul.tabs li {
display: block;
width: auto;
height: 30px;
padding: 0;
float: left;
margin-bottom: 0;
border: 0;
list-style: none outside;
margin-left: 0;
cursor: pointer;
}
ul.tabs li a {
display: block;
text-decoration: none;
width: auto;
height: 29px;
line-height: 30px;
margin-right: 60px;
font-size: 13px;
outline: none;
}
@media (max-width: 960px) {
ul.tabs li a {
margin-right: 30px;
}
}
@media only screen and (max-width: 798px) {
ul.tabs li a {
font-size: 12px;
}
}
@media only screen and (max-width: 480px) {
ul.tabs li a {
margin-right: 20px;
}
}
ul.tabs li a.active {
border-bottom: solid 3px #D4C4AF;
background-color: #ffffff;
border-bottom: solid 3px #D4C4AF;
height: 31px;
position: relative;
border-right-width: 1px;
color: #333333;
}
ul.tabs li:last-child a {
margin: 0;
}
ul.tabs-content {
margin: 0;
display: block;
border: 0;
padding-left: 0;
}
ul.tabs-content > li {
display: none;
border: 0;
}
ul.tabs-content > li.active {
display: block;
border: 0;
padding-left: 0px;
}
ul.tabs-content ul {
padding-left: 0;
}
/* #Product tabs
================================================== */
.product-tabs {
display: flex;
flex-wrap: wrap;
margin: 1rem 0;
}
.product-tabs__radio {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.product-tabs__radio:checked + .product-tabs__label {
font-weight: bold;
background: #ffffff;
border: 1px solid #D4C4AF;
border-bottom: none;
}
.product-tabs__radio:checked + .product-tabs__label + .product-tabs__panel {
display: block;
}
.no-js .tab-radio:focus + .product-tabs__label,
.user-is-tabbing .tab-radio:focus + .product-tabs__label {
border: 2px solid #025ECC;
border-bottom: none;
}
.product-tabs__label {
display: flex;
align-items: center;
justify-content: center;
padding: 1.35rem;
margin: 0;
flex-grow: 1;
text-align: center;
background: #f2f2f2;
cursor: pointer;
font-weight: normal;
word-break: break-word;
border-bottom: 1px solid #D4C4AF;
}
.product-tabs__label:hover {
background: #ededed;
}
@media only screen and (max-width: 480px) {
.product-tabs__label {
width: 100%;
border-bottom: none;
justify-content: flex-start;
}
}
.product-tabs__panel {
width: 100%;
display: none;
word-break: break-word;
padding: 0 1.35rem 1.35rem 1.35rem;
background: #ffffff;
border: 1px solid #D4C4AF;
border-top: none;
text-align: left;
white-space: normal;
line-height: 1.5;
}
@media only screen and (min-width: 481px) {
.product-tabs__panel {
order: 1;
padding: 2rem;
}
}
.product-tabs__panel p {
margin-top: 0;
}
.product-tabs__panel p:last-child {
margin-bottom: 0;
}
.product-tabs__panel a {
color: #B8973A;
}
/* #Collapsible tab
================================================== */
.collapsible-tab {
border-bottom: 1px solid #D4C4AF;
}
.collapsible-tab[open] .collapsible-tab__heading:after {
transform: rotate(180deg);
}
.collapsible-tab__heading {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 1rem 1rem 1rem 0;
}
.collapsible-tab__heading:after {
content: "\e905";
font-family: "turbo";
}
.collapsible-tab__heading::-webkit-details-marker {
display: none;
}
.collapsible-tab__text {
margin-bottom: 1rem;
word-break: break-word;
}
.collapsible-tab__text p {
margin-top: 0;
}
.collapsible-tab__text p:last-child {
margin-bottom: 0;
}
.collapsible-tab__text a {
color: #B8973A;
}
.product-block--collapsible-tab {
border-top: 1px solid #D4C4AF;
}
.product-block--collapsible-tab + .product-block--collapsible-tab {
border-top: none;
}
/* #Accordions
================================================== */
button {
border: none;
-webkit-appearance: none;
appearance: none;
}
.shopify-section--faq .faqAccordion > dt {
margin-right: 36px;
}
.accordion > dt > a, .accordion > dt > button,
.faqAccordion > dt > a,
.faqAccordion > dt > button {
background: transparent;
position: relative;
padding: 24px 20px 24px 40px;
color: #1C1C1C;
border-bottom: 1px solid #D4C4AF;
text-align: left;
display: block;
cursor: pointer;
width: 100%;
outline: none;
text-transform: initial;
min-height: auto;
height: auto;
line-height: inherit;
font-weight: bold;
font-family: "EB Garamond", serif;
font-style: normal;
box-shadow: none;
border-radius: 0px;
font-size: 18px;
}
.accordion > dt > a:hover, .accordion > dt > a:focus, .accordion > dt > button:hover, .accordion > dt > button:focus,
.faqAccordion > dt > a:hover,
.faqAccordion > dt > a:focus,
.faqAccordion > dt > button:hover,
.faqAccordion > dt > button:focus {
background: #f7f7f7;
border: none;
border-bottom: 1px solid #D4C4AF;
}
.accordion > dt > a::after, .accordion > dt > button::after,
.faqAccordion > dt > a::after,
.faqAccordion > dt > button::after {
transform: translateY(-50.1%);
position: absolute;
top: 50%;
left: 15px;
font-size: 25px;
color: #B8973A;
}
.accordion > dt:first-child > button,
.faqAccordion > dt:first-child > button {
border-top: none;
}
.accordion > dd,
.faqAccordion > dd {
color: #333333;
padding: 20px 0px 20px 0px;
display: none;
}
.accordion > dd[aria-hidden=true],
.faqAccordion > dd[aria-hidden=true] {
display: none;
}
@media only screen and (max-width: 798px) {
.accordion > dd,
.faqAccordion > dd {
margin-left: 15px;
}
}
/* Closed accordions */
.accordion dt > a::after,
.faqAccordion dt > button::after {
content: "+";
}
.accordion dt > a[aria-expanded=true]::after,
.faqAccordion dt > button[aria-expanded=true]::after {
font-size: 25px;
content: "-";
}
/* Open accordions */
.accordion[data-state=open] dt > a[aria-expanded=true]::after {
font-size: 25px;
content: "-";
}
.accordion dt small {
display: none;
}
/* Accordion tabs */
.accordion-tabs > a {
display: block;
background-color: #D1D3D4;
margin: 10px 0;
padding: 10px;
letter-spacing: 1px;
text-transform: uppercase;
color: #000000;
}
.accordion-tabs > a :hover {
cursor: pointer;
}
.accordion-tabs > li[id*=tab] {
display: none;
list-style: none;
}
/* Clearfixing tabs for beautiful stacking */
ul.tabs:before,
ul.tabs:after {
content: " ";
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
ul.tabs:after {
clear: both;
}
ul.tabs {
zoom: 1;
}
/* #Forms
================================================== */
form {
margin-bottom: 20px;
}
fieldset {
margin-bottom: 20px;
}
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=url],
input[type=tel],
input[type=number],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=range],
input[type=color],
select,
textarea {
display: block;
width: 100%;
height: 44px;
min-height: 44px;
padding: 0 10px;
margin: 0;
line-height: 22px;
border: 1px solid #D4C4AF;
outline: none;
background: #fff;
color: #5f6a7d;
font: 13px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: 15px;
-webkit-appearance: none;
appearance: none;
text-rendering: optimizeLegibility;
}@media only screen and (max-width: 480px) {
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=url],
input[type=tel],
input[type=number],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=range],
input[type=color],
select,
textarea {
font-size: 16px;
}
}
input[type=text]:active,
input[type=text]:focus,
input[type=password]:active,
input[type=password]:focus,
input[type=email]:active,
input[type=email]:focus,
input[type=search]:active,
input[type=search]:focus,
input[type=url]:active,
input[type=url]:focus,
input[type=tel]:active,
input[type=tel]:focus,
input[type=number]:active,
input[type=number]:focus,
input[type=date]:active,
input[type=date]:focus,
input[type=month]:active,
input[type=month]:focus,
input[type=week]:active,
input[type=week]:focus,
input[type=time]:active,
input[type=time]:focus,
input[type=range]:active,
input[type=range]:focus,
input[type=color]:active,
input[type=color]:focus,
select:active,
select:focus,
textarea:active,
textarea:focus {
color: #444;
border: 1px solid #aaa;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
appearance: none;
}
input[type=text]::-ms-clear {
display: none;
width: 0;
height: 0;
}
input[type=text]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
display: none;
}
input[type=number] {
-moz-appearance: textfield !important; /* To ensure arrows arent present in firefox */
}
select::-ms-expand {
display: none;
}
select {
background: #fff url(//www.hattongardenbespokejewellery.com/cdn/shop/t/150/assets/select.png?v=163443801653745187891776936398) no-repeat 96% 50%;
background-size: 18px 12px;
border: 1px solid #d9dbdc;
-webkit-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: "";
}select {
padding: 8px 14px 8px;
border-radius: 0;
}label,
legend,
.option_title {
display: block;
font-weight: bold;
font-size: 13px;
text-align: left;
margin-bottom: 5px;
text-transform: none;
}
input[type=checkbox] {
display: inline;
}
label span,
legend span {
font-weight: bold;
font-size: 13px;
color: #444;
}
textarea {
min-height: 120px;
padding: 15px 9px;
}
.acceptsMarketing {
margin-bottom: 20px;
}
.acceptsMarketing label {
display: inline;
margin-left: 5px;
}
input.newsletter-form__sign-up[type=submit] {
margin-left: 5px;
display: inline-block;
}
input.contact_email[type=email] {
width: 320px;
display: inline-block;
float: left;
}
/* #Contact Form
================================================== */
div.container.contact-form-container {
padding-top: 0;
}
.contact-form .contact-form__content {
margin-bottom: 20px;
}
.contact-form label,
.custom-contact-form label {
margin-bottom: 12px;
}
.contact-form ul li label,
.custom-contact-form ul li label {
font-family: "EB Garamond", serif;
text-transform: none;
font-weight: 400;
}
.contact-form__heading {
margin-left: 10px;
margin-right: 10px;
}
.contact__form-errors,
.contact__form-success {
width: 100%;
}
.contact__form-name {
margin-right: 20px;
}
@media only screen and (max-width: 798px) {
.contact__form-name {
margin-right: 0;
}
}
.contact__form-name,
.contact__form-email {
flex: 1 1 auto;
}
.contact__form-message {
flex-basis: 100%;
}
.contact-form__position--right,
.custom-contact-form__position--right {
flex-direction: row-reverse;
}
.contact-form__position--center {
flex-direction: column;
align-items: center;
}
.custom-contact-form .contact-block {
margin-bottom: 20px;
}
.custom-contact-form .custom-contact-form__image {
margin-bottom: 20px;
}
.custom-contact-form .custom-contact-form__social .social_icons {
padding: 0;
margin-bottom: 40px;
}
.custom-contact-form .custom-contact-form__logo {
max-width: 150px;
margin: 0 auto 20px auto;
}
.custom-contact-form .contact-block.contact-block--richtext label p {
display: inline;
}
.custom-contact-form .contact-block--custom ul {
padding: 0;
margin: 0;
}
.custom-contact-form .contact-block--custom ul li {
margin-bottom: 8px;
list-style: none;
display: flex;
align-items: baseline;
}
.custom-contact-form .contact-block--custom ul li input {
margin-right: 10px;
position: relative;
top: 2px;
}
.custom-contact-form .contact-block--custom ul li label {
margin-bottom: 0;
}
.custom-contact-form .contact-block--custom ul li:last-child label {
margin-bottom: 0;
}
.page-contact .footer {
margin-top: 0;
}
.page-contact .custom-contact-form {
margin-top: 25px;
}
#target {
padding: 20px;
text-align: center;
}
.items_left {
color: #8c8b8b;
}
.quantity_label {
display: inline;
font-size: smaller;
}
.remove_item a {
font-size: smaller;
color: #333333;
}
input.quantity {
width: 48px;
display: inline;
margin-bottom: 0;
padding: 8px 5px;
}
ul.cart_items {
padding-top: 0;
padding-bottom: 0;
}
.cart_content li.mini-cart__item {
padding: 0 0 15px 0;
margin-bottom: 15px;
border-bottom: 1px solid #D4C4AF;
}
.cart_content .notification-discount {
color: #d54d4d;
margin: 0;
line-height: 1;
}
li.mini-cart__item a,
li.mini-cart__item a:active,
#header li.mini-cart__item a,
#header li.mini-cart__item a:active {
font-size: inherit;
text-align: left;
}
li.mini-cart__item a {
align-items: flex-start;
}
.cart_image {
float: left;
width: 100%;
max-width: 100px;
min-width: 100px;
text-align: center;
padding-right: 20px;
}
.cart_image img {
display: block;
}
@media only screen and (max-width: 480px) {
.cart_image {
padding-right: 10px;
}
}
a.continue {
text-align: right;
font-size: 32px;
margin-right: 15px !important;
padding: 10px 0 5px 0 !important;
opacity: 0.8;
}
a.continue:hover {
opacity: 1;
}
.empty_cart {
text-align: center;
font-size: 18px;
padding: 40px 0 25px 0;
color: inherit;
}
#get-rates-submit {
margin-top: -1px;
}
#customer_login {
margin-bottom: 2px;
}
.multi_select,
.default_select {
display: none;
}
/* Media position */
.product_section.media-position--right {
flex-direction: row-reverse;
}
@media only screen and (max-width: 798px) {
.product_section.media-position--left,
.product_section.media-position--right {
flex-direction: column;
}
}
.vendor {
margin-bottom: 6px;
}
.section.product_section {
margin-top: 0;
}
.product-main {
width: 100%;
}
.product_section .description {
margin-bottom: 15px;
}
.modal_price {
padding-bottom: 8px;
display: block;
}
.product_section .description.bottom {
margin-top: 15px;
border-bottom: none;
}
.product-links {
margin-bottom: 8px;
font-size: 0.9em;
border-top: 1px solid #D4C4AF;
padding: 10px 0 5px 0;
}
.product-links p {
margin: 2px 0;
}
.social_buttons {
border-top: 1px solid #D4C4AF;
padding-top: 20px;
font-size: 1em;
margin-bottom: 25px;
}
@media only screen and (max-width: 798px) {
.social_buttons {
text-align: center;
}
}
.share_article .social_buttons {
border-top: none;
padding-top: 0;
}
@media only screen and (max-width: 798px) {
.share_article .social_buttons {
padding-top: 15px;
}
}
.share-btn {
display: inline-block;
text-align: center;
font-size: 1.2em;
margin-right: 6px;
margin-bottom: 10px;
}
.share-btn a {
color: #fff;
padding: 10px 10px 8px 10px;
border: solid 1px #e2e2e2;
display: inline-block;
transition: all 500ms ease 0s;
}.icon-twitter-share:before {
color: #09AEEC;
}
.icon-twitter-share:hover {
background-color: #09AEEC;
border-color: #09AEEC;
color: #fff;
}
.icon-twitter-share:hover:before {
color: #fff;
}
.icon-facebook-share:before {
color: #49659D;
}
.icon-facebook-share:hover {
background-color: #49659D;
border-color: #49659D;
color: #fff;
}
.icon-facebook-share:hover:before {
color: #fff;
}
.icon-pinterest-share:before {
color: #CB1F2A;
}
.icon-pinterest-share:hover {
background-color: #CB1F2A;
border-color: #CB1F2A;
color: #fff;
}
.icon-pinterest-share:hover:before {
color: #fff;
}
.icon-mail-share:before {
color: #888;
}
.icon-mail-share:hover {
background-color: #888;
border-color: #888;
color: #fff;
}
.icon-mail-share:hover:before {
color: #fff;
}
/* Quantity Box for Product Page */
.product-quantity-box .quantity,
.product-quantity-box .quantity:focus,
.product-quantity-box .product-plus,
.product-quantity-box .product-minus {
border: #e2e2e2 1px solid;
color: #000;
}
.product-quantity-box label {
margin-bottom: 0.5em;
}
.product-quantity-box {
margin-right: 0;
-webkit-user-select: none;
user-select: none;
}
.product-quantity-box label {
text-align: left;
}
.product-quantity-box .quantity {
text-align: center;
padding: 6px 15px;
width: 38%;
height: 44px;
border-radius: 0;
-webkit-appearance: none;
appearance: none;
float: left;
}
@media only screen and (max-width: 798px) {
.product-quantity-box .quantity {
width: calc(100% - 88px);
}
}
.product-quantity-box .product-plus,
.product-quantity-box .product-minus {
background: #f2f2f2;
font-weight: 300;
position: relative;
cursor: pointer;
height: 44px;
display: block;
width: 44px;
text-align: center;
float: left;
}
.product-quantity-box .product-plus:hover,
.product-quantity-box .product-minus:hover {
background: #d9d9d9;
}
@media only screen and (max-width: 798px) {
.product-quantity-box .product-plus,
.product-quantity-box .product-minus {
display: inline;
display: initial;
margin: 0;
}
}
.product-quantity-box .product-plus {
border-left: 0;
font-size: 16px;
line-height: 44px;
}
.product-quantity-box .product-minus {
border-right: 0;
line-height: 44px;
font-size: 18px;
}
.product-quantity-box + .inline_purchase {
margin-top: 31.5px;
width: 55%;
float: left;
}
.product_section .product_form,
.product_section .contact-form {
max-width: 400px;
}
@media only screen and (max-width: 798px) {
.product_section .product_form,
.product_section .contact-form {
max-width: 100%;
}
}
/* #Blog
================================================== */
.article,
.article_image {
margin-bottom: 30px;
}
.sidebar .sidebar__content .input-row {
flex-direction: column;
margin-left: 0px;
margin-right: 0px;
}
.sidebar .sidebar__content .input-row input {
margin: 5px 0;
}
.blog-template-wrapper {
width: 100%;
}
.blog-article__main.sidebar-enabled--false {
width: 75%;
}
@media only screen and (max-width: 798px) {
.blog-article__main.sidebar-enabled--false {
width: 100%;
}
}
.comment-form {
display: flex;
flex-wrap: wrap;
}
.comment-form__name {
margin-right: 20px;
}
@media only screen and (max-width: 798px) {
.comment-form__name {
margin: 0;
}
}
.comment-form__name,
.comment-form__email {
flex: 1 1 auto;
}
.comment-form__body,
.comment-form__error,
.comment-form__submit,
.comment-form__success {
flex-basis: 100%;
}
.comment-form__error-message,
.comment-form__success-message {
font-size: 18px;
line-height: 32px;
font-style: italic;
}
.comment-form__submit-button {
width: 100%;
}
.blog__read-more-button {
margin: 25px 0;
}
/* Author & Comments */
.blog__comment {
display: flex;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.blog__comment-author {
display: flex;
flex: 1 1 auto;
}
.blog__comment-author-image {
min-width: 80px;
height: 80px;
}
.blog__comment-author-image img {
border-radius: 50px;
}
.blog__comment-author-bio {
flex: 1 1 auto;
margin-left: 20px;
}
.blog-post-image-wrapper {
display: block;
}
/* Sidebar */
.has-sidebar-option,
.section--has-sidebar-option {
width: 100%;
}
.sidebar__content {
margin-left: 10px;
margin-right: 10px;
}
@media only screen and (max-width: 798px) {
.sidebar {
width: 100% !important; /* To overwrite desktop styles set inside of section */
}
.has-sidebar-option {
width: 100% !important; /* To overwrite desktop styles set inside of section */
}
}
/* #Newsletter
================================================== */
.newsletter {
margin: 0px auto;
max-width: 640px;
}
.input-row {
display: flex;
flex-wrap: wrap;
margin-left: -5px;
margin-right: -5px;
width: 100%;
}
@media only screen and (max-width: 798px) {
.input-row {
flex-direction: column;
margin-left: 0px;
margin-right: 0px;
}
}
.input-row input {
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
max-height: 40px;
}
@media only screen and (max-width: 1024px) {
.input-row input {
margin: 5px 0;
}
}
.input-row input.newsletter-form__sign-up {
display: inline-block;
flex: none;
max-height: 44px;
}
@media only screen and (max-width: 798px) {
.input-row input.newsletter-form__sign-up {
width: 100%;
}
}
.newsletter-both-names--true input.firstName {
margin-right: 5px;
}
/* Newsletter popup */
.js-newsletter-popup {
display: none;
}
.newsletter__lightbox .fancybox-content {
width: 100%;
max-width: 740px;
padding: 0;
}.newsletter__lightbox .fancybox-content {
border: 5px solid #D4C4AF;
}.newsletter__lightbox .fancybox-close-small {
left: 0;
}@media only screen and (max-width: 480px) {
.newsletter__lightbox .fancybox-close-small {
display: block;
}
}
@media only screen and (max-width: 798px) {
.newsletter__lightbox .fancybox-close-small svg path {
fill: white;
}
}.newsletter__lightbox .fancybox-toolbar {
display: none;
}
.newsletter-popup {
display: flex;
background-color: #ffffff;
padding: 0;
width: 100%;
}.newsletter-popup {
flex-direction: row-reverse;
}@media only screen and (max-width: 798px) {
.newsletter-popup {
line-height: 0;
flex-direction: column;
}
}
@media only screen and (min-width: 799px) and (max-width: 1024px) {
.popup-signup-show--true input.newsletter-form__sign-up {
margin-left: 0px;
}
}
.popup-signup-show--false {
display: none;
}
.newsletter-both-names--false .newsletter input[type=text] {
width: 100%;
}
.newsletter-img {
width: 40%;
}
@media only screen and (max-width: 798px) {
.newsletter-img {
width: 100%;
}
}
.newsletter-img img {
width: 100%;
display: block;
}
.newsletter-info {
text-align: center;
color: #363636;
background-color: #ffffff;
height: auto;
float: left;
}
@media only screen and (max-width: 798px) {
.newsletter-info {
padding: 20px;
width: 100% !important;
position: relative;
}
}
.newsletter-info input.contact_email[type=email] {
width: 65%;
float: left;
}
@media only screen and (max-width: 1024px) {
.newsletter-info input.contact_email[type=email] {
width: 100%;
}
}
.newsletter-info #contact_form input.newsletter-form__sign-up[type=submit] {
width: calc(35% - 10px);
}
@media only screen and (max-width: 1024px) {
.newsletter-info #contact_form input.newsletter-form__sign-up[type=submit] {
width: 100%;
}
}
.newsletter-info .input-row {
margin-right: 0;
margin-left: 0;
}
.newsletter-info .popup-signup-show--true {
margin-top: 20px;
}
.newsletter-image--true .newsletter-popup__content {
width: 60%;
display: flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 798px) {
.newsletter-image--true .newsletter-popup__content {
width: 100%;
display: block;
}
}
@media only screen and (min-width: 1025px) {
.newsletter-image--true {
max-height: 875px;
}
}
@media only screen and (min-width: 1025px) {
.newsletter-image--true.object-fit--none {
height: auto;
}
}
.newsletter-image--false {
justify-content: center;
}
.newsletter-image--false .newsletter-info {
width: 100%;
position: relative;
height: auto;
float: none;
}
.align-left .newsletter-info {
right: 0;
}
.newsletter-description h2 {
color: #363636;
margin-top: 0;
}
.newsletter-description {
padding: 40px;
margin: 0 auto;
}
@media only screen and (max-width: 798px) {
.newsletter-description {
font-size: inherit;
width: auto;
}
}
@media only screen and (max-width: 480px) {
.newsletter-description {
padding: 20px;
}
}
@media only screen and (min-width: 1025px) {
.newsletter-description {
min-width: 350px;
}
}
@media only screen and (min-width: 1401px) {
.newsletter-description {
font-size: inherit;
}
}
.newsletter-popup__button {
margin-top: 10px;
margin-bottom: 0;
}.newsletter-popup__button {
margin-left: 8px;
margin-right: 8px;
}@media only screen and (max-width: 480px) {
.newsletter-popup__button {
margin-top: 5px;
}
}
.newsletter-popup__button--text {
--button-color-border: #363636;
--button-color-background: transparent;
--button-color-text: #363636;
--button-color-border-hover: #363636;
--button-color-background-hover: #363636;
--button-color-text-hover: #ffffff;
}
.newsletter-popup__button--highlighted {
--button-color-border: #363636;
--button-color-background: #363636;
--button-color-text: #ffffff;
--button-color-border-hover:
#2f2f2f
;
--button-color-background-hover:
#2f2f2f
;
--button-color-text-hover: #ffffff;
}
/* Newsletter section above footer */
.newsletter_section {
transform: translate3d(0, 0, 0);
background-color: #F9F7F4;
color: #1C1C1C;
}
.newsletter_section h2 {
margin-top: 0;
color: #1C1C1C;
}
.newsletter_section.newsletter-bgr-true {
background-color: #F9F7F4;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.newsletter_section.newsletter-bgr-true input.contact_email[type=email] {
border: 0;
}
@media only screen and (max-width: 480px) {
.newsletter_section.newsletter-bgr-true {
text-align: center !important;
}
}
.section_form {
padding: 10px 20px;
}
.section_form input[type=email],
.section_form input[type=text] {
border: 0;
}
.section_form .newsletter-text + .newsletter, .section_form h5 + .newsletter {
margin-top: 15px;
}
.newsletter_section h5 {
color: #1C1C1C !important;
padding-top: 0px;
margin: 0;
}
.newsletter_section .newsletter-text p {
margin-bottom: 0;
}
.newsletter_section .newsletter,
.password-page-row form {
display: inline-block;
padding-top: 0 !important;
width: 450px;
}
@media only screen and (max-width: 480px) {
.newsletter_section .newsletter,
.password-page-row form {
width: 100%;
max-width: 100%;
}
}
@media only screen and (max-width: 480px) {
.newsletter_section .newsletter,
.password-page-row form {
width: 100%;
}
}
/* Shopify challenge */
.g-recaptcha {
margin-bottom: 1rem;
}
.shopify-challenge__container {
padding: 150px 0;
}
.shopify-challenge__container .shopify-challenge__button {
width: auto;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid;
padding: 13px 20px;
text-align: center;
line-height: 1.2;
font-family: Cormorant, serif;
font-weight: normal;
font-style: normal;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
word-break: break-word;
cursor: pointer;
transition: all 0.2s linear;
border-color: var(--button-color-border, #B8973A);
background: var(--button-color-background, #B8973A);
color: var(--button-color-text, #ffffff);
}.shopify-challenge__container .shopify-challenge__button {
border-radius: 0;
}.shopify-challenge__container .shopify-challenge__button:visited {
color: var(--button-color-text, #ffffff);
}
.shopify-challenge__container .shopify-challenge__button:hover:not([disabled]), .shopify-challenge__container .shopify-challenge__button:active {
background: var(--button-color-background-hover, var(--button-color-background, #9A7D2E));
border-color: var(--button-color-border-hover, var(--button-color-border, #9A7D2E));
color: var(--button-color-text-hover, var(--button-color-text, #ffffff));
}
.shopify-challenge__container .shopify-challenge__button:active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
outline: 0;
}
.shopify-challenge__container .shopify-challenge__button[disabled] {
cursor: not-allowed;
}
/* Newsletter in footer */
.shopify-section--footer .newsletter_section {
padding: 0;
background-color: transparent;
color: #363636;
}
.shopify-section--footer .newsletter_section .newsletter {
width: 100%;
}
.shopify-section--footer .newsletter_section .newsletter input {
width: 100%;
}
.shopify-section--footer .newsletter_section .newsletter .newsletter-form__sign-up {
margin-left: 0;
}
.shopify-section--footer .newsletter_section h6 {
color: #B8973A;
font-size: 20px;
}
.shopify-section--footer .newsletter_section p {
padding: 15px 0;
}
/* #Tables
================================================== */table:not(#customer-orders):not(#order-details) th {
background-color: #f9f9f9;
}
table:not(#customer-orders):not(#order-details) th,
table:not(#customer-orders):not(#order-details) td {
padding: 10px;
border-right: 1px solid #dcdcdc;
}
table:not(#customer-orders):not(#order-details) th:first-child,
table:not(#customer-orders):not(#order-details) td:first-child {
border-left: 1px solid #dcdcdc;
}
table:not(#customer-orders):not(#order-details) tr {
border-bottom: 1px solid #dcdcdc;
}
table:not(#customer-orders):not(#order-details) tr:first-child {
border-top: 1px solid #dcdcdc;
}/* Responsive order tables */
.collapsible-table {
width: 100%;
margin-bottom: 20px;
}
.collapsible-table th {
font-weight: 700;
text-align: left;
}
.collapsible-table th,
.collapsible-table td {
padding: 10px;
}
@media only screen and (max-width: 798px) {
.collapsible-table th,
.collapsible-table td {
border-left: none;
}
}
.collapsible-table tr .order_summary td.label {
text-align: right;
}
.collapsible-table .order-details__discount-block {
display: block;
}
@media only screen and (max-width: 798px) {
.collapsible-table thead {
display: none;
}
.collapsible-table tr {
display: block;
margin-bottom: 20px;
}
.collapsible-table tr:last-child {
margin-bottom: 0;
}
.collapsible-table tr td {
position: relative;
}
.collapsible-table td {
display: block;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px 0 0;
}
.collapsible-table td:before {
content: attr(data-label);
z-index: 1;
padding: 6px;
font-weight: bold;
width: calc(50% - 6px);
word-break: break-word;
}
.collapsible-table td:after {
content: "";
z-index: 0;
width: 50%;
min-height: 100%;
position: absolute;
}
.collapsible-table td:last-child {
border-bottom: none;
}
.collapsible-table tfoot {
display: block;
margin-top: 20px;
}
.collapsible-table tfoot tr {
margin-bottom: 0;
border-bottom: none;
}
.collapsible-table tfoot tr:last-child {
border-bottom: 1px solid #dcdcdc;
}
.collapsible-table .order-details__total,
.collapsible-table .order-details__product,
.collapsible-table .order-details__discount {
text-align: right;
padding-left: 10px;
width: calc(50% - 10px);
word-break: break-word;
}
}
#customer-orders th,
#order-details th {
background-color: #f9f9f9;
}
#customer-orders th,
#customer-orders td,
#order-details th,
#order-details td {
border-right: 1px solid #dcdcdc;
}
#customer-orders th:first-child,
#customer-orders td:first-child,
#order-details th:first-child,
#order-details td:first-child {
border-left: 1px solid #dcdcdc;
}
@media only screen and (max-width: 798px) {
#customer-orders th:first-child,
#customer-orders td:first-child,
#order-details th:first-child,
#order-details td:first-child {
border-left: none;
}
}
#customer-orders tr,
#order-details tr {
border-bottom: 1px solid #dcdcdc;
}
#customer-orders tr:first-child,
#order-details tr:first-child {
border-top: 1px solid #dcdcdc;
}
@media only screen and (max-width: 798px) {
#customer-orders tr,
#order-details tr {
border: 1px solid #dcdcdc;
border-bottom: none;
}
#customer-orders td,
#order-details td {
border-right: none;
border-bottom: 1px solid #dcdcdc;
}
#customer-orders td:after,
#order-details td:after {
border-right: 1px solid #dcdcdc;
background-color: #f9f9f9;
}
#customer-orders tfoot td,
#order-details tfoot td {
border-bottom: none;
}
#customer-orders tfoot:last-child,
#order-details tfoot:last-child {
border-bottom: 1px solid #dcdcdc;
}
}
/* #Misc
================================================== */
.allow-clickthrough {
pointer-events: none !important;
}
.hidden {
display: none;
}
@media only screen and (max-width: 480px) {
.hidden--mobile {
display: none !important; /* Force on mobile devices */
}
}
.remove {
color: #333333;
}
.relative {
position: relative;
}
.half-bottom {
margin-bottom: 10px !important;
}
.add-bottom {
margin-bottom: 20px !important;
}
.right {
float: right;
position: relative;
}
.left {
float: left;
}
.inline {
display: inline;
}
.center {
text-align: center;
}
.align_right {
text-align: right;
}
.align_left {
text-align: left;
}
.text-align--center {
text-align: center;
}
.text-align--left {
text-align: left;
}
.text-align--right {
text-align: right;
}
p.warning {
text-align: center;
font-weight: bold;
}
.warning--quantity {
clear: both;
display: inline-block;
margin-top: 15px;
width: auto;
text-align: left;
}
@media only screen and (min-width: 799px) {
.large--right {
float: right;
position: relative;
}
}
.visually-hidden {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.mini-cart__item p.warning {
margin-top: 5px;
text-align: left;
}
.mobile_only,
span.mobile_only,
.container div.mobile_only {
display: none;
}
.no_border {
border: none !important;
}
.extra_padding {
padding-top: 4px;
}
div.hidden {
display: none;
}
div.is-absolute {
position: absolute !important;
top: 0;
margin-top: 0;
}
.full-width-image {
width: 100%;
}
#instantclick-bar {
background: #B8973A;
z-index: 100000;
height: 4px;
}
#grid .column,
#grid .columns {
background: #ddd;
height: 25px;
line-height: 25px;
margin-bottom: 10px;
text-align: center;
text-transform: uppercase;
color: #555;
font-size: 12px;
font-weight: bold;
border-radius: 2px;
}
#grid .column:hover,
#grid .columns:hover {
background: #bbb;
color: #333;
}
#grid .example-grid {
overflow: hidden;
}
.items_left {
margin: 0 0 15px;
line-height: 1.6em;
font-size: normal;
font-style: italic;
color: #8c8b8b;
}
.cart .paypal-button + .paypal-button {
display: none;
}
/* #Testimonials
================================================== */
.darken-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background: rgba(0, 0, 0, 0.6);
}
@media only screen and (max-width: 480px) {
.caption-background-darken_bg.caption--below-true .darken-bg {
display: none;
}
}
.shopify-section--testimonials {
position: relative;
}
.shopify-section--testimonials .set-static {
display: flex;
}
.shopify-section--testimonials .set-static .caption {
position: static;
transform: translateY(0);
padding: 40px;
margin: auto;
}
.shopify-section--testimonials .set-testimonial-height {
height: 95%;
}
.shopify-section--testimonials .feature-divider {
margin: 25px auto;
width: 10%;
display: inline-block;
}
@media only screen and (max-width: 480px) {
.shopify-section--testimonials .feature-divider {
margin: 5px auto;
}
}
.shopify-section--testimonials .testimonial-block--no-image .animated {
animation-delay: 0.25s;
}
.testimonial-block.gallery-cell.testimonial-block--no-image {
background-color: #ffffff;
}
@media only screen and (max-width: 480px) {
.mobile-banner--crop-left {
object-fit: cover;
object-position: left;
min-height: 60vh;
}
}
@media only screen and (max-width: 480px) {
.mobile-banner--crop-right {
object-fit: cover;
object-position: right;
min-height: 60vh;
}
}
@media only screen and (max-width: 480px) {
.mobile-banner--crop-center {
object-fit: cover;
object-position: center;
min-height: 60vh;
}
}
.caption-content.testimonial-text {
max-width: 80%;
}
.caption-content.testimonial-text .subtitle {
text-transform: none;
color: #002524;
}
@media only screen and (max-width: 480px) {
.caption-content.testimonial-text .subtitle {
font-weight: normal;
font-size: 14px;
}
}
.caption-content.testimonial-text h2,
.caption-content.testimonial-text .headline {
color: #002524;
}
@media only screen and (max-width: 480px) {
.caption-content.testimonial-text h2,
.caption-content.testimonial-text .headline {
text-shadow: none;
}
}
@media only screen and (max-width: 480px) {
.testimonial-block.caption--below-true:not(.testimonial-block--no-image) .pretext,
.testimonial-block.caption--below-true:not(.testimonial-block--no-image) .headline,
.testimonial-block.caption--below-true:not(.testimonial-block--no-image) .subtitle {
color: #333333;
}
.testimonial-block.caption--below-true:not(.testimonial-block--no-image) .feature-divider {
border-color: #333333;
}
}
@media only screen and (max-width: 480px) {
.testimonial-block .caption {
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
}
}
.testimonial-slideshow,
.testimonial-block.gallery-cell {
background-color: transparent;
}
/* #FAQ
================================================== */
.page-faq .faq--heading {
padding-top: 30px;
}
.faq-section h2.title {
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 54px;
letter-spacing: 0;
margin-bottom: 0;
}
.faq-section h2.faq--heading {
font-size: 24px;
font-weight: 400;
line-height: 1.125;
letter-spacing: 0;
margin-bottom: 10px;
margin-top: 40px;
}
.faq-section .has-gutter-enabled {
margin-bottom: 20px;
}
@media only screen and (max-width: 480px) {
.faq-section .faq--image {
margin-top: 40px;
}
}
/* #Team Template
================================================== */
.team-page__content--left {
display: flex;
}
@media only screen and (max-width: 798px) {
.team-page__content--left {
flex-direction: column;
}
}
.team-page__content--right {
display: flex;
flex-direction: row-reverse;
}
@media only screen and (max-width: 798px) {
.team-page__content--right {
flex-direction: column;
}
}
.team-page__text,
.team-page__image,
.team-page__image img {
width: 100%;
}
.team-page__content--multiple .team-page__text,
.team-page__content--multiple .team-page__image {
max-width: 50%;
width: 100%;
}
@media only screen and (max-width: 798px) {
.team-page__content--multiple .team-page__text,
.team-page__content--multiple .team-page__image {
max-width: 100%;
}
}
.team-page__content--multiple .team-page__text:first-child,
.team-page__content--multiple .team-page__image:first-child {
margin-right: 20px;
}
.team-page__text {
display: flex;
align-items: center;
justify-content: center;
}
.team-page__container {
max-width: 70%;
}
@media only screen and (max-width: 480px) {
.team-page__container {
max-width: 90%;
}
}
.team-member__profile.columns,
.team-member__profile.column {
margin-bottom: 30px;
}
.team-member__name {
padding-top: 10px;
}
.team-member__wrap {
position: relative;
}
.team-member__wrap:hover .team-member__overlay {
opacity: 1;
}
.team-member__overlay {
opacity: 0;
transition: opacity 0.3s linear;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.team-member__details {
transform: translateY(-50.1%);
top: 50%;
padding: 10px 0;
position: absolute;
width: 100%;
padding: 20px;
}
.team-member__details img {
display: block;
}
.team-member__details p {
margin-top: 10px;
line-height: 1.3;
}
.team-member__details .icon-twitter {
display: inline-block;
vertical-align: middle;
}
.team-member__title {
padding-bottom: 0;
text-align: center;
margin-bottom: 0;
text-transform: uppercase;
line-height: 1.3;
}
.team-member__title:after {
width: 30%;
display: block;
margin: 0 auto;
content: "";
height: 3px;
margin-top: 20px;
}
/* #Logo list
================================================== */
.logo-list {
margin-bottom: 1rem;
}
.logo-list.logo-list--grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.logo-list__item {
width: 150px;
}
.logo-list--slider .logo-list__item {
margin-right: 1rem;
}
.logo-list--slider .logo-list__item:last-child {
margin-right: 0;
}
.logo-list__item-link {
transition: opacity 0.3s linear;
}
.logo-list__item-link:hover {
opacity: 0.6;
}
/* #Gallery Section
================================================== */
.gallery-section {
text-align: center;
}
.gallery-section .gallery-image-wrapper,
.gallery-section .gallery-empty-wrapper {
margin-bottom: 5px;
position: relative;
}
.gallery-section .gallery-empty-wrapper {
min-height: 150px;
}
.gallery-section .gallery-empty-wrapper:nth-child(even) .placeholder-svg {
background-color: rgba(28, 28, 28, 0.3);
}
.gallery-section a {
display: block;
}
.gallery-overlay {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.3s ease-in;
}
.gallery-overlay .icon-zoom {
color: white;
font-size: 1.5em;
}
.gallery-image-wrapper:hover .gallery-overlay {
opacity: 1;
}
.two-per-row .overlay .icon-zoom {
font-size: 2.5em;
}
.three-per-row .overlay .icon-zoom {
font-size: 2em;
}
/* Horizontal gallery styling */
.gallery-section.gallery-horizontal i {
display: block;
}
.gallery-section.gallery-horizontal img {
position: absolute;
top: 0;
width: 100%;
vertical-align: bottom;
width: 100%;
height: auto;
display: block;
}
.gallery-section.gallery-horizontal .gallery-image-wrapper,
.gallery-section.gallery-horizontal .gallery-empty-wrapper {
margin: 10px;
}
.gallery-section.gallery-horizontal.adjust-columns .gallery-image-wrapper,
.gallery-section.gallery-horizontal.adjust-columns .gallery-empty-wrapper {
margin: 0px;
}
@media only screen and (min-width: 2000px) {
.gallery-section.gallery-horizontal .gallery-image-wrapper:last-child {
width: 15%;
flex-basis: initial !important;
flex-grow: initial !important;
}
}
.gallery-section.gallery-horizontal .gallery-empty-wrapper {
width: 190px;
}
/* Classic gallery styling */
.gallery-section.gallery-classic .gallery-image-wrapper,
.gallery-section.gallery-classic .gallery-empty-wrapper {
display: block;
}
.gallery-section.gallery-classic .gallery-image-wrapper img,
.gallery-section.gallery-classic .gallery-image-wrapper svg,
.gallery-section.gallery-classic .gallery-empty-wrapper img,
.gallery-section.gallery-classic .gallery-empty-wrapper svg {
width: 100%;
display: block;
}
.gallery-section.gallery-classic .add-padding {
padding-top: 5px;
padding-bottom: 5px;
}
.adjust-columns {
column-gap: 0px !important; /* Always have no column cap when set to wide screen */
-moz-column-gap: 0px !important; /* Always have no column cap when set to wide screen */
-webkit-column-gap: 0px !important; /* Always have no column cap when set to wide screen */
overflow: hidden;
}
.adjust-columns .gallery-image-wrapper,
.adjust-columns .gallery-empty-wrapper {
margin: 0;
margin-bottom: 0 !important; /* Overwrite margin bottom set when not full width */
}
/* Masonry gallery styling */
.gallery-section.gallery-masonry {
display: block;
}
.gallery-section.gallery-masonry .masonry {
font-size: 0.85em;
line-height: 0px;
margin: 10px 0;
column-gap: 10px;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
}
.gallery-section.gallery-masonry .gallery-empty-wrapper {
min-height: 100px;
overflow: hidden;
}
.gallery-section.gallery-masonry .gallery-empty-wrapper svg {
min-width: 800px;
}
.gallery-section.gallery-masonry .gallery-empty-wrapper svg path {
display: none;
}
.gallery-section.gallery-masonry .gallery-image-wrapper,
.gallery-section.gallery-masonry .gallery-empty-wrapper {
display: block;
box-sizing: border-box;
margin-bottom: 5px;
-webkit-column-break-inside: avoid;
-webkit-backface-visibility: hidden;
}
.gallery-section.gallery-masonry .gallery-image-wrapper img,
.gallery-section.gallery-masonry .gallery-image-wrapper svg,
.gallery-section.gallery-masonry .gallery-empty-wrapper img,
.gallery-section.gallery-masonry .gallery-empty-wrapper svg {
width: 100%;
display: block;
}
.gallery-section.gallery-masonry .two-per-row {
column-count: 2;
transform: translateX(0);
}
@media only screen and (max-width: 798px) {
.gallery-section.gallery-masonry .two-per-row {
column-count: 3;
}
}
@media only screen and (max-width: 480px) {
.gallery-section.gallery-masonry .two-per-row {
column-count: 1;
}
}
.gallery-section.gallery-masonry .three-per-row {
column-count: 3;
transform: translateX(0);
}
@media only screen and (max-width: 798px) {
.gallery-section.gallery-masonry .three-per-row {
column-count: 3;
}
}
@media only screen and (max-width: 480px) {
.gallery-section.gallery-masonry .three-per-row {
column-count: 1;
}
}
.gallery-section.gallery-masonry .four-per-row {
column-count: 4;
transform: translateX(0);
}
@media only screen and (max-width: 798px) {
.gallery-section.gallery-masonry .four-per-row {
column-count: 3;
}
}
@media only screen and (max-width: 480px) {
.gallery-section.gallery-masonry .four-per-row {
column-count: 1;
}
}
.gallery-section.gallery-masonry .five-per-row {
column-count: 5;
transform: translateX(0);
}
@media only screen and (max-width: 798px) {
.gallery-section.gallery-masonry .five-per-row {
column-count: 3;
}
}
@media only screen and (max-width: 480px) {
.gallery-section.gallery-masonry .five-per-row {
column-count: 1;
}
}
/* #Ratings
================================================== */
.product-rating {
display: flex;
margin: 0.5rem 0;
align-items: center;
}
.rating__star-wrapper {
display: flex;
}
.icon-star-background {
transform: scaleX(var(--rating-scale, 0));
}
.icon-star-reference {
position: absolute;
left: -9999px;
width: 0;
height: 0;
}
.rating__star {
width: 20px;
height: auto;
}
.rating__star-1 {
--rating-scale: calc(var(--rating-value));
}
.rating__star-2 {
--rating-scale: calc(var(--rating-value) - 1);
}
.rating__star-3 {
--rating-scale: calc(var(--rating-value) - 2);
}
.rating__star-4 {
--rating-scale: calc(var(--rating-value) - 3);
}
.rating__star-5 {
--rating-scale: calc(var(--rating-value) - 4);
}
.rating__text {
display: none;
}
.rating__count {
margin: 0 0 0 5px;
}
@media (forced-colors: active) {
.rating__star-wrapper {
display: none;
}
.rating__text {
display: block;
}
}
/* Product grid star ratings */
.product-details .product-rating {
justify-content: center;
color: #333333;
}
.product-details .rating__count span {
color: #333333;
}
/* Keep product H1 title visually consistent with existing design */
.product-details h1.title {
font-size: inherit;
font-weight: inherit;
margin: 0 0 8px;
line-height: inherit;
}
.thumbnail-overlay .product-details .product-rating,
.thumbnail-overlay .product-details .rating__count span {
color: #fff;
}
/* #Recently Viewed
================================================== */
.rv-container {
display: block;
}
.rv-container .thumbnail:empty {
margin-bottom: 0;
}
.rv-main .flickity-page-dots {
bottom: 25px;
}
@media only screen and (max-width: 798px) {
.rv-main .flickity-page-dots {
display: none;
}
}
/* Sidebar styles */
.sidebar .recently-viewed__title {
display: none;
}
/* Description bottom styles */
.product-description-bottom .js-recently-viewed.rv-main {
clear: both;
}
/* Hide duplicates */
.rv-box-element .js-recently-viewed-product:nth-child(2),
.rv-sidebar-element .js-recently-viewed-product:nth-child(2) {
display: none;
}
.recently-viewed__section {
width: 100%;
}
/* #Search autocomplete
================================================== */
.search__results-wrapper {
display: none;
position: relative;
}
.search__results {
width: 100%;
right: 0;
left: auto;
z-index: 30;
list-style-type: none;
margin: 0;
padding: 0 20px;
background: #1F5F5E;
overflow: hidden;
position: absolute;
}
@media only screen and (max-width: 798px) {
.search__results {
position: relative;
padding: 0 10px;
width: 100%;
}
}
@media only screen and (min-width: 799px) {
.search__results {
max-height: 500px;
overflow-y: scroll;
}
}
.search__results li {
display: block;
width: 100%;
margin: 0;
border-top: 1px solid #D4C4AF;
overflow: hidden;
}
.search__results li:nth-child(-n+2) {
border-top: none;
}
.search__results li a,
.search__results li .no-results {
display: flex;
align-items: center;
padding: 10px 0;
color: #f7f7f7 !important; /* Override nav menu coloring */
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
text-transform: uppercase;
}
.search__results li a:hover, .search__results li a:focus,
.search__results li .no-results:hover,
.search__results li .no-results:focus {
color: #D4B862;
}
.search__results .search-title {
text-transform: none;
text-align: left;
font-size: 12px;
}
.search__results .search-title span {
color: #B8973A;
}
.search__results .thumbnail {
padding: 0;
max-width: 62px;
margin-right: 20px;
}
@media only screen and (max-width: 798px) {
.search__results .thumbnail {
max-width: 20%;
}
}
.search__results .thumbnail img {
display: block;
}
.header .search__results {
background: #1F5F5E;
width: 350px;
}
/* 404 search */
.error-404 .search_box {
margin-bottom: 0;
}
/* Blog search */
.blog_search {
margin-bottom: 15px;
}
.blog_search input {
margin-bottom: 0;
}
/* #Mobile search */
.mobile-search {
display: none;
position: absolute;
top: 0;
left: 0;
height: 100vh;
z-index: 999999;
width: 100%;
background: rgba(0, 0, 0, 0.8);
}
@media only screen and (min-width: 799px) {
.mobile-search {
display: none !important; /* Ensure it does not display on larger screens */
}
}
.mobile-search form {
background-color: #ffffff;
margin: 0;
padding: 10px 20px 0;
position: relative;
min-height: 70vh;
width: 100%;
}
.mobile-search input#q {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
text-transform: uppercase;
padding-left: 40px;
padding-right: 20px;
border: 0;
border-bottom: 1px solid #D4C4AF;
}
.mobile-search input#q:focus, .mobile-search input#q:active {
border-bottom: 1px solid #D4C4AF;
}
.mobile-search .icon-search {
left: 20px;
top: 22px;
transform: none;
width: 30px;
position: absolute;
z-index: 1000;
color: #f7f7f7;
font-size: 20px;
cursor: pointer;
}
.mobile-search .icon-cross {
position: absolute;
right: 20px;
top: 22px;
cursor: pointer;
}
.mobile-search .search__results-wrapper {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.mobile-search .search__results {
background-color: #ffffff;
margin-top: 0;
padding: 0;
}
.mobile-search .item-result:last-child {
padding-bottom: 10px;
}
.mobile-search .search-title {
color: #333333;
}
/* #Search page
================================================== */
.shopify-section--search-template form {
position: relative;
}
.shopify-section--search-template .search_container {
position: relative;
}
.shopify-section--search-template .search_container .search-submit {
z-index: 900;
}.product-list--search .product_row {
padding: 20px 0;
border-bottom: 1px solid #D4C4AF;
}
.product-list--search .product_row:last-child {
border-bottom: none;
}
/* #Site Styles
================================================== */
div.content,
section.content {
padding: 30px 0px 15px 0;
}
.featured_text {
font-size: 18px;
line-height: 36px;
}
.large_text {
font-size: 28px;
line-height: 50px;
}
/* RTE */
.rte {
word-break: break-word;
}
.rte details span {
padding: 1rem 1.5rem;
display: block;
}
.rte details summary {
cursor: pointer;
position: relative;
font-weight: bold;
padding: 1rem 1.5rem;
border-bottom: 1px solid #D4C4AF;
}
.rte details summary:before {
content: "+";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
font-size: 20px;
color: #B8973A;
}
.rte details[open] summary::before {
content: "-";
}
/* #Header
================================================== */
@media only screen and (max-width: 798px) {
.dropdown .header_search_form .search__results {
margin-top: 30px;
}
}
.dropdown .header_search_form .search-terms {
height: 50px;
min-height: 50px;
}
.main-nav div.logo a {
color: #ffffff !important;
outline: 0;
}
.menu-position--inline.logo-position--left div.logo {
text-align: left;
}
.menu-position--inline.logo-position--center .logo {
text-align: center;
}
.menu-position--inline.logo-position--center .logo img {
margin: 0 auto;
}
.primary_logo {
display: block;
}
.secondary_logo {
display: none;
}
header.feature_image.secondary_logo--true img.primary_logo,
header.feature_image.secondary_logo--true img.secondary_logo {
display: none;
}
header.secondary_logo--true:not(.feature_image) img.secondary_logo {
display: none !important;
}
header.secondary_logo--true:not(.feature_image) img.primary_logo {
display: inline !important;
}
.featured_content,
.featured_content h1,
.featured_content h2,
.featured_content h3,
.featured_content h4,
.featured_content h5,
.featured_content h6 {
color: #363636;
}
.featured_content {
background-color: #f6f7f9;
}
.nav_arrows {
float: right;
}
.sku {
margin: 0;
}
#category {
width: 100%;
}
/* Currency / language switcher in header */
#header__selector-form .icon-arrow-down {
font-size: 9px;
}
#header__selector-form .disclosure__toggle {
background-color: transparent;
height: 40px;
border: none;
position: relative;
padding: 0 0 0 16px;
letter-spacing: 1px;
}
#header__selector-form .disclosure__toggle:hover, #header__selector-form .disclosure__toggle:focus {
color: #283737;
}
#header__selector-form .disclosure__list-wrap {
border: none;
bottom: initial;
position: absolute;
top: 100%;
}
#header__selector-form .disclosure__list-wrap .disclosure-list {
list-style: none;
}
#header__selector-form .disclosure-list__item {
display: block;
}
#header__selector-form .disclosure__button {
letter-spacing: 1px;
}
#header__selector-form .currency-preview {
position: relative;
}
#header__selector-form .currency-preview select.currencies {
background-image: none;
z-index: 1000;
}
#header__selector-form .currency-preview .icon-down-arrow {
position: absolute;
top: 50%;
right: 10px;
color: #F9F7F4;
transform: translateY(-50%);
z-index: 999;
}
#header__selector-form .currency-preview .icon-down-arrow:hover {
color: inherit;
}
#header__selector-form .currency-preview:hover .icon-down-arrow,
#header__selector-form .currency-preview:hover select.currencies {
color: #283737;
}
.mobile-menu-container {
position: absolute;
left: 0;
top: 100%;
width: 100%;
text-align: left;
opacity: 0;
}
.mobile-menu-container[data-animation] {
transition: opacity 0.2s linear;
}
.mobile-menu-container[data-animation-state=open] {
opacity: 1;
}
.top-bar__login-link {
display: flex;
gap: 5px;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
font-size: 13px;
color: #F9F7F4;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-decoration: none;
text-transform: uppercase;
}
.top-bar__login-link:visited {
color: #F9F7F4;
}
.top-bar__login-link:hover, .top-bar__login-link:active, .top-bar__login-link:focus {
color: #283737;
text-decoration: none;
}
/* #Currency / Language switcher
================================================== */
.selectors-form__wrap,
.selectors-form,
.selectors-form__item {
margin: 0;
}
.selectors-form__wrap {
display: flex;
justify-content: flex-end;
}
@media only screen and (max-width: 798px) {
.selectors-form__wrap {
flex-direction: column;
justify-content: center;
}
}
.disclosure {
position: relative;
}
/* Fix for capitalization issue in cross border */
.disclosure-text-style-none button.disclosure__toggle,
.disclosure-text-style-none button.disclosure__button {
text-transform: capitalize;
}
.disclosure-text-style-uppercase button.disclosure__toggle,
.disclosure-text-style-uppercase button.disclosure__button {
text-transform: uppercase;
}
.disclosure-text-style-lowercase button.disclosure__toggle,
.disclosure-text-style-lowercase button.disclosure__button {
text-transform: lowercase;
}
.disclosure__toggle {
color: #F9F7F4;
font-size: 13px;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
border: 1px solid #D4C4AF;
background-color: transparent;
margin-right: 20px;
min-height: 0;
transition: color 0.1s linear;
}
.disclosure__toggle:hover, .disclosure__toggle:focus {
opacity: 1;
}
.disclosure__toggle.is-clicked {
color: #283737;
}
.disclosure__toggle.is-clicked:focus {
color: #D4B862;
}
.disclosure__toggle.is-clicked + .disclosure__list-wrap {
visibility: visible;
opacity: 1;
}
.disclosure__toggle.is-clicked + .disclosure__list-wrap .disclosure-list {
display: block;
}
.disclosure__toggle .icon-down-arrow {
margin-left: 8px;
}
.disclosure__list-wrap {
background-color: #1A1A2E;
border: 1px solid #D4C4AF;
bottom: 100%;
visibility: hidden;
position: absolute;
z-index: 1001;
opacity: 0;
transition: opacity 0.3s ease-in;
}
.disclosure__list-wrap.disclosure--left {
left: auto;
right: 0;
}
.disclosure__list-wrap .disclosure-list {
list-style: none;
margin-left: 0;
margin-bottom: 0;
padding: 0;
margin-top: 0;
display: none;
max-height: 400px;
overflow-y: auto;
}
.disclosure-list__item {
background-color: inherit;
color: inherit;
line-height: 1;
}
button.disclosure__button {
background-color: inherit;
padding: 13px 20px;
color: #F9F7F4;
font-size: 13px;
letter-spacing: 1px;
font-family: Cormorant, serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
transition: color 0.1s linear;
opacity: 1;
}
button.disclosure__button:hover, button.disclosure__button[aria-current=true] {
color: #283737;
}
button.disclosure__button:focus {
color: #D4B862;
}
/* Pagination & infinite scrolling */
.paginate,
.load-more {
text-align: center;
}
a.tag,
.paginate .page a,
.paginate .current {
border: solid 1px #D4C4AF;
margin: 10px 5px;
padding: 0.5rem 1rem;
display: inline-block;
}a.tag:hover,
.paginate .page a:hover,
.paginate .current:hover {
color: #ffffff;
background-color: #9A7D2E;
border: solid 1px #9A7D2E;
}
.paginate .current {
color: #ffffff;
font-weight: bold;
background-color: #9A7D2E;
border: solid 1px #9A7D2E;
}
.paginate .next,
.paginate .prev {
display: inline-block;
margin: 10px 0;
padding: 0.5rem 1rem;
}
.load-more {
display: none;
width: 100%;
}
.shopify-section--collection-template .load-more,
.shopify-section--search-template .load-more {
display: block;
clear: both;
margin: 25px 0;
}
.load-more__icon {
opacity: 0;
height: 0;
width: 0;
transition: all 0.3s linear;
background: url(//www.hattongardenbespokejewellery.com/cdn/shop/t/150/assets/loader.gif) center center no-repeat;
background-size: 32px 32px;
margin: 0 auto;
}
.product-list.loading-in-progress.filter-loading {
height: 0;
}
.product-list.loading-in-progress + .load-more__icon {
width: 44px;
height: 44px;
opacity: 1;
}
a.tag {
font-size: smaller;
padding: 4px 6px;
margin: 5px 2px 5px 0;
}
.paginate .deco {
border: none;
}
/* Product list - collections */
.product-list {
width: 100%;
}
.product-list .thumbnail,
.slider-gallery .thumbnail,
.list-collections .thumbnail {
position: relative;
text-align: center;
margin-bottom: 25px;
display: block;
/* Do not display thumbnail hover background if user picks none */
}
.product-list .thumbnail .thumbnail-overlay,
.slider-gallery .thumbnail .thumbnail-overlay,
.list-collections .thumbnail .thumbnail-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
overflow: hidden;
transition: opacity 0.3s ease-in;
}
.product-list .thumbnail .thumbnail-overlay > a,
.slider-gallery .thumbnail .thumbnail-overlay > a,
.list-collections .thumbnail .thumbnail-overlay > a {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@media only screen and (max-width: 798px) {
.product-list .thumbnail .thumbnail-overlay,
.slider-gallery .thumbnail .thumbnail-overlay,
.list-collections .thumbnail .thumbnail-overlay {
display: none;
}
}
@media only screen and (min-width: 1401px) {
.product-list .thumbnail .thumbnail-overlay,
.slider-gallery .thumbnail .thumbnail-overlay,
.list-collections .thumbnail .thumbnail-overlay {
line-height: 1.5;
}
}.product-list .thumbnail .thumbnail-overlay,
.slider-gallery .thumbnail .thumbnail-overlay,
.list-collections .thumbnail .thumbnail-overlay {
background-color: rgba(0, 0, 0, 0.7);
}.product-list .thumbnail img,
.slider-gallery .thumbnail img,
.list-collections .thumbnail img {
vertical-align: bottom;
transition: opacity 0.3s ease-in;
width: 100%;
object-fit: contain;
object-position: top center;
}
.product-list .thumbnail .product-info__caption,
.slider-gallery .thumbnail .product-info__caption,
.list-collections .thumbnail .product-info__caption {
margin-top: 20px;
}.product-list .thumbnail .product-info__caption,
.slider-gallery .thumbnail .product-info__caption,
.list-collections .thumbnail .product-info__caption {
display: block;
}@media only screen and (max-width: 798px) {
.product-list .thumbnail .product-info__caption,
.slider-gallery .thumbnail .product-info__caption,
.list-collections .thumbnail .product-info__caption {
display: block;
}
}
@media only screen and (max-width: 1024px) {
.touchevents .product-info__caption {
display: block;
}
.touchevents .thumbnail-overlay {
display: none;
}
}
.hidden-product-link {
line-height: 0;
font-size: 0;
color: transparent;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.featured_collections .thumbnail {
text-align: center;
}
/* Swap to second image on hover */.has-secondary-media-swap img {
visibility: visible;
height: auto;
}
.has-secondary-media-swap .product_gallery {
margin-bottom: 0;
}
.has-secondary-media-swap .secondary-media-hidden {
opacity: 0;
visibility: hidden;
height: 0 !important; /* Override inline height on image-element snippet */
}/* Thumbnail overlay */
.quick_shop {
opacity: 0;
pointer-events: all;
transform: translate3d(0, 100%, 0);
}a .price-ui span {
color: #333333;
}
.price:not(.price--sale):not(.sale) .from {
color: #333333;
}
.thumbnail-hover-enabled--true .price:not(.price--sale):not(.sale) .from {
color: #ffffff;
}
@media only screen and (max-width: 480px) {
.thumbnail-hover-enabled--true .price:not(.price--sale):not(.sale) .from {
color: #333333;
}
}
.thumbnail .price--sale span.money,
.thumbnail .sale span.money {
color: #d54d4d;
}
.thumbnail .was_price span.money,
.thumbnail .compare-at-price span.money {
color: #8c8b8b;
}
.thumbnail .compare-at-price {
-webkit-text-decoration-color: #8c8b8b;
text-decoration-color: #8c8b8b;
}
.thumbnail .free-price-text .money,
.thumbnail .free-price-text {
color: #d54d4d;
}
.thumbnail .sold-out-price.has-margin-right {
margin-right: 5px;
}
.thumbnail .brand {
display: block;
}.thumbnail.quick-shop-style--popup .current_price span.money {
color: #333333;
}.thumbnail.quick-shop-style--popup .sale .current_price span.money {
color: #d54d4d;
}
.thumbnail.thumbnail-hover-enabled--true .price--sale > span.money {
color: #d54d4d;
}
.thumbnail.thumbnail-hover-enabled--true .compare-at-price span.money {
color: #8c8b8b;
}
.thumbnail.thumbnail-hover-enabled--true .free-price-text {
color: #d54d4d;
}
.thumbnail-hover-enabled--false .current_price span.money {
color: #333333;
}/* Product banners */
.new {
position: relative;
display: inline;
padding: 5px;
border-radius: 2px;
font-size: 12px;
}.product-list .thumbnail img,
.slider-gallery .thumbnail img {
max-height: 220px;
width: 100%;
object-fit: contain;
}
.product-list .thumbnail video,
.product-list .thumbnail .plyr--youtube,
.slider-gallery .thumbnail video,
.slider-gallery .thumbnail .plyr--youtube {
width: 100%;
max-height: 220px;
}
.product-list .thumbnail .plyr--youtube,
.slider-gallery .thumbnail .plyr--youtube {
height: 220px;
}
.product-list .thumbnail .plyr--youtube .plyr__video-embed,
.slider-gallery .thumbnail .plyr--youtube .plyr__video-embed {
height: 100%;
}/* Sold out and coming soon text */
.thumbnail .sold_out,
.thumbnail .coming-soon {
color: #333333;
}
.thumbnail-overlay .sold_out,
.thumbnail-overlay .coming-soon {
color: #ffffff;
}
/* Sale text */
.sale,
.sale span,
.free,
.thumbnail .sale {
color: #d54d4d;
}
a.secondary_button,
input.secondary_button {
display: block;
padding: 15px 0;
text-align: center;
border-top: solid 1px #D4C4AF;
border-bottom: solid 1px #D4C4AF;
margin: 10px 0;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #B8973A;
-webkit-appearance: none;
appearance: none;
}
a.secondary_button:hover, a.secondary_button:active, a.secondary_button:visited,
input.secondary_button:hover,
input.secondary_button:active,
input.secondary_button:visited {
color: #9A7D2E;
}
.thumbnail .price,
.thumbnail .title {
margin-bottom: 5px;
font-size: inherit;
line-height: 1.2;
}
.thumbnail .title {
display: block;
}
.thumbnail .price.has-unit-price {
margin-bottom: 0;
}
@media only screen and (max-width: 480px) {
.thumbnail .current_price .money {
color: #333333;
}
}
.cart_price {
float: right;
text-align: right;
padding-left: 20px;
font-weight: bold;
display: none;
}
.excluding_tax,
#estimated-shipping {
display: block;
}
.cart_page_image {
text-align: center;
margin: 10px 0 20px;
display: block;
}
.cart_page_image img {
width: 100%;
display: block;
}
.cart_content_info {
padding: 0;
}
.cart_content_info h5 {
padding: 0;
margin-bottom: 10px;
margin-top: 0;
}
.cart_content_info .price_total {
clear: both;
padding: 0;
margin-bottom: 20px;
font-size: 20px;
}
.subtotal {
padding-top: 20px;
padding-left: 40px;
}
@media only screen and (max-width: 798px) {
.subtotal {
padding-left: 0;
}
}
.continue-shopping {
display: block;
color: #B8973A;
text-align: center;
font-family: Cormorant, serif;
font-weight: normal;
font-style: normal;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 20px;
}
.continue-shopping:hover, .continue-shopping:active, .continue-shopping:focus {
color: #9A7D2E;
}
.subtotal_amount {
font-size: 1.4em;
font-weight: bold;
}
button.update {
width: 30%;
float: right;
}
.price_total_text {
font-weight: normal;
display: none;
}
.was_price,
.was_price span {
text-decoration: line-through;
color: #8c8b8b;
text-shadow: none;
font-weight: normal;
}
.cart_savings {
text-align: left;
}
.savings {
font-size: 16px;
display: block;
}
.thumbnails a {
display: block;
margin-bottom: 1em;
}
.arrow {
position: relative;
top: -1px;
left: 2px;
opacity: 0.6;
}
.modal {
margin: 10px 0;
display: none;
background-color: #ffffff;
}
.modal_product {
width: auto;
line-height: 0px;
max-width: 940px;
}
.modal_product img {
cursor: pointer;
}
.modal_image {
text-align: center;
}
.modal a {
padding-bottom: 0;
}
.modal .modal_price,
.modal_price {
font-size: 20px;
margin-bottom: 10px;
}
.payment-terms-container {
margin: 0;
width: 100%;
}
/* These variables are used by shopify-payment-terms */
:root {
--color-body-text: #333333;
--color-body: #ffffff;
--color-bg: #ffffff;
}
shopify-payment-terms {
display: block;
margin-top: 8px;
font-size: 16px;
}
.product--description-top shopify-payment-terms {
margin-bottom: 4px;
}
.product_section .modal_price {
display: flex;
flex-wrap: wrap;
}
.product_section .modal_price .price__container,
.product_section .modal_price .sold-out__container {
display: inline-block;
}
.product_section .modal_price .price__container--display-price-true.has-margin-right {
margin-right: 10px;
}
.product_section .modal_price .sold_out__container {
min-width: 150px;
}
.product_section .modal_price .sold-out-price.has-margin-right {
margin-right: 5px;
}
.modal form {
margin-bottom: 10px;
}
.product_image_col {
margin-top: 15px;
text-align: center;
}
.meta {
font-size: 13px;
}
.meta p {
font-size: 13px;
margin-bottom: 0px;
}
p.meta {
margin-bottom: 10px;
}
.comment-body p.meta {
margin-bottom: 5px;
}
.comment-body h6 {
padding: 0;
}
.sidebar_title {
padding-bottom: 0px;
}
.shopify-section--blog-template h2 {
margin-bottom: 0;
line-height: 1.2;
}
.shopify-section--blog-template h2 a {
color: #1C1C1C;
}
.blog_meta {
margin-bottom: 0;
}
.blog_meta span {
position: relative;
display: inline-block;
margin-right: 15px;
font-size: smaller;
color: #8c8b8b;
}
.blog_meta span:after {
content: "";
position: absolute;
right: -16px;
top: 50%;
margin: -1px 5px 0;
width: 4px;
height: 4px;
border-radius: 2px;
background-color: #8c8b8b;
}
.blog_meta span:last-child:after {
background-color: transparent;
}
.tags span a {
color: #B8973A;
}
.article-wrap {
padding-bottom: 25px;
}
@media only screen and (min-width: 799px) {
.article-wrap .article__title {
margin-top: 0;
}
}
.read-more-link {
margin-top: 10px;
margin-bottom: 25px;
display: inline-block;
}
.article h3.sub_title {
letter-spacing: 0;
margin: 10px auto 0;
}
.article_content {
margin-top: 20px;
}
.excerpt {
line-height: 1.5;
margin: 1em 0;
}
#contact_form .newsletter-form__sign-up {
display: inline-block;
width: 120px;
padding-left: 0;
padding-right: 0;
float: none;
}
body.article {
padding-bottom: 0;
}
.toggle span {
color: #8c8b8b;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: smaller;
float: right;
display: none;
}
.sidebar .blog_search {
margin: 15px 0;
}
.sidebar .blog_search input {
width: 100%;
}.label,
.meta .label {
color: #8c8b8b;
}
.blog_meta,
.blog_meta a {
color: #8c8b8b;
}
.blog_meta a:hover {
color: #9A7D2E;
}
.count {
font-style: normal;
font-size: 13px;
}
.checkout {
display: block;
float: right;
margin-top: 0px;
}
.additional-checkout-buttons {
text-align: center;
margin-top: 0;
}
.additional-checkout-buttons > *:not(script) {
padding: 10px 0 0 10px;
vertical-align: top;
line-height: 1;
}
@media only screen and (max-width: 480px) {
.additional-checkout-buttons > *:not(script) {
padding: 10px 0 0 5px;
}
}
.additional-checkout-buttons > *:not(script):first-child, .additional-checkout-buttons > *:not(script):empty {
padding-left: 0px;
}
.or {
line-height: 40px;
font-style: normal;
font-size: 14px;
padding: 0 10px;
text-align: center;
}
@media only screen and (max-width: 480px) {
.or {
line-height: initial;
text-align: left;
}
}
.comment {
margin-bottom: 20px;
}
/* Author Bio + Social Share Buttons */
.author_share_wrap {
width: 100%;
border-top: 1px solid #D4C4AF;
min-height: 40px;
padding: 15px 0;
margin-top: 15px;
overflow: auto;
}
.blog_author {
width: 60%;
float: left;
}
@media only screen and (max-width: 798px) {
.blog_author {
width: 100%;
border-bottom: 1px solid #D4C4AF;
padding-bottom: 15px;
}
}
.blog_author img {
width: 80px;
height: 80px;
border: 1px solid #D4C4AF;
float: left;
margin-right: 15px;
}
.author_bio {
text-align: left;
}
.author_bio h6 {
padding-top: 0;
}
.author_bio p {
font-size: 0.9em;
}
.blog_share {
width: 38%;
float: right;
text-align: right;
}
@media only screen and (max-width: 798px) {
.blog_share {
width: 100%;
float: left;
}
}
.red {
color: #C33;
}
.address p {
margin-bottom: 5px;
}
div#disqus_thread ul,
div#disqus_thread li {
border: none;
}
.search_page {
padding: 100px 0;
}
@media only screen and (max-width: 798px) {
.search_page {
padding: 50px 0;
}
}
/* #Swatch Styles
================================================== */
.swatch-element.swatch--active {
border-color: black;
box-shadow: 0px 0px 0px 2px rgb(255, 255, 255);
}
.selector-wrapper label {
margin-bottom: 0.5em;
}/* #Sidebar
================================================== */
.faceted-filter-group-summary__active-count {
margin: 0 auto 0 0.5rem;
}
.faceted-filter-form {
margin: 0;
}
.faceted-filter-group-display {
margin: 0 0 20px;
}
.sidebar-block__heading {
margin: 0;
padding: var(--sidebar-block-padding) 0;
}
.sidebar-block--first .sidebar-block__heading {
padding-top: 0;
}
.faceted-filter-group-display__header,
.sidebar-block__heading {
display: flex;
justify-content: space-between;
}
.faceted-filter-group-display__header {
margin-bottom: 10px;
}
.sidebar-block__heading {
display: flex;
align-items: center;
}
.sidebar-block .sidebar-block-toggle-icon {
margin-left: auto;
transition: transform 200ms linear;
}
@media only screen and (min-width: 799px) {
.toggle-all--false .sidebar-block .sidebar-block-toggle-icon {
display: none;
}
}
.sidebar-block[open] .sidebar-block-toggle-icon {
transform: rotateX(180deg);
}
.toggle-all--false .sidebar-block summary {
pointer-events: none;
}
@media only screen and (max-width: 798px) {
.toggle-all--false .sidebar-block summary {
pointer-events: all;
}
}
.sidebar-block summary {
cursor: pointer;
}
.sidebar {
--sidebar-block-padding: 15px;
--sidebar-left-safe-area: 10px;
}
.sidebar .faceted-active-filters__clear,
.sidebar .faceted-active-filters__remove-filter {
padding: 8px 15px;
}
.sidebar .faceted-active-filters__clear .x-icon,
.sidebar .faceted-active-filters__remove-filter .x-icon {
color: inherit;
margin-right: 5px;
top: 0;
}
.sidebar .faceted-filter-group-display__header-clear {
color: #B8973A;
}
.sidebar .faceted-filter-group-display__header-clear:hover, .sidebar .faceted-filter-group-display__header-clear:visited, .sidebar .faceted-filter-group-display__header-clear:active {
color: #B8973A;
}
.faceted-filter-group-display__list {
list-style: none;
padding-left: 0;
margin: 0;
}
.faceted-filter-group-display__list-item {
margin: 0;
}
.faceted-filter-group-display__list-item-input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.faceted-filter-group-display__list-item-label {
margin: 0;
padding: 4px 0;
display: flex;
align-items: center;
width: 100%;
}
.faceted-filter-group-display__list-item-label-text {
padding-left: 12px;
font-weight: initial;
font-size: 15px;
cursor: pointer;
color: #363636;
}
.faceted-filter-group-display__list-item-label-text:hover {
color: #B8973A;
}
.faceted-filter-group-display__list-item-input:checked ~ .faceted-filter-group-display__list-item-label-text {
font-weight: bold;
}
.faceted-filter-group-display__list-item-input:disabled ~ * {
opacity: 0.5;
}
.faceted-filter-group-display__checkmark {
stroke-width: 2;
min-width: 14px;
border: 1px solid #D4C4AF;
cursor: pointer;
transition: border-color 100ms, background 100ms;
}
.faceted-filter-group-display__list-item-input:focus ~ .faceted-filter-group-display__checkmark {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #B8973A;
}
.faceted-filter-group-display__list-item-input:checked ~ .faceted-filter-group-display__checkmark {
stroke: #ffffff;
background: #B8973A;
border-color: #B8973A;
}
.faceted-filter-group-display__list-item-input:disabled ~ .faceted-filter-group-display__checkmark {
cursor: not-allowed;
}
.faceted-filter-group-display__price-range {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 15px;
}
.faceted-filter-group-display__price-range-from,
.faceted-filter-group-display__price-range-to {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
grid-column-gap: 5px;
}
.faceted-filter-group-display__price-range-from .faceted-filter-group-display__price-range-input,
.faceted-filter-group-display__price-range-to .faceted-filter-group-display__price-range-input {
margin: 0;
}
.faceted-filter-group-display__price-range-label {
grid-column: span 2;
margin: 0;
}
.faceted-filter-group-display__submit {
margin-top: 20px;
}
.js .faceted-filter-group-display__list-submit {
display: none;
}
.faceted-active-filters {
display: flex;
flex-wrap: wrap;
gap: 5px;
padding: 15px 0;
border-bottom: 1px solid #D4C4AF;
}
.sidebar-block--first .faceted-active-filters {
padding-top: 0;
}
.content-wrapper {
width: 100%;
}
@media only screen and (max-width: 798px) {
.sidebar {
width: 100% !important; /* To overwrite desktop styles set inside of section */
margin-bottom: 30px;
}
.has-sidebar-option {
width: 100% !important; /* To overwrite desktop styles set inside of section */
}
}
/* Fancybox */
.fancybox-bg {
opacity: 1;
background-color: rgba(43, 46, 56, 0.9);
}
@media only screen and (max-width: 480px) {
.fancybox-bg {
background-color: rgba(255, 255, 255, 0.99);
}
}
@media only screen and (min-width: 481px) {
.fancybox-toolbar {
display: none;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fancybox-slide {
padding: 44px 0;
}
}
/* Add border around images */
@media only screen and (min-width: 481px) {
.fancybox-slide--image {
padding: 44px;
}
}
.fancybox-slide--image .fancybox-image {
object-fit: contain;
height: 100%;
}
.fancybox-slide--image .fancybox-image-wrap {
position: absolute;
width: 100%;
height: 100%;
}
.fancybox-slide--image .fancybox-content {
padding: 0;
background-color: white;
}
@media only screen and (min-width: 481px) {
.fancybox-slide--image .fancybox-content {
box-shadow: 0px 0px 0px 30px rgb(255, 255, 255);
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fancybox-slide--image .fancybox-content {
position: relative !important;
width: 100%;
height: 100%;
}
}
.fancybox-slide--image .fancybox-close-small {
top: -30px;
right: -30px;
}
.fancybox-is-scaling .fancybox-image-wrap,
.fancybox-can-pan .fancybox-image-wrap {
width: 100%;
height: 100%;
margin: 0;
}
/* Hide elements while zooming or when zoomed-in */
.fancybox-is-scaling .fancybox-item,
.fancybox-can-pan .fancybox-item {
display: none !important;
}
/* Style close button */
.fancybox-close,
.fancybox-slide--html .fancybox-close-small {
position: absolute;
top: 0px;
right: 0px;
width: 36px;
height: 36px;
z-index: 2;
color: #000000;
background-color: transparent;
}
.fancybox-close svg,
.fancybox-slide--html .fancybox-close-small svg {
display: none;
}
.fancybox-close:hover,
.fancybox-slide--html .fancybox-close-small:hover {
color: #000000;
}
@media only screen and (max-width: 480px) {
.fancybox-close,
.fancybox-slide--html .fancybox-close-small {
display: none;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.fancybox-close,
.fancybox-slide--html .fancybox-close-small {
display: block !important;
}
}
.fancybox-close:before,
.fancybox-slide--html .fancybox-close-small:before {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
font-size: 25px;
line-height: 35px;
position: absolute;
top: 0;
left: 0;
display: block;
width: 35px;
content: "\00D7";
text-align: center;
}
.fancybox-button {
min-height: auto;
}
@media only screen and (max-width: 480px) {
.fancybox-button {
background-color: white;
}
.fancybox-button svg path {
fill: #95979c;
}
}
/* Style navigation elements */
.fancybox-content:hover .fancybox-nav {
opacity: 1;
}
.fancybox-nav {
transition: opacity 0.2s linear;
opacity: 0;
position: absolute;
top: 0;
width: 50px;
height: 100%;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
}.fancybox-nav {
background-color: hsla(0deg, 0%, 100%, 0.25);
}.fancybox-nav span {
pointer-events: none;
}
.fancybox-nav svg path {
fill: #000000;
}
.fancybox-next {
right: 0;
}
.fancybox-prev {
left: 0;
}.fancybox-nav:hover {
background-color: hsla(0deg, 0%, 100%, 0.5);
}.fancybox-nav span {
position: absolute;
width: 36px;
height: 36px;
cursor: pointer;
}
@media only screen and (max-width: 1024px) {
.touchevents .fancybox-nav {
display: none;
}
}
/* #Footer
================================================== */
.footer {
padding: 20px 0;
pointer-events: all;
font-size: 14px;
border-top: solid 1px #D4C4AF;
background-color: #ffffff;
background-position: center center;
color: #363636;
}.footer .input-row {
flex-direction: column;
margin-left: 0px;
margin-right: 0px;
}
.footer .input-row input {
margin: 5px 0;
}
.footer-text .toggle_content {
padding-top: 15px;
}
.no-footer-title.footer-text .toggle_content {
padding-top: 0;
}
@media only screen and (max-width: 798px) {
.no-footer-title.footer-text .toggle_content {
display: block;
padding-top: 20px;
}
}
/* If no shop logo used, apply text styling as per theme settings */
.footer .logo {
color: #ffffff !important;
font-size: 20px;
margin-top: 0;
margin-bottom: 20px;
line-height: 1;
width: 100%;
word-wrap: break-word;
float: none;
}
@media only screen and (max-width: 798px) {
.footer .logo {
text-align: center;
}
}
img.footer-logo {
width: 75%;
max-width: 250px;
margin-bottom: 10px;
display: inline-block;
}
@media only screen and (max-width: 798px) {
img.footer-logo {
max-width: 50% !important;
margin: 0 25% 25px;
}
}
.footer .empty-column {
width: 100%;
height: 1px;
}
.footer .footer-menu-wrap h6 {
margin: 0;
padding: 0 0 5px 0;
color: #B8973A;
font-size: 20px;
}
@media only screen and (max-width: 798px) {
.footer .footer-menu-wrap h6 {
border-top: 1px solid #D4C4AF;
margin-bottom: 5px;
padding: 10px 0 5px;
}
}
.footer .footer-menu-wrap h6 > span {
display: none;
}
@media only screen and (max-width: 798px) {
.footer .footer-menu-wrap h6 > span {
display: inline-block;
transition: transform 0.3s linear;
perspective: 1000;
}
}
@media only screen and (min-width: 799px) {
.footer .toggle_content {
display: block !important; /* Override display: none from mobile view */
}
}
.footer a,
.footer a:visited {
color: #363636;
font-size: 14px;
}
.footer a:hover,
.footer a:active {
color: #B8973A;
}
.footer ul {
list-style: none;
margin: 0;
padding: 15px 0 0 0;
}
.footer ul li {
margin-bottom: 1em;
line-height: 1.1;
}
.footer form {
margin-bottom: 0;
}
.footer-menu-wrap {
text-align: left;
padding-top: 20px;
}
.page-landing .maps {
position: relative;
bottom: -7px;
}
.maps iframe {
pointer-events: none;
display: block;
}
.map__placeholder img {
object-fit: cover;
}
.newsletter form {
margin-bottom: 0;
}
.footer_credits {
margin-top: 10px;
border-top: 1px solid #D4C4AF;
}
.payment_methods {
margin: 10px 0 6px 0;
padding-top: 10px;
}
@media only screen and (min-width: 799px) {
.payment_methods {
float: right;
text-align: right;
}
}
.payment_methods svg {
padding-right: 4px;
height: 30px;
width: 48px;
}
.payment_methods svg:last-of-type {
padding-right: 0px;
}
.credits {
text-align: left;
padding-top: 20px;
}
@media only screen and (min-width: 799px) {
.credits {
float: left;
}
}
/* Currency / language switcher in footer */
@media only screen and (max-width: 798px) {
.footer-menu__disclosure {
justify-content: flex-start;
}
}
.footer-menu__disclosure .selectors-form__item:last-of-type .disclosure__toggle {
margin-right: 0;
}
.footer-menu__disclosure .disclosure {
padding-top: 16px;
margin-top: -8px;
min-height: 44px;
}
.footer-menu__disclosure .disclosure__toggle {
display: flex;
align-items: center;
color: #333333;
padding: 0 10px;
background-color: white;
color: #333333;
font-size: 16px;
font-family: "EB Garamond", serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
text-align: left;
padding: 10px;
}
.footer-menu__disclosure .disclosure__toggle.is-clicked {
color: #333333;
}
.footer-menu__disclosure .disclosure__toggle.is-clicked:focus {
color: #333333;
}
.footer-menu__disclosure .disclosure-list {
background-color: white;
padding-top: 0;
}
.footer-menu__disclosure .disclosure-list__item {
margin-bottom: 0;
}
.footer-menu__disclosure button.disclosure__button {
color: #333333;
font-size: 16px;
font-family: "EB Garamond", serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
}
.footer-menu__disclosure button.disclosure__button:hover, .footer-menu__disclosure button.disclosure__button[aria-current=true] {
opacity: 0.5;
}
h6 span,
h4 span,
.sublink span {
transition: transform 0.3s linear;
perspective: 1000;
}
.footer-menu-wrap,
#mobile_menu,
.sidebar {
transform: translate3d(0, 0, 0);
}
.footer-menu-wrap span.active,
.footer-menu-wrap .active > .icon-down-arrow,
#mobile_menu span.active,
#mobile_menu .active > .icon-down-arrow,
.sidebar span.active,
.sidebar .active > .icon-down-arrow {
transform: rotateX(180deg);
}
.sidebar span.menu-toggle {
float: right;
display: inline-block;
cursor: pointer;
padding: 0 6px 0 6px;
margin-right: 0;
transition: transform 0.3s linear;
perspective: 1000;
transform: none;
}
.sidebar span.menu-toggle.active {
transform: rotateX(180deg);
}
/* Footer and mobile menu accordion (mobile only) */
@media only screen and (max-width: 798px) {
.footer-menu-wrap h6,
.sidebar h6,
#mobile_menu h6 {
padding-top: 8px;
cursor: pointer;
border-top: 1px solid #B8973A;
margin-top: 0;
}
.footer-menu-wrap h6 span,
.footer-menu-wrap h4 span,
.footer-menu-wrap .sublink span,
.sidebar h6 span,
.sidebar h4 span,
.sidebar .sublink span,
#mobile_menu h6 span,
#mobile_menu h4 span,
#mobile_menu .sublink span {
display: inline-block;
transition: transform 0.3s linear;
perspective: 1000;
}
.footer-menu-wrap .columns > ul,
.sidebar .columns > ul,
#mobile_menu .columns > ul {
display: none;
padding-left: 20px;
}
.footer-menu-wrap .columns > ul li,
.sidebar .columns > ul li,
#mobile_menu .columns > ul li {
line-height: 1.7;
}
.toggle_content {
display: none;
padding: 0 20px;
}
}
@media only screen and (min-width: 799px) {
h4.toggle {
pointer-events: none;
}
.footer-menu-wrap h6 {
pointer-events: none;
}
.footer-menu-wrap .columns > ul {
/* Required to overwrite inline display:none from createAccordion(); */
display: block !important;
}
}
/* Promo banner */
.header .promo-banner a,
.header .promo-banner a:visited a:hover,
#header .promo-banner a,
#header .promo-banner a:visited a:hover {
color: #333333;
}
.promo-banner {
background-color: #e6e6e6;
text-align: center;
color: #333333;
font-size: 12px;
position: relative;
width: 100%;
height: 0;
line-height: 0;
z-index: 5000;
top: 0;
transition: all 0.3s linear;
overflow: hidden;
}
.promo-banner .promo-banner__content {
margin: 0px auto;
padding: 0 1.5rem;
}
@media only screen and (max-width: 798px) {
.promo-banner .promo-banner__content {
font-size: 10px;
max-height: 50px;
}
}
.promo-banner p {
margin-bottom: 0;
display: inline;
line-height: 1;
}
.promo-banner .promo-banner__close {
position: absolute;
top: 0;
right: 0;
display: block;
overflow: visible;
width: 35px;
height: 35px;
margin: 0;
padding: 0;
cursor: pointer;
text-decoration: none;
color: #333333;
border: 0;
outline: 0;
background: transparent;
z-index: 1000;
}
.promo-banner .promo-banner__close:before {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
font-size: 20px;
line-height: 30px;
position: absolute;
top: 0;
left: 0;
display: block;
width: 35px;
content: "\00D7";
text-align: center;
}
.promo-banner--show .promo-banner {
transition: all 0s linear;
height: auto;
min-height: 30px;
line-height: 1.1;
display: flex;
align-items: center;
}
.top-bar {
padding-top: 0;
position: relative;
transition: padding-top 0.3s linear;
}
@media only screen and (max-width: 480px) {
.top-bar {
padding-top: 0;
}
}
/* #Plyr
================================================== */
@keyframes plyr-progress {
to {
background-position: 25px 0;
}
}
@keyframes plyr-popup {
0% {
opacity: 0.5;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes plyr-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.plyr {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
direction: ltr;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
font-variant-numeric: tabular-nums;
font-weight: 500;
line-height: 1.7;
max-width: 100%;
min-width: 50px;
position: relative;
text-shadow: none;
transition: box-shadow 0.3s ease;
}
.plyr audio, .plyr video {
border-radius: inherit;
height: auto;
vertical-align: middle;
width: 100%;
}
.plyr button {
font: inherit;
line-height: inherit;
width: auto;
}
.plyr:focus {
outline: 0;
}
.plyr--full-ui {
box-sizing: border-box;
}
.plyr--full-ui *, .plyr--full-ui ::after, .plyr--full-ui ::before {
box-sizing: inherit;
}
.plyr--full-ui a, .plyr--full-ui button, .plyr--full-ui input, .plyr--full-ui label {
touch-action: manipulation;
}
.plyr__badge {
background: #4a5764;
border-radius: 2px;
color: #fff;
font-size: 9px;
line-height: 1;
padding: 3px 4px;
}
.plyr--full-ui ::-webkit-media-text-track-container {
display: none;
}
.plyr__captions {
animation: plyr-fade-in 0.3s ease;
bottom: 0;
color: #fff;
display: none;
font-size: 14px;
left: 0;
padding: 10px;
position: absolute;
text-align: center;
transition: transform 0.4s ease-in-out;
width: 100%;
}
.plyr__captions .plyr__caption {
background: rgba(0, 0, 0, 0.8);
border-radius: 2px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
}
.plyr__captions .plyr__caption div {
display: inline;
}
.plyr__captions span:empty {
display: none;
}
@media (min-width: 480px) {
.plyr__captions {
font-size: 16px;
padding: 20px;
}
}
@media (min-width: 768px) {
.plyr__captions {
font-size: 18px;
}
}
.plyr--captions-active .plyr__captions {
display: block;
}
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(-40px);
}
.plyr__control {
background: 0 0;
border: 0;
border-radius: 3px;
color: inherit;
cursor: pointer;
flex-shrink: 0;
overflow: visible;
padding: 7px;
position: relative;
transition: all 0.3s ease;
}
.plyr__control svg {
display: block;
fill: currentColor;
height: 18px;
pointer-events: none;
width: 18px;
}
.plyr__control:focus {
outline: 0;
}
.plyr__control.plyr__tab-focus {
box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
outline: 0;
}
a.plyr__control {
text-decoration: none;
}
a.plyr__control::after, a.plyr__control::before {
display: none;
}
.plyr__control.plyr__control--pressed .icon--not-pressed, .plyr__control.plyr__control--pressed .label--not-pressed, .plyr__control:not(.plyr__control--pressed) .icon--pressed, .plyr__control:not(.plyr__control--pressed) .label--pressed {
display: none;
}
.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
background: #1A1A2E;
color: #fff;
}
.plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true] {
background: #1A1A2E;
color: #fff;
}
.plyr__control--overlaid {
background: rgba(0, 179, 255, 0.8);
border: 0;
border-radius: 100%;
color: #fff;
display: none;
left: 50%;
padding: 15px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.plyr__control--overlaid svg {
left: 2px;
position: relative;
}
.plyr__control--overlaid:focus, .plyr__control--overlaid:hover {
background: #1A1A2E;
}
.plyr--playing .plyr__control--overlaid {
opacity: 0;
visibility: hidden;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
display: block;
}
.plyr--full-ui ::-webkit-media-controls {
display: none;
}
.plyr__controls {
align-items: center;
display: flex;
justify-content: flex-end;
text-align: center;
}
.plyr__controls .plyr__progress__container {
flex: 1;
min-width: 0;
}
.plyr__controls .plyr__controls__item {
margin-left: 2.5px;
}
.plyr__controls .plyr__controls__item:first-child {
margin-left: 0;
margin-right: auto;
}
.plyr__controls .plyr__controls__item.plyr__progress__container {
padding-left: 2.5px;
}
.plyr__controls .plyr__controls__item.plyr__time {
padding: 0 5px;
}
.plyr__controls .plyr__controls__item.plyr__progress__container:first-child, .plyr__controls .plyr__controls__item.plyr__time + .plyr__time, .plyr__controls .plyr__controls__item.plyr__time:first-child {
padding-left: 0;
}
.plyr__controls .plyr__controls__item.plyr__volume {
padding-right: 5px;
}
.plyr__controls .plyr__controls__item.plyr__volume:first-child {
padding-right: 0;
}
.plyr__controls:empty {
display: none;
}
.plyr--audio .plyr__controls {
background: #fff;
border-radius: inherit;
color: #4a5764;
padding: 10px;
}
.plyr--video .plyr__controls {
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
bottom: 0;
color: #fff;
left: 0;
padding: 20px 5px 5px;
position: absolute;
right: 0;
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
z-index: 3;
}
@media (min-width: 480px) {
.plyr--video .plyr__controls {
padding: 10px;
}
}
.plyr--video.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
transform: translateY(100%);
}
.plyr [data-plyr=airplay], .plyr [data-plyr=captions], .plyr [data-plyr=fullscreen], .plyr [data-plyr=pip] {
display: none;
}
.plyr--airplay-supported [data-plyr=airplay], .plyr--captions-enabled [data-plyr=captions], .plyr--fullscreen-enabled [data-plyr=fullscreen], .plyr--pip-supported [data-plyr=pip] {
display: inline-block;
}
.plyr__menu {
display: flex;
position: relative;
}
.plyr__menu .plyr__control svg {
transition: transform 0.3s ease;
}
.plyr__menu .plyr__control[aria-expanded=true] svg {
transform: rotate(90deg);
}
.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
display: none;
}
.plyr__menu__container {
animation: plyr-popup 0.2s ease;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
bottom: 100%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
color: #4a5764;
font-size: 16px;
margin-bottom: 10px;
position: absolute;
right: -3px;
text-align: left;
white-space: nowrap;
z-index: 3;
}
.plyr__menu__container > div {
overflow: hidden;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.plyr__menu__container::after {
border: 4px solid transparent;
border-top-color: rgba(255, 255, 255, 0.9);
content: "";
height: 0;
position: absolute;
right: 15px;
top: 100%;
width: 0;
}
.plyr__menu__container [role=menu] {
padding: 7px;
}
.plyr__menu__container [role=menuitem], .plyr__menu__container [role=menuitemradio] {
margin-top: 2px;
}
.plyr__menu__container [role=menuitem]:first-child, .plyr__menu__container [role=menuitemradio]:first-child {
margin-top: 0;
}
.plyr__menu__container .plyr__control {
align-items: center;
color: #4a5764;
display: flex;
font-size: 14px;
padding: 4px 11px;
-webkit-user-select: none;
user-select: none;
width: 100%;
}
.plyr__menu__container .plyr__control > span {
align-items: inherit;
display: flex;
width: 100%;
}
.plyr__menu__container .plyr__control::after {
border: 4px solid transparent;
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.plyr__menu__container .plyr__control--forward {
padding-right: 28px;
}
.plyr__menu__container .plyr__control--forward::after {
border-left-color: rgba(74, 87, 100, 0.8);
right: 5px;
}
.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after, .plyr__menu__container .plyr__control--forward:hover::after {
border-left-color: currentColor;
}
.plyr__menu__container .plyr__control--back {
font-weight: 500;
margin: 7px;
margin-bottom: 3px;
padding-left: 28px;
position: relative;
width: calc(100% - 14px);
}
.plyr__menu__container .plyr__control--back::after {
border-right-color: rgba(74, 87, 100, 0.8);
left: 7px;
}
.plyr__menu__container .plyr__control--back::before {
background: #c1c9d1;
box-shadow: 0 1px 0 #fff;
content: "";
height: 1px;
left: 0;
margin-top: 4px;
overflow: hidden;
position: absolute;
right: 0;
top: 100%;
}
.plyr__menu__container .plyr__control--back.plyr__tab-focus::after, .plyr__menu__container .plyr__control--back:hover::after {
border-right-color: currentColor;
}
.plyr__menu__container .plyr__control[role=menuitemradio] {
padding-left: 7px;
}
.plyr__menu__container .plyr__control[role=menuitemradio]::after, .plyr__menu__container .plyr__control[role=menuitemradio]::before {
border-radius: 100%;
}
.plyr__menu__container .plyr__control[role=menuitemradio]::before {
background: rgba(0, 0, 0, 0.1);
content: "";
display: block;
flex-shrink: 0;
height: 16px;
margin-right: 10px;
transition: all 0.3s ease;
width: 16px;
}
.plyr__menu__container .plyr__control[role=menuitemradio]::after {
background: #fff;
border: 0;
height: 6px;
left: 12px;
opacity: 0;
top: 50%;
transform: translateY(-50%) scale(0);
transition: transform 0.3s ease, opacity 0.3s ease;
width: 6px;
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before {
background: #1A1A2E;
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::after {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus::before, .plyr__menu__container .plyr__control[role=menuitemradio]:hover::before {
background: rgba(0, 0, 0, 0.1);
}
.plyr__menu__container .plyr__menu__value {
align-items: center;
display: flex;
margin-left: auto;
margin-right: -5px;
overflow: hidden;
padding-left: 25px;
pointer-events: none;
}
.plyr--full-ui input[type=range] {
-webkit-appearance: none;
background: 0 0;
border: 0;
border-radius: 26px;
color: #1A1A2E;
display: block;
height: 19px;
margin: 0;
padding: 0;
transition: box-shadow 0.3s ease;
width: 100%;
}
.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
background: 0 0;
border: 0;
border-radius: 2.5px;
height: 5px;
-webkit-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
-webkit-user-select: none;
user-select: none;
background-image: linear-gradient(to right, currentColor var(--value, 0), transparent var(--value, 0));
}
.plyr--full-ui input[type=range]::-webkit-slider-thumb {
background: #fff;
border: 0;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2);
height: 13px;
position: relative;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 13px;
-webkit-appearance: none;
margin-top: -4px;
}
.plyr--full-ui input[type=range]::-moz-range-track {
background: 0 0;
border: 0;
border-radius: 2.5px;
height: 5px;
-moz-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
user-select: none;
}
.plyr--full-ui input[type=range]::-moz-range-thumb {
background: #fff;
border: 0;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2);
height: 13px;
position: relative;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 13px;
}
.plyr--full-ui input[type=range]::-moz-range-progress {
background: currentColor;
border-radius: 2.5px;
height: 5px;
}
.plyr--full-ui input[type=range]::-ms-track {
background: 0 0;
border: 0;
border-radius: 2.5px;
height: 5px;
-ms-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
user-select: none;
color: transparent;
}
.plyr--full-ui input[type=range]::-ms-fill-upper {
background: 0 0;
border: 0;
border-radius: 2.5px;
height: 5px;
-ms-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
user-select: none;
}
.plyr--full-ui input[type=range]::-ms-fill-lower {
background: 0 0;
border: 0;
border-radius: 2.5px;
height: 5px;
-ms-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
user-select: none;
background: currentColor;
}
.plyr--full-ui input[type=range]::-ms-thumb {
background: #fff;
border: 0;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2);
height: 13px;
position: relative;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 13px;
margin-top: 0;
}
.plyr--full-ui input[type=range]::-ms-tooltip {
display: none;
}
.plyr--full-ui input[type=range]:focus {
outline: 0;
}
.plyr--full-ui input[type=range]::-moz-focus-outer {
border: 0;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
outline: 0;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
outline: 0;
}
.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 5px rgba(0, 179, 255, 0.5);
outline: 0;
}
.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
background-color: rgba(255, 255, 255, 0.25);
}
.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
background-color: rgba(255, 255, 255, 0.25);
}
.plyr--full-ui.plyr--video input[type=range]::-ms-track {
background-color: rgba(255, 255, 255, 0.25);
}
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
}
.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
}
.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
}
.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
background-color: rgba(193, 201, 209, 0.66);
}
.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
background-color: rgba(193, 201, 209, 0.66);
}
.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
background-color: rgba(193, 201, 209, 0.66);
}
.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(35, 41, 47, 0.2), 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.plyr__poster {
background-color: #000;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.2s ease;
width: 100%;
z-index: 1;
}
.plyr--stopped.plyr__poster-enabled .plyr__poster {
opacity: 1;
}
.plyr__time {
font-size: 14px;
}
.plyr__time + .plyr__time::before {
content: "\2113";
margin-right: 10px;
}
@media (max-width: 767px) {
.plyr__time + .plyr__time {
display: none;
}
}
.plyr--video .plyr__time {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.plyr__tooltip {
background: rgba(255, 255, 255, 0.9);
border-radius: 3px;
bottom: 100%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
color: #4a5764;
font-size: 14px;
font-weight: 500;
left: 50%;
line-height: 1.3;
margin-bottom: 10px;
opacity: 0;
padding: 5px 7.5px;
pointer-events: none;
position: absolute;
transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
white-space: nowrap;
z-index: 2;
}
.plyr__tooltip::before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(255, 255, 255, 0.9);
bottom: -4px;
content: "";
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
.plyr .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr .plyr__control:hover .plyr__tooltip, .plyr__tooltip--visible {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
.plyr .plyr__control:hover .plyr__tooltip {
z-index: 3;
}
.plyr__controls > .plyr__control:first-child .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
left: 0;
transform: translate(0, 10px) scale(0.8);
transform-origin: 0 100%;
}
.plyr__controls > .plyr__control:first-child .plyr__tooltip::before, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip::before {
left: 16px;
}
.plyr__controls > .plyr__control:last-child .plyr__tooltip {
left: auto;
right: 0;
transform: translate(0, 10px) scale(0.8);
transform-origin: 100% 100%;
}
.plyr__controls > .plyr__control:last-child .plyr__tooltip::before {
left: auto;
right: 16px;
transform: translateX(50%);
}
.plyr__controls > .plyr__control:first-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip--visible, .plyr__controls > .plyr__control:first-child + .plyr__control.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:first-child + .plyr__control:hover .plyr__tooltip, .plyr__controls > .plyr__control:first-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:first-child:hover .plyr__tooltip, .plyr__controls > .plyr__control:last-child .plyr__tooltip--visible, .plyr__controls > .plyr__control:last-child.plyr__tab-focus .plyr__tooltip, .plyr__controls > .plyr__control:last-child:hover .plyr__tooltip {
transform: translate(0, 0) scale(1);
}
.plyr--video {
background: #000;
overflow: hidden;
}
.plyr--video.plyr--menu-open {
overflow: visible;
}
.plyr__video-wrapper {
background: #000;
border-radius: inherit;
overflow: hidden;
position: relative;
z-index: 0;
}
.plyr__video-embed, .plyr__video-wrapper--fixed-ratio {
height: 0;
padding-bottom: 56.25%;
}
.plyr__video-embed iframe, .plyr__video-wrapper--fixed-ratio video {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
-webkit-user-select: none;
user-select: none;
width: 100%;
}
.plyr--full-ui .plyr__video-embed > .plyr__video-embed__container {
padding-bottom: 240%;
position: relative;
transform: translateY(-38.28125%);
}
.plyr__progress {
left: 6.5px;
margin-right: 13px;
position: relative;
}
.plyr__progress input[type=range], .plyr__progress__buffer {
margin-left: -6.5px;
margin-right: -6.5px;
width: calc(100% + 13px);
}
.plyr__progress input[type=range] {
position: relative;
z-index: 2;
}
.plyr__progress .plyr__tooltip {
font-size: 14px;
left: 0;
}
.plyr__progress__buffer {
-webkit-appearance: none;
background: 0 0;
border: 0;
border-radius: 100px;
height: 5px;
left: 0;
margin-top: -2.5px;
padding: 0;
position: absolute;
top: 50%;
}
.plyr__progress__buffer::-webkit-progress-bar {
background: 0 0;
}
.plyr__progress__buffer::-webkit-progress-value {
background: currentColor;
border-radius: 100px;
min-width: 5px;
-webkit-transition: width 0.2s ease;
transition: width 0.2s ease;
}
.plyr__progress__buffer::-moz-progress-bar {
background: currentColor;
border-radius: 100px;
min-width: 5px;
-moz-transition: width 0.2s ease;
transition: width 0.2s ease;
}
.plyr__progress__buffer::-ms-fill {
border-radius: 100px;
-ms-transition: width 0.2s ease;
transition: width 0.2s ease;
}
.plyr--video .plyr__progress__buffer {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
color: rgba(255, 255, 255, 0.25);
}
.plyr--audio .plyr__progress__buffer {
color: rgba(193, 201, 209, 0.66);
}
.plyr--loading .plyr__progress__buffer {
animation: plyr-progress 1s linear infinite;
background-image: linear-gradient(-45deg, rgba(35, 41, 47, 0.6) 25%, transparent 25%, transparent 50%, rgba(35, 41, 47, 0.6) 50%, rgba(35, 41, 47, 0.6) 75%, transparent 75%, transparent);
background-repeat: repeat-x;
background-size: 25px 25px;
color: transparent;
}
.plyr--video.plyr--loading .plyr__progress__buffer {
background-color: rgba(255, 255, 255, 0.25);
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
background-color: rgba(193, 201, 209, 0.66);
}
.plyr__volume {
align-items: center;
display: flex;
flex: 1;
position: relative;
}
.plyr__volume input[type=range] {
margin-left: 5px;
position: relative;
z-index: 2;
}
@media (min-width: 480px) {
.plyr__volume {
max-width: 90px;
}
}
@media (min-width: 768px) {
.plyr__volume {
max-width: 110px;
}
}
.plyr--is-ios .plyr__volume {
display: none !important;
}
.plyr--is-ios.plyr--vimeo [data-plyr=mute] {
display: none !important;
}
.plyr:-webkit-full-screen {
background: #000;
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
}
.plyr:fullscreen {
background: #000;
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
}
.plyr:-webkit-full-screen video {
height: 100%;
}
.plyr:fullscreen video {
height: 100%;
}
.plyr:-webkit-full-screen .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr:fullscreen .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr:-webkit-full-screen.plyr--hide-controls {
cursor: none;
}
.plyr:fullscreen.plyr--hide-controls {
cursor: none;
}
@media (min-width: 1024px) {
.plyr:-webkit-full-screen .plyr__captions {
font-size: 21px;
}
.plyr:fullscreen .plyr__captions {
font-size: 21px;
}
}
.plyr:-webkit-full-screen {
background: #000;
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
}
.plyr:-webkit-full-screen video {
height: 100%;
}
.plyr:-webkit-full-screen .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr:-webkit-full-screen.plyr--hide-controls {
cursor: none;
}
@media (min-width: 1024px) {
.plyr:-webkit-full-screen .plyr__captions {
font-size: 21px;
}
}
.plyr:-moz-full-screen {
background: #000;
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
}
.plyr:-moz-full-screen video {
height: 100%;
}
.plyr:-moz-full-screen .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr:-moz-full-screen.plyr--hide-controls {
cursor: none;
}
@media (min-width: 1024px) {
.plyr:-moz-full-screen .plyr__captions {
font-size: 21px;
}
}
.plyr:-ms-fullscreen {
background: #000;
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
}
.plyr:-ms-fullscreen video {
height: 100%;
}
.plyr:-ms-fullscreen .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr:-ms-fullscreen.plyr--hide-controls {
cursor: none;
}
@media (min-width: 1024px) {
.plyr:-ms-fullscreen .plyr__captions {
font-size: 21px;
}
}
.plyr--fullscreen-fallback {
background: #000;
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10000000;
}
.plyr--fullscreen-fallback video {
height: 100%;
}
.plyr--fullscreen-fallback .plyr__video-wrapper {
height: 100%;
position: static;
}
.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
display: block;
}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen + svg {
display: none;
}
.plyr--fullscreen-fallback.plyr--hide-controls {
cursor: none;
}
@media (min-width: 1024px) {
.plyr--fullscreen-fallback .plyr__captions {
font-size: 21px;
}
}
.plyr__ads {
border-radius: inherit;
bottom: 0;
cursor: pointer;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.plyr__ads > div, .plyr__ads > div iframe {
height: 100%;
position: absolute;
width: 100%;
}
.plyr__ads::after {
background: rgba(35, 41, 47, 0.8);
border-radius: 2px;
bottom: 10px;
color: #fff;
content: attr(data-badge-text);
font-size: 11px;
padding: 2px 6px;
pointer-events: none;
position: absolute;
right: 10px;
z-index: 3;
}
.plyr__ads::after:empty {
display: none;
}
.plyr__cues {
background: currentColor;
display: block;
height: 5px;
left: 0;
margin: -2.5px 0 0;
opacity: 0.8;
position: absolute;
top: 50%;
width: 3px;
z-index: 3;
}
.plyr__preview-thumb {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 3px;
bottom: 100%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
margin-bottom: 10px;
opacity: 0;
padding: 3px;
pointer-events: none;
position: absolute;
transform: translate(0, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
z-index: 2;
}
.plyr__preview-thumb--is-shown {
opacity: 1;
transform: translate(0, 0) scale(1);
}
.plyr__preview-thumb::before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(255, 255, 255, 0.9);
bottom: -4px;
content: "";
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
.plyr__preview-thumb__image-container {
background: #c1c9d1;
border-radius: 2px;
overflow: hidden;
position: relative;
z-index: 0;
}
.plyr__preview-thumb__image-container img {
height: 100%;
left: 0;
max-height: none;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
.plyr__preview-thumb__time-container {
bottom: 6px;
left: 0;
position: absolute;
right: 0;
white-space: nowrap;
z-index: 3;
}
.plyr__preview-thumb__time-container span {
background-color: rgba(0, 0, 0, 0.55);
border-radius: 2px;
color: #fff;
font-size: 14px;
padding: 3px 6px;
}
.plyr__preview-scrubbing {
bottom: 0;
filter: blur(1px);
height: 100%;
left: 0;
margin: auto;
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s ease;
width: 100%;
z-index: 1;
}
.plyr__preview-scrubbing--is-shown {
opacity: 1;
}
.plyr__preview-scrubbing img {
height: 100%;
left: 0;
max-height: none;
max-width: none;
object-fit: contain;
position: absolute;
top: 0;
width: 100%;
}
.plyr--no-transition {
transition: none !important;
}
.plyr__sr-only {
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
border: 0 !important;
height: 1px !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
}
.plyr [hidden] {
display: none !important;
}
/* #Model Viewer
================================================== */
.shopify-model-viewer-ui {
position: relative;
display: block;
cursor: pointer;
}
.shopify-model-viewer-ui model-viewer {
transform: translateZ(0);
z-index: 1;
}
.shopify-model-viewer-ui model-viewer.shopify-model-viewer-ui__disabled {
pointer-events: none;
}
.shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen model-viewer {
position: relative;
width: 100vw;
height: 100vh;
}
.shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--exit-fullscreen {
display: block;
}
.shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--enter-fullscreen {
display: none;
}
.shopify-model-viewer-ui.shopify-model-viewer-ui--desktop.shopify-model-viewer-ui--child-focused .shopify-model-viewer-ui__controls-area, .shopify-model-viewer-ui.shopify-model-viewer-ui--desktop:hover .shopify-model-viewer-ui__controls-area {
opacity: 1;
}
.shopify-model-viewer-ui:not(.shopify-model-viewer-ui--desktop) .shopify-model-viewer-ui__controls-area {
display: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
display: flex;
flex-direction: column;
background: #fff;
opacity: 0;
border: 1px solid rgba(0, 0, 0, 0.05);
position: absolute;
bottom: 10px;
right: 10px;
z-index: 1;
transition: opacity 0.1s linear;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area:not(.shopify-model-viewer-ui__controls-area--playing) {
display: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
color: #3a3a3a;
border-radius: 0;
border: none;
margin: 0;
cursor: pointer;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button:not(.focus-visible) {
outline: 0;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control {
padding: 0;
height: 44px;
width: 44px;
background: 0 0;
position: relative;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover {
color: rgba(0, 0, 0, 0.55);
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active {
color: rgba(0, 0, 0, 0.55);
background: rgba(0, 0, 0, 0.05);
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
position: absolute;
content: "";
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
width: 28px;
bottom: 0;
right: 8px;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon {
width: 44px;
height: 44px;
fill: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
background: #fff;
position: absolute;
border: 1px solid rgba(0, 0, 0, 0.05);
top: 50%;
left: 50%;
padding: 0;
transform: translate3d(-50%, -50%, 0);
height: 62px;
width: 62px;
z-index: 1;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover {
color: rgba(0, 0, 0, 0.55);
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__poster-control-icon {
width: 60px;
height: 60px;
z-index: 1;
fill: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon--exit-fullscreen {
display: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon--enter-fullscreen {
display: block;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__spritesheet {
display: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
/*! Flickity v2.0.10
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus {
outline: 0;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: grabbing;
}
.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: #fff;
background: hsla(0deg, 0%, 100%, 0.75);
cursor: pointer;
transform: translateY(-50%);
}
.flickity-prev-next-button:hover {
background: #fff;
}
.flickity-prev-next-button:focus {
outline: 0;
box-shadow: 0 0 0 5px #09f;
}
.flickity-prev-next-button:active {
opacity: 0.6;
}
.flickity-prev-next-button.previous {
left: 10px;
}
.flickity-prev-next-button.next {
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button:disabled {
opacity: 0.3;
cursor: auto;
}
.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow {
fill: #333;
}
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots {
direction: rtl;
}
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
opacity: 1;
}
.flickity-enabled {
position: relative;
overflow: hidden;
}
.flickity-enabled:focus {
outline: none;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
.flickity-button.flickity-prev-next-button.next:focus,
.flickity-button.flickity-prev-next-button.previous:focus {
opacity: 1;
}
/* Draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: grabbing;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
filter: alpha(opacity=50);
opacity: 0.5;
position: absolute;
top: 0;
bottom: 0;
width: 32px;
border: none;
background: white;
background: hsla(0deg, 0%, 100%, 0.75);
cursor: pointer;
border-radius: 0;
height: auto;
max-width: 11%;
transform: none;
}
.flickity-prev-next-button:hover {
background: white;
border: none;
}
.flickity-prev-next-button:focus {
outline: none;
}
.flickity-prev-next-button:hover, .flickity-prev-next-button:active {
filter: alpha(opacity=80);
opacity: 0.8;
}
.flickity-prev-next-button.previous {
left: -1px;
}
.flickity-prev-next-button.next {
right: -1px;
}
/* Right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: -1px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: -1px;
}
.flickity-prev-next-button:disabled {
filter: alpha(opacity=10); /* IE8 */
opacity: 0.1;
cursor: auto;
}
.flickity-prev-next-button svg {
top: 50%;
transform: translateY(-50.1%);
padding: 10px 0;
position: absolute;
left: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow {
fill: #000000;
}
/* Color & size if no SVG - IE8 and Android 2.3 */
.flickity-prev-next-button.no-svg {
color: #000000;
font-size: 26px;
}
/* Page dots */
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots {
direction: rtl;
}
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
filter: alpha(opacity=25); /* IE8 */
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
filter: alpha(opacity=100); /* IE8 */
opacity: 1;
}
/* Custom sliders */
.flickity-slider > li {
list-style-type: none;
width: 100%;
text-align: center;
}
/* General Flickity styling */
img[data-flickity-lazyload] {
width: auto;
}
.slideshow-transition--fade.flickity-enabled .flickity-slider {
transform: none !important;
}
.slideshow-transition--fade.flickity-enabled .gallery-cell {
left: 0 !important;
opacity: 0;
transition: opacity 0.5s ease-in-out;
z-index: -1;
}
.slideshow-transition--fade.flickity-enabled .gallery-cell.is-selected {
opacity: 1;
z-index: 0;
}
/* Gallery page */
.lightbox-gallery .gallery-cell {
width: 100%;
}
.lightbox-gallery .gallery-cell img {
width: auto;
max-height: 90vh;
max-width: 100%;
display: inline-block;
}
/* Product gallery */
.gallery-arrows--true .product_gallery .flickity-prev-next-button {
display: block;
}
.gallery-arrows--true .product_gallery .flickity-prev-next-button:hover {
opacity: 0.5;
}
/* Hidden for product gallery on collection page when product form style is dropdown */
.image__container .product_gallery .flickity-prev-next-button {
display: none;
}
.product_gallery {
margin-bottom: 30px;
position: relative;
opacity: 0;
transition: opacity 0.2s;
}
@media only screen and (max-width: 798px) {
.product_gallery {
margin-bottom: 30px;
}
}
@media only screen and (max-width: 480px) {
.product_gallery .flickity-page-dots {
bottom: 15px;
}
}
.product_gallery .gallery-cell {
width: 100%;
display: block;
margin-right: 10px;
position: relative;
}
.product_gallery.flickity-enabled {
opacity: 1;
}
.product_gallery img {
background-color: #ffffff;
}
.product_gallery.show-gallery-arrows--false .flickity-prev-next-button {
display: none;
}
@media only screen and (max-width: 798px) {
.product_gallery.show-gallery-arrows--false .flickity-prev-next-button {
display: block;
}
}
@media only screen and (max-width: 798px) {
.thumbnail .product_gallery {
margin-bottom: 0;
padding-bottom: 0;
}
}
.product_gallery_nav {
text-align: center;
margin-bottom: 30px;
}
.product_gallery_nav.product_gallery_nav--bottom-thumbnails .gallery-cell {
width: auto;
}
.product_gallery_nav.product_gallery_nav--bottom-thumbnails img {
height: 80px;
width: auto;
}
@media only screen and (max-width: 480px) {
.product_gallery_nav.product_gallery_nav--bottom-slider {
margin-bottom: 30px;
}
}
.product_gallery_nav.product_gallery_nav--bottom-slider .flickity-prev-next-button {
opacity: 1;
background: #ffffff;
}
.product_gallery_nav.product_gallery_nav--bottom-slider .gallery-cell {
display: flex;
width: auto;
opacity: 0.5;
margin-bottom: 0;
}
.product_gallery_nav.product_gallery_nav--bottom-slider .gallery-cell.is-nav-selected {
opacity: 1;
}
.product_gallery_nav.product_gallery_nav--bottom-slider .gallery-cell img {
width: auto;
height: 80px;
max-width: none;
min-width: 50px;
}
.product_gallery_nav .gallery-cell {
width: 20%;
margin: 0 10px 10px 0;
opacity: 0.7;
display: inline-block;
position: relative;
}
.product_gallery_nav .gallery-cell.is-nav-selected {
opacity: 1;
}
.product_gallery_nav .gallery-cell img {
cursor: pointer;
}
.product_gallery_nav--slider-enabled .gallery-cell {
opacity: 1;
}
.product_gallery .gallery-cell a {
cursor: zoom-in;
}
@media only screen and (min-width: 799px) {
.gallery-thumbnails--right .multi-image {
width: 83%;
float: left;
}
.gallery-thumbnails--right .product_gallery_nav {
width: 12%;
float: left;
margin-left: 2%;
}
.gallery-thumbnails--right .product_gallery_nav .gallery-cell {
width: 100%;
margin: 0 0 10px 0;
}
}
@media only screen and (min-width: 799px) {
.gallery-thumbnails--left .multi-image {
width: 83%;
float: right;
}
.gallery-thumbnails--left .product_gallery_nav {
width: 12%;
float: right;
margin-right: 2%;
}
.gallery-thumbnails--left .product_gallery_nav .gallery-cell {
width: 100%;
margin: 0 0 10px 0;
}
}
.gallery-wrap .flickity-viewport {
margin-top: 0;
}
.product-section__lightbox .zoom-wrap {
width: 100%;
height: 100%;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.product-section__lightbox .fancybox-content {
top: 50%;
transform: translateY(-50%) !important; /* Overwrite Fancybox transform */
}
}
/* Quick shop template */
.product-quickshop {
background-color: rgba(43, 46, 56, 0.9);
}
@media only screen and (max-width: 798px) {
.product-quickshop {
margin: 2rem;
}
}
.product-quickshop .shopify-section--quick-shop {
margin: 4rem auto;
max-width: 900px;
padding: 44px !important; /* Overwrite section padding */
background-color: #ffffff;
}.product-quickshop .shopify-section--quick-shop {
border: 5px solid #D4C4AF;
}.product-quickshop .shopify-section:not(.shopify-section--quick-shop) {
display: none;
}
/* Quick shop */
.js-quick-shop {
display: none;
width: 90%;
max-width: 900px;
cursor: pointer !important;
background-color: #ffffff;
}.js-quick-shop {
border: 5px solid #D4C4AF;
}.js-quick-shop .container,
.js-quick-shop .product_name {
color: #2b4189;
}
.js-quick-shop .fancybox-close-small svg path {
fill: #2b4189;
}
.js-quick-shop .fancybox-close-small svg path:hover {
fill: #2a4086;
}
/* Inline quick shop */
.quick-shop-style--inline .collection_swatches {
display: none;
}
.quick-shop-style--inline .inline-quickshop {
margin-top: 10px;
}
.quick-shop-style--inline .product-quantity-box,
.quick-shop-style--inline .items_left {
display: none;
}
.quick-shop-style--inline .purchase-details__spb--false {
margin-left: 0;
}
/* Purchase button sizing */
.quick-shop-style--inline.one-fourth .shopify-payment-button, .quick-shop-style--inline.one-fifth .shopify-payment-button, .quick-shop-style--inline.one-sixth .shopify-payment-button, .quick-shop-style--inline.one-seventh .shopify-payment-button, .quick-shop-style--inline.visible-5 .shopify-payment-button, .quick-shop-style--inline.visible-6 .shopify-payment-button, .quick-shop-style--inline.visible-7 .shopify-payment-button {
min-width: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
}
.quick-shop-style--inline.one-fourth .add_to_cart, .quick-shop-style--inline.one-fifth .add_to_cart, .quick-shop-style--inline.one-sixth .add_to_cart, .quick-shop-style--inline.one-seventh .add_to_cart, .quick-shop-style--inline.visible-5 .add_to_cart, .quick-shop-style--inline.visible-6 .add_to_cart, .quick-shop-style--inline.visible-7 .add_to_cart {
max-width: 100%;
}
/* Related Items Gallery */
.related-products--grid {
font-size: 0;
text-align: center;
}
.related-products--grid.container {
padding-top: 0;
}
.related-products--grid .product-list .thumbnail.column,
.related-products--grid .product-list .thumbnail.columns {
font-size: initial;
display: inline-block;
float: none;
vertical-align: top;
}
.related-products__title {
clear: both;
}
.title.slider-gallery {
padding-top: 40px;
}
@media only screen and (max-width: 480px) {
.title.slider-gallery {
padding-top: 0;
font-size: 1.5em;
}
}
.slider-gallery {
margin: 0 auto 40px;
}
.slider-gallery .gallery-cell {
display: inline-block;
margin-right: 10px;
text-align: center;
padding: 0;
margin-bottom: 0;
}
@media only screen and (max-width: 480px) {
.slider-gallery .gallery-cell {
padding: 0;
margin-right: 5px;
}
}
.slider-gallery .gallery-cell .product-details {
line-height: 1.2;
letter-spacing: 0;
}
@media only screen and (max-width: 798px) {
.slider-gallery .gallery-cell .product-details {
font-size: 3vw;
}
}
.slider-gallery .gallery-cell img {
display: block;
max-width: 100%;
}
.slider-gallery .gallery-cell-heading {
font-size: 0.8rem;
line-height: 1.2;
text-transform: none;
margin-top: 10px;
}
.slider-gallery .flickity-prev-next-button {
border-radius: 0;
opacity: 0;
width: 5%;
}
.slider-gallery:hover .flickity-prev-next-button {
opacity: 0.5;
}
.transparentBackground--false .dot {
background: #000000;
}
.transparentBackground--false .flickity-prev-next-button {
background: transparent;
}
.transparentBackground--false .flickity-prev-next-button .arrow {
opacity: 1;
fill: #000000;
}
.homepage-slideshow.transparentBackground--false:hover .flickity-prev-next-button,
.testimonial-slideshow.transparentBackground--false:hover .flickity-prev-next-button,
.product-slider.transparentBackground--false:hover .flickity-prev-next-button,
.slider-gallery.transparentBackground--false:hover .flickity-prev-next-button {
opacity: 1;
}
.homepage-slideshow.transparentBackground--false .flickity-page-dots .dot,
.testimonial-slideshow.transparentBackground--false .flickity-page-dots .dot,
.product-slider.transparentBackground--false .flickity-page-dots .dot,
.slider-gallery.transparentBackground--false .flickity-page-dots .dot {
opacity: 0.4;
}
.homepage-slideshow.transparentBackground--false .flickity-page-dots .dot.is-selected,
.testimonial-slideshow.transparentBackground--false .flickity-page-dots .dot.is-selected,
.product-slider.transparentBackground--false .flickity-page-dots .dot.is-selected,
.slider-gallery.transparentBackground--false .flickity-page-dots .dot.is-selected {
opacity: 1;
}
/* Lazyframe */
.lazyframe {
position: relative;
background-color: #ffffff;
background-repeat: no-repeat;
background-size: cover;
}
.lazyframe__title {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 15px 17px;
z-index: 3;
}
.lazyframe__title:after {
z-index: -1;
}
.lazyframe:hover {
cursor: pointer;
}
.lazyframe:before {
display: block;
content: "";
width: 100%;
padding-top: 100%;
}
.lazyframe[data-ratio="16:9"]:before {
padding-top: 56.25%;
}
.lazyframe[data-ratio="4:3"]:before {
padding-top: 75%;
}
.lazyframe[data-ratio="1:1"]:before {
padding-top: 100%;
}
.lazyframe iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5;
width: 100%;
height: 100%;
}
.lazyframe[data-vendor=youtube], .lazyframe[data-vendor=youtube_nocookie] {
background-color: #e52d27;
font-family: Roboto, Arial, Helvetica, sans-serif;
}
.lazyframe[data-vendor=youtube] .lazyframe__title, .lazyframe[data-vendor=youtube_nocookie] .lazyframe__title {
color: #eee;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size: 18px;
text-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 2px;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
transition: color 0.1s cubic-bezier(0.4, 0, 1, 1);
}
.lazyframe[data-vendor=youtube] .lazyframe__title:hover, .lazyframe[data-vendor=youtube_nocookie] .lazyframe__title:hover {
color: #fff;
}
.lazyframe[data-vendor=youtube] .lazyframe__title:before, .lazyframe[data-vendor=youtube_nocookie] .lazyframe__title:before {
content: "";
display: block;
background: linear-gradient(rgba(0, 0, 0, 0.2), transparent);
height: 98px;
width: 100%;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
-webkit-tap-highlight-color: transparent;
}
.lazyframe[data-vendor=youtube]:before, .lazyframe[data-vendor=youtube_nocookie]:before {
padding-top: 56.25%;
}
.lazyframe[data-vendor=youtube][data-ratio="16:9"]:before, .lazyframe[data-vendor=youtube_nocookie][data-ratio="16:9"]:before {
padding-top: 56.25%;
}
.lazyframe[data-vendor=youtube][data-ratio="4:3"]:before, .lazyframe[data-vendor=youtube_nocookie][data-ratio="4:3"]:before {
padding-top: 75%;
}
.lazyframe[data-vendor=youtube][data-ratio="1:1"]:before, .lazyframe[data-vendor=youtube_nocookie][data-ratio="1:1"]:before {
padding-top: 100%;
}
.lazyframe[data-vendor=youtube]:after, .lazyframe[data-vendor=youtube_nocookie]:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 68px;
height: 48px;
margin-left: -34px;
margin-top: -24px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU1LjcgNDQ2LjNjLTUzLjMuMy0xMDYuNi0uNC0xNTkuOC0zLjMtMTcuNC0xLTM0LjctMi41LTUwLjQtMTFDMzUgNDI2LjMgMjcgNDE4LjQgMjIgNDA3LjIgMTMuMiAzODguNiAxMC41IDM2OSA5IDM0OWMtMy40LTQxLjMtMy42LTgyLjYtMS44LTEyMy44IDEtMjIgMS42LTQ0IDYuOC02NS41IDItOC40IDUtMTYuNiA4LjgtMjQuNEMzMiAxMTcgNDggMTA4IDY3LjMgMTA0YzE2LjItMyAzMi44LTMgNDkuMy0zLjcgNTYtMi4zIDExMi0zLjUgMTY4LTMgNDMgLjYgODYuMiAxLjcgMTI5LjMgNCAxMy4yLjYgMjYuNi44IDM5LjMgNS41IDE3LjIgNi40IDMwIDE3LjIgMzcgMzQuNyA2LjYgMTYuOCA5LjIgMzQuMiAxMC42IDUyIDMuOCA0OC43IDQgOTcuMy43IDE0Ni0xIDE2LjMtMi4yIDMyLjctNi41IDQ4LjgtOS43IDM3LTMyLjggNTEuNS02Ni43IDUzLjgtMzYuMiAyLjUtNzIuNSAzLjgtMTA4LjggNC4zLTIxLjMuMi00Mi43IDAtNjQgMHpNMjAzLjIgMzQ0TDM0OCAyNjQuN2wtMTQ0LjgtNzkuM1YzNDR6IiBmaWxsPSIjIzFmMWYxZiIvPjxwYXRoIGQ9Ik0yMDMuMiAzNDRWMTg1LjVMMzQ4IDI2NC44IDIwMy4yIDM0NHoiIGZpbGw9IiNGRUZERkQiLz48L3N2Zz4=");
background-position: center center;
background-size: 100%;
background-repeat: no-repeat;
opacity: 0.81;
border: none;
z-index: 4;
}
.lazyframe[data-vendor=youtube]:hover:after, .lazyframe[data-vendor=youtube_nocookie]:hover:after {
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjU1LjcgNDQ2LjNjLTUzLjMuMy0xMDYuNi0uNC0xNTkuOC0zLjMtMTcuNC0xLTM0LjctMi41LTUwLjQtMTFDMzUgNDI2LjMgMjcgNDE4LjQgMjIgNDA3LjIgMTMuMiAzODguNiAxMC41IDM2OSA5IDM0OWMtMy40LTQxLjMtMy42LTgyLjYtMS44LTEyMy44IDEtMjIgMS42LTQ0IDYuOC02NS41IDItOC40IDUtMTYuNiA4LjgtMjQuNEMzMiAxMTcgNDggMTA4IDY3LjMgMTA0YzE2LjItMyAzMi44LTMgNDkuMy0zLjcgNTYtMi4zIDExMi0zLjUgMTY4LTMgNDMgLjYgODYuMiAxLjcgMTI5LjMgNCAxMy4yLjYgMjYuNi44IDM5LjMgNS41IDE3LjIgNi40IDMwIDE3LjIgMzcgMzQuNyA2LjYgMTYuOCA5LjIgMzQuMiAxMC42IDUyIDMuOCA0OC43IDQgOTcuMy43IDE0Ni0xIDE2LjMtMi4yIDMyLjctNi41IDQ4LjgtOS43IDM3LTMyLjggNTEuNS02Ni43IDUzLjgtMzYuMiAyLjUtNzIuNSAzLjgtMTA4LjggNC4zLTIxLjMuMi00Mi43IDAtNjQgMHpNMjAzLjIgMzQ0TDM0OCAyNjQuN2wtMTQ0LjgtNzkuM1YzNDR6IiBmaWxsPSIjREQyQzI4Ii8+PHBhdGggZD0iTTIwMy4yIDM0NFYxODUuNUwzNDggMjY0LjggMjAzLjIgMzQ0eiIgZmlsbD0iI0ZFRkRGRCIvPjwvc3ZnPg==");
opacity: 1;
}
.lazyframe[data-vendor=vimeo] {
background-color: #00adef;
}
.lazyframe[data-vendor=vimeo] .lazyframe__title {
font-family: "Helvetica Neue", Helvetica, Arial;
color: #00adef;
font-size: 20px;
font-weight: bold;
text-rendering: optimizeLegibility;
-webkit-user-select: none;
user-select: none;
-webkit-font-smoothing: auto;
-webkit-tap-highlight-color: transparent;
background-color: rgba(0, 0, 0, 0.5);
}
.lazyframe[data-vendor=vimeo]:before {
padding-top: 48.25%;
}
.lazyframe[data-vendor=vimeo][data-ratio="16:9"]:before {
padding-top: 56.25%;
}
.lazyframe[data-vendor=vimeo][data-ratio="4:3"]:before {
padding-top: 75%;
}
.lazyframe[data-vendor=vimeo][data-ratio="1:1"]:before {
padding-top: 100%;
}
.lazyframe[data-vendor=vimeo]:after {
content: "";
height: 40px;
width: 65px;
display: block;
position: absolute;
bottom: 10px;
left: 10px;
z-index: 3;
background-color: rgba(0, 0, 0, 0.5);
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgYmFzZVByb2ZpbGU9InRpbnkiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTcuNzY1IDE2Ljg5bDguNDctNC44OS04LjQ3LTQuODkiLz48L3N2Zz4=");
background-position: center center;
background-size: 100% 100%;
background-repeat: no-repeat;
border-radius: 5px;
position: relative;
}
.lazyframe[data-vendor=vimeo]:hover:after {
background-color: #00adef;
}
.lazyframe[data-vendor=vine] {
background-color: #00bf8f;
}
.lazyframe[data-vendor=vine] .lazyframe__title {
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 16px;
white-space: nowrap;
z-index: 3;
positon: relative;
}
.lazyframe[data-vendor=vine] .lazyframe__title:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 115px;
padding: 24px 70px 24px 24px;
background: linear-gradient(to top, rgba(23, 23, 23, 0) 0, rgba(23, 23, 23, 0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#b3171717", endColorstr="#00171717", GradientType=0 );
}
.lazyframe[data-vendor=vine]:before {
padding-top: 100%;
}
.lazyframe[data-vendor=vine][data-ratio="16:9"]:before {
padding-top: 56.25%;
}
.lazyframe[data-vendor=vine][data-ratio="4:3"]:before {
padding-top: 75%;
}
.lazyframe[data-vendor=vine][data-ratio="1:1"]:before {
padding-top: 100%;
}
.lazyframe[data-vendor=vine]:after {
content: "";
width: 60px;
height: 60px;
position: absolute;
left: 50%;
top: 50%;
z-index: 4;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzYiIGhlaWdodD0iMTM2IiB2aWV3Qm94PSIwIDAgMTM2IDEzNiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTU2IDQ0Yy0uNyAwLTEuNC4yLTIgLjUtMS4yLjgtMiAyLTIgMy41djQwYzAgMS40LjggMi44IDIgMy41LjYuMyAxLjMuNSAyIC41czEuNC0uMiAyLS41bDM0LjYtMjBjMS4zLS43IDItMiAyLTMuNSAwLTEuNC0uNy0yLjgtMi0zLjVMNTggNDQuNWMtLjYtLjMtMS4zLS41LTItLjV6Ii8+PC9zdmc+");
background-color: rgba(0, 0, 0, 0.5);
background-size: cover;
background-repeat: no-repeat;
margin-top: -30px;
margin-left: -30px;
border-radius: 50%;
}
.lazyframe[data-vendor=vine]:hover:after {
background-color: rgba(0, 0, 0, 0.75);
}
/*
* Remodal - v1.0.6
* Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
* http://vodkabears.github.io/remodal/
*
* Made by Ilya Makarov
* Under MIT License
*/
/* ==========================================================================
Remodal's necessary styles
========================================================================== */
/* Hide scroll bar */
html.remodal-is-locked {
overflow: hidden;
touch-action: none;
}
/* Anti FOUC */
.remodal,
[data-remodal-id] {
display: none;
}
/* Necessary styles of the overlay */
.remodal-overlay {
position: fixed;
z-index: 9999;
top: -5000px;
right: -5000px;
bottom: -5000px;
left: -5000px;
display: none;
}
/* Necessary styles of the wrapper */
.remodal-wrapper {
position: fixed;
z-index: 10000;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
overflow: auto;
text-align: center;
-webkit-overflow-scrolling: touch;
}
.remodal-wrapper:after {
display: inline-block;
height: 100%;
margin-left: -0.05em;
content: "";
}
/* Fix iPad, iPhone glitches */
.remodal-overlay,
.remodal-wrapper {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Necessary styles of the modal dialog */
.remodal {
position: relative;
outline: none;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.remodal img {
max-width: 100%;
}
.remodal-is-initialized {
display: inline-block; /* Disable Anti-FOUC */
}
/* ==========================================================================
Remodal's default mobile first theme
========================================================================== */
/* Default theme styles for the background */
.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
filter: blur(3px);
}
/* Default theme styles of the overlay */
.remodal-overlay {
background: rgba(43, 46, 56, 0.9);
}
.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.remodal-overlay.remodal-is-opening {
animation-name: remodal-overlay-opening-keyframes;
}
.remodal-overlay.remodal-is-closing {
animation-name: remodal-overlay-closing-keyframes;
}
/* Default theme styles of the wrapper */
.remodal-wrapper {
padding: 10px 10px 0;
}
/* Default theme styles of the modal dialog */
.remodal {
width: 100%;
margin-bottom: 10px;
padding: 35px;
transform: translate3d(0, 0, 0);
color: #2b4189;
background: #fff;
}
@media only screen and (max-width: 480px) {
.remodal {
overflow-x: scroll;
}
}
.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.remodal.remodal-is-opening {
animation-name: remodal-opening-keyframes;
}
.remodal.remodal-is-closing {
animation-name: remodal-closing-keyframes;
}
/* Vertical align of the modal dialog */
.remodal,
.remodal-wrapper:after {
vertical-align: middle;
}
/* Close button */
.remodal-close {
position: absolute;
top: 0;
right: 0;
display: block;
overflow: visible;
width: 35px;
height: 35px;
margin: 0;
padding: 0;
cursor: pointer;
transition: color 0.2s;
text-decoration: none;
color: #95979c;
border: 0;
outline: 0;
background: transparent;
z-index: 1000;
}
.remodal-close:hover,
.remodal-close:focus {
color: #2b2e38;
}
.remodal-close:before {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
font-size: 25px;
line-height: 35px;
position: absolute;
top: 0;
left: 0;
display: block;
width: 35px;
content: "\00D7";
text-align: center;
}
/* Dialog buttons */
.remodal-confirm,
.remodal-cancel {
font: inherit;
display: inline-block;
overflow: visible;
min-width: 110px;
margin: 0;
padding: 12px 0;
cursor: pointer;
transition: background 0.2s;
text-align: center;
vertical-align: middle;
text-decoration: none;
border: 0;
outline: 0;
}
.remodal-confirm {
color: #fff;
background: #81c784;
}
.remodal-confirm:hover,
.remodal-confirm:focus {
background: #66bb6a;
}
.remodal-cancel {
color: #fff;
background: #e57373;
}
.remodal-cancel:hover,
.remodal-cancel:focus {
background: #ef5350;
}
/* Remove inner padding and border in Firefox 4+ for the button tag. */
.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {
padding: 0;
border: 0;
}
/* Keyframes
========================================================================== */
@keyframes remodal-opening-keyframes {
from {
transform: scale(1.05);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
@keyframes remodal-closing-keyframes {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0.95);
opacity: 0;
}
}
@keyframes remodal-overlay-opening-keyframes {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes remodal-overlay-closing-keyframes {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
#contact_form input.newsletter-form__sign-up[type=submit] {
margin-left: 0;
margin-bottom: 1.5em;
width: 100%;
}
input.contact_email[type=email] {
width: 100%;
}
.collection_menu {
display: none;
}
h1.collection_title_tags,
div.collection_title_tags {
border-right: 0;
margin-right: 0;
padding-right: 0;
}
.newsletter .input-row input {
margin: 5px 0px;
}
input.newsletter-form__sign-up {
margin: 0px;
}
.newsletter-both-names--true input.firstName {
margin-right: 5px;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 799px) and (max-width: 959px) {
.nav a,
.nav a:visited,
.menu a:hover,
.nav a:active,
.nav a:focus {
font-size: 10px;
}
.menu a,
.menu a:visited,
.menu a:hover,
.menu a:active,
.menu a:focus {
font-size: 10px;
}
.menu li,
#header span.menu_title,
.menu a span {
padding-left: 2px;
padding-right: 2px;
}
.menu li.search-container {
display: none;
}
.top-bar .menu li {
padding-left: 5px;
padding-right: 5px;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 798px) {
.article_image {
padding-bottom: 0;
}
.sidebar__content {
border: 0;
padding: 0;
}
.nav_arrows {
float: none;
text-align: center;
}
.nav_arrows .prev {
float: left;
}
.nav_arrows .next {
float: right;
}
#header .top-bar a.mobile_logo {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 18px;
line-height: 34px;
z-index: 5;
width: 50%;
height: auto;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
#header a.mobile_logo img {
width: auto;
max-width: 150px;
max-height: 30px;
}
.payment_methods {
text-align: center;
float: none;
display: block;
}
.credits {
float: none;
display: block;
text-align: center;
}.is-absolute {
top: 0px !important;
}
.blog_filter {
margin-top: 1em;
width: 100% !important;
}
.section_select {
text-align: center;
}
.flex-control-nav {
bottom: 10px;
}
.featured_links a span {
font-size: 10px;
}
.or {
width: 100%;
display: inline-block;
padding-left: 0;
padding-bottom: 5px;
}
.mobile_hidden {
display: none !important;
}
table tr.order_summary td.label {
text-align: left;
}
.featured_text {
font-size: 16px;
line-height: 1.7em;
}
#header {
display: block;
}
.header {
display: none;
}
h4.toggle {
cursor: pointer;
}
.toggle span {
display: block;
}
select {
width: 100%;
margin-left: 0;
}
.newsletter-form__sign-up,
input[type=submit],
input[type=reset],
input[type=button] {
margin-left: 0;
width: 100%;
outline: 0;
}
.credits_right {
text-align: left;
}
.title_column {
float: left;
}
.mobile_only,
.container div.mobile_only {
display: block;
}
span.mobile_only {
display: inline;
}
.price_total {
text-align: right;
}
.price_total_text {
display: block;
}
.update_subtotal,
.price_total,
.remove_column,
.checkout_table_header {
display: none;
}
.mobile_right {
text-align: right;
}
.quick_shop {
display: none !important;
}
.cart_price {
display: block;
margin-bottom: 0;
}
table tr th,
table tr td {
padding: 2px;
}
.multiple_product_images {
display: none;
}
.headline {
font-size: 1.3em;
line-height: 1.2;
position: relative;
}
p.subtitle {
font-size: 1.1em;
line-height: 1.2;
position: relative;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (max-width: 798px) {
.mobile_hidden {
display: none !important;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 480px) {
h1,
h2,
h3,
h4,
h5,
h6,
.collection_title,
.empty_cart {
font-size: 110%;
line-height: 1.5em;
}
h1,
h1.home,
.title a,
h2 {
padding: 0;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 1024px) {
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
}
@font-face {
font-family: "turbo";
src: url(//www.hattongardenbespokejewellery.com/cdn/shop/t/150/assets/turbo.eot?v=8031775066987996871776936398);
src: url(//www.hattongardenbespokejewellery.com/cdn/shop/t/150/assets/turbo.eot?v=8031775066987996871776936398) format("embedded-opentype"), url(//www.hattongardenbespokejewellery.com/cdn/shop/t/150/assets/turbo.woff?v=120982821278190993901776936398) format("woff"), url(//www.hattongardenbespokejewellery.com/cdn/shop/t/150/assets/turbo.ttf?v=40378865674909127311776936398) format("truetype"), url(//www.hattongardenbespokejewellery.com/cdn/shop/t/150/assets/turbo.svg?v=112470159262165616401776936398) format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
[class^=icon-]:before,
[class*=" icon-"]:before {
font-family: "turbo";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: 0.2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: 0.15em;
}
/* Font icons can be updated using icomoon.io, font metadata is within selection.json file in the root of the theme */
.icon-bag:before {
content: "\e905";
}
.icon-cart:before {
content: "\e906";
}
.icon-check:before {
content: "\e907";
}
.icon-cross:before {
content: "\e908";
}
.icon-up-arrow:before {
content: "\e91a";
}
.icon-down-arrow:before {
content: "\e909";
}
.icon-left-arrow:before {
content: "\e90e";
}
.icon-right-arrow:before {
content: "\e915";
margin-right: 0;
}
.icon-plus:before {
content: "\e914";
}
.icon-minus:before {
content: "\e911";
}
.icon-menu:before {
content: "\e910";
}
.icon-phone:before {
content: "\e912";
}
.icon-search:before {
content: "\e917";
}
.icon-zoom:before {
content: "\e987";
}
.icon-lock:before {
content: "\e919";
color: #ffffff;
}
.icon-user:before {
content: "\e91b";
}
.icon-behance:before {
content: "\eaa8";
}
.icon-clubhouse:before {
content: "\e91c";
}
.icon-discord:before {
content: "\e902";
}
.icon-dribbble:before {
content: "\eaa7";
}
.icon-email:before,
.icon-mail-share:before {
content: "\e90a";
}
.icon-facebook:before,
.icon-facebook-share:before {
content: "\ea90";
}
.icon-flickr:before {
content: "\eaa3";
}
.icon-houzz:before {
content: "\e90d";
}
.icon-instagram:before {
content: "\e913";
}
.icon-kickstarter:before {
content: "\e901";
}
.icon-linkedin:before {
content: "\eaca";
}
.icon-medium:before {
content: "\e900";
}
.icon-messenger:before {
content: "\e903";
}
.icon-opensea:before {
content: "\e91d";
}
.icon-pinterest:before,
.icon-pinterest-share:before {
content: "\e90b";
}
.icon-reddit:before {
content: "\eac6";
}
.icon-rss:before {
content: "\e90c";
}
.icon-snapchat:before {
content: "\e90f";
}
.icon-spotify:before {
content: "\ea94";
}
.icon-tiktok:before {
content: "\e904";
}
.icon-tumblr:before {
content: "\eab9";
}
.icon-twitch:before {
content: "\ea9f";
}
.icon-twitter:before,
.icon-twitter-share:before {
content: "\ea96";
}
.icon-vimeo:before {
content: "\e916";
}
.icon-whatsapp:before {
content: "\ea93";
}
.icon-youtube:before {
content: "\e918";
}
span.icon-down-arrow {
padding: 0 !important;
font-size: 12px !important;
}
form.search__form,
.search__form input {
padding-top: 0;
margin-bottom: 0;
position: relative;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
.search__form input,
.search__form input:active,
.search__form input:focus {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
/* 16px minimum prevents iOS Safari auto-zoom on focus. Do not reduce. */
font-size: 16px;
letter-spacing: 1px;
color: #f7f7f7;
background-color: transparent;
padding-right: 35px;
border-color: #f7f7f7;
}.feature_image .search__form input,
.feature_image .search__form input:active,
.feature_image .search__form input:focus {
color: #ffffff;
border-color: #ffffff;
}
.feature_image .search__form input::-webkit-input-placeholder,
.feature_image .search__form input:active::-webkit-input-placeholder,
.feature_image .search__form input:focus::-webkit-input-placeholder {
color: #ffffff;
}
.feature_image .search__form input::-moz-placeholder,
.feature_image .search__form input:active::-moz-placeholder,
.feature_image .search__form input:focus::-moz-placeholder {
color: #ffffff;
}
.feature_image .search__form input:-ms-input-placeholder,
.feature_image .search__form input:active:-ms-input-placeholder,
.feature_image .search__form input:focus:-ms-input-placeholder {
color: #ffffff;
}
.feature_image .search-submit {
color: #ffffff;
}
.header_search_form {
width: 60%;
margin: 0 auto 30px auto;
padding: 30px 0 0 0;
position: relative;
border-bottom: solid 1px #f7f7f7;
}
@media only screen and (max-width: 480px) {
.header_search_form {
width: 90%;
margin: 30px auto;
padding: 0;
}
}
.header_search_form input,
.header_search_form input:focus,
.header_search_form input:active {
background-color: transparent;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
color: #f7f7f7;
letter-spacing: 1px;
border: none;
font-size: 36px;
line-height: 36px;
}
@media only screen and (max-width: 480px) {
.header_search_form input,
.header_search_form input:focus,
.header_search_form input:active {
font-size: 22px;
line-height: 22px;
margin-bottom: 0px;
}
}
.header_search_form .search-submit {
top: 38px;
font-size: 30px;
}
@media only screen and (max-width: 480px) {
.header_search_form .search-submit {
top: 50%;
position: absolute;
transform: translateY(-50%);
font-size: 20px;
}
}
.feature_image .search__form input,
.feature_image .search__form input:active,
.feature_image .search__form input:focus {
color: #ffffff;
border: 1px solid #ffffff;
}
.feature_image .search__form input::-webkit-input-placeholder {
color: #ffffff;
}
.feature_image .search__form input:-moz-placeholder { /* Firefox 18- */
color: #ffffff;
}
.feature_image .search__form input::-moz-placeholder { /* Firefox 19+ */
color: #ffffff;
}
.feature_image .search__form input:-ms-input-placeholder {
color: #ffffff;
}
.search__form input::-webkit-input-placeholder {
color: #f7f7f7;
}
.search__form input:-moz-placeholder { /* Firefox 18- */
color: #f7f7f7;
}
.search__form input::-moz-placeholder { /* Firefox 19+ */
color: #f7f7f7;
}
.search__form input:-ms-input-placeholder {
color: #f7f7f7;
}
.search__form input:focus::-webkit-input-placeholder {
color: #D4B862;
}
.search__form input:focus:-moz-placeholder { /* Firefox 18- */
color: #D4B862;
}
.search__form input:focus::-moz-placeholder { /* Firefox 19+ */
color: #D4B862;
}
.search__form input:focus:-ms-input-placeholder {
color: #D4B862;
}
.feature_image .search__form input,
.feature_image .search__form input:active,
.feature_image .search__form input:focus {
color: #ffffff;
border: 1px solid #ffffff;
}
.feature_image .search__form input::-webkit-input-placeholder {
color: #ffffff;
}
.feature_image .search__form input:-moz-placeholder { /* Firefox 18- */
color: #ffffff;
}
.feature_image .search__form input::-moz-placeholder { /* Firefox 19+ */
color: #ffffff;
}
.feature_image .search__form input:-ms-input-placeholder {
color: #ffffff;
}
.search-submit {
position: absolute;
z-index: 1000;
color: #f7f7f7;
font-size: 20px;
top: 9px;
right: 7px;
cursor: pointer;
}
.search-results li.item-result:hover {
background: rgba(184, 151, 58, 0.5);
}
.feature_image .search-submit {
color: #ffffff;
}
.blog_search .search-submit {
color: #333333;
top: 10px;
right: 8px;
z-index: 1;
}
.social_icons {
margin-left: 0;
margin-top: 0;
}
.social_icons li {
display: inline;
padding-right: 2px;
}
@media only screen and (max-width: 798px) {
footer .footer-social-icons {
display: none;
}
}
footer .footer-social-icons--mobile.columns {
display: none;
padding-left: 0;
}
@media only screen and (max-width: 798px) {
footer .footer-social-icons--mobile.columns {
display: block;
}
footer .footer-social-icons--mobile.columns > ul {
display: block;
padding-left: 0;
}
}
footer .social_icons {
display: block;
margin-top: 15px;
}
@media only screen and (max-width: 798px) {
footer .social_icons {
padding-left: 0;
text-align: center;
}
}
footer .social_icons a,
footer .social_icons a:visited {
color: #363636;
font-size: 22px;
display: inline-block;
margin-bottom: 1em;
}
@media only screen and (max-width: 480px) {
footer .social_icons a,
footer .social_icons a:visited {
margin-bottom: 0;
}
}
footer .social_icons a:active,
footer .social_icons a:hover {
color: #B8973A;
font-size: 22px;
}
/*!
* animate.css -http://daneden.me/animate
* Version - 3.5.2
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2017 Daniel Eden
*/
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
.animated.hinge {
animation-duration: 2s;
}
.animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
animation-duration: 0.75s;
}
@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scaleX(1);
}
}
.bounceIn {
animation-name: bounceIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translate3d(0, -20px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(20px, 0, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 1;
transform: none;
}
}
.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
@keyframes fadeOutUp {
0% {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
animation-name: fadeOutUp;
}
@keyframes zoomOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
.zoomOut {
animation-name: zoomOut;
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
animation-name: fadeOutLeft;
}
.delay-0s {
animation-delay: 0;
}
.delay-025s {
animation-delay: 0.25s;
opacity: 0;
}
.delay-05s {
animation-delay: 0.5s;
opacity: 0;
}
.delay-075s {
animation-delay: 0.75s;
opacity: 0;
}
.delay-1s {
animation-delay: 1s;
opacity: 0;
}
.animate_right,
.animate_left,
.animate_up,
.animate_down {
opacity: 0;
}
.ie .animated,
.ie .animate_right,
.ie .animate_left,
.ie .hsContent,
.ie #slide-1 .animated {
opacity: 1 !important;
}
.ie delay-025s,
.ie .delay-0s,
.ie .delay-025s,
.ie .delay-05s,
.ie .delay-075s,
.ie .delay-1s {
opacity: 1 !important;
}
.ie select {
background-image: none !important;
}
@media only screen and (max-width: 798px) {
.delay-0s,
.delay-025s,
.delay-05s,
.delay-075s,
.delay-1s,
.animate_right,
.animate_left,
.animate_up,
.animate_down {
opacity: 1;
}
}
/* #Password Page
================================================== */
#password-container {
margin: 75px auto 0;
max-width: 100%;
display: table;
text-align: center;
display: table;
}
@media only screen and (max-width: 798px) {
#password-container {
margin-top: 10px;
}
}
#password-container #contact_form input.newsletter-form__sign-up[type=submit] {
width: calc(35% - 10px);
}
@media only screen and (max-width: 1024px) {
#password-container #contact_form input.newsletter-form__sign-up[type=submit] {
width: 100%;
}
}
#password-container #contact_form input.contact_email[type=email] {
max-width: 100%;
}
.password-page-message {
font-size: 3em;
line-height: 1.2;
margin: 10px auto;
padding: 12px 0;
}
.password-page-follow {
margin: 5px 0;
}
.password-social .social_icons a,
.password-social .social_icons a:visited,
.password-social .social_icons a:active {
font-size: 25px;
}
.password-page-row {
display: table-row;
width: 100%;
height: 100%;
margin: 0 auto;
}
.password-page-col {
display: table-cell;
vertical-align: middle;
padding: 5px 30px;
width: 100%;
}
.password-logo {
max-width: 200px; /* Allows logo to be more prominent*/
margin: 0px auto;
}
.password-message {
max-width: 600px;
font-size: 1.2em;
color: #363636;
}
.hr-small {
margin: 20px auto;
width: 50px;
}
.password-social {
margin-top: 10px;
padding-top: 20px;
}
.password-social ul {
margin-left: 0;
padding-left: 0;
margin-bottom: 10px;
}
.password-social .social_icons li {
display: inline;
margin-left: 0;
}
.password-social .social_icons a:hover {
color: #9A7D2E;
}
.password-footer {
margin-top: 15px;
margin-bottom: 40px;
font-size: 13px;
color: #363636;
text-align: center;
}
.powered {
display: block;
margin-top: 15px;
}
.shopify a {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA0JJREFUeNqMU81vG0UU/83sR73YG+M4xrHj4jj9UCFNSaGlQQUhhFBRpXIo6jEHQFXFAbhy4B/gioTgzgGV7ws5IAoqUgUSoWoIaZJGpGpMHDuptf5a7+fM8nZpJaRy4M0+jd7szO/93u/NsAsX5vFvi6IInHNUq5NnstnsqXp96xur3f392HNlrIcLePHkS8hlTchIJvtVSTOjIaSAwhkiGsXi+BudjjVp28Oj+XzhrPDZh5qqfoIQD5j6wrxHCAJ6UMXVr3pgnB0c9O2843jrE5XMtZER47GTp+bOqfn++d9+Ct5TuLrCGAcjpgnAWEVSdg8HSyWUzTl8v7D08szxSltPB6/OPDWeW/q1caI2O0zfbrThBM7pjdbiz9PG7LsK01epYKiCaMlIQadnHag9UZ2vbuqvl47tVMwcY3fdFjLFCIHksB0bQojCTmfzlWyHf53S0qsyigESMRS0uqtvNbs330nXNHhRAWl3ChnNhLG/jzBy4fg27pGG5TSqWsARV6EGwk+WScgymIQ5auLpyTdRHj2arC//9QXuDpfgeDYkQcgoZixq4DKuAGoo7wEwVg5DD3PVt1EafRzL21/C0HJo9f4gYUO4gZNkFMk5Nkli3wcI4vP7yIvxhsLIIXhBHzfqlzHwWihkDiNjPEwlDJNE/zDABGPQKfR5QAzI8wRU9IWNurWIlJbF+dmP8Ig5ja67Az8cwvWdmCVi4YSMSlTzODjAQxGAvCZkaIpI4MeN97Fc/xbpfXk8WXmNqPcw9C1idR8gKSNN06GYEScZYwZVJ+xj/8hpPJp9HmvNK/Bd6g0zEXfJ9rvEwE0A4qbFLOibimN15RcLR57JVFx7iLGHpvFs9RJ8QZvofmzsXoEXDqAqWiIiyUaAUSIkBTVVY1BuXuth6rhxcaxizDb619EcrGPg7+JG8zJWdj8HZwplk7hTHyDiKrU5BVWXyKT57ncfNz9TRBjxrRWn3/zT2+7seV7DWuabnR+MTrCm6ikNnLLEL3R720dmQkMqFz8dia3rdmvhg8an7MH3hZRhKuVsQTtcPmCcGK+lZvLl1JEdK9T7PW9t75a72L7tXh3sBbdEELXxP00h1//rx98CDACS7p3N/ZPUwQAAAABJRU5ErkJggg==);
padding-left: 21px;
color: #363636;
text-decoration: none;
}
.password-footer a {
color: #363636;
text-decoration: none;
}
/* Password Page Modal CSS */
.controls {
display: block;
margin: 1em;
text-align: right;
text-transform: uppercase;
position: relative;
}
#open-me {
text-align: center;
margin-bottom: 35px;
}
#open-me a:hover {
color: #9A7D2E;
}
.close-me {
z-index: 8000;
}
.modalbox {
position: absolute;
height: 100%;
top: -1em;
bottom: 0;
left: 0;
right: 0;
padding: 0;
z-index: 5000;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
max-height: 100%;
top: 0;
left: 0;
background: #fff;
z-index: 10;
background: rgba(255, 255, 255, 0.95);
}
.overlay-close {
width: 150px;
height: 50px;
position: absolute;
right: 10px;
top: 10px;
border: 1px solid #000;
font-size: 14px;
}
.overlay-data {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s;
visibility: 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-open {
opacity: 1;
visibility: visible;
transition: opacity 0.5s;
}
.inputbox {
margin: 0px auto;
max-width: 80%;
display: table;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #000;
}
@media only screen and (max-width: 798px) {
#password-page-bg .modalbox .inputbox {
top: 50%;
}
}
.storefront-password-form label {
font-size: 0.9em;
margin: 0 0 1em 0;
text-align: center;
}
.storefront-password-form .actions {
display: inline-block;
}
.storefront-password-form #password {
width: 50%;
display: inline-block;
}
@media only screen and (max-width: 480px) {
.storefront-password-form #password {
width: 100%;
}
}
#owner {
font-size: 0.9em;
margin-top: -1em;
opacity: 0.8;
}
.pass-close {
color: #000 !important;
padding: 0 !important;
margin: 1em !important;
position: inherit !important;
}
@media screen and (min-width: 320px) and (max-width: 440px) and (max-height: 667px) {
.modalbox {
display: block;
width: 414px !important;
max-width: 100%;
text-align: center;
}
.pass-close {
display: block;
margin: 0.65em -0.15em 1em 0 !important;
}
}
/* #Product page
================================================== */
.is-product-main.content,
.is-product-sidebar.content {
padding-bottom: 0;
}
/* Blocks */
.product-block.product-block--first {
margin-top: 0; /* Always remove the top margin from the first product block */
}
/* Popup */
.product-popup {
margin-bottom: 0.5rem;
}
.product-popup.product-popup--left {
text-align: left;
}
.product-popup.product-popup--center {
text-align: center;
}
.product-popup.product-popup--right {
text-align: right;
}
.product-popup__link {
display: inline-flex;
word-break: break-word;
text-decoration: underline;
text-underline-offset: 0.25rem;
}
.fancybox-content.product-popup__lightbox {
cursor: default;
}
.product-popup__lightbox-wrapper h5 {
padding-top: 0;
}
.product-popup__lightbox-wrapper img {
height: auto;
max-width: 100%;
}
/* # Product media
================================================== */
.product-gallery__model model-viewer,
.product-gallery__video iframe {
width: 100%;
min-height: 450px;
}
.product-gallery__model {
position: relative;
}
.product-gallery__model model-viewer {
width: 100%;
min-height: 500px;
}
.view-in-your-space {
padding: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 44px;
background: #e6e6e6;
color: #333333;
font: inherit;
text-transform: none;
border-radius: 0px;
border: 0;
}
.view-in-your-space svg path:first-child {
stroke: #333333;
}
.view-in-your-space svg path:last-child {
fill: #333333;
}
.plyr--video .plyr__controls {
background: rgba(255, 255, 255, 0.6);
padding: 10px;
}
.plyr--video .plyr__control {
background: transparent;
color: #333333;
}
.plyr--video .plyr__control:hover {
background: #ffffff;
color: #333333;
}
.plyr--video .plyr__controls__item.plyr__time,
.plyr--video input[type=range],
.plyr--video .plyr__controls__item {
color: #333333;
}
.plyr--video .plyr__progress input[type=range] + .thumb {
background-color: #333333;
color: #333333;
}
.plyr--video input[type=range]::-webkit-slider-thumb {
background-color: #333333;
}
.plyr--video input[type=range]::-moz-range-thumb {
background-color: #333333;
}
.plyr--video input[type=range]::-ms-thumb {
background-color: #333333;
}
.plyr--video .plyr__progress__buffer,
.plyr--video .plyr__control[aria-expanded=true] {
background-color: rgba(51, 51, 51, 0.6);
}
.plyr--video .plyr__control.plyr__tab-focus {
background-color: #333333;
}
.plyr--video .plyr__control--overlaid {
background: #ffffff;
border-radius: 0;
border: 1px solid rgba(0, 0, 0, 0.05);
height: 50px;
width: 50px;
}
.plyr--video .plyr__control--overlaid svg {
left: auto;
}
.plyr--video .plyr__control--overlaid:hover {
background: #ffffff;
}
.plyr--video .plyr__control--overlaid:hover .play-icon-button-control rect {
opacity: 0.75;
}
.plyr--video .plyr__control .play-icon-button-control {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}
.plyr--video .plyr__control .play-icon-button-control rect {
fill: #ffffff;
}
.plyr--video .plyr__control .play-icon-button-control path {
fill: #333333;
}
.plyr__controls .plyr__controls__item.plyr__progress__container {
padding-right: 10px;
padding-left: 10px;
}
/* Styles for a vertical volume scrollbar */
.plyr--full-ui .plyr__volume {
background-color: rgba(255, 255, 255, 0.25);
border-radius: 5px;
bottom: 105px;
height: 40px;
opacity: 0;
padding: 10px 15px !important;
position: absolute;
transform: rotate(270deg);
transition: visibility 0.4s linear 0.4s, opacity 0.4s linear 0.3s;
width: 140px;
}
.plyr--full-ui .plyr__volume:before {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(255, 255, 255, 0.25);
bottom: 18px;
content: "";
left: -6px;
position: absolute;
transform: rotate(90deg);
z-index: 2;
}
.plyr--full-ui .plyr__volume:hover {
opacity: 1;
visibility: visible;
}
.plyr--full-ui .plyr__volume.plyr__volume--is-visible {
opacity: 1;
transition: visibility 0.4s linear, opacity 0.4s linear;
}
.plyr--full-ui .plyr__volume input[type=range] {
color: #333333;
margin: 0 auto;
}
.plyr--full-ui .plyr__volume input[type=range]::-webkit-slider-runnable-track,
.plyr--full-ui .plyr__volume input[type=range]::-moz-range-track,
.plyr--full-ui .plyr__volume input[type=range]::-webkit-slider-thumb,
.plyr--full-ui .plyr__volume input[type=range]::-moz-range-thumb {
box-shadow: none;
}
.plyr--full-ui .plyr__volume input[type=range]::-ms-fill-upper,
.plyr--full-ui .plyr__volume input[type=range]::-ms-thumb,
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-webkit-slider-runnable-track,
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-moz-range-track,
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-webkit-slider-thumb,
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-moz-range-thumb,
.plyr--full-ui .plyr__volume input[type=range].plyr__tab-focus::-ms-thumb,
.plyr--full-ui .plyr__volume input[type=range]:active::-webkit-slider-thumb,
.plyr--full-ui .plyr__volume input[type=range]:active::-moz-range-thumb,
.plyr--full-ui .plyr__volume input[type=range]:active::-ms-thumb {
box-shadow: none;
}
.plyr--audio .plyr--full-ui .plyr__volume {
bottom: 125px;
right: -37px;
}
.plyr--is-ios .plyr__volume {
display: none !important;
}
.plyr__control[data-plyr=mute]:hover + .plyr__volume {
opacity: 1;
transition: visibility 0.4s linear, opacity 0.4s linear;
}
@media (min-width: 480px) {
.plyr--full-ui .plyr__volume input[type=range] {
max-width: 90px;
}
}
@media (min-width: 750px) {
.plyr--full-ui .plyr__volume input[type=range] {
max-width: 110px;
}
}
@media only screen and (max-width: 989px) {
.plyr--is-touch .plyr__volume {
display: none !important;
}
}
.show-gallery-arrows--true .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
right: 50px;
bottom: 10px;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
color: #333333;
background: #ffffff;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button[hidden] {
display: none;
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover,
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus {
color: rgba(51, 51, 51, 0.55);
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
background: #ffffff;
border: 1px solid rgba(51, 51, 51, 0.05);
}
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
border-bottom: 1px solid rgba(51, 51, 51, 0.05);
}
.video-on-hover .plyr__controls,
.video-on-hover .plyr__control--overlaid,
.swap-true .plyr--youtube .plyr__controls,
.swap-true .plyr--youtube .plyr__control--overlaid,
.video-controls-enabled--false .plyr__controls,
.video-controls-enabled--false .plyr__control--overlaid {
opacity: 0;
}
.video-on-hover .plyr__controls > *,
.video-on-hover .plyr__control--overlaid > *,
.swap-true .plyr--youtube .plyr__controls > *,
.swap-true .plyr--youtube .plyr__control--overlaid > *,
.video-controls-enabled--false .plyr__controls > *,
.video-controls-enabled--false .plyr__control--overlaid > * {
pointer-events: none;
cursor: auto;
}
/* Hide controls on mobile when video is stopped */
.plyr.plyr--stopped .plyr__controls {
display: none;
}
.product_gallery_nav .media-badge {
position: absolute;
top: 0;
right: 0;
max-width: 33%;
max-height: 33%;
min-width: 20px;
width: 25px;
height: 25px;
}
.product_gallery_nav .media-badge svg {
width: 100%;
height: 100%;
}
.product_gallery_nav .media-badge path:first-child {
fill: #ffffff;
}
.product_gallery_nav .media-badge path:last-child {
fill: #333333;
}
.product_gallery_nav .media-badge g path:first-child {
stroke: #333333;
}
.product_gallery_nav .media-badge .media-badge__outline {
stroke: rgba(51, 51, 51, 0.05);
}
/* Set product media height */
.gallery-wrap.product-height-set model-viewer {
margin: 0 auto;
}
.gallery-wrap.product-height-set .product_gallery img,
.gallery-wrap.product-height-set .product_gallery .plyr--html5 video {
width: 100%;
}
.gallery-wrap.product-height-set .product_gallery img {
object-fit: contain;
}
.gallery-wrap.product-height-set .product_gallery .plyr--youtube .plyr__video-embed {
height: 100%;
}
/* Home page - general
================================================== */
/* Full-width product slider */
.homepage-product-slider {
margin: 0 10px;
}
@media only screen and (max-width: 798px) {
.homepage-product-slider {
margin: 0;
}
}
.homepage-product-slider object.placeholder-image {
width: 100%;
display: block;
height: auto;
position: relative;
padding-top: 100%;
}
.homepage-product-slider .placeholder-svg--product {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.homepage-product-slider.even-num-slides {
padding-left: 10px;
width: calc(100% - 20px);
}
@media only screen and (max-width: 798px) {
.homepage-product-slider.even-num-slides {
padding-left: 0;
width: 100%;
}
}
.products-slider.slider-gallery.products-length-6 .gallery-cell {
width: calc(16.6% - 10px);
}
@media only screen and (max-width: 798px) {
.products-slider.slider-gallery.products-length-6 .gallery-cell {
width: calc(40% - 10px);
}
}
.products-slider.slider-gallery.products-length-5 .gallery-cell {
width: calc(20% - 10px);
}
@media only screen and (max-width: 798px) {
.products-slider.slider-gallery.products-length-5 .gallery-cell {
width: calc(40% - 10px);
}
}
.products-slider.slider-gallery.products-length-4 .gallery-cell {
width: calc(25% - 10px);
}
@media only screen and (max-width: 798px) {
.products-slider.slider-gallery.products-length-4 .gallery-cell {
width: calc(40% - 10px);
}
}
.products-slider.slider-gallery.products-length-3 .gallery-cell, .products-slider.slider-gallery.products-length-2 .gallery-cell, .products-slider.slider-gallery.products-length-1 .gallery-cell {
width: calc(33.33% - 10px);
}
.products-slider.slider-gallery .gallery-cell.visible-2 {
width: calc(50% - 10px);
}
@media only screen and (max-width: 798px) {
.products-slider.slider-gallery .gallery-cell.visible-2 {
width: calc(50% - 10px);
}
}
.products-slider.slider-gallery .gallery-cell.visible-3 {
width: calc(33.33% - 10px);
}
@media only screen and (max-width: 798px) {
.products-slider.slider-gallery .gallery-cell.visible-3 {
width: calc(40% - 10px);
}
}
.products-slider.slider-gallery .gallery-cell.visible-4 {
width: calc(25% - 10px);
}
@media only screen and (max-width: 798px) {
.products-slider.slider-gallery .gallery-cell.visible-4 {
width: calc(40% - 10px);
}
}
.products-slider.slider-gallery .gallery-cell.visible-5 {
width: calc(20% - 10px);
}
@media only screen and (max-width: 798px) {
.products-slider.slider-gallery .gallery-cell.visible-5 {
width: calc(40% - 10px);
}
}
.products-slider.slider-gallery .gallery-cell.visible-6 {
width: calc(16.666% - 10px);
}
@media only screen and (max-width: 798px) {
.products-slider.slider-gallery .gallery-cell.visible-6 {
width: calc(40% - 10px);
}
}
.products-slider.slider-gallery .gallery-cell.visible-7 {
width: calc(14.2% - 10px);
}
@media only screen and (max-width: 798px) {
.products-slider.slider-gallery .gallery-cell.visible-7 {
width: calc(40% - 10px);
}
}
.products-slider.slider-gallery .gallery-cell.visible-7 .product-details {
font-size: 0.7rem;
}
/* Text below overlay on larger screens */
@media only screen and (max-width: 1024px) {
.products-length-7 .product-info__caption {
display: block;
}
.products-length-7 .thumbnail-overlay {
display: none;
}
.products-length-8 .product-info__caption {
display: block;
}
.products-length-8 .thumbnail-overlay {
display: none;
}
.products-length-9 .product-info__caption {
display: block;
}
.products-length-9 .thumbnail-overlay {
display: none;
}
.products-length-10 .product-info__caption {
display: block;
}
.products-length-10 .thumbnail-overlay {
display: none;
}
.products-length-11 .product-info__caption {
display: block;
}
.products-length-11 .thumbnail-overlay {
display: none;
}
.products-length-12 .product-info__caption {
display: block;
}
.products-length-12 .thumbnail-overlay {
display: none;
}
.products-length-13 .product-info__caption {
display: block;
}
.products-length-13 .thumbnail-overlay {
display: none;
}
.products-length-14 .product-info__caption {
display: block;
}
.products-length-14 .thumbnail-overlay {
display: none;
}
.products-length-15 .product-info__caption {
display: block;
}
.products-length-15 .thumbnail-overlay {
display: none;
}
.products-length-16 .product-info__caption {
display: block;
}
.products-length-16 .thumbnail-overlay {
display: none;
}
}
.featured_products.product-slider {
padding-bottom: 0;
}
.featured_products.product-slider .columns {
padding-bottom: 0;
}
/* Applied to the slideshow, video and full-width banner images */
.banner-full-link {
line-height: 0;
font-size: 0;
color: transparent;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
}
.banner-full-link + .caption {
pointer-events: none;
cursor: pointer;
}
@media only screen and (max-width: 480px) {
.full-width--true .caption {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (min-width: 1025px) {
.full-width--true .caption {
max-width: 960px;
padding: 0;
}
}
@media only screen and (min-width: 1401px) {
.full-width--true .caption {
max-width: 1200px;
padding: 0;
}
}
.caption {
width: 100%;
position: absolute;
top: 50%;
padding: 0 5%;
z-index: 3;
transform: translate(0, -50%);
}
@media only screen and (min-width: 799px) {
.caption {
max-width: 960px;
left: 0;
right: 0;
margin: 0 auto;
}
}
@media only screen and (min-width: 1025px) {
.caption {
padding: 0 30px;
}
}
@media only screen and (max-width: 798px) {
.caption {
width: 100%;
}
}
.caption a {
pointer-events: all;
}
.caption.position-center {
left: 0;
right: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width: 798px) {
.caption.position-center {
width: 85%;
}
}
@media only screen and (max-width: 480px) {
.caption.position-center {
width: 100%;
}
}
.caption.position-left {
left: 0;
right: 0;
text-align: left;
}
.caption.position-right {
left: 0;
right: 0;
text-align: right;
}
.caption .pretext {
color: #f5f1ef;
font-family: "EB Garamond", serif;
font-weight: 400;
text-transform: uppercase;
font-size: 19px;
letter-spacing: 0px;
margin-bottom: 10px;
}@media only screen and (max-width: 480px) {
.caption .pretext {
font-size: 1.4em;
}
}
@media only screen and (max-width: 798px) {
.caption .pretext {
font-size: 12.666666666666666px;
}
}
@media only screen and (min-width: 799px) {
.caption .pretext {
color : white ;
}
@media only screen and (min-width: 799px) {
.caption .pretext {
font-size: 50px;
}
}
.caption-content.align-center .pretext p {
color: #ffffff !important;
font-size: 50 px !important;
}
}
@media only screen and (min-width: 799px) {
.caption .pretext {
font-size: 19px;
}
}
.caption .headline {
color: #f5f1ef;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: none;
font-size: 40px;
letter-spacing: 0px;
line-height: 1.4em;
margin-bottom: 15px;
}@media only screen and (max-width: 480px) {
.caption .headline {
font-size: 2.6em;
}
}
@media only screen and (max-width: 798px) {
.caption .headline {
font-size: 26.666666666666668px;
}
}
@media only screen and (min-width: 799px) {
.caption .headline {
font-size: 33.333333333333336px;
}
}
@media only screen and (min-width: 1025px) {
.caption .headline {
font-size: 40px;
}
}
.caption .subtitle {
color: #f5f1ef;
font-family: "EB Garamond", serif;
font-weight: 400;
text-transform: uppercase;
font-style: uppercase;
font-size: 19px;
letter-spacing: 0px;
position: relative;
}@media only screen and (max-width: 480px) {
.caption .subtitle {
font-size: 1.4em;
}
}
@media only screen and (max-width: 798px) {
.caption .subtitle {
font-size: 12.666666666666666px;
}
}
@media only screen and (min-width: 799px) {
.caption .subtitle {
font-size: 15.833333333333334px;
}
}
@media only screen and (min-width: 1025px) {
.caption .subtitle {
font-size: 19px;
}
}
.caption .pretext:empty,
.caption .headline:empty,
.caption .subtitle:empty {
display: none;
}
.caption .pretext:empty:before,
.caption .headline:empty:before,
.caption .subtitle:empty:before {
height: 0;
}
.caption-background-text_box .caption-content {
background-color: #000000; /* Fallback */
}
@media only screen and (max-width: 480px) {
.caption--below-true .caption {
margin: 20px auto !important; /* Force caption margin */
font-size: 3vw;
position: static;
transform: none;
width: 100%;
}
}
@media only screen and (max-width: 480px) {
.caption--below-true .pretext {
color: #333333;
text-shadow: none;
}
}
@media only screen and (max-width: 480px) {
.caption--below-true .headline {
color: #1C1C1C;
text-shadow: none;
}
}
@media only screen and (max-width: 480px) {
.caption--below-true .subtitle {
color: #333333;
text-shadow: none;
}
}
.caption--below-true.caption-background-text_box .caption-content {
background-color: #000000;
}
@media only screen and (max-width: 480px) {
.caption--below-true.caption-background-text_box .caption-content {
background-color: transparent;
}
}
@media only screen and (max-width: 480px) {
.caption--below-true.caption-background-translucent_text_box .caption-content {
background-color: transparent;
}
}
.subtitle p a {
pointer-events: all;
}
.caption-content {
display: inline-block;
float: none;
max-width: 60%;
font-size: 0;
}
@media only screen and (max-width: 798px) {
.caption-content {
max-width: 80%;
}
}
@media only screen and (max-width: 480px) {
.caption-content {
width: 100%;
max-width: 100%;
}
}
.caption-content.align-center {
text-align: center;
}
@media only screen and (max-width: 798px) {
.caption-content.align-center {
max-width: 80%;
}
}
@media only screen and (max-width: 480px) {
.caption-content.align-center {
width: 100%;
max-width: 100%;
}
}
.caption-content.align-left {
text-align: left;
}
.caption-content.align-left .subtitle:before {
margin-left: 0;
}
.caption-content.align-right {
text-align: right;
}
.caption-content.align-right .subtitle:before {
margin-right: 0;
}
.caption-content {
padding: 30px;
}
.caption-content h1 {
padding-top: 0;
}
.caption-content > *:only-child {
margin-bottom: 0px;
}
@media only screen and (max-width: 480px) {
.caption-content {
padding: 15px;
}
}
@media only screen and (max-width: 480px) {
.caption--below-true .caption-content {
padding: 0px;
}
}.homepage-video .caption-background-text_box {
background-color: #000000;
}@media only screen and (max-width: 480px) {
.homepage-video .caption-background-text_box {
background-color: transparent;
}
}
.caption-background-translucent_text_box .caption-content {
background-color: rgba(0, 0, 0, 0.6);
}
/* Slideshow */
.homepage-slideshow .gallery-cell:not(:first-child) {
height: 0;
}
.homepage-slideshow.flickity-enabled .gallery-cell:not(:first-child) {
height: auto;
}
/* #Account
================================================== */
.account-header-logout {
text-align: right;
text-transform: uppercase;
}
.account-sidebar {
border-right: 1px solid #D4C4AF;
box-sizing: border-box;
padding-right: 10px;
overflow-wrap: anywhere;
}
@media only screen and (max-width: 798px) {
.account-sidebar {
border: 0;
padding-right: 0;
}
}
.customers-addresses .account-sidebar {
border-right: 0;
padding-right: 0;
}
.customers-addresses .account-main {
box-sizing: border-box;
border-left: 1px solid #D4C4AF;
padding-left: 20px;
}
@media only screen and (max-width: 798px) {
.customers-addresses .account-main {
border: 0;
padding-left: 0;
}
}
.action_bottom .note {
vertical-align: middle;
line-height: 40px;
}
.address_title {
margin-bottom: 0;
padding-bottom: 0;
}
.address__action a,
.address__action a:hover,
.address__action a:active,
.address__action a:focus {
color: inherit;
}
/* #Policy pages
================================================== */
@media only screen and (max-width: 798px) {
.shopify-policy-template .container {
margin-left: 10px;
margin-right: 10px;
}
}
.container .shopify-policy__container {
margin: 0;
max-width: none;
padding-left: 0;
padding-right: 0;
}
.shopify-policy__container .shopify-policy__title {
text-align: left;
}
/* #Home page - Featured product
================================================== */
.shopify-section--featured-product .product__details {
padding: 40px 2rem;
}
/* #Home page - text columns with images
================================================== */
.shopify-section--text-columns-with-images .border-style--box {
padding: 10%;
border: 1px solid #D4C4AF;
}
.shopify-section--text-columns-with-images .border-style--quote {
padding-left: 20px;
border-left: 1px solid #D4C4AF;
margin-bottom: 10%;
}
.shopify-section--text-columns-with-images .large_text {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1.5;
color: #1C1C1C;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
font-size: 49.4px;
}
.shopify-section--text-columns-with-images .text-column {
margin-bottom: 25px;
}
.shopify-section--text-columns-with-images .text-columns-with-images__button {
margin: 10px 0 25px;
}
.shopify-section--text-columns-with-images h2.title + .feature-divider {
margin-bottom: 40px;
}
.shopify-section--text-columns-with-images img {
margin: 0 0 15px;
}
/* OOTS Content Creator slideshow */
.flexslider img {
display: block;
margin: 0 auto;
}
/* #Home page - slideshow
================================================== */
.homepage-slideshow:hover .flickity-prev-next-button,
.shopify-section--testimonials:hover .flickity-prev-next-button {
opacity: 0.5;
}
.homepage-slideshow.text-animation--false .caption {
opacity: 0;
transition: opacity 0.3s linear;
}
.homepage-slideshow.text-animation--false.flickity-enabled .caption {
opacity: 1;
}
.text-animation--true .caption-content {
opacity: 0;
}
.homepage-slideshow.single-image .flickity-prev-next-button,
.shopify-section--testimonials.single-image .flickity-prev-next-button {
display: none;
}
.homepage-slideshow.single-image .flickity-page-dots,
.shopify-section--testimonials.single-image .flickity-page-dots {
display: none;
}
.homepage-slideshow .gallery-cell,
.shopify-section--testimonials .gallery-cell {
width: 100%;
}.homepage-slideshow .gallery-cell,
.shopify-section--testimonials .gallery-cell {
background-color: #8c8b8b;
}@media only screen and (max-width: 480px) {
.homepage-slideshow .gallery-cell,
.shopify-section--testimonials .gallery-cell {
background-color: transparent;
}
}
.homepage-slideshow .gallery-cell img,
.shopify-section--testimonials .gallery-cell img {
width: 100%;
display: block;
}
.homepage-slideshow .flickity-prev-next-button,
.shopify-section--testimonials .flickity-prev-next-button {
opacity: 0;
width: 5%;
height: 100%;
border-radius: 0;
}
@media only screen and (min-width: 799px) {
.homepage-slideshow .flickity-prev-next-button,
.shopify-section--testimonials .flickity-prev-next-button {
opacity: 0;
}
}
.homepage-slideshow .flickity-page-dots,
.shopify-section--testimonials .flickity-page-dots {
bottom: 2em;
display: none;
}
@media only screen and (min-width: 799px) {
.homepage-slideshow .flickity-page-dots,
.shopify-section--testimonials .flickity-page-dots {
display: block;
}
}
.homepage-slideshow .flickity-page-dots .dot,
.shopify-section--testimonials .flickity-page-dots .dot {
height: 4px;
width: 40px;
margin: 0;
border-radius: 0;
background: #000000;
}
@media only screen and (max-width: 480px) {
.homepage-slideshow .flickity-page-dots,
.shopify-section--testimonials .flickity-page-dots {
display: block;
bottom: 5px;
}
}
/* Home - product slider */
.js-product-slider .product_clear {
display: none;
}
.js-product-slider .flickity-prev-next-button {
border-radius: 0;
}
/* #Home page - Search
================================================== */
.search-bgr-true {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.shopify-section--search {
width: 100%;
display: inline-block;
}
.shopify-section--search h2 {
margin-top: 0;
margin-bottom: 0.25em;
}
.shopify-section--search p,
.shopify-section--search h2 {
color: #000000;
}
.shopify-section--search .section_form {
padding: 60px 20px;
max-width: 1200px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.shopify-section--search .search__section {
background-color: #1A1A2E;
}
.text-align--center .search__container {
justify-content: center;
}
.text-align--left .search__container {
justify-content: flex-start;
}
.text-align--right .search__container {
justify-content: flex-end;
}
.search__container {
position: relative;
width: 100%;
display: flex;
}
.search__container .search__wrapper {
display: inline-block;
position: relative;
max-width: 650px;
width: 100%;
}
.search__container input[type=text] {
color: #333333;
font-size: 16px;
display: inline-block;
border: 1px solid #000;
min-height: 50px;
height: 50px;
margin-bottom: 0;
background-color: #ffffff;
}
.search__container input[type=text]::-webkit-input-placeholder {
color: #333333;
}
.search__container input[type=text]:-moz-placeholder { /* Firefox 18- */
color: #333333;
}
.search__container input[type=text]::-moz-placeholder { /* Firefox 19+ */
color: #333333;
}
.search__container input[type=text]:-ms-input-placeholder {
color: #333333;
}
.search__container input[type=text]:focus, .search__container input[type=text]:active {
border: 1px solid #000;
}
.search__form {
width: 100%;
max-width: 650px;
position: relative;
flex: 0 0 auto;
}
.search__button {
position: absolute;
margin-top: 0;
top: 0;
height: 50px;
width: 50px;
right: 0px;
padding: 0;
background-color: #000;
border-color: transparent;
color: white;
font-size: 24px;
}.search__button {
border-radius: 0px;
}.search__button:hover {
color: white;
background-color: #b0936d;
border: 1px solid #000;
border-left: 0px;
}
/* #Home page - image with text
================================================== */
.button-grid-container {
margin-top: 10px;
display: inline-grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
grid-auto-flow: column;
grid-gap: 1rem;
}
@media only screen and (max-width: 798px) {
.button-grid-container--column-mobile {
grid-auto-flow: row;
}
}
@media only screen and (max-width: 1024px) {
.button-grid-container--column-tablet {
grid-auto-flow: row;
}
}
.button-grid-container--column {
grid-auto-flow: row;
}
.block__image_with_text + div:not(.block__image_with_text) {
padding-top: 20px;
}
.block__image_with_text + section {
padding-top: 20px;
}
.block__image_with_text + .block__image_with_text {
margin-bottom: 20px;
}
.image-with-text-container .featured-link--half a[href] img {
box-shadow: #000 0em 0em 0em;
transition: opacity 0.2s linear;
}
.image-with-text-container .featured-link--half:hover a[href] img.lazyloaded {
opacity: 0.8;
}
.standard--width .image-with-text .featured-link--image,
.full-width--false.image-with-text .featured-link--image {
background-color: transparent;
}
.featured-link--wrap {
height: 100%;
}
.featured-link--half {
box-sizing: border-box;
text-align: center;
background-color: #ffffff;
}
.featured-link--half img {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
}
@media only screen and (max-width: 480px) {
.featured-link--half img {
width: 100%;
max-width: auto;
}
}
.featured-link--half .info {
display: inline-block;
width: 80%;
margin: 0 auto;
padding: 20px;
}
.featured-link--half .info.text-align--right {
text-align: right;
}
.featured-link--half .info.text-align--right .description:before {
margin-right: 0;
}
.featured-link--half .info.text-align--left {
text-align: left;
}
.featured-link--half .info.text-align--left .description:before {
margin-left: 0;
}
@media only screen and (max-width: 480px) {
.featured-link--half .info {
position: static;
transform: translateY(0);
padding: 2em 0;
}
}
.featured-link--half .collection_title {
margin-bottom: 15px;
display: block;
}.featured-link--half .collection_title {
color: #1C1C1C;
}.featured-link--half .description {
position: relative;
font-size: 16;
line-height: 1.5;
margin-bottom: 20px;
}@media only screen and (max-width: 798px) {
.featured-link--half .description {
font-size: 2vw;
}
}
@media only screen and (max-width: 480px) {
.featured-link--half .description {
font-size: inherit;
}
}
@media only screen and (min-width: 1401px) {
.featured-link--half .description {
font-size: inherit;
}
}/* #Home page - Divider
================================================== */
.shopify-section--divider .container {
padding: 0;
}
.divider {
opacity: 0;
border-top: 0px;
}
.divider.divider--true {
opacity: 1;
}
/* #Home page - Quote
================================================== */
.quote__text {
font-size: 18px;
line-height: 18px;
text-align: center;
text-transform: uppercase;
padding: 15px 0;
border-top-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #D4C4AF;
}
.quote__text p {
margin: 0;
}
.quote {
padding: 10px 0px;
text-align: center;
border-top-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #D4C4AF;
}
/* #Home page - Rich text and image
================================================== */
.shopify-section--rich-text-and-image {
padding: 20px 0;
}
.rich-text__content .regular_text,
.rich-text__content .featured_text {
margin-top: 15px;
}
/* #Home page - Featured promotions
================================================== */
.promo-animation--true {
opacity: 0;
}
.featured-promotions.full-width--false {
padding: 20px 0;
}
.featured-promotions.full-width--false .feature-section {
margin-bottom: 20px;
}
.featured-promotions .feature-section {
text-align: center;
position: relative;
}
@media only screen and (max-width: 798px) {
.featured-promotions .feature-section {
opacity: 1;
}
}
.featured-promotions .feature-section .link-promo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
}
.featured-promotions .feature-section .feature-inner {
display: block;
position: relative;
overflow: hidden;
}
.featured-promotions .feature-section .feature-style--circle {
border-radius: 50%;
}
.featured-promotions .feature-section .feature-style--circle img {
border-radius: 50%;
}
.featured-promotions .feature-section .feature-style--rounded {
border-radius: 10px;
}
.featured-promotions .feature-section .feature-style--rounded img {
border-radius: 10px;
}
.featured-promotions .feature-section .feature-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: background-color 0.25s linear;
}@media only screen and (max-width: 798px) {
.featured-promotions .feature-section .feature-overlay {
background: rgba(0, 0, 0, 0.5);
}
}.featured-promotions .feature-section .feature-wrap {
top: 50%;
transform: translateY(-50.1%);
padding: 10px 0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
pointer-events: none;
}
.featured-promotions .feature-section .feature-details {
display: none;
opacity: 0;
transition: opacity 0.3s linear;
}
@media only screen and (max-width: 798px) {
.featured-promotions .feature-section .feature-details {
opacity: 1;
display: block;
}
}
.featured-promotions .feature-section .feature-details.reveal-details {
opacity: 1;
}
.featured-promotions .feature-section .feature-details .feature-details__button {
margin-top: 15px;
}
.featured-promotions .feature-section .description {
color: #FFF;
transition: all 0.3s linear;
margin-bottom: 0;
}
.featured-promotions .feature-section .description a {
pointer-events: auto;
}
.featured-promotions .feature-section.title-overlay-true .title {
transition: all 0.3s linear;
color: #FFF;
}
@media only screen and (max-width: 798px) {
.featured-promotions .feature-section.title-overlay-true .title {
margin-bottom: 10px;
}
}
.featured-promotions .feature-section.title-overlay-true .title:after {
content: "";
display: block;
height: 1px;
width: 0;
background: #FFF;
transition: width 0.5s ease, background-color 0.5s ease;
margin: 10px auto auto auto;
}
@media only screen and (max-width: 798px) {
.featured-promotions .feature-section.title-overlay-true .title:after {
display: none;
}
}
.featured-promotions .feature-section.title-overlay-false .feature-wrap .title {
display: none;
}
.featured-promotions .feature-section:hover .feature-overlay {
background: rgba(0, 0, 0, 0.5);
}@media only screen and (max-width: 798px) {
.featured-promotions .feature-section:hover .feature-overlay {
background: transparent;
}
}.featured-promotions .feature-section.title-overlay-true:hover .title:after {
width: 50%;
background: #FFF;
}
.featured-promotions .feature-section.title-overlay-true:hover .title {
color: #FFF;
}
.featured-promotions .feature-section.title-overlay-true:hover .description {
color: #FFF;
}
.featured-promotions .feature-section.title-overlay-false:hover .description {
color: #FFF;
}
.featured-promotions .feature-section img {
width: 100%;
display: block;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
}
.promo-1 {
animation-delay: 0s;
}
.promo-2 {
animation-delay: 0.3s;
}
.promo-3 {
animation-delay: 0.6s;
}
.promo-4 {
animation-delay: 0.9s;
}
.promo-5 {
animation-delay: 1.2s;
}
.promo-6 {
animation-delay: 1.5s;
}
.promo-7 {
animation-delay: 1.8s;
}
.promo-8 {
animation-delay: 2.1s;
}
.promo-9 {
animation-delay: 2.4s;
}
.promo-10 {
animation-delay: 2.7s;
}
.promo-11 {
animation-delay: 3s;
}
.promo-12 {
animation-delay: 3.3s;
}
.featured-promotions.full-width--true {
padding-top: 0;
}
/* #Home page - featured collection
================================================== */
.featured-collection__description {
padding: 0 20px;
margin: 20px 0;
}
/* #Home page - image with text overlay
================================================== */
.banner {
position: relative;
overflow: hidden;
}.banner {
background-color: #8c8b8b;
}@media only screen and (max-width: 480px) {
.banner {
max-height: inherit;
background-color: transparent;
}
}
.banner img {
width: 100%;
display: block;
}
/* #Home page - video
================================================== */
.block__featured_video .caption,
.shopify-section--video .caption {
z-index: 30;
pointer-events: none;
}
@media only screen and (max-width: 480px) {
.block__featured_video .caption,
.shopify-section--video .caption {
margin: 0;
height: auto;
}
}
.block__featured_video .video-text--outside-video,
.shopify-section--video .video-text--outside-video {
height: auto;
}
.showPosterImage--true[data-ratio="16:9"] {
padding-top: 56.25%;
}
.showPosterImage--true[data-ratio="4:3"] {
padding-top: 75%;
}
.homepage-video {
position: relative;
overflow: hidden;
transition: height 0.3s ease-in-out;
}.homepage-video {
background-color: #8c8b8b;
}@media only screen and (max-width: 480px) {
.homepage-video {
background-color: transparent;
}
}
.homepage-video img {
width: 100%;
display: block;
}
.homepage-video iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
.homepage-video video {
background-color: #ffffff;
}
.homepage-video video[poster] {
object-fit: cover;
}
.homepage-video video.video-autoplay--true.html-video {
display: none;
}
.homepage-video .homepage-video--media {
width: 100%;
height: auto;
padding-top: 0;
}
.homepage-video .placeholder-image--true a.video__play-button {
pointer-events: none;
}
.homepage-video .caption.text-on-video {
pointer-events: none;
}
@media only screen and (max-width: 480px) {
.homepage-video .caption.text-on-video {
position: absolute;
height: auto;
transform: translateY(-50%);
margin: 0;
}
}
.homepage-video .mobile-video__buttons {
display: block;
text-align: center;
top: 55%;
transform: translateY(-50%);
width: 100%;
position: absolute;
}
.homepage-video .mobile-video__buttons.text-on-video {
z-index: 20;
}
@media only screen and (min-width: 481px) {
.homepage-video .mobile-video__buttons {
display: none;
}
}
.darken-video {
display: block;
background: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
pointer-events: none;
z-index: 20;
}
/* #Home page - Newsletter
================================================== */
.newsletter_section {
padding: 20px 0;
}
/* #Page Banners
================================================== */
.banner.page-banner {
width: 100%;
overflow: hidden;
max-height: 100vh;
}
/* #Price UI
================================================== */
.price--sale {
margin-right: 5px;
color: #d54d4d;
}
.compare-at-price {
text-decoration: line-through;
color: #8c8b8b;
}
.unit-pricing {
display: block;
font-size: 0.75em;
margin-top: 2px;
}
.price-ui {
display: inline-block;
opacity: 1;
transition: opacity 250ms ease-in-out;
}
.product__details--product-page .price-ui {
display: flex;
flex-wrap: wrap;
}
.product__details--product-page .price-ui .savings {
order: 5;
margin-right: 5px;
width: 100%;
}
.product__details--product-page .price-ui .sold_out {
order: 3;
}
.product__details--product-page .price-ui .unit-pricing {
order: 4;
width: 100%;
}
.product__details--product-page .price-ui .compare-at-price {
order: 2;
margin-right: 5px;
}
.price-ui--loading {
opacity: 0;
}
/* #Price UI badge
================================================== */
.price-ui-badges {
display: flex;
margin-bottom: 15px;
}
.thumbnail .price-ui-badges {
position: absolute;
top: 0;
right: 0;
margin-bottom: 0;
flex-direction: column;
}
.price-ui-badge {
margin-right: 5px;
}
.price-ui-badge:last-child {
margin-right: 0;
}
.thumbnail .price-ui-badge {
margin-right: 0;
}
.price-ui-badge__sticker {
background-color: #d54d4d;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
letter-spacing: 1px;
padding: 8px 12px;
text-align: center;
color: #fff;
font-size: 14px;
}
@media only screen and (max-width: 480px) {
.price-ui-badge__sticker {
font-size: smaller;
padding: 4px 10px;
}
}
.price-ui-badges--round .price-ui-badge__sticker {
border-radius: 50%;
width: 70px;
height: 70px;
line-height: 70px;
padding: 0;
}
@media only screen and (max-width: 480px) {
.price-ui-badges--round .price-ui-badge__sticker {
display: flex;
align-items: center;
justify-content: center;
word-break: break-word;
line-height: 1.4;
}
}
@media only screen and (max-width: 798px) {
.price-ui-badges--round .price-ui-badge__sticker {
width: 50px;
height: 50px;
}
}
.thumbnail .price-ui-badges--round .price-ui-badge__sticker {
position: relative;
top: 10px;
right: 10px;
}
@media only screen and (max-width: 798px) {
.thumbnail .price-ui-badges--round .price-ui-badge__sticker {
top: 5px;
right: 5px;
}
}
.price-ui-badge__sticker--sold-out {
background-color: #000000;
}
.price-ui-badge__sticker--new,
.price-ui-badge__sticker--pre-order {
background-color: #B8973A;
}
/* #Surface Pick-up
================================================== */
.surface-pick-up {
opacity: 1;
transition: opacity 0.3s ease-in;
}
.surface-pick-up.surface-pick-up--loading {
visibility: hidden;
opacity: 0;
}
.surface-pick-up-embed {
--surface-pick-up-embed-theme-success-color: #099E4D;
--surface-pick-up-embed-theme-error-color: #DE3618;
--surface-pick-up-embed-theme-paragraph-font-size: 16px;
--surface-pick-up-embed-theme-paragraph-smaller-font-size: 0.85em;
--surface-pick-up-embed-theme-body-font-weight-bold: 600;
--surface-pick-up-embed-theme-body-text-color: #333333;
--surface-pick-up-embed-theme-link-text-decoration: underline;
--surface-pick-up-embed-row-gap: 10px;
--surface-pick-up-embed-column-gap: 10px;
margin-bottom: 40px;
}
.js-quick-shop .surface-pick-up-embed {
--surface-pick-up-embed-theme-body-text-color: #2b4189;
}
.surface-pick-up-item {
--surface-pick-up-item-theme-success-color: #099E4D;
--surface-pick-up-item-theme-error-color: #DE3618;
--surface-pick-up-item-theme-paragraph-font-size: 16px;
--surface-pick-up-item-theme-paragraph-smaller-font-size: 0.85em;
--surface-pick-up-item-theme-body-font-weight-bold: 600;
--surface-pick-up-item-theme-body-text-color: #333333;
--surface-pick-up-item-theme-border-color: rgba(212, 196, 175, 0.5);
--surface-pick-up-item-theme-link-text-decoration: underline;
--surface-pick-up-item-row-gap: 0.8em;
--surface-pick-up-item-column-gap: 5px;
--surface-pick-up-item-gap: 22px;
}
.surface-pick-up__modal.fancybox-content .fancybox-close-small svg {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 50%;
}
.surface-pick-up__modal-header {
display: flex;
flex-direction: column;
padding-bottom: 28px;
border-bottom: 1px solid rgba(212, 196, 175, 0.5);
}
.surface-pick-up__modal-title {
margin: 0;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
text-transform: uppercase;
line-height: 1.5;
color: #1C1C1C;
display: block;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
font-size: 30px;
font-weight: 600;
text-transform: none;
letter-spacing: normal;
}
.surface-pick-up__modal-subtitle {
font-size: 16px;
}
.surface-pick-up-embed__in-stock-icon,
.surface-pick-up-embed__out-of-stock-icon {
width: 0.85em;
height: 0.85em;
margin-top: 0.3em;
}
.surface-pick-up-item__pick-up-location {
font-size: 16px;
font-weight: bold;
letter-spacing: normal;
text-transform: none;
}
.surface-pick-up-item__address-info {
font-size: 0.85em;
line-height: 1.5;
}
.surface-pick-up-item__in-stock-icon,
.surface-pick-up-item__out-of-stock-icon {
margin-top: 0.3em;
width: 0.8em;
height: 0.8em;
}
.surface-pick-up-item__pick-up-distance {
padding-left: 5em;
}
.surface-pick-up-item:last-child {
padding-bottom: calc(var(--surface-pick-up-item-gap) / 2);
}
.surface-pick-up-embed__location-availability {
text-transform: none;
letter-spacing: normal;
}
/* #Desktop navigation
================================================== */
.nav-desktop summary {
list-style: none;
}
.nav-desktop__tier-1-item,
.nav-desktop__tier-2-item,
.nav-desktop__tier-3-item {
margin: 0;
}
.nav-desktop__tier-2-item,
.nav-desktop__tier-3-item {
padding: 12px 20px;
}
.nav-desktop__tier-2-item {
position: relative;
}
.feature_image .nav-desktop__tier-1-link {
color: #ffffff;
transition: color 0.2s ease;
}
.feature_image .nav-desktop__tier-1-link:visited {
color: #ffffff;
}
.feature_image .nav-desktop__tier-1-link:hover, .feature_image .nav-desktop__tier-1-link:active, .feature_image .nav-desktop__tier-1-link:focus, .feature_image .nav-desktop__tier-1-link.nav-desktop__tier-1-link--active {
color: #D4B862;
}
.nav-desktop__tier-1-link {
border-bottom: solid 1px transparent;
}
.feature_image .nav-desktop__tier-1-link {
color: #ffffff;
}
.nav-desktop__tier-1-link:hover, .nav-desktop__tier-1-link[aria-expanded=true] {
border-bottom: solid 1px #D4B862;
}
.nav-desktop__tier-1-item--dropdown-parent .nav-desktop__tier-1-link:hover, .nav-desktop__tier-1-item--dropdown-parent .nav-desktop__tier-1-link[aria-expanded=true] {
border-bottom: solid 1px transparent;
}
.nav-desktop__tier-1-link,
.nav-desktop__tier-2-link,
.nav-desktop__tier-3-link {
position: relative;
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #f7f7f7;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 798px) {
.nav-desktop__tier-1-link,
.nav-desktop__tier-2-link,
.nav-desktop__tier-3-link {
font-size: 13px;
}
}
.nav-desktop__tier-1-link span,
.nav-desktop__tier-2-link span,
.nav-desktop__tier-3-link span {
color: inherit;
}
.nav-desktop__tier-1-link:visited,
.nav-desktop__tier-2-link:visited,
.nav-desktop__tier-3-link:visited {
color: #f7f7f7;
text-decoration: none;
}
.nav-desktop__tier-1-link:visited span,
.nav-desktop__tier-2-link:visited span,
.nav-desktop__tier-3-link:visited span {
color: inherit;
}
.nav-desktop__tier-1-link:hover, .nav-desktop__tier-1-link:active, .nav-desktop__tier-1-link:focus, .nav-desktop__tier-1-link:focus-within, .nav-desktop__tier-1-link.nav-desktop__tier-1-link--active,
.nav-desktop__tier-2-link:hover,
.nav-desktop__tier-2-link:active,
.nav-desktop__tier-2-link:focus,
.nav-desktop__tier-2-link:focus-within,
.nav-desktop__tier-2-link.nav-desktop__tier-1-link--active,
.nav-desktop__tier-3-link:hover,
.nav-desktop__tier-3-link:active,
.nav-desktop__tier-3-link:focus,
.nav-desktop__tier-3-link:focus-within,
.nav-desktop__tier-3-link.nav-desktop__tier-1-link--active {
color: #D4B862;
text-decoration: none;
}
.nav-desktop__tier-1-link:hover span, .nav-desktop__tier-1-link:active span, .nav-desktop__tier-1-link:focus span, .nav-desktop__tier-1-link:focus-within span, .nav-desktop__tier-1-link.nav-desktop__tier-1-link--active span,
.nav-desktop__tier-2-link:hover span,
.nav-desktop__tier-2-link:active span,
.nav-desktop__tier-2-link:focus span,
.nav-desktop__tier-2-link:focus-within span,
.nav-desktop__tier-2-link.nav-desktop__tier-1-link--active span,
.nav-desktop__tier-3-link:hover span,
.nav-desktop__tier-3-link:active span,
.nav-desktop__tier-3-link:focus span,
.nav-desktop__tier-3-link:focus-within span,
.nav-desktop__tier-3-link.nav-desktop__tier-1-link--active span {
color: inherit;
}
.nav-desktop__tier-2-link,
.nav-desktop__tier-3-link {
display: block;
width: 100%;
padding: var(--space-4) var(--space-8);
}
.nav-desktop__tier-1 {
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 13px;
padding: 0;
margin: 0;
list-style: none;
}
.align_right .nav-desktop__tier-1 {
justify-content: flex-end;
}
.center .nav-desktop__tier-1 {
justify-content: center;
}
.nav-desktop__tier-1 .nav-desktop__tier-1-item {
display: inline-block;
}
.nav-desktop__tier-1 .nav-desktop__tier-1-link {
display: block;
padding: 12px 0;
white-space: nowrap;
}
.nav-desktop__tier-1-item--dropdown-parent {
position: relative;
}
.nav-desktop__tier-2-link--parent {
display: flex;
justify-content: space-between;
}
.nav-desktop__tier-2-link-icon {
transform: rotate(270deg);
}
.nav-desktop__tier-2,
.nav-desktop__tier-3 {
margin: 0;
position: absolute;
z-index: 100;
text-align: left;
opacity: 0;
width: 270px;
}
.nav-desktop__tier-2[data-animation],
.nav-desktop__tier-3[data-animation] {
transition: opacity 0.2s linear;
}
.nav-desktop__tier-2[data-animation-state=open],
.nav-desktop__tier-3[data-animation-state=open] {
display: block;
opacity: 1;
}
.nav-desktop__tier-2 {
top: 100%;
left: 0;
}
.nav-desktop__tier-2--dropdown::before {
content: '';
display: block;
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
background: transparent;
}
.nav-desktop__tier-2.alternate-drop {
right: 0;
left: auto;
}
.nav-desktop__tier-2--dropdown,
.nav-desktop__tier-3 {
text-align: left;
padding: 0;
margin-top: 10px;
}.nav-desktop__tier-2--dropdown,
.nav-desktop__tier-3 {
background: rgba(31, 95, 94, 0.9);
}.nav-desktop__tier-2--dropdown {
list-style: none;
text-transform: uppercase;
}
[data-show-separator=true] .nav-desktop__tier-2--dropdown {
top: 100%;
border-top: 1px transparent;
}
.nav-desktop__tier-2--dropdown li {
width: 100%;
}
.nav-desktop__tier-3 {
top: 0;
left: 100%;
transition: none;
}
.nav-desktop__tier-3[data-animation] {
transition: opacity 0.2s linear;
}
.nav-desktop__tier-3[data-animation-state=open] {
opacity: 1;
}
.nav-desktop__tier-3.alternate-drop {
right: 100%;
left: auto;
}
.nav-desktop__tier-3 li {
display: block;
width: 100%;
}
.nav-desktop__tier-2--full-width-menu {
position: absolute;
left: 0;
width: 100vw;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05), 0 16px 16px rgba(0, 0, 0, 0.075);
}.nav-desktop__tier-2--full-width-menu {
background: rgba(31, 95, 94, 0.9);
}[data-nav-desktop-details][open] .nav-desktop__tier-2--full-width-menu {
width: 100%;
}
.sticky_nav .nav-desktop__tier-2--full-width-menu {
max-height: calc(90vh - var(--sticky-header-height, 100px));
overflow: scroll;
}
.no-js [data-nav-desktop-details][open] > .nav-desktop__tier-2,
.no-js [data-nav-desktop-details][open] > .nav-desktop__tier-3,
.no-js [data-nav-desktop-details][open] > .header-mega-nav {
display: block;
opacity: 1;
}
.no-js [data-nav-desktop-details][open] > .header-mega-nav + .nav-desktop__tier-2,
.no-js [data-nav-desktop-details][open] > .header-mega-nav + .nav-desktop__tier-3 {
display: none;
opacity: 0;
}
[data-nav-desktop-details] > summary::-webkit-details-marker {
display: none;
}
.widemenu {
list-style: none;
margin: 0;
padding: 15px 20px 20px;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 50px;
}
.widemenu__submenu-items {
list-style: none;
margin: 0;
padding: 0;
}
.widemenu__link {
font-family: Cormorant, serif;
font-weight: 400;
font-style: normal;
font-size: 12px;
color: #f7f7f7;
letter-spacing: 1px;
text-rendering: optimizeLegibility;
text-decoration: none;
}
@media only screen and (max-width: 798px) {
.widemenu__link {
font-size: 13px;
}
}
.widemenu__link:visited {
color: #f7f7f7;
text-decoration: none;
}
.widemenu__link:hover, .widemenu__link:active, .widemenu__link:focus {
color: #D4B862;
text-decoration: none;
}
.widemenu__submenu-heading {
display: block;
margin-bottom: 6px;
padding: 12px 0;
border-bottom: 1px solid #f7f7f7;
}
.widemenu__submenu-item {
padding: 6px 0;
margin: 0;
}
.mega-menu-container {
display: none;
}
.no-js .mega-menu-container {
display: flex;
position: relative;
width: 100%;
padding: 10px 20px;
}.no-js .mega-menu-container {
background: rgba(31, 95, 94, 0.9);
}.shopify-section--mega-menu {
width: auto;
}
.mobile-meganav-source {
display: none;
}
/* #Shoppable Image
================================================== */
.shopify-section--shoppable-image .section-with-heading-wrapper {
background-color: var(--shoppable-image-background-color);
}
@media only screen and (max-width: 798px) {
.shoppable-image-wrapper.flickity-enabled {
padding-bottom: 2.5rem;
}
}
.shoppable-image-wrapper.flickity-enabled .flickity-prev-next-button {
width: 5%;
}
@media only screen and (max-width: 798px) {
.shoppable-image-wrapper.flickity-enabled .flickity-prev-next-button {
display: none;
}
}
.shoppable-image-wrapper.flickity-enabled .flickity-page-dots {
bottom: 0.5rem;
}
@media only screen and (max-width: 798px) {
.shoppable-image-wrapper.flickity-enabled .flickity-page-dots {
bottom: 0.75rem;
}
}
.shoppable-image-wrapper.flickity-enabled .flickity-page-dots .dot {
height: 4px;
width: 40px;
margin: 0;
border-radius: 0;
background: #000000;
}
.shoppable-image-wrapper.flickity-enabled.slideshow-navigation-buttons--false .flickity-page-dots {
display: none;
}
@media only screen and (max-width: 798px) {
.shoppable-image-wrapper.flickity-enabled.slideshow-navigation-buttons--false .flickity-page-dots {
display: block;
}
}
.shoppable-image-wrapper.flickity-enabled.transparentBackground--false .flickity-page-dots .dot {
opacity: 0.4;
}
.shoppable-image-wrapper.flickity-enabled.transparentBackground--false .flickity-page-dots .dot.is-selected {
opacity: 1;
}
.shoppable-image-wrapper.flickity-enabled .gallery-cell {
width: 100%;
}
.shoppable-image-wrapper.flickity-enabled .gallery-cell:not(:first-child) {
height: auto;
}
.shoppable-image-wrapper.flickity-enabled.text-animation--true .shoppable-image__bottom-bar__call-to-action-container {
opacity: 0;
}
.shoppable-image {
position: relative;
}
.shoppable-image.shoppable-image--active-products .hotspot__wrapper--onboarding-true {
display: none;
}.shoppable-image {
background-color: #8c8b8b;
}@media only screen and (max-width: 480px) {
.shoppable-image {
background-color: transparent;
}
}
.hotspot__wrapper {
--fade-duration: 500ms;
--opacity-duration: 200ms;
--delay: 300ms;
background-color: transparent;
position: absolute;
z-index: 3;
}
.hotspot__wrapper .hotspot__identifier {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.hotspot__wrapper:focus {
outline: 0;
}
.hotspot__wrapper:hover, .hotspot__wrapper:focus, .hotspot__wrapper.has-active-state {
z-index: 4;
}
.hotspot__wrapper:hover .hotspot, .hotspot__wrapper:focus .hotspot, .hotspot__wrapper.has-active-state .hotspot {
outline: 0;
animation: fade-in var(--fade-duration) both;
}
@keyframes fade-in {
0% {
transform: scale(1);
background-color: transparent;
}
10% {
transform: scale(0.6);
}
100% {
transform: scale(0.8);
background-color: var(--shoppable-image-hotspot-color, var(--shoppable-image-background-color));
}
}
@media (prefers-reduced-motion: reduce) {
.hotspot__wrapper:hover .hotspot, .hotspot__wrapper:focus .hotspot, .hotspot__wrapper.has-active-state .hotspot {
animation: none;
}
}
.hotspot__wrapper:hover .hotspot__content-wrapper, .hotspot__wrapper:focus .hotspot__content-wrapper, .hotspot__wrapper.has-active-state .hotspot__content-wrapper {
opacity: 1;
pointer-events: all;
transition: opacity var(--opacity-duration) 100ms;
}
@media (prefers-reduced-motion: reduce) {
.hotspot__wrapper:hover .hotspot__content-wrapper, .hotspot__wrapper:focus .hotspot__content-wrapper, .hotspot__wrapper.has-active-state .hotspot__content-wrapper {
transition: none;
}
}
.hotspot__wrapper:hover .hotspot__content, .hotspot__wrapper:focus .hotspot__content, .hotspot__wrapper.has-active-state .hotspot__content {
width: auto;
height: auto;
}
.hotspot__wrapper:hover .hotspot__content:hover .hotspot__content--active-wrapper, .hotspot__wrapper:focus .hotspot__content:hover .hotspot__content--active-wrapper, .hotspot__wrapper.has-active-state .hotspot__content:hover .hotspot__content--active-wrapper {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 1rem;
}
.hotspot__wrapper:hover .hotspot__content:hover .hotspot__content--active, .hotspot__wrapper:focus .hotspot__content:hover .hotspot__content--active, .hotspot__wrapper.has-active-state .hotspot__content:hover .hotspot__content--active {
background-color: var(--shoppable-image-hover-bg-color);
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
}
.shoppable-image--card-styling-rounded .hotspot__wrapper:hover .hotspot__content:hover .hotspot__content--active, .shoppable-image--card-styling-rounded .hotspot__wrapper:focus .hotspot__content:hover .hotspot__content--active, .shoppable-image--card-styling-rounded .hotspot__wrapper.has-active-state .hotspot__content:hover .hotspot__content--active {
border-radius: 1rem;
}
.shoppable-image--outline-true .hotspot__wrapper:hover .hotspot__content:hover .hotspot__content--active, .shoppable-image--outline-true .hotspot__wrapper:focus .hotspot__content:hover .hotspot__content--active, .shoppable-image--outline-true .hotspot__wrapper.has-active-state .hotspot__content:hover .hotspot__content--active {
border: 1px solid var(--shoppable-image-hotspot-color, var(--shoppable-image-shop-border-color));
}
.hotspot__wrapper:hover .hotspot__content:hover .quick_shop, .hotspot__wrapper:focus .hotspot__content:hover .quick_shop, .hotspot__wrapper.has-active-state .hotspot__content:hover .quick_shop {
opacity: 1;
transform: none;
}
.hotspot {
position: relative;
width: 2rem;
height: 2rem;
cursor: default;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.shoppable-image--outline-false .hotspot {
animation: pulse 3s infinite 600ms, fade-out var(--fade-duration) both var(--delay);
}
@media (prefers-reduced-motion: reduce) {
.shoppable-image--outline-false .hotspot {
animation: none;
}
}
.shoppable-image--outline-true .hotspot {
animation: pulse-with-outline 3s infinite 600ms, fade-out var(--fade-duration) both var(--delay);
}
@media (prefers-reduced-motion: reduce) {
.shoppable-image--outline-true .hotspot {
animation: none;
}
}
@keyframes pulse {
0% {
background: transparent;
}
70% {
background: rgba(var(--shoppable-image-hotspot-color-light, var(--shoppable-image-background-color)), 0.4);
}
100% {
background: transparent;
}
}
@keyframes pulse-with-outline {
0% {
background: transparent;
border: 1px solid transparent;
}
70% {
border: 1px solid var(--shoppable-image-hotspot-color, var(--shoppable-image-background-color));
background: rgba(var(--shoppable-image-hotspot-color-light, var(--shoppable-image-background-color)), 0.4);
}
100% {
background: transparent;
border: 1px solid transparent;
}
}
@keyframes fade-out {
0% {
transform: scale(0.8);
background-color: var(--shoppable-image-hotspot-color, var(--shoppable-image-background-color));
}
30% {
transform: scale(0.6);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
background-color: transparent;
}
}
.hotspot .hotspot__inner-circle {
background-color: var(--shoppable-image-hotspot-color, var(--shoppable-image-background-color));
border-radius: 50%;
width: 1rem;
height: 1rem;
cursor: pointer;
}
.hotspot__content-wrapper {
left: 50%;
opacity: 0;
padding: 2rem;
position: absolute;
z-index: 2;
pointer-events: none;
transition: opacity var(--opacity-duration) var(--delay);
}
@media (prefers-reduced-motion: reduce) {
.hotspot__content-wrapper {
transition: none;
}
}
@media only screen and (max-width: 1024px) {
.hotspot__content-wrapper {
top: 100%;
padding: 0;
transform: translate(-50%, 0);
right: auto;
}
}
.hotspot__content {
position: relative;
background-color: var(--shoppable-image-background-color);
padding: 2rem;
z-index: 1;
text-align: center;
color: #333333;
}
.shoppable-image--outline-true .hotspot__content {
border: 1px solid var(--shoppable-image-hotspot-color, var(--shoppable-image-shop-border-color));
}
.shoppable-image--card-styling-rounded .hotspot__content {
border-radius: 1rem;
}
.hotspot__content .price {
color: var(--shoppable-image-shop-text-color);
}
.hotspot__content .product-rating {
justify-content: center;
margin: 1rem auto 0.5rem;
}
.hotspot__content .hotspot__content--active {
display: none;
}
@media only screen and (max-width: 1024px) {
.hotspot__content {
top: 0.75rem;
}
}
.hotspot__content-overlay-link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.hotspot__product-image {
width: 8rem;
margin: 0 auto;
padding-bottom: 1rem;
/* Adding so that the overlay link includes the image as well */
pointer-events: none;
}
.hotspot__product-title {
font-size: 1rem;
}
.hotspot__product-vendor {
display: block;
margin-bottom: 0.5rem;
}
.shoppable-image__bottom-bar {
display: flex;
}
.shoppable-image__bottom-bar.shoppable-image__bottom-bar--active-products .shoppable-image__bottom-bar__product-thumbnail--onboarding-true {
display: none;
}
@media only screen and (max-width: 798px) {
.shoppable-image__bottom-bar {
flex-wrap: wrap;
align-items: center;
}
}
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__call-to-action,
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__product-thumbnail {
width: 100%;
}
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__call-to-action {
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem;
background-color: var(--shoppable-image-cta-bg-color, var(--shoppable-image-background-color));
}
@media only screen and (max-width: 1024px) {
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__call-to-action {
max-width: 100%;
}
}
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__call-to-action .subtitle + .button-grid-container {
margin-top: 1rem;
}
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__call-to-action .subtitle p:last-child {
margin-bottom: 0;
}
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__call-to-action > .button-grid-container {
max-width: max-content;
margin: 0;
}
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__product-thumbnail {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__product-thumbnail .image__container {
width: 100%;
}
@media only screen and (min-width: 799px) {
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__product-thumbnail {
max-width: 25%;
}
}
@media only screen and (max-width: 798px) {
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__product-thumbnail {
flex: 1 1 25%;
}
}
.shoppable-image__bottom-bar.shoppable-image__bottom-bar-image-style--full-width {
max-height: 300px;
}
@media only screen and (max-width: 1024px) {
.shoppable-image__bottom-bar.shoppable-image__bottom-bar-image-style--full-width {
max-height: none;
align-items: stretch;
}
}
.shoppable-image__bottom-bar.shoppable-image__bottom-bar-image-style--full-width img,
.shoppable-image__bottom-bar.shoppable-image__bottom-bar-image-style--full-width .image__container,
.shoppable-image__bottom-bar.shoppable-image__bottom-bar-image-style--full-width .image-element__wrap {
height: 100%;
}
@media only screen and (max-width: 798px) {
.shoppable-image__bottom-bar.shoppable-image__bottom-bar-image-style--full-width img,
.shoppable-image__bottom-bar.shoppable-image__bottom-bar-image-style--full-width .image__container,
.shoppable-image__bottom-bar.shoppable-image__bottom-bar-image-style--full-width .image-element__wrap {
max-height: 400px;
}
}
.shoppable-image__bottom-bar.shoppable-image__bottom-bar-image-style--full-width img {
object-fit: cover;
}
.shoppable-image__bottom-bar .shoppable-image__bottom-bar__product-thumbnail-overlay {
background-color: var(--shoppable-image-hover-bg-color);
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity 0.3s ease-in;
z-index: 2;
}
.shoppable-image__bottom-bar .shoppable-image__call-to-action-heading {
margin: 0;
padding: 0;
font-size: 34px;
}
.shoppable-image__bottom-bar .shoppable-image__call-to-action-heading + .subtitle,
.shoppable-image__bottom-bar .shoppable-image__call-to-action-heading + .button-grid-container,
.shoppable-image__bottom-bar .shoppable-image__call-to-action-heading + .subtitle + .button-grid-container {
margin-top: 1rem;
}
/* #Font-Face
================================================== */
/* This is the proper syntax for an @font-face file.
Upload your font files to Assets and then
copy your FontName into code below and remove
comment brackets */
/* @font-face {
font-family: 'FontName';
src: url('FontName.eot');
src: url('FontName.eot?iefix') format('eot'),
url('FontName.woff') format('woff'),
url('FontName.ttf') format('truetype'),
url('FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/
/* #Custom Styles
================================================== */
#whatsapp-widget.widget-clicked #ww-chat, #whatsapp-widget.widget-hovered #ww-chat {
display: block;
}
#whatsapp-widget.ww-extended .ww-chat{
display:none;
}
li.menu_hasicon {
position: relative;
padding-left: 45px;
}
.ww-icon a.ww-link {
display: none !important;
}
li.menu_hasicon:before {
content: "";
left: 0;
position: absolute;
width: 35px;
height: 35px;
background-size: cover!important;
top: 7px;
}
.nav-mobile__tier-1-link span,
.nav-mobile__tier-2-link span,
.nav-mobile__tier-3-link span {
color: #000000;
}
/* Mega menu full background */
.mega-menu,
.mega-menu__content {
background-color: rgba(79, 173, 170, 0.18) !important;
}
/* Individual columns background */
.mega-menu__content .mega-menu__column {
background-color: rgba(79, 173, 170, 0.18) !important;
}
.mega-menu__content {
backdrop-filter: blur(5px);
}
* Top menu */
.header__menu-item,
.header__menu-item span {
color: #1a1a1a !important;
}
/* Hover & active */
.header__menu-item:hover,
.header__menu-item--active {
color: #000000 !important;
}
/* Mega menu links */
.mega-menu__content a {
color: #1a1a1a !important;
font-weight: 400;
overflow : hidden;
}
/* Hover effect */
.mega-menu__content a:hover {
color:rgba(53, 216, 211, 0.84) !important;
text-decoration: none;
overflow : hidden;
}
.mega-menu__content svg,
.mega-menu__content img {
width: 75%;
height: auto;
overflow : hidden;
}
.mega-menu__column {
padding: 32px 28px;
overflow : hidden;
}
.mega-menu__content {
border-radius: 6px;
overflow : hidden;
}
.menu-drawer__inner-container {
background-color: rgba(79, 173, 170, 0.18) !important;
overflow : hidden;
}
/* Mega menu glass effect */
[data-nav-desktop-details][open]
.nav-desktop__tier-2--full-width-menu {
width: 100%;
background: rgba(255, 255, 255, 0.70); /* light transparent */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* Safari support */
border: 1px solid rgba(255, 255, 255, 0.3);
}
.nav-desktop__tier-1-link span, .nav-desktop__tier-2-link span, .nav-desktop__tier-3-link span {
color: #000000;
}
.nav-desktop__tier-1-link:hover, .nav-desktop__tier-1-link[aria-expanded=true] {
border-bottom: solid 1px #000000;
}
.dropdown_column ul.dropdown_title {
border-bottom: solid 1px #000000;
padding-bottom: 10px;
}
.global-button:hover:not([disabled]), .global-button:active, product-cta:hover:not([disabled]), product-cta:active, .custom-html-container button:hover:not([disabled]), .custom-html-container button:active, .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover:not([disabled]), .shopify-payment-button__button.shopify-payment-button__button--unbranded:active, .sidebar .faceted-active-filters__clear:hover:not([disabled]), .sidebar .faceted-active-filters__clear:active, .sidebar .faceted-active-filters__remove-filter:hover:not([disabled]), .sidebar .faceted-active-filters__remove-filter:active {
background: #1A1A2E;
border-color: #1A1A2E;
color: var(--button-color-text-hover, var(--button-color-text, #ffffff));
}
@media only screen and (min-width: 481px) {
.global-button--banner-desktop {
--button-color-border: #1A1A2E;
--button-color-background: transparent;
--button-color-text: #008686;
--button-color-border-hover: #1A1A2E;
--button-color-background-hover: #1A1A2E;
--button-color-text-hover: #ffffff;
}
}
@media only screen and (max-width: 480px) {
.featured-link--half .description {
font-size: inherit;
text-align: center;
}
}@media only screen and (max-width: 480px) {
.featured-link--half .collection_title {
color:#B8973A;
text-align: center;
}
}
.global-button--banner-highlighted {
--button-color-border: #0a5858;
--button-color-background: var(--shopify-editor-setting-banner_button_color);
--button-color-text: #ffffff;
--button-color-border-hover: #1A1A2E;
--button-color-background-hover: #1A1A2E;
--button-color-text-hover: #ffffff;
}
@media only screen and (max-width: 480px) {
.featured-link--half .info {
position: static;
transform: translateY(0);
padding: 2em 0;
margin-bottom: -44px;
}
}
/* img[data-sizes=auto].lazyloaded {
height: auto;
margin-bottom: -100px;
margin-top: -50px;
} */
.caption-content.align-center h1 {
color:rgb(255, 255, 255); /* change to your desired color */
}
/* @media only screen and (max-width: 480px) {
.image-element__wrap {
overflow: hidden;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: 510px;
} */
.flickity-page-dots {
bottom: -4px;
}
@media only screen and (max-width: 798px) {
.caption .pretext {
font-size: 12.666666666666666px;
margin-top: -49px;
margin-bottom: 61px;
}
}
@media only screen and (max-width: 1024px) {
.button-grid-container--column-tablet {
grid-auto-flow: row;
margin-top: 137px;
}
}
@media only screen and (max-width: 798px) {
#header a.mobile_logo img {
width: auto;
max-width: 150px;
max-height: 93px;
}
}
@media only screen and (max-width: 798px) {
#header .top-bar a.mobile_logo {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 18px;
line-height: 34px;
z-index: 5;
width: 50%;
height: auto;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding-top: 15px;
padding-bottom: 15px;
}
}
@media only screen and (max-width: 480px) {
@media only screen and (max-width: 798px) {
#header a.mobile_logo img {
width: auto;
max-width: 210px;
max-height: 106px;
}
}
}
.caption-content.align-center .pretext p {
color: #ffffff; /* white text */
font-size: 16px; /* change size as needed */
}
.global-button--banner-text {
--button-color-border: #1A1A2E;
--button-color-background: #1A1A2E;
--button-color-text: #ffffff;
--button-color-border-hover: #003836;
--button-color-background-hover: #003836;
--button-color-text-hover: #ffffff;
}
@media only screen and (min-width: 481px) {
.global-button--banner-desktop {
--button-color-border: #1A1A2E;
--button-color-background: #1A1A2E;
--button-color-text: #ffffff;
--button-color-border-hover: #1A1A2E;
--button-color-background-hover: #1A1A2E;
--button-color-text-hover: #ffffff;
}
}
}
.global-button{
--button-color-border: #1A1A2E;
--button-color-background: #1A1A2E;
--button-color-text: #ffffff;
--button-color-border-hover: #003836;
--button-color-background-hover: #003836;
--button-color-text-hover: #f3e7e7;
}
.homepage-slideshow .caption .subtitle,
.shopify-section--slideshow .caption .subtitle,
.shopify-section--image-with-text-overlay .caption .subtitle {
font-size: 30px;
color: White !important;
}
@media only screen and (min-width: 481px) {
.global-button--banner-desktop {
--button-color-border: #1A1A2E;
--button-color-background: #1A1A2E;
--button-color-text: #ffffff;
--button-color-border-hover: #1A1A2E;
--button-color-background-hover: #1A1A2E;
--button-color-text-hover: #ffffff;
}
}
@media only screen and (min-width: 481px) {
.global-button--banner-text-desktop {
--button-color-border: #1A1A2E;
--button-color-background: #1A1A2E;
--button-color-text: #ffffff;
--button-color-border-hover: #003836;
--button-color-background-hover: #003836;
--button-color-text-hover: #ffffff;
}
}
@media only screen and (min-width: 481px) {
.global-button {
--button-color-border: #1A1A2E;
--button-color-background: #1A1A2E;
--button-color-text: #ffffff;
--button-color-border-hover: #264b4b;
--button-color-background-hover: #264b4b;
--button-color-text-hover: #ffffff;
}
}
.global-button--banner-highlighted {
--button-color-border: #1A1A2E;
--button-color-background: #1A1A2E;
--button-color-text: #ffffff;
--button-color-border-hover: #264b4b;
--button-color-background-hover: #264b4b;
--button-color-text-hover: #ffffff;
}
.global-button--banner-text-highlighted {
--button-color-border: #1A1A2E;
--button-color-background: #1A1A2E;
--button-color-text: #ffffff;
--button-color-border-hover: #264b4b;
--button-color-background-hover: #264b4b;
--button-color-text-hover: #ffffff;
}
.caption-content.align-center h1 {
color: rgb(0 0 0);
}
.page-diamonds-2 .caption-content.align-center h1 {
color: #fff;
font-size: 50px;
}
#banner-template--19880505770320__079109b8-1be5-4632-92a0-b5ab0549d32a
h1.headline,
#banner-template--19954410193232__e899a737-dfdc-4ed8-9a28-688d172e323a
h1.headline,
#banner-template--19954314051920__e899a737-dfdc-4ed8-9a28-688d172e323a
h1.headline,
#banner-template--19956313784656__efb5caa0-e677-4426-8303-3f131c331845,
h1.headline,
#banner-template--25165849035088__efb5caa0-e677-4426-8303-3f131c331845
h1.headline {
color: #fff;
}
#banner-template--19956313653584__efb5caa0-e677-4426-8303-3f131c331845 h1 {
font-size: 40px;
color: #fff !important;
}
@media (min-width: 320px) and (max-width: 798px) {
.footer .toggle_content {
padding: 0 0px;
}
span.mobile-menu-title {
display: none !important;
}
.top-bar .top-bar--right .icon-search {
padding-right: 0px;
}
#header .top-bar a.mobile_logo {
left: -33px;
}
h2.rich-text__heading.title {
font-size: 30px;
}
#banner-template--19880505999696__e899a737-dfdc-4ed8-9a28-688d172e323a
.caption.position-right {
bottom: 241px;
text-shadow: 0 2px 6px rgb(0 0 0);
}
img.footer-logo {
max-width: 100% !important;
margin: 0 0% 0px;
}
footer .social_icons {
margin-top: 0px;
}
.footer ul {
padding: 0px 0 0 0;
}
.page-diamonds-2 .caption-content.align-center h1 {
font-size: 40px;
line-height: 44px;
}
} /* fix: close orphan @media (min-width:320px) and (max-width:798px) opened at line 18872 — was trapping all v39, v39.1, and v40 CSS in mobile-only scope */
/* Enhanced dropdown menu item hovers */
.dropdown_column li a {
transition: color 0.25s ease, padding-left 0.25s ease;
}
.dropdown_column li a:hover {
color: #B8973A !important;
padding-left: 4px;
}
/* ── navy header + ivory dropdowns ─────── */
.main-nav,
.feature_image.editor-hover--true .main-nav {
background: var(--hgbj-navy, #1A1A2E) !important;
border-color: var(--hgbj-navy, #1A1A2E) !important;
}
.search__results,
.header .search__results,
.nav-desktop__tier-2,
.nav-desktop__tier-2--full-width-menu,
.nav-desktop__tier-2--dropdown,
.nav-desktop__tier-3,
.dropdown,
.feature_image.editor-hover--true .dropdown {
background: var(--hgbj-ivory, #F9F7F4) !important;
border-color: var(--hgbj-divider, #D4C4AF) !important;
}
.search__results a,
.nav-desktop__tier-2 a,
.nav-desktop__tier-3 a {
color: var(--hgbj-dark, #1C1C1C) !important;
}
.search__results a:hover,
.nav-desktop__tier-2 a:hover,
.nav-desktop__tier-3 a:hover {
color: var(--hgbj-gold, #B8973A) !important;
}
/* luxury button treatment overrides */
.global-button--primary,
.btn-primary,
.button--primary,
button.btn--primary {
background: var(--hgbj-navy, #1A1A2E) !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
border: 1px solid var(--hgbj-navy, #1A1A2E) !important;
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 12px;
padding: 16px 32px;
min-height: 48px;
border-radius: 0 !important;
box-shadow: none !important;
transition: background 0.3s var(--hgbj-ease, ease),
color 0.3s var(--hgbj-ease, ease);
max-width: 320px;
width: auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.global-button--primary:hover,
.btn-primary:hover,
.button--primary:hover {
background: var(--hgbj-gold, #B8973A) !important;
color: var(--hgbj-navy, #1A1A2E) !important;
border-color: var(--hgbj-gold, #B8973A) !important;
}
.global-button:not(.global-button--primary),
.btn-secondary,
.button--secondary {
background: transparent !important;
color: var(--hgbj-navy, #1A1A2E) !important;
border: 1px solid var(--hgbj-navy, #1A1A2E) !important;
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 12px;
padding: 15px 31px;
min-height: 48px;
border-radius: 0 !important;
transition: all 0.3s var(--hgbj-ease, ease);
max-width: 320px;
width: auto;
}
.global-button:not(.global-button--primary):hover {
background: var(--hgbj-navy, #1A1A2E) !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
}
.hgbj-cta-section .global-button--primary,
.shopify-section--consultation-cta .global-button--primary {
background: var(--hgbj-ivory, #F9F7F4) !important;
color: var(--hgbj-navy, #1A1A2E) !important;
border-color: var(--hgbj-ivory, #F9F7F4) !important;
}
.hgbj-cta-section .global-button--primary:hover,
.shopify-section--consultation-cta .global-button--primary:hover {
background: var(--hgbj-gold, #B8973A) !important;
border-color: var(--hgbj-gold, #B8973A) !important;
}
.newsletter__form button,
footer button[type="submit"],
.contact-form button[type="submit"] {
background: var(--hgbj-navy, #1A1A2E) !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
border: 1px solid var(--hgbj-navy, #1A1A2E) !important;
border-radius: 0 !important;
max-width: 200px !important;
width: auto !important;
padding: 14px 28px !important;
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 12px;
font-weight: 400;
align-self: center;
margin: 0 auto;
display: block;
}
/* uniform collection tile aspect ratio (2.5.6) */
.shopify-section--collection-list .collection-grid-item,
.shopify-section--collection-list .featured-collection {
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--hgbj-ivory, #F9F7F4);
}
.shopify-section--collection-list .collection-grid-item > a,
.shopify-section--collection-list .collection-grid-item .wrapper-image {
height: 100%;
display: block;
}
.shopify-section--collection-list .collection-grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.shopify-section--collection-list .collection-grid-item:hover img {
transform: scale(1.04);
}
.shopify-section--collection-list .collection-grid-item__caption,
.shopify-section--collection-list .collection-grid-item__title {
padding: 20px 24px;
text-align: center;
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--hgbj-navy, #1A1A2E);
background: var(--hgbj-ivory, #F9F7F4);
}
/* HGBJ v25 collection-list editorial polish */
.shopify-section--collection-list .collection-grid-item__title {
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 14px;
color: var(--hgbj-navy, #1A1A2E);
}
@media (max-width: 768px) {
.shopify-section--collection-list .featured-collections {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 12px;
padding: 0 16px;
scrollbar-width: none;
}
.shopify-section--collection-list .featured-collections::-webkit-scrollbar {
display: none;
}
.shopify-section--collection-list .collection-grid-item {
flex: 0 0 78%;
scroll-snap-align: start;
}
}
/* HGBJ v25 bespoke notice on PDP */
.hgbj-bespoke-notice {
background: rgba(184, 151, 58, 0.06);
border-left: 3px solid var(--hgbj-gold, #B8973A);
padding: 12px 16px;
margin: 16px 0;
font-size: 13px;
line-height: 1.6;
color: var(--hgbj-body, #5C5046);
}
/* HGBJ v25 — accessibility hardening */
.hgbj-skip-link {
position: absolute;
top: -100px;
left: 0;
background: var(--hgbj-navy, #1A1A2E);
color: var(--hgbj-ivory, #F9F7F4);
padding: 12px 20px;
z-index: 10000;
text-decoration: none;
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 12px;
transition: top 0.2s ease;
}
.hgbj-skip-link:focus,
.hgbj-skip-link:focus-visible {
top: 0;
outline: 2px solid var(--hgbj-gold, #B8973A);
outline-offset: 2px;
}
/* Universal focus-visible guarantee */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
outline: 2px solid var(--hgbj-gold, #B8973A) !important;
outline-offset: 3px !important;
}
/* prefers-reduced-motion global safety */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hgbj-video-hero__video { display: none; }
.hgbj-video-hero__poster { opacity: 1 !important; }
.hgbj-tb-ticker { animation: none !important; }
}
/* Accessible gold text on light backgrounds */
.text-gold-on-light,
[class*="gold-link"]:not(.on-dark) {
color: #8A6F26;
}
/* ═════════════════════════════════════════════════════ */
/* NAVY HEADER (Option C) — full inversion */
/* ═════════════════════════════════════════════════════ */
header#header {
background: var(--hgbj-navy, #1A1A2E) !important;
border-bottom: 1px solid rgba(184, 151, 58, 0.25);
}
/* Top-row utility links (phone, Our Story, Blog, Contact Us, Login) */
header#header .top-bar,
header#header .top-bar a,
header#header .utility-nav,
header#header .utility-nav a,
header#header .header__top-bar,
header#header .header__top-bar a,
header#header .top_nav,
header#header .top_nav a {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
header#header .top-bar a:hover,
header#header .utility-nav a:hover,
header#header .header__top-bar a:hover,
header#header .top_nav a:hover {
color: var(--hgbj-gold, #B8973A) !important;
}
/* Primary nav links (tier 1) */
header#header .nav-desktop__tier-1-link,
header#header .nav-desktop__tier-1-link span,
header#header .main-nav > ul > li > a,
header#header .main-nav a.tier-1 {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
header#header .nav-desktop__tier-1-link:hover,
header#header .nav-desktop__tier-1-link:hover span,
header#header .main-nav > ul > li > a:hover {
color: var(--hgbj-gold, #B8973A) !important;
}
/* Dropdown caret / chevron indicators */
header#header .nav-desktop__tier-1-link::after,
header#header .main-nav .menu_hasicon > a::before,
header#header .main-nav .dropdown-arrow {
color: var(--hgbj-gold, #B8973A) !important;
border-color: var(--hgbj-gold, #B8973A) !important;
}
/* Icons */
header#header .icon-search,
header#header .icon-cart,
header#header .icon-user,
header#header .icon-account,
header#header .icon-menu,
header#header .header__icon,
header#header button[aria-label*="cart" i],
header#header button[aria-label*="search" i],
header#header button[aria-label*="account" i],
header#header a[aria-label*="login" i] {
color: var(--hgbj-ivory, #F9F7F4) !important;
fill: var(--hgbj-ivory, #F9F7F4) !important;
stroke: var(--hgbj-ivory, #F9F7F4) !important;
}
header#header .icon-search:hover,
header#header .icon-cart:hover,
header#header .icon-user:hover,
header#header .icon-menu:hover {
color: var(--hgbj-gold, #B8973A) !important;
fill: var(--hgbj-gold, #B8973A) !important;
stroke: var(--hgbj-gold, #B8973A) !important;
}
/* Cart count bubble */
header#header .cart-count,
header#header .cart_count,
header#header [data-cart-count] {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
/* Search input (inline, not dropdown) */
header#header .header__search input,
header#header .search__input,
header#header input[type="search"] {
background: transparent !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
border: 1px solid rgba(249, 247, 244, 0.35) !important;
}
header#header .header__search input::placeholder,
header#header .search__input::placeholder,
header#header input[type="search"]::placeholder {
color: rgba(249, 247, 244, 0.6) !important;
}
header#header .header__search input:focus,
header#header input[type="search"]:focus {
border-color: var(--hgbj-gold, #B8973A) !important;
outline: none !important;
}
/* Separator lines between top-row items */
header#header .top-bar li + li,
header#header .utility-nav li + li {
border-left-color: rgba(184, 151, 58, 0.3) !important;
}
/* Mobile hamburger */
@media (max-width: 768px) {
header#header .mobile-nav__icon,
header#header .hamburger-icon,
header#header [class*="menu-toggle"] {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
}
/* trust bar hairline */
.hgbj-trust-bar {
border-bottom: 1px solid rgba(184, 151, 58, 0.3);
}
/* ═════════════════════════════════════════════════════ */
/* bulletproof skip-link hide */
/* ═════════════════════════════════════════════════════ */
.hgbj-skip-link {
position: absolute !important;
top: -200px !important;
left: 0 !important;
width: auto !important;
height: auto !important;
background: var(--hgbj-navy, #1A1A2E) !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
padding: 12px 20px !important;
z-index: 10000 !important;
text-decoration: none !important;
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif) !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
font-size: 12px !important;
transition: top 0.2s ease !important;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.hgbj-skip-link:focus,
.hgbj-skip-link:focus-visible {
top: 0 !important;
clip: auto !important;
clip-path: none !important;
overflow: visible !important;
}
/* ═════════════════════════════════════════════════════ */
/* hero secondary CTA on dark overlay */
/* ═════════════════════════════════════════════════════ */
.hgbj-video-hero__buttons .global-button:not(.global-button--primary),
.hgbj-video-hero__buttons .global-button--secondary {
background: transparent !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
border: 1px solid rgba(249, 247, 244, 0.6) !important;
}
.hgbj-video-hero__buttons .global-button:not(.global-button--primary):hover,
.hgbj-video-hero__buttons .global-button--secondary:hover {
background: var(--hgbj-gold, #B8973A) !important;
color: var(--hgbj-navy, #1A1A2E) !important;
border-color: var(--hgbj-gold, #B8973A) !important;
}
/* ═════════════════════════════════════════════════════ */
/* page banner image consistency
* Bare .page-banner and [class*="page-banner"] selectors
* inadvertently matched body.page-banner (Shopify auto-
* generates that body class for templateSuffix=banner),
* forcing body to height:360-420px + overflow:hidden,
* which clipped all content below the header. Scoped each
* bare selector with .section-wrapper ancestor so the
* rules still target the intended hero header.banner.page-
* banner inside main.section-wrapper but cannot match body. */
/* ═════════════════════════════════════════════════════ */
.section-wrapper .page-banner,
.page-banner__wrapper,
.template-banner,
.page-hero-image,
.section-wrapper [class*="page-banner"] .feature_image {
position: relative;
width: 100%;
height: 360px;
min-height: 320px;
overflow: hidden;
}
@media (min-width: 1024px) {
.section-wrapper .page-banner,
.template-banner,
.page-hero-image,
.section-wrapper [class*="page-banner"] .feature_image {
height: 420px;
}
}
@media (max-width: 768px) {
.section-wrapper .page-banner,
.template-banner,
.page-hero-image,
.section-wrapper [class*="page-banner"] .feature_image {
height: 260px;
min-height: 240px;
}
}
.section-wrapper .page-banner img,
.template-banner img,
.page-hero-image img,
.section-wrapper [class*="page-banner"] img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
.section-wrapper [class*="page-banner"][style*="background-image"],
.feature_image[style*="background-image"] {
height: 360px;
min-height: 320px;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
@media (min-width: 1024px) {
.section-wrapper [class*="page-banner"][style*="background-image"] {
height: 420px;
}
}
@media (max-width: 768px) {
.section-wrapper [class*="page-banner"][style*="background-image"] {
height: 260px;
}
}
/* ═══════════════════════════════════════════════════════ */
/* -A: FINAL TEAL NUKE — CSS variable + hover overrides */
/* These override the in-file rulesets at lines 18533-18810 */
/* which set button CSS custom-properties to #1A1A2E. */
/* ═══════════════════════════════════════════════════════ */
/* Mega-menu hover washes → ivory */
.mega-menu,
.mega-menu__content,
.mega-menu__content .mega-menu__column,
.menu-drawer__inner-container {
background-color: var(--hgbj-ivory, #F9F7F4) !important;
}
.mega-menu__content a:hover {
color: var(--hgbj-gold, #B8973A) !important;
}
/* Global-button hover state — route primary to gold, secondary to navy */
.global-button:hover:not([disabled]),
.global-button:active,
product-cta:hover:not([disabled]),
product-cta:active,
.custom-html-container button:hover:not([disabled]),
.custom-html-container button:active,
.shopify-payment-button__button.shopify-payment-button__button--unbranded:hover:not([disabled]),
.shopify-payment-button__button.shopify-payment-button__button--unbranded:active,
.sidebar .faceted-active-filters__clear:hover:not([disabled]),
.sidebar .faceted-active-filters__clear:active,
.sidebar .faceted-active-filters__remove-filter:hover:not([disabled]),
.sidebar .faceted-active-filters__remove-filter:active {
background: var(--hgbj-navy, #1A1A2E) !important;
border-color: var(--hgbj-navy, #1A1A2E) !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
}
.global-button--primary:hover:not([disabled]),
.global-button--primary:active {
background: var(--hgbj-gold, #B8973A) !important;
border-color: var(--hgbj-gold, #B8973A) !important;
color: var(--hgbj-navy, #1A1A2E) !important;
}
/* Button CSS custom-property system — navy/gold */
.global-button,
.global-button--banner-text,
.global-button--banner-highlighted {
--button-color-border: var(--hgbj-navy, #1A1A2E) !important;
--button-color-background: var(--hgbj-navy, #1A1A2E) !important;
--button-color-text: var(--hgbj-ivory, #F9F7F4) !important;
--button-color-border-hover: var(--hgbj-gold, #B8973A) !important;
--button-color-background-hover: var(--hgbj-gold, #B8973A) !important;
--button-color-text-hover: var(--hgbj-navy, #1A1A2E) !important;
}
@media only screen and (min-width: 481px) {
.global-button--banner-desktop,
.global-button--banner-text-desktop {
--button-color-border: var(--hgbj-navy, #1A1A2E) !important;
--button-color-background: transparent !important;
--button-color-text: var(--hgbj-ivory, #F9F7F4) !important;
--button-color-border-hover: var(--hgbj-gold, #B8973A) !important;
--button-color-background-hover: var(--hgbj-gold, #B8973A) !important;
--button-color-text-hover: var(--hgbj-navy, #1A1A2E) !important;
}
}
/* Banner highlighted variant used on product banners — keep primary navy */
.global-button--banner-highlighted {
--button-color-border: var(--hgbj-navy, #1A1A2E) !important;
--button-color-background: var(--hgbj-navy, #1A1A2E) !important;
}
/* ═══════════════════════════════════════════════════════ */
/* Discoverability + CTA weight */
/* ═══════════════════════════════════════════════════════ */
/* Trust-bar link inherits item styling */
.hgbj-tb-item--link {
color: inherit;
text-decoration: none;
transition: color 0.25s ease;
}
.hgbj-tb-item--link:hover {
color: var(--hgbj-gold, #B8973A);
}
/* Primary CTA — soft atelier shadow + arrow glyph + hover lift */
.global-button--primary,
.btn-primary,
.button--primary,
.hgbj-pdp-sticky__cta {
position: relative;
box-shadow: 0 4px 14px rgba(184, 151, 58, 0.18) !important;
transition: background 0.3s var(--hgbj-ease, ease),
color 0.3s var(--hgbj-ease, ease),
transform 0.22s var(--hgbj-ease, ease),
box-shadow 0.3s var(--hgbj-ease, ease) !important;
}
.global-button--primary::after,
.btn-primary::after,
.hgbj-pdp-sticky__cta::after {
content: none; /* v40.2 fix Bug 1.1: removed stale primary-CTA arrow (shipped as U+0011 control + literal 92). Cartier and Tiffany do not use arrow glyphs on primary CTAs at luxury tier. */
display: inline-block;
margin-left: 10px;
transition: transform 0.25s var(--hgbj-ease, ease);
font-family: inherit;
font-size: 1em;
vertical-align: baseline;
}
.global-button--primary:hover,
.btn-primary:hover,
.hgbj-pdp-sticky__cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(184, 151, 58, 0.32) !important;
}
/* fix: Bug 1.1 companion — removed :hover::after transform (orphaned after the ::after block above was deleted) */
/* Collection-list tile captions — add gold arrow affordance + solid divider */
.shopify-section--collection-list .collection-grid-item,
.shopify-section--collection-list .featured-collection {
border: 1px solid var(--hgbj-divider, #D4C4AF);
transition: border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.shopify-section--collection-list .collection-grid-item:hover,
.shopify-section--collection-list .featured-collection:hover {
border-color: var(--hgbj-gold, #B8973A);
box-shadow: 0 12px 32px rgba(26, 26, 46, 0.1);
}
.shopify-section--collection-list .collection-grid-item__title::after,
.shopify-section--collection-list .collection-grid-item__caption::after {
content: none; /* v40.2 fix Bug 1.1 duplicate: same broken remnant in collection-tile caption ::after */
display: inline-block;
color: var(--hgbj-gold, #B8973A);
margin-left: 6px;
transition: transform 0.25s var(--hgbj-ease, ease);
}
.shopify-section--collection-list .collection-grid-item:hover .collection-grid-item__title::after,
.shopify-section--collection-list .collection-grid-item:hover .collection-grid-item__caption::after {
transform: translateX(4px);
}
/* Reviews widget container (dormant until app installed) */
.hgbj-reviews-widget { min-height: 0; }
.hgbj-reviews-widget:empty { display: none; }
/* ═══════════════════════════════════════════════════════ */
/* Mobile polish */
/* ═══════════════════════════════════════════════════════ */
/* Mobile nav contrast guarantee — explicit navy on ivory */
.nav-mobile__tier-1-link span,
.nav-mobile__tier-2-link span,
.nav-mobile__tier-3-link span,
#mobile_menu a,
#mobile_menu .hgbj-acc-trigger {
color: var(--hgbj-navy, #1A1A2E) !important;
}
#mobile_menu,
.mobile-nav-overlay,
.mobile-menu,
.mobile-drawer {
background: var(--hgbj-ivory, #F9F7F4) !important;
}
/* PDP sticky + mobile CTA bar — small-screen coexistence */
@media (max-width: 400px) {
/* Compact the mobile CTA bar labels on iPhone SE sized devices */
.mobile-cta-bar .hgbj-mobile-cta-bar__label,
.mobile-cta-bar .mobile-cta-bar__label {
font-size: 9px !important;
letter-spacing: 0.04em !important;
}
/* Shorten the PDP sticky CTA button */
.hgbj-pdp-sticky__cta {
padding: 10px 10px !important;
font-size: 10px !important;
letter-spacing: 0.06em !important;
}
.hgbj-pdp-sticky__cta::after { display: none !important; }
.hgbj-pdp-sticky__text { display: none; }
}
/* Mobile CTA bar labels — 11px with wider letter-spacing for legibility */
@media (max-width: 768px) and (min-width: 401px) {
.mobile-cta-bar .hgbj-mobile-cta-bar__label,
.mobile-cta-bar .mobile-cta-bar__label {
font-size: 11px !important;
letter-spacing: 0.08em !important;
font-weight: 500;
}
}
/* Video hero mobile — balance object position to keep subject centered */
@media (max-width: 414px) {
.hgbj-video-hero__poster,
.hgbj-video-hero__video,
.hgbj-video-hero .hgbj-video-hero__mobile-image {
object-position: center center !important;
}
}
/* Trust-bar mobile — tighten so it never pushes content below the fold */
@media (max-width: 380px) {
.hgbj-trust-bar {
height: 22px !important;
font-size: 9px !important;
}
.hgbj-tb-mobile .hgbj-tb-ticker__copy {
font-size: 9px !important;
letter-spacing: 0.1em !important;
}
}
/* Reduce padding on in-section content on small phones */
@media (max-width: 380px) {
.hgbj-testimonial-carousel .hgbj-tc__viewport {
padding: 0 4% !important;
}
.hgbj-tc__arrow--prev { left: 4px !important; }
.hgbj-tc__arrow--next { right: 4px !important; }
}
/* ═══════════════════════════════════════════════════════ */
/* System tokens — defined for future refactor sweeps */
/* ═══════════════════════════════════════════════════════ */
:root {
/* body font corrected to EB Garamond (locked brand system).
Was Söhne/Inter Tight — a sans-serif that read as tech/SaaS, inconsistent
with the Cormorant Garamond display + editorial jewellery aesthetic.
EB Garamond 400 + 400 italic + 700 must be preloaded in theme.liquid. */
--hgbj-font-body: 'EB Garamond', Georgia, 'Times New Roman', Times, serif;
/* Type scale — modular 1.333 */
--hgbj-fs-display-1: 52px; /* hero titles */
--hgbj-fs-display-2: 40px; /* section headings */
--hgbj-fs-display-3: 30px; /* sub-section / consultation-cta heading */
--hgbj-fs-display-4: 22px; /* small display / step titles */
--hgbj-fs-body-lg: 18px;
--hgbj-fs-body: 16px;
--hgbj-fs-body-sm: 14px;
--hgbj-fs-caption: 12px;
--hgbj-fs-micro: 10px;
/* Weight scale */
--hgbj-fw-display: 300;
--hgbj-fw-body: 400;
--hgbj-fw-emphasis: 600;
/* Gold opacity tiers */
--hgbj-gold-soft: rgba(184, 151, 58, 0.8);
--hgbj-gold-ghost: rgba(184, 151, 58, 0.4);
--hgbj-gold-trace: rgba(184, 151, 58, 0.15);
/* Line-height scale */
--hgbj-lh-tight: 1.15;
--hgbj-lh-snug: 1.3;
--hgbj-lh-normal: 1.55;
--hgbj-lh-loose: 1.7;
}
/* Apply body font token globally — single authoritative rule */
html body {
font-family: var(--hgbj-font-body);
}
body p,
body li,
body dd,
body span:not([class*="hgbj-tb-"]) {
line-height: var(--hgbj-lh-normal);
}
/* ═══════════════════════════════════════════════════════ */
/* Search empty state + article polish + cart */
/* ═══════════════════════════════════════════════════════ */
/* Search empty state */
.hgbj-search-empty {
max-width: 540px;
margin: 60px auto;
padding: 0 24px;
}
.hgbj-search-empty__title {
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(22px, 3vw, 30px);
color: var(--hgbj-navy, #1A1A2E);
font-weight: 400;
margin: 0 0 12px;
letter-spacing: 0.02em;
}
.hgbj-search-empty__title em {
font-style: italic;
color: var(--hgbj-gold, #B8973A);
}
.hgbj-search-empty__hint {
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--hgbj-muted, #9A8C7E);
margin: 0 auto 28px;
}
.hgbj-search-empty__links {
list-style: none;
padding: 0;
margin: 0 0 32px;
display: flex;
flex-direction: column;
gap: 12px;
text-align: center;
}
.hgbj-search-empty__links a {
display: inline-block;
color: var(--hgbj-navy, #1A1A2E);
text-decoration: none;
border-bottom: 1px solid var(--hgbj-divider, #D4C4AF);
padding: 8px 16px;
letter-spacing: 0.08em;
transition: color 0.25s ease, border-color 0.25s ease;
}
.hgbj-search-empty__links a:hover {
color: var(--hgbj-gold, #B8973A);
border-color: var(--hgbj-gold, #B8973A);
}
.hgbj-search-empty__whatsapp {
text-align: center;
margin: 20px 0 36px;
font-size: 13px;
letter-spacing: 0.08em;
}
.hgbj-search-empty__whatsapp a {
color: var(--hgbj-gold, #B8973A);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.25s ease;
}
.hgbj-search-empty__whatsapp a:hover {
border-color: var(--hgbj-gold, #B8973A);
}
/* Article byline — atelier */
.blog_meta {
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--hgbj-muted, #9A8C7E);
text-align: center;
margin: 8px 0 32px;
}
.blog_meta span {
display: inline-block;
margin: 0 10px;
position: relative;
}
.blog_meta span + span::before {
content: '·';
color: var(--hgbj-gold, #B8973A);
margin-right: 20px;
opacity: 0.6;
}
/* Article content typography — refined serif reading size */
.rte,
.article_content .rte {
font-size: 17px;
line-height: var(--hgbj-lh-loose, 1.7);
color: var(--hgbj-body, #5C5046);
max-width: 660px;
margin: 0 auto;
}
.rte h2, .rte h3 {
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
color: var(--hgbj-navy, #1A1A2E);
letter-spacing: 0.015em;
}
.rte h2 { font-size: 32px; margin: 44px 0 18px; }
.rte h3 { font-size: 24px; margin: 32px 0 14px; }
.rte blockquote {
border-left: 2px solid var(--hgbj-gold, #B8973A);
padding-left: 20px;
margin: 32px 0;
font-style: italic;
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
font-size: 20px;
line-height: 1.5;
color: var(--hgbj-navy, #1A1A2E);
}
/* Author + share block — navy navy navy */
.author_share_wrap {
border-top: 1px solid var(--hgbj-divider, #D4C4AF);
border-bottom: 1px solid var(--hgbj-divider, #D4C4AF);
padding: 28px 0;
margin: 48px auto;
max-width: 720px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.blog_author img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--hgbj-divider, #D4C4AF);
}
.blog_share .social-link {
color: var(--hgbj-gold, #B8973A) !important;
margin: 0 6px;
transition: color 0.25s ease;
}
.blog_share .social-link:hover {
color: var(--hgbj-navy, #1A1A2E) !important;
}
/* Cart drawer / page re-theme — navy buttons, ivory chrome, gold accents */
.cart-drawer,
#CartDrawer,
.cart-form,
#cart-form,
.template-cart .main-content {
background: var(--hgbj-ivory, #F9F7F4) !important;
color: var(--hgbj-navy, #1A1A2E);
}
.cart-drawer__header,
.cart__header,
.cart-form h1,
.cart-form h2 {
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif) !important;
color: var(--hgbj-navy, #1A1A2E) !important;
letter-spacing: 0.03em !important;
}
.cart-drawer__row,
.cart-form tr,
.cart-form .cart__item {
border-bottom: 1px solid var(--hgbj-divider, #D4C4AF);
}
.cart-drawer .global-button,
.cart-form .global-button,
.template-cart .global-button,
a.cta-button[href*="checkout"],
button[name="checkout"] {
background: var(--hgbj-navy, #1A1A2E) !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
border-color: var(--hgbj-navy, #1A1A2E) !important;
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif) !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
}
.cart-drawer .global-button:hover,
button[name="checkout"]:hover {
background: var(--hgbj-gold, #B8973A) !important;
color: var(--hgbj-navy, #1A1A2E) !important;
border-color: var(--hgbj-gold, #B8973A) !important;
}
.cart-drawer__quantity input,
.cart-form input[name*="quantity"] {
border: 1px solid var(--hgbj-divider, #D4C4AF) !important;
background: transparent !important;
color: var(--hgbj-navy, #1A1A2E) !important;
}
/* Cart empty state */
.cart-empty,
.template-cart .cart-empty {
text-align: center;
padding: 80px 24px;
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
color: var(--hgbj-navy, #1A1A2E);
}
/* ═════════════════════════════════════════════════════ */
/* utility strip navy — confirmed selectors */
/* The white strip contains .top-bar (left menu) and */
/* .top-bar--right-menu (locale + login + cart). Navy bg, */
/* ivory text, gold hover across the board. */
/* ═════════════════════════════════════════════════════ */
header#header .top-bar,
header#header .top-bar--right-menu,
header#header .promo-banner {
background: var(--hgbj-navy, #1A1A2E) !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
border-color: rgba(184, 151, 58, 0.2) !important;
}
/* Text + links — ivory with gold hover */
header#header .top-bar,
header#header .top-bar *,
header#header .top-bar__menu,
header#header .top-bar__menu li,
header#header .top-bar__menu li a,
header#header .top-bar__menu li span,
header#header .top-bar--right-menu,
header#header .top-bar--right-menu *,
header#header .top-bar__login-link,
header#header .promo-banner,
header#header .promo-banner__content,
header#header .promo-banner * {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
header#header .top-bar a:hover,
header#header .top-bar__menu li a:hover,
header#header .top-bar--right-menu a:hover,
header#header .top-bar__login-link:hover,
header#header .promo-banner a:hover {
color: var(--hgbj-gold, #B8973A) !important;
}
/* Cart icon + bag */
header#header .icon-cart,
header#header .icon-bag,
header#header .mini_cart,
header#header .cart-container a {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
header#header .cart_count {
color: var(--hgbj-navy, #1A1A2E) !important;
background: var(--hgbj-gold, #B8973A) !important;
}
/* User/login icon */
header#header .icon-user,
header#header .top-bar__login-link.icon-user {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
header#header .icon-user::before {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
/* Separators between items */
header#header .top-bar__menu li + li,
header#header .top-bar--right-menu li + li {
border-left-color: rgba(184, 151, 58, 0.3) !important;
}
/* Localization switcher (currency/locale) */
header#header .localization-wrap,
header#header .localization-wrap * {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
header#header .localization-wrap select,
header#header .localization-wrap button {
background: transparent !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
border-color: rgba(249, 247, 244, 0.3) !important;
}
/* tighter header bands — less "thick top" */
header#header .promo-banner {
min-height: 26px !important;
padding: 4px 12px !important;
font-size: 11px !important;
border-bottom: none !important;
}
header#header .top-bar {
min-height: 36px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
border-top: none !important;
border-bottom: none !important;
}
@media (max-width: 768px) {
header#header .promo-banner {
min-height: 22px !important;
font-size: 10px !important;
padding: 2px 10px !important;
}
header#header .top-bar {
min-height: 32px !important;
}
}
/* ═════════════════════════════════════════════════════ */
/* fixed-header safety */
/* When the header goes sticky/fixed on scroll, keep the */
/* nav links ivory instead of inheriting dark text. */
/* ═════════════════════════════════════════════════════ */
header#header.header-fixed,
header#header.header-fixed--true,
header#header.header-fixed *,
header#header.header-fixed--true * {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
header#header.header-fixed--true .nav-desktop__tier-1-link,
header#header.header-fixed--true .nav-desktop__tier-1-link span {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
header#header.header-fixed--true .nav-desktop__tier-1-link:hover,
header#header.header-fixed--true .nav-desktop__tier-1-link:hover span {
color: var(--hgbj-gold, #B8973A) !important;
}
/* But dropdown panels stay ivory-bg / navy-text when open */
header#header.header-fixed--true .nav-desktop__tier-2,
header#header.header-fixed--true .nav-desktop__tier-2-link,
header#header.header-fixed--true .nav-desktop__tier-2-link span,
header#header.header-fixed--true .nav-desktop__tier-3,
header#header.header-fixed--true .nav-desktop__tier-3-link,
header#header.header-fixed--true .nav-desktop__tier-3-link span,
header#header.header-fixed--true .dropdown,
header#header.header-fixed--true .dropdown * {
color: var(--hgbj-navy, #1A1A2E) !important;
}
/* ═════════════════════════════════════════════════════ */
/* utility strip navy — broader selectors */
/* No header#header prefix — catch .top-bar wherever it */
/* sits in the DOM, regardless of ancestor chain. */
/* ═════════════════════════════════════════════════════ */
.top-bar,
.top-bar--right-menu,
.promo-banner,
[class*="top-bar"] {
background: var(--hgbj-navy, #1A1A2E) !important;
background-color: var(--hgbj-navy, #1A1A2E) !important;
color: var(--hgbj-ivory, #F9F7F4) !important;
}
.top-bar a,
.top-bar li,
.top-bar span,
.top-bar__menu a,
.top-bar--right-menu a,
.top-bar__login-link,
.promo-banner,
.promo-banner a {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
.top-bar a:hover,
.top-bar__menu a:hover,
.top-bar--right-menu a:hover {
color: var(--hgbj-gold, #B8973A) !important;
}
.icon-user,
.top-bar__login-link.icon-user,
.top-bar__login-link.icon-user::before {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
.icon-cart,
.icon-bag,
.mini_cart {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
/* ═════════════════════════════════════════════════════ */
/* tighter header rhythm */
/* ═════════════════════════════════════════════════════ */
.hgbj-trust-bar {
height: 24px !important;
font-size: 10px !important;
letter-spacing: 0.12em !important;
}
@media (max-width: 768px) {
.hgbj-trust-bar {
height: 20px !important;
font-size: 9px !important;
}
}
header#header .promo-banner {
min-height: 24px !important;
padding: 2px 12px !important;
font-size: 11px !important;
}
header#header .top-bar {
min-height: 32px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
@media (max-width: 768px) {
header#header .promo-banner {
min-height: 20px !important;
font-size: 10px !important;
}
header#header .top-bar {
min-height: 28px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
}
}
/* Main nav row tighter */
header#header .main-nav,
header#header .nav-desktop {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
/* Re-assert trust bar gold hairline (v26 ) */
.hgbj-trust-bar {
border-bottom: 1px solid rgba(184, 151, 58, 0.3) !important;
}
/* ═══════════════════════════════════════════════════════ */
/* sticky header treatment */
/* ═══════════════════════════════════════════════════════ */
body.sticky_nav .hgbj-trust-bar,
body.sticky_nav .promo-banner,
body.sticky_nav .top-bar,
header#header.header-fixed--true .hgbj-trust-bar,
header#header.header-fixed--true ~ .hgbj-trust-bar,
header#header.header-fixed--true .promo-banner,
header#header.header-fixed--true .top-bar {
display: none !important;
}
header#header.header-fixed--true .header__logo,
header#header.header-fixed--true .header__logo img,
header#header.header-fixed--true div.header__logo,
header#header.header-fixed--true div.header__logo img,
body.sticky_nav .header__logo,
body.sticky_nav .header__logo img,
.sticky_nav .menu-position--block .header__logo,
.sticky_nav .menu-position--block .header__logo img {
max-width: 160px !important;
max-height: 42px !important;
height: auto !important;
transition: max-width 0.3s ease, max-height 0.3s ease;
}
header#header.header-fixed--true,
header#header.header-fixed--true .main-nav,
body.sticky_nav .main-nav {
min-height: 60px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
header#header.header-fixed--true,
body.sticky_nav header#header {
background: var(--hgbj-navy, #1A1A2E) !important;
border-bottom: 1px solid rgba(184, 151, 58, 0.35);
box-shadow: 0 2px 12px rgba(26, 26, 46, 0.15);
}
@media (max-width: 768px) {
header#header.header-fixed--true .header__logo,
header#header.header-fixed--true .header__logo img,
body.sticky_nav .header__logo img {
max-width: 130px !important;
max-height: 36px !important;
}
header#header.header-fixed--true,
body.sticky_nav header#header {
min-height: 52px !important;
}
}
/* ═══════════════════════════════════════════════════════ */
/* atelier scroll reveals */
/* ═══════════════════════════════════════════════════════ */
.hgbj-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hgbj-reveal.hgbj-reveal--visible {
opacity: 1;
transform: translateY(0);
}
.hgbj-reveal-delay-1 { transition-delay: 0.1s; }
.hgbj-reveal-delay-2 { transition-delay: 0.2s; }
.hgbj-reveal-delay-3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
.hgbj-reveal,
.hgbj-reveal.hgbj-reveal--visible {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
.shopify-section--featured-collection h2,
.shopify-section--collection-list h2,
.shopify-section--testimonial-carousel h2,
.shopify-section--bespoke-journey h2,
.shopify-section--consultation-cta h2,
.shopify-section--featured-text h2,
.shopify-section--featured-text h3 {
opacity: 0;
transform: translateY(24px);
transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.shopify-section--featured-collection.in-view h2,
.shopify-section--collection-list.in-view h2,
.shopify-section--testimonial-carousel.in-view h2,
.shopify-section--bespoke-journey.in-view h2,
.shopify-section--consultation-cta.in-view h2,
.shopify-section--featured-text.in-view h2,
.shopify-section--featured-text.in-view h3 {
opacity: 1;
transform: translateY(0);
}
/* ═══════════════════════════════════════════════════════ */
/* overlay captions on collection tiles */
/* ═══════════════════════════════════════════════════════ */
.shopify-section--collection-list .collection-grid-item {
position: relative;
}
.shopify-section--collection-list .collection-grid-item::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(26, 26, 46, 0) 50%,
rgba(26, 26, 46, 0.65) 100%);
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: 1;
}
.shopify-section--collection-list .collection-grid-item:hover::before {
opacity: 1;
}
.shopify-section--collection-list .collection-grid-item__title,
.shopify-section--collection-list .collection-grid-item__caption {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 24px !important;
text-align: center !important;
color: #F9F7F4 !important;
background: transparent !important;
padding: 12px 20px !important;
z-index: 2 !important;
opacity: 0 !important;
transform: translateY(10px) !important;
transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s !important;
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif) !important;
letter-spacing: 0.18em !important;
font-size: 14px !important;
text-transform: uppercase !important;
}
.shopify-section--collection-list .collection-grid-item:hover .collection-grid-item__title,
.shopify-section--collection-list .collection-grid-item:hover .collection-grid-item__caption {
opacity: 1 !important;
transform: translateY(0) !important;
}
.shopify-section--collection-list .collection-grid-item:hover .collection-grid-item__title::after,
.shopify-section--collection-list .collection-grid-item:hover .collection-grid-item__caption::after {
color: #F9F7F4 !important;
}
@media (max-width: 768px) {
.shopify-section--collection-list .collection-grid-item::before {
opacity: 1;
}
.shopify-section--collection-list .collection-grid-item__title,
.shopify-section--collection-list .collection-grid-item__caption {
opacity: 1 !important;
transform: translateY(0) !important;
}
}
/* ═══════════════════════════════════════════════════════ */
/* editorial quote block */
/* ═══════════════════════════════════════════════════════ */
.hgbj-editorial-quote {
max-width: 720px;
margin: 0 auto;
padding: 120px 24px;
text-align: center;
}
.hgbj-editorial-quote__text {
font-family: var(--hgbj-font-display, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(24px, 3.5vw, 38px);
line-height: 1.35;
letter-spacing: 0.01em;
color: var(--hgbj-navy, #1A1A2E);
margin: 0 0 28px;
font-weight: 400;
}
.hgbj-editorial-quote__text em {
font-style: italic;
color: var(--hgbj-warm-brown, #A8896A);
}
.hgbj-editorial-quote__attribution {
font-family: Georgia, serif;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--hgbj-muted, #9A8C7E);
margin: 0;
}
@media (max-width: 768px) {
.hgbj-editorial-quote { padding: 72px 24px; }
}
/* ═══════════════════════════════════════════════════════ */
/* atelier prose link treatment */
/* ═══════════════════════════════════════════════════════ */
.rte a,
.article__content a,
.page-content a,
.page__body a,
.hgbj-editorial-quote a,
article a {
color: var(--hgbj-navy, #1A1A2E);
text-decoration: none;
background-image: linear-gradient(
to right,
var(--hgbj-gold, #B8973A) 50%,
rgba(184, 151, 58, 0.25) 50%
);
background-size: 200% 1px;
background-position: 100% 100%;
background-repeat: no-repeat;
padding-bottom: 2px;
transition: background-position 0.6s cubic-bezier(0.16, 1, 0.3, 1),
color 0.3s ease;
}
.rte a:hover,
.article__content a:hover,
.page-content a:hover,
.page__body a:hover,
article a:hover {
color: var(--hgbj-gold-dark, #8A6F26);
background-position: 0% 100%;
}
.rte a.global-button,
.rte a.btn,
.rte a[class*="button"],
.article__content a[class*="button"] {
background-image: none !important;
padding-bottom: 0 !important;
}
/* ═══════════════════════════════════════════════════════ */
/* subtle paper texture on ivory backgrounds */
/* ═══════════════════════════════════════════════════════ */
body { position: relative; }
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.025;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) {
body::before { display: none; }
}
/* ═══════════════════════════════════════════════════════ */
/* hero headline italic accent */
/* ═══════════════════════════════════════════════════════ */
.hgbj-video-hero__title em,
.hgbj-video-hero h1 em {
font-style: italic;
font-weight: 400;
color: var(--hgbj-gold, #B8973A);
text-transform: none;
letter-spacing: 0.01em;
}
/* ═══════════════════════════════════════════════════════ */
/* HEADER REVERTED TO TEAL + BLACK TEXT */
/* Supersedes v26/v28/v29 navy-header rules without */
/* deleting them — last-rule-wins + !important. */
/* ═══════════════════════════════════════════════════════ */
/* Main header bar — teal */
header#header,
header#header.header-fixed,
header#header.header-fixed--true,
body.sticky_nav header#header {
background: #1F5F5E !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
box-shadow: none !important;
}
/* Main nav row — teal */
header#header .main-nav,
.main-nav {
background: #1F5F5E !important;
border-color: #1F5F5E !important;
}
/* Utility strip (promo-banner + top-bar) — NAVY with ivory text
Reverted from v31-era white override that had regressed the v29 navy strip.
LOCK: top_bar_bg_color in settings_data.json must stay #1A1A2E. */
header#header .promo-banner,
header#header .top-bar,
header#header .top-bar--right-menu,
.promo-banner,
.top-bar,
.top-bar--right-menu,
[class*="top-bar"] {
background: #1A1A2E !important;
background-color: #1A1A2E !important;
color: #F9F7F4 !important;
}
/* All utility-strip text to ivory, hover gold */
header#header .top-bar,
header#header .top-bar *,
header#header .top-bar__menu,
header#header .top-bar__menu li,
header#header .top-bar__menu li a,
header#header .top-bar__menu li span,
header#header .top-bar--right-menu,
header#header .top-bar--right-menu *,
header#header .top-bar__login-link,
header#header .promo-banner,
header#header .promo-banner *,
.top-bar a, .top-bar li, .top-bar span,
.top-bar__menu a, .top-bar--right-menu a,
.top-bar__login-link {
color: #F9F7F4 !important;
}
header#header .top-bar a:hover,
header#header .top-bar__menu li a:hover,
header#header .top-bar--right-menu a:hover,
header#header .top-bar__login-link:hover,
header#header .promo-banner a:hover,
.top-bar a:hover,
.top-bar__menu a:hover,
.top-bar--right-menu a:hover {
color: #B8973A !important;
}
/* Tier-1 nav links (over teal) — black for contrast */
header#header .nav-desktop__tier-1-link,
header#header .nav-desktop__tier-1-link span,
header#header .main-nav > ul > li > a,
header#header .main-nav a.tier-1 {
color: #1A1A1A !important;
}
header#header .nav-desktop__tier-1-link:hover,
header#header .nav-desktop__tier-1-link:hover span,
header#header .main-nav > ul > li > a:hover {
color: #5C4A1C !important; /* darker gold for readable hover on teal */
}
/* Dropdown panels — stay ivory with dark text */
.search__results,
.header .search__results,
.nav-desktop__tier-2,
.nav-desktop__tier-2--full-width-menu,
.nav-desktop__tier-2--dropdown,
.nav-desktop__tier-3,
.dropdown,
.feature_image.editor-hover--true .dropdown {
background: #F9F7F4 !important;
border-color: #D4C4AF !important;
}
.search__results a,
.nav-desktop__tier-2 a,
.nav-desktop__tier-2-link span,
.nav-desktop__tier-3 a,
.nav-desktop__tier-3-link span {
color: #1A1A1A !important;
}
.search__results a:hover,
.nav-desktop__tier-2 a:hover,
.nav-desktop__tier-3 a:hover {
color: #B8973A !important;
}
/* Icons — ivory on navy utility strip, black on teal main nav */
header#header .top-bar .icon-search,
header#header .top-bar .icon-cart,
header#header .top-bar .icon-bag,
header#header .top-bar .icon-user,
header#header .top-bar .icon-account,
header#header .top-bar .mini_cart,
header#header .top-bar .cart-container a,
header#header .top-bar button[aria-label*="cart" i],
header#header .top-bar button[aria-label*="search" i],
header#header .top-bar button[aria-label*="account" i],
header#header .top-bar a[aria-label*="login" i],
header#header .top-bar--right-menu .icon-search,
header#header .top-bar--right-menu .icon-cart,
header#header .top-bar--right-menu .icon-user {
color: #F9F7F4 !important;
fill: #F9F7F4 !important;
stroke: #F9F7F4 !important;
}
/* Icons in the main nav · IVORY on deep teal (#1F5F5E) · WCAG 1.4.11 pass at 6.87:1.
Was dark #1A1A1A when header was pastel teal #48a3a2; after v38.1 moved to deep teal
that combo fell to 2.37:1 which fails the 3:1 UI-component contrast floor. */
header#header .main-nav .icon-search,
header#header .main-nav .icon-cart,
header#header .main-nav .icon-bag,
header#header .main-nav .icon-user,
header#header .main-nav .icon-account,
header#header .main-nav .icon-menu,
header#header .main-nav .header__icon,
header#header .main-nav .mini_cart,
header#header .main-nav .cart-container a,
header#header .main-nav button[aria-label*="cart" i],
header#header .main-nav button[aria-label*="search" i],
header#header .main-nav button[aria-label*="account" i],
header#header .main-nav a[aria-label*="login" i] {
color: #F9F7F4 !important;
fill: #F9F7F4 !important;
stroke: #F9F7F4 !important;
}
header#header .icon-search:hover,
header#header .icon-cart:hover,
header#header .icon-user:hover,
header#header .icon-menu:hover {
color: #B8973A !important;
fill: #B8973A !important;
stroke: #B8973A !important;
}
header#header .cart_count {
color: #ffffff !important;
background: #1A1A1A !important;
}
/* Search input on teal — white field, black text */
header#header .header__search input,
header#header .search__input,
header#header input[type="search"] {
background: rgba(255, 255, 255, 0.95) !important;
color: #1A1A1A !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
}
header#header .header__search input::placeholder,
header#header .search__input::placeholder,
header#header input[type="search"]::placeholder {
color: rgba(0, 0, 0, 0.4) !important;
}
/* Separators */
header#header .top-bar__menu li + li,
header#header .top-bar--right-menu li + li,
header#header .top-bar li + li,
header#header .utility-nav li + li {
border-left-color: rgba(0, 0, 0, 0.12) !important;
}
/* Trust bar above header — keep navy (it has its own identity) but soften */
.hgbj-trust-bar {
background: #1A1A2E;
color: #D4C4AF;
border-bottom: 1px solid rgba(184, 151, 58, 0.3) !important;
}
/* Mobile hamburger icon · ivory on deep teal (was #1A1A1A, fell to 2.37:1
after the Option C teal shift and would leave the hamburger unreadable on mobile). */
@media (max-width: 768px) {
header#header .mobile-nav__icon,
header#header .hamburger-icon,
header#header [class*="menu-toggle"] {
color: #F9F7F4 !important;
}
}
/* Sticky header still collapses trust/utility on scroll (from v30 )
but now reveals TEAL, not navy */
header#header.header-fixed--true,
body.sticky_nav header#header {
background: #1F5F5E !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
header#header.header-fixed--true *,
body.sticky_nav header#header .nav-desktop__tier-1-link,
body.sticky_nav header#header .nav-desktop__tier-1-link span {
color: #F9F7F4 !important;
}
/* Fixed-header dropdown text stays dark on ivory panels */
header#header.header-fixed--true .nav-desktop__tier-2,
header#header.header-fixed--true .nav-desktop__tier-2-link,
header#header.header-fixed--true .nav-desktop__tier-2-link span,
header#header.header-fixed--true .nav-desktop__tier-3,
header#header.header-fixed--true .nav-desktop__tier-3-link,
header#header.header-fixed--true .nav-desktop__tier-3-link span,
header#header.header-fixed--true .dropdown,
header#header.header-fixed--true .dropdown * {
color: #1A1A1A !important;
}
/* Skip link colour palette — keep hidden, but use teal when focused */
.hgbj-skip-link:focus,
.hgbj-skip-link:focus-visible {
background: #1F5F5E !important;
color: #F9F7F4 !important;
}
/* ═══════════════════════════════════════════════════════ */
/* editorial quote — properly framed, luxury treatment */
/* ═══════════════════════════════════════════════════════ */
.hgbj-quote-section {
background: #F9F7F4;
padding: clamp(64px, 8vw, 120px) 24px;
display: flex;
align-items: center;
justify-content: center;
}
.hgbj-quote-frame {
max-width: 760px;
width: 100%;
text-align: center;
position: relative;
padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
/* Thin gold hairline frame with corner reveals */
border-top: 1px solid rgba(184, 151, 58, 0.35);
border-bottom: 1px solid rgba(184, 151, 58, 0.35);
}
/* Left / right short vertical hairlines only (not a full box) */
.hgbj-quote-frame::before,
.hgbj-quote-frame::after {
content: '';
position: absolute;
top: 50%;
width: 1px;
height: 42%;
background: rgba(184, 151, 58, 0.35);
transform: translateY(-50%);
}
.hgbj-quote-frame::before { left: 0; }
.hgbj-quote-frame::after { right: 0; }
/* Ornament line with gold fleuron */
.hgbj-quote-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 0 auto 28px;
color: #B8973A;
}
.hgbj-quote-rule {
display: block;
width: clamp(40px, 8vw, 72px);
height: 1px;
background: #B8973A;
opacity: 0.5;
}
.hgbj-quote-glyph {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 20px;
line-height: 1;
color: #B8973A;
}
/* Blockquote body */
.hgbj-quote-body {
margin: 0;
padding: 0;
border: none;
}
.hgbj-quote-text {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(22px, 3vw, 34px);
line-height: 1.4;
letter-spacing: 0.01em;
color: #1A1A2E;
font-weight: 300;
margin: 0 0 28px;
position: relative;
}
/* Large opening quote mark as a decorative flourish */
.hgbj-quote-text::before {
content: '\201C'; /* v40.2 fix Bug 1.3: proper opening curly quote U+201C, was U+0081 control char + literal C */
position: absolute;
top: -32px;
left: 50%;
transform: translateX(-50%);
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(56px, 8vw, 88px);
line-height: 1;
color: rgba(184, 151, 58, 0.25);
pointer-events: none;
font-style: normal;
}
.hgbj-quote-text em {
font-style: italic;
color: #A8896A;
font-weight: 400;
}
.hgbj-quote-attribution {
margin: 0;
font-family: Georgia, serif;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #9A8C7E;
}
@media (max-width: 600px) {
.hgbj-quote-section { padding: 56px 20px; }
.hgbj-quote-frame {
padding: 36px 20px;
}
.hgbj-quote-frame::before,
.hgbj-quote-frame::after { display: none; }
.hgbj-quote-text::before { top: -24px; }
}
/* Null out the v30 rules so they don't double-render */
.hgbj-editorial-quote { display: none !important; }
/* ═══════════════════════════════════════════════════════ */
/* polish + collection tile caption de-conflict */
/* ═══════════════════════════════════════════════════════ */
/* Collection tiles — the v28 affordance and v30 overlay rules
were competing. Resolve: overlay-reveal captions (v30) win on
desktop, with the v28 gold arrow pinned to the caption text.
On mobile both caption and scrim are always visible. */
.shopify-section--collection-list .collection-grid-item__title,
.shopify-section--collection-list .collection-grid-item__caption {
color: #F9F7F4 !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.shopify-section--collection-list .collection-grid-item:hover .collection-grid-item__title::after,
.shopify-section--collection-list .collection-grid-item:hover .collection-grid-item__caption::after {
color: #F9F7F4 !important;
}
/* Empty/placeholder collection guard — hide "COLLECTION TITLE" fallback text
if a collection handle resolves empty (belt-and-braces in case a tile still
misfires). If the caption text matches the literal placeholder, hide it. */
.shopify-section--collection-list .collection-grid-item__title:empty {
display: none !important;
}
/* Polish: tighten the featured-collection heading rhythm */
.shopify-section--featured-collection h2,
.shopify-section--featured-collection .collection_title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(24px, 2.8vw, 32px);
font-weight: 400;
letter-spacing: 0.03em;
color: #1A1A2E;
margin: 0 0 8px;
}
.shopify-section--featured-collection .feature-divider,
.shopify-section--collection-list .feature-divider {
width: 44px !important;
height: 1px !important;
background: #B8973A !important;
margin: 12px auto 28px !important;
border: 0 !important;
}
/* Polish: consistent section padding derived from token */
.shopify-section--featured-collection,
.shopify-section--collection-list,
.shopify-section--consultation-cta,
.shopify-section--bespoke-journey {
padding-top: clamp(56px, 6vw, 96px);
padding-bottom: clamp(56px, 6vw, 96px);
}
/* Polish: trust-badges tighter + ensure icons are readable */
.shopify-section--trust-badges {
padding: 40px 24px 56px !important;
}
/* Polish: newsletter section edges */
.shopify-section--newsletter {
padding: clamp(48px, 5vw, 80px) 24px;
}
/* Polish: luxury button treatment — enforce consistent sizing so
the primary CTA everywhere reads the same */
.global-button,
.global-button--primary,
.global-button--secondary,
.btn-primary,
.button--primary,
a.hgbj-pdp-sticky__cta,
.newsletter__form button,
footer button[type="submit"] {
min-height: 46px;
padding: 14px 28px;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 0;
transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
/* Polish: ensure the hero button2 outline is readable on video backgrounds */
.hgbj-video-hero__buttons .global-button--secondary {
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.04) !important;
}
/* Kill the v30 paper texture on top of content (was mix-blend-mode multiply
across whole body). Keep it on backgrounds only — pull z-index behind. */
body::before {
z-index: 0 !important;
opacity: 0.018;
mix-blend-mode: multiply;
}
/* Kill v30 reveal opacity: 0 on section h2s when the section wrapper
class doesn't have .in-view yet (prevents "stuck invisible" state if the
IntersectionObserver never fires, e.g. at bottom of page or in modals). */
@media print, (prefers-reduced-motion: reduce) {
.shopify-section--featured-collection h2,
.shopify-section--collection-list h2,
.shopify-section--testimonial-carousel h2,
.shopify-section--bespoke-journey h2,
.shopify-section--consultation-cta h2,
.shopify-section--featured-text h2,
.shopify-section--featured-text h3 {
opacity: 1 !important;
transform: none !important;
}
}
/* Safety fallback: if a section h2 has been in the viewport for 2.5s without
getting .in-view, force visible (prevents rare observer-miss bugs). */
@keyframes hgbjForceReveal {
to { opacity: 1; transform: translateY(0); }
}
.shopify-section--featured-collection h2,
.shopify-section--collection-list h2,
.shopify-section--testimonial-carousel h2,
.shopify-section--bespoke-journey h2,
.shopify-section--consultation-cta h2,
.shopify-section--featured-text h2 {
animation: hgbjForceReveal 0s ease 2.5s forwards;
}
.shopify-section--featured-collection.in-view h2,
.shopify-section--collection-list.in-view h2,
.shopify-section--testimonial-carousel.in-view h2,
.shopify-section--bespoke-journey.in-view h2,
.shopify-section--consultation-cta.in-view h2,
.shopify-section--featured-text.in-view h2 {
animation: none;
}
/* Polish: generous but consistent vertical rhythm around the editorial quote */
.hgbj-quote-section + .shopify-section,
.shopify-section + .hgbj-quote-section {
margin-top: 0;
}
/* Polish: remove leftover v25 featured-text rogue section border if present */
.shopify-section--featured-text {
padding: 32px 24px 16px;
}
/* ═══════════════════════════════════════════════════════ */
/* override Turbo nested-section cascade on quote */
/* Turbo has .shopify-section .section > .container rules */
/* that reset padding/border. These !important rules win. */
/* ═══════════════════════════════════════════════════════ */
.shopify-section .hgbj-quote-section,
section.hgbj-quote-section {
background: #F9F7F4 !important;
padding: clamp(64px, 8vw, 120px) 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.shopify-section .hgbj-quote-frame,
.hgbj-quote-frame {
max-width: 760px !important;
width: 100% !important;
text-align: center !important;
position: relative !important;
padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px) !important;
border-top: 1px solid rgba(184, 151, 58, 0.35) !important;
border-bottom: 1px solid rgba(184, 151, 58, 0.35) !important;
margin: 0 auto !important;
}
.hgbj-quote-frame::before,
.hgbj-quote-frame::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
width: 1px !important;
height: 42% !important;
background: rgba(184, 151, 58, 0.35) !important;
transform: translateY(-50%) !important;
}
.hgbj-quote-frame::before { left: 0 !important; }
.hgbj-quote-frame::after { right: 0 !important; }
.hgbj-quote-ornament {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
margin: 0 auto 28px !important;
}
.hgbj-quote-rule {
display: block !important;
width: clamp(40px, 8vw, 72px) !important;
height: 1px !important;
background: #B8973A !important;
opacity: 0.5 !important;
}
.hgbj-quote-text {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: clamp(22px, 3vw, 34px) !important;
line-height: 1.4 !important;
color: #1A1A2E !important;
margin: 0 auto 28px !important;
max-width: 620px !important;
}
/* reassurance strip - give the middle-dot separator proper spacing */
.hgbj-reassurance-static span {
display: inline-block;
padding: 0 2px;
}
.hgbj-reassurance-static .dot {
margin: 0 10px !important;
color: #B8973A !important;
opacity: 0.6;
}
@media (max-width: 640px) {
.hgbj-reassurance-static .dot { margin: 0 6px !important; }
}
/* contact page H1 custom styling (defined inline in section,
this is a polish fallback) */
.hgbj-page-h1 {
font-family: 'Cormorant Garamond', Georgia, serif;
color: #1A1A2E;
text-align: center;
font-size: clamp(32px, 4.5vw, 52px);
font-weight: 300;
letter-spacing: 0.02em;
margin: 48px auto 0;
padding: 0 20px;
line-height: 1.15;
}
/* tighten the promo-banner + trust-bar + utility-strip stacking
so the combined pre-header isn't thick */
.hgbj-trust-bar {
padding: 0 !important;
}
header#header .promo-banner {
min-height: 22px !important;
padding: 2px 14px !important;
font-size: 10.5px !important;
letter-spacing: 0.1em !important;
}
@media (max-width: 768px) {
header#header .promo-banner {
min-height: 20px !important;
font-size: 9.5px !important;
}
}
/* ═══════════════════════════════════════════════════════ */
/* scroll-reveal safety net */
/* Forces all reveal elements to fade in after 1.5s */
/* regardless of whether IntersectionObserver fired. */
/* This prevents "invisible content" for users with JS */
/* disabled, slow JS init, or non-scrolling audits. */
/* ═══════════════════════════════════════════════════════ */
@keyframes hgbjRevealSafety {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.hgbj-reveal,
.hgbj-reveal-left,
.hgbj-reveal-scale,
.hgbj-cta-inner {
animation: hgbjRevealSafety 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.5s both;
}
/* When IO does add is-visible, keep the same end-state */
.hgbj-reveal.is-visible,
.hgbj-reveal-left.is-visible,
.hgbj-reveal-scale.is-visible,
.hgbj-reveal.hgbj-reveal--visible {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
/* And reduced-motion */
@media (prefers-reduced-motion: reduce) {
.hgbj-reveal, .hgbj-reveal-left, .hgbj-reveal-scale, .hgbj-cta-inner {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* font loading — we're loading Cormorant Garamond twice via
Google Fonts because two slightly-different weight subsets are
requested. Unify to one fetch. The link in layout/theme.liquid
should be revisited; CSS-level hint here: */
/* (no CSS fix — handled in layout/theme.liquid) */
/* ═══════════════════════════════════════════════════════ */
/* Mobile conversion polish + SEO/GEO */
/* Focused on the 120 mobile visitors/month with 0 sales */
/* ═══════════════════════════════════════════════════════ */
/* Tap-target minimum 44px per Apple HIG / 48px per Material */
@media (max-width: 768px) {
header#header a,
header#header button,
.top-bar a,
.top-bar button,
.nav-desktop__tier-1-link,
.nav-mobile__tier-1-link,
.mobile-cta-bar a,
.hgbj-pdp-sticky a,
.collection-grid-item a,
.product-info__caption,
footer.footer a,
.global-button,
.global-button--primary,
.global-button--secondary,
.hgbj-btn-whatsapp,
.hgbj-tb-item--link {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.hgbj-tb-item--link { min-height: unset; }
footer.footer li { padding: 4px 0; }
.global-button, .global-button--primary {
padding: 14px 28px !important;
min-height: 48px !important;
}
}
/* Mobile hero tightening - reduce header stack to maximise hero real estate */
@media (max-width: 600px) {
.hgbj-trust-bar {
height: 22px !important;
font-size: 9px !important;
letter-spacing: 0.08em !important;
}
header#header .promo-banner {
min-height: 20px !important;
padding: 2px 12px !important;
font-size: 9.5px !important;
letter-spacing: 0.04em !important;
}
header#header .top-bar {
min-height: 44px !important;
}
}
/* visible trust reassurance inline with hero CTA on mobile */
@media (max-width: 768px) {
.hgbj-video-hero__buttons {
flex-direction: column;
gap: 12px;
width: 100%;
padding: 0 20px;
}
.hgbj-video-hero__buttons a {
width: 100%;
justify-content: center;
}
}
/* Subtle post-CTA reassurance line that's SEO/GEO valuable */
.hgbj-video-hero__buttons::after {
content: 'By appointment · Typical reply within 4 hours';
display: block;
margin-top: 16px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(249, 247, 244, 0.7);
text-align: center;
width: 100%;
}
@media (max-width: 600px) {
.hgbj-video-hero__buttons::after {
font-size: 10px;
letter-spacing: 0.12em;
}
}
/* AggregateRating review stars in the header trust bar Google Reviews link */
.hgbj-tb-item--link::before {
content: none; /* v40.2 fix Bug 1.2: removed decorative star glyph next to '4.9/5 Google Reviews' in top bar (shipped as typo -- degree-sign+5 repeated instead of U+2605). Luxury brands (Cartier/Tiffany/Van Cleef) do not use decorative star glyphs - the '4.9/5 Google Reviews' text alone is the complete message. */
color: #B8973A;
letter-spacing: 1px;
margin-right: 6px;
font-size: 9px;
}
@media (max-width: 600px) {
.hgbj-tb-item--link::before { display: none; }
}
/* mobile CTA bar polish - make it feel more luxurious */
@media (max-width: 768px) {
.hgbj-mobile-cta-bar, .mobile-cta-bar {
box-shadow: 0 -8px 32px rgba(26, 26, 46, 0.15) !important;
background: #1A1A2E !important;
border-top: 1px solid rgba(184, 151, 58, 0.3) !important;
}
.mobile-cta-bar a, .hgbj-mobile-cta-bar a {
color: #F9F7F4 !important;
padding: 12px 8px !important;
letter-spacing: 0.1em !important;
}
.mobile-cta-bar svg, .hgbj-mobile-cta-bar svg {
fill: #B8973A !important;
stroke: #B8973A !important;
}
}
/* hero pretext + title on mobile — prevent orphan line */
@media (max-width: 480px) {
.hgbj-video-hero__pretext {
font-size: 11px !important;
letter-spacing: 0.16em !important;
}
.hgbj-video-hero__title {
font-size: clamp(32px, 9vw, 44px) !important;
line-height: 1.1 !important;
}
.hgbj-video-hero__subtitle,
.hgbj-video-hero__subtitle p {
font-size: 13px !important;
max-width: 300px;
}
}
/* collection-list tile captions visible on mobile (desktop uses hover reveal) */
@media (max-width: 768px) {
.shopify-section--collection-list .collection-grid-item::before {
opacity: 1 !important;
}
.shopify-section--collection-list .collection-grid-item__title,
.shopify-section--collection-list .collection-grid-item__caption {
opacity: 1 !important;
transform: translateY(0) !important;
}
}
/* force the reassurance-static block to render with proper spacing
in case external CSS cascade still fights us */
.hgbj-reassurance-static span {
display: inline-block !important;
padding: 0 2px !important;
}
.hgbj-reassurance-static .dot {
color: #B8973A !important;
margin: 0 10px !important;
opacity: 0.6 !important;
display: inline-block !important;
}
/* contact form improvements — larger mobile tap targets */
@media (max-width: 768px) {
.contact-form input, .contact-form textarea,
form[action*="/contact"] input, form[action*="/contact"] textarea {
font-size: 16px !important; /* prevents iOS zoom on focus */
padding: 16px 0 12px !important;
min-height: 52px !important;
}
.contact-form button[type="submit"],
form[action*="/contact"] button[type="submit"] {
width: 100% !important;
min-height: 54px !important;
font-size: 13px !important;
}
}
/* Apple-style pricing prominence on PDP */
.price .current_price .money,
.price .money {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: clamp(22px, 2.6vw, 30px) !important;
font-weight: 400 !important;
color: #1A1A2E !important;
letter-spacing: 0.01em !important;
}
@media (max-width: 768px) {
.price .money { font-size: 24px !important; }
}
/* add lead-time + shipping reassurance on PDP -
injected via ::after on the add-to-cart button area */
.purchase-details__buttons::after {
content: 'Typical lead time 3–4 weeks · Free UK insured delivery · GIA/IGI certified';
display: block;
margin-top: 14px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #9A8C7E;
text-align: center;
padding: 0 10px;
}
@media (max-width: 480px) {
.purchase-details__buttons::after {
font-size: 10px;
letter-spacing: 0.08em;
}
}
/* → v38: home hero primary button · shadow + hover-lift removed per luxury audit
(Agent 6 Rec1: reads Shopify-theme with the shadow; maison hero buttons sit flat). */
.hgbj-video-hero__buttons .global-button--primary,
.hgbj-video-hero__buttons a.global-button--primary {
background: #B8973A !important;
color: #1A1A2E !important;
border-color: #B8973A !important;
font-weight: 500;
}
.hgbj-video-hero__buttons .global-button--primary:hover {
background: #F9F7F4 !important;
border-color: #F9F7F4 !important;
}
/* ---------------------------------------------------------------
v36 · cinematic-bench full-bleed section override
Lifts image-with-text-overlay to a cinematic, editorial pace:
· gold 60% scrim from bottom-left for legibility
· left-aligned column inside generous gutters
· serif display headline, gold rule under eyebrow
· hover-on-button: gold fill, letter-spacing opens up
--------------------------------------------------------------- */
.hgbj-cinematic-bench {
position: relative;
}
.hgbj-cinematic-bench .shopify-section,
.hgbj-cinematic-bench > section {
min-height: clamp(480px, 68vh, 780px);
}
.hgbj-cinematic-bench .image-with-text-overlay,
.hgbj-cinematic-bench .image-overlay,
.hgbj-cinematic-bench .banner {
min-height: clamp(480px, 68vh, 780px) !important;
}
.hgbj-cinematic-bench::before {
content: '';
position: absolute;
inset: 0;
/* fix · scrim dark in bottom-left where the caption sits, fading to
clear in top-right. Ensures AA contrast on whatever image the user picks. */
background: linear-gradient(
to top right,
rgba(26, 26, 46, 0.88) 0%,
rgba(26, 26, 46, 0.62) 30%,
rgba(26, 26, 46, 0.22) 65%,
rgba(26, 26, 46, 0) 100%
);
pointer-events: none;
z-index: 2;
}
/* secondary caption scrim · adds 60% navy behind the caption column
so the text is always legible regardless of image tonality. */
.hgbj-cinematic-bench .caption,
.hgbj-cinematic-bench .banner-caption,
.hgbj-cinematic-bench .image-overlay__caption {
background: linear-gradient(
to right,
rgba(26, 26, 46, 0.55) 0%,
rgba(26, 26, 46, 0.45) 70%,
rgba(26, 26, 46, 0) 100%
);
}
/* ---------------------------------------------------------------
v37 · image-with-text-overlay caption · mobile legibility fix
The default Turbo caption column is narrow on mobile, causing
long subtitles to break into one-word-per-line. Widen + shrink. */
@media (max-width: 600px) {
.shopify-section--image-with-text-overlay .caption,
.shopify-section--image-with-text-overlay .banner-caption,
.shopify-section--image-with-text-overlay .image-overlay__caption,
.shopify-section--image-with-text-overlay .banner__subtitle {
max-width: 340px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.shopify-section--image-with-text-overlay .banner__subtitle,
.shopify-section--image-with-text-overlay .subtitle,
.shopify-section--image-with-text-overlay .image-overlay__subtitle {
font-size: 14px !important;
letter-spacing: 0.10em !important;
line-height: 1.55 !important;
text-transform: none !important;
}
.shopify-section--image-with-text-overlay .banner__subtitle p,
.shopify-section--image-with-text-overlay .image-overlay__subtitle p {
font-size: 14px !important;
line-height: 1.55 !important;
margin: 0 !important;
}
}
/* Caption overlay on cinematic-bench image. Inherits
position: absolute + top: 50% + translateY(-50%) from
base .caption rule for vertical centering. Gradient bg
(lines 21256-21261) confirms overlay design intent. */
.hgbj-cinematic-bench .caption,
.hgbj-cinematic-bench .banner-caption,
.hgbj-cinematic-bench .image-overlay__caption {
z-index: 3;
max-width: 560px;
padding-left: clamp(32px, 6vw, 96px) !important;
padding-right: 24px !important;
}
.hgbj-cinematic-bench .pretext,
.hgbj-cinematic-bench .preheading,
.hgbj-cinematic-bench .banner__pretext {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 11px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase;
color: #B8973A !important;
margin-bottom: 22px !important;
position: relative;
padding-bottom: 18px;
}
.hgbj-cinematic-bench .pretext::after,
.hgbj-cinematic-bench .preheading::after,
.hgbj-cinematic-bench .banner__pretext::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 1px;
background: #B8973A;
opacity: 0.8;
}
.hgbj-cinematic-bench h1,
.hgbj-cinematic-bench h2,
.hgbj-cinematic-bench .title,
.hgbj-cinematic-bench .banner__title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(38px, 5.4vw, 72px) !important;
line-height: 1.04 !important;
letter-spacing: 0.01em !important;
color: #F9F7F4 !important;
margin: 0 0 24px !important;
text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hgbj-cinematic-bench .subtitle,
.hgbj-cinematic-bench .subheading,
.hgbj-cinematic-bench .banner__subtitle {
font-family: Georgia, serif !important;
font-size: 17px !important;
line-height: 1.7 !important;
color: rgba(249, 247, 244, 0.92) !important;
margin-bottom: 36px !important;
max-width: 460px;
}
.hgbj-cinematic-bench .global-button--banner,
.hgbj-cinematic-bench .global-button--banner-text {
border: 1px solid #B8973A !important;
color: #F9F7F4 !important;
background: transparent !important;
letter-spacing: 0.18em !important;
padding: 14px 32px !important;
transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
letter-spacing 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hgbj-cinematic-bench .global-button--banner:hover,
.hgbj-cinematic-bench .global-button--banner-text:hover {
background: #B8973A !important;
color: #1A1A2E !important;
letter-spacing: 0.22em !important;
}
@media (max-width: 768px) {
.hgbj-cinematic-bench::before {
background: linear-gradient(
180deg,
rgba(26, 26, 46, 0.25) 0%,
rgba(26, 26, 46, 0.85) 100%
);
}
.hgbj-cinematic-bench .caption,
.hgbj-cinematic-bench .banner-caption,
.hgbj-cinematic-bench .image-overlay__caption {
padding-left: 24px !important;
padding-right: 24px !important;
}
.hgbj-cinematic-bench h1,
.hgbj-cinematic-bench h2,
.hgbj-cinematic-bench .title,
.hgbj-cinematic-bench .banner__title {
font-size: clamp(32px, 9vw, 42px) !important;
}
}
/* ---------------------------------------------------------------
v36 · mega-menu editorial featured image
When a column has image_top/image_bottom, present it as a
cinematic square with a gold-bordered caption · not a thumbnail.
--------------------------------------------------------------- */
.mega-menu__content .mega-menu__column .mega-menu__image-caption-link {
display: block;
margin: 0 0 14px;
overflow: hidden;
position: relative;
}
.mega-menu__content .mega-menu__column .mega-menu__image-caption-link img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.mega-menu__content .mega-menu__column .mega-menu__image-caption-link:hover img {
transform: scale(1.06);
}
.mega-menu__content .mega-menu__image-caption {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 11px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: #1A1A2E !important;
text-align: center;
margin: 12px 0 0 !important;
padding: 0 6px;
position: relative;
}
.mega-menu__content .mega-menu__image-caption::before {
content: '';
display: block;
width: 24px;
height: 1px;
background: #B8973A;
margin: 0 auto 10px;
}
.mega-menu__content .mega-menu__image-caption-link:hover + .mega-menu__image-caption,
.mega-menu__content .mega-menu__image-caption-link:hover .mega-menu__image-caption {
color: #B8973A !important;
}
/* ═════════════════════════════════════════════════════ */
/* remove empty teal band below main nav */
/* ═════════════════════════════════════════════════════ */
/* The main-nav wrapper had excess bottom padding that created
a visible teal band between the nav row and the hero video.
Tighten the wrapper and drop any residual header margin. */
header#header .main-nav,
header#header .main-nav__wrapper {
padding-bottom: 8px !important;
}
header#header {
margin-bottom: 0 !important;
}
/* Reduce any gap between header and the first page section */
main,
#MainContent,
main.section-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Keep the first shopify-section flush against the header */
main > .shopify-section:first-child,
#MainContent > .shopify-section:first-child {
margin-top: 0 !important;
}
/* ═════════════════════════════════════════════════════ */
/* audit-driven polish block */
/* ═════════════════════════════════════════════════════ */
/* A9 · skip link · pure-CSS focus reveal (replaces fragile JS handler).
The JS handler stays as belt-and-braces but this rule is the authoritative
reveal state — declarative, no event-timing dependency. */
.hgbj-skip-link:focus,
.hgbj-skip-link:focus-visible {
top: 0 !important;
clip: auto !important;
clip-path: none !important;
overflow: visible !important;
outline: 2px solid #B8973A;
outline-offset: 2px;
}
/* B4 · global :focus-visible indicator · restores keyboard accessibility
after 37 outline:none rules stripped default focus. Gold ring on any
interactive element that becomes keyboard-focused. */
:focus-visible {
outline: 2px solid #B8973A;
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid #B8973A !important;
outline-offset: 2px !important;
}
/* B15 · collection tiles · transparent border at rest, gold hairline on hover.
Stops the tile from looking like a framed card at all times. */
.shopify-section--collection-list .product-wrap,
.shopify-section--collection-list .collection-block {
border: 1px solid transparent !important;
transition: border-color 0.3s ease;
}
.shopify-section--collection-list .product-wrap:hover,
.shopify-section--collection-list .collection-block:hover {
border: 1px solid rgba(184, 151, 58, 0.45) !important;
}
/* B17 · footer column headings · more air between letters and below heading.
Pairs with B3 which moves footer headings from h6 to h3. */
footer.footer h3,
footer.footer h4,
footer.footer h6,
footer.footer .footer-heading,
footer.footer .toggle__trigger span,
footer.footer p.title {
letter-spacing: 0.22em !important;
margin-bottom: 24px !important;
}
/* B18 · featured-collection title masthead treatment · uppercase,
widened tracking, constrained size so it feels like a maison section label. */
.shopify-section--featured-collection h2.title,
.shopify-section--featured-collection .section__title,
.shopify-section--featured-collection .title {
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
font-size: clamp(22px, 2.4vw, 28px) !important;
font-weight: 400 !important;
}
/* B1 · Shopify "Buy with Shop Pay" purple button · mute to navy ghost
so the checkout area stays on-palette. */
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--branded {
background: #1A1A2E !important;
color: #F9F7F4 !important;
border: 1px solid #1A1A2E !important;
}
.shopify-payment-button__button--branded {
max-width: 180px;
opacity: 0.88;
}
.shopify-payment-button__button:hover {
background: #B8973A !important;
border-color: #B8973A !important;
color: #1A1A2E !important;
}
/* B5 · carousel pagination dot hit-areas · WCAG target-size 2.2 AA (24×24).
Visible dot stays visually small via inner scale; button itself is full 24. */
.hgbj-tc__dots button,
.testimonial-carousel__dot,
.flickity-page-dots .dot,
.slick-dots li button,
.carousel__dot {
min-width: 24px !important;
min-height: 24px !important;
padding: 7px !important;
background-clip: content-box !important;
}
/* B14 · testimonial arrows · strip circular frame + shadow so only the
gold arrow glyph remains. Stars hidden via B14 handled in sections/ below. */
.hgbj-tc__arrow,
.testimonial-carousel__arrow {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.hgbj-tc__stars,
.testimonial__stars {
display: none !important;
}
/* A7 · eyebrow / small gold-on-ivory contrast fix.
Replace small #B8973A gold text on ivory backgrounds with #8A6F26
(measured 4.48:1 on #F9F7F4 — passes AA). Applies to home FAQ eyebrow,
collection intro eyebrow, featured-collection eyebrow, any small
uppercase label on ivory. Does NOT touch hero (navy bg — gold stays gold). */
.hgbj-home-faq-eyebrow,
.hgbj-collection-intro__pretext,
.hgbj-fc__eyebrow,
.featured-collection__eyebrow,
.page-content .eyebrow,
.eyebrow-text,
.pretext.on-ivory {
color: #8A6F26 !important;
}
/* Option C · deep teal header with ivory nav + gold-underline hover.
Header bg changes from #48A3A2 (pastel teal, ivory fails AA at 2.79:1) to
#1F5F5E (deep teal, ivory passes AA at 6.87:1 — near AAA 7.0:1).
Nav links stay ivory (preserves the light-maison character the user cares about).
Hover state signalled by gold hairline underline rather than a colour swap,
because navy-on-deep-teal (2.32:1) and gold-on-deep-teal (2.63:1) both fail AA.
Reference maison for the register: Fabergé (deep jewelled teal + gold leaf). */
header#header .nav-desktop__tier-1-link,
header#header .nav-desktop__tier-1-link span,
header#header .main-nav > ul > li > a,
header#header .main-nav a.tier-1 {
color: #F9F7F4 !important;
position: relative;
transition: color 0.3s ease;
text-decoration: none;
}
/* Gold hairline underline sweep on hover — interactivity signal that doesn't
touch the text colour, so the 6.87:1 contrast holds through the transition. */
header#header .nav-desktop__tier-1-link::after,
header#header .main-nav > ul > li > a::after,
header#header .main-nav a.tier-1::after {
content: '';
position: absolute;
left: 50%;
right: 50%;
bottom: -6px;
height: 1px;
background: #B8973A;
opacity: 0;
transition: left 0.38s cubic-bezier(0.16, 1, 0.3, 1),
right 0.38s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.28s ease;
pointer-events: none;
}
header#header .nav-desktop__tier-1-link:hover,
header#header .nav-desktop__tier-1-link:hover span,
header#header .main-nav > ul > li > a:hover,
header#header .main-nav a.tier-1:hover {
color: #F9F7F4 !important;
}
header#header .nav-desktop__tier-1-link:hover::after,
header#header .main-nav > ul > li > a:hover::after,
header#header .main-nav a.tier-1:hover::after {
left: 0;
right: 0;
opacity: 1;
}
/* Book Appointment CTA · ivory ghost on deep teal.
Ivory border on #1F5F5E = 6.87:1 (passes UI component 3:1 comfortably).
Hover: ivory fill, deep-teal text (same 6.87:1 ratio, inverted). */
header#header .hgbj-nav-cta,
.hgbj-nav-cta {
background: transparent !important;
color: #F9F7F4 !important;
border-color: #F9F7F4 !important;
}
header#header .hgbj-nav-cta:hover,
.hgbj-nav-cta:hover,
.hgbj-nav-cta:focus-visible {
background: #F9F7F4 !important;
border-color: #F9F7F4 !important;
color: #1F5F5E !important;
letter-spacing: 0.22em !important;
}
/* A1 · sticky header fully opaque (was bleeding content through) */
body.sticky_nav header#header,
header#header.header-fixed--true,
header#header.sticky {
background-color: #1F5F5E !important;
opacity: 1 !important;
z-index: 1000 !important;
backdrop-filter: none !important;
}
body.sticky_nav header#header .main-nav,
header#header.header-fixed--true .main-nav {
background-color: #1F5F5E !important;
opacity: 1 !important;
}
/* A6 · 404 page · hide orphan floating search widget */
body.template-404 .search-container--floating,
body.template-404 .sidebar-search,
body.template-404 .hgbj-404 ~ .search-wrap,
body.template-404 aside [class*="search"] {
display: none !important;
}
/* A4 · blog magazine hero card title · prevent mid-word clip */
.hgbj-journal__hero-title,
.hgbj-journal__card-title {
font-size: clamp(28px, 3vw, 44px) !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.hgbj-journal__hero {
min-height: clamp(440px, 60vh, 620px) !important;
}
.hgbj-journal__hero-text {
max-width: min(640px, 92vw) !important;
}
/* B16 · cookie banner · quieter frame (less Shopify-alert, more maison-note).
Mirror fix in snippets/cookie-consent.liquid inline styles. */
.hgbj-cookie-banner,
.cookie-consent-banner,
[data-cookie-consent] {
border: none !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}
/* A3 · scroll-reveal CSS safety net.
.hgbj-reveal starts at opacity:0 and is revealed by IntersectionObserver
adding .is-visible. If the observer never fires (slow networks, ad-blockers,
IO-polyfill failures, or pages rendered without viewport scroll), the
content stays invisible. This animation runs independently after 1.5 s
so every .hgbj-reveal is definitely visible by then. */
@keyframes hgbj-reveal-fallback {
0%, 90% { opacity: 1; transform: none; }
100% { opacity: 1; transform: none; }
}
.hgbj-reveal {
animation: hgbj-reveal-fallback 1.6s 1.5s forwards;
}
.hgbj-reveal.is-visible {
animation: none;
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.hgbj-reveal,
.hgbj-reveal-scale,
.hgbj-stagger > * {
opacity: 1 !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
}
/* A5 · engagement-rings "Explore Collections by Shape" fallback height.
If the slider-init fails or feature_collection blocks have invalid handles,
the carousel collapses to zero height. Give it a floor so the band doesn't
disappear into thin air. */
.sub-collection-grid,
.sub-collections-grid,
[class*="sub-collection"] .shopify-section,
.shopify-section--sub-collections-grid {
min-height: 240px;
}
/* B6 supplementary · Nivoda in-text link underline (WCAG 1.4.1 non-colour signal) */
a[title*="Nivoda" i],
a[href*="nivoda" i] {
text-decoration: underline;
text-decoration-color: #B8973A;
text-underline-offset: 3px;
}
/* ═════════════════════════════════════════════════════ */
/* footer column-heading arrows */
/* Hide on desktop (decorative accordion-chevrons were */
/* designed for mobile toggle; on desktop the columns are */
/* always expanded and the chevrons just look broken). */
/* Selector verified against live DOM before file edit. */
/* ═════════════════════════════════════════════════════ */
@media (min-width: 769px) {
footer.footer .footer__column-title .icon-down-arrow,
footer.footer .footer__column-title .right.icon-down-arrow,
footer.footer h3.footer__column-title > span.right {
display: none !important;
}
/* The heading itself carries no toggle behaviour on desktop, so
don't misleadingly pointer-cursor it. */
footer.footer .footer__column-title {
cursor: default;
}
}
/* Mobile (≤768px) · arrows stay visible and tappable.
Floor the hit area at 24×24 per WCAG 2.2 target-size. */
@media (max-width: 768px) {
footer.footer .footer__column-title .icon-down-arrow {
display: inline-block;
min-width: 24px;
min-height: 24px;
line-height: 24px;
text-align: center;
}
}
/* ═════════════════════════════════════════════════════ */
/* Mobile menu label visibility */
/* The accordion trigger span.hgbj-acc-label was */
/* was inheriting transparent/white text. Set explicitly. */
/* ═════════════════════════════════════════════════════ */
@media (max-width: 798px) {
#mobile_menu .hgbj-acc-label,
#mobile_menu .hgbj-acc-trigger,
#mobile_menu .hgbj-acc-trigger span,
#mobile_menu button,
#mobile_menu a,
.mobile-menu-container .hgbj-acc-label,
.mobile-menu-container button,
.mobile-menu-container a,
.mobile-menu-container a span {
color: #1A1A2E !important;
opacity: 1 !important;
}
#mobile_menu .hgbj-acc-trigger:hover .hgbj-acc-label,
#mobile_menu .hgbj-acc-trigger:focus .hgbj-acc-label,
#mobile_menu a:hover,
#mobile_menu a:focus {
color: #B8973A !important;
}
/* Secondary menu items (OUR STORY, BLOG, etc.) were
intentionally faded via opacity: 0.65 — keep them
readable but slightly subordinated. Restore
reasonable opacity. */
.mobile-menu-container .menu > li:not(.hgbj-acc-item) > a {
opacity: 0.85 !important;
color: #1A1A2E !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* Print stylesheet */
/* ═══════════════════════════════════════════════════ */
@media print {
header#header, .hgbj-trust-bar, .promo-banner,
.hgbj-mobile-cta-bar, .mobile-cta-bar, footer.footer,
.hgbj-footer-badges, .hgbj-country-indicator,
#hgbj-splash, .cookie-consent, .hgbj-whatsapp-float,
nav, .carousel-arrow, .flickity-page-dots,
.flickity-prev-next-button {
display: none !important;
}
body {
background: white !important;
color: #1A1A2E !important;
font-family: Georgia, serif !important;
font-size: 11pt !important;
line-height: 1.5 !important;
}
h1, .product-single__title, .product__title {
font-family: Georgia, serif !important;
font-size: 24pt !important;
}
.product-single__price, .product__price {
font-size: 18pt !important;
color: #8A6F26 !important;
}
img {
max-width: 100% !important;
page-break-inside: avoid !important;
}
a { color: #1A1A2E !important; text-decoration: none !important; }
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 9pt; color: #666;
}
}
/* ═══════════════════════════════════════════════════ */
/* Smooth anchor scrolling */
/* Global reduced-motion override already exists at */
/* line ~19137 ( * { scroll-behavior: auto !important; */
/* } ), so no task-local @media block needed. */
/* ═══════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
/* ═══════════════════════════════════════════════════ */
/* Animated gold underline */
/* on prose/article/page/rte/footer links. */
/* Excludes buttons, nav CTA, footer contact + badges. */
/* ═══════════════════════════════════════════════════ */
.article-template a:not(.button):not(.hgbj-nav-cta),
.page-template a:not(.button):not(.hgbj-nav-cta),
.rte a:not(.button):not(.hgbj-nav-cta),
.footer a:not(.hgbj-contact-link):not(.hgbj-footer-badge) {
position: relative;
text-decoration: none;
color: inherit;
transition: color 0.4s ease;
}
.article-template a:not(.button)::after,
.page-template a:not(.button)::after,
.rte a:not(.button)::after,
.footer a:not(.hgbj-contact-link):not(.hgbj-footer-badge)::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1px;
background: #B8973A;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.article-template a:hover::after,
.page-template a:hover::after,
.rte a:hover::after,
.footer a:hover::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
.article-template a::after, .page-template a::after,
.rte a::after, .footer a::after {
transition: none;
}
}
/* ═══════════════════════════════════════════════════ */
/* Stagger utility */
/* Base .hgbj-reveal timing untouched — existing v30 */
/* block at line ~20126 already uses 1.1s */
/* cubic-bezier(0.16,1,0.3,1) which is close to the */
/* brief's target. This adds .hgbj-reveal--stagger */
/* for cascading child reveals — apply to a parent */
/* whose children each fade in with 120ms offsets. */
/* Handles both .is-visible (IO) and */
/* .hgbj-reveal--visible (older JS) toggle classes. */
/* ═══════════════════════════════════════════════════ */
.hgbj-reveal--stagger > * {
opacity: 0;
transform: translateY(10px);
transition:
opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.hgbj-reveal--stagger.is-visible > *:nth-child(1),
.hgbj-reveal--stagger.hgbj-reveal--visible > *:nth-child(1) { transition-delay: 0ms; }
.hgbj-reveal--stagger.is-visible > *:nth-child(2),
.hgbj-reveal--stagger.hgbj-reveal--visible > *:nth-child(2) { transition-delay: 120ms; }
.hgbj-reveal--stagger.is-visible > *:nth-child(3),
.hgbj-reveal--stagger.hgbj-reveal--visible > *:nth-child(3) { transition-delay: 240ms; }
.hgbj-reveal--stagger.is-visible > *:nth-child(4),
.hgbj-reveal--stagger.hgbj-reveal--visible > *:nth-child(4) { transition-delay: 360ms; }
.hgbj-reveal--stagger.is-visible > *,
.hgbj-reveal--stagger.hgbj-reveal--visible > * {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.hgbj-reveal--stagger > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* Collection tile hover */
/* Existing scale(1.04) at line 19049 retained */
/* (imperceptibly close to brief's 1.035x; forcing the */
/* override would need !important with minimal gain). */
/* This adds the gold hairline border fade-in only. */
/* Skipped on touch devices and reduced-motion. */
/* ═══════════════════════════════════════════════════ */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.shopify-section--collection-list .collection-grid-item {
border: 1px solid transparent;
transition: border-color 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.shopify-section--collection-list .collection-grid-item:hover {
border-color: rgba(184, 151, 58, 0.5);
}
}
/* ═══════════════════════════════════════════════════ */
/* Pre-footer CTA elevation */
/* Scoped by Shopify's section instance id */
/* (#shopify-section-final-cta-pre-footer) — the JSON */
/* template instance name, NOT a section type class. */
/* The consultation-cta section already ships its own */
/* gold ornament (.hgbj-cta-ornament) + gold-tinted */
/* border-top, so we do NOT add a third ::before gold */
/* line. Gradient bg + more dramatic reveal timing. */
/* ═══════════════════════════════════════════════════ */
#shopify-section-final-cta-pre-footer .hgbj-cta-section {
background: #1A1A2E;
background-image: linear-gradient(
135deg, #1A1A2E 0%, #24243E 50%, #1A1A2E 100%
);
}
#shopify-section-final-cta-pre-footer .hgbj-cta-inner {
transform: translateY(24px);
transition:
opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#shopify-section-final-cta-pre-footer .hgbj-cta-inner.hgbj-cta-visible {
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
#shopify-section-final-cta-pre-footer .hgbj-cta-inner {
transform: none !important;
transition: none !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* Section divider ornament */
/* Rendered via Liquid error: This liquid context does not allow includes. at the */
/* bottom of bespoke-journey.liquid and the top of */
/* testimonial-carousel.liquid (Option A — no JSON */
/* template edit). */
/* ═══════════════════════════════════════════════════ */
.hgbj-ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 48px 24px;
max-width: 720px;
margin: 0 auto;
}
.hgbj-ornament__rule {
flex: 0 0 80px;
height: 1px;
background: rgba(184, 151, 58, 0.4);
}
.hgbj-ornament__diamond {
flex: 0 0 12px;
}
@media (max-width: 768px) {
.hgbj-ornament { padding: 32px 20px; gap: 16px; }
.hgbj-ornament__rule { flex: 0 0 48px; }
}
/* ═══════════════════════════════════════════════════ */
/* fix: P-1 — collection-list tile hover route */
/* The v39 scale(1.04) rule (~line 19047) and v40 Task */
/* 3.4 gold-border rule both target .collection-grid- */
/* item, a class that does NOT exist in the rendered */
/* DOM. Real tile wrapper is .column.blank.thumbnail */
/* inside .list-collections. This block reroutes the */
/* same effects to the real selector. */
/* ═══════════════════════════════════════════════════ */
.shopify-section--collection-list .list-collections > .column.blank.thumbnail {
border: 1px solid transparent;
transition: border-color 0.8s cubic-bezier(0.22, 1, 0.36, 1);
overflow: hidden;
}
.shopify-section--collection-list .list-collections > .column.blank.thumbnail img {
transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.shopify-section--collection-list .list-collections > .column.blank.thumbnail:hover {
border-color: rgba(184, 151, 58, 0.5);
}
.shopify-section--collection-list .list-collections > .column.blank.thumbnail:hover img {
transform: scale(1.035);
}
}
/* ═════════════════════════════════════════════════════════════════ */
/* ═══════════════ HGBJ v40.3 CONSOLIDATED CSS BLOCK ═════════════ */
/* ═════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* cart basket luxury refinement */
/* Remove stale #cccccc plate, hide "0" count badge */
/* when empty, clean inline ivory bag icon on navy */
/* top bar with gold hover. Cartier/Van Cleef pattern. */
/* ═══════════════════════════════════════════════════ */
.mini_cart,
.nav a.mini_cart,
.top-bar .cart-container .mini_cart {
background-color: transparent !important;
padding-left: 8px !important;
padding-right: 8px !important;
margin-left: 12px !important;
}
#header .top-bar a.icon-bag,
#header .top-bar a.icon-cart,
.top-bar .mini_cart {
color: #F9F7F4 !important;
}
#header .top-bar a.icon-bag:hover,
#header .top-bar a.icon-cart:hover,
.top-bar .mini_cart:hover {
color: #B8973A !important;
}
/* Hide count badge when cart empty — use existing
.js-empty-cart__message state via :has() */
.cart-container:has(.js-empty-cart__message:not(.hidden)) .cart_count {
display: none;
}
/* When count IS shown (cart has items): style as
small gold pill */
.cart-container .mini_cart .cart_count {
display: inline-block;
min-width: 14px;
height: 14px;
padding: 0 4px;
margin-left: 6px;
font-size: 10px;
line-height: 14px;
font-family: Georgia, serif;
color: #1A1A2E;
background: #B8973A;
border-radius: 50%;
text-align: center;
vertical-align: super;
}
/* ═══════════════════════════════════════════════════ */
/* product grid title sizing */
/* 38px inherited from headline_font_size → 18px. */
/* Matches Cartier product grid ~18px. Titles quieter, */
/* image becomes the star. */
/* ═══════════════════════════════════════════════════ */
.product-card__title,
.product-item__title,
.product-loop__title,
.featured-collection .product-title,
.featured-collection__item .product-title,
.collection-template .product-title,
.shopify-section--featured-collection h3,
.shopify-section--featured-collection h3.title,
.shopify-section--featured-collection .product_item_title,
.shopify-section--collection-list h3,
.grid-item__title,
.thumbnail .title {
font-size: 18px !important;
line-height: 1.3 !important;
letter-spacing: 0.1em !important;
font-weight: 400 !important;
text-transform: uppercase !important;
margin-top: 20px !important;
margin-bottom: 8px !important;
}
.product-card__price,
.product-item__price,
.product-loop__price,
.featured-collection .price,
.shopify-section--featured-collection .price {
font-size: 14px !important;
letter-spacing: 0.02em !important;
}
.price em,
.price .price-label,
.price-label {
font-size: 11px !important;
font-style: italic;
color: #9A8C7E;
margin-right: 4px;
}
/* ═══════════════════════════════════════════════════ */
/* ornament divider rebuild */
/* Old 3-span flex approach: rules at 40% gold opacity */
/* on ivory = 1.15:1 contrast (invisible), diamond */
/* drifted left. Replace with single inline SVG via */
/* ::before — impossible to misalign, guaranteed */
/* center, 70% gold opacity = visible-but-restrained. */
/* ═══════════════════════════════════════════════════ */
.hgbj-ornament__rule { display: none !important; }
.hgbj-ornament {
display: block !important;
text-align: center;
padding: 56px 24px !important;
max-width: none !important;
margin: 0;
line-height: 0;
}
.hgbj-ornament__diamond,
.hgbj-ornament__line {
display: none !important;
}
.hgbj-ornament::before {
content: '';
display: inline-block;
width: 240px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@media (max-width: 768px) {
.hgbj-ornament {
padding: 36px 20px !important;
}
.hgbj-ornament::before {
width: 180px;
height: 12px;
}
}
/* ═══════════════════════════════════════════════════ */
/* footer hours two-line restyle */
/* Primary line "By Appointment" — gold letter-spacing */
/* Detail line — muted below */
/* ═══════════════════════════════════════════════════ */
.hgbj-footer-hours-detail {
display: block;
color: rgba(154, 140, 126, 0.5);
font-size: 11px;
margin-top: 2px;
letter-spacing: 0.04em;
font-family: 'EB Garamond', Georgia, serif;
}
/* ═══════════════════════════════════════════════════ */
/* footer section separators */
/* Strengthen 18%→35% gold hairline above trust strip. */
/* Add subtle 25% gold hairline at top of main footer */
/* to separate from page content above. */
/* ═══════════════════════════════════════════════════ */
footer.footer {
border-top: 1px solid rgba(184, 151, 58, 0.25) !important;
}
.hgbj-footer-badges {
border-top: 1px solid rgba(184, 151, 58, 0.35) !important;
padding-top: 28px !important;
padding-bottom: 28px !important;
}
/* ═══════════════════════════════════════════════════ */
/* footer trust strip font */
/* Cormorant Garamond is display-only; at 10.5px it */
/* reads spindly. EB Garamond is text-grade and clean. */
/* ═══════════════════════════════════════════════════ */
.hgbj-footer-badges,
.hgbj-footer-badge {
font-family: 'EB Garamond', Georgia, serif !important;
}
/* ═══════════════════════════════════════════════════ */
/* letter-spacing luxury override */
/* Shopify font-picker max is 1px. Force em-based */
/* spacing that scales with font size. Cartier/Van */
/* Cleef use ~0.14-0.18em on all uppercase nav/CTA. */
/* ═══════════════════════════════════════════════════ */
.nav-desktop__tier-1-link,
.nav-desktop__tier-1-item > a,
.main-nav .nav a,
header#header nav a {
letter-spacing: 0.18em !important;
}
.top-bar .hgbj-tb-item,
.top-bar .hgbj-tb-ticker__copy,
.top-bar a {
letter-spacing: 0.14em !important;
}
.hgbj-nav-cta {
letter-spacing: 0.18em !important;
}
footer.footer .footer__column-title,
footer.footer h3,
footer.footer h6 {
letter-spacing: 0.14em !important;
}
.hgbj-footer-badge {
letter-spacing: 0.14em !important;
}
/* ═══════════════════════════════════════════════════ */
/* article body legibility */
/* Strip inline uppercase + faint color from legacy */
/* post HTML. Force EB Garamond body + brand body */
/* color. Scoped to .article_content only. */
/* ═══════════════════════════════════════════════════ */
.article_content .rte p,
.article_content .rte span,
.article_content .rte li,
.article_content .rte div:not(.hgbj-home-faq):not(.hgbj-quote-frame),
.article_content .rte td {
color: #5C5046 !important;
text-transform: none !important;
letter-spacing: 0.01em !important;
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 17px !important;
line-height: 1.7 !important;
}
.article_content .rte h1,
.article_content .rte h2,
.article_content .rte h3,
.article_content .rte h4,
.article_content .rte h5,
.article_content .rte h6 {
color: #1A1A2E !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
text-transform: none !important;
letter-spacing: 0.015em !important;
}
.article_content .rte strong,
.article_content .rte b {
color: #1A1A2E !important;
font-weight: 600;
}
.article_content .rte em,
.article_content .rte i {
font-style: italic !important;
color: #A8896A;
}
.article_content .rte a:not(.button) {
color: #1A1A2E !important;
}
/* ═══════════════════════════════════════════════════ */
/* mobile featured-collection tightening*/
/* Hide stranded 80px gold feature-divider on mobile. */
/* Compress vertical rhythm of product cards in mobile */
/* carousel so each product card fits one screen. */
/* ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
.shopify-section--featured-collection .feature-divider,
.product-slider .feature-divider,
.products-slider .feature-divider,
.thumbnail .feature-divider,
.product-wrap .feature-divider,
.gallery-cell .feature-divider {
display: none !important;
}
.shopify-section--featured-collection .thumbnail,
.shopify-section--featured-collection .gallery-cell {
padding: 0 4vw !important;
}
.shopify-section--featured-collection .product_image,
.shopify-section--featured-collection .product-wrap .product_image {
margin-bottom: 16px !important;
}
.shopify-section--featured-collection .product-info__caption,
.shopify-section--featured-collection .product-details,
.shopify-section--featured-collection .thumbnail .caption-content {
padding: 0 !important;
text-align: center !important;
}
.shopify-section--featured-collection .product-title,
.shopify-section--featured-collection .thumbnail .title,
.shopify-section--featured-collection h3.title {
font-size: 17px !important;
letter-spacing: 0.12em !important;
margin: 0 0 10px !important;
line-height: 1.3 !important;
}
.shopify-section--featured-collection .product-price,
.shopify-section--featured-collection .price,
.shopify-section--featured-collection .thumbnail .price {
font-size: 14px !important;
margin: 0 0 20px !important;
}
.shopify-section--featured-collection .hgbj-fc__view-all-wrap {
margin-top: 24px !important;
padding: 0 20px !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* promo banner harmonization */
/* Was: ivory bg, grey text — looked like broken gap. */
/* Now: navy bg, ivory text, gold hairlines above + */
/* below. Close X in gold. */
/* ═══════════════════════════════════════════════════ */
header#header .promo-banner {
background-color: #1A1A2E !important;
color: #F9F7F4 !important;
border-top: 1px solid rgba(184, 151, 58, 0.35) !important;
border-bottom: 1px solid rgba(184, 151, 58, 0.35) !important;
padding: 10px 0 !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
line-height: 1.4 !important;
height: auto !important;
}
header#header .promo-banner .promo-banner__content {
color: #F9F7F4 !important;
padding: 0 40px !important;
font-size: 11px !important;
letter-spacing: 0.16em !important;
max-height: none !important;
}
@media (max-width: 768px) {
header#header .promo-banner .promo-banner__content {
font-size: 10px !important;
letter-spacing: 0.12em !important;
padding: 0 36px !important;
line-height: 1.5 !important;
}
}
header#header .promo-banner .promo-banner__close {
color: rgba(184, 151, 58, 0.8) !important;
}
header#header .promo-banner .promo-banner__close::before,
header#header .promo-banner .promo-banner__close::after {
background: rgba(184, 151, 58, 0.8) !important;
}
header#header .promo-banner .promo-banner__close:hover {
color: #B8973A !important;
}
/* ═══════════════════════════════════════════════════ */
/* mobile search icon consistency */
/* Gold → ivory on mobile. Gold preserved on hover as */
/* accent state. Matches hamburger + cart treatment. */
/* ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
#header .top-bar--right .icon-search,
#header .top-bar .icon-search,
header#header .icon-search,
header#header .mobile-search-trigger {
color: #F9F7F4 !important;
fill: #F9F7F4 !important;
stroke: #F9F7F4 !important;
}
#header .top-bar--right .icon-search:hover,
header#header .icon-search:hover {
color: #B8973A !important;
fill: #B8973A !important;
stroke: #B8973A !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* mobile footer link rhythm */
/* Tighten 140px gaps → 48px tap-target rhythm. */
/* Add 4% ivory hairline dividers between items for */
/* subtle separation. Gold hover. */
/* ═══════════════════════════════════════════════════ */
@media (max-width: 798px) {
footer.footer .footer_menu ul li,
footer.footer .footer_content ul li,
footer.footer .toggle_content ul li,
footer.footer .footer_menu li,
footer.footer .footer_content li {
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
}
footer.footer .footer_menu ul li a,
footer.footer .footer_content ul li a,
footer.footer .toggle_content ul li a,
footer.footer .footer_menu li a,
footer.footer .footer_content li a {
display: block !important;
padding: 14px 0 !important;
line-height: 1.3 !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
color: rgba(249, 247, 244, 0.72) !important;
transition: color 0.25s ease !important;
}
footer.footer .footer_menu ul li:last-child a,
footer.footer .footer_content ul li:last-child a,
footer.footer .toggle_content ul li:last-child a {
border-bottom: none !important;
}
footer.footer .footer_menu ul li a:hover,
footer.footer .footer_menu ul li a:active,
footer.footer .footer_content ul li a:hover,
footer.footer .footer_content ul li a:active {
color: #B8973A !important;
}
footer.footer .toggle_content {
padding: 4px 0 16px !important;
}
footer.footer .footer_menu ul,
footer.footer .footer_content ul,
footer.footer .toggle_content ul {
margin: 0 !important;
padding: 0 !important;
}
}
/* ═════════════════════════════════════════════════════════════════ */
/* ═══════════ END OF v40.3 CONSOLIDATED CSS BLOCK ═══════════════ */
/* ═════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════ */
/* fix 1 PATCH: cart badge cascade override */
/* Turbo's `header#header .cart_count { color/bg !important }` has */
/* ID-level specificity that beat our (0,4,0) :has() selector on */
/* mobile, leaving a black "0" circle visible. Restate the gold- */
/* pill at (1,3,1) with full !important, and re-declare the */
/* display:none for empty cart at (1,5,1) so :has continues to win */
/* over the gold pill when the cart is empty. Mobile + desktop. */
/* ═══════════════════════════════════════════════════════════════ */
header#header .cart-container .mini_cart .cart_count,
header#header .cart-container a.mini_cart .cart_count {
display: inline-block !important;
min-width: 14px !important;
height: 14px !important;
padding: 0 4px !important;
margin-left: 6px !important;
font-size: 10px !important;
line-height: 14px !important;
font-family: Georgia, serif !important;
color: #1A1A2E !important;
background: #B8973A !important;
border-radius: 50% !important;
text-align: center !important;
vertical-align: super !important;
}
header#header .cart-container:has(.js-empty-cart__message:not(.hidden)) .cart_count,
header#header .cart-container:has(.js-empty-cart__message:not(.hidden)) a.mini_cart .cart_count {
display: none !important;
}
/* ═══════════════════════════════════════════════════ */
/* CONSOLIDATED BLOCK — HEADER + HOMEPAGE POLISH */
/* 5 fixes. All CSS-only. No content or schema changes.*/
/* Selectors DOM-verified against live v40.3.2 preview */
/* prior to write. Append-only to styles.css.liquid. */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* header bar separation */
/* Promo banner + top bar both navy after v40.3 fix */
/* 18 — visually merge into one slab. Give each its */
/* own breathing room + strengthened hairline between. */
/* Existing v40.3 fix 18 sets min-height 32px at */
/* specificity header#header .top-bar (1,1,1). Match */
/* that specificity here so later-source-order wins. */
/* ═══════════════════════════════════════════════════ */
header#header .promo-banner {
padding: 12px 0 !important;
border-bottom: 1px solid rgba(184, 151, 58, 0.45) !important;
}
header#header .top-bar {
padding-top: 6px !important;
padding-bottom: 6px !important;
min-height: 44px !important;
border-top: 1px solid rgba(26, 26, 46, 0.4) !important;
}
/* ═══════════════════════════════════════════════════ */
/* cart icon vertical containment */
/* Cart icon clipped below top bar's gold hairline. */
/* Force explicit vertical-center alignment + overflow */
/* containment inside top-bar bounds. Parent is flex */
/* (top-bar--right), so we drop the legacy float. */
/* ═══════════════════════════════════════════════════ */
.top-bar .cart-container,
.top-bar--right .cart-container {
display: inline-flex !important;
align-items: center !important;
height: 100%;
overflow: visible;
padding-right: 4px;
float: none !important;
}
.top-bar .cart-container .mini_cart {
display: inline-flex !important;
align-items: center !important;
line-height: 1 !important;
padding: 0 8px !important;
height: auto !important;
}
.top-bar .cart-container .mini_cart::before,
.top-bar .cart-container a.icon-bag::before,
.top-bar .cart-container a.icon-cart::before {
vertical-align: middle !important;
line-height: 1 !important;
font-size: 18px !important;
}
/* ═══════════════════════════════════════════════════ */
/* nav CTA + search rhythm */
/* Rebalance horizontal spacing: more breathing room */
/* left of BOOK APPOINTMENT; tighten gap to Search so */
/* they cluster rather than orphan. */
/* DOM-VERIFIED: .hgbj-nav-cta and .search-container */
/* live under .main-nav (not header#header) — Turbo */
/* renders a second header element for the main nav. */
/* Existing .sticky_nav .hgbj-nav-cta (specificity 20) */
/* and @media .hgbj-nav-cta rules must be beaten by */
/* !important + specificity >= 20. */
/* ═══════════════════════════════════════════════════ */
.main-nav .hgbj-nav-cta,
.main-nav__wrapper .hgbj-nav-cta {
margin-left: 32px !important;
margin-right: 20px !important;
}
.main-nav .search-container,
.main-nav__wrapper .search-container,
.main-nav .header__search,
.main-nav [class*="search"][class*="wrap"],
.main-nav .nav-search,
.main-nav .search-form {
margin-left: 0 !important;
margin-right: 0 !important;
}
@media (min-width: 1024px) {
.nav-desktop,
.main-nav .nav-desktop {
padding-right: 20px !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* dropdown letter-spacing refinement */
/* fix 14 rule `.main-nav .nav a` (spec 21 with */
/* !important) applies 0.18em to ALL nav descendants */
/* including mega-menu sub-items. At 15px font this */
/* computes to 2.7px — too loose for mixed-case words, */
/* letters float apart, reads childish. */
/* DOM-VERIFIED: mega-menu lives under .main-nav .nav */
/* — NOT inside header#header. Target .main-nav .nav */
/* .mega-menu a (spec 31) to outrank the 21 rule. */
/* Top-level nav items (.nav-desktop__tier-1 > a) */
/* remain untouched at 0.18em. */
/* ═══════════════════════════════════════════════════ */
.main-nav .nav .mega-menu a,
.main-nav .nav .dropdown_content a,
.main-nav .nav .nav-desktop__tier-2 a,
.main-nav .nav .mega-menu__richtext a,
.main-nav .nav .mega-menu__image-caption-link {
letter-spacing: 0.02em !important;
font-style: normal !important;
}
.main-nav .nav .mega-menu h3,
.main-nav .nav .mega-menu h4,
.main-nav .nav .mega-menu .column-title,
.main-nav .nav .mega-menu__heading,
.main-nav .nav .mega-menu__column-title,
.main-nav .nav .dropdown_column h3,
.main-nav .nav .dropdown_column h4 {
letter-spacing: 0.08em !important;
font-style: normal !important;
}
/* ═══════════════════════════════════════════════════ */
/* universal homepage edge-bleed */
/* Turbo's .shopify-section wrapper constrains certain */
/* sections with residual padding. DOM audit: most */
/* sections are already 1425px; newsletter is the only */
/* outlier with 24px shopify-section gutters. */
/* Defensive rule below normalizes all homepage */
/* sections to full-width for background bleed, with */
/* a NEWSLETTER SAFETY override below so the form */
/* doesn't stretch when .section-wrapper--index is */
/* unconstrained. */
/* DOM-VERIFIED: body class on homepage is "index" */
/* (not "template-index"). Both listed for safety. */
/* ═══════════════════════════════════════════════════ */
/* Break out of Turbo's default .shopify-section
constraint, homepage only */
body.template-index .shopify-section,
body.index .shopify-section {
width: 100% !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Newsletter/other nested wrappers that also constrain
width — let them span full so background bleeds */
body.template-index .shopify-section [class*="section-wrapper"],
body.index .shopify-section [class*="section-wrapper"],
body.template-index .shopify-section .wrapper,
body.index .shopify-section .wrapper {
width: 100% !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Visual bands fill viewport (predicted class names;
no-op where class not present — safe to list) */
body.template-index .hgbj-testimonial-carousel,
body.index .hgbj-testimonial-carousel,
body.template-index .hgbj-home-faq,
body.index .hgbj-home-faq,
body.template-index .hgbj-editorial-quote,
body.index .hgbj-editorial-quote,
body.template-index .hgbj-bespoke-journey,
body.index .hgbj-bespoke-journey,
body.template-index .hgbj-collection-list,
body.index .hgbj-collection-list,
body.template-index .hgbj-cinematic-bench,
body.index .hgbj-cinematic-bench,
body.template-index .hgbj-home-cta,
body.index .hgbj-home-cta,
body.template-index .hgbj-final-cta,
body.index .hgbj-final-cta,
body.template-index .hgbj-trust-badges,
body.index .hgbj-trust-badges,
body.template-index .hgbj-newsletter,
body.index .hgbj-newsletter,
body.template-index .hgbj-featured-collection,
body.index .hgbj-featured-collection,
body.template-index .bj-section,
body.index .bj-section,
body.template-index .tb-section,
body.index .tb-section,
body.template-index .hgbj-cta-section,
body.index .hgbj-cta-section {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Inner content wrappers stay centered + readable */
body.template-index .hgbj-home-faq-inner,
body.index .hgbj-home-faq-inner,
body.template-index .hgbj-tc__viewport,
body.index .hgbj-tc__viewport,
body.template-index .hgbj-tc__carousel,
body.index .hgbj-tc__carousel,
body.template-index .hgbj-editorial-quote__inner,
body.index .hgbj-editorial-quote__inner,
body.template-index .hgbj-home-cta__inner,
body.index .hgbj-home-cta__inner,
body.template-index .hgbj-final-cta__inner,
body.index .hgbj-final-cta__inner,
body.template-index .hgbj-newsletter__inner,
body.index .hgbj-newsletter__inner,
body.template-index .hgbj-bespoke-journey__inner,
body.index .hgbj-bespoke-journey__inner {
max-width: 1200px;
margin: 0 auto;
padding-left: clamp(24px, 4vw, 48px);
padding-right: clamp(24px, 4vw, 48px);
}
/* fix 5 safety: newsletter form centering
.section-wrapper--index + .newsletter_section are
real DOM classes. After the broad full-width rule
above strips constraints, re-center the newsletter
form at a readable max-width so it doesn't stretch
to 1440px on wide viewports. */
body.template-index .shopify-section--newsletter .newsletter_section,
body.index .shopify-section--newsletter .newsletter_section,
body.template-index .shopify-section--newsletter .section-wrapper--index > .section,
body.index .shopify-section--newsletter .section-wrapper--index > .section,
body.template-index .shopify-section--newsletter .container,
body.index .shopify-section--newsletter .container {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(24px, 4vw, 48px) !important;
padding-right: clamp(24px, 4vw, 48px) !important;
width: auto !important;
}
/* fix 5 safety: editorial-quote + FAQ keep
their Turbo .section > .container at 1200px centered
(already desired behavior — make it explicit against
the upstream broad rule). */
body.template-index .shopify-section--custom-liquid > .section,
body.index .shopify-section--custom-liquid > .section,
body.template-index .shopify-section--custom-liquid > .section > .container,
body.index .shopify-section--custom-liquid > .section > .container {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(24px, 4vw, 48px) !important;
padding-right: clamp(24px, 4vw, 48px) !important;
width: auto !important;
}
/* ═══════════════════════════════════════════════════ */
/* END v40.4 CONSOLIDATED BLOCK */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* A11Y CONSOLIDATED BLOCK */
/* Accessibility patches layered on top of v40.4. */
/* Paired with Liquid edits in header.liquid, */
/* include-newsletter.liquid, testimonial-carousel. */
/* liquid, theme.liquid. */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* fix A: mobile touch-target minimums */
/* Top-bar links (Our Story, Contact, Login, phone), */
/* cart icon, trust-bar review link render below the */
/* WCAG 2.5.5 44x44 target on mobile. Pad them. */
/* Apply on coarse-pointer devices OR small viewports. */
/* Desktop fine-pointer stays compact per design. */
/* ═══════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
.top-bar a,
.top-bar .mini_cart,
.top-bar--right-menu a,
.hgbj-tb-item--link,
.top-bar__login-link {
min-height: 44px;
display: inline-flex;
align-items: center;
padding-top: 10px;
padding-bottom: 10px;
}
.top-bar .cart-container .mini_cart {
min-width: 44px;
justify-content: center;
}
}
/* ═══════════════════════════════════════════════════ */
/* fix B: price screen-reader context */
/* Prices render as bare currency ("£1,500") without */
/* context for screen readers. Add a visually-hidden */
/* "Price: " prefix via ::before pseudo-content so it */
/* is announced by SR but invisible to sighted users. */
/* Scope to product-card + product-template + grid */
/* locations; avoid global .price to prevent double */
/* reading in tables, wishlists, cart rows. */
/* ═══════════════════════════════════════════════════ */
.product-card .price__regular .price__current::before,
.product-card .price__current::before,
.product-grid-item .price::before,
.product_price .price__current:first-child::before,
.grid__item .price .price__current::before {
content: "Price: ";
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════════════ */
/* fix C: testimonial carousel play/pause btn */
/* New button added in testimonial-carousel.liquid */
/* (WCAG 2.2.2). Style it as a subtle circular control */
/* beside the nav arrows, consistent with HGBJ gold. */
/* ═══════════════════════════════════════════════════ */
.hgbj-tc__playpause {
position: absolute;
bottom: -36px;
left: 50%;
transform: translateX(-50%);
background: transparent;
border: 1px solid rgba(184, 151, 58, 0.4);
border-radius: 50%;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--hgbj-navy, #1A1A2E);
font-size: 10px;
line-height: 1;
transition: background 0.2s ease, border-color 0.2s ease;
padding: 0;
}
.hgbj-tc__playpause:hover,
.hgbj-tc__playpause:focus-visible {
background: rgba(184, 151, 58, 0.08);
border-color: var(--hgbj-gold, #B8973A);
}
.hgbj-tc__playpause.is-paused .hgbj-tc__playpause-icon {
/* swap to ▶ glyph on paused state via pseudo-element trick */
font-family: 'Arial', sans-serif;
}
.hgbj-tc__playpause.is-paused .hgbj-tc__playpause-icon::before {
content: "▶";
}
.hgbj-tc__playpause.is-paused .hgbj-tc__playpause-icon {
font-size: 0;
}
.hgbj-tc__playpause.is-paused .hgbj-tc__playpause-icon::before {
font-size: 11px;
display: inline-block;
}
/* ═══════════════════════════════════════════════════ */
/* fix D: cart dropdown aria-expanded sync */
/* Pure-CSS hover/focus indication — real aria-state */
/* sync happens via small JS in layout/theme.liquid, */
/* but this CSS provides focus-ring consistency. */
/* ═══════════════════════════════════════════════════ */
.cart-container .mini_cart[aria-expanded="true"] {
color: var(--hgbj-gold, #B8973A);
}
.cart-container .mini_cart[aria-haspopup]:focus-visible {
outline: 2px solid var(--hgbj-gold, #B8973A) !important;
outline-offset: 3px !important;
}
/* ═══════════════════════════════════════════════════ */
/* END v40.5 A11Y CONSOLIDATED BLOCK */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* A11Y CONSOLIDATED BLOCK */
/* Priorities 1-3 from full-zip a11y audit: */
/* 1. Cart + search + 404 input labels (Liquid edits) */
/* 2. Cart line-item actions (Liquid edits) */
/* 3. Product-template price aria (CSS widening here) */
/* Paired with Liquid edits in cart-template.liquid, */
/* search-form.liquid, mobile-search.liquid, */
/* blog-sidebar.liquid, 404-template.liquid, */
/* header.liquid. */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* fix E: widen price screen-reader prefix */
/* Fix B scoped to .product-card / .product- */
/* grid-item / .grid__item. The product-template + PDP */
/* render prices with different classes (.current_ */
/* price, .price-ui, .product-block--price, .modal_ */
/* price, .hgbj-pdp-sticky__price, .product-single__ */
/* price). Widen the ::before "Price: " pseudo-content */
/* rule to catch all of them for consistent SR output. */
/* ═══════════════════════════════════════════════════ */
.product-single__price::before,
.product_price .current_price::before,
.product-form__info .current_price::before,
.product-form__info .price__current::before,
.product-block--price .current_price::before,
.modal_price .current_price::before,
.hgbj-pdp-sticky__price .current_price::before,
.price-ui .price-ui__price::before,
.product-single .current_price::before,
/* Fallback for generic .current_price that isn't
inside a .was_price strikethrough context */
.price:not(.was_price) > .current_price::before {
content: "Price: ";
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* fix F: .was_price gets "Was: " prefix so
SRs read "Was £3,000 Price £2,000" instead of two
bare prices on sale items. */
.was_price::before,
.price__compare::before,
.compare-at-price::before {
content: "Was: ";
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ═══════════════════════════════════════════════════ */
/* fix G: cart quantity +/- span-buttons */
/* The minus/plus controls are span role=button */
/* with tabindex=0. Add a visible :focus-visible ring */
/* to match the theme focus style, plus a hover hint. */
/* ═══════════════════════════════════════════════════ */
.product-quantity-box [role="button"].js-change-quantity {
cursor: pointer;
user-select: none;
transition: color 0.15s ease;
}
.product-quantity-box [role="button"].js-change-quantity:hover {
color: var(--hgbj-gold, #B8973A);
}
.product-quantity-box [role="button"].js-change-quantity:focus-visible {
outline: 2px solid var(--hgbj-gold, #B8973A) !important;
outline-offset: 2px !important;
}
/* cart quantity +/- Enter/Space keyboard
support: the existing JS listens for click, so we
trigger click on Space/Enter via focused element
behavior (native on role=button with tabindex=0 —
browsers auto-forward Enter to click). No CSS
needed for that; the focus ring above is sufficient
styling. */
/* ═══════════════════════════════════════════════════ */
/* END v40.6 A11Y CONSOLIDATED BLOCK */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* DESIGN CONSOLIDATED BLOCK */
/* Fixes from frontend-design audit: */
/* H. MagicToolbox thumbnail strip overwhelming PDP */
/* I. Cookie banner too tall on hero */
/* J. Cinematic-bench section 2,184px of mostly */
/* empty navy \u2014 cap to a presentable height */
/* K. Price-listing "\u2014 \u00a31,500" ornament cleanup */
/* L. Guard EB Garamond italic/bold load on first */
/* use (body font change side-effect safety) */
/* NOTE: Fixes 1-2 (body font + .is-visible) already */
/* applied upstream in original rule locations. */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* \u00b7 fix H: PDP MagicToolbox thumbnail cap */
/* Problem: on /products/* the Magic360 gallery renders*/
/* every variant + metal + angle combination as a */
/* 100px thumbnail. Solitaire Ring had 79 thumbnails */
/* forming a 600px tall wall between the hero image */
/* and "You may also like". */
/* Solution: cap the thumbnail container to 260px tall */
/* (~2 rows at 100px + gap), allow scroll inside, fade */
/* the bottom edge so overflow hints at more content. */
/* Desktop only \u2014 mobile thumbnails are already a */
/* horizontal strip. */
/* ═══════════════════════════════════════════════════ */
@media (min-width: 769px) {
.MagicToolboxSelectorsContainer {
max-height: 260px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 8px;
mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
scrollbar-width: thin;
scrollbar-color: rgba(184, 151, 58, 0.4) transparent;
}
.MagicToolboxSelectorsContainer::-webkit-scrollbar {
width: 6px;
}
.MagicToolboxSelectorsContainer::-webkit-scrollbar-thumb {
background: rgba(184, 151, 58, 0.4);
border-radius: 3px;
}
.MagicToolboxSelectorsContainer::-webkit-scrollbar-track {
background: transparent;
}
}
/* ═══════════════════════════════════════════════════ */
/* \u00b7 fix I: compact cookie consent banner */
/* Was 158px tall fixed at bottom, blocking ~18% of */
/* the 900px hero viewport on first paint. Slim to a */
/* ~56-72px strip on desktop; compact card on mobile. */
/* Keeps navy + gold-border luxury feel. */
/* ═══════════════════════════════════════════════════ */
.hgbj-cookie--show {
padding: 14px 24px !important;
gap: 16px !important;
}
.hgbj-cookie--show .hgbj-cookie__message,
.hgbj-cookie--show p {
font-size: 13px !important;
line-height: 1.5 !important;
margin: 0 !important;
max-width: 680px;
}
.hgbj-cookie--show .hgbj-cookie__actions {
gap: 8px !important;
flex-shrink: 0;
}
.hgbj-cookie--show .hgbj-cookie__btn,
.hgbj-cookie--show button {
padding: 8px 16px !important;
font-size: 11px !important;
letter-spacing: 0.12em !important;
}
@media (min-width: 769px) {
.hgbj-cookie--show {
max-width: 960px !important;
margin: 0 auto 16px !important;
left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
bottom: 16px !important;
border-radius: 2px;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
}
}
@media (max-width: 768px) {
.hgbj-cookie--show {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
max-width: calc(100vw - 24px) !important;
padding: 12px 14px !important;
}
.hgbj-cookie--show .hgbj-cookie__message,
.hgbj-cookie--show p {
font-size: 12px !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* \u00b7 fix J: cinematic-bench height cap */
/* Section rendered at 2,184px tall \u2014 ~1,300px of */
/* empty dark navy space for ~400px of content. */
/* Cap to min(900px, 100vh) on desktop, 600px mobile, */
/* letting image + overlay text occupy the frame */
/* rather than drift. */
/* ═══════════════════════════════════════════════════ */
body.index #shopify-section-template--26279671267664__cinematic-bench .hgbj-cinematic-bench,
body.index .shopify-section--image-with-text-overlay.under-menu > section.hgbj-cinematic-bench,
body.index .hgbj-cinematic-bench {
max-height: min(900px, 100vh);
min-height: 520px;
overflow: hidden;
}
@media (max-width: 768px) {
body.index .hgbj-cinematic-bench {
max-height: 600px;
min-height: 400px;
}
}
/* Ensure the image fills the capped container */
body.index .hgbj-cinematic-bench img,
body.index .hgbj-cinematic-bench .image__container {
object-fit: cover;
width: 100%;
height: 100%;
}
/* ═══════════════════════════════════════════════════ */
/* \u00b7 fix K: remove dash ornament prefix on */
/* listing prices. Was ">\u2014 \u00a31,500.00" which read as */
/* a typo. Hide the dash pseudo/text ornament cleanly. */
/* ═══════════════════════════════════════════════════ */
.product-list .price::before,
.product-list .current_price::before,
.featured-collection .price::before {
content: none !important;
}
/* Keep the v40.5/v40.6 SR "Price: " prefix intact \u2014 */
/* those rules use different selectors inside */
/* .product-card / .price:not(.was_price) > ... */
/* ═══════════════════════════════════════════════════ */
/* \u00b7 fix L: EB Garamond loading safety */
/* After swapping --hgbj-font-body to EB Garamond, any */
/* bold/italic body text needs the 400-italic + 700 */
/* faces. Shopify's font-picker may not load these */
/* proactively. Declare explicit @font-face fallbacks */
/* to Google Fonts CDN for the missing weights so that */
/* italic em, bold strong, and bold product text don't */
/* fall back to a system serif. */
/* ═══════════════════════════════════════════════════ */
/* fix: The previous inline @font-face URLs pointed to specific
woff2 hashes on fonts.gstatic.com that Google periodically rotates.
Those URLs now 404, visible in the console as font errors. EB Garamond
is instead loaded from layout/theme.liquid via the Google Fonts CSS
API which returns current URLs for each requesting browser. No inline
@font-face is needed here — the CSS API provides all weights. */
/* ═══════════════════════════════════════════════════ */
/* END v40.7 DESIGN CONSOLIDATED BLOCK */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* DESIGN CONSOLIDATED BLOCK */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* fix 3A: FAQ full-bleed ivory (no island) */
/* ────────────────────────────────────────────────── */
/* faq-schema-general-1 is a custom-liquid section. */
/* sections/custom-liquid.liquid wraps the content in */
/* a section.section element, which at L870 declares */
/* max-width:1200px, width:95% — so the FAQ's ivory bg */
/* only fills the centre 1200px band, leaving body */
/* white visible in outer gutters. Break the FAQ out */
/* of the .section cap using :has() to surgically */
/* target only custom-liquid wrappers containing the */
/* .hgbj-home-faq element. Other custom-liquid sections */
/* (editorial quote etc.) are unaffected. */
/* ═══════════════════════════════════════════════════ */
/* fix 3A patch: the v40.4 rule above at L22761 caps */
/* ALL custom-liquid .section > .container at 1200px with */
/* !important (specificity 0,4,1). To break the FAQ out of that */
/* cap we need higher specificity. Each selector here is (0,5,1). */
body.template-index .shopify-section--custom-liquid > .section:has(.hgbj-home-faq),
body.index .shopify-section--custom-liquid > .section:has(.hgbj-home-faq) {
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.template-index .shopify-section--custom-liquid > .section:has(.hgbj-home-faq) > .container,
body.index .shopify-section--custom-liquid > .section:has(.hgbj-home-faq) > .container {
max-width: none !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.template-index .shopify-section--custom-liquid > .section:has(.hgbj-home-faq) > .container > .one-whole,
body.index .shopify-section--custom-liquid > .section:has(.hgbj-home-faq) > .container > .one-whole {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
/* ═══════════════════════════════════════════════════ */
/* fix 3B: testimonial carousel crop fix */
/* ────────────────────────────────────────────────── */
/* .hgbj-tc__viewport had padding:0 15% + overflow: */
/* hidden. CSS overflow clips at padding-box edge, so */
/* the 15% padding zone is within the clip region; */
/* adjacent slides leak ~15% during transform. Replace */
/* with max-width + auto-margin centring so clip edge */
/* matches slide edge exactly. Max-width 720px chosen */
/* as the luxury reading line-width — between Cartier */
/* 620px and Van Cleef 760px — optimal for italic */
/* Cormorant Garamond at clamp(16,1.5vw,19)px. */
/* Arrows live on .hgbj-tc__carousel (the parent), */
/* which sits full-width, so they remain at the */
/* section edges — no repositioning needed. */
/* ═══════════════════════════════════════════════════ */
.hgbj-tc__viewport {
padding: 0 !important;
max-width: 720px !important;
margin: 0 auto !important;
width: 100% !important;
}
/* Slide stays 100% of viewport = 720px, no peek */
.hgbj-tc__slide {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* ═══════════════════════════════════════════════════ */
/* page-template luxury polish */
/* ────────────────────────────────────────────────── */
/* page-template.liquid renders: */
/* .container.content.page */
/* > h1 */
/* > .feature-divider */
/* > .one-whole.column.rte */
/* which on default pages was rendering as a plain */
/* browser-style article. Elevates to match the luxury */
/* homepage aesthetic: Cormorant Garamond display, */
/* centered H1, gold hairline divider, 760px reading */
/* max-width, refined vertical rhythm, body copy in */
/* EB Garamond with generous line-height. */
/* ═══════════════════════════════════════════════════ */
.content.page {
padding-top: clamp(64px, 8vw, 120px);
padding-bottom: clamp(56px, 6vw, 96px);
}
.content.page > .one-whole.column:first-child {
max-width: 820px;
margin: 0 auto;
text-align: center;
padding-bottom: clamp(40px, 5vw, 72px);
}
.content.page > .one-whole.column:first-child > h1 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(38px, 5.5vw, 64px);
font-weight: 300;
line-height: 1.05;
letter-spacing: 0.015em;
color: #1A1A2E;
margin: 0 0 22px;
text-transform: none;
}
.content.page > .one-whole.column:first-child > .feature-divider {
width: 44px;
height: 1px;
background: #B8973A;
margin: 0 auto;
border: 0;
opacity: 0.85;
}
.content.page .one-whole.column.rte {
max-width: 760px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
font-family: 'EB Garamond', Georgia, serif;
font-size: 17px;
line-height: 1.75;
color: #3a3226;
}
.content.page .rte > h1,
.content.page .rte > h2,
.content.page .rte > h3,
.content.page .rte > h4,
.content.page .rte > h5,
.content.page .rte > h6 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
color: #1A1A2E;
letter-spacing: 0.02em;
text-transform: none;
margin-top: clamp(48px, 5vw, 72px);
margin-bottom: 18px;
line-height: 1.15;
}
.content.page .rte > h1:first-child,
.content.page .rte > h2:first-child,
.content.page .rte > h3:first-child { margin-top: 0; }
.content.page .rte > h1 { font-size: clamp(32px, 3.6vw, 42px); }
.content.page .rte > h2 { font-size: clamp(26px, 2.8vw, 34px); }
.content.page .rte > h3 {
font-size: clamp(20px, 2vw, 24px);
font-weight: 400;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #B8973A;
margin-top: clamp(40px, 4vw, 56px);
margin-bottom: 12px;
}
.content.page .rte > h4 { font-size: clamp(19px, 1.8vw, 22px); }
.content.page .rte > h5,
.content.page .rte > h6 {
font-family: 'EB Garamond', Georgia, serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #9A8C7E;
margin-top: clamp(32px, 3vw, 40px);
}
.content.page .rte > p,
.content.page .rte li,
.content.page .rte > blockquote {
font-size: 17px;
line-height: 1.75;
color: #3a3226;
margin: 0 0 20px;
}
.content.page .rte > p strong,
.content.page .rte li strong { color: #1A1A2E; font-weight: 600; }
.content.page .rte > p em,
.content.page .rte li em {
font-style: italic;
font-family: 'EB Garamond', Georgia, serif;
}
.content.page .rte a:not(.global-button) {
color: #8a6f26;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.25s ease;
}
.content.page .rte a:not(.global-button):hover { color: #B8973A; }
.content.page .rte > ul,
.content.page .rte > ol {
margin: 8px 0 28px;
padding-left: 24px;
}
.content.page .rte > ul li { list-style: none; position: relative; padding-left: 20px; margin-bottom: 10px; }
.content.page .rte > ul li::before {
content: '';
position: absolute;
left: 0; top: 0.75em;
width: 8px; height: 1px;
background: #B8973A;
}
.content.page .rte > ol li { padding-left: 6px; margin-bottom: 10px; }
.content.page .rte > ol li::marker { color: #B8973A; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; }
.content.page .rte > blockquote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 300;
line-height: 1.4;
color: #1A1A2E;
max-width: 620px;
margin: clamp(40px, 4vw, 56px) auto;
padding: 0 24px;
text-align: center;
border: 0;
position: relative;
}
.content.page .rte > blockquote::before,
.content.page .rte > blockquote::after {
content: '';
display: block;
width: 36px; height: 1px;
background: #B8973A;
margin: 0 auto 20px;
}
.content.page .rte > blockquote::after { margin: 20px auto 0; }
.content.page .rte > hr {
border: 0;
height: 1px;
background: rgba(184, 151, 58, 0.3);
margin: clamp(48px, 5vw, 72px) auto;
max-width: 120px;
}
.content.page .rte > table {
width: 100%;
border-collapse: collapse;
margin: 28px 0;
font-size: 15px;
}
.content.page .rte > table th,
.content.page .rte > table td {
padding: 14px 16px;
border-bottom: 1px solid rgba(184, 151, 58, 0.2);
text-align: left;
}
.content.page .rte > table th {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 500;
color: #1A1A2E;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.content.page .rte > img,
.content.page .rte figure img {
display: block;
max-width: 100%;
height: auto;
margin: clamp(32px, 4vw, 48px) auto;
border-radius: 2px;
}
.content.page .rte > figure {
margin: clamp(32px, 4vw, 48px) auto;
max-width: 100%;
}
.content.page .rte > figure > figcaption {
font-size: 13px;
color: #9A8C7E;
letter-spacing: 0.08em;
text-align: center;
margin-top: 12px;
font-style: italic;
}
/* Emphasis callout: paragraph with class "lead" or first p after h1 gets
a slight typographic lift as the page intro */
.content.page .rte > h1 + p,
.content.page .rte > h2:first-child + p,
.content.page .rte > p.lead {
font-size: clamp(18px, 1.6vw, 20px);
line-height: 1.65;
color: #1A1A2E;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-weight: 400;
}
@media (max-width: 640px) {
.content.page {
padding-top: clamp(40px, 10vw, 56px);
padding-bottom: clamp(40px, 10vw, 56px);
}
.content.page > .one-whole.column:first-child { padding-bottom: 32px; }
.content.page .rte > h1 + p,
.content.page .rte > p.lead { font-size: 17px; }
}
/* ═══════════════════════════════════════════════════ */
/* cross-section luxury polish */
/* ────────────────────────────────────────────────── */
/* 63+ pages use `featured-text` sections, plus */
/* image-with-text-overlay, image-text, consultation- */
/* cta, gallery, divider. This block tightens vertical */
/* rhythm, elevates typography, and creates visual */
/* consistency across all content pages at once. */
/* ═══════════════════════════════════════════════════ */
/* ── featured-text (rich text and image) ───────────── */
.shopify-section--rich-text-and-image {
background: #FFFFFF;
}
.shopify-section--rich-text-and-image section.section {
padding-top: clamp(48px, 6vw, 96px);
padding-bottom: clamp(48px, 6vw, 96px);
}
.shopify-section--rich-text-and-image section.section:has(.rich-text__content .align_center),
.shopify-section--rich-text-and-image .rich-text__content.align_center {
text-align: center;
}
.shopify-section--rich-text-and-image .rich-text__content {
max-width: 820px;
margin: 0 auto;
}
.shopify-section--rich-text-and-image .rich-text__content.align_left { max-width: 760px; }
.shopify-section--rich-text-and-image .rich-text__content.align_center,
.shopify-section--rich-text-and-image .rich-text__content.align_centered { max-width: 720px; }
.shopify-section--rich-text-and-image h2.rich-text__heading {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-style: normal !important;
font-size: clamp(28px, 3.6vw, 42px) !important;
line-height: 1.12 !important;
color: #1A1A2E !important;
letter-spacing: 0.015em !important;
margin: 0 0 20px !important;
text-transform: none !important;
}
.shopify-section--rich-text-and-image .feature-divider {
width: 44px;
height: 1px;
background: #B8973A !important;
border: 0 !important;
margin: 0 auto 32px !important;
opacity: 0.85;
}
.shopify-section--rich-text-and-image .rich-text__text {
font-family: 'EB Garamond', Georgia, serif;
color: #3a3226;
}
.shopify-section--rich-text-and-image .rich-text__text p,
.shopify-section--rich-text-and-image .rich-text__text li {
font-size: 17px;
line-height: 1.75;
color: #3a3226;
margin: 0 0 18px;
}
.shopify-section--rich-text-and-image .rich-text__text p:last-child { margin-bottom: 0; }
.shopify-section--rich-text-and-image .rich-text__text strong { color: #1A1A2E; font-weight: 600; }
.shopify-section--rich-text-and-image .rich-text__text em { font-family: 'EB Garamond', Georgia, serif; font-style: italic; }
.shopify-section--rich-text-and-image .rich-text__text a:not(.global-button) {
color: #8a6f26;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.25s ease;
}
.shopify-section--rich-text-and-image .rich-text__text a:not(.global-button):hover { color: #B8973A; }
.shopify-section--rich-text-and-image .rich-text__text ul { list-style: none; padding-left: 0; margin: 12px 0 22px; }
.shopify-section--rich-text-and-image .rich-text__text ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.shopify-section--rich-text-and-image .rich-text__text ul li::before {
content: ''; position: absolute; left: 0; top: 0.75em;
width: 8px; height: 1px; background: #B8973A;
}
/* Featured-text button: refined luxury treatment */
.shopify-section--rich-text-and-image .rich-text__text .global-button {
display: inline-block !important;
margin-top: 28px !important;
padding: 14px 32px !important;
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: #1A1A2E !important;
background: transparent !important;
border: 1px solid #1A1A2E !important;
width: auto !important;
max-width: max-content !important;
transition: background 0.3s ease, color 0.3s ease, letter-spacing 0.3s ease !important;
text-decoration: none !important;
}
.shopify-section--rich-text-and-image .rich-text__text .global-button:hover {
background: #1A1A2E !important;
color: #F9F7F4 !important;
letter-spacing: 0.26em !important;
}
/* Center the button when parent is center-aligned */
.shopify-section--rich-text-and-image .rich-text__content.center .global-button,
.shopify-section--rich-text-and-image .rich-text__content.align_center .global-button,
.shopify-section--rich-text-and-image .rich-text__text.align_center .global-button {
margin-left: auto !important;
margin-right: auto !important;
}
/* Ornament at section bottom: slightly refined */
.shopify-section--rich-text-and-image .hgbj-ornament {
margin-top: 40px;
opacity: 0.7;
}
/* Mobile: tighter padding */
@media (max-width: 640px) {
.shopify-section--rich-text-and-image section.section {
padding-top: clamp(36px, 9vw, 56px);
padding-bottom: clamp(36px, 9vw, 56px);
}
.shopify-section--rich-text-and-image h2.rich-text__heading {
font-size: clamp(24px, 6vw, 30px) !important;
}
.shopify-section--rich-text-and-image .rich-text__text p,
.shopify-section--rich-text-and-image .rich-text__text li { font-size: 16px; }
}
/* H3-H6 inside featured-text body content: when merchant wrote prose-length
text in a heading tag, render as readable typography instead of uppercase
tiny eyebrow. Short H3 still works as a subhead; long H6 reads as prose. */
.shopify-section--rich-text-and-image .rich-text__text h1,
.shopify-section--rich-text-and-image .rich-text__text h2,
.shopify-section--rich-text-and-image .rich-text__text h3,
.shopify-section--rich-text-and-image .rich-text__text h4,
.shopify-section--rich-text-and-image .rich-text__text h5,
.shopify-section--rich-text-and-image .rich-text__text h6 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
color: #1A1A2E !important;
letter-spacing: 0.015em !important;
text-transform: none !important;
line-height: 1.25 !important;
margin: clamp(24px, 2.5vw, 36px) 0 16px !important;
}
.shopify-section--rich-text-and-image .rich-text__text h2 { font-size: clamp(24px, 2.6vw, 32px) !important; }
.shopify-section--rich-text-and-image .rich-text__text h3 { font-size: clamp(20px, 2.2vw, 26px) !important; }
.shopify-section--rich-text-and-image .rich-text__text h4 { font-size: clamp(18px, 1.9vw, 22px) !important; font-weight: 400 !important; }
.shopify-section--rich-text-and-image .rich-text__text h5,
.shopify-section--rich-text-and-image .rich-text__text h6 {
font-size: 17px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
font-style: italic;
color: #3a3226 !important;
}
/* ── divider: refined luxury hairline ──────────────── */
.shopify-section--divider section.section {
padding: clamp(16px, 2vw, 24px) 0 !important;
}
.shopify-section--divider .feature-divider,
.shopify-section--divider hr {
width: 44px;
max-width: 44px !important;
height: 1px;
background: rgba(184, 151, 58, 0.6) !important;
border: 0 !important;
margin: 0 auto !important;
opacity: 0.9;
}
/* ── image-with-text-overlay: hero polish ──────────── */
.shopify-section--image-with-text-overlay .banner__title,
.shopify-section--image-with-text-overlay h1,
.shopify-section--image-with-text-overlay h2 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
letter-spacing: 0.02em !important;
line-height: 1.08 !important;
}
.shopify-section--image-with-text-overlay .banner__subtitle {
font-family: 'EB Garamond', Georgia, serif !important;
letter-spacing: 0.04em !important;
line-height: 1.6 !important;
}
/* ── image-text (split image + text) ──────────────── */
.shopify-section--image-text section.section {
padding-top: clamp(48px, 5vw, 80px);
padding-bottom: clamp(48px, 5vw, 80px);
}
.shopify-section--image-text h2,
.shopify-section--image-text .feature-section__title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(26px, 3vw, 36px) !important;
line-height: 1.15 !important;
letter-spacing: 0.015em !important;
color: #1A1A2E !important;
margin-bottom: 18px !important;
}
.shopify-section--image-text p {
font-family: 'EB Garamond', Georgia, serif;
font-size: 16px;
line-height: 1.75;
color: #3a3226;
}
/* ── consultation-cta: tighter, more elegant ─────── */
.shopify-section--consultation-cta section.section {
padding-top: clamp(64px, 7vw, 112px);
padding-bottom: clamp(64px, 7vw, 112px);
}
.shopify-section--consultation-cta h2,
.shopify-section--consultation-cta .title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(28px, 3.6vw, 40px) !important;
letter-spacing: 0.02em !important;
line-height: 1.1 !important;
color: #1A1A2E !important;
}
.shopify-section--consultation-cta p {
font-family: 'EB Garamond', Georgia, serif;
font-size: 16px;
line-height: 1.7;
color: #5C5046;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
/* ── featured-collection on pages: slightly tighter ─ */
.template-page .shopify-section--featured-collection section.section,
body[class*="template-page"] .shopify-section--featured-collection section.section {
padding-top: clamp(48px, 5vw, 80px);
padding-bottom: clamp(48px, 5vw, 80px);
}
/* ── gallery on pages: tighter rhythm ──────────────── */
.shopify-section--gallery section.section {
padding-top: clamp(48px, 5vw, 72px);
padding-bottom: clamp(48px, 5vw, 72px);
}
.shopify-section--gallery h2,
.shopify-section--gallery .gallery__title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
letter-spacing: 0.02em !important;
color: #1A1A2E !important;
text-align: center;
}
/* ── text-columns-with-images: elegant split ─────── */
.shopify-section--text-columns-with-images section.section {
padding-top: clamp(48px, 5vw, 80px);
padding-bottom: clamp(48px, 5vw, 80px);
}
.shopify-section--text-columns-with-images h2,
.shopify-section--text-columns-with-images h3 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
letter-spacing: 0.015em !important;
color: #1A1A2E !important;
}
/* ── Page-level: reduce gaps between adjacent sections ── */
body[class*="template-page"] .section-wrapper > .shopify-section + .shopify-section {
/* no extra margin; each section controls its own padding */
}
/* ── newsletter on pages: slight visual lift ───── */
body[class*="template-page"] .shopify-section--newsletter {
background: #F9F7F4;
}
body[class*="template-page"] .shopify-section--newsletter section.section {
padding-top: clamp(56px, 6vw, 88px);
padding-bottom: clamp(56px, 6vw, 88px);
}
body[class*="template-page"] .shopify-section--newsletter h2,
body[class*="template-page"] .shopify-section--newsletter .title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(26px, 3vw, 36px) !important;
letter-spacing: 0.02em !important;
color: #1A1A2E !important;
}
/* ═══════════════════════════════════════════════════ */
/* tighten page vertical rhythm + */
/* hide empty featured-collections */
/* ────────────────────────────────────────────────── */
/* Pages with missing product collections were */
/* rendering empty featured-collection sections as */
/* ~170px tall blank gaps. Also: hgbj-ornament and */
/* section padding was still too generous, creating */
/* excessive whitespace between content blocks. */
/* ═══════════════════════════════════════════════════ */
/* Hide featured-collection sections that have no loaded products.
The section wraps content in `.product-list` — if it's empty,
there are no products assigned. On template-page we collapse. */
body[class*="template-page"] .shopify-section--featured-collection:has(.product-list:empty),
body[class*="template-page"] .shopify-section--featured-collection:has(.featured-collection__empty),
body[class*="template-page"] .shopify-section--featured-collection:not(:has(.product-wrap)):not(:has(.grid__item)):not(:has([data-product])) {
display: none !important;
}
/* Dramatically reduce hgbj-ornament visibility between featured-text sections
— it was appearing 3-4× per page, creating visual noise. Keep the first
within-section decoration, fade subsequent ones. */
body[class*="template-page"] .hgbj-ornament {
opacity: 0.35 !important;
margin-top: 28px !important;
}
body[class*="template-page"] .hgbj-ornament .hgbj-ornament__line { width: 32px; }
body[class*="template-page"] .hgbj-ornament .hgbj-ornament__diamond {
width: 4px; height: 4px;
}
/* Tighter consultation-cta spacing on pages */
body[class*="template-page"] .shopify-section--consultation-cta section.section {
padding-top: clamp(48px, 5vw, 80px);
padding-bottom: clamp(48px, 5vw, 80px);
}
/* Final-cta pre-footer on pages: trim vertical padding */
body[class*="template-page"] .shopify-section--final-cta-pre-footer section.section,
body[class*="template-page"] [class*="--final-cta"] section.section {
padding-top: clamp(48px, 5vw, 80px) !important;
padding-bottom: clamp(48px, 5vw, 80px) !important;
}
/* Reduce featured-text padding slightly on pages (even tighter
than fix 5 because we have many sections stacking) */
body[class*="template-page"] .shopify-section--rich-text-and-image section.section {
padding-top: clamp(40px, 5vw, 72px);
padding-bottom: clamp(40px, 5vw, 72px);
}
/* Adjacent sections with similar backgrounds: remove redundant padding
seam at boundary between two white featured-text sections */
body[class*="template-page"] .shopify-section--rich-text-and-image
+ .shopify-section--rich-text-and-image section.section {
padding-top: clamp(16px, 2vw, 32px);
}
/* Hide divider sections that have no visible content */
body[class*="template-page"] .shopify-section--divider:not(:has(.feature-divider)):not(:has(hr)) {
display: none !important;
}
/* Collapse divider directly next to the refined featured-text divider.
Avoid double-divider awkwardness. */
body[class*="template-page"] .shopify-section--divider + .shopify-section--divider {
display: none !important;
}
/* ── image-text split: tighter rhythm, matching feature-text ── */
body[class*="template-page"] .shopify-section--image-text section.section {
padding-top: clamp(40px, 5vw, 72px);
padding-bottom: clamp(40px, 5vw, 72px);
}
/* Hide any shopify-section whose ONLY child is an empty style tag.
Can happen with apps sections that have no content configured. */
body[class*="template-page"] .shopify-section:has(> script:only-child) {
display: none;
}
/* ── Gallery sections: lighter top/bottom padding ──── */
body[class*="template-page"] .shopify-section--gallery section.section {
padding-top: clamp(40px, 4vw, 64px);
padding-bottom: clamp(40px, 4vw, 64px);
}
/* Apps section (often empty on many pages): hide if empty */
body[class*="template-page"] .shopify-section--apps:has(:empty) {
display: none;
}
body[class*="template-page"] .shopify-section--apps section.section:empty {
display: none;
}
/* ═══════════════════════════════════════════════════ */
/* cover all page-template variants */
/* ────────────────────────────────────────────────── */
/* fix 4 only targeted .content.page (page-template). */
/* But page-narrow, page-banner, page-team, page-faq, */
/* page-no-title, page-multi-column, page-sidebar all */
/* output similar structures with .rte but different */
/* column wrappers. Broaden the selectors so all of */
/* them get the luxury typography treatment. */
/* ═══════════════════════════════════════════════════ */
/* Apply core typography polish to .rte inside ANY page section */
.shopify-section--page-narrow-template .rte,
.shopify-section--page-multi-column-template .rte,
.shopify-section--page-no-title-template .rte,
.shopify-section--page-banner-template .rte,
.shopify-section--page-faq-template .rte,
.shopify-section--page-sidebar-template .rte,
.shopify-section--page-team-template .rte {
max-width: 760px;
margin: 0 auto;
font-family: 'EB Garamond', Georgia, serif;
font-size: 17px;
line-height: 1.75;
color: #3a3226;
}
/* Headings inside .rte across all page templates */
.shopify-section--page-narrow-template .rte h1,
.shopify-section--page-narrow-template .rte h2,
.shopify-section--page-narrow-template .rte h3,
.shopify-section--page-multi-column-template .rte h1,
.shopify-section--page-multi-column-template .rte h2,
.shopify-section--page-multi-column-template .rte h3,
.shopify-section--page-no-title-template .rte h1,
.shopify-section--page-no-title-template .rte h2,
.shopify-section--page-no-title-template .rte h3,
.shopify-section--page-banner-template .rte h1,
.shopify-section--page-banner-template .rte h2,
.shopify-section--page-banner-template .rte h3,
.shopify-section--page-faq-template .rte h1,
.shopify-section--page-faq-template .rte h2,
.shopify-section--page-faq-template .rte h3,
.shopify-section--page-sidebar-template .rte h1,
.shopify-section--page-sidebar-template .rte h2,
.shopify-section--page-sidebar-template .rte h3 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
color: #1A1A2E !important;
letter-spacing: 0.015em !important;
text-transform: none !important;
line-height: 1.15 !important;
}
.shopify-section--page-narrow-template .rte h2,
.shopify-section--page-multi-column-template .rte h2,
.shopify-section--page-no-title-template .rte h2,
.shopify-section--page-banner-template .rte h2,
.shopify-section--page-faq-template .rte h2,
.shopify-section--page-sidebar-template .rte h2 {
font-size: clamp(26px, 2.8vw, 34px) !important;
margin-top: clamp(40px, 4vw, 56px) !important;
margin-bottom: 16px !important;
}
.shopify-section--page-narrow-template .rte h3,
.shopify-section--page-multi-column-template .rte h3,
.shopify-section--page-no-title-template .rte h3,
.shopify-section--page-banner-template .rte h3,
.shopify-section--page-faq-template .rte h3,
.shopify-section--page-sidebar-template .rte h3 {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: clamp(13px, 1.4vw, 15px) !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #B8973A !important;
margin-top: clamp(32px, 3vw, 44px) !important;
margin-bottom: 12px !important;
}
/* H1 page title for these templates */
.shopify-section--page-narrow-template > section > .container > div > h1,
.shopify-section--page-team-template .one-whole.column.page > h1,
.shopify-section--page-banner-template .one-whole.column.page > h1,
.shopify-section--page-multi-column-template .one-whole.column.page > h1,
.shopify-section--page-no-title-template .one-whole.column.page > h1,
.shopify-section--page-sidebar-template .one-whole.column.page > h1,
.shopify-section--page-faq-template .one-whole.column.page > h1 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(38px, 5.5vw, 64px) !important;
line-height: 1.05 !important;
letter-spacing: 0.015em !important;
color: #1A1A2E !important;
text-align: center !important;
margin: 0 0 22px !important;
text-transform: none !important;
}
/* Feature divider in these templates */
.shopify-section--page-narrow-template .feature-divider,
.shopify-section--page-team-template .feature-divider,
.shopify-section--page-banner-template .feature-divider,
.shopify-section--page-multi-column-template .feature-divider,
.shopify-section--page-no-title-template .feature-divider,
.shopify-section--page-sidebar-template .feature-divider,
.shopify-section--page-faq-template .feature-divider {
width: 44px !important;
max-width: 44px !important;
height: 1px !important;
background: #B8973A !important;
border: 0 !important;
margin: 0 auto clamp(40px, 5vw, 64px) !important;
opacity: 0.85;
}
/* Body copy and links inside .rte */
.shopify-section--page-narrow-template .rte p,
.shopify-section--page-multi-column-template .rte p,
.shopify-section--page-no-title-template .rte p,
.shopify-section--page-banner-template .rte p,
.shopify-section--page-sidebar-template .rte p,
.shopify-section--page-faq-template .rte p {
font-size: 17px;
line-height: 1.75;
color: #3a3226;
margin: 0 0 20px;
}
.shopify-section--page-narrow-template .rte a:not(.global-button),
.shopify-section--page-multi-column-template .rte a:not(.global-button),
.shopify-section--page-no-title-template .rte a:not(.global-button),
.shopify-section--page-banner-template .rte a:not(.global-button),
.shopify-section--page-sidebar-template .rte a:not(.global-button),
.shopify-section--page-faq-template .rte a:not(.global-button) {
color: #8a6f26;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.25s ease;
}
.shopify-section--page-narrow-template .rte a:not(.global-button):hover,
.shopify-section--page-multi-column-template .rte a:not(.global-button):hover,
.shopify-section--page-no-title-template .rte a:not(.global-button):hover,
.shopify-section--page-banner-template .rte a:not(.global-button):hover,
.shopify-section--page-sidebar-template .rte a:not(.global-button):hover,
.shopify-section--page-faq-template .rte a:not(.global-button):hover { color: #B8973A; }
/* Lists in .rte */
.shopify-section--page-narrow-template .rte ul,
.shopify-section--page-multi-column-template .rte ul,
.shopify-section--page-no-title-template .rte ul,
.shopify-section--page-banner-template .rte ul,
.shopify-section--page-sidebar-template .rte ul,
.shopify-section--page-faq-template .rte ul {
list-style: none; padding-left: 0; margin: 12px 0 22px;
}
.shopify-section--page-narrow-template .rte ul li,
.shopify-section--page-multi-column-template .rte ul li,
.shopify-section--page-no-title-template .rte ul li,
.shopify-section--page-banner-template .rte ul li,
.shopify-section--page-sidebar-template .rte ul li,
.shopify-section--page-faq-template .rte ul li {
position: relative; padding-left: 22px; margin-bottom: 10px;
font-size: 17px; line-height: 1.7; color: #3a3226;
}
.shopify-section--page-narrow-template .rte ul li::before,
.shopify-section--page-multi-column-template .rte ul li::before,
.shopify-section--page-no-title-template .rte ul li::before,
.shopify-section--page-banner-template .rte ul li::before,
.shopify-section--page-sidebar-template .rte ul li::before,
.shopify-section--page-faq-template .rte ul li::before {
content: ''; position: absolute; left: 0; top: 0.75em;
width: 10px; height: 1px; background: #B8973A;
}
/* Section padding for these templates */
.shopify-section--page-narrow-template > section.section,
.shopify-section--page-multi-column-template > section.section,
.shopify-section--page-no-title-template > section.section,
.shopify-section--page-banner-template > section.section,
.shopify-section--page-sidebar-template > section.section,
.shopify-section--page-team-template > section.section,
.shopify-section--page-faq-template > section.section {
padding-top: clamp(56px, 6vw, 96px);
padding-bottom: clamp(56px, 6vw, 96px);
}
/* page-team-template specific: team member cards */
.shopify-section--page-team-template .team-member__profile {
text-align: center;
margin-bottom: clamp(40px, 4vw, 64px);
}
.shopify-section--page-team-template .team-member__profile h3,
.shopify-section--page-team-template .team-member__profile h4 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 400 !important;
font-size: clamp(20px, 2vw, 24px) !important;
letter-spacing: 0.02em !important;
color: #1A1A2E !important;
margin: 18px 0 6px !important;
text-transform: none !important;
}
.shopify-section--page-team-template .team-member__profile p {
font-family: 'EB Garamond', Georgia, serif;
font-size: 14px;
color: #5C5046;
letter-spacing: 0.04em;
line-height: 1.6;
}
/* page-team-template: team-page text/image split */
.shopify-section--page-team-template .team-page__text h2 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(26px, 2.8vw, 34px) !important;
letter-spacing: 0.015em !important;
color: #1A1A2E !important;
margin-bottom: 18px !important;
}
.shopify-section--page-team-template .team-page__text {
font-family: 'EB Garamond', Georgia, serif;
font-size: 16px;
line-height: 1.7;
color: #3a3226;
}
/* page-team-template: gold hairline ornament */
.shopify-section--page-team-template hr.feature-divider {
width: 44px !important;
max-width: 44px !important;
height: 1px !important;
background: #B8973A !important;
border: 0 !important;
margin: clamp(40px, 4vw, 64px) auto !important;
opacity: 0.85;
}
/* page-sidebar-template: sidebar styling */
.shopify-section--page-sidebar-template .sidebar h2,
.shopify-section--page-sidebar-template .sidebar h3 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 400 !important;
font-size: 18px !important;
letter-spacing: 0.02em !important;
color: #1A1A2E !important;
}
.shopify-section--page-sidebar-template .sidebar a {
color: #5C5046;
font-family: 'EB Garamond', Georgia, serif;
text-decoration: none;
}
.shopify-section--page-sidebar-template .sidebar a:hover { color: #B8973A; }
/* page-faq-template: collapsibles styled per FAQ schema */
.shopify-section--page-faq-template details {
border-bottom: 1px solid rgba(184, 151, 58, 0.25);
padding: 18px 0;
}
.shopify-section--page-faq-template summary {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 20px;
font-weight: 400;
color: #1A1A2E;
letter-spacing: 0.01em;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.shopify-section--page-faq-template summary::-webkit-details-marker { display: none; }
.shopify-section--page-faq-template summary::after {
content: '+';
color: #B8973A;
font-size: 22px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.shopify-section--page-faq-template details[open] summary::after { content: '-'; }
.shopify-section--page-faq-template details[open] p,
.shopify-section--page-faq-template details[open] div {
margin-top: 14px;
}
/* Hide the lone "Coming Soon" placeholder banner if image-with-text-overlay
has no image set (gracefully degrade to no banner instead of empty space) */
.shopify-section--image-with-text-overlay
.feature_image:not([style*="background-image"]):not(:has(img))
.feature_image__container--placeholder {
min-height: 0 !important;
height: auto !important;
}
/* page banner template: ensure title overlays look luxury */
.shopify-section--page-banner-template .banner__title,
.shopify-section--page-banner-template h1 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
letter-spacing: 0.02em !important;
line-height: 1.08 !important;
text-transform: none !important;
}
/* Mobile adjustments for all page templates */
@media (max-width: 640px) {
.shopify-section--page-narrow-template > section.section,
.shopify-section--page-multi-column-template > section.section,
.shopify-section--page-no-title-template > section.section,
.shopify-section--page-banner-template > section.section,
.shopify-section--page-sidebar-template > section.section,
.shopify-section--page-team-template > section.section,
.shopify-section--page-faq-template > section.section {
padding-top: clamp(40px, 9vw, 56px);
padding-bottom: clamp(40px, 9vw, 56px);
}
.shopify-section--page-narrow-template > section > .container > div > h1,
.shopify-section--page-team-template .one-whole.column.page > h1,
.shopify-section--page-banner-template .one-whole.column.page > h1,
.shopify-section--page-multi-column-template .one-whole.column.page > h1,
.shopify-section--page-no-title-template .one-whole.column.page > h1,
.shopify-section--page-sidebar-template .one-whole.column.page > h1,
.shopify-section--page-faq-template .one-whole.column.page > h1 {
font-size: clamp(28px, 8vw, 36px) !important;
}
.shopify-section--page-narrow-template .rte p,
.shopify-section--page-multi-column-template .rte p,
.shopify-section--page-no-title-template .rte p,
.shopify-section--page-banner-template .rte p,
.shopify-section--page-sidebar-template .rte p,
.shopify-section--page-faq-template .rte p { font-size: 16px; }
}
/* ═══════════════════════════════════════════════════ */
/* forms + buttons + globals */
/* ────────────────────────────────────────────────── */
/* Newsletter form appears on most pages (Letters from */
/* the Workshop), contact form on contact pages. */
/* Polish their inputs + submit buttons for consistency */
/* with the luxury aesthetic. */
/* ═══════════════════════════════════════════════════ */
/* Newsletter form: refined input + button */
.shopify-section--newsletter input[type="email"],
.shopify-section--newsletter input[type="text"],
.shopify-section--rich-text-and-image input[type="email"],
.shopify-section--rich-text-and-image input[type="text"] {
font-family: 'EB Garamond', Georgia, serif;
font-size: 15px;
padding: 14px 18px;
background: transparent;
border: 1px solid rgba(184, 151, 58, 0.4);
border-radius: 0;
color: #1A1A2E;
letter-spacing: 0.02em;
transition: border-color 0.25s ease;
width: 100%;
max-width: 360px;
}
.shopify-section--newsletter input[type="email"]:focus,
.shopify-section--newsletter input[type="text"]:focus {
outline: none;
border-color: #B8973A;
}
.shopify-section--newsletter input::placeholder { color: rgba(154, 140, 126, 0.7); }
/* Newsletter submit button */
.shopify-section--newsletter button[type="submit"],
.shopify-section--newsletter input[type="submit"] {
font-family: 'EB Garamond', Georgia, serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 14px 32px;
background: #B8973A;
color: #1A1A2E;
border: none;
border-radius: 0;
cursor: pointer;
transition: background 0.25s ease, letter-spacing 0.25s ease;
}
.shopify-section--newsletter button[type="submit"]:hover,
.shopify-section--newsletter input[type="submit"]:hover {
background: #a48330;
letter-spacing: 0.26em;
}
/* Contact form: matching elegant treatment */
.shopify-section--contact-template input[type="text"],
.shopify-section--contact-template input[type="email"],
.shopify-section--contact-template input[type="tel"],
.shopify-section--contact-template textarea,
.shopify-section--contact-custom-template input[type="text"],
.shopify-section--contact-custom-template input[type="email"],
.shopify-section--contact-custom-template input[type="tel"],
.shopify-section--contact-custom-template textarea {
font-family: 'EB Garamond', Georgia, serif;
font-size: 16px;
padding: 14px 18px;
background: #FFFFFF;
border: 1px solid rgba(184, 151, 58, 0.4);
border-radius: 0;
color: #1A1A2E;
letter-spacing: 0.02em;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
width: 100%;
margin-bottom: 16px;
}
.shopify-section--contact-template input:focus,
.shopify-section--contact-template textarea:focus,
.shopify-section--contact-custom-template input:focus,
.shopify-section--contact-custom-template textarea:focus {
outline: none;
border-color: #B8973A;
box-shadow: 0 0 0 3px rgba(184, 151, 58, 0.08);
}
.shopify-section--contact-template label,
.shopify-section--contact-custom-template label {
font-family: 'EB Garamond', Georgia, serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #5C5046;
display: block;
margin-bottom: 8px;
}
.shopify-section--contact-template button[type="submit"],
.shopify-section--contact-template input[type="submit"],
.shopify-section--contact-custom-template button[type="submit"],
.shopify-section--contact-custom-template input[type="submit"] {
font-family: 'EB Garamond', Georgia, serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 16px 38px;
background: #1A1A2E;
color: #F9F7F4;
border: 1px solid #1A1A2E;
border-radius: 0;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease, letter-spacing 0.3s ease;
}
.shopify-section--contact-template button[type="submit"]:hover,
.shopify-section--contact-template input[type="submit"]:hover,
.shopify-section--contact-custom-template button[type="submit"]:hover,
.shopify-section--contact-custom-template input[type="submit"]:hover {
background: #B8973A;
color: #1A1A2E;
border-color: #B8973A;
letter-spacing: 0.26em;
}
/* Page-template global-button polish (used by featured-text + others) */
body[class*="template-page"] .global-button:not(.global-button--primary):not(.shopify-payment-button__button) {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
padding: 14px 32px !important;
border: 1px solid #1A1A2E !important;
background: transparent !important;
color: #1A1A2E !important;
text-decoration: none !important;
display: inline-block !important;
transition: background 0.3s ease, color 0.3s ease, letter-spacing 0.3s ease !important;
}
body[class*="template-page"] .global-button:not(.global-button--primary):not(.shopify-payment-button__button):hover {
background: #1A1A2E !important;
color: #F9F7F4 !important;
letter-spacing: 0.26em !important;
}
/* Primary CTA button (gold) on page templates */
body[class*="template-page"] .global-button.global-button--primary,
body[class*="template-page"] a[class*="primary"][class*="global-button"] {
background: #B8973A !important;
color: #1A1A2E !important;
border: 1px solid #B8973A !important;
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
padding: 14px 34px !important;
text-decoration: none !important;
display: inline-block !important;
transition: background 0.3s ease, letter-spacing 0.3s ease !important;
}
body[class*="template-page"] .global-button.global-button--primary:hover,
body[class*="template-page"] a[class*="primary"][class*="global-button"]:hover {
background: #a48330 !important;
letter-spacing: 0.26em !important;
}
/* Cookie banner: less intrusive (subtle ivory bg, smaller text) */
.shopify-section--cookie-consent,
[class*="cookie"] [class*="banner"],
.cookie-banner {
font-family: 'EB Garamond', Georgia, serif;
font-size: 13px;
letter-spacing: 0.02em;
}
/* Empty image-with-text-overlay: hide if no image present (avoids
prominent "Coming Soon" placeholder on pages where merchant has
not yet added a banner image) */
.shopify-section--image-with-text-overlay
.feature_image:not([style*="background-image"])
.placeholder-svg {
opacity: 0.3;
}
/* Map/contact section padding consistency */
.shopify-section--map section.section,
.shopify-section--contact-template section.section {
padding-top: clamp(40px, 5vw, 72px);
padding-bottom: clamp(40px, 5vw, 72px);
}
/* Apps section (theme app blocks) — subtle wrapper */
.shopify-section--apps {
padding: 0;
}
.shopify-section--apps section.section {
padding-top: clamp(32px, 4vw, 56px);
padding-bottom: clamp(32px, 4vw, 56px);
}
/* Logo bar section (used on Pre-owned watches etc.) */
.shopify-section--logo-bar section.section {
padding-top: clamp(40px, 4vw, 64px);
padding-bottom: clamp(40px, 4vw, 64px);
background: #F9F7F4;
}
.shopify-section--logo-bar h2,
.shopify-section--logo-bar h3 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
letter-spacing: 0.02em !important;
text-align: center;
color: #1A1A2E !important;
margin-bottom: clamp(28px, 3vw, 40px) !important;
}
.shopify-section--logo-bar img {
filter: grayscale(0.6);
opacity: 0.85;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.shopify-section--logo-bar img:hover {
filter: grayscale(0);
opacity: 1;
}
/* ═══════════════════════════════════════════════════ */
/* product page luxury polish */
/* ────────────────────────────────────────────────── */
/* Scoped tightly to body.product + shopify-section-- */
/* product-template. EXPLICITLY excludes any Nivoda */
/* widget surface (id or class containing "nivoda") */
/* via :not() guards to preserve the diamond-search */
/* integration intact. */
/* ═══════════════════════════════════════════════════ */
/* Product title: reduce ALL-CAPS aggression, keep elegance.
Theme uses class "product_name" on h1 with uppercase + letter-spacing. */
body.product .shopify-section--product-template h1.product_name,
body.product .shopify-section--product-template h1.product-title,
body.product .shopify-section--product-template .product-title,
body.product .shopify-section--product-template h1.title,
body.product .product-meta h1,
body.product .product__details h1.product_name,
body.product .product-block--title h1 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(24px, 2.6vw, 32px) !important;
line-height: 1.2 !important;
letter-spacing: 0.015em !important;
text-transform: none !important;
color: #1A1A2E !important;
margin-bottom: 18px !important;
}
/* Price block */
body.product .shopify-section--product-template .price,
body.product .shopify-section--product-template .product-price,
body.product .shopify-section--product-template [class*="price__"]:not([class*="nivoda"]) {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 28px);
color: #1A1A2E;
letter-spacing: 0.01em;
}
/* "Sold Out" label: refined eyebrow */
body.product .shopify-section--product-template .sold-out,
body.product .shopify-section--product-template .availability,
body.product .shopify-section--product-template [class*="availability"]:not([class*="nivoda"]) {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: #9A8C7E !important;
margin-bottom: 16px !important;
}
/* SOLD badge: refined navy-on-gold or minimal gold outline */
body.product .shopify-section--product-template .sold-badge,
body.product .shopify-section--product-template .badge--sold-out,
body.product .shopify-section--product-template .product__badge--sold {
background: transparent !important;
color: #1A1A2E !important;
border: 1px solid #B8973A !important;
border-radius: 50%;
width: 72px !important;
height: 72px !important;
display: flex;
align-items: center;
justify-content: center;
font-family: 'EB Garamond', Georgia, serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
}
/* Product spec/detail bullet list: gold hairlines instead of disks.
Theme renders product description inside .product-block--description > .description > .rte */
body.product .product-block--description .rte ul,
body.product .product__details .description .rte ul,
body.product .product-single__description ul:not([class*="nivoda"]),
body.product .product__description ul:not([class*="nivoda"]) {
list-style: none !important;
padding-left: 0 !important;
margin: 14px 0 24px !important;
}
body.product .product-block--description .rte ul > li,
body.product .product__details .description .rte ul > li,
body.product .product-single__description ul:not([class*="nivoda"]) > li,
body.product .product__description ul:not([class*="nivoda"]) > li {
position: relative !important;
padding-left: 24px !important;
margin-bottom: 10px !important;
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 15px !important;
line-height: 1.6 !important;
color: #3a3226 !important;
list-style: none !important;
}
body.product .product-block--description .rte ul > li::before,
body.product .product__details .description .rte ul > li::before,
body.product .product-single__description ul:not([class*="nivoda"]) > li::before,
body.product .product__description ul:not([class*="nivoda"]) > li::before {
content: '' !important;
position: absolute !important;
left: 0 !important;
top: 0.75em !important;
width: 12px !important;
height: 1px !important;
background: #B8973A !important;
opacity: 0.75 !important;
}
/* First-segment of spec (e.g. "Carat:") renders as label */
body.product .product-block--description strong,
body.product .product__details .description strong,
body.product .product-single__description strong,
body.product .product__description strong {
color: #1A1A2E;
font-weight: 600;
}
/* Variant/option labels + select refinement */
body.product .shopify-section--product-template .selector-wrapper label,
body.product .shopify-section--product-template .variant-option-label,
body.product .shopify-section--product-template .product-form__label {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #5C5046 !important;
margin-bottom: 10px !important;
}
body.product .shopify-section--product-template select:not([class*="nivoda"]),
body.product .shopify-section--product-template .variant-selector:not([class*="nivoda"]) {
font-family: 'EB Garamond', Georgia, serif;
/* 16px minimum prevents iOS Safari auto-zoom on focus. Do not reduce. */
font-size: 16px;
padding: 13px 16px;
border: 1px solid rgba(184, 151, 58, 0.4);
border-radius: 0;
background: #FFFFFF;
color: #1A1A2E;
letter-spacing: 0.02em;
}
body.product .shopify-section--product-template select:focus:not([class*="nivoda"]) {
outline: none;
border-color: #B8973A;
}
/* Add-to-cart button refinement (non-Nivoda) */
body.product .shopify-section--product-template .product-form__cart-submit:not([class*="nivoda"]),
body.product .shopify-section--product-template [type="submit"].btn:not([class*="nivoda"]),
body.product .shopify-section--product-template .add-to-cart:not([class*="nivoda"]) {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
padding: 16px 36px !important;
background: #1A1A2E !important;
color: #F9F7F4 !important;
border: 1px solid #1A1A2E !important;
border-radius: 0 !important;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease, letter-spacing 0.3s ease !important;
}
body.product .shopify-section--product-template .product-form__cart-submit:hover:not([class*="nivoda"]):not([disabled]),
body.product .shopify-section--product-template [type="submit"].btn:hover:not([class*="nivoda"]):not([disabled]),
body.product .shopify-section--product-template .add-to-cart:hover:not([class*="nivoda"]):not([disabled]) {
background: #B8973A !important;
color: #1A1A2E !important;
border-color: #B8973A !important;
letter-spacing: 0.26em !important;
}
/* Product description headings (body copy with H2-H4 from merchant) */
body.product .product-single__description h2:not([class*="nivoda"]),
body.product .product__description h2:not([class*="nivoda"]),
body.product .product-single__description h3:not([class*="nivoda"]),
body.product .product__description h3:not([class*="nivoda"]),
body.product .product-single__description h4:not([class*="nivoda"]),
body.product .product__description h4:not([class*="nivoda"]) {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
color: #1A1A2E !important;
letter-spacing: 0.015em !important;
margin-top: clamp(28px, 3vw, 40px) !important;
margin-bottom: 14px !important;
}
body.product .product-single__description h2:not([class*="nivoda"]),
body.product .product__description h2:not([class*="nivoda"]) { font-size: clamp(22px, 2.4vw, 28px) !important; }
body.product .product-single__description h3:not([class*="nivoda"]),
body.product .product__description h3:not([class*="nivoda"]) { font-size: clamp(18px, 2vw, 22px) !important; }
body.product .product-single__description p:not([class*="nivoda"]),
body.product .product__description p:not([class*="nivoda"]) {
font-family: 'EB Garamond', Georgia, serif;
font-size: 15px;
line-height: 1.7;
color: #3a3226;
margin: 0 0 16px;
}
/* Certificate-style links (Certificate PDF: View) */
body.product .product-single__description a:not([class*="nivoda"]):not(.global-button):not(.btn),
body.product .product__description a:not([class*="nivoda"]):not(.global-button):not(.btn) {
color: #8a6f26;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.25s ease;
}
body.product .product-single__description a:not([class*="nivoda"]):not(.global-button):not(.btn):hover,
body.product .product__description a:not([class*="nivoda"]):not(.global-button):not(.btn):hover { color: #B8973A; }
/* Related products section ("YOU MAY ALSO LIKE") */
body.product .shopify-section--product-recommendations section.section,
body.product [class*="related-products"] section.section,
body.product .product-recommendations section.section {
padding-top: clamp(56px, 6vw, 88px);
padding-bottom: clamp(56px, 6vw, 88px);
}
body.product .shopify-section--product-recommendations h2,
body.product [class*="related-products"] h2,
body.product .product-recommendations h2 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(26px, 3vw, 36px) !important;
letter-spacing: 0.02em !important;
color: #1A1A2E !important;
text-transform: none !important;
}
/* Product card titles in related grid */
body.product [class*="product-recommendations"] .title:not([class*="nivoda"]),
body.product .related-products .title:not([class*="nivoda"]) {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: 15px !important;
letter-spacing: 0.04em !important;
text-transform: none !important;
color: #1A1A2E !important;
line-height: 1.4 !important;
}
body.product [class*="product-recommendations"] .price,
body.product .related-products .price {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 16px;
color: #1A1A2E;
}
/* NIVODA SAFETY: explicitly skip any descendant of Nivoda containers */
body.product #nivoda-page-width,
body.product #nivoda-page-width * {
all: revert-layer;
}
body.product [id*="nivoda"],
body.product [class*="nivoda"] {
/* Do not inherit any of the above rules */
}
/* Mobile tightening */
@media (max-width: 640px) {
body.product .shopify-section--product-template h1.product-title,
body.product .shopify-section--product-template .product-title {
font-size: clamp(22px, 6vw, 28px) !important;
}
body.product .shopify-section--product-template .sold-badge {
width: 56px !important;
height: 56px !important;
font-size: 9px !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* search + blog + article + 404 */
/* ────────────────────────────────────────────────── */
/* Complete the template coverage. Search results need */
/* non-uppercase titles, blog listing needs heading */
/* polish, article body needs luxury reading typography */
/* matching the page-template polish in fix 4. */
/* ═══════════════════════════════════════════════════ */
/* ── SEARCH RESULTS PAGE ─────────────────────────────── */
/* Shopify body class on search pages is "search" not "template-search" */
body.search .breadcrumb-collection {
padding: clamp(16px, 2vw, 24px) 0;
}
body.search h1.collection_title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(32px, 4vw, 48px) !important;
line-height: 1.1 !important;
letter-spacing: 0.015em !important;
color: #1A1A2E !important;
text-transform: none !important;
margin: 0 0 12px !important;
}
/* Search result list items: the theme uses h5.sub_title > a for titles */
body.search .product-list--search h5.sub_title,
body.search .product-list--search h5.sub_title a {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(19px, 1.9vw, 24px) !important;
letter-spacing: 0.015em !important;
text-transform: none !important;
color: #1A1A2E !important;
line-height: 1.25 !important;
text-decoration: none !important;
margin: 0 0 10px !important;
}
body.search .product-list--search h5.sub_title a:hover {
color: #B8973A !important;
}
body.search .product-list--search .price,
body.search .product-list--search [class*="price"] {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 18px !important;
color: #1A1A2E !important;
font-weight: 400 !important;
letter-spacing: 0.01em !important;
}
/* Description blob (long concatenated spec text): truncate to 3 lines + refined */
body.search .product-list--search .description,
body.search .product-list--search [class*="excerpt"],
body.search .product-list--search p {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: #5C5046 !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
margin-top: 6px !important;
}
/* Search breadcrumb styling */
body.search .breadcrumb_text {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 11px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: #9A8C7E !important;
}
body.search .breadcrumb_text a { color: #8a6f26 !important; }
body.search .breadcrumb_text a:hover { color: #1A1A2E !important; }
/* Search row rhythm */
body.search .product-list--search .product_row {
padding-top: clamp(20px, 2.5vw, 32px) !important;
padding-bottom: clamp(20px, 2.5vw, 32px) !important;
border-bottom: 1px solid rgba(184, 151, 58, 0.2) !important;
}
body.search .product-list--search .product_row:last-child {
border-bottom: 0 !important;
}
/* ── BLOG LISTING PAGE ───────────────────────────────── */
body.blog h1.collection_title,
body.blog .shopify-section--blog-template h1 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(38px, 5vw, 56px) !important;
line-height: 1.05 !important;
letter-spacing: 0.015em !important;
color: #1A1A2E !important;
text-transform: none !important;
text-align: center !important;
margin: 0 0 14px !important;
padding-top: clamp(40px, 5vw, 72px);
}
/* Centre divider under blog H1 */
body.blog .breadcrumb-collection {
text-align: center;
padding-bottom: clamp(40px, 4vw, 64px);
}
body.blog .breadcrumb-collection::after {
content: '';
display: block;
width: 44px;
height: 1px;
background: #B8973A;
opacity: 0.85;
margin: 16px auto 0;
}
/* Article cards in the journal grid */
body.blog .hgbj-journal__card-title,
body.blog .article-card__title,
body.blog [class*="journal"] [class*="title"] {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(20px, 2vw, 26px) !important;
letter-spacing: 0.015em !important;
color: #1A1A2E !important;
line-height: 1.25 !important;
}
body.blog .hgbj-journal__card-excerpt,
body.blog .article-card__excerpt {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 15px !important;
line-height: 1.65 !important;
color: #5C5046 !important;
}
body.blog [class*="continue-reading"],
body.blog [class*="read-more"] {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.24em !important;
text-transform: uppercase !important;
color: #B8973A !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(184, 151, 58, 0.4) !important;
padding-bottom: 6px !important;
display: inline-block;
transition: color 0.25s ease, border-color 0.25s ease;
}
body.blog [class*="continue-reading"]:hover,
body.blog [class*="read-more"]:hover {
color: #1A1A2E !important;
border-color: #1A1A2E !important;
}
/* ── ARTICLE PAGE (individual blog post) ─────────────── */
body.article .blog-article__main h1,
body.article .shopify-section--article-template h1 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(32px, 4.5vw, 56px) !important;
line-height: 1.08 !important;
letter-spacing: 0.015em !important;
color: #1A1A2E !important;
text-transform: none !important;
text-align: center !important;
margin: 0 0 18px !important;
}
body.article .blog-article__main h1 + .feature-divider,
body.article .shopify-section--article-template .feature-divider {
width: 44px !important;
max-width: 44px !important;
height: 1px !important;
background: #B8973A !important;
border: 0 !important;
margin: 0 auto clamp(32px, 4vw, 48px) !important;
opacity: 0.85;
}
body.article .blog-article__main .rte,
body.article .shopify-section--article-template .rte,
body.article .article__content {
max-width: 760px;
margin: 0 auto;
font-family: 'EB Garamond', Georgia, serif;
font-size: 17px;
line-height: 1.75;
color: #3a3226;
}
body.article .rte h2,
body.article .article__content h2 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(26px, 2.8vw, 34px) !important;
color: #1A1A2E !important;
letter-spacing: 0.015em !important;
line-height: 1.15 !important;
margin-top: clamp(40px, 4vw, 56px) !important;
margin-bottom: 16px !important;
text-transform: none !important;
}
body.article .rte h3,
body.article .article__content h3 {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: clamp(13px, 1.4vw, 15px) !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #B8973A !important;
margin-top: clamp(32px, 3vw, 44px) !important;
margin-bottom: 12px !important;
}
body.article .rte p,
body.article .article__content p {
font-size: 17px;
line-height: 1.75;
color: #3a3226;
margin: 0 0 20px;
}
body.article .rte p strong,
body.article .article__content p strong { color: #1A1A2E; font-weight: 600; }
body.article .rte p em,
body.article .article__content p em { font-style: italic; }
body.article .rte a:not(.global-button),
body.article .article__content a:not(.global-button) {
color: #8a6f26;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color 0.25s ease;
}
body.article .rte a:not(.global-button):hover,
body.article .article__content a:not(.global-button):hover { color: #B8973A; }
body.article .rte > ul,
body.article .article__content > ul {
list-style: none;
padding-left: 0;
margin: 12px 0 24px;
}
body.article .rte > ul > li,
body.article .article__content > ul > li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
}
body.article .rte > ul > li::before,
body.article .article__content > ul > li::before {
content: '';
position: absolute;
left: 0;
top: 0.75em;
width: 10px;
height: 1px;
background: #B8973A;
opacity: 0.75;
}
body.article .rte > blockquote,
body.article .article__content > blockquote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 300;
line-height: 1.4;
color: #1A1A2E;
max-width: 620px;
margin: clamp(40px, 4vw, 56px) auto;
padding: 0 24px;
text-align: center;
border: 0;
position: relative;
}
body.article .rte > blockquote::before,
body.article .article__content > blockquote::before,
body.article .rte > blockquote::after,
body.article .article__content > blockquote::after {
content: '';
display: block;
width: 36px;
height: 1px;
background: #B8973A;
margin: 0 auto 20px;
}
body.article .rte > blockquote::after,
body.article .article__content > blockquote::after { margin: 20px auto 0; }
body.article .rte > hr,
body.article .article__content > hr {
border: 0;
height: 1px;
background: rgba(184, 151, 58, 0.3);
margin: clamp(48px, 5vw, 72px) auto;
max-width: 120px;
}
body.article .rte > img,
body.article .article__content > img {
display: block;
max-width: 100%;
height: auto;
margin: clamp(32px, 4vw, 48px) auto;
}
/* Article meta (author, date, read-time) */
body.article [class*="article-meta"],
body.article [class*="article-byline"] {
font-family: 'EB Garamond', Georgia, serif;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #9A8C7E;
text-align: center;
margin-bottom: 24px;
}
/* Article-pagination (prev/next) */
body.article .article-pagination a {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #8a6f26 !important;
text-decoration: none !important;
transition: color 0.25s ease !important;
}
body.article .article-pagination a:hover { color: #1A1A2E !important; }
body.article .icon-slash { color: rgba(184, 151, 58, 0.45); }
/* ── 404 PAGE ────────────────────────────────────────── */
/* Force every level of the 404 layout to center. Shopify's default
.container has asymmetric offset when certain column classes are
inside it (legacy grid). Belt-and-braces: centre the section, the
container, the 404 block, AND its internal children. */
body.error-404 section.section {
text-align: center !important;
}
body.error-404 section.section > .container,
body.error-404 section.section > .container.content {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(16px, 3vw, 32px) !important;
padding-right: clamp(16px, 3vw, 32px) !important;
float: none !important;
display: block !important;
text-align: center !important;
}
body.error-404 .hgbj-404 {
max-width: 640px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
float: none !important;
display: block !important;
}
body.error-404 .hgbj-404__actions {
display: flex !important;
justify-content: center !important;
gap: 16px !important;
flex-wrap: wrap !important;
}
body.error-404 .hgbj-404__collections {
margin: 40px auto 0 !important;
max-width: 400px !important;
text-align: center !important;
float: none !important;
}
body.error-404 .hgbj-404__collections-list {
text-align: left !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Search form container that follows .hgbj-404: ignore its grid
offset classes, centre it directly. */
body.error-404 section.section > .container > [class*="columns"]:last-child,
body.error-404 section.section > .container > .six-sixteenths,
body.error-404 section.section > .container > [class*="offset-by"] {
max-width: 380px !important;
width: 100% !important;
margin: 40px auto 0 !important;
float: none !important;
display: block !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center !important;
}
body.error-404 .hgbj-404__title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(26px, 3.5vw, 36px) !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #1A1A2E !important;
margin: 0 0 16px !important;
text-align: center !important;
}
body.error-404 .hgbj-404__text {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 15px !important;
color: #5C5046 !important;
border-top: 1px solid rgba(184, 151, 58, 0.2);
border-bottom: 1px solid rgba(184, 151, 58, 0.2);
padding: 18px 24px;
max-width: 480px;
margin: 0 auto !important;
font-style: italic;
text-align: center !important;
}
/* ═══════════════════════════════════════════════════ */
/* a11y polish — target-size + contrast */
/* ────────────────────────────────────────────────── */
/* Addresses Lighthouse WCAG failures: collection tile */
/* touch targets under 44px and low-contrast from-price */
/* prefix. CSS-only, zero functional risk. */
/* ═══════════════════════════════════════════════════ */
/* target-size: collection tile anchor links on /collections and product grids */
.list-collections .one-third a,
.list-collections .one-fourth a,
.list-collections .one-half a,
.list-collections [class*="column"] > a,
.list-collections .collection-info__caption,
.list-collections a.hidden-product-link {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* The collection tile anchor wrapping the image needs to remain visually
unchanged but be touch-target compliant — use inset padding hack */
.list-collections a.hidden-product-link {
min-height: 44px;
min-width: 44px;
}
/* Collection caption link (under each tile) */
.list-collections .collection-info__caption {
padding-top: 12px;
padding-bottom: 12px;
min-height: 44px;
}
/* Small nav items that might fail target-size on mobile */
.hgbj-tb-item,
.hgbj-tb-item--link {
min-height: 26px; /* trust bar stays thin; fine for desktop */
}
/* Color contrast · "from" price prefix (small + em elements) was too light */
small.from,
small.from em,
.from small,
.from em,
.price_from small,
.price_from em,
span[class*="price"] small.from em,
span[class*="price"] small em {
color: #5C5046 !important; /* dark enough for 4.5:1 contrast on white + ivory */
opacity: 1 !important;
font-style: italic;
font-size: 12px;
letter-spacing: 0.02em;
margin-right: 4px;
}
/* Related small/em text across price displays */
.price small,
[class*="price"] small,
.from-price,
.price--from {
color: #5C5046 !important;
font-weight: 400;
}
/* Reviewing-stars / meta / tag text that may use small or em elements */
.product_row small,
.product-list small,
[class*="product-card"] small {
color: #5C5046 !important;
}
/* Cart empty-state and similar small print */
.empty_cart,
.cart-subtotal small,
.cart-total small {
color: #5C5046 !important;
}
/* ═══════════════════════════════════════════════════ */
/* END v40.8 DESIGN CONSOLIDATED BLOCK */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* HEADER POLISH */
/* Four refinements on the teal header: */
/* 1. Book Appointment: solid gold command */
/* 2. Navy to teal transition: gold hairline + breath */
/* 3. Nav hover: underline reveal + letter-spacing */
/* 4. Journal link: serif bookmark mark */
/* ═══════════════════════════════════════════════════ */
/* 1. Book Appointment — solid gold, luxury command.
Beats v38.1 ivory-ghost via !important + source order.
Hover shine sweeps across the surface for a jewellery-grade flourish. */
header#header .hgbj-nav-cta,
.hgbj-nav-cta,
.main-nav__wrapper .hgbj-nav-cta {
background: #B8973A !important;
color: #1A1A2E !important;
border-color: #B8973A !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 2px 12px rgba(184, 151, 58, 0.20);
transition:
background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
letter-spacing 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hgbj-nav-cta::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -80%;
width: 60%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255, 255, 255, 0.38) 50%,
transparent 100%
);
transform: skewX(-18deg);
transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
header#header .hgbj-nav-cta:hover,
.hgbj-nav-cta:hover,
.hgbj-nav-cta:focus-visible {
background: #D4B862 !important;
color: #1A1A2E !important;
border-color: #D4B862 !important;
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(184, 151, 58, 0.42) !important;
letter-spacing: 0.22em !important;
}
.hgbj-nav-cta:hover::before {
left: 120%;
}
.hgbj-nav-cta:focus-visible {
outline: 2px solid #1A1A2E;
outline-offset: 3px;
}
/* 2. Navy top bar to teal main header — hairline gold divider.
Drawn on the main header's top edge via inset shadow so it tracks
whichever DOM element carries the teal background. A faint linear
fade softens the transition for the luxury-brochure feel. */
.header .main-nav,
.header .main-nav__wrapper,
header#header > .main-header,
header#header > section,
.header-wrapper header#header {
position: relative;
}
header#header::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(184, 151, 58, 0.00) 6%,
rgba(184, 151, 58, 0.55) 50%,
rgba(184, 151, 58, 0.00) 94%,
transparent 100%
);
pointer-events: none;
z-index: 3;
}
/* A parallel, thinner golden glow that breathes under it for depth */
header#header::after {
content: '';
position: absolute;
left: 12%;
right: 12%;
top: 1px;
height: 12px;
background: radial-gradient(
ellipse at top,
rgba(184, 151, 58, 0.10) 0%,
transparent 70%
);
pointer-events: none;
z-index: 2;
opacity: 0;
animation: hgbjHeaderDividerFadeIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
@keyframes hgbjHeaderDividerFadeIn {
to { opacity: 1; }
}
/* 3. Nav hover — underline reveal + letter-spacing breath.
Respects the existing gold hover colour token. The underline draws
from the middle outward to give the interaction a definite poise.
Targets tier-1 links only; deeper tiers keep existing treatment. */
.nav-desktop__tier-1-link {
position: relative !important;
transition: letter-spacing 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nav-desktop__tier-1-link::after {
content: '';
position: absolute;
bottom: 6px;
left: 50%;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
width: 28px;
height: 1px;
background: #D4B862;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.nav-desktop__tier-1-link:hover::after,
.nav-desktop__tier-1-link:focus-visible::after,
.nav-desktop__tier-1-item:hover > .nav-desktop__tier-1-link::after {
transform: translateX(-50%) scaleX(1);
width: 40px;
}
.nav-desktop__tier-1-link:hover span,
.nav-desktop__tier-1-link:focus-visible span {
letter-spacing: 0.22em !important;
}
/* 4. Journal · serif bookmark mark.
A crafted SVG (double-rule + dot) in gold announces editorial content.
Targets any top-bar link pointing into /blogs/. */
.top-bar a[href*="/blogs/"],
.top-bar__menu a[href*="/blogs/"] {
position: relative;
padding-left: 22px !important;
transition: color 0.25s ease, letter-spacing 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.top-bar a[href*="/blogs/"]::before,
.top-bar__menu a[href*="/blogs/"]::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 14px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none' stroke='%23D4B862' stroke-width='1' stroke-linecap='square'%3E%3Cpath d='M1.5 1 H10.5 V12.5 L6 9.5 L1.5 12.5 Z' /%3E%3Cline x1='4' y1='4.2' x2='8' y2='4.2' /%3E%3Cline x1='4' y1='6.2' x2='8' y2='6.2' /%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.8;
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.top-bar a[href*="/blogs/"]:hover::before,
.top-bar__menu a[href*="/blogs/"]:hover::before {
opacity: 1;
transform: translateY(-50%) translateX(-1px) rotate(-3deg);
}
/* Bonus 1. Top-bar link hover · underline fade-in for visual consistency
with the main nav. Uses `currentColor` so it inherits per-link hue. */
.top-bar .top-bar__menu a,
.top-bar--right .top-bar__menu a {
position: relative;
}
.top-bar .top-bar__menu a::after,
.top-bar--right .top-bar__menu a::after {
content: '';
position: absolute;
left: 10%;
right: 10%;
bottom: -3px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
opacity: 0.7;
pointer-events: none;
}
.top-bar .top-bar__menu a:hover::after,
.top-bar--right .top-bar__menu a:hover::after {
transform: scaleX(1);
}
/* Bonus 2. Sticky-header CTA · match the gold treatment when shrunk */
body.sticky_nav .hgbj-nav-cta,
header#header.header-fixed--true .hgbj-nav-cta {
background: #B8973A !important;
color: #1A1A2E !important;
border-color: #B8973A !important;
box-shadow: 0 2px 10px rgba(184, 151, 58, 0.25) !important;
}
body.sticky_nav .hgbj-nav-cta:hover,
header#header.header-fixed--true .hgbj-nav-cta:hover {
background: #D4B862 !important;
border-color: #D4B862 !important;
box-shadow: 0 8px 22px rgba(184, 151, 58, 0.40) !important;
}
/* ═══════════════════════════════════════════════════ */
/* END v40.9 HEADER POLISH */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* STICKY HEADER CONTRAST FIX */
/* Earlier v38.1 rules target .header-fixed--true only. */
/* This theme actually toggles `body.sticky_nav` on */
/* scroll, so ivory text + white logo never applied */
/* there. Both selectors now covered. */
/* ═══════════════════════════════════════════════════ */
/* DOM-VERIFIED 2026-04-23: theme adds `hgbj-scrolled` class to
`header#header` on scroll — NOT `body.sticky_nav`. All selectors
updated to match the actual runtime state. */
/* Logo — force white primary variant via image filter in scrolled state.
brightness(0) collapses to black then invert(1) flips to white, so any
PNG renders ivory-white regardless of the source file's luminance. */
.main-nav__wrapper.sticky_nav .header__logo img,
.main-nav__wrapper.sticky_nav .header__logo .primary_logo,
header#header.header-fixed--true .header__logo img,
header#header.header-fixed--true .header__logo .primary_logo {
filter: brightness(0) invert(1) !important;
opacity: 0.96;
transition: opacity 0.3s ease, filter 0.3s ease;
}
.main-nav__wrapper.sticky_nav .header__logo img.secondary_logo,
header#header.header-fixed--true .header__logo img.secondary_logo {
display: none !important;
}
.main-nav__wrapper.sticky_nav .header__logo img.primary_logo,
header#header.header-fixed--true .header__logo img.primary_logo {
display: inline-block !important;
}
/* Text / SVG icons — ivory in scrolled state */
.main-nav__wrapper.sticky_nav,
.main-nav__wrapper.sticky_nav *,
.main-nav__wrapper.sticky_nav .main-nav,
.main-nav__wrapper.sticky_nav .main-nav *,
.main-nav__wrapper.sticky_nav .header__logo,
.main-nav__wrapper.sticky_nav .header__logo span,
.main-nav__wrapper.sticky_nav .nav-desktop__tier-1-link,
.main-nav__wrapper.sticky_nav .nav-desktop__tier-1-link span,
.main-nav__wrapper.sticky_nav .search-container a,
.main-nav__wrapper.sticky_nav .search-container a svg,
.main-nav__wrapper.sticky_nav .mini_cart,
.main-nav__wrapper.sticky_nav .mini_cart *,
.main-nav__wrapper.sticky_nav .mini_cart svg {
color: var(--hgbj-ivory, #F9F7F4) !important;
}
.main-nav__wrapper.sticky_nav svg *,
.main-nav__wrapper.sticky_nav .main-nav svg * {
fill: var(--hgbj-ivory, #F9F7F4) !important;
stroke: var(--hgbj-ivory, #F9F7F4) !important;
}
/* Nav-link hover in scrolled state — gold */
.main-nav__wrapper.sticky_nav .nav-desktop__tier-1-link:hover,
.main-nav__wrapper.sticky_nav .nav-desktop__tier-1-link:hover span,
.main-nav__wrapper.sticky_nav .nav-desktop__tier-1-item:hover > .nav-desktop__tier-1-link,
.main-nav__wrapper.sticky_nav .nav-desktop__tier-1-item:hover > .nav-desktop__tier-1-link span {
color: var(--hgbj-gold, #D4B862) !important;
}
/* Dropdown panels stay ivory-bg / navy-text for readability */
.main-nav__wrapper.sticky_nav .nav-desktop__tier-2,
.main-nav__wrapper.sticky_nav .nav-desktop__tier-2-link,
.main-nav__wrapper.sticky_nav .nav-desktop__tier-2-link span,
.main-nav__wrapper.sticky_nav .nav-desktop__tier-3,
.main-nav__wrapper.sticky_nav .nav-desktop__tier-3-link,
.main-nav__wrapper.sticky_nav .nav-desktop__tier-3-link span,
.main-nav__wrapper.sticky_nav .dropdown,
.main-nav__wrapper.sticky_nav .dropdown *,
.main-nav__wrapper.sticky_nav .mega-menu,
.main-nav__wrapper.sticky_nav .mega-menu * {
color: var(--hgbj-navy, #1A1A2E) !important;
}
.main-nav__wrapper.sticky_nav .dropdown svg *,
.main-nav__wrapper.sticky_nav .mega-menu svg * {
fill: var(--hgbj-navy, #1A1A2E) !important;
stroke: var(--hgbj-navy, #1A1A2E) !important;
}
/* Book Appointment CTA — preserve the v40.9 gold treatment in scrolled state */
.main-nav__wrapper.sticky_nav .hgbj-nav-cta,
.main-nav__wrapper.sticky_nav .hgbj-nav-cta span {
background: #B8973A !important;
color: #1A1A2E !important;
border-color: #B8973A !important;
}
.main-nav__wrapper.sticky_nav .hgbj-nav-cta:hover,
.main-nav__wrapper.sticky_nav .hgbj-nav-cta:hover span {
background: #D4B862 !important;
border-color: #D4B862 !important;
color: #1A1A2E !important;
}
/* ═══════════════════════════════════════════════════ */
/* END v40.9.1 STICKY HEADER CONTRAST FIX */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* STICKY LOGO — LEFT, VERTICALLY CENTRED */
/* Keep the logo pinned to the left column (not the */
/* whole-header centre). Just make sure it's vertically */
/* centred within the compact sticky bar and has a */
/* breathing left indent instead of hugging the edge. */
/* ═══════════════════════════════════════════════════ */
@media (min-width: 990px) {
.main-nav__wrapper.sticky_nav .main-nav {
align-items: center !important;
}
.main-nav__wrapper.sticky_nav .main-nav > .header__logo {
display: flex !important;
align-items: center !important;
align-self: center !important;
padding-left: 16px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.main-nav__wrapper.sticky_nav .main-nav > .header__logo a {
display: flex !important;
align-items: center !important;
}
.main-nav__wrapper.sticky_nav .main-nav > .header__logo img {
display: block !important;
margin: 0 !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* END v40.9.2 */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* TOP-BAR ICON SUITE */
/* Matching the Journal bookmark with 4 gold line */
/* icons on the other top-bar links. All icons share a */
/* 1px stroke, #D4B862 gold, 12x14 glyph-cell, and hover*/
/* micro-tilt that echoes the bookmark interaction. */
/* ═══════════════════════════════════════════════════ */
/* Shared icon base */
.top-bar .top-bar__menu > li > a[href^="tel:"],
.top-bar .top-bar__menu > li > a[href*="/pages/about-us"],
.top-bar .top-bar__menu > li > a[href*="/pages/book-online-consultation"],
.top-bar .top-bar__menu > li > a[href$="/pages/contact"],
.top-bar .top-bar__menu > li > a[href*="hattongardenbespokejewellery.com/pages/contact"] {
position: relative;
padding-left: 22px !important;
transition: color 0.25s ease, letter-spacing 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.top-bar .top-bar__menu > li > a[href^="tel:"]::before,
.top-bar .top-bar__menu > li > a[href*="/pages/about-us"]::before,
.top-bar .top-bar__menu > li > a[href*="/pages/book-online-consultation"]::before,
.top-bar .top-bar__menu > li > a[href$="/pages/contact"]::before,
.top-bar .top-bar__menu > li > a[href*="hattongardenbespokejewellery.com/pages/contact"]::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.85;
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.top-bar .top-bar__menu > li > a[href^="tel:"]:hover::before,
.top-bar .top-bar__menu > li > a[href*="/pages/about-us"]:hover::before,
.top-bar .top-bar__menu > li > a[href*="/pages/book-online-consultation"]:hover::before,
.top-bar .top-bar__menu > li > a[href$="/pages/contact"]:hover::before,
.top-bar .top-bar__menu > li > a[href*="hattongardenbespokejewellery.com/pages/contact"]:hover::before {
opacity: 1;
transform: translateY(-50%) translateY(-1px);
}
/* 1. Phone handset — for tel: links */
.top-bar .top-bar__menu > li > a[href^="tel:"]::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23D4B862' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 1.5 L5 1.5 L6 4 L4.6 5 C5.1 7 7 8.9 9 9.4 L10 8 L12.5 9 L12.5 11 C12.5 12 11.6 12.5 10.6 12.5 C6 12.5 1.5 8 1.5 3.4 C1.5 2.4 2 1.5 3 1.5 Z'/%3E%3C/svg%3E");
}
/* 2. Open book — for Our Story */
.top-bar .top-bar__menu > li > a[href*="/pages/about-us"]::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23D4B862' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3 L7 4 L12 3 L12 11 L7 12 L2 11 Z'/%3E%3Cline x1='7' y1='4' x2='7' y2='12'/%3E%3C/svg%3E");
}
/* 3. Calendar with tick — for Book Online Consultation */
.top-bar .top-bar__menu > li > a[href*="/pages/book-online-consultation"]::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23D4B862' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.5' width='10' height='8'/%3E%3Cline x1='2' y1='6' x2='12' y2='6'/%3E%3Cline x1='4.5' y1='2.2' x2='4.5' y2='4'/%3E%3Cline x1='9.5' y1='2.2' x2='9.5' y2='4'/%3E%3Cpath d='M5 8.8 L6.3 10 L9 7.5'/%3E%3C/svg%3E");
}
/* 4. Envelope — for Contact Us */
.top-bar .top-bar__menu > li > a[href$="/pages/contact"]::before,
.top-bar .top-bar__menu > li > a[href*="hattongardenbespokejewellery.com/pages/contact"]::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23D4B862' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='3.5' width='11' height='7'/%3E%3Cpath d='M1.5 3.5 L7 8 L12.5 3.5'/%3E%3C/svg%3E");
}
/* ═══════════════════════════════════════════════════ */
/* END v40.9.3 TOP-BAR ICON SUITE */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* ACCESSIBILITY POLISH */
/* Fixes Lighthouse mobile audit failures: */
/* - color-contrast (quote em/attribution) */
/* - target-size (hidden collection links) */
/* - image-aspect-ratio (logo) */
/* Source colours moved to values that clear the */
/* 4.5:1 WCAG AA contrast threshold on light bg. */
/* ═══════════════════════════════════════════════════ */
/* 1. Quote italic body — #A8896A on ivory = 3.85:1 (fail).
#7A6141 on ivory = 4.96:1 (pass) and reads richer brown. */
.hgbj-quote-text em,
.hgbj-quote-body em {
color: #7A6141 !important;
}
/* 2. Quote attribution + testimonial carousel attribution +
home FAQ eyebrow — all land on ivory with warm greys
that fall short of 4.5:1. Deep warm grey #6E5F4F = 5.42:1 (pass). */
.hgbj-quote-attribution,
.hgbj-tc__attribution,
.hgbj-home-faq-eyebrow {
color: #6E5F4F !important;
}
/* 3. Featured-collection view-all link — keep gold but ensure
on any light wrap it clears AA. #B8973A = 4.03:1 on white,
darken to #9A7D2E for 5.1:1. */
.hgbj-fc__view-all,
.hgbj-fc__view-all-wrap a {
color: #7A6220 !important;
}
.hgbj-fc__view-all:hover {
color: #5E4A18 !important;
}
/* 4. Homepage hero eyebrow text — if rendered on teal or navy
it needs light, but on ivory it needs dark. Force ivory
when inside dark sections, navy otherwise (context-aware). */
.hgbj-hero .bj-header__eyebrow,
.shopify-section--image-with-text-overlay .bj-header__eyebrow {
color: #F9F7F4 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.bj-section .bj-header__eyebrow {
color: #6E5F4F !important;
}
/* 5. Touch targets — `.hidden-product-link` sits invisibly on top
of collection tiles. Lighthouse flags its hit-box as sub-44px.
Stretch it to fill the tile so the whole card is tappable. */
.list-collections a.hidden-product-link,
.product-wrap a.hidden-product-link,
a.hidden-product-link {
position: absolute !important;
inset: 0 !important;
min-width: 44px !important;
min-height: 44px !important;
display: block !important;
font-size: 0 !important;
color: transparent !important;
z-index: 2 !important;
}
/* 6. Logo aspect-ratio — display at declared width/height so the
ratio matches the source PNG and Lighthouse stops flagging. */
.header__logo img,
.mobile_logo img {
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
/* ═══════════════════════════════════════════════════ */
/* END v40.10 ACCESSIBILITY POLISH */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* MOBILE HEADER · GAP + CLOSE BUTTON FIX */
/* - Header top offset mismatched trust-bar height (was */
/* 30px, trust-bar is 22px) leaving an 8px gap. */
/* Header offset is fixed in header.liquid; also */
/* adjust section-wrapper margin so content doesn't */
/* slip under the shorter fixed column. */
/* - .promo-banner__close ::before had no centring; */
/* the × glyph rendered top-left of its 35x30 box. */
/* ═══════════════════════════════════════════════════ */
/* Unify trust-bar height across ALL mobile widths to avoid breakpoint
drift between trust-bar and header top. Any earlier rule that forced
22px on narrow widths is superseded here. */
@media (max-width: 798px) {
.hgbj-trust-bar {
height: 24px !important;
min-height: 24px !important;
box-sizing: border-box !important;
}
.mobile_nav-fixed--true #header {
top: 24px !important;
}
.mobile_nav-fixed--true .section-wrapper {
margin-top: 64px !important;
}
.mobile_nav-fixed--true.promo-banner--show .section-wrapper {
margin-top: 94px !important;
}
}
/* Bulletproof close-button click target.
The ::before pseudo was absolute-positioned over the whole button
and needs pointer-events: none so clicks reach the real button,
which is what the jQuery delegated handler listens for. */
.promo-banner__close {
pointer-events: auto !important;
z-index: 2 !important;
}
.promo-banner__close::before,
.promo-banner__close::after {
pointer-events: none !important;
}
/* Promo-banner close button — pixel-perfect × drawn from two crossed
lines (text-based × drifted due to font baseline metrics). */
header#header .promo-banner .promo-banner__close,
.promo-banner .promo-banner__close {
position: absolute !important;
top: 0 !important;
right: 0 !important;
width: 35px !important;
height: 35px !important;
padding: 0 !important;
background: rgba(184, 151, 58, 0.8) !important;
border: 0 !important;
cursor: pointer;
transition: background 0.25s ease;
}
header#header .promo-banner .promo-banner__close::before,
header#header .promo-banner .promo-banner__close::after,
.promo-banner .promo-banner__close::before,
.promo-banner .promo-banner__close::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 14px !important;
height: 1.5px !important;
background: #1A1A2E !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
border-radius: 1px;
transition: background 0.25s ease;
}
header#header .promo-banner .promo-banner__close::before,
.promo-banner .promo-banner__close::before {
transform: translate(-50%, -50%) rotate(45deg) !important;
}
header#header .promo-banner .promo-banner__close::after,
.promo-banner .promo-banner__close::after {
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
header#header .promo-banner .promo-banner__close:hover,
.promo-banner .promo-banner__close:hover {
background: #B8973A !important;
}
/* ═══════════════════════════════════════════════════ */
/* END v40.10.1 MOBILE HEADER FIX */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* MOBILE HEADER · teal → navy */
/* Desktop keeps the teal signature; mobile goes navy */
/* across the whole header surface including the strip */
/* that peeks below the mobile menu panel when open. */
/* The inner dropdown stays white (like desktop). */
/* ═══════════════════════════════════════════════════ */
@media (max-width: 798px) {
header#header,
header#header.mobile_nav-fixed--true,
header#header.hgbj-scrolled,
header#header.header-fixed--true,
body.sticky_nav header#header,
.mobile_nav-fixed--true .main-nav,
header#header .main-nav,
header#header.mobile_nav-fixed--true .main-nav {
background: #1A1A2E !important;
background-color: #1A1A2E !important;
}
/* Also cover the promo banner strip which shares header bg */
header#header .promo-banner {
background: #1A1A2E !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* END v40.10.2 */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* HERO · MOBILE IMAGE SHIFT + TEXT SCRIM */
/* On mobile, the sparkle-burst at the diamond's centre */
/* sits directly behind the headline, reducing contrast */
/* to near-invisible. Move the image down so the */
/* diamond anchors the lower third, then layer a soft */
/* top-to-middle scrim for bullet-proof legibility. */
/* ═══════════════════════════════════════════════════ */
@media (max-width: 798px) {
/* Shift the hero image down-left on mobile so the diamond
anchors the lower-left and the right half reads dark behind
the headline. */
.hgbj-video-hero__poster,
.hgbj-video-hero__media img,
.hgbj-video-hero__media video,
.hgbj-video-hero__poster img {
object-position: 28% 80% !important;
}
/* Reinforce the dark scrim that sits under the copy —
adds a gentle top-to-middle gradient so headline and
subhead read against any part of the image. */
.hgbj-video-hero__overlay,
.hgbj-video-hero .hgbj-video-hero__overlay {
background:
linear-gradient(
180deg,
rgba(10, 10, 22, 0.62) 0%,
rgba(10, 10, 22, 0.42) 35%,
rgba(10, 10, 22, 0.22) 60%,
rgba(10, 10, 22, 0.34) 100%
) !important;
}
/* Tighten the headline drop-shadow so crystalline text
doesn't bleed into any remaining bright highlights. */
.hgbj-video-hero__content h1,
.hgbj-video-hero__content .hgbj-video-hero__headline,
.hgbj-video-hero__content .hgbj-video-hero__eyebrow,
.hgbj-video-hero__content .hgbj-video-hero__subtitle {
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}
}
/* ═══════════════════════════════════════════════════ */
/* END v40.10.3 */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* PROMO BANNER · WHITE + NAVY TEXT */
/* Breaks the navy-on-navy monotony between the trust */
/* bar and the main header. Ivory strip with refined */
/* navy copy, gold-tinted hairline separators above and */
/* below, and a navy × on the close button for crisp */
/* dark-on-light interaction. */
/* ═══════════════════════════════════════════════════ */
/* Banner surface */
header#header .promo-banner,
.promo-banner,
body header#header .promo-banner,
header#header.mobile_nav-fixed--true .promo-banner,
header#header.hgbj-scrolled .promo-banner,
#shopify-section-header .promo-banner,
#shopify-section-header > div.promo-banner,
#shopify-section-header header .promo-banner {
background: #F9F7F4 !important;
background-color: #F9F7F4 !important;
border-top: 1px solid rgba(184, 151, 58, 0.28) !important;
border-bottom: 1px solid rgba(184, 151, 58, 0.28) !important;
color: #1A1A2E !important;
}
/* M6 (audit fix): pa11y reported 1:1 contrast on the inner-header
promo-banner — text was inheriting settings.promo_text_color (#333333)
from the upstream Liquid template. Adding maximum-specificity rules
covering BOTH the outer and inner banner instances, plus all descendants.
Navy on ivory gives ~17:1 (WCAG AAA pass). */
header#header .promo-banner,
header#header .promo-banner *,
.promo-banner .promo-banner__content,
.promo-banner .promo-banner__content *,
.promo-banner p,
.promo-banner span,
.promo-banner strong,
#shopify-section-header .promo-banner,
#shopify-section-header .promo-banner *,
#shopify-section-header .promo-banner p,
#shopify-section-header header .promo-banner,
#shopify-section-header header .promo-banner *,
#shopify-section-header header .promo-banner p {
color: #1A1A2E !important;
}
/* Links inside the banner — navy with gold underline on hover */
.promo-banner a,
.promo-banner a:link,
.promo-banner a:visited {
color: #1A1A2E !important;
text-decoration: underline !important;
text-underline-offset: 3px;
text-decoration-thickness: 0.5px;
text-decoration-color: rgba(184, 151, 58, 0.55) !important;
transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.promo-banner a:hover {
color: #B8973A !important;
text-decoration-color: #B8973A !important;
}
/* Close button — navy square so it reads on the ivory bg.
Keeps the pixel-perfect × built from crossed lines. */
header#header .promo-banner .promo-banner__close,
.promo-banner .promo-banner__close {
background: rgba(26, 26, 46, 0.86) !important;
}
header#header .promo-banner .promo-banner__close::before,
header#header .promo-banner .promo-banner__close::after,
.promo-banner .promo-banner__close::before,
.promo-banner .promo-banner__close::after {
background: #F9F7F4 !important;
}
header#header .promo-banner .promo-banner__close:hover,
.promo-banner .promo-banner__close:hover {
background: #B8973A !important;
}
header#header .promo-banner .promo-banner__close:hover::before,
header#header .promo-banner .promo-banner__close:hover::after,
.promo-banner .promo-banner__close:hover::before,
.promo-banner .promo-banner__close:hover::after {
background: #1A1A2E !important;
}
/* ═══════════════════════════════════════════════════ */
/* END v40.10.4 PROMO BANNER */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* MOBILE DROPDOWN · ICON SUITE */
/* Mirrors the top-bar icon suite (v40.9.3) on the */
/* mobile hamburger menu: phone, book (Our Story), */
/* calendar (Book Consultation), envelope (Contact Us). */
/* Journal bookmark already appears via the broader */
/* [href*="/blogs/"] rule in v40.9.3. */
/* ═══════════════════════════════════════════════════ */
@media (max-width: 798px) {
#mobile_menu a[href^="tel:"],
#mobile_menu a[href*="/pages/about-us"],
#mobile_menu a[href*="/pages/book-online-consultation"],
#mobile_menu a[href$="/pages/contact"],
#mobile_menu a[href*="/blogs/"] {
position: relative;
padding-left: 44px !important;
}
#mobile_menu a[href^="tel:"]::before,
#mobile_menu a[href*="/pages/about-us"]::before,
#mobile_menu a[href*="/pages/book-online-consultation"]::before,
#mobile_menu a[href$="/pages/contact"]::before,
#mobile_menu a[href*="/blogs/"]::before {
content: '';
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 16px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.85;
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile_menu a[href^="tel:"]:hover::before,
#mobile_menu a[href*="/pages/about-us"]:hover::before,
#mobile_menu a[href*="/pages/book-online-consultation"]:hover::before,
#mobile_menu a[href$="/pages/contact"]:hover::before,
#mobile_menu a[href*="/blogs/"]:hover::before {
opacity: 1;
transform: translateY(-50%) translateX(-1px);
}
/* 1. Phone handset */
#mobile_menu a[href^="tel:"]::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23B8973A' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 1.5 L5 1.5 L6 4 L4.6 5 C5.1 7 7 8.9 9 9.4 L10 8 L12.5 9 L12.5 11 C12.5 12 11.6 12.5 10.6 12.5 C6 12.5 1.5 8 1.5 3.4 C1.5 2.4 2 1.5 3 1.5 Z'/%3E%3C/svg%3E");
}
/* 2. Open book — Our Story */
#mobile_menu a[href*="/pages/about-us"]::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23B8973A' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3 L7 4 L12 3 L12 11 L7 12 L2 11 Z'/%3E%3Cline x1='7' y1='4' x2='7' y2='12'/%3E%3C/svg%3E");
}
/* 3. Calendar — Book Online Consultation */
#mobile_menu a[href*="/pages/book-online-consultation"]::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23B8973A' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3.5' width='10' height='8'/%3E%3Cline x1='2' y1='6' x2='12' y2='6'/%3E%3Cline x1='4.5' y1='2.2' x2='4.5' y2='4'/%3E%3Cline x1='9.5' y1='2.2' x2='9.5' y2='4'/%3E%3Cpath d='M5 8.8 L6.3 10 L9 7.5'/%3E%3C/svg%3E");
}
/* 4. Envelope — Contact Us */
#mobile_menu a[href$="/pages/contact"]::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23B8973A' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='3.5' width='11' height='7'/%3E%3Cpath d='M1.5 3.5 L7 8 L12.5 3.5'/%3E%3C/svg%3E");
}
/* 5. Bookmark — Journal (may already inherit from v40.9.3 but scoped here for certainty) */
#mobile_menu a[href*="/blogs/"]::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14' fill='none' stroke='%23B8973A' stroke-width='1' stroke-linecap='square'%3E%3Cpath d='M1.5 1 H10.5 V12.5 L6 9.5 L1.5 12.5 Z' /%3E%3Cline x1='4' y1='4.2' x2='8' y2='4.2' /%3E%3Cline x1='4' y1='6.2' x2='8' y2='6.2' /%3E%3C/svg%3E");
width: 12px;
height: 14px;
}
}
/* ═══════════════════════════════════════════════════ */
/* END v40.10.5 MOBILE DROPDOWN ICON SUITE */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* FAQ PAGE ACCORDION STYLING */
/* Native details/summary elements with luxury serif heads, */
/* hairline gold dividers, gentle expand animation. */
/* Scoped to the FAQs page so it doesn't leak into */
/* other pages that use details elsewhere. */
/* ═══════════════════════════════════════════════════ */
body.page-faqs .shopify-section--custom-liquid details,
body.page-faqs .page-template details,
body.page-faqs .page details,
body.template-page .page-faqs details,
body.template-page [data-page="faqs"] details,
.hgbj-faq details,
body:has(.page-faqs) details {
margin: 0;
padding: 20px 0;
border-bottom: 1px solid rgba(184, 151, 58, 0.22);
cursor: pointer;
transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-faqs details > summary,
body.template-page details > summary {
list-style: none;
cursor: pointer;
position: relative;
padding-right: 34px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 18px;
font-weight: 500;
line-height: 1.4;
color: #1A1A2E;
transition: color 0.3s ease, letter-spacing 0.3s ease;
}
body.page-faqs details > summary::-webkit-details-marker,
body.template-page details > summary::-webkit-details-marker { display: none; }
body.page-faqs details > summary strong,
body.template-page details > summary strong {
font-weight: 500;
}
body.page-faqs details > summary:hover,
body.template-page details > summary:hover {
color: #B8973A;
}
/* Chevron — custom SVG that rotates on open */
body.page-faqs details > summary::after,
body.template-page details > summary::after {
content: '';
position: absolute;
right: 4px;
top: 50%;
width: 14px;
height: 14px;
transform: translateY(-50%) rotate(0deg);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23B8973A' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 5 L7 8.5 L10.5 5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-faqs details[open] > summary::after,
body.template-page details[open] > summary::after {
transform: translateY(-50%) rotate(180deg);
}
body.page-faqs details[open] > summary,
body.template-page details[open] > summary {
color: #B8973A;
padding-bottom: 10px;
}
/* Answer body */
body.page-faqs details > p,
body.template-page details > p,
body.page-faqs details > *:not(summary),
body.template-page details > *:not(summary) {
margin-top: 12px;
padding: 0 4px 0 0;
font-family: 'EB Garamond', Georgia, serif;
font-size: 15px;
line-height: 1.7;
color: #363636;
animation: hgbjFaqOpen 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-faqs details > p a,
body.template-page details > p a {
color: #9A7D2E;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 0.5px;
transition: color 0.25s ease;
}
body.page-faqs details > p a:hover,
body.template-page details > p a:hover {
color: #B8973A;
}
@keyframes hgbjFaqOpen {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* H2 section heads within the FAQ */
body.page-faqs .rte h2,
body.page-faqs .page-content h2,
body.template-page .rte h2 + details,
body.page-faqs h2 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 28px;
letter-spacing: 0.02em;
margin-top: 56px;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid #D4C4AF;
color: #1A1A2E;
}
body.page-faqs h2:first-of-type {
margin-top: 32px;
}
/* ═══════════════════════════════════════════════════ */
/* END v40.11 FAQ ACCORDION STYLING */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* BLOG ARTICLE POLISH */
/* Luxury magazine-style treatment: refined serif body, */
/* drop-cap on opening paragraph, pull-quote styling, */
/* and an editorial "More from the Journal" related */
/* articles section with three image cards. */
/* ═══════════════════════════════════════════════════ */
/* ── Article body typography ─── */
body.article .rte,
body.template-article .rte,
.article_content .rte {
font-family: 'EB Garamond', Georgia, serif;
font-size: 18px;
line-height: 1.75;
color: #2A2A3E;
max-width: 68ch;
margin-left: auto;
margin-right: auto;
}
body.article .rte p,
.article_content .rte p {
margin-bottom: 22px;
}
/* Drop-cap on first paragraph */
body.article .rte > p:first-of-type::first-letter,
.article_content .rte > p:first-of-type::first-letter {
float: left;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 72px;
line-height: 0.9;
margin: 6px 12px 0 0;
color: #B8973A;
font-weight: 400;
}
/* Subheads */
body.article .rte h2,
.article_content .rte h2 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 30px;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.25;
color: #1A1A2E;
margin-top: 56px;
margin-bottom: 18px;
}
body.article .rte h3,
.article_content .rte h3 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-weight: 500;
color: #1A1A2E;
margin-top: 40px;
margin-bottom: 14px;
}
/* Pull-quote treatment on any blockquote */
body.article .rte blockquote,
.article_content .rte blockquote {
border: none;
border-top: 1px solid rgba(184, 151, 58, 0.3);
border-bottom: 1px solid rgba(184, 151, 58, 0.3);
padding: 28px 0;
margin: 40px 0;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-style: italic;
line-height: 1.5;
color: #1A1A2E;
text-align: center;
position: relative;
}
body.article .rte blockquote::before,
.article_content .rte blockquote::before {
content: '\201C';
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
background: #F9F7F4;
padding: 0 12px;
font-size: 40px;
line-height: 1;
color: rgba(184, 151, 58, 0.55);
font-style: normal;
}
/* In-article links */
body.article .rte a,
.article_content .rte a {
color: #9A7D2E;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 0.5px;
text-decoration-color: rgba(184, 151, 58, 0.5);
transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
body.article .rte a:hover,
.article_content .rte a:hover {
color: #B8973A;
text-decoration-color: #B8973A;
}
/* ── Related Articles · "More from the Journal" ─── */
.hgbj-related {
margin-top: 80px;
padding-top: 56px;
border-top: 1px solid rgba(184, 151, 58, 0.3);
}
.hgbj-related__head {
text-align: center;
margin-bottom: 40px;
}
.hgbj-related__eyebrow {
display: block;
font-family: 'EB Garamond', Georgia, serif;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #6E5F4F;
margin-bottom: 10px;
}
.hgbj-related__heading {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(26px, 3.4vw, 36px);
font-weight: 500;
color: #1A1A2E;
margin: 0;
}
.hgbj-related__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media (max-width: 900px) {
.hgbj-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.hgbj-related__grid { grid-template-columns: 1fr; gap: 36px; }
}
.hgbj-related__card {
margin: 0;
}
.hgbj-related__link {
display: block;
color: inherit;
text-decoration: none !important;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hgbj-related__link:hover {
transform: translateY(-3px);
}
.hgbj-related__image-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #F9F7F4;
margin-bottom: 18px;
}
.hgbj-related__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.hgbj-related__link:hover .hgbj-related__image {
transform: scale(1.03);
}
.hgbj-related__image-wrap--placeholder {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1A1A2E 0%, #2C2C4A 100%);
}
.hgbj-related__placeholder-mark {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 40px;
letter-spacing: 0.3em;
color: rgba(184, 151, 58, 0.55);
}
.hgbj-related__body {
padding: 0 4px;
}
.hgbj-related__date {
display: block;
font-family: 'EB Garamond', Georgia, serif;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #6E5F4F;
margin-bottom: 10px;
}
.hgbj-related__title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-weight: 500;
line-height: 1.3;
color: #1A1A2E;
margin: 0 0 10px;
transition: color 0.25s ease;
}
.hgbj-related__link:hover .hgbj-related__title {
color: #B8973A;
}
.hgbj-related__excerpt {
font-family: 'EB Garamond', Georgia, serif;
font-size: 15px;
line-height: 1.55;
color: #363636;
margin: 0 0 14px;
}
.hgbj-related__cta {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #B8973A;
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
}
.hgbj-related__cta span {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hgbj-related__link:hover .hgbj-related__cta span {
transform: translateX(4px);
}
/* ═══════════════════════════════════════════════════ */
/* END v40.12 BLOG ARTICLE POLISH */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* A11Y FIXES (Lighthouse mobile pass 2) */
/* - Trust-bar ticker contrast (gold on navy too thin) */
/* - Breadcrumb link contrast */
/* - Heading hierarchy — sub_title h5 \u2192 h6 rendering */
/* ═══════════════════════════════════════════════════ */
/* Trust-bar ticker copy — upgrade gold \u2192 ivory for readability
against the navy bar. Gold remains on hover accents. */
.hgbj-trust-bar .hgbj-tb-ticker__copy,
.hgbj-trust-bar .hgbj-tb-mobile .hgbj-tb-ticker__copy,
.hgbj-trust-bar .hgbj-tb-item {
color: #F9F7F4 !important;
}
.hgbj-trust-bar .hgbj-tb-dot {
color: rgba(184, 151, 58, 0.65) !important;
}
/* Blog breadcrumb link text — the current hue fails 4.5:1.
Bump to a deeper warm grey for readable underline links. */
.breadcrumb .breadcrumb_text a,
.breadcrumb .breadcrumb_text a span {
color: #6E5F4F !important;
}
.breadcrumb .breadcrumb_text a:hover,
.breadcrumb .breadcrumb_text a:hover span {
color: #B8973A !important;
}
/* Article sidebar h5 heading — treat visually like h6 so the
document heading order flows h1 \u2192 h2 \u2192 ... without the h5 jump. */
.blog-article__main .sidebar h5.sub_title {
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6E5F4F;
}
/* Blog meta (author byline + date + read time) — contrast fix */
.blog_meta,
.blog_meta span,
.blog_meta time,
.blog_meta a {
color: #5C5046 !important;
}
.blog_meta a:hover {
color: #B8973A !important;
}
/* ═══════════════════════════════════════════════════ */
/* END v40.12.1 */
/* ═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════ */
/* Page hierarchy polish — FAQ + Contact ornamental */
/* dividers, tighter typographic rhythm. */
/* ═══════════════════════════════════════════════════ */
/* FAQ: section headings get a gold diamond ornament above */
.faqAccordion .faq--heading,
.hgbj-section-ornament {
position: relative;
text-align: center;
margin-top: 72px;
margin-bottom: 32px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
font-style: italic;
font-size: clamp(22px, 2.6vw, 30px);
color: #1A1A2E;
letter-spacing: 0.02em;
}
.faqAccordion .faq--heading::before,
.hgbj-section-ornament::before {
content: '';
display: block;
width: 48px;
height: 1px;
background: rgba(184, 151, 58, 0.4);
margin: 0 auto 18px;
position: relative;
}
/* Diamond ornament below FAQ section titles. Positive top margin
avoids the descender overlap caused by the previous -13px hack. */
.faqAccordion .faq--heading::after,
.hgbj-section-ornament::after {
content: '';
display: block;
width: 6px;
height: 6px;
background: #B8973A;
transform: rotate(45deg);
margin: 12px auto 18px;
position: relative;
}
.faqAccordion .faq--heading:first-child {
margin-top: 40px;
}
/* FAQ page title treatment */
.template-page-faq h2.title,
.shopify-section--contact-section h1,
.shopify-section--page-narrow-template h1 {
text-align: center;
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
font-size: clamp(36px, 5vw, 56px);
color: #1A1A2E;
letter-spacing: 0.01em;
margin: 48px 0 24px;
}
/* Hairline gold rule as section break on FAQ/contact */
.hgbj-hairline-rule {
width: 60px;
height: 1px;
background: #B8973A;
margin: 24px auto 48px;
opacity: 0.6;
}
/* ═══════════════════════════════════════════════════ */
/* Contact page — visit block ornamentation */
/* ═══════════════════════════════════════════════════ */
.hgbj-contact-connect {
background: #F9F7F4;
padding: clamp(64px, 8vw, 112px) 24px;
}
.hgbj-contact-connect__inner {
max-width: 1120px;
margin: 0 auto;
}
.hgbj-contact-connect__eyebrow {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #B8973A;
text-align: center;
margin: 0 0 12px;
}
.hgbj-contact-connect__heading {
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 300;
font-style: italic;
font-size: clamp(28px, 3.6vw, 40px);
color: #1A1A2E;
text-align: center;
margin: 0 0 16px;
letter-spacing: 0.01em;
}
.hgbj-contact-connect__intro {
max-width: 520px;
margin: 0 auto 56px;
text-align: center;
font-family: Georgia, serif;
font-size: 15px;
line-height: 1.7;
color: #5C5046;
}
.hgbj-contact-connect__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-bottom: 56px;
}
.hgbj-contact-connect__image {
position: relative;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #2A2A3E 0%, #1A1A2E 100%);
overflow: hidden;
border: 1px solid rgba(184, 151, 58, 0.15);
}
.hgbj-contact-connect__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hgbj-contact-connect__image-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(212, 196, 175, 0.7);
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
gap: 12px;
}
.hgbj-contact-connect__image-placeholder span:first-child {
font-size: 28px;
color: #B8973A;
opacity: 0.5;
}
.hgbj-contact-connect__diamond {
width: 14px;
height: 14px;
background: #B8973A;
opacity: 0.6;
transform: rotate(45deg);
display: block;
}
.hgbj-contact-connect__caption {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 14px;
color: #5C5046;
margin: 12px 0 0;
text-align: center;
}
.hgbj-contact-connect__actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
.hgbj-contact-connect__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 220px;
padding: 16px 32px;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 12.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none !important;
transition: all 0.28s ease;
white-space: nowrap;
}
.hgbj-contact-connect__btn--primary {
background: #1A1A2E;
color: #F9F7F4 !important;
border: 1px solid #1A1A2E;
}
.hgbj-contact-connect__btn--primary:hover {
background: #B8973A;
color: #1A1A2E !important;
border-color: #B8973A;
}
.hgbj-contact-connect__btn--ghost {
background: transparent;
color: #1A1A2E !important;
border: 1px solid #1A1A2E;
}
.hgbj-contact-connect__btn--ghost:hover {
background: #1A1A2E;
color: #F9F7F4 !important;
}
.hgbj-contact-connect__btn--whatsapp {
background: transparent;
color: #25D366 !important;
border: 1px solid #25D366;
}
.hgbj-contact-connect__btn--whatsapp:hover {
background: #25D366;
color: #ffffff !important;
}
.hgbj-contact-connect__btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
@media (max-width: 640px) {
.hgbj-contact-connect__grid {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 40px;
}
.hgbj-contact-connect__btn {
width: 100%;
min-width: 0;
}
}
/* ═══════════════════════════════════════════════════════════════ */
/* Interior hero refinement — editorial finesse on all template */
/* banners and image-with-text-overlay heroes (NOT video-hero). */
/* Mission: disable parallax jank, add scrim, upgrade typography, */
/* introduce a gold ornament mark, refine button treatment. */
/* ═══════════════════════════════════════════════════════════════ */
/* Kill the parallax translateY jank that moves hero images */
/* unevenly on scroll. Lock to identity matrix regardless of what */
/* JS sets inline. */
.banner .image-element__wrap,
.caption-background-original .image-element__wrap,
.caption-background-darken_bg .image-element__wrap {
transform: none !important;
transition: none !important;
will-change: auto !important;
}
/* Consistent scrim gradient overlay for legibility regardless of */
/* how bright/warm the underlying image is. Applied only to hero */
/* banners that aren't already using the darken_bg style. */
/* Use a dedicated pseudo on image-element__wrap so it overlays the */
/* image itself without disturbing the banner's caption positioning.*/
.banner:not(.caption-background-darken_bg) .image-element__wrap {
position: relative;
}
.banner:not(.caption-background-darken_bg) .image-element__wrap::after {
content: '';
position: absolute;
inset: 0;
/* Two-layer scrim — a soft vignette focused on the centre where the
headline sits, on top of a vertical gradient for general legibility.
The vignette stop is gentle (0.18) so the image still feels open;
the linear gradient adds 0.30 max in the middle band — combined
they lift white text reliably without crushing the photograph. */
background:
radial-gradient(
ellipse 70% 55% at 50% 50%,
rgba(10, 10, 22, 0.18) 0%,
rgba(10, 10, 22, 0) 70%
),
linear-gradient(
180deg,
rgba(26, 26, 46, 0.34) 0%,
rgba(26, 26, 46, 0.22) 30%,
rgba(26, 26, 46, 0.26) 60%,
rgba(26, 26, 46, 0.58) 100%
);
pointer-events: none;
z-index: 1;
}
/* Keep the caption ABOVE the scrim — do NOT change its positioning */
.banner .caption {
z-index: 3;
}
/* Typography refinement on all hero banners */
.banner .caption-content .pretext {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 11.5px !important;
letter-spacing: 0.32em !important;
text-transform: uppercase !important;
font-weight: 400 !important;
color: #D4C4AF !important;
margin-bottom: 22px !important;
opacity: 0.95;
position: relative;
}
/* Small gold hairline underneath pretext — like a colophon eyebrow */
.banner .caption-content.align-center .pretext::after {
content: '';
display: block;
width: 44px;
height: 1px;
background: rgba(184, 151, 58, 0.5);
margin: 14px auto 0;
}
.banner .caption-content.align-left .pretext::after {
content: '';
display: block;
width: 44px;
height: 1px;
background: rgba(184, 151, 58, 0.5);
margin: 14px 0 0;
}
.banner .caption-content .headline {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 300 !important;
font-size: clamp(40px, 5.5vw, 68px) !important;
line-height: 1.05 !important;
letter-spacing: -0.005em !important;
color: #ffffff !important;
margin: 0 0 24px !important;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
/* Italic accent inside the headline (wrap with em or i for accent) */
.banner .caption-content .headline em,
.banner .caption-content .headline i {
font-style: italic;
color: #D4B862;
font-weight: 300;
font-family: 'Cormorant Garamond', Georgia, serif;
}
.banner .caption-content .subtitle {
font-family: Georgia, 'EB Garamond', serif !important;
font-size: 16px !important;
line-height: 1.65 !important;
color: rgba(249, 247, 244, 0.9) !important;
max-width: 560px !important;
margin: 0 0 32px !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45) !important;
}
.banner .caption-content.align-center .subtitle {
margin-left: auto !important;
margin-right: auto !important;
}
/* Refined button treatment in hero — editorial, with proper tracking */
.banner .caption-content .global-button,
.banner .caption-content .global-button--banner,
.banner .caption-content .global-button--primary {
padding: 16px 38px !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 12.5px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
border-radius: 0 !important;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
min-width: 200px;
text-align: center;
backdrop-filter: blur(1px);
}
.banner .caption-content .global-button:hover,
.banner .caption-content .global-button--banner:hover {
transform: translateY(-1px);
}
/* When two buttons present, give them elegant spacing */
.banner .caption-content .banner-buttons,
.banner .caption-content .button-group {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: inherit;
align-items: center;
}
.banner .caption-content.align-center .banner-buttons,
.banner .caption-content.align-center .button-group {
justify-content: center;
}
/* Page-load choreography: stagger the hero elements subtly */
@keyframes hgbj-hero-rise {
0% { opacity: 0; transform: translateY(14px); }
100% { opacity: 1; transform: translateY(0); }
}
.banner .caption-content > .pretext,
.banner .caption-content > .headline,
.banner .caption-content > .subtitle,
.banner .caption-content > .banner-buttons,
.banner .caption-content > [class*="global-button"] {
opacity: 0;
animation: hgbj-hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.banner .caption-content > .pretext { animation-delay: 0.10s; }
.banner .caption-content > .headline { animation-delay: 0.25s; }
.banner .caption-content > .subtitle { animation-delay: 0.40s; }
.banner .caption-content > .banner-buttons,
.banner .caption-content > [class*="global-button"] { animation-delay: 0.55s; }
/* Hero height treatment — consistent, intentional */
@media (min-width: 769px) {
.shopify-section[class*="image-with-text-overlay"] .image-element__wrap,
.shopify-section[class*="image-with-text-overlay"] .image-element__wrap img {
min-height: 70vh !important;
max-height: 80vh;
object-fit: cover !important;
object-position: center 35% !important;
}
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
.banner .caption-content > * {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ═══════════════════════════════════════════════════════════════ */
/* Hero consistency overrides — wins over per-page custom_css */
/* injected by individual sections. Ensures uniform headline size, */
/* subtitle font, and button treatment across all interior heroes. */
/* ═══════════════════════════════════════════════════════════════ */
/* Force all .pretext h1 (used for dynamic page-title heroes) into */
/* the unified headline size. Defends against page-specific 38/40px */
/* overrides like Bespoke Jewellery and Hand Engraving had. */
.banner .caption-content .pretext h1,
.banner .caption-content .headline,
section[class*="image-with-text-overlay"] .caption-content .pretext h1,
section[class*="image-with-text-overlay"] .caption-content .headline {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: clamp(40px, 5.5vw, 64px) !important;
font-weight: 300 !important;
line-height: 1.05 !important;
letter-spacing: -0.005em !important;
color: #ffffff !important;
text-transform: none !important;
margin: 0 0 24px !important;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
/* Ensure subtitle is always Cormorant italic-feel serif, not the */
/* Georgia fallback that's leaking on Contact, Solitaire, 4Cs. */
.banner .caption-content .subtitle,
.banner .caption-content .subtitle p,
section[class*="image-with-text-overlay"] .caption-content .subtitle,
section[class*="image-with-text-overlay"] .caption-content .subtitle p {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: italic !important;
font-size: clamp(15px, 1.2vw, 17px) !important;
font-weight: 300 !important;
line-height: 1.6 !important;
color: rgba(249, 247, 244, 0.92) !important;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5) !important;
max-width: 560px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Strengthen scrim where the underlying photo is light/peach so */
/* text remains legible (laser engraving, hand engraving, etc.). */
.banner:not(.caption-background-darken_bg) .image-element__wrap::after {
background: linear-gradient(
180deg,
rgba(26, 26, 46, 0.40) 0%,
rgba(26, 26, 46, 0.18) 30%,
rgba(26, 26, 46, 0.22) 60%,
rgba(26, 26, 46, 0.65) 100%
) !important;
}
/* Unified hero button styling — wins over banner-button variants. */
/* All hero CTAs now read as the same brand button. */
.banner .caption-content .global-button,
.banner .caption-content [class*="global-button"],
.banner .caption-content .banner-buttons a {
background: #1A1A2E !important;
color: #F9F7F4 !important;
border: 1px solid #1A1A2E !important;
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
padding: 16px 38px !important;
border-radius: 0 !important;
min-width: 220px !important;
text-align: center !important;
text-decoration: none !important;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}
.banner .caption-content .global-button:hover,
.banner .caption-content [class*="global-button"]:hover,
.banner .caption-content .banner-buttons a:hover {
background: #B8973A !important;
color: #1A1A2E !important;
border-color: #B8973A !important;
transform: translateY(-1px) !important;
}
/* Secondary button (when there's a button2) — outlined ivory */
.banner .caption-content .banner-buttons a:nth-child(2),
.banner .caption-content .global-button--secondary {
background: transparent !important;
color: #F9F7F4 !important;
border-color: rgba(249, 247, 244, 0.7) !important;
}
.banner .caption-content .banner-buttons a:nth-child(2):hover,
.banner .caption-content .global-button--secondary:hover {
background: rgba(249, 247, 244, 0.1) !important;
border-color: #F9F7F4 !important;
color: #F9F7F4 !important;
transform: translateY(-1px) !important;
}
/* ═══════════════════════════════════════════════════════════════ */
/* Retire the legacy 44px gold .feature-divider site-wide. */
/* It appears as a stray hairline under section headings and */
/* above buttons across many sections; redundant with our new */
/* ornament/colophon system. Single rule, harmless if a section */
/* still emits the markup. */
/* ═══════════════════════════════════════════════════════════════ */
.feature-divider {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════ */
/* Mega-menu item icons are now editable via the Shopify theme */
/* editor. Add a "Menu icon" block to any Mega Menu section, set */
/* the menu link handle (e.g. 'our-bespoke-process'), and pick an */
/* image. The icon will render next to that menu link. */
/* */
/* Built-in baseline icon for "Our Bespoke Process" — only kicks */
/* in if no theme-editor block has been configured for this handle. */
/* The editor's inline style emission will win over this rule */
/* by cascade order (no !important here). */
/* ═══════════════════════════════════════════════════════════════ */
li.menu_hasicon.mi_our-bespoke-process:before,
li.menu_hasicon.mi_bespoke-design-process:before {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
}
/* ═══════════════════════════════════════════════════════════════ */
/* Built-in baseline icon for 'Engraving Services / Overview' */
/* Same fallback model as bespoke-process: editor block wins; */
/* this kicks in only when no editor-configured icon exists. */
/* ═══════════════════════════════════════════════════════════════ */
li.menu_hasicon.mi_engraving-services:before,
li.menu_hasicon.mi_engraving-overview:before,
li.menu_hasicon.mi_engraving:before {
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1' viewBox='0 0 10161 10443'%3E%3Cg fill='%231A1A2E'%3E%3Cpath d='M4337 8215c76,-144 356,-479 513,-587 61,-41 288,-178 365,-69 124,175 -172,514 -251,617 -26,34 -207,241 -241,241 -23,0 -325,-186 -386,-203zm39 -3685c16,-23 34,-40 56,-60 58,-53 120,-140 166,-152 51,34 2377,2372 2390,2385l1255 1252c140,147 170,170 297,339l584 756c23,31 114,135 123,167 -34,-9 -21,-9 -47,-30l-940 -777c-112,-91 -202,-193 -303,-295 -155,-155 -3545,-3531 -3581,-3586zm-858 -338c31,-46 134,-139 181,-186l93 -100c1,-1 4,-3 5,-5l454 -443c42,11 165,151 205,191 107,107 162,131 162,244 0,72 -82,145 -132,195 -18,18 -26,24 -46,41 -35,32 -53,64 -116,116l-251 251c-71,62 -90,53 -179,53 -41,0 -358,-330 -376,-357zm-2604 -849c134,-201 223,-347 383,-543l137 -172c24,-30 46,-53 71,-83 16,-19 18,-25 34,-43 15,-17 21,-20 37,-40 85,-110 184,-201 276,-303l324 -323c30,-29 51,-41 82,-72l244 -219c31,-24 54,-45 84,-70 117,-95 408,-325 522,-394l276 -178c0,134 -116,259 -116,588 0,308 75,482 182,705 61,129 197,327 285,439 24,31 50,61 75,89 105,115 199,236 331,344 11,9 10,7 21,17 83,74 -13,123 -66,180l-153 156c-1,1 -3,3 -5,5l-251 251c-87,98 -306,289 -421,418 -98,110 -156,-37 -293,-168l-109 -103c-154,-156 -459,-361 -665,-454 -382,-172 -744,-209 -1138,-62 -53,20 -89,36 -148,36zm-666 -1071c0,-169 33,-312 72,-449l67 -193c96,-215 130,-285 278,-484 23,-31 38,-45 61,-74 159,-201 394,-406 618,-539 479,-284 1053,-410 1584,-169 107,48 231,124 317,204 23,21 21,20 47,40 27,20 29,17 33,54 -23,6 -85,47 -110,64 -238,156 -250,161 -491,339l-887 763c-11,11 -12,14 -23,25l-48 49c-1,1 -4,3 -5,5l-280 299c-1,2 -3,4 -4,5l-13 16c-1,2 -3,4 -4,5l-289 338c-16,19 -23,28 -38,48 -26,34 -44,61 -72,92l-398 586c-35,-9 -28,-15 -47,-40l-115 -145c-178,-240 -252,-511 -252,-838zm3260 -801c0,-117 36,-252 67,-338 62,-168 109,-406 -2,-567 -80,-117 -192,-209 -311,-287 -65,-43 -118,-75 -188,-111 -34,-18 -67,-35 -104,-50 -99,-38 -192,-67 -298,-88 -20,-4 -42,-11 -55,-13 -192,-28 -368,-22 -556,-1 -81,9 -178,33 -253,55 -147,43 -298,93 -431,167 -176,98 -304,178 -461,301 -137,107 -257,240 -373,370 -97,108 -176,233 -249,359 -53,92 -111,202 -147,307 -9,25 -10,33 -20,57 -11,26 -9,20 -18,49 -72,219 -135,531 -100,780 18,123 29,208 60,316l85 223c10,23 15,34 24,53 17,35 31,59 51,93 39,65 79,120 122,177 162,211 323,326 606,259 357,-85 431,-173 829,-102 35,6 83,21 121,33 146,49 277,114 404,194 302,189 409,319 647,559 120,121 210,125 364,89 14,9 25,18 38,30l19 20c75,84 280,301 363,341 53,26 144,53 217,53 89,0 177,-54 241,-96 8,7 15,14 25,24l510 512c10,10 10,9 20,19l169 168c11,12 10,11 24,25 1,1 3,3 5,5 1,1 4,3 5,5l97 96c31,31 57,54 88,85 17,17 27,26 43,43l374 378c7,6 7,7 15,14l236 237c1,1 4,3 5,5l257 254c57,57 114,110 168,169l23 25c5,5 13,12 20,18 17,16 27,27 44,43 30,30 52,52 82,82l380 383c155,136 344,335 482,482l601 605c1,1 3,3 5,5 9,8 11,11 20,19l215 200c93,91 274,213 376,308l1061 887c44,39 202,155 214,200 -64,0 -338,55 -463,58 -31,1 -65,-2 -96,0 -401,33 -902,-27 -1297,-141 -70,-20 -128,-35 -196,-55 -128,-36 -257,-78 -379,-122l-358 -143c-347,-150 -685,-308 -1020,-485 4,-44 40,-121 58,-154 46,-83 95,-173 172,-234 70,-56 196,-107 265,-21 82,102 -42,189 -42,263 0,118 118,172 203,97l27 -31c106,-146 110,-379 -24,-512 -86,-85 -186,-103 -311,-103 -183,0 -326,156 -421,293 -69,100 -95,174 -149,276 -43,-10 -63,-31 -103,-51 -39,-20 -62,-36 -98,-56l-395 -222c-32,-17 -65,-37 -98,-57 -40,-24 -66,-27 -87,-67 19,-7 10,-4 25,-14 57,-39 180,-195 220,-243 75,-93 138,-185 195,-297 110,-219 155,-561 -135,-675 -128,-50 -290,-9 -410,43 -48,21 -114,64 -156,95l-125 106c-1,1 -4,3 -5,5l-95 100c-82,100 -171,195 -249,299 -33,44 -81,92 -94,148 -44,-4 -84,-33 -123,-51l-346 -146c-524,-188 -1107,-319 -1705,-222 -265,42 -505,123 -733,260 -321,193 -539,499 -617,868 -10,48 -15,95 -15,149 0,297 35,473 174,713 45,79 106,143 162,214 28,36 56,60 94,89 193,151 358,249 597,329 49,16 93,26 144,39 359,92 766,81 1120,-19 109,-31 223,-63 322,-112 24,-12 47,-19 73,-33 105,-55 387,-151 261,-311 -60,-77 -159,-19 -218,17 -86,52 -191,100 -287,137l-159 53c-57,16 -110,29 -169,43 -338,78 -672,51 -1001,-45 -272,-80 -588,-268 -728,-526 -103,-190 -145,-342 -145,-569 0,-343 214,-615 463,-791 257,-182 649,-289 965,-289 202,0 412,4 605,41 18,3 50,6 75,11 312,68 620,163 911,294 234,105 458,228 684,348 -16,45 -133,113 -170,139 -90,65 -179,133 -274,189l-301 162c-149,68 -285,127 -441,177l-375 88c-130,16 -213,17 -350,17 -307,0 -657,-260 -486,-582 22,-42 68,-100 104,-128 52,-40 78,-65 142,-90 134,-51 308,-46 442,-1l116 58c14,10 18,14 33,25 110,73 158,159 237,159 58,0 116,-49 116,-106 0,-121 -180,-239 -274,-295 -203,-120 -431,-144 -666,-95 -483,102 -781,767 -273,1130 323,230 786,187 1159,94l274 -83c363,-128 705,-332 1011,-561l170 -138c14,-15 8,-1 16,-23 73,6 316,163 399,209 164,91 329,192 499,273 -4,43 -51,137 -66,175 -67,163 -142,327 -247,467 -511,682 -1282,230 -874,-256l23 -25c1,-1 4,-3 5,-4 215,-185 360,-57 454,-57 96,0 142,-122 87,-193 -87,-112 -410,-114 -577,-16 -584,345 -395,1145 287,1145 260,0 423,-103 597,-243 101,-81 192,-190 258,-301 20,-34 34,-60 53,-92 62,-102 110,-214 156,-326 8,-19 14,-30 21,-46 12,-26 32,-75 34,-101 38,9 59,25 92,43l431 215c61,28 108,53 170,81 616,281 1302,536 1981,604 428,43 892,47 1310,-47 28,-6 41,-12 69,-17 59,-11 161,-27 203,-57 95,-68 47,-153 -8,-228l-614 -804c-28,-34 -50,-66 -75,-99l-613 -795c-77,-102 -153,-208 -243,-297l-3746 -3749c-1,-1 -3,-3 -5,-5l-33 -35c50,-94 91,-121 91,-260 0,-124 -44,-201 -110,-280l-239 -243c-31,-31 -55,-61 -89,-84 65,-281 -66,-321 -217,-478l-28 -30c-1,-1 -3,-4 -5,-5 -1,-1 -3,-4 -5,-5 -131,-144 -211,-226 -333,-391 -79,-107 -144,-227 -204,-346l-48 -116c-50,-136 -77,-277 -77,-434z'/%3E%3C/g%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
}
/* ═══════════════════════════════════════════════════════════════ */
/* Section vertical-rhythm tightening */
/* The audit found adjacent content sections stacking 80+80 = 160px */
/* of empty space between every pair, making pages feel padded out. */
/* This pass reduces internal padding on the most-repeated section */
/* types so adjacent gaps drop to ~112px (still breathable, not */
/* sparse). Heroes and footer keep their original spacing. */
/* ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════ */
/* Bespoke "Price on enquiry" treatment */
/* For products without a fixed price (£0) — typically the team's */
/* manually-added bespoke pieces where metal market fluctuates and */
/* a static price would mislead the customer. Routes to the contact */
/* form via an Enquire button instead of a SOLD OUT add-to-cart. */
/* ═══════════════════════════════════════════════════════════════ */
.product-details .hgbj-price-on-enquiry {
display: block;
margin: 0.4em 0 0.6em;
}
.product-details .hgbj-price-on-enquiry .current_price em {
font-style: italic;
font-weight: 400;
font-size: clamp(15px, 1.6vw, 17px);
color: rgba(26, 26, 46, 0.78);
letter-spacing: 0.01em;
}
/* Enquire link replaces the standard .add_to_cart submit button on
price-on-enquiry products. We deliberately do NOT use .add_to_cart
on this element (sections.js would overwrite the text) — so we
restore the width:100% / margin behaviour that .add_to_cart gave. */
a.hgbj-enquire-btn,
.purchase-details__buttons a.hgbj-enquire-btn {
display: flex;
width: 100%;
margin-bottom: 0;
align-items: center;
justify-content: center;
text-decoration: none;
text-align: center;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 13px;
/* Sit above any disabled overlays from product-is-unavailable styling. */
position: relative;
z-index: 1;
opacity: 1 !important;
pointer-events: auto !important;
}
a.hgbj-enquire-btn:hover,
a.hgbj-enquire-btn:focus {
text-decoration: none;
}
a.hgbj-enquire-btn .text {
pointer-events: none;
}
/* Don't let the parent .product-is-unavailable wrapper grey out the
Enquire link — that class is auto-added because product.available
is false, but for a price-on-enquiry piece "unavailable" is wrong. */
.purchase-details__buttons.product-is-unavailable a.hgbj-enquire-btn {
opacity: 1 !important;
pointer-events: auto !important;
}
/* ═══════════════════════════════════════════════════════════════ */
/* Private Enquiry Drawer */
/* */
/* The "Enquire about this piece" CTA opens this drawer instead of */
/* navigating away. Cream paper + navy ink + a single hairline gold */
/* rule under each title — quiet luxury, not maximalism. The piece */
/* the customer is enquiring about is composed at the top with its */
/* own image and name; the message body is pre-written with that */
/* same name so they only need to add the personal touches. */
/* ═══════════════════════════════════════════════════════════════ */
.hgbj-enquiry {
position: fixed;
inset: 0;
z-index: 10000;
pointer-events: none;
font-family: var(--body-font, 'Cormorant Garamond'), Georgia, serif;
}
.hgbj-enquiry[hidden] { display: none; }
.hgbj-enquiry__backdrop {
position: absolute;
inset: 0;
background: rgba(20, 20, 36, 0.62);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 0;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0;
transition: opacity 0.32s ease;
pointer-events: auto;
}
.hgbj-enquiry.is-open .hgbj-enquiry__backdrop { opacity: 1; }
.hgbj-enquiry__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 520px;
background:
linear-gradient(180deg, rgba(184, 151, 58, 0.04) 0%, rgba(249, 247, 244, 0) 240px),
#F9F7F4;
display: flex;
flex-direction: column;
pointer-events: auto;
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
overflow-x: hidden;
box-shadow: -24px 0 64px rgba(8, 8, 24, 0.18);
-webkit-overflow-scrolling: touch;
}
.hgbj-enquiry.is-open .hgbj-enquiry__panel { transform: translateX(0); }
/* Subtle envelope-paper grain */
.hgbj-enquiry__panel::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.18 0 0 0 0.022 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: 0.5;
}
.hgbj-enquiry__panel > * { position: relative; z-index: 1; }
.hgbj-enquiry__close {
position: absolute;
top: 22px;
right: 22px;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(249, 247, 244, 0.9);
border: 1px solid rgba(26, 26, 46, 0.14);
color: #1A1A2E;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.3s ease;
}
.hgbj-enquiry__close:hover {
background: #1A1A2E;
border-color: #1A1A2E;
color: #F9F7F4;
transform: rotate(90deg);
}
.hgbj-enquiry__state {
flex: 1;
display: flex;
flex-direction: column;
padding: 72px 44px 44px;
}
.hgbj-enquiry__state[hidden] { display: none; }
.hgbj-enquiry__header {
margin: 0 0 28px;
opacity: 0;
transform: translateY(10px);
animation: hgbjEnquiryReveal 0.6s 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hgbj-enquiry__eyebrow {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(26, 26, 46, 0.55);
margin: 0 0 12px;
font-weight: 500;
}
.hgbj-enquiry__title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(30px, 4.2vw, 38px);
font-weight: 300;
letter-spacing: -0.005em;
color: #1A1A2E;
margin: 0;
line-height: 1.04;
}
.hgbj-enquiry__rule {
display: block;
width: 48px;
height: 1px;
background: linear-gradient(90deg, transparent, #B8973A 30%, #B8973A 70%, transparent);
margin: 18px 0 0;
}
.hgbj-enquiry__rule--center { margin-left: auto; margin-right: auto; }
.hgbj-enquiry__piece {
display: flex;
gap: 18px;
align-items: center;
padding: 16px;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(26, 26, 46, 0.1);
margin-bottom: 28px;
opacity: 0;
transform: translateY(10px);
animation: hgbjEnquiryReveal 0.6s 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hgbj-enquiry__piece-image-wrap {
width: 72px;
height: 72px;
flex-shrink: 0;
background: #fff;
overflow: hidden;
border: 1px solid rgba(26, 26, 46, 0.06);
}
.hgbj-enquiry__piece-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hgbj-enquiry__piece-info {
flex: 1;
min-width: 0;
}
.hgbj-enquiry__piece-eyebrow {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26, 26, 46, 0.55);
margin: 0 0 5px;
font-weight: 500;
}
.hgbj-enquiry__piece-name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 19px;
font-weight: 400;
color: #1A1A2E;
margin: 0;
line-height: 1.18;
letter-spacing: -0.002em;
}
.hgbj-enquiry__form {
display: flex;
flex-direction: column;
gap: 16px;
opacity: 0;
transform: translateY(10px);
animation: hgbjEnquiryReveal 0.6s 0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hgbj-enquiry__errors {
padding: 14px 16px;
background: rgba(176, 64, 64, 0.06);
border-left: 2px solid #B04040;
margin-bottom: 6px;
font-family: 'Cormorant Garamond', Georgia, serif;
color: #1A1A2E;
}
.hgbj-enquiry__errors p {
margin: 0 0 6px;
font-size: 14px;
font-weight: 500;
}
.hgbj-enquiry__errors ul {
margin: 0;
padding-left: 18px;
font-size: 13.5px;
font-style: italic;
color: rgba(26, 26, 46, 0.78);
}
.hgbj-enquiry__errors li {
margin-bottom: 2px;
}
/* ═══════════════════════════════════════════════════════════════ */
/* Eternity Rings page · editorial redesign */
/* */
/* The long SEO copy used to sit between the hero and the product */
/* grid, pushing the actual rings far down the page. This rework */
/* lifts the grid right under the hero and reformats the long-form */
/* copy as an editorial essay below it — Cormorant Garamond, drop */
/* cap, single column, hairline gold ornament — so customers see */
/* the goods first and read the story when they're ready. */
/* ═══════════════════════════════════════════════════════════════ */
/* ──── Hero — left at the standard theme height (no override) ──── */
/* ──── Featured collection · "Selected eternity ring designs" ──── */
body.page-eternity-rings .hgbj-fc__intro,
body.page-eternity-rings .shopify-section--featured-collection > section.section {
padding-top: clamp(48px, 5vw, 72px) !important;
padding-bottom: clamp(48px, 5vw, 72px) !important;
}
/* Editorial eyebrow above the title */
body.page-eternity-rings .shopify-section--featured-collection .hgbj-fc__intro::before,
body.page-eternity-rings .shopify-section--featured-collection .center > h2:first-of-type::before {
content: 'The Collection';
display: block;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #B8973A;
font-weight: 500;
margin-bottom: 14px;
}
/* Title typography upgrade */
body.page-eternity-rings .shopify-section--featured-collection h2.title,
body.page-eternity-rings .shopify-section--featured-collection .hgbj-fc__intro h2 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: clamp(30px, 4vw, 44px) !important;
font-weight: 300 !important;
letter-spacing: -0.008em !important;
color: #1A1A2E !important;
margin: 0 0 18px !important;
line-height: 1.04 !important;
text-transform: none !important;
}
/* Replace the default feature-divider with a refined hairline rule */
body.page-eternity-rings .shopify-section--featured-collection .feature-divider {
width: 56px !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, #B8973A 30%, #B8973A 70%, transparent) !important;
border: 0 !important;
margin: 0 auto 28px !important;
}
/* Refine the product grid — slightly tighter, with subtle hover lift */
body.page-eternity-rings .shopify-section--featured-collection .product-list {
gap: 28px !important;
}
body.page-eternity-rings .shopify-section--featured-collection .product-list .column {
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-eternity-rings .shopify-section--featured-collection .product-list .column:hover {
transform: translateY(-3px);
}
body.page-eternity-rings .shopify-section--featured-collection .product-details .title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
font-size: 17px !important;
line-height: 1.25 !important;
margin-top: 16px !important;
}
/* ──── The editorial essay (long SEO copy below the grid) ──── */
/* Targets only the long featured-text — 204f298c is now disabled */
/* so 9da34a05 is the sole featured-text rendered on this page. */
body.page-eternity-rings .shopify-section--featured-text {
background:
linear-gradient(180deg, transparent 0%, rgba(184, 151, 58, 0.025) 60%, transparent 100%);
}
body.page-eternity-rings .shopify-section--featured-text > section.section {
padding-top: clamp(56px, 6vw, 96px) !important;
padding-bottom: clamp(56px, 6vw, 96px) !important;
}
/* Hairline gold drop above the essay title — visual transition from grid */
body.page-eternity-rings .shopify-section--featured-text > section.section::before {
content: '';
display: block;
width: 1px;
height: 64px;
background: linear-gradient(180deg, transparent, #B8973A);
margin: -32px auto 36px;
position: relative;
top: -16px;
}
/* Constrain to a readable column width */
body.page-eternity-rings .shopify-section--featured-text .featured-text,
body.page-eternity-rings .shopify-section--featured-text .container.featured-text {
max-width: 720px !important;
margin: 0 auto !important;
padding: 0 24px !important;
}
/* Editorial title — left-aligned, with a small ornament */
body.page-eternity-rings .shopify-section--featured-text .title-wrapper,
body.page-eternity-rings .shopify-section--featured-text h2.title {
text-align: left !important;
margin: 0 0 12px !important;
}
body.page-eternity-rings .shopify-section--featured-text h2.title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: clamp(28px, 3.6vw, 40px) !important;
font-weight: 300 !important;
font-style: italic !important;
letter-spacing: -0.008em !important;
color: #1A1A2E !important;
line-height: 1.05 !important;
text-transform: none !important;
}
body.page-eternity-rings .shopify-section--featured-text h2.title::before {
content: '— ';
color: #B8973A;
font-style: normal;
}
/* Hide the centred feature-divider that follows the title */
body.page-eternity-rings .shopify-section--featured-text .feature-divider {
display: none !important;
}
/* Body text — the essay itself */
body.page-eternity-rings .shopify-section--featured-text .featured-text-content,
body.page-eternity-rings .shopify-section--featured-text .rte {
text-align: left !important;
margin-top: 24px;
}
body.page-eternity-rings .shopify-section--featured-text .featured-text-content p,
body.page-eternity-rings .shopify-section--featured-text .rte p {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 17.5px !important;
line-height: 1.78 !important;
letter-spacing: -0.001em !important;
color: rgba(26, 26, 46, 0.88) !important;
margin-bottom: 1.1em !important;
text-align: left !important;
}
/* Drop cap on first paragraph */
body.page-eternity-rings .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-eternity-rings .shopify-section--featured-text .rte > p:first-child::first-letter {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 4.4em;
float: left;
line-height: 0.82;
font-weight: 300;
color: #1A1A2E;
margin: 0.06em 0.1em -0.04em 0;
font-feature-settings: 'lnum';
}
/* Strong text in the essay */
body.page-eternity-rings .shopify-section--featured-text strong {
color: #1A1A2E !important;
font-weight: 500 !important;
}
/* Inline links in the essay — gold underline that grows on hover */
body.page-eternity-rings .shopify-section--featured-text a {
color: #1A1A2E !important;
text-decoration: none !important;
background-image: linear-gradient(90deg, #B8973A, #B8973A);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size 0.3s ease, color 0.2s ease;
padding-bottom: 1px;
}
body.page-eternity-rings .shopify-section--featured-text a:hover {
color: #B8973A !important;
}
/* End-of-essay ornament — three dots centered after the last paragraph */
body.page-eternity-rings .shopify-section--featured-text .featured-text-content::after,
body.page-eternity-rings .shopify-section--featured-text .rte::after {
content: '· · ·';
display: block;
text-align: center;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 24px;
letter-spacing: 0.4em;
color: rgba(184, 151, 58, 0.6);
margin: 32px 0 0;
}
/* Mobile tightening */
@media (max-width: 640px) {
body.page-eternity-rings .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-eternity-rings .shopify-section--featured-text .rte > p:first-child::first-letter {
font-size: 3.4em;
}
body.page-eternity-rings .shopify-section--featured-text .featured-text-content p,
body.page-eternity-rings .shopify-section--featured-text .rte p {
font-size: 16px !important;
line-height: 1.7 !important;
}
}
/* ═══════════════════════════════════════════════════════════════ */
/* Bespoke category pages — Rings / Earrings / Pendants / */
/* Tennis Bracelets / Bracelets */
/* */
/* Same editorial pattern as eternity-rings: products grid up top, */
/* long-form essay below as supporting reading. No "THE COLLECTION" */
/* eyebrow here — the section title alone (the category name) is */
/* enough context with no risk of repetition since each page has */
/* its own single collection. */
/* ═══════════════════════════════════════════════════════════════ */
/* ──── Page-title header — breathing room + editorial h1 ──── */
/* These pages have no hero image, so the page-title section serves */
/* double duty: it gives the menu room to breathe before the grid, */
/* and surfaces a proper h1 (page.title) for SEO/AX. */
/* The custom-liquid section wraps content in .one-whole.column which */
/* the theme styles as a left-aligned grid item — we force display */
/* back to block + text-align center at every level so nothing in the */
/* parent cascade can pull text to the left. */
.hgbj-cat-header-wrap,
.hgbj-cat-header-wrap > section.section,
.hgbj-cat-header-wrap .container,
.hgbj-cat-header-wrap .one-whole.column {
display: block !important;
text-align: center !important;
float: none !important;
width: 100% !important;
max-width: none;
}
.hgbj-cat-header,
.hgbj-cat-header * {
text-align: center !important;
}
.hgbj-cat-header {
display: block !important;
padding: clamp(56px, 6vw, 96px) 24px clamp(20px, 2.5vw, 36px) !important;
max-width: 920px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
box-sizing: border-box;
}
.hgbj-cat-header__eyebrow,
.hgbj-cat-header__title {
display: block !important;
text-align: center !important;
width: 100% !important;
}
.hgbj-cat-header__eyebrow {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
/* m1 (audit fix): was #B8973A on cream — 3.4:1 fails WCAG AA.
Navy gives 17:1 (passes AAA) and reads as a quieter eyebrow. */
color: #1A1A2E;
font-weight: 500;
margin: 0 0 20px;
opacity: 0;
transform: translateY(8px);
animation: hgbjCatHeaderReveal 0.7s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hgbj-cat-header__title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(40px, 5.6vw, 64px);
font-weight: 300;
letter-spacing: -0.012em;
color: #1A1A2E;
margin: 0 0 24px;
line-height: 1.02;
opacity: 0;
transform: translateY(8px);
animation: hgbjCatHeaderReveal 0.7s 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hgbj-cat-header__rule {
display: block;
width: 64px;
height: 1px;
background: linear-gradient(90deg, transparent, #B8973A 30%, #B8973A 70%, transparent);
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0;
margin-bottom: 0;
opacity: 0;
transform: scaleX(0.4);
transform-origin: center;
animation: hgbjCatRuleReveal 0.9s 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes hgbjCatHeaderReveal {
to { opacity: 1; transform: translateY(0); }
}
@keyframes hgbjCatRuleReveal {
to { opacity: 1; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.hgbj-cat-header__eyebrow,
.hgbj-cat-header__title,
.hgbj-cat-header__rule {
animation-duration: 0.01ms !important;
animation-delay: 0.01ms !important;
}
}
/* ──── Featured-collection (products grid) ──── */
/* Reduced top padding now that the header above provides the */
/* breathing room — keeps the gap between header and grid tight. */
body.page-rings .shopify-section--featured-collection > section.section,
body.page-earrings .shopify-section--featured-collection > section.section,
body.page-pendants .shopify-section--featured-collection > section.section,
body.page-tennis-bracelets .shopify-section--featured-collection > section.section,
body.page-bracelets .shopify-section--featured-collection > section.section {
padding-top: clamp(24px, 3vw, 40px) !important;
padding-bottom: clamp(48px, 5vw, 72px) !important;
}
/* Hide the featured-collection's own title block since the page header
above (e.g. "Bespoke Rings") already names the page. The grid speaks
for itself — no need for a redundant "— Rings" label below the h1.
featured-collection.liquid wraps h2.title inside an anchor, so we also
hide the parent anchor to remove the empty link box. */
body.page-rings .shopify-section--featured-collection h2.title,
body.page-rings .shopify-section--featured-collection a:has(> h2.title),
body.page-rings .shopify-section--featured-collection .feature-divider,
body.page-earrings .shopify-section--featured-collection h2.title,
body.page-earrings .shopify-section--featured-collection a:has(> h2.title),
body.page-earrings .shopify-section--featured-collection .feature-divider,
body.page-pendants .shopify-section--featured-collection h2.title,
body.page-pendants .shopify-section--featured-collection a:has(> h2.title),
body.page-pendants .shopify-section--featured-collection .feature-divider,
body.page-tennis-bracelets .shopify-section--featured-collection h2.title,
body.page-tennis-bracelets .shopify-section--featured-collection a:has(> h2.title),
body.page-tennis-bracelets .shopify-section--featured-collection .feature-divider,
body.page-bracelets .shopify-section--featured-collection h2.title,
body.page-bracelets .shopify-section--featured-collection a:has(> h2.title),
body.page-bracelets .shopify-section--featured-collection .feature-divider {
display: none !important;
}
/* Hide the entire featured-collection when its only contents are
Shopify's onboarding placeholder products. featured-collection.liquid
renders .placeholder-image / .placeholder-svg when collection==blank
(i.e. the handle doesn't match a real Shopify collection, or the
collection has no products yet). Show a quiet "coming soon" instead. */
body.page-rings .shopify-section--featured-collection:has(.placeholder-image),
body.page-rings .shopify-section--featured-collection:has(.placeholder-svg),
body.page-earrings .shopify-section--featured-collection:has(.placeholder-image),
body.page-earrings .shopify-section--featured-collection:has(.placeholder-svg),
body.page-pendants .shopify-section--featured-collection:has(.placeholder-image),
body.page-pendants .shopify-section--featured-collection:has(.placeholder-svg),
body.page-tennis-bracelets .shopify-section--featured-collection:has(.placeholder-image),
body.page-tennis-bracelets .shopify-section--featured-collection:has(.placeholder-svg),
body.page-bracelets .shopify-section--featured-collection:has(.placeholder-image),
body.page-bracelets .shopify-section--featured-collection:has(.placeholder-svg) {
display: none !important;
}
/* Editorial title — italic Cormorant Garamond with gold em-dash */
body.page-rings .shopify-section--featured-collection h2.title,
body.page-earrings .shopify-section--featured-collection h2.title,
body.page-pendants .shopify-section--featured-collection h2.title,
body.page-tennis-bracelets .shopify-section--featured-collection h2.title,
body.page-bracelets .shopify-section--featured-collection h2.title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: clamp(30px, 4vw, 44px) !important;
font-weight: 300 !important;
font-style: italic !important;
letter-spacing: -0.008em !important;
color: #1A1A2E !important;
margin: 0 0 16px !important;
line-height: 1.04 !important;
text-transform: none !important;
}
body.page-rings .shopify-section--featured-collection h2.title::before,
body.page-earrings .shopify-section--featured-collection h2.title::before,
body.page-pendants .shopify-section--featured-collection h2.title::before,
body.page-tennis-bracelets .shopify-section--featured-collection h2.title::before,
body.page-bracelets .shopify-section--featured-collection h2.title::before {
content: '— ';
color: #B8973A;
font-style: normal;
}
/* Refined hairline rule under the title */
body.page-rings .shopify-section--featured-collection .feature-divider,
body.page-earrings .shopify-section--featured-collection .feature-divider,
body.page-pendants .shopify-section--featured-collection .feature-divider,
body.page-tennis-bracelets .shopify-section--featured-collection .feature-divider,
body.page-bracelets .shopify-section--featured-collection .feature-divider {
width: 56px !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, #B8973A 30%, #B8973A 70%, transparent) !important;
border: 0 !important;
margin: 0 auto 28px !important;
}
/* Product card refinements + hover lift */
body.page-rings .shopify-section--featured-collection .product-list,
body.page-earrings .shopify-section--featured-collection .product-list,
body.page-pendants .shopify-section--featured-collection .product-list,
body.page-tennis-bracelets .shopify-section--featured-collection .product-list,
body.page-bracelets .shopify-section--featured-collection .product-list {
gap: 28px !important;
}
body.page-rings .shopify-section--featured-collection .product-list .column,
body.page-earrings .shopify-section--featured-collection .product-list .column,
body.page-pendants .shopify-section--featured-collection .product-list .column,
body.page-tennis-bracelets .shopify-section--featured-collection .product-list .column,
body.page-bracelets .shopify-section--featured-collection .product-list .column {
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
body.page-rings .shopify-section--featured-collection .product-list .column:hover,
body.page-earrings .shopify-section--featured-collection .product-list .column:hover,
body.page-pendants .shopify-section--featured-collection .product-list .column:hover,
body.page-tennis-bracelets .shopify-section--featured-collection .product-list .column:hover,
body.page-bracelets .shopify-section--featured-collection .product-list .column:hover {
transform: translateY(-3px);
}
body.page-rings .shopify-section--featured-collection .product-details .title,
body.page-earrings .shopify-section--featured-collection .product-details .title,
body.page-pendants .shopify-section--featured-collection .product-details .title,
body.page-tennis-bracelets .shopify-section--featured-collection .product-details .title,
body.page-bracelets .shopify-section--featured-collection .product-details .title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
font-size: 17px !important;
line-height: 1.25 !important;
margin-top: 16px !important;
}
/* ──── The editorial essay (long SEO copy below the grid) ──── */
body.page-rings .shopify-section--featured-text,
body.page-earrings .shopify-section--featured-text,
body.page-pendants .shopify-section--featured-text,
body.page-tennis-bracelets .shopify-section--featured-text,
body.page-bracelets .shopify-section--featured-text {
background:
linear-gradient(180deg, transparent 0%, rgba(184, 151, 58, 0.025) 60%, transparent 100%);
}
body.page-rings .shopify-section--featured-text > section.section,
body.page-earrings .shopify-section--featured-text > section.section,
body.page-pendants .shopify-section--featured-text > section.section,
body.page-tennis-bracelets .shopify-section--featured-text > section.section,
body.page-bracelets .shopify-section--featured-text > section.section {
padding-top: clamp(56px, 6vw, 96px) !important;
padding-bottom: clamp(56px, 6vw, 96px) !important;
}
/* Hairline gold drop above the essay title — visual transition */
body.page-rings .shopify-section--featured-text > section.section::before,
body.page-earrings .shopify-section--featured-text > section.section::before,
body.page-pendants .shopify-section--featured-text > section.section::before,
body.page-tennis-bracelets .shopify-section--featured-text > section.section::before,
body.page-bracelets .shopify-section--featured-text > section.section::before {
content: '';
display: block;
width: 1px;
height: 64px;
background: linear-gradient(180deg, transparent, #B8973A);
margin: -32px auto 36px;
position: relative;
top: -16px;
}
/* Constrain to a readable column */
body.page-rings .shopify-section--featured-text .featured-text,
body.page-rings .shopify-section--featured-text .container.featured-text,
body.page-earrings .shopify-section--featured-text .featured-text,
body.page-earrings .shopify-section--featured-text .container.featured-text,
body.page-pendants .shopify-section--featured-text .featured-text,
body.page-pendants .shopify-section--featured-text .container.featured-text,
body.page-tennis-bracelets .shopify-section--featured-text .featured-text,
body.page-tennis-bracelets .shopify-section--featured-text .container.featured-text,
body.page-bracelets .shopify-section--featured-text .featured-text,
body.page-bracelets .shopify-section--featured-text .container.featured-text {
max-width: 720px !important;
margin: 0 auto !important;
padding: 0 24px !important;
}
/* Editorial title — italic, left-aligned, gold em-dash prefix */
body.page-rings .shopify-section--featured-text .title-wrapper,
body.page-rings .shopify-section--featured-text h2.title,
body.page-earrings .shopify-section--featured-text .title-wrapper,
body.page-earrings .shopify-section--featured-text h2.title,
body.page-pendants .shopify-section--featured-text .title-wrapper,
body.page-pendants .shopify-section--featured-text h2.title,
body.page-tennis-bracelets .shopify-section--featured-text .title-wrapper,
body.page-tennis-bracelets .shopify-section--featured-text h2.title,
body.page-bracelets .shopify-section--featured-text .title-wrapper,
body.page-bracelets .shopify-section--featured-text h2.title {
text-align: left !important;
margin: 0 0 12px !important;
}
body.page-rings .shopify-section--featured-text h2.title,
body.page-earrings .shopify-section--featured-text h2.title,
body.page-pendants .shopify-section--featured-text h2.title,
body.page-tennis-bracelets .shopify-section--featured-text h2.title,
body.page-bracelets .shopify-section--featured-text h2.title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: clamp(28px, 3.6vw, 40px) !important;
font-weight: 300 !important;
font-style: italic !important;
letter-spacing: -0.008em !important;
color: #1A1A2E !important;
line-height: 1.05 !important;
text-transform: none !important;
}
body.page-rings .shopify-section--featured-text h2.title::before,
body.page-earrings .shopify-section--featured-text h2.title::before,
body.page-pendants .shopify-section--featured-text h2.title::before,
body.page-tennis-bracelets .shopify-section--featured-text h2.title::before,
body.page-bracelets .shopify-section--featured-text h2.title::before {
content: '— ';
color: #B8973A;
font-style: normal;
}
/* Hide the centred feature-divider that follows the title */
body.page-rings .shopify-section--featured-text .feature-divider,
body.page-earrings .shopify-section--featured-text .feature-divider,
body.page-pendants .shopify-section--featured-text .feature-divider,
body.page-tennis-bracelets .shopify-section--featured-text .feature-divider,
body.page-bracelets .shopify-section--featured-text .feature-divider {
display: none !important;
}
/* Body text — the essay itself */
body.page-rings .shopify-section--featured-text .featured-text-content,
body.page-rings .shopify-section--featured-text .rte,
body.page-earrings .shopify-section--featured-text .featured-text-content,
body.page-earrings .shopify-section--featured-text .rte,
body.page-pendants .shopify-section--featured-text .featured-text-content,
body.page-pendants .shopify-section--featured-text .rte,
body.page-tennis-bracelets .shopify-section--featured-text .featured-text-content,
body.page-tennis-bracelets .shopify-section--featured-text .rte,
body.page-bracelets .shopify-section--featured-text .featured-text-content,
body.page-bracelets .shopify-section--featured-text .rte {
text-align: left !important;
margin-top: 24px;
}
body.page-rings .shopify-section--featured-text .featured-text-content p,
body.page-rings .shopify-section--featured-text .rte p,
body.page-earrings .shopify-section--featured-text .featured-text-content p,
body.page-earrings .shopify-section--featured-text .rte p,
body.page-pendants .shopify-section--featured-text .featured-text-content p,
body.page-pendants .shopify-section--featured-text .rte p,
body.page-tennis-bracelets .shopify-section--featured-text .featured-text-content p,
body.page-tennis-bracelets .shopify-section--featured-text .rte p,
body.page-bracelets .shopify-section--featured-text .featured-text-content p,
body.page-bracelets .shopify-section--featured-text .rte p {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 17.5px !important;
line-height: 1.78 !important;
letter-spacing: -0.001em !important;
color: rgba(26, 26, 46, 0.88) !important;
margin-bottom: 1.1em !important;
text-align: left !important;
}
/* Drop cap on first paragraph */
body.page-rings .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-rings .shopify-section--featured-text .rte > p:first-child::first-letter,
body.page-earrings .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-earrings .shopify-section--featured-text .rte > p:first-child::first-letter,
body.page-pendants .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-pendants .shopify-section--featured-text .rte > p:first-child::first-letter,
body.page-tennis-bracelets .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-tennis-bracelets .shopify-section--featured-text .rte > p:first-child::first-letter,
body.page-bracelets .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-bracelets .shopify-section--featured-text .rte > p:first-child::first-letter {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 4.4em;
float: left;
line-height: 0.82;
font-weight: 300;
color: #1A1A2E;
margin: 0.06em 0.1em -0.04em 0;
font-feature-settings: 'lnum';
}
/* Strong text */
body.page-rings .shopify-section--featured-text strong,
body.page-earrings .shopify-section--featured-text strong,
body.page-pendants .shopify-section--featured-text strong,
body.page-tennis-bracelets .shopify-section--featured-text strong,
body.page-bracelets .shopify-section--featured-text strong {
color: #1A1A2E !important;
font-weight: 500 !important;
}
/* Inline links — gold underline */
body.page-rings .shopify-section--featured-text a,
body.page-earrings .shopify-section--featured-text a,
body.page-pendants .shopify-section--featured-text a,
body.page-tennis-bracelets .shopify-section--featured-text a,
body.page-bracelets .shopify-section--featured-text a {
color: #1A1A2E !important;
text-decoration: none !important;
background-image: linear-gradient(90deg, #B8973A, #B8973A);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size 0.3s ease, color 0.2s ease;
padding-bottom: 1px;
}
body.page-rings .shopify-section--featured-text a:hover,
body.page-earrings .shopify-section--featured-text a:hover,
body.page-pendants .shopify-section--featured-text a:hover,
body.page-tennis-bracelets .shopify-section--featured-text a:hover,
body.page-bracelets .shopify-section--featured-text a:hover {
color: #B8973A !important;
}
/* End-of-essay ornament */
body.page-rings .shopify-section--featured-text .featured-text-content::after,
body.page-rings .shopify-section--featured-text .rte::after,
body.page-earrings .shopify-section--featured-text .featured-text-content::after,
body.page-earrings .shopify-section--featured-text .rte::after,
body.page-pendants .shopify-section--featured-text .featured-text-content::after,
body.page-pendants .shopify-section--featured-text .rte::after,
body.page-tennis-bracelets .shopify-section--featured-text .featured-text-content::after,
body.page-tennis-bracelets .shopify-section--featured-text .rte::after,
body.page-bracelets .shopify-section--featured-text .featured-text-content::after,
body.page-bracelets .shopify-section--featured-text .rte::after {
content: '· · ·';
display: block;
text-align: center;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 24px;
letter-spacing: 0.4em;
color: rgba(184, 151, 58, 0.6);
margin: 32px 0 0;
}
/* Mobile tightening */
@media (max-width: 640px) {
body.page-rings .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-rings .shopify-section--featured-text .rte > p:first-child::first-letter,
body.page-earrings .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-earrings .shopify-section--featured-text .rte > p:first-child::first-letter,
body.page-pendants .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-pendants .shopify-section--featured-text .rte > p:first-child::first-letter,
body.page-tennis-bracelets .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-tennis-bracelets .shopify-section--featured-text .rte > p:first-child::first-letter,
body.page-bracelets .shopify-section--featured-text .featured-text-content > p:first-child::first-letter,
body.page-bracelets .shopify-section--featured-text .rte > p:first-child::first-letter {
font-size: 3.4em;
}
body.page-rings .shopify-section--featured-text .featured-text-content p,
body.page-rings .shopify-section--featured-text .rte p,
body.page-earrings .shopify-section--featured-text .featured-text-content p,
body.page-earrings .shopify-section--featured-text .rte p,
body.page-pendants .shopify-section--featured-text .featured-text-content p,
body.page-pendants .shopify-section--featured-text .rte p,
body.page-tennis-bracelets .shopify-section--featured-text .featured-text-content p,
body.page-tennis-bracelets .shopify-section--featured-text .rte p,
body.page-bracelets .shopify-section--featured-text .featured-text-content p,
body.page-bracelets .shopify-section--featured-text .rte p {
font-size: 16px !important;
line-height: 1.7 !important;
}
}
.hgbj-enquiry__row--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.hgbj-enquiry__field {
display: flex;
flex-direction: column;
gap: 7px;
}
.hgbj-enquiry__label {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(26, 26, 46, 0.7);
font-weight: 500;
}
.hgbj-enquiry__optional {
text-transform: none;
letter-spacing: 0;
color: rgba(26, 26, 46, 0.4);
font-style: italic;
font-weight: 400;
}
.hgbj-enquiry__field input,
.hgbj-enquiry__field textarea {
width: 100%;
padding: 11px 0 9px;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(26, 26, 46, 0.18);
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 17px;
color: #1A1A2E;
letter-spacing: -0.002em;
transition: border-color 0.25s ease;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
.hgbj-enquiry__field input:focus,
.hgbj-enquiry__field textarea:focus {
outline: 0;
border-bottom-color: #1A1A2E;
}
.hgbj-enquiry__field--message textarea {
border: 1px solid rgba(26, 26, 46, 0.16);
padding: 14px 14px 16px;
background: rgba(255, 255, 255, 0.6);
resize: vertical;
min-height: 200px;
font-size: 15px;
line-height: 1.55;
}
.hgbj-enquiry__field--message textarea:focus {
border-color: #1A1A2E;
background: #fff;
}
.hgbj-enquiry__hint {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 13px;
color: rgba(26, 26, 46, 0.55);
margin: 6px 0 0;
}
.hgbj-enquiry__submit {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 17px 24px;
margin-top: 14px;
background: #1A1A2E;
color: #F9F7F4;
border: 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
position: relative;
overflow: hidden;
transition: background 0.25s ease, color 0.25s ease;
}
.hgbj-enquiry__submit::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(184, 151, 58, 0.4), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.hgbj-enquiry__submit:hover { background: #2a2a47; }
.hgbj-enquiry__submit:hover::before { transform: translateX(100%); }
.hgbj-enquiry__submit-text { position: relative; z-index: 1; }
.hgbj-enquiry__submit-arrow {
position: relative;
z-index: 1;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 22px;
font-weight: 300;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hgbj-enquiry__submit:hover .hgbj-enquiry__submit-arrow { transform: translateX(4px); }
.hgbj-enquiry__alt {
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid rgba(26, 26, 46, 0.1);
opacity: 0;
transform: translateY(10px);
animation: hgbjEnquiryReveal 0.6s 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hgbj-enquiry__alt-label {
text-align: center;
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 14px;
color: rgba(26, 26, 46, 0.5);
margin: 0 0 16px;
}
.hgbj-enquiry__alt-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.hgbj-enquiry__alt-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 12px;
text-decoration: none;
color: #1A1A2E;
border: 1px solid rgba(26, 26, 46, 0.12);
background: rgba(255, 255, 255, 0.4);
transition: all 0.25s ease;
text-align: center;
}
.hgbj-enquiry__alt-link:hover {
border-color: #1A1A2E;
background: #fff;
transform: translateY(-1px);
text-decoration: none;
}
.hgbj-enquiry__alt-eyebrow {
font-family: 'Inter', system-ui, sans-serif;
font-size: 9.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(26, 26, 46, 0.55);
font-weight: 500;
}
.hgbj-enquiry__alt-value {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 16px;
color: #1A1A2E;
}
/* Success state */
.hgbj-enquiry__state--success {
align-items: center;
text-align: center;
justify-content: center;
padding: 80px 44px 44px;
}
.hgbj-enquiry__success-mark {
color: #B8973A;
margin: 0 auto 28px;
opacity: 0;
animation: hgbjEnquiryReveal 0.6s 0.1s ease forwards;
}
.hgbj-enquiry__success-ring {
animation: hgbjRingDraw 1.1s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hgbj-enquiry__success-tick {
animation: hgbjTickDraw 0.55s 0.65s cubic-bezier(0.5, 0, 0.2, 1) both;
}
.hgbj-enquiry__success-eyebrow {
margin-bottom: 14px;
opacity: 0;
animation: hgbjEnquiryReveal 0.5s 0.35s ease forwards;
}
.hgbj-enquiry__success-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(38px, 5vw, 48px);
font-weight: 300;
color: #1A1A2E;
margin: 0;
letter-spacing: -0.008em;
line-height: 1;
opacity: 0;
animation: hgbjEnquiryReveal 0.6s 0.5s ease forwards;
}
.hgbj-enquiry__success-text {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 17px;
line-height: 1.55;
color: rgba(26, 26, 46, 0.78);
max-width: 380px;
margin: 24px 0 36px;
opacity: 0;
animation: hgbjEnquiryReveal 0.6s 0.7s ease forwards;
}
.hgbj-enquiry__success-close {
background: transparent;
border: 1px solid rgba(26, 26, 46, 0.25);
color: #1A1A2E;
padding: 14px 36px;
font-family: 'Inter', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s ease;
opacity: 0;
animation: hgbjEnquiryReveal 0.6s 0.85s ease forwards;
}
.hgbj-enquiry__success-close:hover {
background: #1A1A2E;
color: #F9F7F4;
border-color: #1A1A2E;
}
@keyframes hgbjEnquiryReveal {
to { opacity: 1; transform: translateY(0); }
}
@keyframes hgbjRingDraw {
from { stroke-dashoffset: 163.4; }
to { stroke-dashoffset: 0; }
}
@keyframes hgbjTickDraw {
from { stroke-dashoffset: 34; }
to { stroke-dashoffset: 0; }
}
/* Mobile — full bleed, tighter padding */
@media (max-width: 640px) {
.hgbj-enquiry__panel { max-width: 100%; box-shadow: none; }
.hgbj-enquiry__state { padding: 64px 22px 28px; }
.hgbj-enquiry__state--success { padding: 80px 22px 28px; }
.hgbj-enquiry__row--split { grid-template-columns: 1fr; }
.hgbj-enquiry__alt-row { grid-template-columns: 1fr; }
.hgbj-enquiry__title { font-size: 28px; }
.hgbj-enquiry__close { top: 16px; right: 16px; }
}
/* Reduced motion — strip the slide and stagger animations */
@media (prefers-reduced-motion: reduce) {
.hgbj-enquiry__panel,
.hgbj-enquiry__backdrop,
.hgbj-enquiry__header,
.hgbj-enquiry__piece,
.hgbj-enquiry__form,
.hgbj-enquiry__alt,
.hgbj-enquiry__success-mark,
.hgbj-enquiry__success-eyebrow,
.hgbj-enquiry__success-title,
.hgbj-enquiry__success-text,
.hgbj-enquiry__success-close,
.hgbj-enquiry__success-ring,
.hgbj-enquiry__success-tick {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-delay: 0.01ms !important;
}
}
/* Primary content sections — most common across page templates. */
.shopify-section--rich-text-and-image > section.section,
.shopify-section--text-columns-with-images > section.section,
.shopify-section--image-with-text > section.section,
.shopify-section--featured-text > section.section,
.shopify-section--consultation-cta > section.section {
padding-top: clamp(40px, 4.5vw, 64px) !important;
padding-bottom: clamp(40px, 4.5vw, 64px) !important;
}
/* Newsletter — slightly tighter */
.shopify-section--newsletter > section.section {
padding-top: clamp(40px, 4.5vw, 56px) !important;
padding-bottom: clamp(40px, 4.5vw, 56px) !important;
}
/* Custom-liquid sections that wrap their own content — only the */
/* outer section pad-control (their inner styles handle internal). */
.shopify-section[class*="custom-liquid"]:not(.shopify-section--header):not(.shopify-section--footer) > section,
.shopify-section[class*="custom-liquid"]:not(.shopify-section--header):not(.shopify-section--footer) > div > section {
/* Don't blanket-override — let each custom-liquid manage itself */
/* through its inline style. We only constrain the outer host. */
}
.shopify-section[class*="custom-liquid"] > section[class*="hgbj-quote-section"],
.shopify-section[class*="custom-liquid"] > section[class*="hgbj-home-faq"] {
/* Already use clamp-based padding, leave alone */
}
/* Divider sections — they sit between already-padded sections so */
/* often double-up the empty space. Tighten significantly. */
.shopify-section--divider > .divider,
.shopify-section--divider > section.divider,
.shopify-section--divider {
padding-top: 4px !important;
padding-bottom: 4px !important;
}
/* Map section + contact form on contact page — close the band */
.shopify-section--map > section,
.shopify-section--map {
padding-top: clamp(32px, 4vw, 56px) !important;
padding-bottom: clamp(32px, 4vw, 56px) !important;
}
/* Mobile: even tighter — already-narrow viewports don't need */
/* the same vertical rhythm */
@media (max-width: 640px) {
.shopify-section--rich-text-and-image > section.section,
.shopify-section--text-columns-with-images > section.section,
.shopify-section--image-with-text > section.section,
.shopify-section--featured-text > section.section,
.shopify-section--consultation-cta > section.section,
.shopify-section--newsletter > section.section {
padding-top: clamp(32px, 7vw, 48px) !important;
padding-bottom: clamp(32px, 7vw, 48px) !important;
}
}
/* cache-bust: 1776964496 */