/* MACLIFE — Apple-inspired visual refresh, loaded after theme.css */

:root {
  --bs-primary: #0071e3;
  --bs-primary-rgb: 0, 113, 227;
  --bs-link-color: #0071e3;
  --bs-link-color-rgb: 0, 113, 227;
  --bs-link-hover-color: #0058b0;
  --bs-link-hover-color-rgb: 0, 88, 176;
  --bs-body-color: #1d1d1f;
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", sans-serif;
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --bs-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --bs-box-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.1);
}

body {
  color: #1d1d1f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}

/* Primary color: recolor compiled utility classes that ship the old accent as raw hex.
   Excludes .btn — theme.css wraps Bootstrap in a CSS @layer, and unlayered rules always
   win over layered ones regardless of specificity, so a bare `a` selector here would
   override the button's intended (often white) text color, e.g. on <a class="btn btn-primary">. */
a:not(.btn) { color: #0071e3; }
a:not(.btn):hover, a:not(.btn):focus { color: #0058b0; }

/* Bootstrap 5 buttons are driven entirely by --bs-btn-* custom properties (per state:
   default/hover/active/disabled). Overriding the vars keeps every state consistent
   instead of fighting each pseudo-class rule's specificity individually. */
.btn-primary {
  --bs-btn-bg: #0071e3;
  --bs-btn-border-color: #0071e3;
  --bs-btn-hover-bg: #0058b0;
  --bs-btn-hover-border-color: #0058b0;
  --bs-btn-active-bg: #0058b0;
  --bs-btn-active-border-color: #0058b0;
  --bs-btn-disabled-bg: #0071e3;
  --bs-btn-disabled-border-color: #0071e3;
  --bs-btn-focus-shadow-rgb: 0, 113, 227;
}
.btn-outline-primary {
  --bs-btn-color: #0071e3;
  --bs-btn-border-color: #0071e3;
  --bs-btn-hover-bg: #0071e3;
  --bs-btn-hover-border-color: #0071e3;
  --bs-btn-active-bg: #0071e3;
  --bs-btn-active-border-color: #0071e3;
  --bs-btn-disabled-color: #0071e3;
  --bs-btn-disabled-border-color: #0071e3;
  --bs-btn-focus-shadow-rgb: 0, 113, 227;
}
.text-primary { color: #0071e3 !important; }
.bg-primary { background-color: #0071e3 !important; }
.border-primary { border-color: #0071e3 !important; }

.btn {
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: var(--bs-transition-default, all 0.2s ease-in-out);
}
.btn-lg { border-radius: 999px; }

/* Header: understated, floating above content */
#header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
/* Top utility bar: thin row, normal-size text. The currency <select> and the
   login/cart buttons carry their own padding that otherwise sets the row's
   real height regardless of the row's own (already small) padding. */
#header .header-top {
  padding-block: 0.25rem;
}
#header .header-top .form-select {
  padding-block: 0.125rem;
}
#header .header-top .header-block__action-btn {
  padding-block: 0.25rem;
}

/* Logo row: more breathing room now that the logo itself is a bit larger. */
.header-bottom {
  background-color: #fff;
  padding-block: 1.25rem;
}

/* header-bottom__row lays out .header-bottom__left / the search bar / .header-bottom__right
   as three siblings (see header.tpl) using CSS Grid named areas — this reserves real
   track space for each piece instead of centering the search bar with absolute
   positioning (which has no reserved space and overlaps the side content as soon as
   things get tight, at any viewport width). `minmax(0, 1fr)` on the side columns
   (not plain `1fr`) is what makes them genuinely equal-width regardless of how much
   wider one side's content is than the other's — that's what keeps the middle
   (search) column truly centered. */
.header-bottom__row {
  display: grid !important;
  /* "left" and "right" are both max-content, never minmax(0, 1fr): their own children
     (logo; contact block/currency/login/cart) are flex: 0 0 auto and never shrink, so
     a shrinkable track would let that content overflow past the track's edge, over
     the search box. max-content always reserves exactly what they need at full size;
     "search" is the only track that gives up space first when things get tight. */
  grid-template-columns: max-content minmax(0, 26rem) max-content;
  grid-template-areas: "left search right";
  align-items: center;
  column-gap: 1rem;
}
.header-bottom__left {
  grid-area: left;
  min-width: 0;
}
.header-bottom__right {
  grid-area: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
#_desktop_ps_searchbar.col-auto {
  grid-area: search;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
}
/* theme.css's .ps-searchbar has min-width: 19rem and flex-grow: 0 (the default),
   so the actual visible search box never grows past that fixed width to fill
   whatever room #_desktop_ps_searchbar (its flex parent, above) was given — it just
   sits left-aligned with dead space to its right, at every breakpoint. */
#_desktop_ps_searchbar #ps_searchbar {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.header-bottom__contact {
  flex: 0 0 auto;
  width: auto;
  gap: 0.5rem;
  padding-inline-end: 1rem;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  align-items: center !important;
}
.header-bottom__contact-icon {
  color: #0071e3;
  font-size: 1.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  align-self: center;
}
.header-bottom__contact-lines {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  font-size: 0.8125rem;
  white-space: nowrap;
}
.header-bottom__contact-lines a {
  color: #1d1d1f;
}
.header-bottom__contact-lines a:first-child {
  font-weight: 600;
}
#_desktop_ps_currencyselector,
#_desktop_ps_shoppingcart,
#_desktop_ps_customersignin {
  flex: 0 0 auto;
  width: auto;
}
@media (max-width: 767.98px) {
  #_desktop_ps_customersignin,
  #_desktop_ps_shoppingcart {
    display: none;
  }
}

