/*
 * The rest of the site in the look of the new product page (task #59155): shared colours and
 * shapes, and the pieces the restyled pages didn't cover yet (home page, content pages, blog,
 * footer, header search, empty search).
 *
 * Purely visual: no template or script change. Loaded first of the restyle stylesheets, after
 * style.css and responsive.css (format.php, site_restyle_stylesheets()), so checkout.css,
 * shop-list.css and product-page-v2.css can use the variables below.
 */

/* ================================ colours and shapes ================================ */
:root {
	--ps-orange: #e56524;        /* the one strong action, prices, labels */
	--ps-orange-dark: #cf561a;   /* hover on orange */
	--ps-ink: #1d1d1d;           /* headings and strong text */
	--ps-text: #3d3d3d;          /* body text on cards */
	--ps-tint: #fff7f1;          /* what is selected, notices */
	--ps-tint-line: #f6e1d2;     /* border of a tinted card */
	--ps-soft: #f6f6f5;          /* quiet grey background */
	--ps-line: #ececea;          /* card borders */
	--ps-line-strong: #e3e3e3;   /* fields and outline buttons */
	--ps-r-sm: 6px;              /* checkboxes, badges */
	--ps-r: 10px;                /* fields, buttons, pictures */
	--ps-r-card: 14px;           /* product cards */
	--ps-r-lg: 16px;             /* large cards and panels */
}

/* ============================ text in articles and products ============================ */
/* product texts write their lists as <li><p>…</p></li>; with the bullet inside the line
   (style.css) the paragraph put every bullet on a line of its own */
article li > p:only-child { display: inline; margin: 0; }

/* headings in normal case, as on the restyled pages, with room above when text precedes them */
article h1, article h2, article h3, article h4 { text-transform: none; color: var(--ps-ink); }
article * + h2, article * + h3, article * + h4 { margin-top: 1.4em; }

/* ===================================== home page ===================================== */
/* the slider keeps its size and orange bar; it hangs from the header, so only the bottom
   corners are rounded */
#slider .slider-wrapper { border-radius: 0 0 var(--ps-r-lg) var(--ps-r-lg); overflow: hidden; }

/* the four category tiles */
.shop-categories .shop-categories-inner > a { border-radius: var(--ps-r-lg); overflow: hidden; }

/* "Eripakkumised": normal case like the title band, no orange bar */
.shop-highlighted h2 { font-size: 26px; text-transform: none; color: var(--ps-ink); }
.shop-highlighted h2:after { display: none; }

/* the home page rows and "Vaata lisaks" under a product as the same cards as the product
   lists (shop-list.css) */
.shop-highlighted #products ul,
#product.pp2 #products ul {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
}
.shop-highlighted #products ul:after,
#product.pp2 #products ul:after { display: none; }
.shop-highlighted #products ul li,
#product.pp2 #products ul li {
	float: none; clear: none; width: auto; min-width: 0; padding: 12px 12px 16px;
	background: #fff; border: 1px solid var(--ps-line); border-radius: var(--ps-r-card);
	transition: box-shadow .2s, border-color .2s, transform .2s;
}
.shop-highlighted #products ul li:hover,
#product.pp2 #products ul li:hover {
	border-color: var(--ps-tint-line); box-shadow: 0 10px 26px rgba(0, 0, 0, .08); transform: translateY(-2px);
}
.shop-highlighted #products ul li .image,
#product.pp2 #products ul li .image { margin-bottom: 14px; }
.shop-highlighted #products ul li .product-badges-sl,
.shop-highlighted #products ul li:hover .product-badges-sl,
#product.pp2 #products ul li .product-badges-sl,
#product.pp2 #products ul li:hover .product-badges-sl { top: 12px; right: 12px; }

/* a category without an intro text still prints an empty <article> (30px padding top and
   bottom), which left a gap between the title band and the products */
#content .page-content > article:not(.notice):not(:has(*)) { display: none; }

/* ================================== content pages ================================== */
/* the page menu (Kontakt, Järelmaks, blog posts): a white rounded list with the current page
   tinted, like the filters, instead of solid orange rows */
.submenu {
	background: #fff; border: 1px solid var(--ps-line); border-radius: var(--ps-r-lg);
	padding: 6px 0; overflow: hidden;
}
.submenu a {
	padding: 10px 20px; border-bottom: 0; text-shadow: none; text-transform: none;
	font-size: 15px; font-weight: 500; color: var(--ps-text);
}
.submenu a:hover { background: var(--ps-soft); color: var(--ps-orange); text-decoration: none; }
.submenu a.on,
.submenu a.on:hover { background: var(--ps-tint); color: var(--ps-orange); font-weight: 700; }

