/* BRAND TOKENS (Phase 8.1). Gold text on white at body size uses --cc-gold-text (WCAG AA, 5.69:1);
   --cc-gold is for button/accent BACKGROUNDS only. */
:root{
--cc-gold: #8A774E;
--cc-gold-text: #75653F;
--cc-gold-dark: #6B5C39;
--cc-navy: #353A5C;
--cc-black: #000;
--cc-white: #fff;
--cc-font-head: "Prata", Georgia, serif;
--cc-font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
}

body{
font-family: var(--cc-font-body);
font-size: 16px;
line-height: 1.5em;
color: var(--cc-black);
}

input, select, textarea, button{
font-family: var(--cc-font-body);
}

a{
color: var(--cc-gold-text);
text-decoration: underline;
cursor: pointer;
}

a:focus-visible, .button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
outline: 3px solid var(--cc-navy);
outline-offset: 2px;
}

/* ON NAVY BACKGROUNDS THE FOCUS RING IS WHITE (THE FOOTER IS WHITE SINCE 8.9) */
.competition_image_header a:focus-visible{
outline-color: var(--cc-white);
}

a:hover{
text-decoration: underline;
}

h1, h2, h3, h4, h5, h6{
font-family: var(--cc-font-head);
font-weight: 400;
}

h1, h2{
padding-bottom: 20px;
font-size: 40px;
line-height: 1.2;
}

p{
line-height: 1.6em;
}

/* HEADER (Phase 8.9): MEASURED FROM www.cambscuisine.co.uk. Desktop >= 800px: padding 1vw 4vw, logo 98x50,
   nav Nunito Sans 16/24 weight 400 black, 2.2vw between items, right-aligned and wrapping to two rows when it
   does not fit (as on the brand site at 1024), then a gold CTA button. Below 800px: 6vw padding, 30px logo,
   1px-line hamburger that becomes an X, and a full-screen white overlay menu. */
.site_header{
position: relative;
z-index: 20;
background: var(--cc-white);
}

.site_header_inner{
position: relative;
display: flex;
align-items: center;
margin: 0px;
padding: 1vw 4vw;
width: auto;
max-width: none;
box-sizing: border-box;
}

.site_header .logo{
position: relative;
z-index: 2;
margin: 0px;
display: block;
flex: 0 0 auto;
line-height: 0;
}

.site_header .logo img{
display: block;
width: auto;
height: 50px;
max-width: none;
}

.site_nav{
order: 2;
margin-left: auto;
margin-right: 2.6vw;
}

.site_nav ul{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
margin: 0px;
padding: 0px;
list-style: none;
}

.site_nav li{
margin: 0px 0px 0px 2.2vw;
padding: 0px;
}

.site_nav a{
display: flex;
padding: 1.6px 0px;
color: var(--cc-black);
font-size: 16px;
line-height: 24px;
font-weight: 400;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0px calc(100% - 1.6px);
background-size: 0% 1px;
transition: background-size .3s ease;
}

.site_nav a:hover, .site_nav a:focus-visible, .site_nav a[aria-current="page"]{
background-size: 100% 1px;
text-decoration: none;
}

.site_header .basket{
order: 3;
position: relative;
z-index: 2;
margin: 0px;
float: none;
background: var(--cc-gold);
padding: 0px;
flex: 0 0 auto;
}

.site_header .basket a{
display: block;
padding: 14.36px 25.85px;
min-height: 44px;
box-sizing: border-box;
color: var(--cc-white);
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 14.36px;
font-weight: 500;
letter-spacing: .287px;
line-height: normal;
text-decoration: none;
white-space: nowrap;
}

.site_header .basket:hover, .site_header .basket:focus-within{
background: var(--cc-gold-dark);
}

.site_header .basket a:focus-visible{
outline-color: var(--cc-navy);
outline-offset: 3px;
}

.nav_toggle{
display: none;
order: 4;
position: relative;
z-index: 2;
margin: 0px 0px 0px 4px;
padding: 0px;
width: 47px;
height: 44px;
align-items: center;
justify-content: center;
background: transparent;
color: var(--cc-black);
border: 0px;
border-radius: 0px;
cursor: pointer;
}

.nav_toggle:focus-visible{
outline: 3px solid var(--cc-navy);
outline-offset: 2px;
}

/* TWO 1px LINES, 35px WIDE, 11px APART (THE BRAND'S "double line" HAMBURGER); BECOMES AN X WHEN OPEN */
.nav_toggle_bars, .nav_toggle_bars:before, .nav_toggle_bars:after{
display: block;
width: 35px;
height: 1px;
background: transparent;
position: relative;
}

.nav_toggle_bars:before, .nav_toggle_bars:after{
content: "";
position: absolute;
left: 0px;
background: var(--cc-black);
transition: transform .25s ease, top .25s ease, width .25s ease, left .25s ease;
}

.nav_toggle_bars:before{ top: -5.5px; }
.nav_toggle_bars:after{ top: 5.5px; }

.nav_toggle[aria-expanded="true"] .nav_toggle_bars:before{ top: 0px; left: 3px; width: 29px; transform: rotate(45deg); }
.nav_toggle[aria-expanded="true"] .nav_toggle_bars:after{ top: 0px; left: 3px; width: 29px; transform: rotate(-45deg); }

/* THE "Menu" TEXT STAYS AS THE ACCESSIBLE NAME */
.nav_toggle_text{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}

