



/* CustomFonts */



:root{
	--default-color: #4a3535;
    --accent-color:#b99010;
    --accent-color2:#e8ca2c;
    --accent-color3:#b99010;
    --accent-color4:#b99010;

    --family:"Hanken Grotesk";
    --family2:"Hanken Grotesk";

    --button-color1:#da2e29;
	--button-hover-color1:#c71813;
    --button-color2:#c72d29;
	--button-hover-color2:#fc4b46;
    --button-color3:#ff6600;
	--button-hover-color3:#ff8330;
    --button-color4:#ffbc00;
	--button-hover-color4:#ffcc3e;
    --button-color5:#ffffff;
	--button-hover-color5:#ffffff; 

	--link-color:#b99010;
	--link-visited-color:#b99010;
	--link-hover-color:#b99010;
	--link-active-color:#b99010;

	--container-width: 100%;

	--h1-color: #272727;
	--h2-color: #272727;
	--h3-color: #272727;
	--h4-color: #272727;
	--h5-color: #272727;
	--h6-color: #272727;
}
 

@media (min-width:576px) {
	:root{
		--container-width: 576px;
	}
}
@media (min-width:768px) {
	:root{
		--container-width: 768px;
	}
}
@media (min-width:992px) {
	:root{
		--container-width: 992px;
	}
}
@media (min-width:1200px) {
	:root{
		--container-width: 1200px;
	}
}
@media (min-width:1600px) {
	:root{
		--container-width: 1400px;
	}
}
 

/* ============================================================
   GPH STOREFRONT DESIGN LAYER
   Shared tokens + components for Revindex templates and content.

   DEPLOY: paste this entire file into DNNGo ThemePluginPro's
   global Custom CSS area (loads site-wide, survives regeneration).
   Pairs with gph-store.js (paste into the plugin's shared JS area).
   ============================================================ */

:root{
	/* Gold system (matches home page / StyleReferences) */
	--gph-gold: #c99a3e;
	--gph-gold-light: #e7cb82;
	--gph-gold-pale: #f7e8a8;
	--gph-gold-deep: #96762b;
	--gph-gold-border: #8a6a1e;
	--gph-gold-grad: linear-gradient(180deg,#faeeb8 0%,#e8c974 34%,#c99a3e 52%,#f3dd97 100%);
	--gph-gold-text-grad: linear-gradient(100deg,#7a5a17 0%,#c99a3e 14%,#f7e8a8 29%,#e4c069 42%,#b1842a 52%,#f3e19c 67%,#d6ad52 82%,#7a5a17 100%);
	--gph-gold-rule: linear-gradient(90deg,#6e5214,#fff4cf,#c99a3e,#6e5214);

	/* Ink & surfaces */
	--gph-ink: #111111;
	--gph-ink-soft: #3a3a3a;
	--gph-muted: #6c6860;
	--gph-muted-2: #8f8b82;
	--gph-dark: #0b0b0f;
	--gph-dark-2: #17171c;
	--gph-line: #e6e2d8;
	--gph-line-dark: #26262d;
	--gph-cream: #f6f2e7;
	--gph-paper: #ffffff;
	--gph-danger: #b3261e;
	--gph-success: #2e6e3e;

	/* Type */
	--gph-font-heading: "Cormorant Garamond", Georgia, serif;
	--gph-font-body: var(--family, "Hanken Grotesk"), system-ui, sans-serif;

	/* Shape & motion */
	--gph-radius: 3px;
	--gph-radius-lg: 6px;
	--gph-shadow: 0 10px 30px rgba(15,12,4,.10);
	--gph-shadow-lg: 0 18px 50px rgba(15,12,4,.18);
	--gph-ease: cubic-bezier(.22,.61,.36,1);

	/* Sticky offset — gph-store.js keeps this in sync with the real header */
	--gph-header-offset: 90px;
}

/* ---------- Typography helpers ---------- */
.gph-eyebrow{
	display:block;
	color:var(--gph-gold-deep);
	text-transform:uppercase;
	letter-spacing:3px;
	font-family:var(--gph-font-body);
	font-size:13px;
	font-weight:600;
	margin-bottom:14px;
}
.gph-heading{
	font-family:var(--gph-font-heading);
	font-weight:500;
	color:var(--gph-ink);
	line-height:1.08;
}
.gph-heading em{
	font-style:italic;
	color:var(--gph-gold-deep);
}
.gph-rule{
	width:42px;
	height:2px;
	background:var(--gph-gold-rule);
	border:0;
	margin:0 auto 16px;
}
.gph-gold-text{
	background:var(--gph-gold-text-grad);
	background-size:220% auto;
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	-webkit-text-fill-color:transparent;
}

/* ---------- Buttons — flat, editorial, quiet luxury ----------
   No gradients, no shine, no bounce. Charcoal primary with a
   whisper of gold; matte deep gold reserved for rare emphasis. */
.gph-btn,
.gph-btn-gold,
.gph-btn-outline,
.gph-btn-outline-dark,
.gph-btn-dark{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.6em;
	padding:14px 28px;
	border-radius:2px;
	text-decoration:none !important;
	font-family:var(--gph-font-body);
	font-size:12.5px;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	line-height:1;
	cursor:pointer;
	border:1px solid transparent;
	transition:background-color .25s var(--gph-ease), color .25s var(--gph-ease), border-color .25s var(--gph-ease);
	-webkit-appearance:none;
	appearance:none;
}
/* Primary — charcoal, gold awakens on hover */
.gph-btn-gold{
	color:#f4efe3 !important;
	background:#16161a;
	border-color:rgba(201,154,62,.4);
}
.gph-btn-gold:hover{
	color:var(--gph-gold-light) !important;
	background:var(--gph-dark);
	border-color:var(--gph-gold);
}
/* Emphasis — matte deep gold, flat (Buy Now / Checkout) */
.gph-btn-dark{
	color:#171106 !important;
	background:#b3924a;
	border-color:#a3833d;
}
.gph-btn-dark:hover{
	color:#f4efe3 !important;
	background:var(--gph-gold-deep);
	border-color:var(--gph-gold-deep);
}
/* Ghost on light surfaces */
.gph-btn-outline-dark{
	color:var(--gph-ink) !important;
	border-color:rgba(17,17,17,.28);
	background:transparent;
}
.gph-btn-outline-dark:hover{
	color:var(--gph-gold-deep) !important;
	border-color:var(--gph-gold-deep);
}
/* Ghost on dark surfaces */
.gph-btn-outline{
	color:#fff !important;
	border-color:rgba(255,255,255,.45);
	background:transparent;
}
.gph-btn-outline:hover{
	color:var(--gph-gold-light) !important;
	border-color:var(--gph-gold-light);
}
.gph-btn--sm{ padding:9px 16px; font-size:11px; letter-spacing:.14em; }
.gph-btn--block{ display:flex; width:100%; }
.gph-btn[disabled],
.gph-btn-gold[disabled],
.gph-btn-dark[disabled],
.gph-btn.is-busy,
.gph-btn-gold.is-busy,
.gph-btn-dark.is-busy{
	opacity:.55;
	pointer-events:none;
	filter:grayscale(.3);
}

/* ---------- Badges ---------- */
.gph-badge{
	display:inline-block;
	padding:5px 10px;
	font-family:var(--gph-font-body);
	font-size:11px;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	border-radius:var(--gph-radius);
	background:var(--gph-dark);
	color:#fff;
	line-height:1;
}
.gph-badge--gold{ background:var(--gph-gold-deep); color:#f4efe3; }
.gph-badge--sale{ background:var(--gph-dark); color:var(--gph-gold-light); }
.gph-badge--soft{ background:var(--gph-cream); color:var(--gph-gold-deep); }

/* ---------- Product tile — clean, editorial, no box ----------
   No border, no shadow, no lift. The image carries the tile;
   type sits quietly under it, left-aligned. */
.gph-card{
	position:relative;
	display:flex;
	flex-direction:column;
	height:100%;
	background:transparent;
	border:0;
	border-radius:0;
	overflow:visible;
}
.gph-card__media{
	position:relative;
	display:block;
	aspect-ratio:4/3;
	overflow:hidden;
	border-radius:var(--gph-radius);
	/* no backdrop color — product JPGs bring their own backgrounds */
}
.gph-card__media img{
	width:100%;
	height:100%;
	object-fit:contain;   /* never crop the instrument — whole piano on the warm backdrop */
	padding:6%;
	display:block;
	transition:transform .7s var(--gph-ease), opacity .18s ease;
}
.gph-card:hover .gph-card__media img{ transform:scale(1.04); }
/* Second thumbnail crossfades in on hover (replaces the stock timer cycler).
   Opaque background so its letterbox bands (object-fit:contain) fully
   cover the first image instead of letting it peek through. */
.gph-card__media-alt{
	position:absolute;
	inset:0;
	opacity:0;
	background:#fff;
	transition:opacity .5s var(--gph-ease), transform .7s var(--gph-ease);
}
.gph-card:hover .gph-card__media-alt{ opacity:1; }
.gph-card__badges{
	position:absolute;
	top:12px;
	left:12px;
	display:flex;
	flex-direction:column;
	gap:6px;
	z-index:2;
}
.gph-card__body{
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	gap:4px;
	padding:13px 2px 0;
	text-align:left;
}
.gph-card__brand{
	font-size:11px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--gph-muted-2);
}
/* Header row: name left, price right on a shared baseline — keeps short
   names from leaving a hole where a separate price line would sit */
.gph-card__head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:2px 14px;
}
.gph-card__head .gph-card__title{ flex:1 1 auto; }
.gph-card__head .rvdsf-field-price{ flex:none; margin-left:auto; text-align:right; white-space:nowrap; }
.gph-card__title{
	font-family:var(--gph-font-heading);
	font-size:25px;
	font-weight:500;
	line-height:1.2;
	margin:0;
}
.gph-card__title a{
	color:var(--gph-ink) !important;
	text-decoration:none !important;
	transition:color .2s;
}
.gph-card__title a:hover{ color:var(--gph-gold-deep) !important; }
.gph-card__actions{
	margin-top:auto;
	display:flex;
	flex-direction:column;
	gap:8px;
}
/* Finish/variant swatches — mini image chips; click swaps the tile's
   image, price and add-to-cart target (handler in gph-store.js) */
.gph-card__swatches{
	display:flex;
	flex-wrap:wrap;
	gap:7px;
	margin-top:8px;
}
/* When a tile has swatches, the price sits to their right instead of
   beside the name */
.gph-card__swatchrow{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px 14px;
	flex-wrap:wrap;
	margin-top:8px;
}
.gph-card__swatchrow .gph-card__swatches{ margin-top:0; flex:1 1 auto; }
.gph-card__swatchrow .rvdsf-field-price{ flex:none; margin-left:auto; text-align:right; }
.gph-swatch{
	position:relative;
	width:52px;
	height:52px;
	padding:0;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--gph-line);
	border-radius:var(--gph-radius);
	background:#fff;
	overflow:hidden;
	cursor:pointer;
	font-family:var(--gph-font-body);
	font-size:11px;
	font-weight:600;
	color:var(--gph-muted);
	text-decoration:none !important;
	transition:border-color .15s var(--gph-ease), box-shadow .15s var(--gph-ease);
}
.gph-swatch img{ width:100%; height:100%; object-fit:cover; display:block; }
.gph-swatch:hover{ border-color:var(--gph-gold); }
.gph-swatch.is-active{ border-color:var(--gph-gold-deep); box-shadow:0 0 0 1px var(--gph-gold-deep); }
.gph-swatch--more{ background:var(--gph-cream); color:var(--gph-gold-deep) !important; }

/* Action row — the grid dividers between tiles carry the structure,
   so no hairline needed here */
.gph-card__buy{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-top:10px;
}

/* ---------- Price ---------- */
.gph-price{
	font-family:var(--gph-font-body);
	font-size:17px;
	font-weight:700;
	color:var(--gph-ink);
}
.gph-price--was{
	font-size:14px;
	font-weight:400;
	color:var(--gph-muted-2);
	text-decoration:line-through;
	margin-right:8px;
}
.gph-price--save{
	font-size:12.5px;
	font-weight:600;
	color:var(--gph-gold-deep);
}
.gph-price--quote{
	font-size:14px;
	font-weight:600;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--gph-gold-deep);
}

