/* Peptide Works -- header tightening (pw-header.php).
 *
 * Target is the redesign's own header (html1/home-v2.html): a 44px promo strip
 * over a 76px row, against the 68 + 121 = 189px the Elementor header was
 * running at. Menu CONTENT is untouched -- same links, labels and order.
 *
 * Measured before / after, at 1440:
 *   promo strip     68px  ->  44px
 *   header row     121px  ->  76px
 *   total          189px  -> 120px   (-37%)
 *   logo       250x81px  -> 143x46px (the sample's 130px, +10%)
 *   cart right edge  flush with the container -> 32px clear of it
 *
 * Every rule is scoped to .elementor-location-header, so nothing here can reach
 * page content.
 */

/* ---- promo strip ---------------------------------------------------------
 * Its 68px came from the search widget inside it being 52px tall. Shrink the
 * field and the strip follows. */
.elementor-location-header > .e-con:first-child > .e-con-inner{
  padding-block:4px !important;
}
.elementor-location-header .elementor-widget-search form,
.elementor-location-header .elementor-widget-search input[type="search"],
.elementor-location-header .elementor-widget-search .e-search-input{
  height:36px !important;
  min-height:36px !important;
  font-size:14px !important;
}
.elementor-location-header .elementor-widget-search button,
.elementor-location-header .elementor-widget-search .e-search-submit{
  height:36px !important;
  min-height:36px !important;
}
/* The promo pill and its line of copy, brought down to the strip's scale. */
.elementor-location-header > .e-con:first-child .elementor-widget-heading{
  font-size:13.5px !important;
}

/* ---- header row ----------------------------------------------------------
 * 20px block padding + an 81px logo made 121px. 15px + 46px makes 76px. */
.elementor-location-header > .elementor-sticky > .e-con-inner,
.elementor-location-header > .e-con.elementor-sticky > .e-con-inner{
  padding-block:15px !important;
}

/* Logo: the sample runs 130px wide; this is that +10%, as asked. It is a
   REDUCTION on the 250px the live header was using -- that width is what made
   the row 121px tall in the first place. */
.elementor-location-header .elementor-widget-theme-site-logo img,
.elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container{
  width:143px !important;
  max-width:143px !important;
  height:auto !important;
}

/* Nav: vertical padding only. No link, label or order is touched. */
.elementor-location-header .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title{
  padding-block:8px !important;
}
.elementor-location-header .e-n-menu-title-text{
  font-size:15px !important;
  font-weight:600 !important;
}

/* Currency pill: 59px tall with a heavy drop shadow. The shadow is the thing
   that reads as "widget" rather than "brand" -- the sample's own currency
   control is a flat select. */
.elementor-location-header .elementor-widget-shortcode .wcml-dropdown,
.elementor-location-header .elementor-widget-shortcode .wcml-dropdown *{
  box-shadow:none !important;
}
.elementor-location-header .elementor-widget-shortcode .wcml-dropdown a,
.elementor-location-header .elementor-widget-shortcode .wcml-dropdown .wcml-cs-item-toggle{
  height:40px !important;
  line-height:40px !important;
  padding-block:0 !important;
  font-size:14px !important;
}

/* Cart */
.elementor-location-header .elementor-menu-cart__toggle .elementor-button{
  height:40px !important;
  padding-block:0 !important;
  font-size:14px !important;
}

/* ---- breathing room on the right -----------------------------------------
 * The cart's right edge sat exactly on the 1280 container edge, so it read as
 * jammed against the page. Both rows get the same inset so the strip and the
 * row still line up down the right-hand side. */
.elementor-location-header > .e-con > .e-con-inner{
  padding-right:32px !important;
}
@media (max-width:1024px){
  .elementor-location-header > .e-con > .e-con-inner{padding-right:16px !important;}
}

/* ---- phones --------------------------------------------------------------
 * The row is driven by the logo here too, so cap it and let everything else
 * sit inside. */
@media (max-width:767px){
  .elementor-location-header .elementor-widget-theme-site-logo img,
  .elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container{
    width:124px !important;max-width:124px !important;
  }
  .elementor-location-header > .elementor-sticky > .e-con-inner,
  .elementor-location-header > .e-con.elementor-sticky > .e-con-inner{
    padding-block:12px !important;
  }
}