/* PHONE / TABLET MENU */
@media only screen and (max-width : 799px) {

	.site_header_inner{
	padding: 6vw;
	flex-wrap: wrap;
	}

	.site_header .logo img{
	height: 30px;
	}

	.js .nav_toggle{
	display: inline-flex;
	}

	.site_header .basket{
	margin-left: auto;
	}

	.site_header .basket a{
	padding: 10px 14px;
	}

	/* WITHOUT JS THE NAV IS A STATIC LIST UNDER THE HEADER BAR */
	.site_nav{
	order: 5;
	flex: 0 0 100%;
	margin: 12px 0px 0px 0px;
	}

	.site_nav ul{
	display: block;
	}

	.site_nav li{
	margin: 0px;
	}

	.site_nav a{
	display: block;
	padding: 10px 0px;
	}

	/* WITH JS IT BECOMES A FULL-SCREEN WHITE OVERLAY WITH LARGE CENTRED LINKS, AS ON THE BRAND SITE */
	.js .site_nav{
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 1;
	margin: 0px;
	padding: calc(12vw + 44px) 0px 80px 0px;
	box-sizing: border-box;
	background: var(--cc-white);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	}

	.js .site_nav.open{
	display: flex;
	flex-direction: column;
	}

	.js .site_nav ul{
	margin: auto 0px;
	}

	.js .site_nav a{
	display: block;
	padding: 3vw 5vw;
	font-size: min(8.5vw, 48px);
	line-height: 1;
	text-align: center;
	background-image: none;
	}

	.js .site_nav a:hover, .js .site_nav a:focus-visible, .js .site_nav a[aria-current="page"]{
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	}

	html.menu_open, html.menu_open body{
	overflow: hidden;
	}

}

.header_image_wrapper{
position: relative;
width: 100%;
max-height: 50vh;
overflow: hidden;
}

.header_image_wrapper img{
display: block;
width: 100%;
height: auto;
}