/* ---------- Quantity stepper ---------- */
.gph-qty{
	display:inline-flex;
	align-items:stretch;
	border:1px solid var(--gph-line);
	border-radius:var(--gph-radius);
	overflow:hidden;
	background:#fff;
}
.gph-qty button{
	width:38px;
	border:0;
	background:transparent;
	font-size:18px;
	line-height:1;
	color:var(--gph-ink-soft);
	cursor:pointer;
	transition:background .15s,color .15s;
}
.gph-qty button:hover{ background:var(--gph-cream); color:var(--gph-gold-deep); }
.gph-qty input{
	width:52px;
	border:0 !important;
	border-left:1px solid var(--gph-line) !important;
	border-right:1px solid var(--gph-line) !important;
	text-align:center;
	font-size:15px;
	font-weight:600;
	color:var(--gph-ink);
	background:#fff;
	-moz-appearance:textfield;
	appearance:textfield;
	padding:9px 4px;
}
.gph-qty input::-webkit-outer-spin-button,
.gph-qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ---------- Form controls ---------- */
.gph-select,
.gph-input{
	display:block;
	width:100%;
	padding:11px 14px;
	font-family:var(--gph-font-body);
	font-size:14px;
	color:var(--gph-ink);
	background:#fff;
	border:1px solid var(--gph-line) !important;
	border-radius:var(--gph-radius) !important;
	transition:border-color .2s, box-shadow .2s;
}
.gph-select:focus,
.gph-input:focus{
	outline:0;
	border-color:var(--gph-gold) !important;
	box-shadow:0 0 0 3px rgba(201,154,62,.18);
}
.gph-select{
	-webkit-appearance:none;
	appearance:none;
	padding-right:38px;
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2396762b' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 14px center;
	cursor:pointer;
}

