@charset "UTF-8";
/* ============================================================
   EMOTIVE ART PRINTS — EMOTIVEARTPRINTS.COM
   Core template v1.0  2026-08-09
   Self-contained. Based on the Oakford Group core template.

   TO RE-SKIN: edit the :root block below and nothing else.
   Every colour in this file references one of these tokens.

   RULES FOR THIS SITE:
     - Monochrome by design: the ARTWORK supplies the colour, not the chrome.
     - --brand #c2410c is for ACTIONS ONLY (buttons, links, active nav).
     - --secondary #8a5a44 (brick brown) is for frames, dividers, price labels.
     - Keep chrome LIGHT. If this site ever gets a dark nav it will start to
     -   look like IT Consulting Lab — the opposite chrome weight is the separator.
     - Footer is light grey, NOT black (links score 5.43 vs 3.13 on black).
   ============================================================ */

:root{
  /* chrome — nav bar, banded sections */
  --chrome:#e5e5e5;
  --chrome-text:#1a1a1a;

  /* brand accent — buttons, rules, active states */
  --brand:#c2410c;
  --brand-ink:#a63508;        /* body links on white (contrast-safe) */
  --brand-light:#c2410c;    /* active nav state */
  --brand-on-chrome:#c2410c; /* accent when it sits ON the chrome colour */

  /* secondary */
  --secondary:#8a5a44;

  /* surfaces */
  --surface:#faf9f8;
  --hero-bg:#ece8e3;

  /* footer */
  --footer-bg:#e9e7e4;
  --footer-text:#3a3a3a;
  --footer-heading:#1a1a1a;
  --footer-link:#a63508;
  --copyright-bg:#dedbd7;
  --copyright-text:#2a2a2a;

  /* text on the accent (NEVER assume white) */
  --on-brand:#ffffff;
}

/* =============================================
 * Consolidated CSS
 * ============================================= */

/* === BASE === */
html {
  scroll-behavior: smooth;
}

/* === NORMALIZE (reset) === */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {display: block;}

[hidden] {display: none;}

html {font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body {margin: 0;}

a:focus {outline: thin dotted;}

a:active,a:hover {outline: 0;}

h1 {font-size: 2em;}

b,strong {font-weight: bold;}

img {border: 0;}

button,input,select,textarea {font-family: inherit; font-size: 100%; margin: 0; }

table {border-collapse: collapse;border-spacing: 0;}

h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin-top: 0;	margin-left: 0;	padding-top: 0;	padding-left: 0;}

/* === GRID === */
.row {
	margin-left: -20px;
	*zoom: 1;
}

.row:before,
.row:after {
	display: table;
	content: "";
	line-height: 0;
}

.row:after {
	clear: both;
}

[class*="span"] {
	float: left;
	min-height: 1px;
	margin-left: 20px;
}

.container {
	width: 940px;
}

.span12 {
	width: 940px;
}

.span8 {
	width: 620px;
}

.span4 {
	width: 300px;
}

.span3 {
	width: 220px;
}

.container {
	margin-right: auto;
	margin-left: auto;
	*zoom: 1;
}

.container:before,
.container:after {
	display: table;
	content: "";
	line-height: 0;
}

.container:after {
	clear: both;
}

.visible-desktop {
	display: inherit !important;
}

@media (min-width: 768px) and (max-width: 979px) {
.visible-desktop {
		display: none !important ;
	}
.hidden-tablet {
		display: none !important;
	}
}

@media (max-width: 767px) {
.visible-desktop {
		display: none !important;
	}
}

@media (max-width: 767px) {
.container {
		width: 480px;
	}
.row,
	.thumbnails {
		margin-left: 10px;
		margin-right: 10px;
	}
.row .row {
		margin-left: 0;
		margin-right: 0;
	}
[class*="span"],
	.uneditable-input[class*="span"],
	.row-fluid [class*="span"] {
		float: none;
		display: block;
		width: 100%;
		margin-left: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
.span12,
	.row-fluid .span12 {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
.input-large,
	.input-xlarge,
	.input-xxlarge,
	input[class*="span"],
	select[class*="span"],
	textarea[class*="span"],
	.uneditable-input {
		display: block;
		width: 100%;
		min-height: 30px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}

@media (max-width: 479px) {
.container {
		width: 320px;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
.row {
		margin-left: -20px;
		*zoom: 1;
	}
.row:before,
	.row:after {
		display: table;
		content: "";
		line-height: 0;
	}
.row:after {
		clear: both;
	}
[class*="span"] {
		float: left;
		min-height: 1px;
		margin-left: 20px;
	}
.container {
		width: 724px;
	}
.span12 {
		width: 724px;
	}
.span8 {
		width: 476px;
	}
.span4 {
		width: 228px;
	}
.span3 {
		width: 166px;
	}
input.span12, textarea.span12, .uneditable-input.span12 {
		width: 710px;
	}
input.span8, textarea.span8, .uneditable-input.span8 {
		width: 462px;
	}
input.span4, textarea.span4, .uneditable-input.span4 {
		width: 214px;
	}
input.span3, textarea.span3, .uneditable-input.span3 {
		width: 152px;
	}
}

@media (min-width: 1200px) {
.row {
		margin-left: -30px;
		*zoom: 1;
	}
.row:before,
	.row:after {
		display: table;
		content: "";
		line-height: 0;
	}
.row:after {
		clear: both;
	}
[class*="span"] {
		float: left;
		min-height: 1px;
		margin-left: 30px;
	}
.container {
		width: 1170px;
	}
.span12 {
		width: 1170px;
	}
.span8 {
		width: 770px;
	}
.span4 {
		width: 370px;
	}
.span3 {
		width: 270px;
	}
input.span12, textarea.span12, .uneditable-input.span12 {
		width: 1156px;
	}
input.span8, textarea.span8, .uneditable-input.span8 {
		width: 756px;
	}
input.span4, textarea.span4, .uneditable-input.span4 {
		width: 356px;
	}
input.span3, textarea.span3, .uneditable-input.span3 {
		width: 256px;
	}
}

@media (max-width: 979px) {
body {
		padding-top: 0;
	}
}

/* === LAYOUT === */
/* Web Symbols font removed - unused */

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: optimizelegibility; }

body {
		font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		font-size: 14px;
		line-height: 1.5;
		color: #555;
		background-color: #fff;
		-webkit-font-smoothing: antialiased;
	}

::-moz-selection {background: var(--brand); color: #fff; }

::selection {background: var(--brand); color: #fff; }

a { color: var(--brand-ink);
		text-decoration: none;
		border-bottom: 1px solid var(--brand-ink); 
		-webkit-transition: color 0.1s linear, border 0.1s linear, opacity 0.1s linear, background-color 0.1s linear;
		   -moz-transition: color 0.1s linear, border 0.1s linear, opacity 0.1s linear, background-color 0.1s linear;
		    -ms-transition: color 0.1s linear, border 0.1s linear, opacity 0.1s linear, background-color 0.1s linear;
		     -o-transition: color 0.1s linear, border 0.1s linear, opacity 0.1s linear, background-color 0.1s linear;
		     	transition: color 0.1s linear, border 0.1s linear, opacity 0.1s linear, background-color 0.1s linear;
				
				
	}

a:hover, a:focus { text-decoration: none; border: none; }

p {
		color: #555;
		font-size: 13px;
		line-height: 1.5;
	}

img {
		
		max-width: 100%;
		
		width: auto\9;
		
		height: auto;
		
		vertical-align: middle;
		border: 0;
		-ms-interpolation-mode: bicubic;
	}

.wrapper {
		position: absolute;
		top: 700px;
		width: 100%;
	}

.color-text {
		color: var(--brand);
	}

.page {
		padding-top: 78px;
		padding-bottom: 90px;
		background: #fff;
	}

.page-gray {
		background: var(--surface);
		border-top: 1px solid var(--surface);
	}

.title {
		font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		font-size: 36px;
		letter-spacing: 2px;
		text-transform: uppercase;
		line-height: 1.1;
		margin-bottom: 34px;
	}

.lead {
		font-size: 38px;
		line-height: 1.4;
		margin: 44px 0 46px 0;
		font-weight: 300;
		padding-right: 30%;
	}

hr {
		border: 0;
		border-bottom: 1px solid var(--brand);
		margin: 10px 0;
	}

.pattern {
		background: url("../img/pattern.png");
		width: 100%;
		position: absolute;
	}

header {
		width: 100%;
		height: 700px;
		position: absolute;
		overflow: hidden;
		text-align: center;
		color: #fff;
		background: #333 url("../img/header.webp") no-repeat top center fixed;
		background-size: 1280px;
	}

header .pattern {
		height: 700px;
	}

header .header-bg {
		height: 700px;
		width: 100%;
		background: url("../img/vignette.webp") no-repeat center center fixed;
		background-size: cover;
		position: absolute;
	}

header .container {
		height: 100%;
		position: relative;
	}

#slidecaption {
		position: absolute;
		top: 30%;
		color:#fff;
		font: 48px "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		text-transform: uppercase;
		letter-spacing: 2px;
		line-height: 1.3;
	}

#slidecaption .sub-caption {
		font: 24px "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		text-transform: none;
		letter-spacing: 0; 
		line-height: 1.4;
		padding: 0 10%;
		font-weight: 300;
		margin-top: 30px;
	}

#slidecaption .btn.white {
		opacity: 0.8;
		margin-top: 42px;
		line-height: 1.5;
	}

#slidecaption .btn.white:hover {
		opacity: 1;
	}

.logo {
		display: block;
		margin: 0;
		padding: 0;
		line-height: 0;
		border: none;
		width: 177px;
		height: auto;
	}

header .logo {
		margin-top: 80px;
	}

header nav {
		margin-top: 76px;
	}

nav ul {
				display: inline-block;
				font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
				float: right;
			}

nav #fluid-nav li, nav #fixed-nav li {
				display: inline-block;
				margin-left: 12px;
			}

