/* ------------------------------------------------------------------
   Section CSS that Shopify emitted inline for the header, the menu
   drawer and the cart drawer. These rules never lived in a .css file
   on the Shopify side, so the first port missed them: without them the
   mobile hamburger stayed visible on desktop and the cart drawer had no
   hidden resting state.
   ------------------------------------------------------------------ */

header-drawer {
	justify-self: start;
	margin-left: -1.2rem;
}

@media screen and (min-width: 990px) {
	header-drawer {
		display: none;
	}
}

.menu-drawer-container {
	display: flex;
}

.list-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.list-menu--inline {
	display: inline-flex;
	flex-wrap: wrap;
}

summary.list-menu__item {
	padding-right: 2.7rem;
}

.list-menu__item {
	display: flex;
	align-items: center;
	line-height: calc(1 + 0.3 / var(--font-body-scale));
}

.list-menu__item--link {
	text-decoration: none;
	padding-bottom: 1rem;
	padding-top: 1rem;
	line-height: calc(1 + 0.8 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
	.list-menu__item--link {
		padding-bottom: 0.5rem;
		padding-top: 0.5rem;
	}
}

/* The cart drawer's resting state. .drawer.active flips it back to
   visible - that rule is in component-cart-drawer.css. */
.drawer {
	visibility: hidden;
}

/* Header padding, exactly as the Shopify section emits it. */
.header {
	padding: 6px 3rem 6px 3rem;
}

.section-header {
	position: sticky; /* Safari z-index fix, same as Dawn */
	margin-bottom: 0;
}

@media screen and (min-width: 990px) {
	.header {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}


/* ----------------------------------------------- what's in the box ---
   From snippets/hl-bundle-contents.liquid, which emitted it inline. */
hl-box {
      margin: 0 0 2.4rem;
      padding: 2rem 0 0;
      border-top: 1px solid rgba(var(--color-foreground), 0.14);
    }

    .hl-box__title {
      margin: 0 0 1.6rem;
      font-size: 1.1rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(var(--color-foreground), 0.6);
    }

    .hl-box__list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 1.2rem;
    }

    .hl-box__item {
      display: grid;
      grid-template-columns: 3.4rem 1fr;
      gap: 0 1.4rem;
      align-items: start;
      padding: 1.4rem 1.6rem 1.4rem 1.2rem;
      border: 1px solid rgba(var(--color-foreground), 0.14);
      border-radius: 1.2rem;
      background: rgba(var(--color-foreground), 0.03);
    }

    .hl-box__n {
      grid-row: span 3;
      align-self: center;
      font-size: 1.15rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: rgba(var(--color-foreground), 0.42);
      font-variant-numeric: tabular-nums;
      text-align: center;
    }

    .hl-box__kind {
      margin: 0 0 0.4rem;
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(var(--color-foreground), 0.55);
    }

    .hl-box__what {
      margin: 0;
      font-size: 1.7rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: rgb(var(--color-foreground));
    }

    .hl-box__note {
      margin: 0.4rem 0 0;
      font-size: 1.3rem;
      line-height: 1.4;
      color: rgba(var(--color-foreground), 0.65);
    }

    .hl-box__tested {
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      margin: 1.4rem 0 0;
      font-size: 1.3rem;
      line-height: 1.45;
      color: rgba(var(--color-foreground), 0.72);
    }

    .hl-box__tested svg {
      flex: 0 0 auto;
      width: 1.6rem;
      height: 1.6rem;
      margin-top: 0.1rem;
    }

    .hl-box__tested a {
      color: inherit;
      text-underline-offset: 0.3em;
    }

    @media screen and (min-width: 990px) {
      .hl-box__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .hl-box__item { grid-template-columns: 1fr; gap: 0; padding: 1.6rem; }
      .hl-box__n { grid-row: auto; text-align: left; margin-bottom: 1rem; }
    }
  

/* ------------------------------------------- shipping line on the PDP ---
   From snippets/hl-product-shipping.liquid, also inline on Shopify. */
.hl-pdp-ship { display: flex; align-items: flex-start; gap: 1rem; margin: 0 0 1.6rem; padding: 1.2rem 1.6rem; border: 1px solid rgba(var(--color-foreground), 0.14); border-radius: 1.2rem; background: rgba(var(--color-foreground), 0.03); }
.hl-pdp-ship__icon { flex: none; width: 1.8rem; height: 1.8rem; margin-top: 0.2rem; color: rgb(var(--color-foreground)); }
.hl-pdp-ship__icon svg { display: block; width: 100%; height: 100%; }
.hl-pdp-ship__text { margin: 0; font-size: 1.4rem; line-height: 1.45; color: rgba(var(--color-foreground), 0.82); }
.hl-pdp-ship__text strong { display: block; font-weight: 600; color: rgb(var(--color-foreground)); }