/*
 Theme Name: CopyKat 2026
 Theme URI: https://example.com/
 Description: Child theme for Hello Elementor.
 Author: Your Name
 Author URI: https://example.com/
 Template: hello-elementor
 Version: 1.0.0
 Text Domain: copykat-2026
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* Make the whole page a flex column that fills the viewport */
html, body {
  height: 100%;
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

ul {
	margin-block-start:0rem;
	margin-block-end:0.9rem !important;
}

/* Elementor Theme Builder locations */
.elementor-location-header {
  flex: 0 0 auto; /* header takes natural height */
}

.elementor-location-single,
.elementor-location-archive {
  flex: 1 0 auto; /* content expands to push footer down when short */
}

.elementor-location-footer {
  flex: 0 0 auto; /* footer sits after content */
}

/* ============================
   CopyKat 2026 — Logo sizing
   Widget class: .logo-cat on the Image widget
   Original image: 512 x 512
   Goal: 41% height on desktop, and responsive breakpoints
   ============================ */

/* Wrapper should collapse to image size and have only top margin */
.logo-cat {
  display: inline-block; /* wrapper matches image box */
  margin: 1em 0 0 0;     /* only top margin as requested */
  padding: 0;
  line-height: 0;        /* remove inline gaps */
}

/* Desktop/Widescreen: 512 * 0.41 = 210px */
.logo-cat img {
  display: block;        /* predictable box; wrapper = image size */
  height: 210px !important;         /* target visual/layout height */
  width: auto !important;           /* preserve aspect ratio */
  max-width: none !important;       /* neutralize Elementor's max-width:100% if present */
  margin: 0;
  padding: 0;
  border: 0;
}



/* The form controls the row height; children fill it */
.elementor-element-2dac12d .e-search-form,
.elementor-element-e614384 .e-search-form {
  display: inline-flex !important;
  align-items: center !important;   /* center both children */
  height: 36px !important;          /* single source of truth */
  gap: 0 !important;
}

/* Wrapper inherits the same height */
.elementor-element-2dac12d .e-search-input-wrapper,
.elementor-element-e614384 .e-search-input-wrapper {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;          /* = 36px */
}

/* --- THE INPUT: kill min-height & logical paddings --- */
#search-2dac12d.e-search-input,
#search-e614384.e-search-input{
  /* Hard clamp height */
  height: 100% !important;          /* uses the form's 36px */
  min-height: 36px !important;
  max-height: 36px !important;

  /* Box model */
  box-sizing: border-box !important;
  border: 1px solid #ddd !important;
  border-right: none !important;
  border-radius: 6px 0 0 6px !important;
  background: #fff !important;
  box-shadow: none !important;

  /* Typography */
  font-size: 14px !important;
  line-height: 36px !important;     /* vertical centering without extra height */

  /* Padding: explicitly reset both physical and logical properties */
  padding: 0 12px !important;       /* horizontal padding only */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-block: 0 !important;      /* logical (start/end) padding */
  padding-block-start: 0 !important;
  padding-block-end: 0 !important;

  /* Reset common UA styles that can affect height */
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
}

/* The button fills the same container height */
.elementor-element-2dac12d .e-search-submit,
.elementor-element-e614384 .e-search-submit{
  height: 100% !important;          /* = 36px */
  min-height: 36px !important;
  max-height: 36px !important;

  box-sizing: border-box !important;
  padding: 0 14px !important;       /* no vertical padding */
  border: 1px solid #ddd !important;
  border-left: none !important;
  border-radius: 0 6px 6px 0 !important;

  background-color: #0073e6 !important; /* brand color */
  color: #fff !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.elementor-element-2dac12d .e-search-submit .e-font-icon-svg,
.elementor-element-e614384 .e-search-submit .e-font-icon-svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

/* Button hover: slightly darker */
.elementor-element-2dac12d .e-search-submit:hover,
.elementor-element-e614384 .e-search-submit:hover{
  background-color: #0064cc !important;
}

/* Input focus: subtle blue focus ring */
.elementor-element-2dac12d #search-2dac12d.e-search-input:focus,
.elementor-element-e614384 #search-e614384.e-search-input:focus{
  border-color: #bcd4ff !important;
  box-shadow: 0 0 0 2px rgba(0,115,230,0.15) !important;
}