/* Compact header layout (mobile + tablet, up to the lg breakpoint 991.98px):
   row 1 = logo (left) + EUR/account/cart (right), row 2 = search, centered, below —
   a 2-column/2-row grid, still using named areas so DOM order stays irrelevant. */
@media (max-width: 991.98px) {
  .header-bottom__row {
    /* A real empty middle column (1fr), not justify-content: space-between — browsers
       differ on whether space distributed that way is included in the box of an item
       spanning both tracks (Safari excludes it, leaving "search" left-aligned with a
       big gap on the right; Chrome includes it). An actual track is unambiguous. */
    grid-template-columns: max-content 1fr max-content;
    grid-template-areas:
      "left . right"
      "search search search";
    row-gap: 0.75rem;
  }
  .header-bottom__right {
    gap: 0.5rem;
  }
  #_desktop_ps_currencyselector {
    order: 1;
    flex: 0 0 auto !important;
    width: auto !important;
  }
  #_desktop_ps_currencyselector .form-select {
    width: auto;
    min-width: 4.5rem;
    padding-inline: 0.5rem 1.5rem;
  }
  #_mobile_ps_customersignin {
    order: 2;
  }
  #_mobile_ps_shoppingcart {
    order: 3;
  }
  #_desktop_ps_searchbar.col-auto {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    justify-self: stretch;
  }
}

/* Nav menu row: theme's default link padding (1.25rem block) makes it tall. */
.header-nav-full-width {
  background-color: #fafafa;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.header-nav-full-width .ps-mainmenu__tree-link {
  padding-block: 0.375rem;
}

/* Mobile category toggle: a full-width branded bar with a label instead of a bare icon
   (the button itself is only shown below the xl breakpoint by the theme already). */
@media (max-width: 1199.98px) {
  .header-nav-full-width {
    background-color: #0071e3;
    border-top: none;
  }
  .ps-mainmenu__mobile-toggle {
    width: 100%;
  }
  .menu-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 0.75rem;
    padding-inline: 0;
    color: #fff;
  }
  .menu-toggle__label {
    font-weight: 600;
    font-size: 0.9375rem;
  }
  .menu-toggle .material-icons {
    color: #fff;
  }
}
.logo {
  max-height: 3.75rem;
  max-width: 10rem;
}

