/*
 * Styles that belonged to the legacy CMS "modules".
 *
 * The old platform let each module carry its own `{% style %}` block, injected wherever the module was placed.
 * None of it is in `theme.css`, so a module ported without its stylesheet renders with the right markup and the
 * wrong appearance — which is exactly what happened to the promo bar: the text centred itself instead of sitting
 * left, and nothing in the console said so.
 *
 * Ported verbatim from the module definitions. One file per theme rather than one inline block per module, so
 * `layout.liquid` stays markup and the rules are cacheable.
 */

/* ---- Header Promo Slider ---------------------------------------------------------------------------------
 * The slider itself is `.header_promo_slider`, initialised by the theme's own theme.js (slick). These are the
 * module's presentation rules; the arrow styling below is slick's, and only applies once slick has run.
 */
#features {
  scroll-margin-top: 200px;
}

.slider__text {
  font-size: 15px;
  text-align: left;
}

.slider__text b {
  font-size: 15px;
}

.text-slider {
  width: 90%;
  margin: 0 auto;
}

.text-slider .slick-next,
.text-slider .slick-prev {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 15px;
  height: 15px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  z-index: 10;
}

.text-slider .slick-prev {
  left: -43px;
}

.text-slider .slick-next {
  left: -22px;
}

.text-slider .slick-prev:before,
.text-slider .slick-next:before {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 0.4;
  opacity: 1;
  color: #304650;
  font-weight: bold;
}

.text-slider .slick-prev:before {
  content: '\2039';
}

.text-slider .slick-next:before {
  content: '\203A';
}

