/* ==========================================================================
   porto-layout.css
   Loaded AFTER porto-base.css (Porto demo12 build). Overrides/additions for:
     1. Normal in-flow header (demo12 base positions it over a hero)
     2. Always-expanded inline header search on desktop (>= 992px)
     3. Demo3-style white footer (demo12 base footer is dark)

   REQUIRED MARKUP (class names these rules are written against)
   --------------------------------------------------------------------------
   HEADER (based on Porto demo12-shop.html / demo2.html):

     <header class="header">
       <div class="header-top"> ... </div>
       <div class="header-middle sticky-header">
         <div class="container">
           <div class="header-left"> logo </div>
           <div class="header-icon header-search header-search-inline
                       header-search-category w-lg-max">
             <a href="#" class="search-toggle" role="button">
               <i class="icon-search-3"></i></a>
             <form action="#" method="get">
               <div class="header-search-wrapper">
                 <input type="search" class="form-control" ...>
                 <div class="select-custom"><select>...</select></div> <!-- optional -->
                 <button class="btn icon-magnifier" type="submit"></button>
               </div>
             </form>
           </div>
           <div class="header-right"> icons / cart </div>
         </div>
       </div>
     </header>

     - Do NOT put `position-absolute` or `header-transparent` on `.header`
       (demo12 home does; we neutralize `header-transparent` below, but the
       Bootstrap `position-absolute` utility uses !important and would win).
     - `header-search-category` is only needed when the category
       <select class="select-custom"> is present (it squares the inner
       corners between input/select/button).
     - `w-lg-max` (defined in porto-base: flex:1; max-width:100%) makes the
       search block fill the free space in the header-middle flex row.

   STICKY HEADER — JS CONTRACT:
     porto-base.css expects the class `fixed` to be toggled ON THE ELEMENT
     THAT CARRIES `sticky-header` when the page scrolls past it, i.e.
       <div class="header-middle sticky-header">  ->  ... sticky-header fixed
     (`.sticky-header.fixed` = position:fixed, white bg, shadow, 60px height).

   MOBILE SEARCH — JS CONTRACT (below 992px only):
     porto-base.css shows/hides the popup via the class `show` toggled on the
     `.header-search` element (`.header-search:not(.show)
     .header-search-wrapper { display:none }`). The `.search-toggle` anchor
     is the click target. At >= 992px no JS is needed: rules below keep the
     search permanently expanded.

   FOOTER (based on Porto demo3.html):

     <footer class="footer">                <!-- plain .footer, NO bg-dark! -->
       <div class="container">
         <div class="footer-top">
           <div class="widget-newsletter">
             <div class="widget-newsletter-info">
               <h5 class="widget-newsletter-title">...</h5>
               <p class="widget-newsletter-content">...</p>
             </div>
             <form> <input class="form-control"> <button class="btn">...</button> </form>
           </div>
         </div>
         <div class="footer-middle">  .widget / .widget-title / .links /
                                      .contact-info / .contact-info-label </div>
         <div class="footer-bottom">  .social-icons > .social-icon,
                                      .payment-icons > .payment-icon,
                                      copyright </div>
       </div>
     </footer>

     - Do NOT add Bootstrap's `bg-dark` to <footer> (demo12 does). It uses
       !important and would keep the footer dark.
   ========================================================================== */


/* ==========================================================================
   1. HEADER — normal document flow on every page
   demo12 base: `.header { z-index:1000; width:100%; margin:0 6px }` and the
   home page adds `position-absolute` (utility) / `.header-transparent
   { position:absolute; right:0; left:0; z-index:1040 }` to float the header
   over the hero. Inner pages (demo12-shop.html) use a plain in-flow
   `.header.elements-header`. We force the in-flow variant everywhere.
   ========================================================================== */

.header,
.header.header-transparent {
	position: relative;
}

.header {
	margin: 0;               /* demo12 base sets margin: 0 6px */
	background: #fff;
	border-bottom: 1px solid #e7e7e7;
}

/* demo12-shop separates header-top from header-middle with a light rule
   (porto-base only has it under .elements-header). Slim bar per owner
   feedback ("pasiaurinti"). */