/* Product cards: soft elevation, gentle hover lift */
.product-miniature {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: var(--bs-border-radius);
}
.product-miniature:hover {
  transform: translateY(-3px);
}
.product-miniature__image-container,
.product-miniature .thumbnail-container {
  border-radius: var(--bs-border-radius);
  overflow: hidden;
  background-color: #f5f5f7;
}

.card,
.js-sub-menu.submenu,
.ps-searchbar__dropdown {
  border: none;
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow);
}

/* Reassurance icons (security/delivery/returns) under the add-to-cart button:
   side by side instead of stacked, product page only. */
.blockreassurance--product {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
  justify-content: space-between;
  gap: 1rem 0.5rem;
}
.blockreassurance--product .reassurance {
  flex: 1 1 0;
  min-width: 0;
}
.blockreassurance--product .reassurance__image {
  width: 2rem;
  height: 2rem;
}
.blockreassurance--product .reassurance__title {
  font-size: 0.875rem;
}
.blockreassurance--product .reassurance__desc {
  font-size: 0.75rem;
}

/* Reassurance block was moved next to the add-to-cart button, so the description
   column no longer needs to share the row with it — stretch it full width. */
.product__bottom {
  grid-template-columns: 1fr;
}
.product__bottom-right {
  display: none;
}

/* Section titles */
.section-title,
.h1.section-title {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Footer: quieter, more whitespace.
   .footer__main paints its own background (theme default: dark), which sits on top
   of #footer's background — override it directly or the outer color is invisible. */
#footer,
#footer .footer__main {
  background-color: #f5f5f7;
  color: #6e6e73;
}
#footer a:not(.btn) { color: #1d1d1f; }
#footer a:not(.btn):hover { color: #0071e3; }
#footer .copyright,
#footer .copyright a {
  color: #1d1d1f;
}

/* Newsletter row: theme splits it into a left heading / right form (col-lg-4 + col-lg-6),
   which reads as lopsided with a big gap in the middle. Stack it, centered, instead. */
#footer .ps-emailsubscription .row {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}
#footer .ps-emailsubscription .row > * {
  max-width: 32rem;
  width: 100%;
}

/* Footer link blocks: 4 equal columns (links, account, newsletter, contact info),
   each exactly 1/4 of the width — a real grid instead of content-sized flex items. */
#footer .footer__main-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-left: 0;
  margin-right: 0;
}
#footer .footer-block,
#footer .left-block {
  width: auto;
  max-width: none;
  text-align: left;
}
#footer .left-block {
  order: 4;
  /* theme.css gives .left-block a border-bottom + margin/padding meant for its old
     full-width band layout below the other columns — redundant now that it's just
     one of 4 equal grid columns. */
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
#footer .footer-block__title,
#footer .left-block__title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1d1d1f;
  margin-bottom: 1rem;
}
@media (max-width: 767px) {
  #footer .footer__main-top {
    grid-template-columns: repeat(2, 1fr);
  }
}
#footer .left-block .form-control {
  font-size: 0.9375rem;
}
#footer .footer-block__list a,
#footer .ps-contactinfo a {
  font-size: 0.9375rem;
}
#footer .ps-contactinfo__email {
  justify-content: flex-start;
}
#footer .footer__main {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Social icons + copyright: one bottom bar, icon and text side by side,
   separated by a thin vertical divider, instead of the icon sitting alone above. */
#footer .footer__bottom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}
#footer .footer__main-bottom {
  display: flex;
  margin: 0;
  padding-inline-end: 1.25rem;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}
#footer .footer__main-bottom .ps-socialfollow {
  /* Bootstrap's .py-4 utility sets padding-block with !important — must be matched. */
  padding-block: 0 !important;
}
#footer .copyright {
  margin: 0;
  padding: 0;
  border: none;
}

::selection {
  background-color: rgba(0, 113, 227, 0.2);
}