nav #fluid-nav li:first-child, nav #fixed-nav li:first-child  {
				margin-left: 0;
			}

nav #fluid-nav li a, nav #fixed-nav li a {
				color: #fff;
				font-weight: 700;
				text-transform: uppercase;
				font-size: 12px;
				border: none;
			}

nav #fluid-nav li a:hover {
				color: #333;
				text-decoration: none;
				
			}

nav #fluid-nav li.current a {
				color: var(--brand-light);
			}

nav #fixed-nav li a:hover {
				color: var(--brand);
				text-decoration: none;
			}

nav #fixed-nav li.current a {
				color: #fff;
				padding-bottom: 5px;
				border-bottom: 3px solid var(--brand);
			}

nav#mainnav {
				width: 100%;
				height: 50px;
				background-color: var(--brand);
				overflow: hidden;
				position: sticky; top: 0;
				z-index: 999;
			}

nav#mainnav .logo {
				position: absolute;
				top: 14px;
			}

nav#mainnav #fluid-nav li {
				margin-top: 16px;
			}

.selectnav {
				display: none;
				font-size: 12px;
				position: absolute;
				text-transform: capitalize !important;
			}

nav#mainnav .logo {
				margin-top: 4px;
			}

header .logo {
				text-align: left;
			}

.services {
		background: var(--brand);
		color: #fff;
		height: 322px;
		padding: 30px;
		box-sizing: border-box;
	}

@-moz-document url-prefix()
{
	.services { height: auto; box-shadow: border-box; overflow: hidden; padding-bottom: 18px; }
}

.services-title {
		font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		text-transform: uppercase;
		font-size: 18px;
		letter-spacing: 1px;
	}

.services-list {
		list-style: none;
		font-size: 14px;
		line-height: 2;
		margin-top: 10px;
	}

.slider-services {
		margin-bottom: 66px;
	}

.profile {
		background-color: var(--surface);
		padding-bottom: 20px;
		border-bottom: 1px solid var(--brand);
	}

.profile img {
		margin-bottom: 20px;
	}

.profile-name {
		font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		font-size: 16px;
		margin: 0 20px;
		letter-spacing: 1px;
		line-height: 1.2;
		text-transform: uppercase;
	}

.profile-job {
		font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		font-size: 10px;
		color: #767676;
		margin: 0 20px 16px 20px;
		text-transform: uppercase;
	}

.profile-desc {
		font-size: 13px;
		margin: 0 20px 23px 20px;
	}

#sidebar {
			background: var(--footer-bg);
			color: var(--footer-text);
			padding: 46px 0 50px 0;
		}

#sidebar .footer-heading {
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}

#sidebar h5 {
			color: #fff;
			font-weight: 700;
		}

/* === SIDEBAR TEXT CONTRAST FIX === */
#sidebar p,
#sidebar li,
#sidebar strong {
	color: #ccc;
}

/* === SIDEBAR LINK ACCESSIBILITY === */
#sidebar a {
	color: var(--brand);
	text-decoration: underline;
}
#sidebar a:hover {
	color: var(--brand);
}


#copyright {
		background: var(--brand);
		color: #fff;
		text-align: center;
		font-size: 13px;
		padding: 20px 0 20px 0;
	}

#copyright a {
		color: #fff;
		text-decoration: underline;
	}

#copyright a:hover {
		text-decoration: none;
	}

#adv {
		padding: 26px 0 27px 0;
		background: #fff;
	}

#adv-gray {
		padding: 26px 0 27px 0;
		background: var(--surface);
	}

#adv .button-right .btn {
		float: right;
		margin-top: 16px;
	}

/* === SHORTCODES (forms, alerts, etc.) === */
.btn {
	display: inline-block;
	margin: 10px 10px 10px 0;
	padding: 11px 30px;
	line-height: 1.5;
	background: var(--brand);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0;
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	cursor: pointer;
	border: none;
	border-radius: 60px;
	-webkit-font-smoothing: antialiased;
}

.btn:hover, .btn:focus {
	background: #333;
	color: #fff;
	text-decoration: none;
}

.btn.white {
	background: #fff;
	color: #000;
}

.btn.white:hover, .btn.white:hover {
	background: var(--brand);
	color: #fff;
}

.btn:active {
	background: #fff !important;
	color: #000 !important;
	-webkit-transition: all 0s linear !important;
	   -moz-transition: all 0s linear !important;
	     -o-transition: all 0s linear !important;
	     	transition: all 0s linear !important;
}

