/* Style Over-Ride file for Shop Template. */

/* ############ Size of site logo image */
/* (For reference the entire desktop header is 127px high, unless there is a massive logo present) */
header .logo-icon img
{ 
	width:  auto !important; /* <<< mobile logo width */
	height: 71px !important; 
}
@media(min-width:467px){header .logo-icon img
{ 
	width:  auto !important; /* <<< tablet logo width */
	height: 71px !important; 
}}
@media(min-width:992px){header .logo-icon img
{ 
	width:  auto !important; /* <<< desktop logo width */
	height: 71px !important; 
}}
/* Gap between logo and top/bottom of screen  */
header div.logo-container 
{
	margin-top: 5px !important; /* <<< gap from top for mobile/tablet */
	margin-bottom: 5px !important; /* <<< gap from bottom for mobile/tablet */
}
@media(min-width:992px){header div.logo-container 
{
	margin-top: 10px !important; /* <<< gap from top for desktop */
	margin-bottom: 0 !important; /* <<< gap from bottom for desktop */
}}

/* ############ Mobile menu colours */
header section.slice_Header_L a.slicknav_btn
{
	background-color: #f5f5f5 !important; /* <<< colour of the menu bar */
}
header section.slice_Header_L .slicknav_icon-bar
{
	background-color: #4acfc7 !important; /* <<< colour of the menu icon */
}
header section.slice_Header_L div.SlickNavCloseIcon
{
	color: #4acfc7 !important; /* <<< colour of the menu close icon */
}

/* ############ Desktop/Mobile menu hover-over text-link color, top-link icons colour, footer email-link text color */
header i::before,
header li:hover > a,
header li:hover > a > a,
footer .footer-column-3 a
{
	color: #129dc0 !important; /* <<< header/footer icon/text-link color */
}

/* ############ Search box background colour */
header div.search-overlay
{
	background-color: #49616b !important; /* <<< Search box background colour */
}

/* ############ Quick branding of slice header-text. (All styles are outside of article content.) */
header section.slice_Header_L .logo-name a
{
	color: #2c4049 !important; /* <<< a *dark* text colour, suitable for a *white* background */
}