.wrapper_960{
margin: 0px auto;
padding: 10px;
position: relative;
background: #FFFFFF;
border: 1px solid #eeeeee;
max-width: 960px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.wrapper_1220{
margin: 0px auto;
position: relative;
width: 100%;
max-width: none;
padding: 0px;
}

.header{
clear: both;
position: relative;
width: 100%;
}

.header p{
text-align: center;
color:#333333;
line-height: 20px;
padding-bottom: 10px;
}

.header p a{
color:#333333;
}

ul.tools{
position: relative;
line-height: 24px;
width: 100%;
display: block;
}

ul.tools li{
position: relative;
float: left;
padding: 0px 10px;
}

ul.tools li.right{
float: right;
}

ul.tools li a{
text-decoration: none;
	font-weight: bold;
}

ul.tools li a:hover{
text-decoration: underline;
}

.wrapper_content{
position: relative;
width: 100%;
margin-bottom: 0px;
}

.content_100{
position: relative;
margin: 0px auto;
padding: 64px 20px 80px 20px;
max-width: 1270px;
box-sizing: border-box;
}

.promo_100{
position: relative;
width: 100%;
margin-bottom: 2%;
}

.promo_100 img{
width: 100%;
}

.heading{
clear: both;
background: #2b2f3a;
color:#FFFFFF;
width: 100%;
font-weight: bold;
margin-bottom: 2%;
-moz-border-radius: 3px;
border-radius: 3px;
}

.promo_content{
	clear: both;
	max-width: 760px;
	margin: 0px auto;
	padding: 0px 0px 24px 0px;
}

.promo_content p{
padding: 0px 0px 20px 0px;
}

.promo_content ul{
padding: 0px 10px 20px 10px;
	margin-left: 30px;
	list-style: circle;
}

/* PRODUCT LIST */

ul.product_list li .add_to_basket{
margin: 10px 10px 0px 10px;
padding: 14px 16px;
min-height: 44px;
box-sizing: border-box;
display: block;
cursor: pointer;
text-align: center;
background: var(--cc-gold);
font-weight: 600;
letter-spacing: .02em;
line-height: 1.5;
border: none;
border-radius: 0;
font-size: 16px;
text-decoration: none;
color: var(--cc-white);
}

ul.product_list li .add_to_basket:hover, ul.product_list li .add_to_basket:focus-visible{
background: var(--cc-gold-dark);
color: var(--cc-white);
}

.product_holder .block_header{
	position: relative;
	padding: 1px 100px 1px 40px;
	background: #dad2c4;
	background-image: url(/images/block_head_cc_logo.png);
	background-repeat: no-repeat;
	background-position: center right 36px;
	margin-bottom: 20px;
}

.product_holder .block_header h1{
margin: 12px 0px;
padding: 13px 0px;
line-height: 24px;
text-transform: uppercase;
border-right: 1px solid #000000;
}

.product_holder h2{
font-family: var(--cc-font-head);
position: relative;
font-weight: 400;
line-height: 28px;
margin-top: 10px;
margin-bottom: 10px;
}

.product_holder ul{
	list-style: circle;
	margin-left: 20px;
}

.product_holder ul li{
	padding-left: 10px;
	padding-bottom: 10px;
}

.product_holder .price_point{
position: relative;
display: block;
font-size: 24px;
font-weight: bold;
line-height: 32px;
	padding: 10px 0px 40px 0px;
}

.product_holder .gift_voucher{
position: relative;
display: block;
font-size: 16px;
font-weight: bold;
line-height: 20px;
margin-top: 4px;
margin-bottom: 4px;
color: #666666;
}

.product_holder .product_right .add_to_basket{
margin-top: 40px;
padding: 16px 28px;
min-height: 44px;
box-sizing: border-box;
cursor: pointer;
text-align: center;
background: var(--cc-gold);
color: var(--cc-white);
border: none;
border-radius: 0;
font-size: 16px;
letter-spacing: .02em;
line-height: 1.5;
text-decoration: none;
font-weight: 600;
}

.product_holder .product_right .add_to_basket:hover, .product_holder .product_right .add_to_basket:focus-visible{
background: var(--cc-gold-dark);
color: var(--cc-white);
}

.product_holder .product_description{
clear: both;
position: relative;
width: 100%;
padding: 30px 0px;
}

.product_holder .product_description p{
padding-bottom: 15px;
}

/* CHECKOUT AND CAMPAIGN FORMS (Phase 8.3; CSS only, markup unchanged) */

.basket_holder, .basket_details, .campaign_details{
position: relative;
width: 100%;
max-width: 760px;
margin: 0px auto;
padding: 0px 0px 24px 0px;
box-sizing: border-box;
}

.basket_holder h1, .basket_details h1, .campaign_details h1{
font-family: var(--cc-font-head);
position: relative;
font-size: 32px;
font-weight: 400;
line-height: 1.25;
padding-bottom: 0px;
margin-bottom: 24px;
}

.basket_holder h2{
font-family: var(--cc-font-head);
position: relative;
font-size: 22px;
font-weight: 400;
line-height: 1.3;
padding-bottom: 0px;
margin-top: 0px;
margin-bottom: 8px;
}

.basket_details h2, .campaign_details h2{
font-family: var(--cc-font-head);
position: relative;
font-size: 22px;
font-weight: 400;
line-height: 1.3;
padding-bottom: 0px;
margin-bottom: 16px;
}

.basket_details h3, .campaign_details h3{
font-family: var(--cc-font-head);
position: relative;
font-size: 22px;
font-weight: 400;
line-height: 1.3;
margin: 32px 0px 8px 0px;
}

.basket_details p, .campaign_details p, .basket_holder p{
margin: 0px 0px 16px 0px;
color: #333333;
}

/* BASKET ROW CONTROLS (AJAX basket-items): AT LEAST 44px TALL */
.basket_holder input[class^="basket_quantity_"]{
box-sizing: border-box;
width: 64px;
height: 44px;
padding: 0px 8px;
vertical-align: middle;
border: 1px solid #767676;
border-radius: 0;
background: var(--cc-white);
color: #333333;
font-size: 16px;
text-align: center;
}

.basket_holder .update_quantity, .basket_holder .remove_item{
display: inline-flex;
align-items: center;
box-sizing: border-box;
min-height: 44px;
margin: 0px;
padding: 0px 8px;
vertical-align: middle;
background: none;
border: 0;
border-radius: 0;
font-family: var(--cc-font-body);
font-size: inherit;
line-height: inherit;
color: var(--cc-gold-text);
text-decoration: underline;
cursor: pointer;
}

.basket_holder .update_quantity:focus-visible, .basket_holder .remove_item:focus-visible{
outline: 3px solid var(--cc-navy);
outline-offset: 2px;
}

.basket_update_message{
position: relative;
padding: 14px 20px;
text-align: center;
margin: 0px auto 32px auto;
max-width: 760px;
width: 100%;
box-sizing: border-box;
background: #E8EFE0;
color: #000;
font-weight: 400;
}

.error_message{
position: relative;
padding: 8px 20px;
margin-bottom: 24px;
background: #FBE6E3;
border-left: 4px solid #B3261E;
width: 100%;
box-sizing: border-box;
}

.error_message p{
padding: 10px 0px !important;
margin: 0px !important;
}

.basket_details label{
display: block;
margin-bottom: 16px;
}

.campaign_details label{
display: block;
margin-bottom: 16px;
}

.break{
margin: 10px 0px 25px 0px;
border-bottom: 1px solid #CCCCCC;
}

.form_input{
font-family: var(--cc-font-body);
height: 52px;
border: 1px solid #767676;
width: 100%;
box-sizing: border-box;
padding: 10px 16px;
margin-bottom: 16px;
border-radius: 0;
background: var(--cc-white);
color:#333333;
	font-size: 16px;
}

.form_textarea{
font-family: var(--cc-font-body);
min-height: 160px;
border: 1px solid #767676;
width: 100%;
box-sizing: border-box;
padding: 16px;
margin-bottom: 16px;
border-radius: 0;
background: var(--cc-white);
color:#333333;
	font-size: 16px;
}

.form_select{
height: 52px;
border: 1px solid #767676;
width: 100%;
box-sizing: border-box;
margin-bottom: 16px;
border-radius: 0;
padding-left: 12px;
background: var(--cc-white);
font-family: var(--cc-font-body);
font-size: 16px;
color:#333333;
}

.form_checkbox{
position: relative;
width: 20px;
height: 20px;
margin: 0px 8px 0px 0px;
vertical-align: middle;
accent-color: var(--cc-gold-dark);
}

.button{
margin: 20px 0px;
display: block;
padding: 16px 28px;
min-height: 44px;
box-sizing: border-box;
line-height: 1.5;
cursor: pointer;
text-align: center;
background: var(--cc-gold);
color: var(--cc-white);
font-family: var(--cc-font-body);
font-size: 16px;
font-weight: 600;
letter-spacing: .02em;
border-radius: 0;
border: none;
text-decoration: none;
width: 100%;
}

.button:hover, .button:focus-visible{
background: var(--cc-gold-dark);
color: var(--cc-white);
}

.blue_button{
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}

.blue_button:hover{
background-color: #46b8da !important;
border-color: #5bc0de !important;
}

/* FOOTER (Phase 8.9, R61): WHITE, MEASURED FROM www.cambscuisine.co.uk. Logo row, then four columns
   (venues span two, then two narrower ones; widths 26.54% 26.54% 17.36% 17.36% of the content box, 11px gap), headings in
   Nunito Sans 16/24 bold uppercase gold, links 16/24 regular, tiny copyright line. Gold TEXT is --cc-gold-text (R56). */
.footer{
position: relative;
width: 100%;
padding: 45px 0px 45px 0px;
background: var(--cc-white);
color: var(--cc-black);
}

.footer_inner, .footer .footer_base, .footer .footer_brand{
margin: 0px;
padding: 0px 5.6vw 0px min(calc(16.8vw - 53px), 25vw);
box-sizing: border-box;
}

.footer .footer_brand{
display: block;
line-height: 0;
}

.footer .footer_brand a{
display: inline-block;
line-height: 0;
}

.footer .footer_brand img{
display: block;
width: auto;
height: 62px;
}

.footer_inner{
display: grid;
grid-template-columns: 23% 23% 18% minmax(0, 1fr);
column-gap: 11px;
row-gap: 40px;
margin-top: 48px;
}

.footer_col{
min-width: 0;
}

.footer_col.footer_venues{
grid-column: span 2;
}

.footer .footer_heading{
margin: 0px 0px 16px 0px;
padding: 0px;
font-family: var(--cc-font-body);
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: normal;
text-transform: uppercase;
color: var(--cc-gold-text);
}

.footer ul{
margin: 0px;
padding: 0px;
list-style: none;
}

.footer ul li{
display: block;
margin: 0px;
padding: 0px;
}

.footer ul li a{
display: inline-block;
padding: 0px;
font-size: 16px;
line-height: 24px;
color: var(--cc-black);
text-decoration: none;
}

.footer ul li a:hover{
text-decoration: underline;
}

/* VENUES: TWO SUB-COLUMNS (4 + 3), EACH NAME LINKS TO THE VENUE'S OWN WEBSITE (8.11, R67) */
.footer .footer_venues ul{
column-count: 2;
column-gap: 11px;
}

.footer .footer_venues ul li{
break-inside: avoid;
}

.footer .footer_venues ul li a{
color: var(--cc-gold-text);
}

/* SISTER COMPANY COLUMN (8.11): LINK THEN LOGO, AS ON THE BRAND SITE (LOGO 140x33) */
.footer .footer_sister .footer_sister_logo{
display: block;
margin-top: 16px;
line-height: 0;
}

.footer .footer_sister .footer_sister_logo img{
display: block;
width: 140px;
height: auto;
max-width: 100%;
}

.footer .footer_base{
margin-top: 80px;
}

/* SOCIAL ICONS (8.x/7.9): SMALL BLACK INLINE SVGs LIKE THE BRAND SITE (20px ICONS), 44px TAP TARGETS */
.footer .footer_social{
display: flex;
gap: 0px;
margin: 0px 0px 8px -12px;
}

.footer .footer_social a{
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--cc-black);
}