.header .header-top {
	border-bottom: 1px solid #e7e7e7;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}
.header .header-top .header-menu ul {
	margin-bottom: 0;
}

/* NOTE: .sticky-header / .sticky-header.fixed styles come from porto-base
   and are intentionally not overridden here — they must keep working.
   The JS class the CSS expects is `fixed`, added to the `.sticky-header`
   element (see contract in the header comment). */


/* ==========================================================================
   2. HEADER SEARCH — always expanded inline on desktop
   porto-base (demo12 build) already ships the inline variant but strips the
   wrapper border (`border-width:0`) and keeps the demo12 grey field colors.
   Values below follow Porto's bordered inline-search demos (demo26:
   1px #e7e7e7 pill wrapper, white fields, 48px height).
   Below 992px nothing here applies — the base popup behavior remains.
   ========================================================================== */

@media (min-width: 992px) {

	/* Always visible, in flow (re-asserts porto-base's inline rules and
	   restores a visible rounded border) */
	.header-search-inline.header-search .header-search-wrapper {
		display: flex;
		position: static;
		margin: 0;
		height: 48px;                     /* base: 34px popup height */
		max-width: 500px;                 /* flexible, capped */
		border: 1px solid #e7e7e7;        /* base inline: border-width 0 */
		border-radius: 1px;               /* owner feedback: ~1px, not a pill */
	}

	/* No toggle icon on desktop (already in base — restated for safety) */
	.header-search-inline .search-toggle,
	.header-search-inline .btn:after {
		display: none;
	}

	/* Transparent field by default (hero shows through on the home overlay
	   header); turns white on click/typing and while it holds text
	   (owner feedback: "fonas skaidrus, kai paspaudi/rašai pasidaro baltas") */
	.header-search-inline.header-search .header-search-wrapper,
	.header-search-inline .form-control,
	.header-search-inline .select-custom {
		background: transparent;
	}

	.header-search-inline .header-search-wrapper .btn {
		background: transparent;
		min-width: 48px;
	}

	.header-search-inline .header-search-wrapper:focus-within,
	.header-search-inline .header-search-wrapper:focus-within .form-control,
	.header-search-inline .header-search-wrapper:focus-within .btn,
	.header-search-inline .header-search-wrapper:has(.form-control:not(:placeholder-shown)),
	.header-search-inline .header-search-wrapper:has(.form-control:not(:placeholder-shown)) .form-control,
	.header-search-inline .header-search-wrapper:has(.form-control:not(:placeholder-shown)) .btn {
		background: #fff;
	}

	/* The input itself stretches (Bootstrap .form-control is width:100%);
	   give the pill some breathing room */
	.header-search-inline .form-control {
		padding: 1rem 2rem;
		font-size: 1.3rem;
	}
}


/* ==========================================================================
   3. FOOTER — demo3 white footer over the demo12 dark base
   demo12 base to undo: .footer-middle{color:#a8a8a8} ·
   .footer-bottom{border-top:#313438} · footer .widget-title{color:#fff} ·
   footer .social-icon{border:#313438;color:#fff} · footer a:hover{#fff} ·
   footer .form-control{background:#292c30;pill} · footer .btn{background:#fff}
   demo3 actual values: body #90969a · link hover/focus #000 · borders
   #e7e7e7 · newsletter content #777 · headings dark (#222529).
   Overridden with specificity (.footer descendant selectors), no !important.
   ========================================================================== */

.footer {
	background: #fff;
	color: #90969a;
	line-height: 1.4;
	letter-spacing: .005em;
}

.footer a {
	color: inherit;
}

.footer a:hover,
.footer a:focus {
	color: #000;
}

/* --- Sections ---------------------------------------------------------- */

.footer .footer-top {
	border-top: 1px solid #e7e7e7;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.footer .footer-middle {
	color: inherit;                       /* base: #a8a8a8 */
	border-top: 1px solid #e7e7e7;
	padding-top: 6.4rem;
	padding-bottom: 2.4rem;
}

.footer .footer-bottom {
	border-top: 1px solid #e7e7e7;        /* base: #313438 */
	padding-top: 3.3rem;
	padding-bottom: 4.1rem;
}

/* --- Headings / text ---------------------------------------------------- */

.footer .widget-title {
	color: #222529;                       /* base: #fff */
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 1.5rem;
}

.footer .contact-info-label {
	color: #222529;                       /* base: #fff */
}

.footer .links {
	line-height: 2.4rem;
}

/* --- Newsletter (demo3 footer-top form) --------------------------------- */

.footer .widget-newsletter-info {
	margin-right: 4.8rem;
}

.footer .widget-newsletter-title {
	color: #222529;
	font-size: 1.4rem;
	letter-spacing: .075em;
	padding-bottom: 1px;
	text-transform: uppercase;
}

.footer p.widget-newsletter-content {
	font-family: "Open Sans", sans-serif;
	line-height: 20px;
	letter-spacing: 0;
	color: #777;
}

.footer .form-control {
	width: 100%;
	height: auto;                          /* base: 4.4rem pill */
	margin: 0;
	padding: 1.35em 1em 1.15em;
	border: none;
	border-radius: 0;                      /* base: 2.2rem */
	color: #777;
	background-color: #f4f4f4;             /* base: #292c30 */
	font-family: "Open Sans", sans-serif;
	font-size: 1.2rem;
}

.footer .form-control::placeholder {
	color: #999;
}

.footer .form-control:focus,
.footer .form-control:active {
	background-color: #f4f4f4;             /* base: #292c30 */
}

/* demo3's subscribe button is dark-on-white (base forces background:#fff,
   which would beat Bootstrap's .btn-dark — restore a dark default here) */
.footer .btn {
	height: auto;                          /* base: 4.4rem */
	margin-left: 0;
	padding: .7em 1.244em .6em;
	border-radius: 0;
	background: #222529;
	color: #fff;
	font-size: 1.3rem;
	letter-spacing: .01em;
}

.footer .btn:hover,
.footer .btn:focus {
	opacity: .8;
}

/* --- Social icons -------------------------------------------------------- */

.footer .social-icons {
	margin-right: 2px;
}

.footer .social-icon {
	border: 0;                             /* base: 1px solid #313438 */
	font-size: 1.8rem;
}

.footer .social-icon + .social-icon {
	margin-left: .4rem;
}

.footer .social-icon:not(:hover):not(:active):not(:focus) {
	color: #525252;                        /* base: #fff */
	background: transparent;
}

/* --- Payment icons / tag cloud ------------------------------------------ */

.footer .payment-icons .payment-icon {
	border-radius: 0;
}

.footer .tagcloud a {
	border-color: #e7e7e7;                 /* base: #313438 */
}

.footer .tagcloud a:hover {
	border-color: #222529;                 /* base hover: #fff on dark */
	color: #222529;
}

/* --- Responsive (demo3) --------------------------------------------------- */

@media (max-width: 991px) {
	.footer .widget-newsletter {
		margin-bottom: 2rem;
	}

	.footer .widget {
		margin-bottom: 3rem;
	}
}

@media (max-width: 767px) {
	.footer .widget-newsletter-info {
		margin-bottom: 1.5rem;
	}

	.footer .widget-newsletter .form-control {
		max-width: 70%;
	}

	.footer .footer-top .form-control,
	.footer .footer-top button {
		height: 40px;
	}
}


/* ==========================================================================
   PRODUCT CARDS — uniform height
   Item photos come in mixed aspect ratios, which made card heights ragged.
   Fix: fixed square media box, photos letterboxed with object-fit:contain
   (never cropped — shop preference), and a two-line title reserve so the
   price/action rows align across a row.
   ========================================================================== */
.product-default figure {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #fff;
	overflow: hidden;
}
.product-default figure > a {
	display: block;
	width: 100%;
	height: 100%;
}
.product-default figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.product-default .product-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.7em; /* reserve two lines even for short names */
}

