/* ==========================================================================
   EatMePrint — design wave 1 overrides.
   Loaded from head.html AFTER main_header.min.css and after the inline
   theme-settings <style> block, so rules here win on equal specificity.
   Deliberately a separate file: main_header.min.css is an 87KB single-line
   monolith with no build source, and must not be hand-edited.
   ========================================================================== */

/* --- Hero legibility -----------------------------------------------------
   All three slide photos are shot on white-painted wood, so the white hero
   headline was barely readable on the loaded image and invisible before it
   painted. Two fixes: re-enable the theme's own scrim (the markup for
   .head-slide-shadow was commented out in home.html) and give the slide a
   dark base colour so the pre-load state is dark rather than white.
   The colour goes on .head-slide__item, not .six — .six carries an inline
   `background:` shorthand which would override background-color.          */
.head-slide-shadow { opacity: .38; }
.head-slide__item  { background-color: #2b2b33; }

/* --- Hero call-to-action --------------------------------------------------
   One centred button only: "Create your set from $55" -> /createset/.
   The amber (#fac564, from theme settings via head.html) is DELIBERATE BRAND —
   owner-confirmed 2026-08-24. Do not restyle it to the purple used elsewhere;
   this file must not override .btn__head colours.                           */

/* --- Constructor page: price + a shorter column --------------------------
   The buy button sat at ~779px on a 720px-tall viewport. Collapsing three
   info lines into one and tightening the vertical rhythm lifts it above the
   fold even after the new price line is added.                            */
.cart__right .setinfo {
  font-size: 13px;
  color: #5a5a5a;
  line-height: 1.45;
  margin: 4px 0 14px;
  text-align: center;
}
.cart__right p { margin-bottom: 10px; }
.cart__size { margin-bottom: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.cart__price {
  width: 100%;
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: #19232f;
}
.cart__price span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  color: #5a5a5a;
}
.cart__right label { display: block; margin-bottom: 8px; }

/* Desktop only: tighten the vertical rhythm above and around the buy button so
   CREATE ME clears the fold on a 1280x800 screen (~750px of usable viewport).
   Measured before: button top 782px. After: ~690px, fully visible.
   The step breadcrumb alone was spending 66px on padding for a 16px line. */
@media (min-width: 765px) {
  .nav-cart              { padding: 12px 0; }
  .cart .titel           { margin-bottom: 6px; }
  .cart h2               { margin-bottom: 12px; }
  .cart__constructor     { margin-bottom: 6px; }
  .cart__right p         { margin-bottom: 6px; }
  .cart__right .setinfo  { margin: 2px 0 8px; }
  .cart__size            { margin-bottom: 6px; }
  .cart__price           { margin-top: 4px; }
  .cart__right label     { margin-bottom: 4px; }
}

/* Mobile: nothing extra needed for the hero — a single inline-block button
   centres itself inside .head-slide__block (text-align:center).            */

/* --- Social login: Google only -------------------------------------------
   Facebook and Instagram sign-in were removed (both were verified BROKEN on
   2026-08-24 — Facebook returns an error/blocked page, Instagram's API has
   been dead for years; Google's authorize step is clean). The surviving
   Google link previously used .btn__fb, which paints it Facebook-blue
   (#3b5997) — hence a dedicated neutral style closer to Google's own
   sign-in convention.                                                      */
.modal-social__button { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
/* The monolith paints modal anchors white; .btn__google needs the higher
   specificity (and !important on colour) or the label renders white-on-white. */
.socoauth a.btn__google,
.modal-social__button a.btn__google { color: #3c4043 !important; }
.socoauth a.btn__google:hover,
.modal-social__button a.btn__google:hover { color: #202124 !important; }
.btn__google {
  display: block;
  width: 100%;
  height: 52px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  text-decoration: none;
  background: #fff;
  color: #3c4043;
  border: 1px solid #dadce0;
  border-radius: 2px;
  -webkit-transition: background .3s, box-shadow .3s;
  transition: background .3s, box-shadow .3s;
}
.btn__google:hover {
  background: #f7f8f8;
  color: #3c4043;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .3);
}

/* --- Mobile ordering fix -------------------------------------------------
   main_header.min.css @media (max-width:764px) gave .cart__right order:0 and
   .cart__left order:1, which rendered the "+ Add photos" upload panel BELOW
   the consent row and the buy button. Swap them so the funnel reads
   upload -> grid -> price -> buy.                                          */
@media (max-width: 764px) {
  .cart__left {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    margin-bottom: 15px;
  }
  .cart__right {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin-bottom: 0;
  }
}

/* --- Checkout field alignment --------------------------------------------
   .cart3__block is a flex row with align-items:center, so the moment one field
   grew - a validation message, or a longer "(optional)" label wrapping - its
   neighbour was vertically centred against it and the labels stopped lining up.
   Top-align instead so every field in a row starts on the same line.        */
.cart3 .cart3__block {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

/* --- Guest checkout: Google as a small shortcut ---------------------------
   Compact, Google-branded, sitting inline with the "or sign in" text. Guest
   checkout is the primary path; this is a way to skip typing, not a competing
   call to action, so it must not read as heavily as the buy button.
   Mark and wording follow Google's sign-in branding guidance: unaltered
   four-colour G, white button, "Continue with Google".                      */
.guest-note__oauth {
  margin-top: 12px;
  font-size: 14px;
  color: #5a5a5a;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.guest-note__oauth .btn__google {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: auto;
  height: 36px;
  line-height: 1;
  padding: 0 14px;
  margin: 0 10px 0 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background: #fff;
}
.guest-note__oauth .btn__google svg { margin-right: 9px; -ms-flex-negative: 0; flex-shrink: 0; }
.guest-note__or a { text-decoration: underline; }