.footer .footer_social a:hover{
color: #75653F;
}

.footer .footer_social a:focus-visible{
outline: 2px solid #75653F;
outline-offset: -2px;
}

.footer .footer_copy{
margin: 0px;
font-size: 12px;
line-height: 18px;
color: var(--cc-black);
}

/* NARROW DESKTOP (8.11): VENUES ON THEIR OWN ROW, THE TWO OTHER COLUMNS BELOW */
@media only screen and (min-width : 800px) and (max-width : 1199px) {

	.footer_inner{
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer_col.footer_venues{
	grid-column: 1 / -1;
	}

}

/* TABLET: THE FOUR COLUMNS BECOME TWO ROWS */
@media only screen and (max-width : 799px) {

	.footer_inner, .footer .footer_base, .footer .footer_brand{
	padding-left: 6vw;
	padding-right: 6vw;
	}

	.footer_inner{
	grid-template-columns: 1fr;
	row-gap: 32px;
	}

	.footer_col.footer_venues{
	grid-column: auto;
	}

	.footer .footer_brand img{
	height: 59px;
	}

	.footer .footer_venues ul{
	column-count: 1;
	}

	.footer .footer_base{
	margin-top: 48px;
	}

}

/* TOUCH AND PHONE: 44px TAP TARGETS FOR THE FOOTER LINKS (THE BRAND SITE USES 24px ROWS) */
@media (pointer: coarse), only screen and (max-width : 799px) {

	.footer ul li a{
	padding: 10px 0px;
	}

}

.competition_image_header{
	background: var(--cc-navy);
	text-align: center;
}

.competition_image_header img{
	max-width: 1200px;
	width: 100%;
	height: auto;
}

.clear{
clear: both;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 480px) {
	
	ul.tools li, ul.tools li.right{
	float: none;
	text-align: center;
	line-height: 30px;
	}
	
	/* HIDING CLASSES */
	.hide_sm{
		display: none;
	}
	 
	.hide_md{
		display: none;
	}
	
	.hide_lg{
		display: none;
	}

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 481px) and (max-width : 660px) {
	
	/* HIDING CLASSES */
	.hide_md{
		display: none;
	}
	
	.hide_lg{
		display: none;
	}

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 661px) and (max-width : 800px) {
	
	/* HIDING CLASSES */
	.hide_lg{
		display: none;
	}

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 1080px) and (max-width : 1290px) {
	

}

@media only screen and (max-width : 389px) {

	.site_header .basket a{
	padding: 10px 8px;
	font-size: 13px;
	}

}


/* ============================================================
   PHASE 8.3: PAGE LAYOUTS IN THE BRAND LOOK
   Full-width bands, Prata headings, gold-text kickers, flat cards.
   ============================================================ */

.kicker{
margin: 0px 0px 12px 0px;
padding: 0px;
font-size: 14px;
font-weight: 700;
line-height: 1.5;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cc-gold-text);
}

.band{
width: 100%;
padding: 80px 0px;
background: var(--cc-white);
}

.band_inner{
margin: 0px auto;
padding: 0px 20px;
max-width: 1270px;
box-sizing: border-box;
}

.band_navy{
background: var(--cc-navy);
color: var(--cc-white);
}

.band_navy h1, .band_navy h2, .band_navy h3{
color: var(--cc-white);
}

/* GOLD TEXT IS NEVER USED ON NAVY: KICKERS AND LINKS GO PALE */
.band_navy .kicker{
color: #E6DFCB;
}