@media (max-width: 768px) {
  .slider__text {
    font-size: 10px;
    text-align: center;
  }

  .slider__text b {
    font-size: 10px;
  }

  .text-slider .slick-prev,
  .text-slider .slick-next {
    width: 20px;
    height: 20px;
    display: none !important;
  }

  .text-slider .slick-prev:before,
  .text-slider .slick-next:before {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .text-slider .slick-prev {
    left: 10px;
    display: none !important;
  }

  .text-slider .slick-next {
    right: 10px;
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Controls that were ANCHORS on the old site and are BUTTONS here.

   The port turns a control into a <button> whenever it does something — closes
   the drawer, steps a quantity, submits a removal — because that is what the
   element means and because `<a href="javascript:void(0)">` is inert under this
   platform's CSP and unreachable by keyboard. The theme's stylesheet, though,
   only ever styled the anchor: `.js-close-canvas-cart` and friends set colour
   and size and nothing else, because an anchor has no chrome of its own. A
   <button> does, so the browser's grey face and outset border showed through —
   the drawer's close control rendered as a boxed X.

   Measured against the live site rather than guessed: there `#shopping-cart-
   close-btn` computes to `border: 0 none; background: transparent; padding: 0`,
   which is simply what an <a> gets. So this takes the chrome away and changes
   nothing else — every colour, size and spacing rule still comes from the
   theme's own classes.

   Listed one by one on purpose. A blanket `button { … }` would also strip
   `.second-button`, which IS a real button on the live site (black face, no
   border) and would lose its face.
   --------------------------------------------------------------------------- */
button.js-close-canvas-cart,
button.js-mobile-menu-item,
button.js-go-to-previous-mobile-menu,
button.remove-from-cart,
button.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   …and the half of the problem that stripping chrome does NOT solve.

   Several of the theme's rules are written for the CHILD element by tag —
   `.quantity-field__plus a { display: block; padding: 5px }` — not for the
   container or a class. A <button> in that slot matches none of them, so it
   keeps neither the box nor the padding: the drawer's − and + collapsed to 3
   and 10 pixels wide and sat squashed against the quantity box's border.
   Nothing was "unstyled" in a way a chrome reset could reach; the styling was
   simply addressed to a tag we no longer use there.

   Each block below RESTATES its source rule from theme.css verbatim, with the
   source selector named. Restating rather than inventing something that looks
   close is the point: these controls sit next to anchors styled by the very
   same rules, and a 1px difference in padding would show.
   --------------------------------------------------------------------------- */

/* theme.css: `.quantity-field__minus a`, `.quantity-field__plus a` — plus the chrome reset, kept in the
   SAME rule rather than a separate one: a more specific reset elsewhere silently won the padding back and
   left the steppers 3px wide again. */
.quantity-field__minus button,
.quantity-field__plus button {
  display: block;
  padding: 5px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* theme.css: `.first-step li a` — the mobile menu's top-level rows. */
.first-step li button.js-mobile-menu-item {
  font-size: 18px;
  font-weight: 500;
  line-height: 2.5;
  color: #000;
  display: block;
  position: relative;
  padding-right: 30px;
  width: 100%;
  text-align: left;
}

/* theme.css: `.second-step__go-to-previous a` — the "back" row of a submenu. */
.second-step__go-to-previous button.js-go-to-previous-mobile-menu {
  display: block;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
  padding-bottom: 10px;
  border-bottom: 1px solid #C7C7C7;
  margin-bottom: 30px;
  color: #000;
  width: 100%;
  text-align: left;
}

/* theme.css: `.second-step__go-to-previous a i` */
.second-step__go-to-previous button.js-go-to-previous-mobile-menu i {
  font-size: 14px;
  padding-right: 3px;
}

/* `.button` is drawn for an anchor: it sets a border and a colour but no
   background, because an anchor has none to override. On a <button> the UA's
   grey face showed through, so the ask-a-question control read as a grey box
   next to identical-looking outlined links. Only the background is reset —
   padding and border stay with the theme, including the tighter
   `.product__button .button` variant it deliberately uses inside the buy box. */
button.button {
  background: none;
}

/* ---------------------------------------------------------------------------
   Cart page: controls that were anchors on the old site and are BUTTONS here.

   The legacy markup used `<a href="javascript:void(0)">` for Remove and for the
   coupon's own remove link. Both change server state, so this port makes them
   real form submits — which works with JS off and is what a button is for. The
   theme's stylesheet only ever styled the anchor, so the browser's default
   button chrome (border, grey face, its own font) showed through: a boxed grey
   "Remove" where the site draws a small blue link.

   Resetting the chrome here, in the theme's own override sheet, keeps every
   colour and size rule coming from the theme's `.quantity-selector-remove` /
   `.color--blue` classes as before — nothing is restyled, only the chrome the
   element brought with it is taken away.
   --------------------------------------------------------------------------- */
.remove-item button.quantity-selector-remove,
.cart-result-item button.discount__coupon-remove {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.remove-item button.quantity-selector-remove:hover,
.cart-result-item button.discount__coupon-remove:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Couples page: the size boxes are driven by the radio, not by a JS class.

   theme.css paints the chosen size with
     `.product__available-size li label:not(.out-of-stock):hover,
      .product__available-size li label.active { background:#304650; border-color:#304650; color:#fff }`
   and on the old site an inline `onclick="selectSize(this)"` moved that
   `.active` class about. This platform's CSP blocks inline handlers, so the
   class never moved: clicking a size checked its (hidden) radio and changed
   nothing on screen. The picker looked broken while working perfectly.

   The same paint, keyed on the radio the shopper actually checked. Declarations
   are copied from the rule above deliberately — this is the theme's colour, not
   a new one, and `.active` keeps working for anything that still sets it.

   `cursor` is the one addition. The theme never gave these boxes a pointer (the
   old site's are `default` too), so the one control on the card that must be
   clicked was the one that did not look clickable.
   --------------------------------------------------------------------------- */
.product__available-size input[type="radio"]:checked + .product-grid-item__size {
  background: #304650;
  border-color: #304650;
  color: #fff;
}

.product__available-size li label.product-grid-item__size:not(.out-of-stock) {
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Blog article. The legacy 9_Blog_Detail.liquid carried these three rules in a
   `{% style %}` block at the foot of the template. They are the article's real
   styling — full-bleed body images, a readable contents number, and underlined
   in-article links — so they move into the stylesheet rather than being emitted
   inline on every request, which a strict CSP has no reason to allow.
   --------------------------------------------------------------------------- */
.post__container img {
  width: 100%;
}

.popular-post__number {
  font-size: 16px !important;
}

#blog-detail a {
  font-weight: bolder;
  text-decoration: underline !important;
}

/* ---------------------------------------------------------------------------
   About page. The legacy template looped a repeater and alternated the image
   side with `counter | modulo:2`, emitting a Bootstrap row per block. The
   content is one editable body here, so the alternation is a rule rather than
   a loop: odd blocks put the image first, even blocks reverse the row. Same
   result, and the merchant can add a section without knowing its index.

   Blocks stack on small screens with the TEXT first — `flex-column-reverse` in
   the legacy row, which put the text above the image on a phone regardless of
   which side it took on a desktop.
   --------------------------------------------------------------------------- */
/* Bootstrap's row negative margin. The legacy emitted a real `.row` per block;
   without this the 12px column padding is additive and every block is 30px
   narrower than the live one, which re-wraps the text and changes the height
   of the section. */
.about-blocks {
  margin-left: -12px;
  margin-right: -12px;
}

.about-blocks .about-block {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

/* Half each, no gap, 12px of inner padding — the Bootstrap `col-lg-6` the
   legacy row used, measured on the live page (two 688px columns meeting at
   x=713 inside a 1376px row). A flex `gap` here would push the pair past 100%
   and silently shrink both columns. */
.about-blocks .about-block > figure,
.about-blocks .about-block > .about-block__text {
  margin: 0 0 1.5rem;
  flex: 0 1 50%;
  min-width: 0;
  padding: 0 12px;
}

.about-blocks .about-block > figure img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  /* No `align-items`: the legacy row stretches both columns to the taller one,
     which is what the live page measures. */
  .about-blocks .about-block {
    flex-direction: row;
  }

  /* The image leads on odd blocks and trails on even ones. `nth-of-type`, not
     `nth-child`: the body is authored content and may grow a stray node. */
  .about-blocks .about-block:nth-of-type(even) {
    flex-direction: row-reverse;
  }
}

/* A block with no image is a single child and fills the row on its own — the
   legacy's `col-12` case, without a class having to say so. */

/* ---------------------------------------------------------------------------
   FAQ. The old theme built its accordion from Bootstrap's collapse JS over
   `.accordion-item` / `.accordion-button`; the migrated body is `<h2>` +
   `<details><summary>`, which opens without scripting and keeps the answer in
   the HTML for anything reading the page rather than running it.

   These rules give that markup the accordion's appearance: the same flush
   borders, the same padding, the same grey on an open row, and the "-" the
   legacy printed before every question. Values are Bootstrap's own accordion
   defaults, written out because `<details>` never carries its classes.
   --------------------------------------------------------------------------- */
/* Measured off the live page's `h6.home-about__title mb-4`, not guessed: 24px
   at 600, no padding, 24px under. */
.faq-body > h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  padding: 0;
  margin: 2.5rem 0 24px;
  scroll-margin-top: 120px; /* the header is fixed; an anchor must not land under it */
}

.faq-body > h2:first-child {
  margin-top: 1.5rem;
}

.faq-body details {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.faq-body details:last-of-type {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* 16px/20px padding and a 16px/1.2 line — the live accordion button's own
   metrics, which put each closed row at 53px. */
.faq-body summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 16px 20px;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}

.faq-body summary::-webkit-details-marker {
  display: none;
}

.faq-body summary::before {
  content: "-";
}

/* The chevron, rotated when the row is open — Bootstrap's accordion arrow,
   drawn rather than imported so it needs no icon font or sprite. */
.faq-body summary::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-25%, -25%);
  transition: transform 200ms ease;
}

.faq-body details[open] > summary {
  background-color: #f2f2f2;
}

.faq-body details[open] > summary::after {
  transform: rotate(-135deg) translate(-25%, -25%);
}

.faq-body details > *:not(summary) {
  padding: 0 20px;
}

.faq-body details > *:last-child {
  padding-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
   Contact page. The addresses are page CONTENT (one `.store` block per
   location, composed by the migration from the legacy Stores repeater), so
   these rules map that content onto the styling theme.css already carries for
   `.store-item__address` / `.address__store-number` — the merchant edits an
   address as ordinary content and it lands looking like the live page.

   Two-up on desktop, stacked below it: the legacy's `col-lg-6 col-12`.
   --------------------------------------------------------------------------- */
.contact-stores {
  display: flex;
  flex-wrap: wrap;
  /* The legacy row's 15px gutters, measured on the live page: columns 501px
     wide starting at x=378 inside a 973px container, so the address text lands
     at 393 and 894. Without the negative margin the first address is indented
     and the pair is 30px narrow. */
  margin-left: -15px;
  margin-right: -15px;
  font-size: 16px;
  line-height: 30px;
  color: #000;
}

.contact-stores .store {
  flex: 0 0 100%;
  padding: 1.5rem 15px 0;
}

@media (min-width: 992px) {
  .contact-stores .store {
    flex: 0 0 50%;
  }
}

/* The block's heading is an `<h2>` in the body (headings are what a document
   outline is made of); it is painted as the legacy's `.address__store-number`. */
.contact-stores .store h2 {
  display: block;
  padding: 0 0 15px;
  margin: 0;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: inherit;
  color: #999999;
  letter-spacing: 0.5px;
}

@media (max-width: 991px) {
  .contact-stores {
    font-size: 14px;
    line-height: 28px;
  }

  .contact-stores .store h2 {
    font-size: 12px;
  }
}

.contact-stores .store p {
  padding: 0;
  margin: 0;
}

/* The submitted / rejected notice above the form. Not a colour of its own: the
   error borrows the theme's own accent so it cannot drift from it. */
.contact-page__form + .form-note,
.form-note {
  margin: 0 0 1.5rem;
}

.form-note--error {
  color: #b3261e;
}

/* ---------------------------------------------------------------------------
   Account area. The shop has no account design of its own — its account pages
   sit behind a login on a platform screen — so these pages are assembled from
   the theme's existing parts (the listing's breadcrumb band, the blog's
   category rail, the login page's box and the cart's table). Only the few
   things those parts do not already cover are defined here.
   --------------------------------------------------------------------------- */
.box {
  border: 1px solid rgba(0, 0, 0, 0.125);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.account-stat {
  color: inherit;
  text-decoration: none;
}

.account-stat__num {
  display: block;
  font-size: 32px;
  line-height: 1.2;
}

.account-stat__label {
  display: block;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #999999;
}

/* The close-account button is the one destructive control in the account area.
   It is the theme's button in a warning colour rather than a new component —
   the shape says "button", the colour says "this one is different". */
.account-danger__button {
  background: #b3261e;
  border-color: #b3261e;
}

.account-danger details > summary {
  cursor: pointer;
}

.shopping-cart__table .text-right,
.shopping-cart__table th.text-right {
  text-align: right;
}