﻿/* Base Color: 248755 */
/* Analogous Color: 258724 248787 */
/* Triadic Color: 875524 552487 */
/* Tetradic Color: 568724 552487 872456 */
/* Text Color : 030b07 */

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Playfair&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Golos+Text&display=swap');
body, button, input, select, textarea {font-family:'Noto Sans','Golos Text',Arial,Sans-Serif;}

/* BODY */
body {margin:0 auto; max-width:1400px;}

/* FONT COLORS & HYPERLINKS */
.text, body, button, input, select, textarea, .select, .select a,.low, a.low, .low a, .deal a  {color:#030b07;}
.link, a.link, a, #sortbar > div > p a:not(:hover) {color:#552487;}
#headads a:not(:hover), #adsbar a:not(:hover), #navbar, #locbar, #infotext .icon:not(:hover) {color:#258724;}
.color, a.color, h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .title, a.title, #products .title a:not(:hover), .litle a, [id^='relateds-'] .title a:not(:hover) {color:#248755;}
.alert {color:#872456;}
.high, a.high, .price, a.price, .price a {color:#872456;}
a {text-decoration:none;}
a:hover, input.hov:hover, .hover:hover, .icon:hover, input[type='submit']:hover, .button:hover, button:hover {color:#872456;}

/* HEADINGS */
h1,h2,h3,h4,h5,h6 {margin-top:10px; margin-bottom:10px; line-height:110%;}
h1 {font-family:'Playfair','Noto Sans';font-size:200%;}
@media screen and (min-width:640px), print and (min-width:512px) {
	h1 {font-size:225%;}
}
@media screen and (min-width:768px), print and (min-width:640px) {
	h1 {font-size:250%;}
}
@media screen and (min-width:896px), print and (min-width:768px) {
	h1 {font-size:275%;}
}

/* TEXT */
p {margin-top:10px; margin-bottom:10px; line-height:150%;}
ul {margin:15px 0; padding-left:15px;}
li {margin:10px 0; padding-left:10px;}

/* BORDERS */
.bdr {border:1px solid #248755 !important;}
.bdr-top {border-top:1px solid #248755 !important;}
.bdr-rgt {border-right:1px solid #248755 !important;}
.bdr-bot {border-bottom:1px solid #248755 !important;}
.bdr-lft .block {border-left:1px solid #248755 !important;}
.bdr-2 {border:2px solid #248755 !important;}

/* LINES */
.lin, .select, #menunav .block, #menunav form, #aboutnav .block, #helpnav .block, #navbar .row:first-child, #locbar .row:first-child, #sortbar a, #infotext:not(#club #infotext) .drop-head {border:1px solid #258724 !important;}
.lin-top, .sel-top, #recomms .row:first-child, #feedback > .row:first-of-type, #orders #vieworder article > div, .prod-text:not(:first-child), #relateds-sm .row:first-of-type {border-top:1px solid #258724 !important;}
.lin-rgt {border-right:1px solid #258724 !important;}
.lin-bot, .sel-bot {border-bottom:1px solid #258724 !important;}
.lin-lft {border-left:1px solid #258724 !important;}
.lin-2, textarea, select, button, .button, input:not([type='image']):not(#menunav input) {border:2px solid #258724 !important;}
.select {padding-left:10px; padding-right:10px;}

/* BORDER RADIUS */
.button, button, #toplinks a, #footlinks a.inb, #menunav .block, #menunav form, #aboutnav .block, #helpnav .block, #optnav .block, .select, #infotext .drop-head, #infotext .drop-block, #sortbar a, #navbar .row:first-child, #locbar .row:first-child {border-radius:5px;}
input:not([type='image']):not(#menunav input), textarea, select {border-radius:3px; box-shadow:inset 0 0 0 0 #258724; background:#ffffff;}

/* BUTTONS */
.button, button:not(.icon), input[type='submit'] {padding:10px; background:#ffffff; color:#872456;}
button.icon {background:#ffffff; color:#552487;}
.button {background:#248755; color:#ffffff;}
button:hover:not(#menunav button), input[type='submit']:hover, input:hover:not([type='image']):not(#menunav input), #menunav .block:hover, #menunav form:hover, .select:hover {outline:1px solid #258724;}

/* FORMS */
input:not([type='image']):not([type='submit']):not(#menunav input), textarea, select {padding:10px 5px;}
input:focus:not(#menunav input), textarea:focus, select:focus {outline-color:#258724;}
input[type='radio'] {accent-color:seagreen;}
@media screen and (min-width:640px), print and (min-width:512px) {
	.formset {margin-left:auto; margin-right:auto; max-width:768px;}
}
@media screen and (min-width:768px), print and (min-width:640px) {
	input:not([type='image']):not([type='submit']):not(#menunav input), textarea, select {padding:10px 10px;}
}
@media screen and (min-width:896px), print and (min-width:768px) {
}
::placeholder {color:#258724;}

/* HEADER */
#toplinks, [id^='headlinks-'], #headcart {font-size:90%;}
#toplinks a, [id^='headlinks-'] a {padding:5px;}
#topmsg p {margin-top:5px; margin-bottom:5px;}
#topmsg p a {margin-top:-5px; margin-bottom:-5px;}
#headcart {padding-bottom:5px;}
#footlinks {padding-top:5px; margin-bottom:5px;}
#footlinks a.inb {margin-top:5px; margin-bottom:5px; padding:5px 10px;}
#toplinks a:hover, #footlinks a.inb:hover {background:#ffffff; color:#248755;}
@media screen and (min-width:640px), print and (min-width:512px) {
	#header {margin-top:5px;}
	#header:not(#club #header):not(#orders #header) > .container {padding-top:5px;}
}

/* BASKET ORDERS CHECKOUT */
#basket article {margin-top:5px; margin-bottom:20px;}
#basket article .select, #basket article .select p {margin-top:5px; margin-bottom:5px;}
#orders #vieworder {margin-top:20px;}
#orders #vieworder article, #orders #vieworder article > div {padding-top:20px;}
@media screen and (min-width:768px), print and (min-width:640px) {
	#basket article {margin-left:auto; margin-right:auto; margin-bottom:25px; max-width:896px;}
}

/* LOGO */
.logo {margin:5px auto; max-width:75%;}
@media screen and (min-width:640px), print and (min-width:512px) {
	.logo {max-width:90%;}
	#toplogo .logo {margin-left:0; margin-right:0;}
}

/* BACKGROUNDS */
.body, body {background:#ffffff;}
.backlight {background:#f6fcf3;}
#footer, #toplinks {background:#248755; color:#ffffff;}
#footer a, #toplinks a {color:#ffffff; white-space:nowrap;}
#footer2 a:hover, #toplinks2 a:hover {color:#552487;}

/* LAYOUT */
section {margin-top:5px;}

/* MENU ABOUT HELP OPTION */
#menubar:not(#club #menubar):not(#orders #menubar) {margin-top:5px;}
#menubar {padding-bottom:10px;}
#menudrop {padding-top:5px;}
#menudrop .title {font-weight:600;}
#menunav .block, #aboutnav .block, #helpnav .block, #optnav .block {background:#ffffff; padding:10px 5px;}
#menubar form {background:#ffffff; padding:4px 5px;}
#menunav input:focus {outline:none;}
#aboutdisp {margin-top:5px;}
#menudisp, #aboutdisp .row {margin-top:5px; margin-bottom:5px;}
#optnav {margin-top:15px; padding-top:10px; padding-bottom:10px;}
#menunav form, #menunav .block, #aboutnav .block, #helpnav .block, #optnav .block {box-shadow: 0.5mm 0.5mm 0.5mm #5687244d;}
@media screen and (min-width:640px), print and (min-width:512px) {
	#menubar {padding-top:10px;}
}

/* ADS RECOMMENDEDS */
#adsbar {margin-top:25px;}
#recomms {margin-top:25px; padding-bottom:10px;}
#recomms .row:first-child {padding-top:10px;}

/* SORT BAR */
#showhide_ss p {margin:0;}

/* LOCATION FOOTER */
#navbar, #locbar {margin-top:25px; padding-top:15px; padding-bottom:15px;}
#locbar {margin-bottom:15px;}
#navbar .row:first-child, #locbar .row:first-child {padding-top:10px; padding-bottom:10px;}
#navbar, #locbar, #footer {font-size:85%; text-align:center;}
#navbar p, #locbar p {margin-top:0; margin-bottom:0;}

/* NAV BAR */
#sortbar a {display:inline-block; margin:5px; padding:5px 10px;}
#navbar a, #locbar a {display:inline-block; padding:5px;}
@media screen and (min-width:640px), print and (min-width:512px) {
	#navbar .row:first-child, #locbar .row:first-child {display:inline-block; min-width:512px; padding-left:10px; padding-right:10px;}
}
@media screen and (min-width:768px), print and (min-width:640px) {
	#navbar .row:first-child, #locbar .row:first-child {padding-left:20px; padding-right:20px;}
}
@media screen and (min-width:896px), print and (min-width:768px) {
	#navbar .row:first-child, #locbar .row:first-child {padding-left:30px; padding-right:30px;}
}

/* ADS ABOUT HELP FOOTER */
#aboutbar {margin-top:10px;}
#toplinks, #adsbar, #aboutbar, #helpbar, #footer, #footer > .container {padding-top:5px; padding-bottom:5px;}
#aboutbar > .container > .row {padding-top:10px; padding-bottom:10px;}
#footer {margin-top:10px;}

/* HELP/INFO PAGES */
#infotext {max-width:1024px; margin:20px auto;}
#infotext .drop-block {margin-top:5px; margin-bottom:5px; padding-left:5px; padding-right:5px;}
#infotext .drop-head {margin-left:auto; margin-right:auto; max-width:512px; text-align:center; }
#infotext .drop-text {padding-top:10px; padding-bottom:10px;}
#infotext:not(#club #infotext) .drop-block .drop-text {padding-top:15px; padding-bottom:15px;}
#infotext h3:first-child, #infotext h4:first-child {margin-top:15px;}
#infotext h3:not(:first-child), #infotext h4:not(:first-child) {margin-top:25px;}

/* CLUB */
#club #infotext {max-width:896px;}
#club #infotext:not(#login #infotext) .drop-block {padding-top:25px;}
#club2 #infotext .drop-text {padding-top:15px;}

/* PRODUCTS */
/* #menu .title, #filter .title, #products .title, [id^='relateds-'] .title {font-weight:600;} */
/* .title:not(#recomms .title), .price:not(#group .price) {font-size:105%; font-weight:600;} */
/* .title:not(#recomms .title):not([id^='relateds-'] .title), .price:not(#group .price):not([id^='relateds-'] .price) {font-weight: 600; font-size:105%;} */
.title:not(#recomms .title):not([id^='relateds-'] .title), #products .price {font-weight: 600; font-size:105%;}
#filter .title, #checkout section .title, #vieworder .title {font-weight:600;}
.prod-text {padding-top:10px; padding-bottom:20px;}
.prod-text h3, .prod-text h4 {margin-top:20px;}
.price a {display:block;}
#product h2 a {font-weight:normal;}

/* RELATEDS */
#relateds-sm {margin-top:30px;}
#relateds-sm .row:first-of-type {padding-top:20px;}

/* FRAME */
.frame, .noframe {margin-top:5px; margin-bottom:10px; padding-top:10px; padding-bottom:10px;}
.frame, .noframe, .inner {margin-left:-5px; margin-right:-5px; padding-left:15px; padding-right:15px;}
.frame {border-radius:6px; background:#f6fcf3;}
@media screen and (min-width:640px), print and (min-width:512px) {
	.frame {padding-left:20px; padding-right:20px;}
}
@media screen and (min-width:896px), print and (min-width:768px) {
	.frame, .noframe, .inner {max-width:1152px; margin-left:auto; margin-right:auto;}
	.frame:not(header *) {margin-top:10px;}
	.frame {padding-left:25px; padding-right:25px;}
}
@media print {
	.frame {border-color:#c0c0c0;}
}