.band_navy a{
color: var(--cc-white);
}

.band_navy a:focus-visible{
outline-color: var(--cc-white);
}

.content_100.content_bands{
padding: 0px;
max-width: none;
}

/* INTRO COLUMN (HOME AND VENUE PAGES) */
.band_intro{
padding-bottom: 48px;
text-align: center;
}

.band_intro .block_header, .band_intro .promo_content{
max-width: 760px;
margin-left: auto;
margin-right: auto;
}

.band_intro .promo_content{
padding-bottom: 0px;
}

.band_intro .promo_content p{
padding-bottom: 0px;
}

.band_intro .promo_content p + p{
margin-top: 16px;
}

.band_vouchers{
padding-top: 32px;
}

.band_venues .block_header, .band_venues .promo_content{
text-align: center;
}

.band_venues{
padding-bottom: 48px;
}

.band_venues .promo_content{
max-width: 760px;
margin: 0px auto;
}

.band_venues .promo_content p{
padding-bottom: 0px;
color: var(--cc-white);
}

/* 8.10: LOGOS SIT ON WHITE, DIRECTLY BELOW THE NAVY INTRO */
.band_logos{
padding-top: 56px;
}

.block_header{
max-width: 760px;
margin: 0px auto;
}

.block_header h1, .block_header h2{
padding-bottom: 20px;
}

/* VOUCHER GRID: FLAT CARDS */
ul.product_list{
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin: 0px;
padding: 0px 0px 0px 0px;
width: 100%;
list-style: none;
}

ul.product_list > .clear{
display: none;
}

ul.product_list li{
position: relative;
display: flex;
flex-direction: column;
margin: 0px;
padding: 0px 0px 16px 0px;
float: none;
width: auto;
background: var(--cc-white);
border: 1px solid #E2DDD0;
border-radius: 0;
box-shadow: none;
}

ul.product_list li .img_holder{
position: relative;
padding: 16px 16px 0px 16px;
display: block;
}

ul.product_list li .img_holder a{
display: block;
line-height: 0;
}

ul.product_list li .img_holder img{
display: block;
width: 100%;
height: auto;
border-radius: 0;
transition: none;
}

ul.product_list li:hover .img_holder img{
transform: none;
}

ul.product_list li .title_holder{
position: relative;
flex: 1 1 auto;
padding: 16px 16px 0px 16px;
height: auto;
line-height: 1.4;
text-align: center;
font-weight: 600;
}

ul.product_list li .title_holder h3, ul.product_list li .price_holder h3{
margin: 0px;
padding: 0px;
font-family: var(--cc-font-body);
font-size: 16px;
line-height: 1.4;
}

ul.product_list li .title_holder h3{
font-weight: 600;
}

ul.product_list li .title_holder a{
color: var(--cc-black);
text-decoration: none;
}

ul.product_list li .title_holder a:hover{
text-decoration: underline;
}

ul.product_list li .price_holder{
position: relative;
padding: 8px 16px 0px 16px;
height: auto;
text-align: center;
}

ul.product_list li .price_holder a{
color: var(--cc-gold-text);
font-size: 18px;
font-weight: 700;
text-decoration: none;
}

ul.product_list li .add_to_basket{
margin: 14px 16px 0px 16px;
}

/* VENUE LOGO TILES */
.venue_grid{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin-top: 16px;
}

.venue_grid .grid_item{
flex: 0 0 calc(25% - 18px);
box-sizing: border-box;
text-align: center;
}

.venue_grid .grid_item a{
display: block;
padding: 16px;
line-height: 0;
outline-offset: 2px;
transition: opacity .15s ease;
}

.venue_grid .grid_item a:hover{
opacity: .8;
}

.venue_grid .grid_item a:focus-visible{
outline: 3px solid var(--cc-navy);
outline-offset: 2px;
}

.venue_grid .grid_item img{
display: block;
width: 100%;
height: auto;
}

/* PRODUCT PAGE */
.content_100.product{
max-width: 1270px;
padding-top: 64px;
}

.content_100.product .product_holder{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "image details" "desc desc";
column-gap: 64px;
align-items: start;
}

.content_100.product .product_left{
grid-area: image;
float: none;
width: 100%;
padding: 0px;
}

.content_100.product .product_left img{
display: block;
width: 100%;
height: auto;
}

.content_100.product .product_right{
grid-area: details;
float: none;
width: auto;
margin: 0px;
}

.content_100.product .product_right h1{
padding-bottom: 16px;
}

.product_holder .price_point{
display: block;
padding: 8px 0px 24px 0px;
font-family: var(--cc-font-head);
font-size: 36px;
font-weight: 400;
line-height: 1.2;
color: var(--cc-gold-text);
}

.product_holder .gift_voucher{
margin: 0px 0px 8px 0px;
font-size: 16px;
font-weight: 600;
color: #4D4D4D;
}

.content_100.product .product_right .add_to_basket{
display: inline-block;
margin-top: 0px;
}

/* "GOOD TO KNOW" FACT LIST (PRODUCT PAGES, 8.6) */
.product_holder .good_to_know{
margin: 32px 0px 0px 0px;
padding: 24px 0px 0px 0px;
border-top: 1px solid #E2DDD0;
}

.product_holder .good_to_know h2{
margin: 0px 0px 12px 0px;
padding: 0px;
font-family: var(--cc-font-head);
font-size: 22px;
font-weight: 400;
line-height: 1.3;
}

.product_holder .good_to_know ul{
margin: 0px;
padding: 0px;
list-style: none;
}

.product_holder .good_to_know li{
position: relative;
margin: 0px;
padding: 0px 0px 10px 28px;
list-style: none;
}

