@charset "utf-8";
/* ============================================================
   Shop Ice Online Guide - /shop-ice-online-guide/
   see page/shop_ice_online_guide.php
   FAQ accordion styles -> /css/shop_faqs.css
   ============================================================ */

/* ============================================================
   Intro
   No hero on this page, so the page h1 sits in #Intro -
   sized to match an h2 (main.css h1 is 3.8em, built for heroes)
   ============================================================ */
#shopIceOnlineGuide #Intro h1 {
	margin-top:1.2em;
}

/* ============================================================
   Quick Guide - anchor nav
   ============================================================ */
.guide-nav {
	max-width:1000px;
	margin:2.5em auto 0;
	padding:1.1em 1em;
	border-top:1px solid rgba(201,162,78,0.3);
	border-bottom:1px solid rgba(201,162,78,0.3);
}
.guide-nav-hd {
	display:block;
	margin:0 0 0.8em;
	color:#8A8A98;
	font-size:calc(1em - 4px);
	font-weight:500;
	letter-spacing:0.22em;
	text-transform:uppercase;
}
.guide-nav ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:0.2em 0;
	margin:0;
	padding:0;
	list-style:none;
}
.guide-nav li { padding:0; }
.guide-nav li + li:before {
	content:"\00B7";
	padding:0 0.3em;
	color:rgba(201,162,78,0.7);
}
.guide-nav a {
	display:inline-block;
	padding:0.3em 0.55em;
	color:#F2E6AC;
	font-size:calc(1em - 1px);
	letter-spacing:0.04em;
	text-decoration:none;
	transition:color 0.2s linear;
}
.guide-nav a:hover { color:#FFF; text-decoration:underline; text-underline-offset:4px; }

/* ============================================================
   Offer panels
   ============================================================ */
.offer-cards {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:30px;
	max-width:1000px;
	margin:2.5em auto 0;
}
.offer-card {
	flex:1 1 380px;
	max-width:460px;
	padding:2.2em 2em;
	background:#0D0D0D;
	border:1px solid transparent;
	border-radius:8px;
	background:linear-gradient(#0D0D0D,#0D0D0D) padding-box,
			   linear-gradient(110deg,#50462D 0%,#736748 23%,#B5A57B 66%,#50462D 100%) border-box;
	text-align:center;
}
.offer-card h3.offer-card-pc {
	display:block;
	margin:0 0 0.25em;
	color:#C9A24E;
	font-size:2.6em;
	font-weight:600;
	line-height:1;
}
.offer-card .offer-card-sub {
	margin:0 0 0.6em;
	color:#FFF;
	font-family:Cinzel,"Times New Roman",Times,serif;
	font-size:1.3em;
	font-weight:500;
	line-height:130%;
}
.offer-card p { margin:0; line-height:170%; }
.offer-card p b { font-weight: 500; color: #c3c3d6; }

.offer-combine {
	max-width:800px;
	margin:1.5em auto 0;
	padding:1.4em 1.6em;
	font-size: 1.1em;
}
.offer-combine p { line-height:170%; }
.offer-combine p:last-child { margin-bottom:0; }
.offer-combine strong { color:#EEE; font-weight:500; }
.offer-combine .offer-no-code {
	color:#F2E6AC;
	font-size:calc(1em - 3px);
	letter-spacing:0.06em;
	text-transform:uppercase;
}
.offer-combine .offer-no-code b {
	display: block;
	font-size:calc(1em + 1px);
	padding-bottom: 0.2em;
}

/* ============================================================
   How to Order - numbered steps
   ============================================================ */
.guide-steps {
	width:fit-content; /* hugs the longest step so the block centres */
	max-width:800px;
	margin:2.5em auto 0;
	padding:0;
	list-style:none;
	counter-reset:guide-step;
	text-align:left;
}
.guide-steps a { color:#F2E6AC; }
.guide-steps a:hover { color:#FFD24C; }
.guide-steps li {
	counter-increment:guide-step;
	padding:0 0 1.4em 3.6em;
	line-height:170%;
}
.guide-steps li:last-child { padding-bottom:0; }
.guide-steps li:before {
	content:counter(guide-step);
	position:absolute;
	top:0;
	left:0;
	width:2.4em;
	height:2.4em;
	border:1px solid rgba(201,162,78,0.55);
	border-radius:50%;
	color:#C9A24E;
	font-family:Cinzel,"Times New Roman",Times,serif;
	font-size:1em;
	line-height:2.3em;
	text-align:center;
}
.guide-steps strong { color:#F2E6AC; font-weight:500; }

#HowToOrder .txt-col p { color: #F2E6AC; font-weight: 500; margin-top: 2em; }

/* ============================================================
   Choosing Your Ice
   ============================================================ */
.ice-types {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:35px 30px;
	max-width:1200px;
	margin:2.5em auto;
}
.ice-type {
	flex:1 1 320px;
	max-width:360px;
	padding:1.8em 1.6em;
	border-top:1px solid rgba(201,162,78,0.35);
	text-align:left;
}
.ice-type h3 {
	font-size:1.5em;
	margin:0 0 0.5em;
	color: #F2E6AC;
}
.ice-type p { margin:0 0 0.8em; line-height:170%; }
.ice-type p:last-child { margin-bottom:0; }
.ice-type strong { color:#FFF; font-weight:400; }

.guide-img {
	max-width:500px;
	margin:0 auto 0;
}

/* ============================================================
   Delivery / Collection / Returns - info blocks
   ============================================================ */
.guide-blocks {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:30px;
	max-width:1200px;
	margin:2.5em auto 3.5em;
}
.guide-block {
	flex:1 1 300px;
	max-width:360px;
	padding:1.8em 1.6em;
	background:#0B0B0B;
	border:1px solid rgba(201,162,78,0.22);
	border-radius:6px;
	text-align:left;
}
.guide-block h3 {
	font-size:1.3em;
	margin:0 0 0.5em;
}
.guide-block p { margin:0 0 0.8em; line-height:170%; }
.guide-block p:last-child { margin-bottom:0; }
.guide-block strong { color:#F2E6AC; font-weight:500; }

.guide-note {
	max-width:800px;
	margin:2.2em auto 0;
	padding:1.2em 1.4em;
	border-left:3px solid #C9A24E;
	background:rgba(201,162,78,0.06);
	text-align:left;
}
.guide-note p { margin:0; line-height:170%; }

/* ============================================================
   Closing CTA
   ============================================================ */
#ReadyToOrder .guide-strap {
	display:block;
	margin:1.4em 0 0;
	color:#F2E6AC;
	font-family:Cinzel,"Times New Roman",Times,serif;
	font-size:1.25em;
	letter-spacing:0.05em;
}

/* ============================================================
   Responsive
   ============================================================ */
@media only screen and (max-width: 900px) {
	.offer-card { flex-basis:100%; }
	.offer-card h3.offer-card-pc { font-size:2.3em; }
	.offer-card .offer-card-sub { font-size:1.2em; }
	.ice-type { flex-basis:100%; max-width:600px; }
	.guide-block { flex-basis:100%; max-width:600px; }
}
@media only screen and (max-width: 600px) {
	.guide-nav { margin-top:2em; padding:1em 0; }
	.guide-nav ul { flex-direction:column; align-items:stretch; gap:0; }
	.guide-nav li + li:before { display:none; }
	.guide-nav li + li { border-top:1px solid rgba(201,162,78,0.18); }
	.guide-nav a { display:block; padding:0.7em 0.2em; text-align:center; }
	.guide-steps li { padding-left:3.2em; }
	.offer-card { padding:1.8em 1.4em; }
	.ice-type,
	.guide-block { padding:1.5em 1.2em; }
}