/* ---------- Toast notifications ---------- */
.gph-toast-stack{
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:100000;
	display:flex;
	flex-direction:column;
	gap:10px;
	max-width:min(400px, calc(100vw - 40px));
}
.gph-toast{
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:15px 18px;
	background:var(--gph-dark);
	color:#f2efe6;
	border:1px solid var(--gph-line-dark);
	border-left:3px solid var(--gph-gold);
	border-radius:var(--gph-radius-lg);
	box-shadow:var(--gph-shadow-lg);
	font-family:var(--gph-font-body);
	font-size:14px;
	line-height:1.45;
	animation:gph-toast-in .3s var(--gph-ease);
}
.gph-toast--danger{ border-left-color:var(--gph-danger); }
.gph-toast__icon{ flex:none; width:20px; height:20px; margin-top:1px; color:var(--gph-gold-light); }
.gph-toast--danger .gph-toast__icon{ color:#f2b8b5; }
.gph-toast__msg strong{ color:#fff; font-weight:600; }
.gph-toast__action{
	display:inline-block;
	margin-top:6px;
	color:var(--gph-gold-light) !important;
	font-weight:600;
	text-decoration:none !important;
	border-bottom:1px solid rgba(231,203,130,.45);
}
.gph-toast__action:hover{ color:var(--gph-gold-pale) !important; }
.gph-toast__close{
	flex:none;
	margin-left:auto;
	border:0;
	background:transparent;
	color:#8d8a80;
	font-size:18px;
	line-height:1;
	cursor:pointer;
	padding:0 0 0 6px;
}
.gph-toast__close:hover{ color:#fff; }
@keyframes gph-toast-in{
	from{ opacity:0; transform:translateY(14px); }
	to{ opacity:1; transform:translateY(0); }
}
@media (max-width:575px){
	.gph-toast-stack{ right:12px; left:12px; bottom:12px; max-width:none; }
}

/* ---------- Cart drawer (Bootstrap 5 offcanvas, GPH skin) ---------- */
.gph-cart-drawer.offcanvas{
	width:min(430px, 94vw);
	border-left:1px solid var(--gph-line);
	z-index:100001;
}
.gph-cart-drawer .offcanvas-header{
	padding:20px 24px;
	background:var(--gph-dark);
	color:#fff;
	border-bottom:2px solid var(--gph-gold);
}
.gph-cart-drawer .offcanvas-title{
	font-family:var(--gph-font-heading);
	font-size:24px;
	font-weight:500;
	color:#fff;
}
.gph-cart-drawer .offcanvas-title em{ font-style:italic; color:var(--gph-gold-light); }
.gph-cart-drawer .gph-drawer-close,
.gph-filter-drawer .gph-drawer-close{
	border:0;
	background:transparent;
	color:#b9b5aa;
	font-size:26px;
	line-height:1;
	cursor:pointer;
	transition:color .2s;
}
.gph-cart-drawer .gph-drawer-close:hover,
.gph-filter-drawer .gph-drawer-close:hover{ color:var(--gph-gold-light); }
.gph-cart-drawer .offcanvas-body{
	display:flex;
	flex-direction:column;
	gap:18px;
	padding:24px 24px 0; /* the sticky actions row carries the bottom padding */
}
.gph-drawer-added{
	display:flex;
	gap:14px;
	align-items:center;
	padding:14px;
	border:1px solid var(--gph-line);
	border-radius:var(--gph-radius-lg);
	background:var(--gph-cream);
}
.gph-drawer-added__pic{
	flex:none;
	width:72px;
	height:72px;
	border-radius:var(--gph-radius);
	overflow:hidden;
	background:#fff;
}
.gph-drawer-added__pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.gph-drawer-added__name{
	font-family:var(--gph-font-heading);
	font-size:18px;
	font-weight:500;
	color:var(--gph-ink);
	line-height:1.25;
	margin:0 0 2px;
}
.gph-drawer-added__meta{ font-size:13px; color:var(--gph-muted); }
.gph-drawer-added__check{
	display:flex;
	align-items:center;
	gap:8px;
	color:var(--gph-success);
	font-size:12.5px;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	margin-bottom:6px;
}
.gph-drawer-added__check .gph-toast__icon{ color:var(--gph-success); }
.gph-drawer-summary{ flex:1 1 auto; }
.gph-drawer-summary .rvdsf-cartsummary-container{ font-family:var(--gph-font-body); }
/* View Cart + Checkout — side by side, pinned to the drawer's bottom edge
   (sticky inside the scrolling body), Checkout in the emphasis gold */
.gph-drawer-actions{
	position:sticky;
	bottom:0;
	z-index:2;
	display:flex;
	flex-direction:row;
	gap:10px;
	margin-top:auto;
	padding:14px 0 20px;
	border-top:1px solid var(--gph-line);
	background:#fff;
}
.gph-drawer-actions > a{ flex:1 1 0; }
.gph-drawer-note{
	text-align:center;
	font-size:12.5px;
	color:var(--gph-muted);
	margin:2px 0 0;
}
.gph-drawer-note b{ color:var(--gph-gold-deep); font-weight:600; }

/* ---------- Cart summary (GPH_CartSummary template, lives in the drawer) ---------- */
.gph-cs{ font-family:var(--gph-font-body); }
.gph-cs-empty{
	padding:26px 4px;
	text-align:center;
	font-size:14px;
	color:var(--gph-muted);
}
.gph-cs-items{
	max-height:44vh;
	overflow-y:auto;
	overscroll-behavior:contain;
	scrollbar-width:thin;
	scrollbar-color:#d8d2c2 transparent;
	padding-right:6px;
}
.gph-cs-item{
	display:flex;
	align-items:center;
	gap:13px;
	padding:13px 0;
	border-top:1px solid var(--gph-line);
}
.gph-cs-item:first-child{ border-top:0; padding-top:2px; }
.gph-cs-thumb{
	flex:none;
	width:60px;
	height:60px;
	background:#fff;
	border:1px solid var(--gph-line);
	border-radius:var(--gph-radius);
	overflow:hidden;
}
.gph-cs-thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.gph-cs-info{ flex:1 1 auto; min-width:0; }
.gph-cs-name{
	display:block;
	font-family:var(--gph-font-heading);
	font-size:16.5px;
	font-weight:500;
	line-height:1.25;
	color:var(--gph-ink) !important;
	text-decoration:none !important;
	transition:color .2s var(--gph-ease);
}
.gph-cs-name:hover{ color:var(--gph-gold-deep) !important; }
.gph-cs-variant{ font-size:12.5px; color:var(--gph-muted); margin-top:1px; }
.gph-cs-qty{ font-size:12px; color:var(--gph-muted-2); margin-top:3px; }
.gph-cs-amount{
	flex:none;
	align-self:flex-start;
	margin-top:2px;
	font-size:14px;
	font-weight:700;
	color:var(--gph-ink);
	white-space:nowrap;
}
.gph-cs-subtotal{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	padding:14px 0 4px;
	border-top:1px solid var(--gph-line);
	margin-top:4px;
}
.gph-cs-subtotal__label{
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--gph-muted);
}
.gph-cs-subtotal__amt{ font-size:19px; font-weight:700; color:var(--gph-ink); }
.gph-cs-actions{
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-top:14px;
}
/* The drawer's own sticky View Cart / Checkout row is the single source of
   actions — hide the adopted module template's internal buttons so they
   never double up (outside the drawer the module keeps them) */
.gph-cart-drawer .gph-cs-actions{ display:none; }

/* Skin header layers use very high z-indexes — keep BS5 offcanvas above them */
.offcanvas-backdrop{ z-index:100000; }

/* ---------- Sticky helper ---------- */
.gph-sticky{
	position:sticky;
	top:calc(var(--gph-header-offset, 90px) + 16px);
	align-self:flex-start;
}

/* ---------- Store row: filter sidebar + product list ----------
   Layout-independent: targets any DNNGo row where a Product Filter
   module sits in one column and a Product List in a sibling column,
   whatever the layout or column ratio chosen in the builder. */

/* The skin's overflow:hidden on .dng-main (≤1400px landscape etc.)
   kills position:sticky — clip keeps the h-scroll protection without
   creating a scroll container. */
@media (min-width: 992px){
	.dng-main{ overflow-x: clip !important; overflow-y: visible !important; }

	.dng-row:has(> .dng-column [class*="productfilter-container"]):has(> .dng-column [class*="productlist-container"]) > .dng-column:has([class*="productfilter-container"]){
		flex: 0 0 310px;
		width: 310px;
		max-width: 310px;
	}
	.dng-row:has(> .dng-column [class*="productfilter-container"]):has(> .dng-column [class*="productlist-container"]) > .dng-column:has([class*="productlist-container"]){
		flex: 1 1 0;
		width: auto;
		max-width: 100%;
	}
	/* Sticky sidebar contents, clearing the fixed header, with its own
	   inner scrollbar so long filter lists never force a page scroll */
	.dng-row:has(> .dng-column [class*="productlist-container"]) > .dng-column:has([class*="productfilter-container"]) > .dng-column-inner{
		position: sticky;
		top: calc(var(--gph-header-offset, 90px) + 24px);
		max-height: calc(100vh - var(--gph-header-offset, 90px) - 48px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: #d8d2c2 transparent;
		padding-right: 8px;
	}
	.dng-row:has(> .dng-column [class*="productlist-container"]) > .dng-column:has([class*="productfilter-container"]) > .dng-column-inner::-webkit-scrollbar{ width: 6px; }
	.dng-row:has(> .dng-column [class*="productlist-container"]) > .dng-column:has([class*="productfilter-container"]) > .dng-column-inner::-webkit-scrollbar-thumb{ background: #d8d2c2; border-radius: 3px; }
	.dng-row:has(> .dng-column [class*="productlist-container"]) > .dng-column:has([class*="productfilter-container"]) > .dng-column-inner::-webkit-scrollbar-track{ background: transparent; }
}
/* Below 992px: stack full width, products first. gph-store.js then moves
   the filter column's contents into the slide-in drawer below; this
   stacking is the no-JS fallback. */
@media (max-width: 991.98px){
	.dng-row:has(> .dng-column [class*="productfilter-container"]):has(> .dng-column [class*="productlist-container"]) > .dng-column{
		flex: 0 0 100%;
		max-width: 100%;
	}
	.dng-row:has(> .dng-column [class*="productlist-container"]) > .dng-column:has([class*="productfilter-container"]){ order: 2; }
	.dng-row:has(> .dng-column [class*="productfilter-container"]) > .dng-column:has([class*="productlist-container"]){ order: 1; }
}

/* Sidebar-as-drawer (tablet/mobile) — gph-store.js relocates the filter
   sidebar contents in here below 992px and shows the floating trigger */
.gph-sidebar-drawer.offcanvas{
	width:min(380px, 92vw);
	z-index:100001;
}
.gph-sidebar-drawer .offcanvas-header{
	padding:20px 24px;
	background:var(--gph-dark);
	color:#fff;
	border-bottom:2px solid var(--gph-gold);
}
.gph-sidebar-drawer .offcanvas-title{
	font-family:var(--gph-font-heading);
	font-size:24px;
	font-weight:500;
	color:#fff;
}
.gph-sidebar-drawer .offcanvas-title em{ font-style:italic; color:var(--gph-gold-light); }
.gph-sidebar-drawer .gph-drawer-close{
	border:0;
	background:transparent;
	color:#b9b5aa;
	font-size:26px;
	line-height:1;
	cursor:pointer;
	transition:color .2s;
}
.gph-sidebar-drawer .gph-drawer-close:hover{ color:var(--gph-gold-light); }
.gph-sidebar-drawer .offcanvas-body{ padding:18px 20px 30px; }

.gph-filter-fab{
	position:fixed;
	left:50%;
	transform:translateX(-50%);
	bottom:18px;
	z-index:99999;
	display:inline-flex;
	align-items:center;
	gap:9px;
	padding:13px 26px;
	border-radius:999px;
	background:var(--gph-dark);
	color:var(--gph-gold-light);
	border:1px solid rgba(201,154,62,.55);
	box-shadow:var(--gph-shadow-lg);
	font-family:var(--gph-font-body);
	font-size:12px;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	line-height:1;
	cursor:pointer;
}
.gph-filter-fab svg{ width:14px; height:14px; }
.gph-filter-fab[hidden]{ display:none; }
@media (min-width: 992px){ .gph-filter-fab{ display:none; } }

/* Product grid dims while a soft (AJAX) filter/pagination load is in flight */
.gph-plp-loading{
	opacity:.45;
	pointer-events:none;
	transition:opacity .2s var(--gph-ease);
}

/* ---------- Stock Revindex module.css neutralizer ----------
   Revindex loads its own module.css site-wide, and our templates keep
   the rvdsf-* classes for JS compatibility — so its legacy styles bleed
   in (fixed 320px gallery height, bold 20px names, white text-shadow
   favorite buttons, gray 60px qty inputs...). These overrides mirror
   the stock selectors with the .gph-store root compounded in, so they
   win on specificity regardless of stylesheet load order. */

/* Product detail */
.gph-store.rvdsf-productdetail-container .rvdsf-product-gallery-container{ height:auto; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-gallery-container img{ width:100%; height:auto; max-height:72vh; object-fit:contain; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-gallery-tile-container{ justify-content:flex-start; align-items:stretch; margin:14px 0 0; }
.gph-store.rvdsf-productdetail-container img.rvdsf-product-gallery-tile{ width:100%; height:100%; margin:0; padding:0; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container .rvdsf-btn-addtofavorite,
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container .rvdsf-btn-addtofavorite:hover,
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container .rvdsf-btn-addtofavorite.active,
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container .rvdsf-btn-addtofavorite.active:hover{ border:0; border-radius:0; padding:0; margin:0; font-size:11.5px; text-shadow:none; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container .rvdsf-btn-addtofavorite{ color:var(--gph-muted); }
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container .rvdsf-btn-addtofavorite:hover{ color:var(--gph-gold-deep); }
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container .rvdsf-btn-addtofavorite.active{ color:var(--gph-danger); }
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container div.rvdsf-field-name{ margin:0 0 8px; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container .rvdsf-label-name{ font-size:inherit; font-weight:inherit; }
/* Stock paints .rvdsf-label-savings as a red absolute ribbon (module.css
   ~line 1031) — fully reset it; our .gph-badge inside carries the look */
.gph-store .rvdsf-label-savings,
.gph-store.rvdsf-productdetail-container .rvdsf-label-savings,
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container .rvdsf-label-savings{ float:none; position:static; height:auto; width:auto; min-width:0; padding:0; background-color:transparent; color:inherit; text-align:left; text-transform:none; line-height:inherit; font-size:inherit; right:auto; top:auto; z-index:auto; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container div.rvdsf-field-price{ margin:2px 0 6px; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container .rvdsf-field-price{ font-size:inherit; font-weight:inherit; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-form-container .rvdsf-label-componentname{ font-size:11.5px; font-weight:700; margin:14px 0 8px; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-form-container .rvdsf-field-qty .gph-qty input{ background-color:#fff; width:52px; padding:9px 4px; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-form-container .rvdsf-field-qty select{ background-color:#fff; width:auto; padding:11px 38px 11px 14px; border:1px solid var(--gph-line); }
.gph-store.rvdsf-productdetail-container .rvdsf-product-form-container .rvdsf-field-part input[type="number"]{ background-color:#fff; border:1px solid var(--gph-line); width:auto; max-width:76px; padding:8px; }
.gph-store.rvdsf-productdetail-container .rvdsf-product-info-container div.rvdsf-field-rating{ margin:0; }
.gph-store.rvdsf-productdetail-container div.rvdsf-field-rating span.badge{ background-color:var(--gph-cream); color:var(--gph-gold-deep); font-size:12px; vertical-align:baseline; }
.gph-store.rvdsf-productdetail-container div.rvdsf-field-description-container{ padding-top:0; }
.gph-store.rvdsf-productdetail-container .rvdsf-field-description-container div.tab-content{ margin:0; }
.gph-store.rvdsf-productdetail-container .rvdsf-field-compare{ margin:0; text-align:left; }
.gph-store .rvdsf-productdetail-table th:first-child,
.gph-store .rvdsf-productdetail-table td:first-child{ background-color:transparent; font-weight:normal; width:38%; }
.gph-store.rvdsf-productdetail-container .rvdsf-requiredproduct-container h6{ font-size:11.5px; }
.gph-store.rvdsf-productdetail-container .rvdsf-requiredproduct-container .rvdsf-label-name{ font-size:13.5px; }
.gph-store.rvdsf-productdetail-container .rvdsf-requiredproduct-container .rvdsf-productvariant-name{ font-size:12.5px; }

/* Product list */
.gph-store.rvdsf-productlist-container .rvdsf-btn-addtofavorite,
.gph-store.rvdsf-productlist-container .rvdsf-btn-addtofavorite:hover,
.gph-store.rvdsf-productlist-container .rvdsf-btn-addtofavorite.active,
.gph-store.rvdsf-productlist-container .rvdsf-btn-addtofavorite.active:hover{ border:0; padding:0; margin:0; text-shadow:none; }
.gph-store.rvdsf-productlist-container .rvdsf-btn-addtofavorite{ color:#b9b5aa; }
.gph-store.rvdsf-productlist-container .rvdsf-btn-addtofavorite:hover,
.gph-store.rvdsf-productlist-container .rvdsf-btn-addtofavorite.active{ color:var(--gph-danger); }
.gph-store.rvdsf-productlist-container div.rvdsf-field-name{ margin:0; }
.gph-store.rvdsf-productlist-container .rvdsf-field-name a{ font-size:inherit; font-weight:inherit; }
.gph-store.rvdsf-productlist-container div.rvdsf-field-price{ margin:0; }
.gph-store.rvdsf-productlist-container .rvdsf-field-price{ font-size:inherit; font-weight:inherit; }
.gph-store.rvdsf-productlist-container .rvdsf-field-qty .gph-qty input{ background-color:#fff; width:52px; padding:9px 4px; }
.gph-store.rvdsf-productlist-container .rvdsf-field-qty select{ background-color:#fff; width:auto; padding:11px 38px 11px 14px; border:1px solid var(--gph-line); }

/* Product filter (sidebar module) */
.gph-store.rvdsf-productfilter-container div.rvdsf-field-definition{ margin:0; }
.gph-store.rvdsf-productfilter-container .rvdsf-field-definition label.control-label{ border-bottom:0; width:auto; margin-bottom:0; font-size:inherit; }
.gph-store.rvdsf-productfilter-container .btn-toolbar{ background:transparent; padding:0; margin:0; }

/* ---------- Skeleton shimmer (AJAX loading states) ---------- */
.gph-skeleton{
	position:relative;
	overflow:hidden;
	background:#efece3;
	border-radius:var(--gph-radius);
	color:transparent !important;
	pointer-events:none;
}
.gph-skeleton::after{
	content:"";
	position:absolute;
	inset:0;
	transform:translateX(-100%);
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
	animation:gph-shimmer 1.4s infinite;
}
@keyframes gph-shimmer{ to{ transform:translateX(100%); } }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
	.gph-card, .gph-card__media img, .gph-btn, .gph-btn-gold, .gph-btn-outline,
	.gph-btn-outline-dark, .gph-btn-dark, .gph-toast{
		transition:none !important;
		animation:none !important;
	}
	.gph-skeleton::after{ animation:none; }
}
/* =========================================================
   GPH HEADER  (pairs with skin layout "GPH - Header")
   All selectors are class-level — safe across builder edits.
   ========================================================= */

/* ---------- Utility strip content (dark row) ---------- */
/* Theme CSS force-fills SVGs (a CSS fill rule beats the fill="none"
   attribute) which turned our stroke icons into solid glyphs — keep
   every header icon a true outline */
.gph-hdr-phone svg,
.gph-hdr-addr svg,
.gph-hdr-search svg,
.gph-hdr-cartbtn svg,
.gph-hdr-iconbtn svg{
	fill:none !important;
	stroke:currentColor;
}
/* The theme's .header-list adds light vertical borders + fixed 40px rows —
   flatten both lists so the strip reads as one clean black band */
.gph-hdr-toplist,
.gph-hdr-account{ border:0 !important; height:auto !important; }
.gph-hdr-toplist li,
.gph-hdr-account li{ border:0 !important; height:auto !important; line-height:normal !important; padding:0 !important; }
.gph-hdr-toplist{
	display:flex;
	align-items:center;
	gap:26px;
	margin:0;
	padding:0;
	list-style:none;
	font-family:var(--gph-font-body);
	font-size:12.5px;
	letter-spacing:.02em;
}
.gph-hdr-toplist li{ display:inline-flex; align-items:center; }
.gph-hdr-phone{
	display:inline-flex;
	align-items:center;
	gap:8px;
	color:var(--gph-gold-light) !important;
	text-decoration:none !important;
	font-weight:600;
	letter-spacing:.05em;
	transition:color .2s var(--gph-ease);
}
.gph-hdr-phone svg{ width:14px; height:14px; flex:none; }
.gph-hdr-phone:hover{ color:#fff !important; }
.gph-hdr-tag{ color:rgba(246,242,231,.62); }
/* Showroom address (right side of the dark strip) */
.gph-hdr-toplist--right{ justify-content:flex-end; }
.gph-hdr-addr{
	display:inline-flex;
	align-items:center;
	gap:8px;
	color:rgba(246,242,231,.78) !important;
	text-decoration:none !important;
	letter-spacing:.03em;
	transition:color .2s var(--gph-ease);
}
.gph-hdr-addr svg{ width:14px; height:14px; flex:none; color:var(--gph-gold-light); }
.gph-hdr-addr:hover{ color:var(--gph-gold-light) !important; }
.gph-hdr-account{
	display:flex;
	align-items:center;
	gap:22px;
	margin:0;
	padding:0;
	list-style:none;
}
.gph-hdr-account li{ display:inline-flex; }
.gph-hdr-account a{
	font-family:var(--gph-font-body);
	font-size:11px;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:rgba(246,242,231,.85) !important;
	text-decoration:none !important;
	transition:color .2s var(--gph-ease);
}
.gph-hdr-account a:hover{ color:var(--gph-gold-light) !important; }
@media (max-width:1199px){
	.gph-hdr-tag{ display:none; }
}

/* ---------- Logo sizing (GPH_LogoLine.png in the 92px ivory bar) ----------
   The SIZE driver is the column width: the theme scales the logo to
   max-width:100% of its 420px column, which at the logo's aspect ratio
   lands ~76px tall. The max-height is only a ceiling so the logo never
   touches the edges of the 92px row. */
.header-center-bg .logo img{
	max-height:76px !important;
	width:auto !important;
	object-fit:contain;
}

/* ---------- Header search (static form + adopted Product Search module) ---------- */
/* Let the center column actually flex — without this the search sits in
   a content-sized column and can't use the bar's free width. The builder
   wraps widgets in .dngTextBox which sizes to content, so it must be
   forced wide too or the slot's width:100% resolves against a shrunk box */
.header-center-bg .header-area.area-center{ flex:1 1 auto; min-width:0; }
.header-center-bg .header-area.area-center .header-content-wrap{ width:100%; }
/* width only — the column flexes vertically, so flex-grow here would
   stretch the box to the row's full height and top-pin the search */
.header-center-bg .header-area.area-center .dngTextBox{ width:100%; min-width:0; flex-grow:0; }
/* Narrower search leaves room for the Sign In / Register + Cart cluster */
.gph-hdr-search-slot{ position:relative; width:100%; max-width:620px; margin:0 auto; }

/* Autocomplete results panel (direct-API search on the static box) */
.gph-search-results{
	position:absolute;
	top:calc(100% + 6px);
	left:0;
	right:0;
	z-index:100010;
	background:#fff;
	border:1px solid var(--gph-line);
	border-top:2px solid var(--gph-gold);
	border-radius:7px;
	box-shadow:0 18px 44px rgba(11,11,15,.16);
	max-height:min(430px, 60vh);
	overflow-y:auto;
	overscroll-behavior:contain;
	padding:6px;
	text-align:left;
}
.gph-search-results[hidden]{ display:none; }
.gph-search-result{
	display:flex;
	align-items:center;
	gap:12px;
	padding:8px 10px;
	border-radius:5px;
	text-decoration:none !important;
	color:var(--gph-ink) !important;
	transition:background .15s var(--gph-ease), color .15s var(--gph-ease);
}
.gph-search-result:hover{ background:var(--gph-cream); color:var(--gph-gold-deep) !important; }
.gph-search-result__thumb{ flex:none; width:44px; height:44px; background:#fff; }
.gph-search-result__thumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.gph-search-result__name{ font-family:var(--gph-font-body); font-size:13.5px; line-height:1.4; }
.gph-search-more{
	display:block;
	width:100%;
	border:0;
	border-top:1px solid var(--gph-line);
	background:none;
	padding:11px;
	font-family:var(--gph-font-body);
	font-size:12px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--gph-gold-deep);
	cursor:pointer;
}
.gph-search-more:hover{ text-decoration:underline; }
.gph-hdr-search{
	display:flex;
	align-items:stretch;
	width:100%;
	background:#fff;
	border:1px solid var(--gph-line);
	border-radius:7px;
	overflow:hidden;
	transition:border-color .2s var(--gph-ease), box-shadow .2s var(--gph-ease);
}
.gph-hdr-search:focus-within{
	border-color:var(--gph-gold);
	box-shadow:0 0 0 3px rgba(201,154,62,.14);
}
.gph-hdr-search input,
.gph-hdr-search .k-autocomplete,
.gph-hdr-search .k-autocomplete .k-input{
	flex:1 1 auto;
	min-width:0;
	border:0 !important;
	background:transparent !important;
	box-shadow:none !important;
	padding:10px 16px;
	font-family:var(--gph-font-body);
	font-size:14px;
	color:var(--gph-ink);
	outline:none;
}
.gph-hdr-search .k-autocomplete{ padding:0; display:flex; align-items:center; }
.gph-hdr-search input::placeholder{ color:var(--gph-muted-2); }
.gph-hdr-search button{
	flex:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:48px;
	border:0;
	border-left:1px solid var(--gph-line);
	background:none;
	color:var(--gph-ink);
	cursor:pointer;
	transition:color .2s var(--gph-ease), background .2s var(--gph-ease);
}
.gph-hdr-search button:hover{ color:var(--gph-gold-deep); background:var(--gph-cream); }
.gph-hdr-search button svg{ width:17px; height:17px; }

/* ---------- Account links + cart cluster (ivory middle row) ---------- */
.gph-hdr-actions{ display:flex; align-items:center; gap:20px; white-space:nowrap; }
.gph-hdr-acct{
	font-family:var(--gph-font-body);
	font-size:11px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--gph-ink) !important;
	text-decoration:none !important;
	transition:color .2s var(--gph-ease);
}
.gph-hdr-acct:hover{ color:var(--gph-gold-deep) !important; }
.gph-hdr-actions__sep{ width:1px; height:18px; background:var(--gph-line); }

/* ---------- Cart trigger + badge ---------- */
.gph-hdr-cartbtn{
	position:relative;
	display:inline-flex;
	align-items:center;
	gap:9px;
	background:none;
	border:0;
	padding:8px 4px;
	cursor:pointer;
	font-family:var(--gph-font-body);
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--gph-ink);
	transition:color .2s var(--gph-ease);
}
.gph-hdr-cartbtn:hover{ color:var(--gph-gold-deep); }
.gph-hdr-cartbtn svg{ width:21px; height:21px; flex:none; }
.gph-cart-badge{
	position:absolute;
	top:-1px;
	right:-8px;
	min-width:17px;
	height:17px;
	padding:0 4px;
	border-radius:9px;
	background:var(--gph-gold);
	color:#16161a;
	font-size:10.5px;
	font-weight:700;
	letter-spacing:0;
	line-height:17px;
	text-align:center;
}
.gph-hdr-cartbtn--compact,
.gph-hdr-cartbtn--mobile{ padding:8px 6px; }
.gph-hdr-cartbtn--compact svg,
.gph-hdr-cartbtn--mobile svg{ width:20px; height:20px; }
.gph-hdr-cartbtn--compact .gph-cart-badge,
.gph-hdr-cartbtn--mobile .gph-cart-badge{ right:-4px; }

/* ---------- Sticky-state extras (wordmark + quick actions) ----------
   Hidden at rest; the plugin adds .floating-active to the header
   wrapper when the sticky bar engages. */
.gph-hdr-mark{
	display:none;
	align-items:center;
	color:var(--gph-ink) !important;
	text-decoration:none !important;
	white-space:nowrap;
}
/* !important: the theme's .header-content-wrap img / .logo img rules
   otherwise let the mark render at natural size in the sticky bar */
.gph-hdr-mark img{ height:32px !important; max-height:32px !important; width:auto !important; max-width:none !important; display:block; }
.gph-hdr-quick{ display:none; align-items:center; gap:12px; }
.floating-active .gph-hdr-mark{ display:inline-flex; }
.floating-active .gph-hdr-quick{ display:inline-flex; }
.gph-hdr-iconbtn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border:1px solid var(--gph-line);
	border-radius:50%;
	color:var(--gph-ink) !important;
	background:#fff;
	text-decoration:none !important;
	transition:color .2s var(--gph-ease), border-color .2s var(--gph-ease);
}
.gph-hdr-iconbtn:hover{ color:var(--gph-gold-deep) !important; border-color:var(--gph-gold); }
.gph-hdr-iconbtn svg{ width:15px; height:15px; }

/* ---------- Primary nav: uppercase + gold underline ---------- */
.dng-megamenu .primary_structure > li > a{
	text-transform:uppercase;
	letter-spacing:.15em;
}
.dng-megamenu .primary_structure > li > a > span{
	position:relative;
	padding-bottom:3px;
}
.dng-megamenu .primary_structure > li > a > span::before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:-4px;
	height:2px;
	background:var(--gph-gold);
	transform:scaleX(0);
	transform-origin:left center;
	transition:transform .28s var(--gph-ease);
}
.dng-megamenu .primary_structure > li:hover > a > span::before,
.dng-megamenu .primary_structure > li.menu_hover > a > span::before,
.dng-megamenu .primary_structure > li.current > a > span::before{
	transform:scaleX(1);
}
/* dropdown chevron in gold */
.dng-megamenu .primary_structure > li.dir > a > span:after{
	border-color:var(--gph-gold-deep);
}

/* ---------- Nav row responsive guard ----------
   The nav row's height is fixed in the layout, so a wrapping menu
   spilled out of the bar on narrower desktops. Let the row grow to
   fit its content instead, and step the link metrics down as the
   viewport narrows so wrapping rarely happens at all. */
.header-bottom-bg .header-container-box{ height:auto !important; min-height:50px; }
.floating-nav.floating-active .header-bottom-bg .header-container-box,
.floating-nav.floating-active .header-bottom-bg.header-bg-box{ height:auto !important; min-height:56px; }
.header-bottom-bg .header-area{ height:auto; }
/* The nav row escapes the boxed container: full page width for the menu,
   so links compress (tiers below) instead of wrapping before the mobile
   header takes over. The mega panels keep aligning to #megamenuWidthBox. */
.header-bottom-bg > .container{
	max-width:none !important;
	width:100% !important;
	padding-left:28px;
	padding-right:28px;
}
.dng-megamenu .primary_structure{ display:flex; flex-wrap:nowrap; justify-content:center; }
.dng-megamenu .primary_structure > li{ float:none; }
.dng-megamenu .primary_structure > li > a{ white-space:nowrap; }

@media (max-width:1500px){
	.dng-megamenu .primary_structure > li > a{
		font-size:12px !important;
		letter-spacing:.08em;
		padding-inline-start:12px !important;
		padding-inline-end:12px !important;
	}
}
@media (max-width:1360px){
	.dng-megamenu .primary_structure > li > a{
		font-size:11.5px !important;
		letter-spacing:.05em;
		padding-inline-start:9px !important;
		padding-inline-end:9px !important;
	}
	.dng-megamenu .primary_structure > li.dir > a > span:after{ margin-inline-start:4px; }
}
@media (max-width:1200px){
	.dng-megamenu .primary_structure > li > a{
		font-size:11px !important;
		letter-spacing:.03em;
		padding-inline-start:7px !important;
		padding-inline-end:7px !important;
	}
	/* give the sticky bar's nav the full width back */
	.floating-active .gph-hdr-mark{ display:none; }
}
@media (max-width:1080px){
	.dng-megamenu .primary_structure > li > a{
		font-size:10.5px !important;
		letter-spacing:0;
		padding-inline-start:5px !important;
		padding-inline-end:5px !important;
	}
	.header-bottom-bg > .container{ padding-left:14px; padding-right:14px; }
}

/* ---------- Gold sheen divider between logo bar and nav row ---------- */
.header-bottom-bg{ position:relative; border-top:0 !important; }
.header-bottom-bg::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:2px;
	background:linear-gradient(90deg,#6e5214,#c99a3e,#fff4cf,#c99a3e,#6e5214);
	background-size:200% auto;
	animation:gph-hdr-sheen 7s linear infinite;
	pointer-events:none;
}
@keyframes gph-hdr-sheen{ to{ background-position:-200% center; } }
@media (prefers-reduced-motion: reduce){
	.header-bottom-bg::before{ animation:none; }
}

/* ---------- Dropdown / mega panel chrome ---------- */
.dng-megamenu .dnngo_slide_menu,
.dng-megamenu .dnngo_menu_list,
.dng-megamenu .dnngo_boxslide{
	border:1px solid var(--gph-line);
	border-top:2px solid var(--gph-gold);
	box-shadow:0 18px 44px rgba(11,11,15,.12);
}
.dng-megamenu .dnngo_slide_menu li a{ padding-left:22px; padding-right:22px; }

/* ---------- GPH mega panel content (paste into mega-menu HTML panes) ---------- */
/* The plugin's custom mega menu wraps each pane's HTML control in
   .pane_space (own 20px padding) — trim our panel padding there so it
   doesn't double up, and clear stray paragraph margins */
.dng-megamenu .dnngo_custommenu .menucontent > :last-child{ margin-bottom:0; }
/* The pane's own Edit-dialog padding (20px default) doubles up with the
   panel's — flatten it here so the builder setting doesn't matter */
.dng-megamenu .dnngo_custommenu .pane_space{ padding:0 !important; }
.dng-megamenu .dnngo_custommenu .gph-mm{ padding:26px 30px; }
.dng-megamenu .dnngo_custommenu .gph-mm-brands{ padding:22px 30px; }
.gph-mm{
	display:flex;
	flex-wrap:wrap;
	gap:38px;
	padding:32px 38px;
	text-align:left;
	font-family:var(--gph-font-body);
}
.gph-mm-col{ flex:1 1 150px; min-width:150px; }
.gph-mm-eyebrow{
	display:block;
	font-size:11px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--gph-ink);
	margin:0 0 13px;
	line-height:1.4;
}
/* short gold tick under every panel label so they read as headings */
.gph-mm-eyebrow::after{
	content:"";
	display:block;
	width:22px;
	height:2px;
	margin-top:7px;
	background:var(--gph-gold);
}
.gph-mm-col a{
	display:block;
	padding:5px 0;
	font-size:14px;
	line-height:1.5 !important;
	color:var(--gph-ink-soft) !important;
	text-decoration:none !important;
	transition:color .2s var(--gph-ease), transform .2s var(--gph-ease);
}
.gph-mm-col a:hover{ color:var(--gph-gold-deep) !important; transform:translateX(2px); }
.gph-mm-col a.gph-mm-all{
	margin-top:8px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--gph-gold-deep) !important;
}
.gph-mm-feature{
	flex:0 0 250px;
	border-left:1px solid var(--gph-line);
	padding-left:36px;
}
.gph-mm-feature img{
	width:100% !important;
	height:160px !important;
	max-width:none !important;
	object-fit:contain;
	display:block;
	background:#fff;
}
.gph-mm-fname{
	font-family:var(--gph-font-heading);
	font-size:19px;
	font-weight:500;
	color:var(--gph-ink);
	margin:12px 0 2px;
	line-height:1.25;
}
.gph-mm-fprice{ font-size:13.5px; font-weight:600; color:var(--gph-gold-deep); margin:0 0 8px; }
.gph-mm-feature > a{
	font-size:12px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--gph-ink) !important;
	text-decoration:none !important;
	transition:color .2s var(--gph-ease);
}
.gph-mm-feature > a:hover{ color:var(--gph-gold-deep) !important; }
/* Brands panel: serif name grid */
.gph-mm-brands{
	display:grid;
	grid-template-columns:repeat(4, minmax(150px, 1fr));
	gap:4px 36px;
	padding:30px 38px;
}
.gph-mm-brands a{
	display:block;
	padding:7px 0;
	font-family:var(--gph-font-heading);
	font-size:19px;
	font-weight:500;
	color:var(--gph-ink) !important;
	text-decoration:none !important;
	transition:color .2s var(--gph-ease);
}
.gph-mm-brands a:hover{ color:var(--gph-gold-deep) !important; }

/* ---------- Mega panel live components (hydrated by gph-store.js) ---------- */
/* Second eyebrow within a column (e.g. Type + Condition stacked) */
.gph-mm-eyebrow--gap{ margin-top:18px; }
/* Two-column brand list inside a panel column */
.gph-mm-brandgrid{ display:grid; grid-template-columns:1fr 1fr; column-gap:30px; }
.gph-mm-col--wide{ flex:1.6 1 270px; }

/* Mini product tiles — real catalog products; Featured-flagged sort first */
.gph-mm-tiles{
	flex:2 1 430px;
	display:flex;
	flex-wrap:wrap;
	gap:0 26px;
	align-content:flex-start;
	border-left:1px solid var(--gph-line);
	padding-left:36px;
}
.gph-mm-tiles > .gph-mm-eyebrow{ flex-basis:100%; }
.gph-mm-tile{
	flex:1 1 0;
	min-width:128px;
	max-width:200px;
	display:block;
	text-decoration:none !important;
}
/* The theme's ID-scoped megamenu CSS overrides plain img sizing — pin the
   image with absolute positioning + !important so it always fills its box */
.gph-mm-tile__media{ display:block; position:relative; height:104px; background:#fff; }
.gph-mm-tile__media img{
	position:absolute;
	inset:0;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	max-height:none !important;
	object-fit:contain;
	display:block;
}
.gph-mm-tile__name{
	display:block;
	font-family:var(--gph-font-heading);
	font-size:15.5px;
	font-weight:500;
	color:var(--gph-ink);
	line-height:1.3;
	margin:8px 0 2px;
	transition:color .2s var(--gph-ease);
}
.gph-mm-tile__price{ display:block; font-size:12.5px; font-weight:600; color:var(--gph-gold-deep); }
.gph-mm-tile:hover .gph-mm-tile__name{ color:var(--gph-gold-deep); }

/* Feature zone — a fixed-size wrapper around the panel's resting content
   (hero / tiles / intro). The brand spotlight is an absolute OVERLAY inside
   it, so hovering brands never changes the panel's size (no layout shift).
   The zone carries the hairline + left padding; children lose theirs. */
.gph-mm-zone{ position:relative; border-left:1px solid var(--gph-line); padding-left:36px; min-height:185px; }
.gph-mm-zone--feature{ flex:0 0 286px; }
.gph-mm-zone--tiles{ flex:2 1 430px; }
/* Brands panel: the info zone takes the panel's spare width (the brand
   list column stays compact), so the spotlight has real room */
.gph-mm-zone--intro{ flex:1.2 1 500px; min-height:235px; }
.gph-mm-zone > .gph-mm-feature,
.gph-mm-zone > .gph-mm-tiles,
.gph-mm-zone > .gph-mm-intro{ border-left:0; padding-left:0; flex:none; width:100%; }
.gph-mm-zone > .gph-mm-spot{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:37px; /* clears the zone's hairline */
	border-left:0;
	padding-left:0;
	background:#fff;
	overflow:hidden; /* content is clamped to fit — never an inner scrollbar */
}

/* Brand spotlight — fills on brand-link hover inside a .gph-mm-zone
   (Brands panel only). Lifestyle image left, brand story right.
   Logo: /Portals/0/Images/Brands/<slug>.png (missing -> serif wordmark);
   lifestyle: <slug>-life.jpg (missing -> text takes the full width). */
.gph-mm-spot{ flex:0 0 280px; border-left:1px solid var(--gph-line); padding-left:36px; display:flex; gap:22px; background:#fff; }
/* display:flex above would defeat the hidden attribute — never let it */
.gph-mm-spot[hidden]{ display:none !important; }
.gph-mm-spot__pic{
	position:relative; /* the img pins to this box (theme img rules can't shrink it) */
	flex:0 0 42%;
	max-width:230px;
	border-radius:10px;
	overflow:hidden;
	background:var(--gph-cream);
}
.gph-mm-spot__pic img{
	position:absolute;
	inset:0;
	width:100% !important;
	height:100% !important;
	max-width:none !important;
	max-height:none !important;
	object-fit:cover;
	display:block;
}
.gph-mm-spot__body{ flex:1 1 auto; min-width:0; align-self:center; }
.gph-mm-spot__logo{ display:flex; align-items:center; height:44px; margin-bottom:8px; }
.gph-mm-spot__logo img{ max-height:44px !important; max-width:180px !important; width:auto !important; height:auto !important; object-fit:contain; display:block; }
.gph-mm-spot__wordmark{
	display:none;
	font-family:var(--gph-font-heading);
	font-size:23px;
	font-weight:500;
	color:var(--gph-ink);
	line-height:1.1;
}
.gph-mm-spot__logo.is-textlogo img{ display:none; }
.gph-mm-spot__logo.is-textlogo .gph-mm-spot__wordmark{ display:block; }
.gph-mm-spot__origin{
	display:block;
	font-size:11px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--gph-muted);
	margin:0 0 9px;
}
.gph-mm-spot__blurb{
	font-size:13.5px;
	line-height:1.6;
	color:var(--gph-ink-soft);
	margin:0 0 12px;
	display:-webkit-box;
	-webkit-line-clamp:4; /* long stories trim with an ellipsis — no scrollbar */
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.gph-mm-spot__link{
	font-size:12px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--gph-gold-deep) !important;
	text-decoration:none !important;
	transition:color .2s var(--gph-ease);
}
.gph-mm-spot__link:hover{ color:var(--gph-ink) !important; }

/* Brands panel — serif all-brands grid + editorial intro. The list column
   hugs its content (max-content tracks) so the free width goes to the
   info zone instead of dead space between name columns. */
.gph-mm--brands .gph-mm-col--brandlist{ flex:0 1 auto; }
.gph-mm-brandgrid--serif{ grid-template-columns:repeat(3, minmax(120px, max-content)); gap:2px 40px; }
.gph-mm .gph-mm-brandgrid--serif a{
	font-family:var(--gph-font-heading);
	font-size:18px;
	font-weight:500;
	color:var(--gph-ink) !important;
	padding:6px 0;
}
.gph-mm .gph-mm-brandgrid--serif a:hover{ color:var(--gph-gold-deep) !important; }
.gph-mm-intro{ flex:0 0 300px; border-left:1px solid var(--gph-line); padding-left:36px; }
.gph-mm-intro__title{
	font-family:var(--gph-font-heading);
	font-size:22px;
	font-weight:500;
	color:var(--gph-ink);
	line-height:1.25;
	margin:0 0 8px;
}
.gph-mm-intro p{ font-size:13.5px; line-height:1.65; color:var(--gph-ink-soft); margin:0; }

/* =========================================================
   GPH FOOTER  (pairs with skin layout "GPH - Footer")
   Dark editorial footer bookending the black utility strip.
   ========================================================= */

/* Gold sheen divider on top — mirrors the header's nav divider */
.gph-ftr-main{ position:relative; }
.gph-ftr-main::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:2px;
	background:linear-gradient(90deg,#6e5214,#c99a3e,#fff4cf,#c99a3e,#6e5214);
	background-size:200% auto;
	animation:gph-hdr-sheen 7s linear infinite;
	pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
	.gph-ftr-main::before{ animation:none; }
}

.gph-ftr{
	display:grid;
	grid-template-columns:minmax(280px, 1.5fr) repeat(3, minmax(150px, 1fr));
	gap:40px 56px;
	padding:64px 0 58px;
	font-family:var(--gph-font-body);
	text-align:left;
}
/* Portrait logo left, statement + tagline right — no dead height */
.gph-ftr__brandtop{
	display:flex;
	align-items:center;
	gap:26px;
	margin:0 0 24px;
}
.gph-ftr__logo{ display:inline-block; flex:none; }
.gph-ftr__logo img{ height:128px !important; width:auto !important; max-width:none !important; display:block; }
.gph-ftr__brandinfo{ min-width:0; }
.gph-ftr__statement{
	margin:0 0 12px;
	max-width:44ch;
	font-size:13.5px;
	line-height:1.75;
	color:rgba(246,242,231,.55);
}
.gph-ftr__contact{ margin:0; padding:0; list-style:none; }
.gph-ftr__contact li{ margin:0 0 9px; }
.gph-ftr__contact a{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-size:13.5px;
	color:rgba(246,242,231,.78) !important;
	text-decoration:none !important;
	transition:color .2s var(--gph-ease);
}
.gph-ftr__contact a:hover{ color:var(--gph-gold-light) !important; }
.gph-ftr__contact svg{ width:14px; height:14px; flex:none; fill:none !important; stroke:currentColor; color:var(--gph-gold-light); }
.gph-ftr__tag{ margin:0; font-size:12.5px; color:rgba(246,242,231,.45); }
.gph-ftr__tag b{ color:var(--gph-gold-light); font-weight:600; }

/* Social — hairline circles, brand glyphs are SOLID fills (not strokes) */
.gph-ftr__social{ display:flex; gap:10px; margin:20px 0 0; }
.gph-ftr__social a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	border:1px solid rgba(246,242,231,.22);
	border-radius:50%;
	color:rgba(246,242,231,.72);
	text-decoration:none !important;
	transition:color .2s var(--gph-ease), border-color .2s var(--gph-ease);
}
.gph-ftr__social a:hover{ color:var(--gph-gold-light); border-color:var(--gph-gold); }
.gph-ftr__social svg{ width:15px; height:15px; fill:currentColor !important; stroke:none !important; }

.gph-ftr__title{
	display:block;
	margin:6px 0 16px;
	font-size:11px;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#fff;
}
.gph-ftr__title::after{
	content:"";
	display:block;
	width:22px;
	height:2px;
	margin-top:8px;
	background:var(--gph-gold);
}
.gph-ftr__col a{
	display:block;
	padding:5px 0;
	font-size:14px;
	line-height:1.5;
	color:rgba(246,242,231,.72) !important;
	text-decoration:none !important;
	transition:color .2s var(--gph-ease), transform .2s var(--gph-ease);
}
.gph-ftr__col a:hover{ color:var(--gph-gold-light) !important; transform:translateX(2px); }

/* Search trigger — opens the site-wide dark search overlay (gph-store.js) */
.gph-ftr__searchbtn{
	display:inline-flex;
	align-items:center;
	gap:9px;
	margin-top:14px;
	padding:10px 16px;
	border:1px solid rgba(201,154,62,.45);
	border-radius:2px;
	background:transparent;
	color:var(--gph-gold-light);
	font-family:var(--gph-font-body);
	font-size:11px;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	cursor:pointer;
	transition:color .2s var(--gph-ease), border-color .2s var(--gph-ease);
}
.gph-ftr__searchbtn:hover{ color:#fff; border-color:var(--gph-gold); }
.gph-ftr__searchbtn svg{ width:13px; height:13px; fill:none !important; stroke:currentColor; }

@media (max-width: 991.98px){
	.gph-ftr{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px 32px; padding:48px 0 44px; }
	.gph-ftr__brand{ grid-column:1 / -1; }
}
@media (max-width: 560px){
	.gph-ftr{ grid-template-columns:minmax(0, 1fr); }
	.gph-ftr__brandtop{ flex-direction:column; align-items:flex-start; gap:18px; }
	.gph-ftr__logo img{ height:96px !important; }
	.gph-ftr-legal .text-right{ text-align:left !important; }
}

/* ---------- Search overlay (sticky-bar search + anywhere via
   [data-gph-search-overlay]) ----------
   Dark full-screen veil; the header's live search box (fallback form OR
   adopted Product Search module) is moved in while open, so autocomplete
   keeps working, then moved back on close. */
.gph-search-overlay{
	position:fixed;
	inset:0;
	z-index:100002;
	display:none;
	justify-content:center;
	align-items:flex-start;
	padding:16vh 24px 40px;
	background:rgba(5,5,8,.88);
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
}
.gph-search-overlay.is-open{ display:flex; animation:gph-overlay-in .25s var(--gph-ease); }
@keyframes gph-overlay-in{ from{ opacity:0; } to{ opacity:1; } }
.gph-search-overlay__panel{
	width:min(760px, 100%);
	text-align:center;
}
.gph-search-overlay__title{
	font-family:var(--gph-font-heading);
	font-size:clamp(26px, 3vw, 34px);
	font-weight:500;
	color:#fff;
	margin:0 0 6px;
}
.gph-search-overlay__title em{ font-style:italic; color:var(--gph-gold-light); }
.gph-search-overlay__hint{
	font-family:var(--gph-font-body);
	font-size:13px;
	color:rgba(246,242,231,.55);
	margin:0 0 22px;
}
.gph-search-overlay__body{ text-align:left; position:relative; }
.gph-search-overlay__body .gph-hdr-search{ border-radius:7px; }
.gph-search-overlay__body .gph-hdr-search input,
.gph-search-overlay__body .gph-hdr-search .k-autocomplete .k-input{
	font-size:16.5px;
	padding:15px 20px;
}
.gph-search-overlay__body .gph-hdr-search button{ width:58px; }
.gph-search-overlay__close{
	position:absolute;
	top:26px;
	right:34px;
	border:0;
	background:none;
	color:rgba(246,242,231,.65);
	font-size:34px;
	line-height:1;
	cursor:pointer;
	transition:color .2s var(--gph-ease);
}
.gph-search-overlay__close:hover{ color:var(--gph-gold-light); }
/* Kendo appends its suggestion popup to <body> — lift it above the veil */
.k-animation-container{ z-index:100005 !important; }

/* Kendo autocomplete popup for header search */
.k-animation-container .k-list .k-item{
	font-family:var(--gph-font-body);
	font-size:13.5px;
}
.k-animation-container .k-list .k-item.k-state-focused,
.k-animation-container .k-list .k-item:hover{
	color:var(--gph-gold-deep);
	background:var(--gph-cream);
}

/* ============ END GPH STOREFRONT DESIGN LAYER ============ */



	
:root{
	--headerHeight: calc( var(--header-top-height,0px) + var(--header-center-height,0px) + var(--header-bottom-height,0px) );
	--mobileHeaderHeight: calc( var(--header-mobile-top-height,0px) + var(--header-mobile-height,0px) + var(--header-mobile-bottom-height,0px) );
	--floatingHeaderHeight: calc( var(--floating-header-top-height,0px) + var(--floating-header-center-height,0px) + var(--floating-header-bottom-height,0px) );
}

.dng-main{
	 background-color:#FFFFFF;  	}
.container{
		padding-left:15px;
	padding-right:15px;
		width: var(--container-width);
	max-width: 100%;
}
.is-container{
	max-width:var(--container-width);
}
.container-fluid {
		padding-right:15px;
	padding-left:15px;
		margin-right: auto;
	margin-left: auto;
}   
#dnn_content{
	 padding-top:0px;		 padding-bottom:0px;	}		

@media (min-width:576px) {
	
		}
@media (min-width:768px) {
		}
@media (min-width:992px) {
		}
@media (min-width:1200px) {
		}


	.left-full-column > .full-column-inner{
		margin-inline-start:calc((var(--container-width) - 100vw)/2);
		width:calc(100% + (100vw - var(--container-width))/2);
	}
	.right-full-column > .full-column-inner{
		margin-inline-end:calc((var(--container-width) - 100vw)/2);
		width:calc(100% + (100vw - var(--container-width))/2);
	}
	.full-column > .full-column-inner{
		width:100vw;	
		margin-inline-start:calc((var(--container-width) - 100vw)/2 - 15px);
	}
	.layout-no-plr .full-column > .full-column-inner{
		margin-inline-start:calc((var(--container-width) - 100vw)/2);
	}

	



h1, h2, h3, h4, h5, h6{
	font-family:inherit;
}

h1{
	color:var(--h1-color);
	font-family:"Cormorant Garamond"; 	font-weight:500;
	font-size:2.25rem;
	line-height:1.2;
	letter-spacing:0;
}		
h2{
	color:var(--h2-color);
		font-family:"Cormorant Garamond"; 	font-weight:500;
	font-size:1.75rem;
	line-height:1.3;
	letter-spacing:0;
}		
h3{
	color:var(--h3-color);
		font-family:"Cormorant Garamond"; 	font-weight:500;
	font-size:1.75rem;
	line-height:1.3;
	letter-spacing:0;
}		
h4{
	color:var(--h4-color);
		font-family:"Hanken Grotesk"; 	font-weight:500;
	font-size:1.625rem;
	line-height:1.4;
	letter-spacing:0;
}		
h5{
	color:var(--h5-color);
		font-family:"Hanken Grotesk"; 	font-weight:500;
	font-size:1.375rem;
	line-height:1.4;
	letter-spacing:0;
}		
h6{
	color:var(--h6-color);
		font-family:"Hanken Grotesk"; 	font-weight:500;
	font-size:1.25rem;
	line-height:1.5;
	letter-spacing:0;
}	

#Body .is-inherit-root-text,
#Body .is-inherit-root-text p,
#Body .is-inherit-root-text li,
#Body .is-inherit-root-text div,
#Body .is-inherit-root-text span{
	color: var(--default-color);
}
#Body .is-inherit-root-text h1{
	color:var(--h1-color);
}
#Body .is-inherit-root-text h2{
	color:var(--h2-color);
}
#Body .is-inherit-root-text h3{
	color:var(--h3-color);
}
#Body .is-inherit-root-text h4{
	color:var(--h4-color);
}
#Body .is-inherit-root-text h5{
	color:var(--h5-color);
}
#Body .is-inherit-root-text h6{
	color:var(--h6-color);
}
#Body .is-inherit-root-text a, 
#Body .is-inherit-root-text a:link{
	color:var(--link-color);
}
#Body .is-inherit-root-text a:visited{
	color:var(--link-visited-color);
}
#Body .is-inherit-root-text a:hover{
	color:var(--link-hover-color);
}
#Body .is-inherit-root-text a:active{
	color:var(--link-active-color);
}

 
@media only screen and (min-width: 576px)  {
						}
@media only screen and (min-width: 768px) {	
						}
@media only screen and (min-width: 992px) {	
		h1{
		font-size:3rem;		line-height:1.2;	}
			h2{
		font-size:2.5rem;		line-height:1.4;	}		
			h3{
		font-size:2rem;			}		
				}
@media only screen and (min-width: 1200px) {	
						}

a, 
a:link{
	color: var(--link-color);
}
a:visited{
	color: var(--link-visited-color);
}
a:hover{
	color: var(--link-hover-color);
}
a:active{
	color: var(--link-active-color);
}


.btn-accent,
a.btn-accent{
	color:var(--accent-color);
	border-color:var(--accent-color);
	background-color:var(--accent-color);
}
[class*="am-btn-"].btn-accent:before{
	background-color:var(--accent-color);
}

div [class*="am-btn-"].hover-accent:hover{
	color:var(--accent-color);
	border-color:var(--accent-color);
	background-color:var(--accent-color);
}
div [class*="am-btn-"].hover-accent:hover:before{
	background-color:var(--accent-color); 
}



#Body .bg-accent{
	background-color:var(--accent-color);
}
#Body .color-accent{
	color:var(--accent-color);
} 
#Body .border-accent{
	border-color:var(--accent-color);
}
#Body .bg-accent-hover:hover{
	background-color:var(--accent-color);
}
#Body .color-accent-hover:hover{
	color:var(--accent-color);
} 
#Body .border-accent-hover:hover{
	border-color:var(--accent-color);
}