.good_to_know li:before{
content: "";
position: absolute;
left: 4px;
top: .55em;
width: 8px;
height: 8px;
background: var(--cc-gold);
}

.product_holder .good_to_know .good_to_know_more{
margin: 0px;
padding: 4px 0px 0px 0px;
}

.content_100.product .product_description{
grid-area: desc;
max-width: 760px;
padding: 48px 0px 0px 0px;
}

.product_holder .product_description p{
padding-bottom: 16px;
}

/* INFO PAGES: READABLE TEXT COLUMN */
.content_100:not(.product):not(.content_bands) .product_holder .product_description{
max-width: 760px;
margin: 0px auto;
padding: 0px;
}

.product_description{
overflow-wrap: anywhere;
}

.product_description h1{
padding-bottom: 24px;
}

.product_description ul{
margin: 0px 0px 16px 24px;
list-style: disc;
}

.product_description ul li{
padding-bottom: 8px;
}

.product_description table{
width: 100%;
margin: 16px 0px 0px 0px;
border-collapse: collapse;
}

.product_description table td{
padding: 10px 12px;
border: 1px solid #CCCCCC;
vertical-align: top;
overflow-wrap: anywhere;
}

.product_description table thead td{
font-weight: 700;
background: #F3F0E8;
}

/* CAMPAIGN AND SUCCESS PAGES */
.campaign_details .button, .basket_details .button{
margin: 24px 0px 0px 0px;
}

.campaign_details .ajax_loader p{
text-align: center;
}

