/* ============================================================================
   Claire Organics — Breadcrumb, generic pages, cart, account, search
   ========================================================================== */

/* ---- breadcrumb ---- */
.breadcrumb {
  max-width: var(--rd-page);
  margin: 0 auto;
  padding: 18px 24px 4px;
  font-family: var(--rd-sans);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rd-ink-soft);
}
.breadcrumb a { color: var(--rd-ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--rd-sage); }
.breadcrumb .breadcrumb__sep { color: var(--rd-line); margin: 0 8px; }
.breadcrumb span:last-child { color: var(--rd-ink); }

/* ---- generic page / rte ---- */
.template-page main.wrapper.main-content,
.template-list-collections main.wrapper.main-content { padding: 30px 24px; }
.template-page .rte,
.page-content .rte {
  max-width: var(--rd-measure);
  margin: 0 auto;
  color: var(--rd-ink-soft);
  line-height: 1.8;
}
.rte a { color: var(--rd-sage); }
.rte h1, .rte h2, .rte h3, .rte h4 { color: var(--rd-ink); }
hr { border-color: var(--rd-line); }

/* page title */
.section-header__title { color: var(--rd-ink); }

/* ---- cart ---- */
.template-cart main.wrapper.main-content { padding: 30px 24px; }
.cart__row, .cart-table tr { border-color: var(--rd-line); }
.cart__subtotal, .cart-subtotal__price { font-family: var(--rd-serif); color: var(--rd-ink); }
.btn.checkout, .cart__checkout { background-color: var(--rd-sage); }
.btn.checkout:hover, .cart__checkout:hover { background-color: var(--rd-sage-deep); }

/* cart drawer */
.cart-drawer .cart-drawer-wrapper { background: var(--rd-surface); }
.cart-drawer .section-header__title { color: var(--rd-ink); }
.cart-drawer .cart-qty-adjust .btn { color: var(--rd-ink); border-color: var(--rd-line); background: transparent; }

/* Quantity stepper (cart drawer + /cart, which reuses the drawer markup).
   One pill-shaped border on the wrapper, seamless inside — matching the PDP
   stepper. The wrapper must hug its content, otherwise the border stretches
   across the whole grid column and leaves the controls floating at one end. */
.cart-drawer .cart-qty-adjust {
  width: max-content;
  align-items: center;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius);
  overflow: hidden;
}
.cart-drawer .cart-qty-adjust .btn,
.cart-drawer .cart-qty-adjust input {
  border: 0;
  border-radius: 0;
}
/* Definite widths matter here: timber gives .input-group-btn `width: 1%`, and a
   percentage width is indefinite for intrinsic sizing — so `width: max-content`
   above sized the pill from the buttons' text+padding (~31px each) while layout
   used their 25px min-width, leaving ~15px of dead space after the "+". */
.cart-drawer .cart-qty-adjust .btn { flex: 0 0 28px; width: 28px; padding: 0; }
.cart-drawer .cart-qty-adjust input { flex: 0 0 50px; }
.cart-drawer .cart-qty-adjust .btn:hover { color: var(--rd-sage); }

/* Vouchers modal — discount code + Apply.
   The two sit flush against each other with no gap, so they have to read as one
   control. The platform's vouchers.css sets `align-items: center` on the field,
   which left the button ~9px shorter than the input with visible gaps above and
   below the seam; `stretch` makes the button take the input's full height. The
   radius is then shared across the pair — rounded on the outer corners, square
   where they meet — instead of two roundings butting into each other.
   Selectors carry .vouchers-modal because vouchers.css loads after this file. */
.vouchers-modal discount-input .field { align-items: stretch; }
.vouchers-modal discount-input .field .field__input {
  border-radius: var(--rd-radius) 0 0 var(--rd-radius);
}
.vouchers-modal discount-input .field button[name="apply"] {
  border-radius: 0 var(--rd-radius) var(--rd-radius) 0;
}

/* ---- account / forms ---- */
.template-customers main.wrapper.main-content { padding: 40px 24px; }
.template-customers h1, .template-customers h2 { text-align: center; }
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"], textarea, select {
  border-radius: var(--rd-radius);
  border-color: var(--rd-line);
  font-family: var(--rd-sans);
  color: var(--rd-ink);
}
input:focus, textarea:focus, select:focus { border-color: var(--rd-sage); box-shadow: 0 0 0 3px var(--rd-sage-tint); }
.form-horizontal label { color: var(--rd-ink); }

/* ---- search results ---- */
.template-search main.wrapper.main-content { padding: 30px 24px; }
.template-search h1 { text-align: center; }

/* ---- 404 ---- */
.template-404 main.wrapper.main-content { padding: 60px 24px; text-align: center; }

/* scroll-to-top button. The arrow must be re-coloured through `.svg-icon`:
   theme.css sets `#scrollTopButton .svg-icon { fill: <btn text> }` (white), which
   outranks a plain `#scrollTopButton svg` — so the white arrow survived onto the
   cream button below and the icon looked missing. */
