/* Product page: info column and "Join the list" panel (BNN, 2026-10-24). DESIGN-SYSTEM.md sections 4.8 and 4.9.
   Loaded after the theme styles, so the theme rules are overridden here, not edited.
   Rhythm of the column (px): title 36 | 8 | description 24 | 24 | price 27 | 4 | tax 20 | 32 | colour name 20 | 12 | swatches
   | 32 | "Size" 20 | 4 | sizes 44 | 32 | action 48 | 16 | pre-order 20. No divider lines, no boxes.
   Touch: every control is at least 44 px high; swatches and sizes get the room from invisible padding, not from size. */

.product__info-container[hidden],
.product__info-container [hidden],
#join-the-list-form[hidden],
.you-are-on-list[hidden] { display: none !important; }

/* ---- title block, price, tax */
/* the theme's own inline CSS sets 22 px !important margins on every child of the column at 990+, so these are !important too */
.product__info-container .product__title { margin: 0 !important; }
.product__info-container .product__description { margin: 8px 0 0 !important; }
.product__info-container [id^="price-template"] { margin: 24px 0 0 !important; }
.product__info-container .product__tax {
  margin: 4px 0 0 !important;
  font-size: 12px;
  line-height: 20px;
}

/* ---- colour: name, then swatches (each swatch is another product page) */
section.product__info-container .product-colors-container {
  margin: 32px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.product__info-container .product-colors-container .color-title {
  margin: 0 0 12px !important;
  font-size: 14px;
  line-height: 20px;
}
.product__info-container .color-item { position: relative; }
.product__info-container .color-item .color-swatch { display: block; margin: 0 !important; }
/* the target is 28 x 44 around an 18 x 18 swatch: no visible change, and the 28 px pitch keeps it clear of the next one */
.product__info-container .color-item a { display: block; position: relative; }
.product__info-container .color-item a::after { content: ""; position: absolute; inset: -13px -5px; }

/* ---- size */
.product__info-container variant-selects { display: block; margin: 32px 0 0 !important; }
.product__info-container fieldset.Size {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}
.product__info-container fieldset.Size legend {
  float: none;
  flex: 0 0 100%;
  margin: 0 0 4px;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  opacity: .6;
}
.product__info-container fieldset.Size label.size {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  margin: 0 !important;
  padding: 0 8px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  cursor: pointer;
}
.product__info-container fieldset.Size label.size:first-of-type { margin-left: -8px !important; }
/* the chosen size is white and underlined (the same mark as the chosen colour); colour is not the only signal */
.product__info-container fieldset.Size input:checked + label.size { text-decoration-color: #fff; }
.product__info-container fieldset.Size input:focus-visible + label.size { text-decoration-color: #fff; text-decoration-thickness: 2px; }
/* not chosen: white at 60 % = 7.4:1 on black (the theme's 40 % was 3.7:1, under the 4.5:1 for text) */
.product__info-container fieldset.Size input:not(:checked) + label.size { color: rgba(255, 255, 255, .6); }
@media (hover: hover) { .product__info-container fieldset.Size input:not(:checked) + label.size:hover { color: #fff; } }
.product__info-container fieldset.Size input:not(:checked):focus-visible + label.size { color: #fff; }
.product__info-container fieldset.Size input { outline: none; }

/* ---- action and pre-order line */
.product__info-container .product__action { margin: 32px 0 0 !important; }
.product__info-container .product__action #coming-soon-btn.coming-soon-btn { margin-top: 0 !important; }
.product__info-container .product__text { margin: 16px 0 0 !important; font-size: 14px; line-height: 20px; }
#coming-soon-btn:focus-visible { outline: none; }

/* ---- the panel */
#join-the-list-form,
.you-are-on-list {
  box-sizing: border-box;
  scroll-margin-top: 24px;
  padding: 0 0 40px;
  color: #fff;
}
#join-the-list-form .join-list-header,
.you-are-on-list .you_are_on_list_header {
  display: grid;
  grid-template-columns: 1fr 30px;     /* the 44 px target of the cross overhangs the column by 14 px, the cross itself stays on the edge */
  align-items: center;
  height: auto;
  margin: 0;
}
#join-the-list-form h2,
.you-are-on-list h2 {
  margin: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 300;
  position: static;           /* the theme centres the heading with position:absolute on phones */
  transform: none;
  outline: none;
}
#join-the-list-form .email-modal__close,
.you-are-on-list .modal__close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  position: static;           /* the theme pins the cross with position:absolute on phones */
  inset: auto;
  justify-self: start;
  width: 44px;
  height: 44px;
  margin: 0 -14px 0 0;
  padding: 0 14px 0 0;      /* the 16 x 16 cross keeps its place; the target is 44 x 44 */
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#join-the-list-form .email-modal__close svg,
.you-are-on-list .modal__close svg { display: block; width: 16px; height: 16px; opacity: .8; transition: opacity .2s ease; }
#join-the-list-form .email-modal__close:focus-visible svg,
.you-are-on-list .modal__close:focus-visible svg { opacity: 1; outline: 0; filter: drop-shadow(0 1px 0 #fff); }
@media (hover: hover) {
  #join-the-list-form .email-modal__close:hover svg,
  .you-are-on-list .modal__close:hover svg { opacity: 1; }
}
#join-the-list-form .email-modal__close:focus,
.you-are-on-list .modal__close:focus { outline: none; }

#join-the-list-form > *,
.you-are-on-list > * { width: auto; max-width: none; }   /* the theme gives children of the panel 88 % on phones */
#join-the-list-form p,
.you-are-on-list p {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: .6px;
  color: rgba(255, 255, 255, .6);
}
#join-the-list-form p strong,
.you-are-on-list p strong { font-weight: 300; color: #fff; }
#join-the-list-form .join-note { margin-top: 8px; }
#join-the-list-form .join-preorder { margin-top: 24px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .75); }

#join-the-list-form form { margin: 32px 0 0; width: auto !important; max-width: none !important; }
#join-the-list-form #email { display: block; width: 100%; box-sizing: border-box; height: 48px; margin: 0; padding: 0; }
#join-the-list-form #email:focus { outline: none; }
#join-the-list-form #email:focus-visible { border-bottom-color: #fff; box-shadow: 0 1px 0 0 #fff; }
#join-the-list-form #email[readonly] { color: rgba(255, 255, 255, .6); }

/* one reserved line for field errors and send errors: it never changes the height of the panel */
#join-the-list-form .join-feedback { box-sizing: border-box; min-height: 28px; padding-top: 8px; }   /* padding, not margin: a margin would collapse out of the box */
#join-the-list-form .join-feedback .bnn-error { margin: 0; }
/* the send error is a <p>: it has to look exactly like the field message (banan-validate.css), not like panel text */
#join-the-list-form p.bnn-error { margin: 0; font-size: 14px; line-height: 20px; letter-spacing: .4px; color: var(--bnn-error); text-align: left; }
#join-the-list-form button#join_btn { margin: 0; }

#join-the-list-form .join-preorder:last-child { margin-bottom: 0; }

/* below 990 px the column is centred (title, price, colour, sizes), so the panel is too; the cross sits at the right edge */
@media (max-width: 989px) {
  .product__info-container fieldset.Size { justify-content: center; }
  .product__info-container fieldset.Size label.size:first-of-type { margin-left: 0 !important; }
  #join-the-list-form,
  .you-are-on-list { padding: 48px 0; text-align: center; }
  #join-the-list-form .join-list-header,
  .you-are-on-list .you_are_on_list_header { grid-template-columns: 30px 1fr 30px; }
  #join-the-list-form h2,
  .you-are-on-list h2 { grid-column: 2; }
  #join-the-list-form .email-modal__close,
  .you-are-on-list .modal__close { grid-column: 3; }
  #join-the-list-form form { text-align: left; }
}
@media (max-width: 767px) {
  #join-the-list-form,
  .you-are-on-list { width: 88%; margin: 0 auto; }   /* 88 % centred, like the action row */
  #join-the-list-form #email { font-size: 16px; }    /* iOS Safari zooms into a field below 16 px */
}
@media (min-width: 990px) {
  #join-the-list-form, .you-are-on-list { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  #join-the-list-form .email-modal__close svg, .you-are-on-list .modal__close svg { transition: none; }
}