/* Storefront additions on top of the Dawn theme CSS.
   The scrape had no product page, so product styles below approximate Dawn's
   section-main-product.css. */

.flash-message {
  margin: 2rem 0 0;
  padding: 1.2rem 1.6rem;
  border-radius: var(--inputs-radius, 6px);
  background: rgba(var(--color-base-accent-1), 0.08);
  border: 1px solid rgba(var(--color-base-accent-1), 0.35);
  color: rgb(var(--color-base-text));
}
.flash-message--alert {
  background: rgba(var(--color-base-text), 0.06);
  border-color: rgb(var(--color-base-text));
}

/* Padding for templates that aren't sections */
.section-main-page-padding { padding-top: 27px; padding-bottom: 27px; }
.collection-grid-padding { padding-top: 0; padding-bottom: 36px; }
@media screen and (min-width: 750px) {
  .section-main-page-padding { padding-top: 36px; padding-bottom: 36px; }
}

/* ---- Product page --------------------------------------------------------- */
.product-section-padding { padding-top: 27px; padding-bottom: 9px; }
@media screen and (min-width: 750px) {
  .product-section-padding { padding-top: 36px; padding-bottom: 12px; }
}
.product { margin: 0; }
.product.grid { gap: 0; }
.product__media-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.product__media-item { width: 100%; }
.product__media { position: relative; }
.product__media-placeholder { aspect-ratio: 1; }
.product__info-wrapper { padding: 2rem 0 0; }
@media screen and (min-width: 750px) {
  .product--medium .product__media-wrapper { max-width: 55%; width: calc(55% - var(--grid-desktop-horizontal-spacing) / 2); }
  .product--medium .product__info-wrapper { max-width: 45%; width: calc(45% - var(--grid-desktop-horizontal-spacing) / 2); padding: 0 0 0 5rem; }
  .product__info-container { position: sticky; top: 3rem; }
}
.product__info-container > * + * { margin: 1.5rem 0; }
.product__text { margin-bottom: 1rem; }
.product__title h1 { margin: 0; word-break: break-word; }
.product__tax { margin-top: -1rem; }
.product-form__input { flex: 0 0 100%; padding: 0; margin: 0 0 1.2rem; max-width: 44rem; min-width: fit-content; border: none; }
.product-form__input .form__label { display: block; margin-bottom: 0.6rem; }
.product-form__input .select { max-width: 25rem; }
.product-form__buttons { max-width: 44rem; margin-top: 1.5rem; }
.product-form__submit[disabled] { cursor: not-allowed; opacity: 0.6; }
.product__description { margin: 2.5rem 0; }

/* ---- Cart ----------------------------------------------------------------- */
.cart-remove-button { min-width: 4.5rem; min-height: 4.5rem; padding: 0; margin: 0 0.1rem 0.1rem 1rem; box-shadow: none; }
.cart-remove-button::after, .cart-remove-button::before { display: none; }
.cart-remove-button .icon-remove { width: 1.5rem; height: 1.5rem; }
.cart__zone { margin: 0 0 2rem auto; max-width: 30rem; }
.cart__zone-label { display: block; margin-bottom: 0.5rem; }
@media screen and (max-width: 749px) { .cart__zone { margin-left: 0; max-width: none; } }

/* ---- Order confirmation --------------------------------------------------- */
.order-confirmation__items { width: 100%; border-collapse: collapse; margin: 3rem 0; }
.order-confirmation__items td, .order-confirmation__items th { padding: 1rem 0; border-bottom: 1px solid rgba(var(--color-base-text), 0.1); text-align: left; font-weight: normal; }
.order-confirmation__items .right { text-align: right; }

.template-search__header { margin-bottom: 3rem; }
.template-search__header .search { max-width: 47.8rem; margin: 2rem auto; }

/* Contact form captcha (Cloudflare Turnstile). Its widget lives in a shadow
   root, so its host <div> looks empty and Dawn's `div:empty { display: none }`
   would hide it, stopping the check from running at all. */
.cf-turnstile div:empty { display: block; }
.cf-turnstile { min-height: 65px; }

/* ---- Cart: discount code, discount lines and offer hints ---------------- */
.cart-discount { margin: 0 0 2rem; }
.cart-discount__form { display: flex; gap: 1rem; align-items: stretch; }
.cart-discount__form .field { flex: 1; margin: 0; }
.cart-discount__form .button { min-width: 10rem; }
.cart-discount__applied { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cart-discount__code { font-size: 1.3rem; letter-spacing: .1rem; padding: .6rem 1.2rem; border-radius: 4rem;
  background: rgba(var(--color-base-accent-1), .15); color: rgb(var(--color-base-accent-2)); font-weight: 600; }
.cart-discount__code--waiting { background: rgba(var(--color-foreground), .08); color: rgba(var(--color-foreground), .7); }
.cart-discount__remove-form { display: inline; }
.cart-discount__remove { background: none; border: 0; padding: 0; cursor: pointer; font-size: 1.3rem; color: rgba(var(--color-foreground), .75); }
.cart-discount__message { margin: .8rem 0 0; font-size: 1.3rem; color: rgba(var(--color-foreground), .75); }
.cart-hints { list-style: none; padding: 1rem 1.4rem; margin: 0 0 1.6rem; border-radius: .8rem;
  background: rgba(var(--color-base-accent-1), .12); font-size: 1.4rem; }
.cart-hints li + li { margin-top: .4rem; }
.totals--line { display: flex; justify-content: space-between; gap: 1.5rem; width: 100%; font-size: 1.4rem; margin-bottom: .5rem; }
.totals--line span:first-child { flex: 1; text-align: left; }
.totals--line span:last-child { white-space: nowrap; }
.cart__footer .js-contents { width: 100%; }
.totals--discount { color: rgb(var(--color-base-accent-2)); }
.cart__footer .totals { justify-content: space-between; }
@media screen and (min-width: 750px) { .cart__footer .totals { justify-content: flex-end; gap: 2rem; } }

/* Product page: automatic offers that include this product */
.product-offers { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.product-offers li { font-size: 1.3rem; padding: .4rem 1.1rem; border-radius: 4rem; background: rgba(var(--color-base-accent-1), .15);
  color: rgb(var(--color-base-accent-2)); font-weight: 600; letter-spacing: .03rem; }

/* Rich text set to "Left" (long text such as the privacy policy) */
.rich-text__blocks--left { text-align: left; }
@media screen and (min-width: 990px) { .rich-text__blocks--left { max-width: 72rem; } }
.rich-text__blocks--left .rich-text__heading { text-align: center; }
.rich-text__blocks--left .rte h2 { margin: 3.2rem 0 1rem; font-size: calc(var(--font-heading-scale) * 2rem); }
.rich-text__blocks--left .rte ul { padding-left: 2rem; }
.rich-text__blocks--left .rte li + li { margin-top: .4rem; }

/* Privacy notes under the newsletter and contact forms, and in the footer */
.form-privacy-note { margin: 1.2rem 0 0; font-size: 1.3rem; line-height: 1.5; color: rgba(var(--color-foreground), .75); }
.form-privacy-note a { color: inherit; }
.copyright__content + .copyright__content::before { content: "·"; margin: 0 .6rem; }
.copyright__content a { color: inherit; }