#Body .bg-accent2{
	background-color:var(--accent-color2);
}
#Body .color-accent2{
	color:var(--accent-color2);
} 
#Body .border-accent2{
	border-color:var(--accent-color2);
}

#Body .bg-accent3{
	background-color:var(--accent-color3);
}
#Body .color-accent3{
	color:var(--accent-color3);
} 
#Body .border-accent3{
	border-color:var(--accent-color3);
}
#Body .bg-accent4{
	background-color:var(--accent-color4);
}
#Body .color-accent4{
	color:var(--accent-color4);
} 
#Body .border-accent4{
	border-color:var(--accent-color4);
}

b,
strong{
	font-weight:600;
}
.bold,
.font-weight-bold,
.strong-before:before,
.strong-after:after,
.strong-before :before,
.strong-after :after{
	font-weight:600!important;
}



#Body, body, .Head, .SubTitle, .SubSubTitle, .Normal{
	font-family: var(--family);  
	font-size: 1rem; 
	line-height: 1.8;
	letter-spacing: 0;
	color: var(--default-color);
}
.default-size{font-size:1rem;}
.default-lineheight{line-height:1.8;}

@media (min-width:576px) {
		}
@media (min-width:768px) {
		}
@media (min-width:992px) {
		}
@media (min-width:1200px) {
		}



