/* ==========================================================================
   Osmans: WordPress additions (kept separate from the template stylesheet)
   ========================================================================== */

/* Sticky header (768px+, where the template makes it sticky). The template pulls the page up
   under the header with a fixed -134px margin that doesn't match the header's real height, so
   the content jumped when the header turned fixed on scroll. Keeping the header out of the flow
   in both states removes the jump, and the transition now also runs when it un-sticks.
   The header is solid white from the start (it sits over white space anyway): fading the
   background in on scroll let the page show through behind the menu. */
@media (min-width: 768px) {
	#header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 0;
		background: #fff;
	}
	#header,
	#header.sticky {
		-webkit-transition: padding .25s linear;
		transition: padding .25s linear;
	}
	#header.sticky { position: fixed; }
	/* Start the content at the header's bottom edge (35px + 46px logo + 35px), where it sat before. */
	#main { padding-top: 116px; }
}

/* Admin bar + sticky header */
.admin-bar #header.sticky { top: 32px; }
@media (max-width: 782px) {
	.admin-bar #header.sticky { top: 46px; }
}

/* Accessibility helpers */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Custom logo */
.logo img { max-height: 60px; width: auto; }

/* Generic page content */
.page-sec { padding: 60px 0; font-size: 16px; line-height: 30px; color: #515050; }
.page-sec h1, .page-sec h2, .page-sec h3, .page-sec h4 { color: #4f4e4e; text-transform: uppercase; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content .alignleft { float: left; margin: 0 20px 20px 0; }
.entry-content .alignright { float: right; margin: 0 0 20px 20px; }
.entry-content .aligncenter { display: block; margin: 0 auto 20px; }
.wp-caption, .wp-block-image figcaption { font-size: 13px; color: #747474; }
.page-links { clear: both; margin: 20px 0; }

/* Blog list */
.blog-slider .post-blog .img-holder img { display: block; }
/* Post without a featured image: neutral block the size of a blog image, with the faded logo. */
.blog-slider .post-blog .img-holder .blog-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 460 / 430;
	background: #f5f5f5 url(../images/logo.png) no-repeat center / 45% auto;
	opacity: .6;
}
.blog-slider .blog-empty { padding: 60px 0; text-align: center; }
.blog-slider .slick-dots li:before { display: none; }

/* Blog detail: block content styled like the template */
.blog-detail .entry-content > * { margin-bottom: 30px; }
.blog-detail .entry-content .wp-block-image,
.blog-detail .entry-content figure { margin: 0 0 40px; }
.blog-detail .entry-content .wp-block-image img { width: 100%; }
.blog-detail .entry-content blockquote,
.blog-detail .entry-content .wp-block-quote {
	border-width: 0 0 0 5px;
	border-style: solid;
	border-color: #c99035;
	padding: 20px 0 20px 40px;
	margin: 0 0 40px;
	font-size: 18px;
	line-height: 34px;
	font-style: italic;
	color: #747474;
}
.blog-detail .entry-content blockquote p { margin: 0; }

/* Comments */
.comment-sec .comment-list .children { list-style: none; padding-left: 60px; }
.comment-sec .comment-list li { overflow: hidden; }
.comment-sec .comment-info p { margin: 0 0 10px; }
.comment-sec .leave-comment .comment-reply-title small { display: block; font-size: 13px; margin-top: 10px; }
.comment-sec .leave-comment .logged-in-as { margin: 0 0 20px; }
.comment-sec .comment-form .form-group { overflow: hidden; }
.comment-sec .comment-form .comment-form-cookies-consent { font-size: 13px; margin: 0 0 20px; }
.comment-sec .comment-form .comment-form-cookies-consent input { margin-right: 6px; }
.comment-sec .comment-form .btn-primary { cursor: pointer; }

/* Contact form */
.contact-sec .osmans-hp { position: absolute; left: -9999px; }
.contact-sec .contact-notice { font-size: 14px; margin: 0 0 20px; padding: 10px 15px; border-left: 3px solid #c99035; background: #f7f3ec; color: #515050; }
.contact-sec .contact-notice.error { border-color: #c0392b; }
.contact-sec .contact-form .btn-submit { cursor: pointer; }
/* The template fixes the form column at 593px + 115px left padding from 1300px up, which only fits
   when the right half of the page is at least 708px wide. Let it shrink and keep a right gutter. */
.contact-sec .text-holder .txt-frame { max-width: 100%; }
.contact-sec .contact-form .btn-submit { width: auto; white-space: nowrap; }
@media (min-width: 1300px) {
	.contact-sec .text-holder { padding-right: 40px; }
}

/* Navigation: hide empty lists */
#nav ul:empty { display: none; }

/* Search popup input: the template input has no name attribute styling differences */
.search-popup .submit-form input[type="search"]::-webkit-search-cancel-button { display: none; }

/* Footer reviews column (Trustindex widget) */
#footer .footer-reviews .ti-widget { margin: 0; }

/* Contact page: contact details take the full row when the "about us" box is hidden (as on the live site) */
@media (min-width: 768px) {
	.text-holder .holder > .contact-detail:only-child { width: auto; }
}

/* Home About banner: keep the vertical "SINCE 1973" text on screen (same fix as the live site) */
@media (min-width: 1280px) {
	.banner.banner-2 .year { right: 0; }
}

/* ---------- Live-site overrides (copied from the Hostinger site's style.css) ---------- */

/* Product images: fixed height, cropped, rounded corners */
.product-block img {
	width: 100%;
	height: 450px;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
}

/* Smaller slider heading ("ADDING COLOUR TO LIFE") */
@media (min-width: 768px) {
	.slider-heading { font-size: 30px; }
}
@media (min-width: 1024px) {
	.slider-heading { font-size: 40px; }
}

/* No top padding on the home slider */
@media (min-width: 1280px) {
	.main-slider .slide { padding: 0; }
}

/* Shop mega menu: equal columns (no promo column) */
@media (min-width: 768px) {
	#nav > ul > li > .drop-holder .coll:first-child:nth-last-child(2),
	#nav > ul > li > .drop-holder .coll:first-child:nth-last-child(2) ~ .coll { width: 50%; }
	#nav > ul > li > .drop-holder .coll:first-child:nth-last-child(3),
	#nav > ul > li > .drop-holder .coll:first-child:nth-last-child(3) ~ .coll { width: 33.333%; }
	#nav > ul > li > .drop-holder .coll:first-child:nth-last-child(4),
	#nav > ul > li > .drop-holder .coll:first-child:nth-last-child(4) ~ .coll { width: 25%; }
}

/* Footer bottom bar: copyright + Privacy Policy / Terms & Conditions links */
#footer .footer-bottom { margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 13px; line-height: 20px; letter-spacing: 1px; color: rgba(255, 255, 255, .6); overflow: hidden; }
#footer .footer-bottom .copyright { margin: 0; float: left; }
#footer .footer-bottom .footer-links { float: right; }
#footer .footer-bottom .terms-link { margin-left: 25px; color: rgba(255, 255, 255, .6); text-decoration: none; text-transform: uppercase; transition: color .25s linear; }
@media (max-width: 767px) {
	#footer .footer-bottom { text-align: center; }
	#footer .footer-bottom .copyright,
	#footer .footer-bottom .footer-links { float: none; display: block; }
	#footer .footer-bottom .footer-links { margin: 8px 0 0; }
	#footer .footer-bottom .terms-link { margin: 0 10px; }
}

/* Related products slider: arrows and numbered dots in one centered row (js/jquery.main.js appends them to .slider-nav) */
.slider-sec .slider-nav { display: flex; justify-content: center; align-items: center; padding: 70px 0 0; }
.slider-sec .slider-nav .slick-dots { order: 1; width: auto; margin: 0 40px; padding: 0 0 2px; overflow: visible; white-space: nowrap; }
.slider-sec .slider-nav .slick-dots li:last-child { margin-right: 0; }
.slider-sec .slider-nav .slick-prev { order: 0; }
.slider-sec .slider-nav .slick-next { order: 2; }
.slider-sec .slider-nav .slick-arrow { position: static; margin: 0; padding: 0 9px; font-size: 0; line-height: 26px; background: none; border: none; outline: none; cursor: pointer; font-family: "icomoon"; color: #fff; transition: all .25s linear; }
.slider-sec .slider-nav .slick-prev:before { content: "\e903"; }
.slider-sec .slider-nav .slick-next:before { content: "\e905"; }
.slider-sec .slider-nav .slick-arrow:before { font-size: 18px; }
@media (min-width: 1024px) {
	.slider-sec .slider-nav { padding-top: 124px; }
}
@media (max-width: 767px) {
	.slider-sec .slider-nav .slick-dots { margin: 0; }
}

/* Product code: the template sized it for a short number; alphanumeric SKUs need a quieter style on the label's baseline */
.product-detial .txt-wrap .product-code { font-size: 18px; line-height: 20px; font-weight: 600; letter-spacing: 1px; margin: 0; }