/* TABLET */
@media only screen and (max-width : 999px) {

	ul.product_list{
	grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.venue_grid .grid_item{
	flex-basis: calc(33.333% - 16px);
	}

	.content_100.product .product_holder{
	column-gap: 40px;
	}

}

/* PHONE */
@media only screen and (max-width : 660px) {

	.band{
	padding: 48px 0px;
	}

	.band_intro{
	padding-bottom: 32px;
	}

	.band_vouchers{
	padding-top: 16px;
	}

	.content_100{
	padding: 40px 20px 48px 20px;
	}

	.content_100.product{
	padding-top: 32px;
	}

	h1, h2{
	font-size: 28px;
	}

	.block_header h1, .block_header h2{
	padding-bottom: 16px;
	}

	.basket_holder h1, .basket_details h1, .campaign_details h1{
	font-size: 26px;
	}

	ul.product_list{
	gap: 12px;
	}

	ul.product_list li .img_holder{
	padding: 10px 10px 0px 10px;
	}

	ul.product_list li .title_holder{
	padding: 10px 10px 0px 10px;
	}

	ul.product_list li .price_holder{
	padding: 6px 10px 0px 10px;
	}

	ul.product_list li .add_to_basket{
	margin: 12px 10px 0px 10px;
	padding: 12px 8px;
	}

	.venue_grid{
	gap: 12px;
	}

	.venue_grid .grid_item{
	flex-basis: calc(50% - 6px);
	}

	.venue_grid .grid_item a{
	padding: 10px;
	}

	.content_100.product .product_holder{
	display: block;
	}

	.content_100.product .product_left{
	margin-bottom: 24px;
	}

	.content_100.product .product_right .add_to_basket{
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	}

	.content_100.product .product_description{
	padding-top: 32px;
	}

	.product_holder .price_point{
	font-size: 32px;
	}

			.basket_update_message{
	margin-bottom: 24px;
	}

}

@media only screen and (min-width : 1291px) {

	.band_inner, .content_100{
	padding-left: 10px;
	padding-right: 10px;
	}

}

/* ============================================================
   PHASE 8.9: ADD-TO-BASKET MODAL (native <dialog>, replaces the green bar)
   ============================================================ */

.basket_modal:not([open]){
display: none;
}

.basket_modal{
width: calc(100% - 32px);
max-width: 460px;
margin: auto;
padding: 0px;
border: 0px;
border-top: 4px solid var(--cc-gold);
border-radius: 0px;
background: var(--cc-white);
color: var(--cc-black);
box-shadow: none;
overflow: visible;
}

.basket_modal::backdrop{
background: rgba(53, 58, 92, .72);
}

/* FALLBACK WHEN showModal() IS NOT AVAILABLE: CENTRED FIXED BOX WITH A FAKE BACKDROP */
.basket_modal.no_native[open]{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0px;
z-index: 1000;
box-shadow: 0 0 0 100vmax rgba(53, 58, 92, .72);
}

.basket_modal_box{
padding: 32px 32px 28px 32px;
text-align: center;
}

.basket_modal_icon{
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin: 0px auto 16px auto;
background: var(--cc-gold);
color: var(--cc-white);
}

.basket_modal_icon .icon_alert{
display: none;
}

.basket_modal .basket_modal_title{
margin: 0px 0px 16px 0px;
padding: 0px;
font-size: 28px;
line-height: 1.25;
}

.basket_modal_product{
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 0px 0px 12px 0px;
padding: 12px 0px;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
text-align: left;
}

.basket_modal_image{
display: block;
flex: 0 0 auto;
width: 72px;
height: 72px;
object-fit: cover;
}

.basket_modal_image[hidden]{
display: none;
}

.basket_modal_product_text{
margin: 0px;
min-width: 0;
line-height: 1.4;
overflow-wrap: anywhere;
}

.basket_modal_name{
display: block;
font-weight: 700;
}

.basket_modal_price{
display: block;
}

.basket_modal .basket_modal_message{
margin: 0px 0px 24px 0px;
}

.basket_modal_actions{
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}

.basket_modal_close, .basket_modal_checkout{
flex: 1 1 160px;
box-sizing: border-box;
min-height: 52px;
padding: 14px 20px;
border: 1px solid var(--cc-gold);
border-radius: 0px;
font-family: var(--cc-font-body);
font-size: 16px;
font-weight: 700;
letter-spacing: .02em;
line-height: 1.5;
text-align: center;
text-decoration: none;
cursor: pointer;
}

.basket_modal_close{
background: var(--cc-white);
color: var(--cc-gold-text);
border-color: var(--cc-gold-text);
}

.basket_modal_close:hover{
background: #f4f1ea;
}

.basket_modal_checkout, .basket_modal a.basket_modal_checkout:hover{
background: var(--cc-gold);
color: var(--cc-white);
text-decoration: none;
}

.basket_modal a.basket_modal_checkout:hover{
background: var(--cc-gold-dark);
border-color: var(--cc-gold-dark);
}

.basket_modal_close:focus-visible, .basket_modal_checkout:focus-visible{
outline: 3px solid var(--cc-navy);
outline-offset: 2px;
}

/* ERROR STATE: SAME DIALOG, RED ACCENT, NO PRODUCT / CHECKOUT LINK */
.basket_modal.is_error{
border-top-color: #B3261E;
}

.basket_modal.is_error .basket_modal_icon{
background: #B3261E;
}

.basket_modal.is_error .icon_tick, .basket_modal.is_error .basket_modal_product, .basket_modal.is_error .basket_modal_checkout{
display: none;
}

.basket_modal.is_error .icon_alert{
display: block;
}

@media only screen and (max-width : 480px) {

	.basket_modal_box{
	padding: 24px 20px 20px 20px;
	}

	.basket_modal_close, .basket_modal_checkout{
	flex-basis: 100%;
	}

}

@media (prefers-reduced-motion: no-preference) {

	.basket_modal[open]{
	animation: basket_modal_in .18s ease-out;
	}

	@keyframes basket_modal_in{
		from{ opacity: 0; transform: translateY(8px); }
		to{ opacity: 1; transform: none; }
	}

}

/* ============================================================
   PHASE 8.9: CHECKOUT PAGE (templates/home/checkout_stripe.html)
   Two columns on desktop (details left, sticky order summary + Pay right), one column below 900px
   in DOM order (details, then the order summary with the Pay button). Square corners, 48px fields,
   1px #767676 borders (3:1 or better against white).
   ============================================================ */

.checkout .checkout_title{
margin: 0px 0px 32px 0px;
text-align: left;
}

.checkout .basket_update_message{
max-width: none;
margin: 0px 0px 24px 0px;
text-align: left;
}

.checkout_layout{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
column-gap: 56px;
align-items: start;
}

.checkout .basket_details, .checkout .basket_holder{
max-width: none;
margin: 0px;
padding: 0px;
}

.checkout .basket_holder h2, .checkout .basket_details h2{
margin: 0px 0px 16px 0px;
font-size: 26px;
line-height: 1.25;
}

.checkout_section{
margin: 0px 0px 40px 0px;
padding: 0px;
border: 0px;
}

.checkout_section > p, .checkout_newsletter p{
margin: 0px 0px 20px 0px;
color: #333333;
}

.checkout_required_note{
font-size: 14px;
}

.checkout .req{
color: #B3261E;
}

.checkout .field{
margin: 0px 0px 20px 0px;
}

.checkout .field label{
display: block;
margin: 0px 0px 6px 0px;
font-weight: 600;
color: var(--cc-black);
}

.checkout .form_input, .checkout .form_textarea{
display: block;
height: 48px;
margin: 0px;
padding: 10px 14px;
border: 1px solid #767676;
border-radius: 0px;
background: var(--cc-white);
color: var(--cc-black);
font-size: 16px;
line-height: 1.5;
}

.checkout .form_textarea{
height: auto;
min-height: 120px;
resize: vertical;
}

.checkout .form_input:focus, .checkout .form_textarea:focus{
border-color: var(--cc-navy);
outline: 3px solid var(--cc-navy);
outline-offset: 1px;
}

.checkout .form_input.is_invalid{
border-color: #B3261E;
box-shadow: inset 0 0 0 1px #B3261E;
}

.checkout .field_hint{
margin: 6px 0px 0px 0px;
font-size: 14px;
color: #595959;
}

.checkout .field_error{
margin: 6px 0px 0px 0px;
font-size: 14px;
font-weight: 600;
color: #B3261E;
}

.checkout .field_error[hidden]{
display: none;
}

/* "DID YOU MEAN ...?" EMAIL HINT */
.checkout .email_suggest{
margin: 6px 0px 0px 0px;
font-size: 14px;
color: #333333;
}

.checkout .email_suggest[hidden]{
display: none;
}

.checkout .email_suggest_use{
min-height: 44px;
padding: 0px 4px;
border: 0;
background: none;
font: inherit;
font-weight: 600;
color: var(--cc-gold-text);
text-decoration: underline;
cursor: pointer;
}

.checkout .email_suggest_use:focus-visible{
outline: 3px solid var(--cc-navy);
outline-offset: 2px;
}

.checkout .check_row{
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
margin: 0px;
cursor: pointer;
}

.checkout .check_row .form_checkbox{
flex: 0 0 auto;
margin: 0px;
}

.checkout .error_message{
margin: 0px 0px 32px 0px;
}

.checkout .error_message .error_list{
margin: 0px 0px 12px 0px;
padding: 0px 0px 0px 20px;
}

.checkout .error_message .error_list a{
display: inline-block;
padding: 6px 0px;
color: #8C1D18;
}

.checkout .error_message:focus{
outline: 3px solid var(--cc-navy);
outline-offset: 2px;
}

.checkout_server_errors:focus{
outline: none;
}

/* ORDER SUMMARY */
.checkout_side{
position: sticky;
top: 24px;
padding: 28px 28px 24px 28px;
background: var(--cc-white);
border: 1px solid #D9D9D9;
border-top: 4px solid var(--cc-gold);
}

.checkout .basket_line{
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
column-gap: 16px;
padding: 16px 0px;
border-bottom: 1px solid #E3E3E3;
}

.checkout .basket_line:first-child{
padding-top: 0px;
}

.checkout .basket_line_image{
display: block;
width: 72px;
height: 72px;
object-fit: cover;
border: 1px solid #E3E3E3;
}

.checkout .basket_holder p{
margin: 0px;
}

.checkout .basket_line_name{
font-weight: 700;
line-height: 1.35;
overflow-wrap: anywhere;
}

.checkout .basket_line_name a{
display: inline-block;
padding: 11px 0px;
margin: -11px 0px;
color: var(--cc-black);
text-decoration: none;
}

.checkout .basket_line_name a:hover{
text-decoration: underline;
}

.checkout .basket_line_price{
margin-top: 2px;
color: #333333;
}

.checkout .basket_line_controls{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin-top: 8px;
}

.checkout .basket_holder .basket_line_controls input[class^="basket_quantity_"]{
width: 56px;
}

.checkout .basket_holder .update_quantity, .checkout .basket_holder .remove_item{
padding: 0px 6px;
}

.checkout .basket_total{
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 20px 0px 4px 0px;
font-size: 18px;
}

.checkout .basket_total strong{
font-family: var(--cc-font-head);
font-size: 28px;
font-weight: 400;
}

.checkout .basket_empty{
padding: 8px 0px;
text-align: center;
}

.checkout .basket_empty .basket_empty_title{
margin-bottom: 8px;
font-family: var(--cc-font-head);
font-size: 24px;
}

.checkout .basket_empty .button{
margin: 24px 0px 20px 0px;
text-decoration: none;
}

.checkout .basket_empty .basket_empty_hint{
font-size: 14px;
color: #595959;
}

/* PAY */
.checkout .checkout_pay{
padding-top: 20px;
}

.checkout .checkout_button{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 56px;
margin: 0px;
padding: 14px 20px;
border: 0px;
border-radius: 0px;
background: var(--cc-gold);
color: var(--cc-white);
font-family: var(--cc-font-body);
font-size: 17px;
font-weight: 700;
letter-spacing: .02em;
cursor: pointer;
}

.checkout .checkout_button:hover{
background: var(--cc-gold-dark);
}

.checkout .checkout_button:focus-visible{
outline: 3px solid var(--cc-navy);
outline-offset: 3px;
}

.checkout .lock_icon{
flex: 0 0 auto;
}

.checkout .checkout_pay_note{
margin: 12px 0px 0px 0px;
text-align: center;
font-size: 14px;
color: #595959;
}

.checkout .loading_gif p{
margin: 4px 0px 0px 0px;
font-size: 14px;
color: #333333;
}

@media only screen and (max-width : 899px) {

	.checkout_layout{
	grid-template-columns: minmax(0, 1fr);
	row-gap: 16px;
	}

	.checkout_side{
	position: static;
	padding: 20px 16px 20px 16px;
	}

	.checkout .checkout_title{
	margin-bottom: 24px;
	}

}

/* EMPTY BASKET: THE FORM IS HIDDEN, THE FRIENDLY MESSAGE SITS ALONE IN THE MIDDLE */
.checkout_layout:has(.basket_empty){
grid-template-columns: minmax(0, 520px);
justify-content: center;
}

.checkout_layout:has(.basket_empty) .checkout_main, .checkout_layout:has(.basket_empty) .checkout_pay{
display: none;
}

.checkout_layout:has(.basket_empty) .checkout_side{
position: static;
border-top-width: 1px;
border-top-color: #D9D9D9;
}


/* ============================================================
   PHASE 8.6: GIFT VOUCHER Q&A (HOME PAGE, NATIVE <details>)
   ============================================================ */

/* 8.10: NAVY BAND, WHITE TEXT, LIGHT DIVIDERS (NO GOLD TEXT ON NAVY, R56) */
.band_faq .block_header{
text-align: center;
}

.faq_list{
max-width: 760px;
margin: 16px auto 0px auto;
border-top: 1px solid rgba(255,255,255,.35);
}

.faq_item{
border-bottom: 1px solid rgba(255,255,255,.35);
}

.faq_item summary{
position: relative;
display: block;
padding: 20px 48px 20px 0px;
font-family: var(--cc-font-head);
font-size: 20px;
line-height: 1.4;
color: var(--cc-white);
cursor: pointer;
list-style: none;
}

.faq_item summary::-webkit-details-marker{
display: none;
}

/* SQUARE PLUS / MINUS IN THE PALE TINT, DRAWN WITH TWO BARS */
.faq_item summary:before, .faq_item summary:after{
content: "";
position: absolute;
right: 8px;
top: 50%;
width: 16px;
height: 2px;
margin-top: -1px;
background: #E6DFCB;
}

.faq_item summary:after{
transform: rotate(90deg);
}

.faq_item[open] summary:after{
transform: none;
}

.faq_item summary:focus-visible{
outline: 3px solid var(--cc-white);
outline-offset: 2px;
}

.faq_item summary:hover{
color: #E6DFCB;
}

.faq_answer{
padding: 0px 48px 20px 0px;
color: #F2F0EA;
}

.faq_answer p{
margin: 0px;
padding: 0px;
color: #F2F0EA;
}

.faq_answer a{
color: var(--cc-white);
text-decoration: underline;
}

.faq_answer a:hover{
color: #E6DFCB;
}

@media only screen and (max-width : 660px) {

	.band_venues{
	padding-bottom: 32px;
	}

	.band_logos{
	padding-top: 36px;
	}

	.faq_item summary{
	padding: 16px 40px 16px 0px;
	font-size: 18px;
	}

	.faq_answer{
	padding-right: 0px;
	}

}