/* Rich-text product summary shown between the live price and option groups. */
.product-single-details .product-short-description {
	font-size: 1.3rem;
	line-height: 1.6;
	white-space: pre-line;
}
.product-single-details .product-short-description p {
	margin-bottom: 0;
}

/* Trusted rich-text figures from the shared admin WYSIWYG editor. */
.rich-text-content::after {
	display: block;
	clear: both;
	content: "";
}
.rich-text-content figure[data-rich-text-image="true"] {
	max-width: 100%;
	margin: 0 0 2rem;
}
.rich-text-content figure[data-rich-text-image="true"][data-align="left"] {
	float: left;
	margin-right: 2rem;
}
.rich-text-content figure[data-rich-text-image="true"][data-align="center"] {
	margin-right: auto;
	margin-left: auto;
}
.rich-text-content figure[data-rich-text-image="true"][data-align="right"] {
	float: right;
	margin-left: 2rem;
}
.rich-text-content figure[data-rich-text-image="true"] > a,
.rich-text-content figure[data-rich-text-image="true"] img {
	display: block;
}
.rich-text-content figure[data-rich-text-image="true"] img {
	width: 100%;
	max-width: 100%;
	height: auto;
	padding-top: 0;
}
.rich-text-content figure[data-rich-text-image="true"] figcaption {
	margin-top: 0.7rem;
	color: #777;
	font-size: 1.3rem;
	line-height: 1.45;
	text-align: center;
}
@media (max-width: 767px) {
	.rich-text-content figure[data-rich-text-image="true"][data-align="left"],
	.rich-text-content figure[data-rich-text-image="true"][data-align="right"] {
		float: none;
		margin-right: auto;
		margin-left: auto;
	}
}