/* Button focus: consistent focus ring */
.elementor-element-2dac12d .e-search-submit:focus,
.elementor-element-e614384 .e-search-submit:focus{
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,115,230,0.25) !important;
}


/* Remove all left padding & margin inside the cat-menu widget */
#cat-menu nav.elementor-nav-menu--main ul.elementor-nav-menu,
#cat-menu nav.elementor-nav-menu--main ul.elementor-nav-menu li,
#cat-menu nav.elementor-nav-menu--main ul.elementor-nav-menu a,
#tags-menu nav.elementor-nav-menu--main ul.elementor-nav-menu,
#tags-menu nav.elementor-nav-menu--main ul.elementor-nav-menu li,
#tags-menu nav.elementor-nav-menu--main ul.elementor-nav-menu a{
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* SmartMenus plugin adds extra padding — remove that too */
#cat-menu .sm-vertical,
#tags-menu .sm-vertical {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Some themes add padding to LI items — override completely */
#cat-menu .menu-item,
#tags-menu .menu-item {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Ensure links themselves are flush-left */
#cat-menu .elementor-item,
#tags-menu .elementor-item {
    padding-left: 0 !important;
}

.archive ul.products,
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 24px;
}

body > div.elementor.elementor-107.elementor-location-single.post-113.page.type-page.status-publish.hentry > div > div.elementor-element.elementor-element-c2e6ae0.e-con-full.e-flex.e-con.e-child > div.elementor-element.elementor-element-a61000e.elementor-widget.elementor-widget-theme-post-content > div > div > div > div {
	margin-inline-end: 0 !important;
	margin-inline-start: 0 !important;
}



/* -----------------------------------------
   Responsive breakpoints (your values)
   ----------------------------------------- */

/* <= 1366px: 512 * 0.38 = 194.56px */
@media (max-width: 1366px) {
  .logo-cat img {
    height: 175px !important;
  }
	.archive ul.products,
	.woocommerce ul.products {
		display: grid !important;
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 24px;
	}
}

/* <= 1024px: 512 * 0.34 = 174.08px */
@media (max-width: 1024px) {
  .logo-cat img {
    height: 150px !important;
  }
	.archive ul.products,
	.woocommerce ul.products {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 24px;
	}
}

/* <= 767px: 512 * 0.30 = 153.6px */
@media (max-width: 767px) {
  .logo-cat img {
    height: 125px !important;
	width:125px !important;
  }
	.archive ul.products,
	.woocommerce ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 24px;
	}
	

	/* 1) General override for Elementor Nav Menu dropdown container */
	.elementor-nav-menu--dropdown .elementor-nav-menu__container,
	#cat-menu > nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
	#tags-menu > nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
	  width: 75% !important;      /* your desired width */
	  left: auto !important;         /* cancel Elementor's left calc */
	  right: 0 !important;           /* align to right edge (optional) */
	  max-width: none !important;
	  padding:0 1em !important;
	}

	/* 2) If Elementor injects inline style on the container, this selector wins */
	.elementor-nav-menu__container[style],
	#cat-menu > .elementor-nav-menu__container[style],
	#tags-menu > .elementor-nav-menu__container[style] {
	  width: 75% !important;
	  left: auto !important;
	  right: 0 !important;
	  padding:0 1em !important;
	}

	/* Optional: control the dropdown wrapper as well */
	.elementor-nav-menu--dropdown,
	#cat-menu > .elementor-nav-menu__container,
	#tags-menu > .elementor-nav-menu__container {
	  max-width: 75% !important;
	  padding:0 1em !important;
	}


}