button, 
input, 
select, 
textarea,
.btn{
	font-family: var(--family);  
}

.default-color{
	color: var(--default-color)!important;
}
.default-bg-color{
	background-color: var(--default-color)!important;
}
.default-bg-color-hover:hover{
	background-color: var(--default-color)!important;
}
.default-border-color{
	border-color: var(--default-color)!important;
}
.accent-color{
	color: $var(--accent-color);
}
.default-family{
	font-family: var(--family)!important;
}
.family2{
	font-family: var(--family2)!important;
}

/*default color*/



/*page title*/
.page-title-bg{
			background-color:#f0f0f0; 
		}		
.page-title .title-area:after{
	border-color: #f3bebe; 
}



	

.page-title-bg.light-overlay::after{
	background-color: rgba(255, 255, 255, 0.10);
}
.page-title-bg.dark-overlay::after{
	background-color: rgba(0, 0, 0, 0.10);
}

.page-title-container{
	 height: 200px;
}
@media only screen and (max-width: 767px) {
	.page-title-container{
		height: auto;padding-top:35px;padding-bottom:35px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
	.page-title-container{
		height:120px;
		min-height:162px;
		padding-top: 45px;
		padding-bottom: 45px;
	}
}
 


 	.page-title .main-title span::before{
		background-image: linear-gradient(to right, #f3bebe , #fff1cd);
	}
 


/*breadcrumbs*/
.page-breadcrumbs{
	background-color:#ffffff;  
	}
.page-breadcrumbs > .container{
		padding-top:20px;
				padding-bottom:10px;
		}

.page-breadcrumbs .breadcrumbs a:hover{
		color:var(--accent-color)!important;
	}

.page-breadcrumbs .breadcrumbs{
    color: #666666;
    font-size: 14px;
}
.page-breadcrumbs .breadcrumbs-box > a,
.page-breadcrumbs .breadcrumbs-box > span > span > span{
    line-height:20px;
}
.page-breadcrumbs .breadcrumbs a,
.page-breadcrumbs .breadcrumbs a:link,
.page-breadcrumbs .breadcrumbs a:active,
.page-breadcrumbs .breadcrumbs a:visited{
    color: #666666;
    font-size: 14px;
}
.page-breadcrumbs .breadcrumbs a:hover{
			color:var(--accent-color)!important;
	}

.breadcrumbs_sytle2 .breadcrumbs-box,
.breadcrumbs_sytle3 .breadcrumbs-box > a:before, 
.breadcrumbs_sytle3 .breadcrumbs-box > span > span > span:before{
	background-color:#ededed;
}

/*sidebar dynamic*/

.sidebar_dynamic.sidebar_dynamic_sytle01{
	padding-right:40px;	}
.sidebar_dynamic.sidebar_dynamic_sytle01 > .sidebar_sticky{
	 	 }


.sidebar-main{
	display: flex;
}
.sidebar-main .sidebar-bar{
	width: 340px;
    flex: 0 0 340px;
}
.sidebar-main .sidebar-container{
	 flex-grow: 1;
	 width:  calc(100% - 340px);
}

.sidebar-main .sidebar_pos_right{
	order:2
}


@media only screen and (max-width: 767px) {
	.sidebar-main{
		flex-direction: column;
	}
	.sidebar-main .sidebar-bar{
		width:100%;
		flex: 0 0 100%;
	}	
	.sidebar-main .sidebar-container{
		width: 100%;
		flex: 0 0 100%;
	}

				.sidebar-main .sidebar-bar{
			order:1
		}	
		.sidebar-main .sidebar-container{
			order:0
		}
	}
 
@media only screen and (max-width: 991px) {
	.sidebar_dynamic.sidebar_dynamic_sytle01{
		padding-right:15px!important;
		padding-left:15px!important;
		margin-top: 30px;
	}
	.sidebar_dynamic.sidebar_dynamic_sytle01 > .sidebar_sticky{
		padding-top:0!important;
		padding-bottom:0!important;
	 }

}

.has-sidebar >.row{
	position: relative;
}




/*page */
.swiper-container .swiper-pagination-bullet-active{
	background: var(--accent-color);	
}
.swiper-container .swiper-button-next:hover, 
.swiper-container .swiper-button-prev:hover{
	color: var(--accent-color);	
}
 
.isotope-grid .isotope-group a:before {
    border-top-color:var(--accent-color2);
}

.isotope-grid .isotope-group a:after {
    border-top-color:var(--accent-color2);
}

.easy-carousel .pagination-bullet{
	color: var(--accent-color);	
}
 

/*backtop */