/* ############ Various background colours */
header section.slice_Header_L
{
	background-color: white !important; /* <<< *light* header background colour here */  	
}
@media(min-width:992px){
  header section.slice_Header_L {border-bottom:1px solid #dddddd;}
}
footer section.slice_Footer_L, footer section.slice_FooterTop_L
{
	background-color: #dddddd !important; /* <<< *light* footer background colour here */
}
footer section.slice_Footer_L .footerbar {border-top-color: white !important;}

footer {background-color: #dddddd !important; padding: 0 10px !important;}

section.slice_ShopCatNav div.slicknav_menu ul.slicknav_nav a,
section.slice_ShopCatNav div.slicknav_menu ul.slicknav_nav a.slicknav_item  {padding: 0 20px;}

/* Fixes for input box issues */
body.OnSmallAppleDevice input[type="text"],
body.OnSmallAppleDevice textarea
{-webkit-appearance: none !important;}

/* Code for Shop HotPicks */
section.slice_ShopHotPicks h3 {width:100%;text-align:center; margin-top:20px;}
section.slice_ShopHotPicks img {width:auto !important; max-width:100%;}
body.bOnIE section.slice_ShopHotPicks img {max-width:240px;}
section.slice_ShopHotPicks div.ShopModuleHotPicks {
	margin:10px 10px 40px;
    display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:stretch;
}
section.slice_ShopHotPicks div.ShopModuleHotPicks > div:first-child,
section.slice_ShopHotPicks div.ShopModuleHotPicks > div:last-child {
	background-color: #ccffcc;
	border:1px solid #00ff00;
	border-radius:20px;
	padding:10px;		
}
section.slice_ShopHotPicks div.ShopModuleHotPicks > div:first-child table td:first-child,
section.slice_ShopHotPicks div.ShopModuleHotPicks > div:last-child table td:first-child {width:50%;padding-right:10px;}
section.slice_ShopHotPicks div.ShopModuleHotPicks input.sitebutton {
  background-color: #129dc0; border-color: #129dc0;
}
section.slice_ShopHotPicks div.ShopModuleHotPicks table table {
  margin-top:10px !important;
}
@media (max-width:767px) {
  	section.slice_ShopHotPicks div.ShopModuleHotPicks {display:block;}
	section.slice_ShopHotPicks div.ShopModuleHotPicks > div {width:100% !important; float:none !important;}
	section.slice_ShopHotPicks div.ShopModuleHotPicks > div:first-child {margin-bottom:20px;}
	section.slice_ShopHotPicks div.ShopModuleHotPicks > div:nth-child(2) {display:none;}
}

/* For big shops: Code to show the item type filter menu */
section.slice_ShopItemList div.ShopModuleItemsList span[id$="_ctlAZNavigator"] table { width: 100% !important;}
section.slice_ShopItemList div.ShopModuleItemsList span[id$="_ctlAZNavigator"] table tr:first-child td:first-child { display: initial; }
@media (max-width:767px) {
	section.slice_ShopItemList div.ShopModuleItemsList span[id$="_ctlAZNavigator"] table tr:last-child td {padding-top:10px;}
}
/* keep sorting ddls visible on the page. */
section.slice_ShopItemList div.ShopModuleItemsList > span[id$="_ctlAZNavigator"] > div.BelowTabs > div:last-child { display: block; }
section.slice_ShopItemList div.ShopModuleItemsList > span[id$="_ctlAZNavigator"] > div.BelowTabs > div:nth-child(2) { display: none; }

/* Fix reviews */
/* Star images in reviews */
section.slice_ShopItemList div.ShopModuleItemsList div.ItemsWrapper > div[id] div.ShopItemsRating img,
section.slice_ShopItemList div.ShopModuleItemsList div.ItemsWrapper > div[id] span img[src="/Shop/Images/RatingStarSmall.gif"],
section.slice_ShopItemDetails div.ShopModuleItemReview img,
section.slice_ShopHotPicks table td:last-child img 
{display:inline;margin-bottom:4px;}

section.slice_ShopItemList div.ShopItemsRating {margin-top:5px;}
section.slice_ShopItemReviews div.ShopModuleItemReview {background-color:#eeeeee; padding:20px 10px;margin-bottom:20px;}
section.slice_ShopItemReviews h3 {word-break:break-all;}
section.slice_ShopItemReviews table td {width:auto !important;}
section.slice_ShopItemReviews div[id$=_pnlCommentForm] table td:first-child:not([colspan]) {text-align:right;padding-right:5px;}
section.slice_ShopItemReviews div.ShopModuleItemReview table.gridstyle table.gridstyle {border-collapse:collapse;border:1px solid #bbbbbb;margin-bottom:10px;}
section.slice_ShopItemReviews div.ShopModuleItemReview table.gridstyle table.gridstyle > tbody > tr > td {border:1px solid #bbbbbb;}
section.slice_ShopItemReviews div.ShopModuleItemReview img[src="/images/abusive.gif"] {display:block;margin-left:auto;}

/* Voucher codes */
section.slice_ShopCheckOut div#divVoucherCode {
	background-color:#eeeeee;
	padding:10px 10px 20px !important; 
	margin: 20px 0 0;
}
section.slice_ShopCheckOut div#divVoucherCode h2 {line-height:1; padding:0 !important;}
section.slice_ShopCheckOut div#divVoucherCode table[id$=_dgVouchers] {display:none;}
section.slice_ShopCheckOut div#divVoucherCode input.button {margin:5px 0 0 10px;}

/* Shop Items on Checkout page */
section.slice_ShopCheckOut table[id$=_dgCartPageItems] {margin:0 auto;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] table {background-color:#eeeeee;padding:3px;border:1px #bbbbbb solid !important;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] > tbody > tr:first-child {background-color:white;} /* empty row at top of the table */
section.slice_ShopCheckOut table[id$=_dgCartPageItems] hr {display:none;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] nobr {white-space:normal !important;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] ul {padding-left:20px;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] table td {width:auto !important;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] table td:last-child {vertical-align:bottom;}
section.slice_ShopCheckOut table[id$=_dgCartPageItems] img {max-width:150px;margin-right:5px;}
@media (max-width:467px) {
	section.slice_ShopCheckOut table[id$=_dgCartPageItems] img {max-width:80px;}	
	section.slice_ShopCheckOut table[id$=_dgCartPageItems] table {padding:0;}
	section.slice_ShopCheckOut table[id$=_dgCartPageItems] input.button	{padding:0 2px 2px;}
	section.slice_ShopCheckOut table[id$=_dgCartPageItems] table td {padding:1px;}
}

/* Fix My Orders page */
section.slice_ShopMyOrders input.SiteButton {margin-top:5px;}

/* Gift Aid stuff */
section.slice_ShopCheckOut div.gift-aid {padding:0 5px;}
section.slice_ShopCheckOut div.gift-aid input[type="checkbox"] { width: 20px; height: 20px; display: inline-block;}
section.slice_ShopCheckOut div.gift-aid input.date_text_box {width:auto;max-width:140px;}
section.slice_ShopCheckOut div.gift-aid label {display:inline;}
section.slice_ShopCheckOut div.gift-aid div#divConsentThisDonation,
section.slice_ShopCheckOut div.gift-aid div#divDeclineThisDonation {display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:flex-start;margin-top:10px;}
section.slice_ShopCheckOut div.gift-aid input {flex:none;}
section.slice_ShopCheckOut div.gift-aid div[id$=_pnlEnduringDeclaration] input[type="checkbox"] {position:relative; top:4px;margin-top:5px;}

/* My wallet stuff */
section.slice_ShopCheckOut div#divCardPaymentDetails table.gridstyle[id$=_tblWallet] {margin-top:5px;}
section.slice_ShopCheckOut div#divCardPaymentDetails table.gridstyle[id$=_tblWallet] td {text-align:center !important;}

/* Off line payments */
section.slice_ShopCheckOut input[type=checkbox][id$=_cbCardholderAddressSameAsDelivery] { width: 20px; height: 20px; display: inline-block;position:relative; top:4px;}

/* Fix donation editable price box */
section.slice_ShopItemList div.ShopModuleItemsList input[type=text][id$=_price] {width:55px !important;}


/* Donation items fix in shop items list */
section.slice_ShopItemList div.ShopModuleItemsList div.ItemsWrapper input[type=text] 
{width:75px !important; margin-left:2px;}

/* Stripe shop fixes */
section.slice_ShopCheckOut table#tblPaymentDetails div.new-card-details .whats-this {
  font-size:12px;
  line-height:1.5;
}
section.slice_ShopCheckOut table#tblPaymentDetails span.whats-this.ui-tooltipped { line-height:1.5;}

/* tool-tip code */
body .ui-tooltip { line-height:1.2 !important; }
/* Another style of tip box */
div#tipDiv {background-color:black; color:white; padding:5px 5px 5px 10px; border-radius:10px;}

/* Shop Item Details code */
section.slice_ShopItemDetails {padding:20px 10px 30px;}
section.slice_ShopItemDetails div.container {max-width:1170px;}

section.slice_ShopItemDetails div.ShopIngredientsToggle,
section.slice_ShopItemDetails div.ShopDeliveryToggle {
  font-size:24px; font-weight:700; cursor:pointer;
}
section.slice_ShopItemDetails div.ShopIngredientsText,
section.slice_ShopItemDetails div.ShopDeliveryText {display:none;}

section.slice_ShopItemDetails div.ShopItemDetailsTitle {margin-bottom:10px;}
section.slice_ShopItemDetails div.ShopItemDetailsImage {float:left; width:48%; margin-right:3%;}
section.slice_ShopItemDetails div.ShopItemDetailsImage img {width:100% !important;}
section.slice_ShopItemDetails div.ShopItemDetailsPriceBuy {
  float:right; width:50%;
}
section.Xslice_ShopItemDetails div.ShopItemDetailsPrice {float:right;font-size:32px !important;}
section.slice_ShopItemDetails div.ShopItemDetailsBuy {
  clear:both;float:right; margin:10px 0;
}
section.slice_ShopItemDetails div.ShopItemDetailsBuy input[id$="_tbBuyQty"], 
section.slice_ShopItemDetails div.ShopItemDetailsBuy input[id$="_tbVariablePrice"],
section.slice_ShopItemDetails div.ShopItemDetailsBuy input.button {font-size:20px !important;}

section.Xslice_ShopItemDetails div.ShopItemDetailsDesc {float:left;}

section.slice_ShopItemDetails div.ShopItemDetailsImage table,
section.slice_ShopItemDetails div.ShopItemDetailsImage table td {width:100% !important;}

/* New Item Details design */
section.slice_ShopItemDetails div.ShopItemDetails {display:flex;flex-flow:row nowrap; justify-content:flex-start; align-items:flex-start;}
section.slice_ShopItemDetails div.ShopItemDetailsImage,
section.slice_ShopItemDetails div.ShopItemDetailsPriceBuy {width:50%;}
section.slice_ShopItemDetails div.ShopItemDetailsImage img {
	display:block; border:4px solid #cccccc;
}
section.slice_ShopItemDetails div.ShopItemDetailsImage table,
section.slice_ShopItemDetails div.ShopItemDetailsImage tbody,
section.slice_ShopItemDetails div.ShopItemDetailsImage td {padding:0;margin:0;border:none;}
section.slice_ShopItemDetails div.ShopItemDetailsTitle h1 {
  font-size:40px; font-weight:700; margin-top:10px !important;
}
section.slice_ShopItemDetails div.ShopItemDetailsTitle.ShopItemDetailsTitleB {display:none;}
section.slice_ShopItemDetails div.ShopItemDetailsTitle.ShopItemDetailsTitleA {display:block;}
section.slice_ShopItemDetails div.ShopItemDetailsPrice {float:none;font-size:20px; font-weight:600;}
section.slice_ShopItemDetails div.ShopItemDetailsPriceBuy div.HorLine {
	font-size:0; line-height:0;border-bottom:1px solid #cccccc; width:100%;
  margin:20px 0 15px;
}
section.slice_ShopItemDetails div.ShopItemDetailsBuy,
section.slice_ShopItemDetails div.ShopItemDetailsBuy input[type="text"] {
  font-size:17px !important; font-weight:400; text-align:center; padding:2px 1px 1px;
}
section.slice_ShopItemDetails div.ShopItemDetailsBuy {float:none; margin:0;}
section.slice_ShopItemDetails div.ShopItemDetailsBuy input.button {
  display:block;background-color:#129dc0;
	margin:20px 0 0;border:none;padding:15px 30px !important;
}
section.slice_ShopItemDetails div.ShopItemDetailsBuy div {
  display:inline-block; position:relative; top:9px; margin-right:30px;}
section.slice_ShopItemDetails div.ShopItemDetailsDesc {font-size:18px; line-height:1.333; font-weight:400;}

section.slice_ShopItemDetails div.ShopItemDetailsData {margin-top:20px;}

@media (max-width:900px) {
  section.slice_ShopItemDetails {padding-top:0;}
	section.slice_ShopItemDetails div.ShopItemDetails {flex-flow:column nowrap;}
	section.slice_ShopItemDetails div.ShopItemDetailsImage,
	section.slice_ShopItemDetails div.ShopItemDetailsPriceBuy {width:100%;}
  section.slice_ShopItemDetails div.ShopItemDetailsImage {margin:0 0 20px;}
  section.slice_ShopItemDetails div.ShopItemDetailsTitle.ShopItemDetailsTitleA {display:none;}
  section.slice_ShopItemDetails div.ShopItemDetailsTitle.ShopItemDetailsTitleB {display:block;}
  section.slice_ShopItemDetails div.ShopItemDetailsTitle h1 {font-size:24px; margin:0;}
  section.slice_ShopItemDetails div.ShopItemDetailsDesc {font-size:16px;}
	section.slice_ShopItemDetails div.container {max-width:600px;}
}

/* Fix the also bought h2 title */
section.slice_ShopItemList div.ShopModuleItemsList.AlsoBought h2 {
  font-size:24px;margin:20px 0 0;padding:10px 0 0;border-top:2px solid #cccccc;}

/* Related Items Table */
section.slice_ShopItemDetails div.ShopItemRelated {
  margin:20px 0 0;padding:10px; background-color:#eeeeee;
}
section.slice_ShopItemDetails div.ShopItemRelated h2 {font-size:24px;margin:0 0 10px;}
section.slice_ShopItemDetails div.ShopItemRelated table.gridstyle td {
  border:1px solid #cccccc; padding:5px;
}
section.slice_ShopItemDetails div.ShopItemRelated tr.gridheader,
section.slice_ShopItemDetails div.ShopItemRelated td:first-child,
section.slice_ShopItemDetails div.ShopItemRelated td:nth-child(3)
{display:none;}

header section.slice_Header_L div.nav-menu ul.root_menu ul {
	box-shadow: 0px 10px 10px 2px rgba(0,0,0,.12);
}