label,
input,
button,
select,
textarea {
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

input,
button,
select,
textarea {
	font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
	display: inline-block;
	height: 40px;
	padding: 9px 1px 9px 13px;
	margin-bottom: 10px;
	line-height: 1.3;
	color: #555;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	vertical-align: middle;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	    -ms-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	     	transition: all 0.2s linear;
}

select,
input[type="file"] {
	height: 30px;
	

	*margin-top: 4px;
	

	font-size: 15px;
}

select {
	width: 220px;
	border: 1px solid #d2d2d2;
	color: #3e4349;
}

select[multiple],
select[size] {
	height: auto;
}

select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline: thin dotted #fff;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input[class*="span"],
.row-fluid input[class*="span"],
.row-fluid select[class*="span"],
.row-fluid textarea[class*="span"],
.row-fluid .uneditable-input[class*="span"] {
	float: none;
	margin-left: 0;
}

input.span12, textarea.span12, .uneditable-input.span12 {
	width: 926px;
}

input.span8, textarea.span8, .uneditable-input.span8 {
	width: 606px;
}

input.span4, textarea.span4, .uneditable-input.span4 {
	width: 286px;
}

input.span3, textarea.span3, .uneditable-input.span3 {
	width: 206px;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
	cursor: not-allowed;
	background-color: #26282a;
}

input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
	color: #a4211f;
	border-color: #ee5f5b;
}

input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus {
	border-color: #e9322d;
	-webkit-box-shadow: 0 0 6px #f8b9b7;
	-moz-box-shadow: 0 0 6px #f8b9b7;
	box-shadow: 0 0 6px #f8b9b7;
}

/* === ADDITIONAL (custom overrides) === */
a { 
				border-bottom: 0px solid var(--brand); 
	}

h1 {
		font-size: 36px;
		font-weight:normal;
		

	}

#slidecaption h1{
		font: 48px "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		}

h2 {
		font-size: 38px;
		font-weight: 300;	
	}

@media print,screen and (max-width: 480px) {
#slidecaption h1{
		font: 23px "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		}
h2 {
		font-size: 28px;
		font-weight: 400;	
	}
h3 {
		font-size: 25px;
		font-weight:normal;
	}
}

h3 {
		font-size: 20px;
		font-weight:normal;
	}

h5 {
		font-size: 14px;
		letter-spacing: 1px;
		font-weight:normal;
		text-transform:uppercase;
		
	}

.span8 li{
		color: #555;
		font-size: 13px;
		line-height: 1.5;
		margin-left:30px;
	}

/* === MEDIA QUERIES (responsive) === */
@media (min-width: 1200px) {
.lead {
		font-size: 44px;
		margin: 44px 0 46px 0;
		padding-right: 35%;
	}
.services {
		height: 400px;
		padding: 40px;
	}
@-moz-document url-prefix()
{
	.services { height: auto; box-shadow: border-box; overflow: hidden; }
}
.services-list {
		font-size: 16px;
		margin-top: 15px;
	}
.services-title {
		font-size: 20px;
	}
#slidecaption {
		padding: 0 9%;
	}
header {
		background-size: 100%;
		background-position: top center;
	}
nav #fluid-nav li a, nav #fixed-nav li a {
		font-size: 14px;
	}
nav #fluid-nav li, nav #fixed-nav li {
		display: inline-block;
		margin-left: 16px;
	}
}

@media (min-width: 768px) and (max-width: 979px) {
.lead {
		padding-right: 0;
	}
.services {
		height: 247px;
		padding: 20px;
	}
.services-list {
		font-size: 13px;
		margin-top: 0;
	}
#slidecaption { 
		font-size: 36px;
		top: 35%;
	}
#slidecaption .sub-caption {
		font-size: 20px;
		padding: 0;
	}
.selectnav {
		display: block;
		width: 300px !important;
		position: absolute;
		right: 0;
	}
#mainnav .span8 {
		position: relative;
	}
nav#mainnav .selectnav {
		margin-top: 8px;
	}
}

@media (max-width: 767px) {
#adv .button-right .btn {
		float: left;
	}
.lead {
		font-size: 28px;
		margin: 44px 0 46px 0;
		padding-right: 0;
	}
.slider-services {
		margin-bottom: 33px;
	}
.profile {
		margin-bottom: 30px;
	}
.title {
		font-size: 28px;
		letter-spacing: 1px;
	}
.page {
		padding-top: 65px;
		padding-bottom: 50px;
	}
#slidecaption { 
		font-size: 28px;
		top: 35%;
		padding: 0 2%;
	}
#slidecaption .sub-caption {
		font-size: 16px;
		padding: 0;
	}
header, header .pattern, header .header-bg {
		height: 560px;
	}
.wrapper {
		top: 560px;
	}
.selectnav {
		display: block;
	}
#topnav .selectnav {
		display: block;
		position: absolute;
		right: 0;
		top: 73px;
	}
nav#mainnav .selectnav {
		margin-top: 8px;
		width: 460px;
	}
nav#mainnav .logo {
		display: none;
	}
}

@media (max-width: 479px) {
#slidecaption { 
		font-size: 20px;
		top: 36%;
		padding:  2%;
	}
#slidecaption .sub-caption {
		font-size: 14px;
		padding: 0;
	}
#topnav .selectnav {
		width: 300px;
		top: 120px;
	}
nav#mainnav .selectnav {
		width: 300px;
	}
header .logo {
		text-align: center;
	}
body {
		overflow-x: hidden;
	}
}
/* === INLINE LINK ACCESSIBILITY (WCAG: links must not rely on colour alone) === */
.page a:not(.btn) {
  color: var(--brand-ink);
  text-decoration: underline;
}
.page a:hover {
  text-decoration: none;
}
.page a:visited:not(.btn) {
  color: var(--brand-ink);
}
/* === COOKIE BANNER CONTRAST FIX (third-party - requires !important) === */
.cc_banner {
  background: #222 !important;
}
.cc_banner .cc_message {
  color: #fff !important;
}
.cc_banner a {
  color: #fff !important;
  text-decoration: underline !important;
}
.cc_banner .cc_btn {
  background: #fff !important;
  color: #222 !important;
  text-decoration: none !important;
  padding: 6px 18px !important;
  border-radius: 4px !important;
  font-weight: bold !important;
}

/* ============================================================
   THEME LAYER — Emotive Art Prints — emotiveartprints.com
   ============================================================ */

/* --- nav: ALWAYS opaque. The core template lets the nav sit
   transparent over the hero; with light chrome the links vanish. --- */
nav#mainnav{
  background-color:var(--chrome) !important;
  position:relative;
  z-index:50;
  border-bottom:1px solid #d5d1cc;
}
nav#mainnav a,
nav#mainnav li a,
nav #fluid-nav li a,
nav #fixed-nav li a{
  color:var(--chrome-text) !important;
  text-shadow:none !important;
}
nav #fluid-nav li.current a{ color:var(--brand-on-chrome) !important; }
nav #fixed-nav li.current a{
  color:var(--brand-on-chrome) !important;
  border-bottom:3px solid var(--brand-on-chrome) !important;
}

/* --- hero --- */
header#home{ background-color:var(--hero-bg) !important; }
header#home h1, header#home h2, header#home h3, header#home p{ color:#1a1a1a !important; text-shadow:none !important; }

/* --- banded section --- */
.services{ background:var(--chrome) !important; }
.services *{ color:var(--chrome-text) !important; }
.services h1,.services h2,.services h3{ color:var(--brand-on-chrome) !important; }

/* --- accents --- */
.color-text{ color:var(--brand-on-chrome); }
hr{ border-bottom-color:var(--brand); }
.profile{ border-bottom:1px solid var(--brand); }
.page-gray,#adv-gray,.profile{ background:var(--surface); }