#scrollTopButton svg.svg-icon { fill: var(--rd-ink); }
#scrollTopButton { background: var(--rd-surface); border: 1px solid var(--rd-line); box-shadow: var(--rd-shadow-sm); }
#scrollTopButton:hover svg.svg-icon { fill: var(--rd-sage); }

/* ---- account: sf auth follow-up views + dashboard referral link ---- */
/* sf's follow-up auth views (the password step /account/auth, "Almost done"
   /account/setup, the email login link and phone OTP steps) nest the other way
   round from the sign-in entry /account/login:
     entry:     .customer.login.section-width-control.wrapper > .card
     follow-up: .card.section-width-control.wrapper > .customer
   On the entry the column's .wrapper side padding (15px, 30px from 768px)
   insets the tinted .card; here .card's own padding (40px 60px, 30px 20px up
   to 991px) replaced that padding, so the tint filled the whole column — a
   card 60px wider than the entry's at desktop (500 vs 440) and 30px wider on
   a phone (327 vs 297). Give the column back the .wrapper inset, clip the
   tint to its content box (still the theme's own .card colour) and move the
   card padding onto the .customer: same box, same offsets as the entry. The
   min-width mirrors the entry page's inline floor on its 5/12 column (which
   only that page carries), so the two match between 992px and ~1030px too. */
.card.section-width-control { padding: 0 15px; background-clip: content-box; }
.card.section-width-control > .customer { padding: 30px 20px; }
@media screen and (min-width: 768px) {
  .card.section-width-control { padding: 0 30px; }
}
@media screen and (min-width: 992px) {
  .card.section-width-control.large--five-twelfths { min-width: 420px; }
  .card.section-width-control > .customer { padding: 40px 60px; }
}

/* dashboard "Refer & Earn": the copy icon is pinned to the link row's foot
   (inline `bottom: 14px`), which centres a 20px icon only when the row is
   exactly the input's 48px. timber's `input[type="text"] { margin-bottom: 1em }`
   stretched the row to 66px and the icon's holder is a 30px line box, so the
   icon sat 9px below the input's centre. The field's own margin-bottom (16px,
   inline) already spaces the Share button. */
#ReferralLinkInput { margin-bottom: 0; }
#ReferralLinkInput ~ div[onclick] { display: flex; }

/* Date of Birth (#birthdate, the theme's only date input: the dashboard's
   "Complete your profile" form and /account/details). The input skin above
   lists every text-like type but date, so it kept timber's grey square
   border, and both templates' inline `input[type="date"] { height: 3em }` made
   it 54px against the other inputs' 48 (1.42 line-height + 10px padding top
   and bottom + 1px borders). Same skin here; the height stays fixed, as the
   inline rule wants, but at the text inputs' size. The border rule keeps the
   skin's (0,1,1) weight so timber's input[type="date"][disabled] still wins
   for a locked birthdate (birthdate_editable false): greyed like the disabled
   Password field on /account/details. */
input[type="date"] { border-color: var(--rd-line); border-radius: var(--rd-radius); }
#birthdate { height: calc(1.42em + 22px); }
/* …and on the dashboard the Gender | Date of Birth pair splits the profile
   form's width, which is only 202-360px in the account sidebar (992px up) and
   on phones: a half-width date input (92-171px) is narrower than a full date
   plus its calendar icon (~160px), so "08/03/2000" was cut to "08/03/2" at
   375 and "08/03/200" at 1280, and "Date of Birth" wrapped at 320 and 992,
   dropping the input below Gender's. Stack the pair unless the form has room
   (the 482-600px tablet layout keeps its two columns). */
#customer-attr-form { container-type: inline-size; }
@container (max-width: 399px) {
  #customer-attr-form .grid__item.one-half { width: 100%; }
}

/* address forms (new + edit): "Cancel", `&nbsp;&nbsp;` and the submit sit
   inline, right-aligned. On a phone the 251px nowrap Add Address button no
   longer fits beside Cancel, so Cancel sat alone at the right of line 1 with
   the button under it (and at 320 the button was cut to 232px, its label
   overflowing). Phones get a deliberate stack instead: the submit full width,
   Cancel centred under it. column-reverse flips the DOM order; the
   `&nbsp;&nbsp;` text is an anonymous flex item, so the row's line-height: 0
   flattens it (the link takes the body's 1.65 back). */
@media screen and (max-width: 479px) {
  #AddAddress p.text-right,
  [id^="EditAddress_"] p.text-right {
    display: flex; flex-direction: column-reverse; align-items: center; line-height: 0;
  }
  #AddAddress p.text-right > input[type="submit"],
  [id^="EditAddress_"] p.text-right > input[type="submit"] {
    width: 100%; margin: 0; padding-left: 16px; padding-right: 16px;
  }
  #AddAddress p.text-right > a,
  [id^="EditAddress_"] p.text-right > a { margin-top: 12px; line-height: 1.65; }
}