/* ==========================================================================
   HOME PAGE ONLY — demo3-style overlay header
   The hero slider starts at the window top and slides *behind* the header
   (transparent background, absolutely positioned, z-index above content).
   Guarded by :has(): browsers without support and all inner pages keep the
   white in-flow header from the rules above. The sticky header behavior is
   unchanged — .sticky-header.fixed still turns into the white fixed bar on
   scroll. Matching hero sizing lives in porto-home.css under the same guard.
   ========================================================================== */
.page-wrapper:has(> .main > .home) > .header {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1040; /* demo12 .header-transparent value */
	background: transparent;
	border-bottom: none;
}
.page-wrapper:has(> .main > .home) > .header .header-top {
	border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   MULTI-LAYER MAIN MENU (nested sub-categories)
   porto-base's `.menu ul li:hover ul` uses a descendant selector, so
   hovering a branch would open its entire subtree at once. Scope hover-open
   to the direct child list. Rule order matters: both rules tie on
   specificity with each other and with the vendor rule, so the `>` rule
   must come last (this file loads after porto-base.css).
   ========================================================================== */
.menu ul li:hover ul {
	display: none;
}
.menu ul li:hover > ul {
	display: block;
}

/* Every label remains a normal link. The separate button owns submenu
   expansion, including touch and keyboard input. */
.menu li {
	position: relative;
}
.menu li > a.sf-with-ul {
	position: relative;
	padding-right: 3.2rem;
}
.menu li > a.sf-with-ul::after {
	content: none;
}
.menu .category-menu-toggle {
	position: absolute;
	z-index: 3;
	top: 50%;
	right: 0.25rem;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.menu .category-menu-toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -0.35em 0 0 -0.15em;
	border: 0.35em solid transparent;
	border-left-color: currentColor;
	opacity: 0.55;
	transition: transform 0.15s ease;
}
.menu li.show > .category-menu-toggle::after {
	transform: rotate(90deg);
}
.menu ul .category-menu-toggle {
	right: 0.5rem;
}

/* 4th menu level on mobile: porto-base indents only levels 2-3. */
.mobile-menu li ul ul ul li a {
	padding-left: 4.5rem;
}
/* Product tabs can include any number of admin-defined labels. */
.product-single-tabs .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.product-single-tabs .nav-tabs .nav-link {
  white-space: nowrap;
}
.storefront-error {
  max-width: 720px;
  margin: 0 auto;
  padding: 5rem 1.5rem;
  text-align: center;
}

.storefront-error__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.storefront-error__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.75rem 1.5rem;
  border: 1px solid #222529;
  font: inherit;
  cursor: pointer;
}

.storefront-error__action--primary {
  background: #222529;
  color: #fff;
}

.storefront-error__action--link {
  background: transparent;
  color: #222529;
}

.storefront-form-scope .storefront-form-submit {
  display: inline-block;
  float: right;
  border: 1px solid #222529;
  border-radius: 0;
  background-color: #222529;
  color: #fff;
  cursor: pointer;
  font-family: Poppins, sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.429;
  padding: 1em 1.2em;
  text-transform: uppercase;
  transition: all 0.3s;
}

.storefront-form-scope .storefront-form-submit:hover {
  border-color: #34393f;
  background-color: #34393f;
  color: #fff;
}

.storefront-form-scope .storefront-form-submit:disabled {
  cursor: default;
  opacity: 0.65;
}

.storefront-form-scope .storefront-form-link {
  border: 0;
  background: none;
  color: #08c;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0;
}

.storefront-form-scope .storefront-form-link:hover {
  text-decoration: underline;
}

.storefront-form-scope form .form-group {
  margin-bottom: 1.4rem;
}

.storefront-form-scope form label {
  margin-bottom: 0.7rem;
  color: #777;
  font-family: "Open Sans", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
}

.widget-dashboard .list button.nav-link {
  display: block;
  width: 100%;
  padding: 1rem 0 1.1rem;
  border: 0;
  border-bottom: 1px solid #e7e7e7;
  background: transparent;
  color: #777;
  cursor: pointer;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  text-align: left;
}

.widget-dashboard .list button.nav-link:hover {
  color: #222524;
}