/* --- buttons: text colour is a token, never assumed white --- */
.btn{
  background:var(--brand);
  color:var(--on-brand) !important;
  border-color:var(--brand);
  font-weight:700;
}
.btn:hover{ background:var(--secondary); color:#fff !important; }
.btn.white{ background:#fff; color:#1a1a1a !important; }

/* --- links --- */
.page a:not(.btn), .page a:visited:not(.btn){ color:var(--brand-ink); }

/* --- footer --- */
#sidebar{ background:var(--footer-bg) !important; color:var(--footer-text) !important; }
#sidebar p,#sidebar li,#sidebar span,#sidebar div,#sidebar strong{ color:var(--footer-text) !important; }
#sidebar .footer-heading{ color:var(--footer-heading) !important; }
#sidebar a{ color:var(--footer-link) !important; }
#sidebar a:hover{ text-decoration:underline; }
#copyright{ background:var(--copyright-bg) !important; color:var(--copyright-text) !important; }
#copyright a{ color:var(--copyright-text) !important; }

::-moz-selection{ background:var(--brand); color:var(--on-brand); }
::selection{ background:var(--brand); color:var(--on-brand); }


/* ============================================================
   COMPONENTS — moved out of the page's inline <style> blocks so
   they follow the theme tokens instead of bypassing them.
   (Originally hardcoded: FAQ #666/#ddd, cookie bar #222 + #f1d600)
   ============================================================ */

/* --- FAQ accordion --- */
.homepage-faq{ background:#fff; backface-visibility:hidden; }
.homepage-faq details{ padding:0; border-bottom:1px solid #e6e2dd; }
.homepage-faq summary{ cursor:pointer; padding:14px 0; font-weight:700; list-style:none; color:var(--brand-ink); }
.homepage-faq summary::-webkit-details-marker{ display:none; }
.homepage-faq summary:after{ content:"+"; float:right; color:var(--secondary); font-weight:700; }
.homepage-faq details[open] summary:after{ content:"\2013"; }
.homepage-faq details p{ padding:0 0 14px; margin:0; }

/* --- cookie consent (class renamed oak-cc -> site-cc) --- */
.site-cc{ position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:var(--footer-bg); color:var(--footer-text);
  padding:14px 20px; font-size:14px; display:flex; gap:16px;
  align-items:center; justify-content:center; flex-wrap:wrap; }
.site-cc a{ color:var(--footer-link); }
.site-cc .cc_btn{ background:var(--brand) !important; color:var(--on-brand) !important;
  text-decoration:none !important; padding:8px 20px !important; border:0 !important;
  border-radius:4px !important; font-weight:700 !important; cursor:pointer; }
.site-cc .cc_btn:hover{ background:var(--secondary) !important; color:#fff !important; }


/* ============================================================
   LIGHTBOX — enlarged product images
   Not in the Oakford template (it has no lightbox at all).
   Vanilla, no jQuery/Fancybox dependency. ~1KB.
   Markup:  <a class="lb" href="large.jpg" data-caption="A3 — 297x420mm">
              <img src="thumb.jpg" alt="...">
            </a>
   ============================================================ */
.lb{ display:inline-block; cursor:zoom-in; }
.lb img{ display:block; }

dialog.lb-modal{
  border:0; padding:0; max-width:96vw; max-height:96vh;
  background:transparent; overflow:visible;
}
dialog.lb-modal::backdrop{ background:rgba(20,18,16,.88); }
.lb-modal .lb-frame{
  background:#fff; padding:14px; border-radius:2px;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.lb-modal img{
  display:block; max-width:calc(96vw - 60px); max-height:calc(96vh - 110px);
  width:auto; height:auto;
}
.lb-modal figcaption{
  margin-top:10px; font-size:14px; color:#3a3a3a; text-align:center;
}
.lb-close{
  position:absolute; top:-14px; right:-14px; width:38px; height:38px;
  border:0; border-radius:50%; cursor:pointer; font-size:20px; line-height:1;
  background:var(--brand); color:var(--on-brand); font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.lb-close:hover{ background:var(--secondary); color:#fff; }
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; width:44px; height:60px; cursor:pointer; font-size:24px;
  background:rgba(255,255,255,.92); color:#1a1a1a;
}
.lb-prev{ left:-52px; } .lb-next{ right:-52px; }
.lb-nav:hover{ background:var(--brand); color:var(--on-brand); }
@media (max-width:700px){
  .lb-prev{ left:4px; } .lb-next{ right:4px; }
  .lb-close{ top:4px; right:4px; }
}
@media (prefers-reduced-motion:no-preference){
  dialog.lb-modal[open]{ animation:lbIn .18s ease-out; }
  @keyframes lbIn{ from{opacity:0; transform:scale(.97)} to{opacity:1; transform:none} }
}


/* ============================================================
   PRODUCT PAGE COMPONENTS
   Used by product-*.html. All colours come from :root tokens.
   ============================================================ */

.breadcrumb{ background:var(--surface); border-bottom:1px solid #ececec;
  padding:12px 0; font-size:13px; color:#5a5550; }
.breadcrumb a{ color:var(--brand-ink); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

.product-head{ padding:38px 0 8px; }
.product-head h1{ font-size:34px; line-height:1.2; margin:0 0 6px; }
.product-subtitle{ color:var(--secondary); font-size:15px; letter-spacing:1px;
  text-transform:uppercase; margin-bottom:24px; }

.product-lead{ display:grid; grid-template-columns:1fr 1fr; gap:40px;
  align-items:start; margin-bottom:10px; }
.product-hero img{ width:100%; height:auto; display:block;
  border:12px solid #fff; outline:1px solid #ddd;
  box-shadow:0 6px 26px rgba(0,0,0,.13); }
.zoom-hint{ font-size:12.5px; color:#5a5550; margin-top:10px; text-align:center; }
.product-desc p{ margin:0 0 14px; color:#3a3a3a; }

.product-meta{ border-top:1px solid #e6e2dd; margin-top:18px; padding-top:16px;
  font-size:14px; color:#5a5550; }
.product-meta div{ margin-bottom:7px; }
.product-meta strong{ color:#1a1a1a; }

.size-section h2{ font-size:22px; margin:38px 0 6px; padding-top:26px;
  border-top:2px solid var(--secondary); }
.size-intro{ color:#5a5550; font-size:14px; margin-bottom:18px; }

.size-table{ width:100%; border-collapse:collapse; }
.size-table th{ text-align:left; font-size:12px; text-transform:uppercase;
  letter-spacing:.8px; color:#5a5550; padding:10px 12px;
  border-bottom:2px solid #e6e2dd; }
.size-table td{ padding:14px 12px; border-bottom:1px solid #ececec;
  vertical-align:middle; }
.size-table .cell-thumb{ width:104px; }
.size-table .cell-thumb img{ width:88px; height:auto; display:block;
  border:5px solid #fff; outline:1px solid #ddd;
  box-shadow:0 2px 8px rgba(0,0,0,.1); }
.size-name{ display:block; font-size:17px; font-weight:700; }
.size-dims{ font-size:13px; color:#5a5550; }
.size-price{ font-size:19px; font-weight:700; color:var(--brand-ink);
  white-space:nowrap; }
.size-table select{ padding:7px 10px; border:1px solid #c9c4be;
  border-radius:3px; background:#fff; font-size:14px; }
.cell-action{ text-align:right; }
.cell-action .btn{ white-space:nowrap; }

.product-note{ background:var(--surface); border-left:4px solid var(--secondary);
  padding:14px 18px; margin-top:26px; font-size:14px; color:#3a3a3a; }

@media (max-width:820px){
  .product-lead{ grid-template-columns:1fr; gap:24px; }
  .size-table thead{ display:none; }
  .size-table tr{ display:grid; grid-template-columns:96px 1fr;
    gap:4px 14px; padding:14px 0; border-bottom:1px solid #ececec; align-items:center; }
  .size-table td{ border:0; padding:2px 0; }
  .size-table .cell-thumb{ grid-row:span 4; width:auto; }
  .cell-action{ text-align:left; }
  .cell-action .btn{ width:100%; }
}

/* screen-reader-only text (used by product table labels) */
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* fix: borders must sit INSIDE the declared width, or the 12px frame
   pushes the image 24px past the viewport on small screens */
.product-hero img, .size-table .cell-thumb img, .lb-modal img{ box-sizing:border-box; max-width:100%; }
.product-hero a.lb{ display:block; max-width:100%; }

/* ============================================================
   HOME + CATEGORY COMPONENTS
   ============================================================ */
.hero-home{ background:var(--surface); border-bottom:1px solid #e0dcd7; padding:64px 0 58px; }
.hero-inner{ max-width:680px; }
.hero-home h1{ font-size:40px; line-height:1.15; margin:0 0 14px; }
.hero-lead{ font-size:18px; line-height:1.6; color:#4a463f; margin:0 0 26px; }

.btn-lg{ padding:13px 26px; font-size:16px; }
.btn-outline{ background:transparent; border:2px solid var(--secondary);
  color:var(--secondary); }
.btn-outline:hover{ background:var(--secondary); color:#fff; }

.cat-row{ margin:44px 0 10px; }
.cat-card{ display:block; text-decoration:none; color:inherit; height:100%;
  border:1px solid #e6e2dd; background:#fff; transition:box-shadow .18s, transform .18s; }
.cat-card:hover{ box-shadow:0 8px 26px rgba(0,0,0,.12); transform:translateY(-2px); }
.cat-card img{ width:100%; height:auto; display:block; }
.cat-card h2{ font-size:23px; margin:18px 20px 8px; }
.cat-card p{ margin:0 20px 14px; color:#4a463f; font-size:15px; }
.cat-link{ display:block; margin:0 20px 20px; color:var(--brand-ink);
  font-weight:700; font-size:14.5px; }

.strip{ background:var(--surface); border-left:4px solid var(--secondary);
  padding:26px 30px; margin:38px 0; }
.strip h2{ margin:0 0 10px; font-size:22px; }
.strip p{ margin:0 0 14px; color:#3a3a3a; }

.trust-row{ margin:34px 0 10px; border-top:1px solid #e6e2dd; padding-top:28px; }
.trust-row h3{ font-size:16.5px; margin:0 0 7px; color:var(--brand-ink); }
.trust-row p{ font-size:14.5px; color:#4a463f; margin:0; }

.intro-copy{ max-width:760px; margin-bottom:30px; }
.intro-copy p{ color:#3a3a3a; margin:0 0 13px; }

.product-grid{ margin-top:6px; }
.prod-card{ display:block; text-decoration:none; color:inherit; margin-bottom:28px;
  border:1px solid #e6e2dd; background:#fff; transition:box-shadow .18s, transform .18s; }
.prod-card:hover{ box-shadow:0 8px 24px rgba(0,0,0,.12); transform:translateY(-2px); }
.prod-card img{ width:100%; height:auto; display:block; }
.prod-card h2{ font-size:19px; margin:15px 16px 5px; }
.prod-meta{ margin:0 16px 6px; font-size:13px; color:#5a5550;
  text-transform:uppercase; letter-spacing:.6px; }
.prod-price{ margin:0 16px 16px; font-weight:700; color:var(--brand-ink); font-size:17px; }

.notice{ background:var(--surface); border-left:4px solid var(--secondary);
  padding:20px 24px; margin:30px 0; }
.notice h2{ margin:0 0 8px; font-size:19px; }
.notice p{ margin:0; color:#3a3a3a; font-size:15px; }
.notice-variation{ border-left-color:var(--brand-ink); }

.legal-disclosure{ font-size:12.5px; line-height:1.6; opacity:.85; margin-top:8px; }

@media (max-width:820px){
  .hero-home{ padding:42px 0 38px; }
  .hero-home h1{ font-size:30px; }
  .hero-lead{ font-size:16px; }
  .btn-lg{ display:block; width:100%; margin-bottom:10px; text-align:center; }
  .cat-card, .prod-card{ margin-bottom:22px; }
}


/* ============================================================
   FOOTER CONTRAST FIX
   The base template inherited Oakford's DARK footer rules (white and
   #ccc text, orange copyright bar). This site uses a LIGHT footer, so
   those rules made the text almost invisible. Overridden here.
   ============================================================ */
#sidebar .footer-heading{ color:var(--footer-heading); }
#sidebar h5{ color:var(--footer-heading); }
#sidebar p, #sidebar li, #sidebar strong{ color:var(--footer-text); }
#sidebar a{ color:var(--footer-link); text-decoration:underline; }
#sidebar a:hover{ color:var(--brand); }

#copyright{ background:var(--copyright-bg); color:var(--copyright-text); }
#copyright a{ color:var(--footer-link); }
#copyright p{ color:var(--copyright-text); margin:0 0 4px; }
#copyright .legal-disclosure{ color:#4a4a4a; }

/* nav must be readable on the light-grey chrome */
nav#mainnav{ background-color:var(--chrome); border-bottom:1px solid #d4d4d4; }
nav#mainnav #fluid-nav li a{ color:var(--chrome-text); }
nav#mainnav #fluid-nav li a:hover{ color:var(--brand); }
nav#mainnav #fluid-nav li.current a{ color:var(--brand); }
nav#mainnav .container{ display:flex; align-items:center; justify-content:space-between; }
nav#mainnav .brand{ border:0; display:flex; align-items:center; }
nav#mainnav ul{ float:none; margin:0; padding:0; }
nav#mainnav #fluid-nav li{ margin-top:0; }


/* ============================================================
   LAYOUT + CONTRAST FIXES  (appended last so they win)

   1. The inherited grid defines span12/8/4/3 only — there is NO .span6,
      and the fluid override forces width:100%. Rather than patch the old
      float grid, the component rows below use CSS Grid, which is simpler
      and reflows on mobile without extra rules.
   2. .btn sets color:#fff; .btn-outline needs higher specificity to win.
   3. .page a:not(.btn) underlines every link — card links must not be.
   ============================================================ */

.row.cat-row, .row.trust-row, .row.product-grid{
  display:grid; float:none; margin-left:0; margin-right:0; gap:26px;
}
.row.cat-row{ grid-template-columns:repeat(2,1fr); }
.row.trust-row{ grid-template-columns:repeat(3,1fr); }
.row.product-grid{ grid-template-columns:repeat(3,1fr); }
.row.cat-row > [class*="span"],
.row.trust-row > [class*="span"],
.row.product-grid > [class*="span"]{ width:auto; float:none; margin:0; }
.row.cat-row:before, .row.cat-row:after,
.row.trust-row:before, .row.trust-row:after,
.row.product-grid:before, .row.product-grid:after{ display:none; }

.btn.btn-outline{ background:transparent; border:2px solid var(--secondary);
  color:var(--secondary); }
.btn.btn-outline:hover, .btn.btn-outline:focus{ background:var(--secondary); color:#fff; }

.page a.cat-card, .page a.prod-card{ text-decoration:none; }
.page a.cat-card:hover, .page a.prod-card:hover{ text-decoration:none; }
.cat-card img, .prod-card img{ aspect-ratio:4/3; object-fit:cover; background:var(--surface); }
.prod-card img{ aspect-ratio:4/5; }

@media (max-width:820px){
  .row.cat-row, .row.trust-row, .row.product-grid{ grid-template-columns:1fr; gap:20px; }
}
@media (min-width:821px) and (max-width:1050px){
  .row.product-grid{ grid-template-columns:repeat(2,1fr); }
}


/* .btn carries color:!important (set earlier so button text is never
   assumed white). The outline variant must therefore also use !important. */
.btn.btn-outline{ color:var(--secondary) !important; background:transparent;
  border:2px solid var(--secondary); }
.btn.btn-outline:hover, .btn.btn-outline:focus{
  color:#fff !important; background:var(--secondary); }


/* ============================================================
   LEGAL PAGE TYPOGRAPHY
   ============================================================ */
.legal-body{ max-width:760px; }
.legal-body h2{ font-size:21px; margin:34px 0 10px; padding-top:20px;
  border-top:1px solid #e6e2dd; }
.legal-body h2:first-of-type{ border-top:0; padding-top:0; margin-top:6px; }
.legal-body p, .legal-body li{ color:#3a3a3a; line-height:1.65; }
.legal-body ul{ margin:0 0 14px 20px; }
.legal-body li{ margin-bottom:7px; }
.legal-table{ width:100%; border-collapse:collapse; margin:16px 0 20px; }
.legal-table th{ text-align:left; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.7px; color:#5a5550; padding:10px 12px;
  border-bottom:2px solid var(--secondary); }
.legal-table td{ padding:11px 12px; border-bottom:1px solid #ececec;
  font-size:14.5px; color:#3a3a3a; }
.legal-updated{ margin-top:34px; padding-top:16px; border-top:1px solid #e6e2dd;
  font-size:13px; color:#5a5550; font-style:italic; }
@media (max-width:820px){
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td{ display:block; width:100%; }
  .legal-table thead{ display:none; }
  .legal-table tr{ border-bottom:1px solid #e6e2dd; padding:10px 0; }
  .legal-table td{ border:0; padding:3px 0; }
  .legal-table td:first-child{ font-weight:700; }
}


/* Mal's Cart per-row add-to-basket form */
.cart-form{ display:flex; align-items:center; gap:10px; justify-content:flex-end; margin:0; }
.qty-input{ width:62px; padding:7px 8px; border:1px solid #c9c4be; border-radius:3px;
  background:#fff; font-size:14px; text-align:center; }
.basket-link{ text-align:right; margin:14px 0 0; font-weight:700; }
@media (max-width:820px){
  .cart-form{ justify-content:flex-start; margin-top:8px; }
  .cart-form .btn{ flex:1; }
  .basket-link{ text-align:left; }
}


/* ============================================================
   ABOUT + CONTACT
   ============================================================ */
.lede{ font-size:17.5px; line-height:1.6; color:#2f2f2f; }
.side-card{ background:var(--surface); border:1px solid #e2ded9; border-radius:4px;
  padding:22px 24px; }
.side-card h2{ font-size:16px; margin:22px 0 8px; padding:0; border:0;
  text-transform:uppercase; letter-spacing:.6px; color:#3a3a3a; }
.side-card h2:first-child{ margin-top:0; }
.side-card p{ font-size:14.5px; line-height:1.6; }
.tick-list{ list-style:none; margin:0 0 4px; padding:0; }
.tick-list li{ position:relative; padding-left:24px; margin-bottom:9px;
  font-size:14.5px; line-height:1.5; }
.tick-list li::before{ content:""; position:absolute; left:2px; top:5px;
  width:6px; height:11px; border:solid var(--secondary);
  border-width:0 2px 2px 0; transform:rotate(45deg); }
.side-cta{ margin:18px 0 4px; }
.side-cta .btn{ display:block; text-align:center; }
.side-note{ font-size:13.5px; color:#5a5550; }
.contact-email a{ font-size:17px; font-weight:700; word-break:break-word; }
.contact-address{ line-height:1.7; }

/* Contact form */
.contact-form .field{ margin-bottom:18px; }
.contact-form label{ display:block; font-weight:700; font-size:14.5px; margin-bottom:6px; }
.contact-form .req{ color:#b3261e; }
.contact-form .opt{ font-weight:400; color:#5a5550; font-size:13.5px; }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form select,
.contact-form textarea{
  width:100%; padding:11px 12px; border:1px solid #c9c4be; border-radius:3px;
  background:#fff; font-family:inherit; font-size:15px; color:#2f2f2f; }
.contact-form textarea{ resize:vertical; min-height:130px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:2px solid var(--secondary); outline-offset:1px; border-color:var(--secondary); }
.field-hint{ display:block; font-size:13px; color:#5a5550; margin-top:5px; }
.form-privacy{ font-size:13.5px; color:#5a5550; margin:0 0 16px; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:820px){ .side-card{ margin-top:26px; } }


/* ============================================================
   COMPLETE 12-COLUMN SPAN SET
   Previously only .span4/.span6/.span8 existed, so .span5/.span7
   collapsed to full width and sidebars dropped below content.
   ============================================================ */
.row{ display:flex; flex-wrap:wrap; margin:0 -15px; }
.row > [class^="span"]{ padding:0 15px; box-sizing:border-box; }
.span1{ width:8.3333%; }  .span2{ width:16.6666%; }
.span3{ width:25%; }      .span4{ width:33.3333%; }
.span5{ width:41.6666%; } .span6{ width:50%; }
.span7{ width:58.3333%; } .span8{ width:66.6666%; }
.span9{ width:75%; }      .span10{ width:83.3333%; }
.span11{ width:91.6666%; }.span12{ width:100%; }
@media (max-width:820px){
  .row{ display:block; margin:0; }
  .row > [class^="span"]{ width:100%; padding:0; }
}


/* Thank-you / confirmation page */
.thanks-box{ background:var(--surface); border:1px solid #e2ded9; border-radius:4px;
  padding:34px 36px; margin:10px 0 30px; }
.thanks-box h1{ margin:0 0 12px; }
.thanks-tick{ width:52px; height:52px; border-radius:50%; background:var(--secondary);
  position:relative; margin-bottom:18px; }
.thanks-tick::after{ content:""; position:absolute; left:19px; top:12px;
  width:11px; height:23px; border:solid #fff; border-width:0 3px 3px 0;
  transform:rotate(45deg); }
.thanks-note{ background:#fff; border-left:3px solid var(--secondary);
  padding:12px 16px; font-size:14.5px; }
.thanks-actions{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }
.btn-secondary{ background:#fff !important; color:#2f2f2f !important;
  border:1px solid #c9c4be !important; }
@media (max-width:820px){
  .thanks-box{ padding:26px 20px; }
  .thanks-actions .btn{ flex:1 1 100%; text-align:center; }
}


/* Size landing + framing guide extras */
.size-links{ list-style:none; margin:0 0 6px; padding:0; }
.size-links li{ margin-bottom:7px; font-size:14.5px; }
.size-links a{ font-weight:600; }
.spec-mini{ width:100%; border-collapse:collapse; margin-bottom:6px; }
.spec-mini th{ text-align:left; font-size:13px; text-transform:uppercase;
  letter-spacing:.5px; color:#5a5550; padding:7px 0; vertical-align:top; width:45%; }
.spec-mini td{ padding:7px 0; font-size:14.5px; border-bottom:1px solid #e6e2dd; }
.faq-item{ border-top:1px solid #e6e2dd; padding:14px 0 2px; }
.faq-item:first-child{ border-top:0; }
.faq-item h3{ font-size:16px; margin:0 0 6px; }
.faq-item p{ margin:0 0 8px; }


/* Single-item product page */
.single-price{ font-size:30px; font-weight:700; color:#2f2f2f; margin:4px 0 16px; }
.cart-single{ justify-content:flex-start; margin-bottom:6px; }
.cart-single .btn{ flex:1; }
.spec-product{ margin:20px 0 14px; }
.thumb-strip{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.thumb-strip img{ border:1px solid #e2ded9; border-radius:3px; display:block; }
.hero-hint{ font-size:13px; color:#5a5550; margin:8px 0 0; }


/* ============================================================
   FIXES — nav overflow, heading alignment, mobile buttons
   ============================================================ */

/* (a) #mainnav had height:50px + overflow:hidden, which CLIPPED the
   last nav item (Contact) instead of wrapping it. */
#mainnav{ height:auto !important; overflow:visible !important; }
#mainnav .container{ flex-wrap:wrap; gap:8px 0; padding-top:8px; padding-bottom:8px; }
#fluid-nav{ display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; }
#fluid-nav li{ margin-left:0 !important; }

/* (b) Mobile: hide the inline list, show the generated <select> */
.selectnav{ display:none; }
@media (max-width:820px){
  #fluid-nav{ display:none !important; }
  #mainnav .container{ display:block; }
  #mainnav .brand{ display:block; padding:6px 0; }
}

/* (c) Heading sat OUTSIDE .row, so it lost the -15px gutter and looked
   indented relative to the body text beneath it. */
.page > .container > .product-head,
.page > .container > 
@media (max-width:820px){
  .page > .container > .product-head{ padding-left:0; padding-right:0; }
}

/* (d) Gap above H1 was .page padding + .product-head padding stacking. */
.product-head{ padding:18px 0 8px !important; }
.page{ padding-top:8px !important; }
.breadcrumb + .page .product-head{ padding-top:14px !important; }

/* (e) Mobile: add-to-basket row hit the right edge because .btn had
   flex:1 with no wrapping allowance. */
@media (max-width:820px){
  .cart-form{ flex-wrap:wrap; gap:10px; width:100%; }
  .cart-form .qty-input{ width:78px; flex:0 0 78px; }
  .cart-form .btn{ flex:1 1 auto; min-width:0; width:auto; }
  .cart-single{ justify-content:center; }
  .cart-single .btn{ flex:1 1 100%; }
  td .cart-form{ justify-content:space-between; }
}

/* (f) <select> showed no chosen value on some mobile browsers because
   the UA arrow was suppressed without a replacement. */
.contact-form select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath fill='%235a5550' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:38px; color:#2f2f2f; background-color:#fff; }
.contact-form select:invalid, .contact-form select option[value=""]{ color:#5a5550; }

/* ============================================================
   FIX PASS 2
   ============================================================ */

/* (1) Mobile nav width — the base stylesheet is content-box, so
   width:100% + padding overflowed the container and caused
   horizontal scrolling. Match the Oakford dropdown instead. */
.selectnav{
  box-sizing:border-box !important;
  width:300px !important;
  max-width:100% !important;
  margin:6px 0 2px !important;
  padding:9px 10px !important;
  font-size:16px; font-family:inherit; color:#2f2f2f;
  background-color:#fff; border:1px solid #c9c4be; border-radius:3px;
}
/* Belt and braces: nothing may exceed the viewport width */
html, body{ max-width:100%; overflow-x:hidden; }

/* (2) Legal pages put .legal-body directly in .container with no .row,
   so it missed the 15px gutter the heading had — a 15px mismatch. */
.page > .container > .legal-body{ padding-left:15px; padding-right:15px; }
@media (max-width:820px){
  .page > .container > .legal-body{ padding-left:0; padding-right:0; }
}

/* (3) Single-line logo */
#mainnav .brand img{ display:block; height:32px; width:auto; }

/* ============================================================
   FINAL ALIGNMENT PASS  — authoritative; supersedes earlier patches
   ------------------------------------------------------------
   ROOT CAUSE of the mobile overflow: the base grid sets a FIXED
   .container width (480px <=767px, 320px <=479px). On a 390px
   iPhone the container was 480px — wider than the screen — so the
   nav, the hero buttons and everything else ran off the right
   edge. The dropdown was a symptom, not the cause.
   ============================================================ */

*, *::before, *::after{ box-sizing:border-box; }

/* ---------- One gutter, one left edge, everywhere ---------- */
.breadcrumb > .container,
.page > .container,
.hero > .container,
#mainnav > .container{ padding-left:0; padding-right:0; }

.page > .container > .product-head,
.page > .container > .legal-body,
.hero-inner{ padding-left:0 !important; padding-right:0 !important; }

/* ---------- Desktop: logo shares the content's left edge ---------- */
#mainnav .brand{ float:left; margin-left:0; padding-left:0; }
#mainnav .brand img{ display:block; height:32px; width:auto; }

/* ---------- Fluid container below the desktop grid ---------- */
@media (max-width:979px){
  .container{
    width:auto !important;
    max-width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .row{ margin-left:0 !important; margin-right:0 !important; }
  [class*="span"]{
    float:none !important;
    display:block !important;
    width:auto !important;
    margin-left:0 !important;
  }
  .page > .container > .product-head,
  .page > .container > .legal-body,
  .breadcrumb > .container{ padding-left:0 !important; padding-right:0 !important; }
}

/* ---------- Mobile nav ---------- */
@media (max-width:820px){
  /* logo sat behind the absolutely-positioned dropdown — drop it here,
     it is repeated in the hero and the footer anyway */
  #mainnav .brand{ display:none !important; }
  #mainnav .container{ display:block; padding-top:8px; padding-bottom:8px; }
  #fluid-nav{ display:none !important; }

  .selectnav{
    display:block !important;
    position:static !important;   /* was absolute → escaped the container */
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:10px 12px !important;
    font-size:16px;               /* >=16px stops iOS zooming on focus */
    font-family:inherit; color:#2f2f2f;
    background-color:#fff; border:1px solid #c9c4be; border-radius:4px;
  }
}

/* ---------- Nothing may exceed the viewport ---------- */
html, body{ max-width:100%; overflow-x:hidden; }
img, table{ max-width:100%; }


/* ============================================================
   FINAL ALIGNMENT PASS 2 — measured corrections
   ------------------------------------------------------------
   Measured at 1440px on /framing-guide/:
     .container      left 128
     .product-head   left 128  (correct)
     .row            left 113  (margin-left:-15)
     .span8          margin-left:30 + padding-left:15
     .legal-body     left 158  -> 30px indent vs the heading
   A full-width column must resolve to margin+padding = 15 so its
   text lands back on 128. Multi-column rows are left alone so the
   card grids keep their gutters.
   ============================================================ */
@media (min-width:980px){   /* was 821px — outranked the stacked-width reset
                              and pushed body copy 15px right of the H1 between
                              821-979px. Duplicates the @980px rule below. */
  .page .row > [class*="span"]:first-child{ margin-left:0 !important; padding-left:15px !important; }

  /* Logo shares the content's left edge */
  #mainnav .container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  #mainnav .brand{
    float:none !important;
    margin-left:0 !important;
    padding-left:0 !important;
    flex:0 0 auto !important;
    margin-right:auto !important;   /* pins logo to the left edge whatever justify-content says */
  }
  #mainnav #fluid-nav{ float:none !important; margin:0 !important; }
}


/* ============================================================
   PRODUCT GRID — .prod-grid had no rule at all, so a single card
   stretched to the full 760px column and its image inflated to
   ~950px tall. A fixed max column width keeps cards card-sized
   however many are in the grid.
   ============================================================ */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,260px));
  gap:26px;
  align-items:start;
  margin:18px 0 26px;
}
.prod-card{ margin-bottom:0; max-width:260px; }

/* A-sizes are 1:1.414 — the 4/5 aspect-ratio was cropping the print */
.prod-card img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  display:block;
}
@media (max-width:520px){
  .prod-grid{ grid-template-columns:minmax(0,260px); }
}


/* ============================================================
   GUTTER SYSTEM  — single source of truth for the left edge
   ------------------------------------------------------------
   Measured faults this replaces (page /art-prints/):
     390px  breadcrumb 0   vs h1 16   -> crumb flush to the edge
     900px  brand 53, footer 31 vs h1 16
     1440px footer 158 vs h1/brand/crumb 128
   Footer columns sat 30px inboard because .span* carries
   padding-left:15px on top of margin-left:15/30px.
   ============================================================ */
:root{ --gut:20px; }

/* --- Below the fixed desktop grid: one fluid gutter everywhere --- */
@media (max-width:979px){
  .container{
    width:auto !important; max-width:100% !important;
    padding-left:var(--gut) !important; padding-right:var(--gut) !important;
  }
  .row{ margin-left:0 !important; margin-right:0 !important; }
  [class*="span"]{
    float:none !important; display:block !important;
    width:auto !important;
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;   /* was the 15px that pushed the footer in */
  }
  .page > .container > .product-head,
  .page > .container > .legal-body{ padding-left:0 !important; padding-right:0 !important; }
  .breadcrumb > .container{ padding-left:var(--gut) !important; padding-right:var(--gut) !important; }
}

/* --- Desktop grid: first column resolves back to the container edge --- */
@media (min-width:980px){
  .row > [class*="span"]:first-child{
    margin-left:0 !important;
    padding-left:15px !important;
  }
}

/* --- Logo pinned left at every width where it is visible (821+) --- */
@media (min-width:821px){
  #mainnav .container{
    display:flex !important; align-items:center !important;
  }
  #mainnav .brand{
    float:none !important; margin-left:0 !important; padding-left:0 !important;
    margin-right:auto !important; flex:0 0 auto !important; order:-1 !important;
  }
  #mainnav #fluid-nav{ float:none !important; margin:0 !important; }
}


/* ============================================================
   GUTTER UNIFICATION (final)
   Three separate faults below 980px:
     1. .breadcrumb .container had its padding zeroed  -> left 0
     2. #mainnav .brand escaped the container padding  -> left 0
        below 820px only (hence the logo "jumping" left
        when resizing across that breakpoint)
     3. the shared gutter was 20px, too tight on a phone
   One rule, one variable, every band.
   ============================================================ */
:root{ --gutter:24px; }

@media (max-width:979px){
  .container,
  #mainnav .container,
  .breadcrumb .container,
  #sidebar .container,
  #copyright .container{
    width:auto !important;
    max-width:100% !important;
    padding-left:var(--gutter) !important;
    padding-right:var(--gutter) !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }
  /* brand must sit ON the gutter, never outside it */
  #mainnav .brand{ margin-left:0 !important; padding-left:0 !important; }
  .selectnav{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
}
@media (max-width:420px){ :root{ --gutter:20px; } }

/* ==== PASS3 — footer columns, nav hover, mobile gutter ==== */

/* (a) Footer: replace the legacy fixed-px float grid with flex.
       .span4 carried stale widths (370px/400px) from the old 940px grid,
       so 3 columns exceeded the container and the third wrapped/bunched. */
#sidebar .row{
  display:flex; flex-wrap:wrap; gap:32px 40px;
  float:none; margin-left:0; width:auto;
}
#sidebar .row > .span4{
  float:none !important;
  width:auto !important;
  flex:1 1 200px;
  min-width:0;
  margin-left:0 !important;
}
#sidebar .row::before, #sidebar .row::after{ content:none; }
@media (max-width:820px){
  #sidebar .row{ gap:24px; }
  #sidebar .row > .span4{ flex:1 1 100%; }
}

/* (b) Nav hover: the base colour rule used !important, so the hover rule
       lost and only the .current item ever looked different. */
nav#mainnav #fluid-nav li a:hover,
nav#mainnav #fluid-nav li a:focus-visible{
  color:var(--brand) !important;
}
nav#mainnav #fluid-nav li.current > a{ color:var(--brand) !important; }

/* (c) Roomier phone margins */
:root{ --gutter:32px; }
@media (max-width:979px){ :root{ --gutter:28px; } }
@media (max-width:420px){ :root{ --gutter:24px; } }

/* ==== PASS4 — nav states, select depth, side-card, lightbox caption ==== */

/* 1. Three DISTINCT nav states.
      Before: hover and .current were both var(--brand), so hovering a link
      looked identical to the live-page link and nothing appeared to change. */
nav#mainnav #fluid-nav li a{
  color:var(--chrome-text) !important;          /* resting  — near black   */
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
nav#mainnav #fluid-nav li a:hover,
nav#mainnav #fluid-nav li a:focus-visible{
  color:var(--secondary) !important;            /* hover    — brick brown  */
  border-bottom-color:var(--secondary);
}
nav#mainnav #fluid-nav li.current > a{
  color:var(--brand) !important;                /* live page — burnt orange */
  border-bottom-color:var(--brand);
}
nav#mainnav #fluid-nav li.current > a:hover{
  color:var(--secondary) !important;
  border-bottom-color:var(--secondary);
}

/* 2. Contact form <select>: the base rule forced height:30px while padding
      was 9px top+bottom, so the chosen option was clipped out of view. */
select{
  height:auto !important;
  min-height:46px;
  padding:11px 34px 11px 13px;
  line-height:1.4;
  background-color:#fff;
  color:#333;
  border-radius:4px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23555' d='M0 0h12L6 8z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}
select:focus{ border-color:var(--brand); outline:2px solid var(--brand); outline-offset:1px; }

/* 3. Side card (grey box under Send Message) — was inheriting the grid's
      20px left margin, pushing it out of line with the form above it. */
.side-card{
  box-sizing:border-box;
  margin-left:0 !important;
  width:100%;
}

/* 4. Lightbox caption — white on white read as part of the artwork. */
.lb-modal .lb-frame{ background:#fff; }
.lb-modal figcaption{
  background:#ededed;
  color:#2a2a2a;
  border-top:1px solid #d8d8d8;
  padding:12px 16px;
  margin:0;
  font-size:14px;
  text-align:center;
}
/* ==== PASS5 — contact column alignment ====
   .span5 still carried the old 940px float-grid's 30px gutter margin, so the
   grey side card sat 30px right of the form and H1 above it. Below 980px the
   inherited 15px column padding pushed the form 15px right of everything else. */
.contact-page .row > .span5,
main.page .row > .span5{ margin-left:0 !important; }

@media (max-width:979px){
  main.page .row > .span5,
  main.page .row > .span7{ padding-left:0 !important; padding-right:0 !important; }
}
/* ==== PASS6 — kill residual column padding on stacked rows ==== */
@media (max-width:979px){
  main.page .row{ margin-left:0 !important; margin-right:0 !important; }
  main.page .row > [class*="span"]{
    padding-left:0 !important; padding-right:0 !important;
    margin-left:0 !important; margin-right:0 !important;
  }
}
/* ==== PASS7 — stacked-width content flush with heading & footer ==== */
@media (max-width:979px){
  main.page .legal-body,
  main.page .contact-form,
  main.page .side-card,
  main.page .row,
  main.page .row > *{
    margin-left:0 !important; margin-right:0 !important;
    padding-left:0 !important; padding-right:0 !important;
  }
  main.page .side-card{ padding:20px !important; }
}