/* 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.
   DESKTOP ONLY. Elementor already sets its own smaller logo per breakpoint
   (112px at tablet), and an unscoped rule overrode those and made the header
   WIDER on tablet than it started -- where it was already overflowing. */
@media (min-width:1025px){
  .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. It is pepsdata's switcher, not WCML or Elementor's -- 51px of
   button with 12px block padding, and the one element in the header carrying a
   drop shadow, which is what makes it read as a widget bolted on rather than
   part of the brand. Flattened and brought to 40px, the same height as the
   cart beside it. */
.elementor-location-header .pepsdata-currency-switcher,
.elementor-location-header .pepsdata-currency-dropdown{
  height:40px !important;
}
.elementor-location-header .pepsdata-currency-current{
  height:40px !important;
  padding:0 14px !important;
  box-shadow:none !important;
  font-size:14px !important;
  /* The pill shipped with `border:1px solid #CC3366` -- magenta, on a green
     gradient. Nothing else on the site uses that colour, so it reads as a
     leftover rather than an accent, and at a glance it looks like a validation
     error. Replaced with a soft light edge against the green. */
  border-color:rgba(255,255,255,0.22) !important;
}
.elementor-location-header .pepsdata-currency-current .currency-display{
  height:auto !important;
}

/* Cart: 48 -> 40, to match. */
.elementor-location-header .elementor-menu-cart__toggle,
.elementor-location-header .elementor-menu-cart__toggle_wrapper,
.elementor-location-header .elementor-menu-cart__wrapper,
.elementor-location-header .elementor-menu-cart__toggle .elementor-button{
  height:40px !important;
  min-height:40px !important;
}
.elementor-location-header .elementor-menu-cart__toggle .elementor-button{
  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. */
/* ---- phones --------------------------------------------------------------
 * The mobile header was not just tall, it was scrambled: logo bottom-right,
 * burger bottom-left, cart top-left, currency top-right. That is not a series
 * of odd choices, it is TWO declarations on the row container --
 * `flex-direction:row-reverse` and `flex-wrap:wrap-reverse` -- which reverse
 * the order along the line AND stack the second line above the first. The four
 * items are 50%-width columns, so they wrap two-up and come out backwards.
 *
 * Undone here into one conventional row: burger, logo, currency, cart. No DOM
 * is moved and no item is removed; only the flex rules and the widths.
 */
@media (max-width:767px){
  .elementor-location-header > .elementor-sticky > .e-con-inner,
  .elementor-location-header > .e-con.elementor-sticky > .e-con-inner{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    /* padding-block alone left the inline padding at 0 on the left and 16px on
       the right, so the row started hard against the screen edge. */
    padding:8px 16px !important;
  }
  /* Source order is logo, burger, currency, cart.
     Laid out as: logo hard left, then currency, cart and the burger pushed to
     the right. `margin-right:auto` on the logo is what does the pushing -- it
     eats the free space, so the three controls stay grouped at the edge
     instead of being spread across the row by justify-content. */
  .elementor-location-header > .elementor-sticky > .e-con-inner > .e-con{
    width:auto !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  .elementor-location-header > .elementor-sticky > .e-con-inner > .e-con:nth-child(1){order:1;margin-right:auto !important;}
  .elementor-location-header > .elementor-sticky > .e-con-inner > .e-con:nth-child(2){order:4;}
  .elementor-location-header > .elementor-sticky > .e-con-inner > .e-con:nth-child(3){order:2;}
  .elementor-location-header > .elementor-sticky > .e-con-inner > .e-con:nth-child(4){order:3;}

  /* The logo column is the flexible one, so it is also the one that collapses
     when the row overruns -- it had shrunk to 40px while the <a> inside kept
     its full width and spilled out. flex-basis pins it. */
  .elementor-location-header > .elementor-sticky > .e-con-inner > .e-con:nth-child(1){
    flex:0 1 132px !important;
  }
  .elementor-location-header > .elementor-sticky > .e-con-inner > .e-con:nth-child(1){
    margin-right:auto !important;
  }
  .elementor-location-header .elementor-widget-theme-site-logo,
  .elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container,
  .elementor-location-header .elementor-widget-theme-site-logo a{
    display:block !important;
    width:100% !important;
    text-align:left !important;
  }
  .elementor-location-header .elementor-widget-theme-site-logo img{
    max-width:132px !important;
    width:100% !important;
    height:auto !important;
  }

  /* Currency: the flag is the widest part of the control and the least
     informative -- "£ GBP" already says which currency it is. Dropped on
     phones only; the control itself is untouched and still tappable.
     The width overrides matter as much as the flag: the switcher carries its
     own 170px, which alone was a quarter of the viewport. */
  .elementor-location-header .pepsdata-currency-current .currency-flag{display:none !important;}
  .elementor-location-header .pepsdata-currency-switcher,
  .elementor-location-header .pepsdata-currency-dropdown,
  .elementor-location-header .pepsdata-currency-current,
  .elementor-location-header .elementor-widget-shortcode,
  .elementor-location-header .elementor-widget-shortcode .elementor-widget-container,
  .elementor-location-header .elementor-shortcode{
    width:auto !important;
    min-width:0 !important;
  }
  .elementor-location-header .pepsdata-currency-current{padding:0 10px !important;}

  /* Cart: icon and count only. The running subtotal is one tap away and is the
     first thing the cart page shows. */
  .elementor-location-header .elementor-menu-cart__toggle .elementor-button-text{
    display:none !important;
  }
  .elementor-location-header .elementor-menu-cart__toggle .elementor-button{
    padding-inline:12px !important;
  }
}

/* ---- promo strip on phones -----------------------------------------------
 * Three stacked rows (pill, copy, search) = 128px. The pill and the copy fit on
 * one line once the copy is sized for a phone. */
@media (max-width:767px){
  .elementor-location-header > .e-con:first-child > .e-con-inner{
    padding-block:6px !important;
  }
  .elementor-location-header > .e-con:first-child .elementor-widget-heading{
    font-size:12.5px !important;
    line-height:1.3 !important;
  }
  /* The pill and its line of copy were stacked, which is 84px of the strip's
     128. Side by side they are one line. */
  .elementor-location-header > .e-con:first-child > .e-con-inner > .e-con:first-child{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    width:100% !important;
  }
  /* The PROMO! pill is dropped on phones. It is decoration -- the sentence
     beside it already says there is an offer and gives the code -- and on a
     narrow screen it was taking a third of the line and forcing the copy to
     wrap. Desktop keeps it. */
  .elementor-location-header > .e-con:first-child > .e-con-inner > .e-con:first-child > *:first-child{
    display:none !important;
  }
  .elementor-location-header > .e-con:first-child > .e-con-inner > .e-con:first-child > *:nth-child(2){
    width:auto !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    text-align:center !important;
  }
  /* Third column of the strip is empty -- it only contributes margin. */
  .elementor-location-header > .e-con:first-child > .e-con-inner > .e-con:nth-child(3):empty{
    display:none !important;
  }
  .elementor-location-header > .e-con:first-child .elementor-widget-search input[type="search"],
  .elementor-location-header > .e-con:first-child .elementor-widget-search .e-search-input,
  .elementor-location-header > .e-con:first-child .elementor-widget-search button{
    height:32px !important;min-height:32px !important;
  }
}

/* Small phones: the row has four fixed items and a flexible logo, so the logo
   is what gives. */
@media (max-width:380px){
  .elementor-location-header > .elementor-sticky > .e-con-inner > .e-con:nth-child(1){
    flex:0 1 112px !important;
  }
  .elementor-location-header .elementor-widget-theme-site-logo img{max-width:112px !important;}
}