/* ======================================== blog ======================================== */
.blog-post h1, .blog-post h2, .blog-post h3 { text-transform: none; color: var(--ps-ink); }
.blog-post * + h2, .blog-post * + h3 { margin-top: 1.4em; }
.blog-post .read-more {
	padding: 10px 18px; border: 0; border-radius: var(--ps-r); text-shadow: none;
	font-weight: 700; transition: background-color .15s;
}
.blog-post .read-more:hover { background: var(--ps-orange-dark); text-decoration: none; }

/* the side boxes as white cards with an orange label, like the filters */
.blog-authors, .blog-latest, .blog-tagcloud {
	background: #fff; border: 1px solid var(--ps-line); border-radius: var(--ps-r-lg);
}
.blog-right h3 {
	font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .09em;
	text-transform: uppercase; color: var(--ps-orange);
}
.blog-latest a:hover { color: var(--ps-orange); }

/* posts have no authors: the author line printed an empty picture (a broken image icon on
   every post) and "Autorid" an empty box */
.post-author:not(:has(span:not(:empty))) { display: none; }
.blog-authors:not(:has(.author-image)) { display: none; }

/* ==================================== empty search ==================================== */
/* the search notices as the same tinted card as the other notices */
.search-correction {
	padding: 14px 18px; background: var(--ps-tint); border: 1px solid var(--ps-tint-line);
	border-radius: var(--ps-r); font-size: 15px; color: var(--ps-text);
}
/* nothing to sort when nothing was found */
body:has(.search-correction):not(:has(#products li)) #breadcrumb .list-sorting { display: none; }

/* =================================== header and footer =================================== */
/* search: a rounded field instead of the orange underline */
header form {
	border: 1px solid #4a4a4a; border-radius: 999px; overflow: hidden; transition: border-color .15s;
}
header form:focus-within { border-color: var(--ps-orange); }
header form input,
header form button { background: transparent; }
header form input { padding: 0 6px 0 16px; }
header form button:hover { background: #333; }

/* the stores box */
footer #address { border-radius: var(--ps-r-lg); }

/* "Hakkan püsikliendiks": the same button as the other orange buttons */
footer .customer-card a {
	border-radius: var(--ps-r); color: #fff; text-transform: none; font-size: 15px;
	transition: background-color .15s;
}
footer .customer-card a:hover { background: var(--ps-orange-dark); text-decoration: none; }

/* back to top: a small round button in the corner, under the chat bubble instead of beside it */
#back-top { right: 23px; bottom: 16px; }
#back-top a { width: auto; }
#back-top span {
	width: 44px; height: 44px; margin: 0; border-radius: 50%;
	background-color: rgba(29, 29, 29, .7); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
	transition: background-color .2s;
}
#back-top a:hover span { background-color: var(--ps-ink); }

/* ======================================= sizes ======================================= */
@media only screen and (max-width: 1200px) {
	.shop-highlighted #products ul, #product.pp2 #products ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* the home row has five products: with four (or two) across the fifth was left alone on a row */
	.shop-highlighted #products ul li:nth-child(5):last-child { display: none; }
}
@media only screen and (max-width: 980px) {
	.shop-highlighted #products ul, #product.pp2 #products ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.shop-highlighted #products ul li:nth-child(5):last-child { display: block; }
}
@media only screen and (max-width: 640px) {
	#slider .slider-wrapper { border-radius: 0 0 var(--ps-r) var(--ps-r); }
	.shop-categories .shop-categories-inner > a { border-radius: var(--ps-r); }
	.shop-highlighted h2 { font-size: 22px; }
	.shop-highlighted #products ul, #product.pp2 #products ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.shop-highlighted #products ul li, #product.pp2 #products ul li { padding: 8px 8px 12px; border-radius: 12px; }
	.shop-highlighted #products ul li:hover, #product.pp2 #products ul li:hover { transform: none; }
	.shop-highlighted #products ul li .image, #product.pp2 #products ul li .image { margin-bottom: 10px; }
	.shop-highlighted #products ul li:nth-child(5):last-child { display: none; }
	/* the stores box is as wide as the screen here, so no rounded corners at the screen edge */
	footer #address { border-radius: 0; }
}