/* ==========================================================================
   808 CLUB - SHOP & CART THEME
   Black / gold (--primary #000, --secondary #d2ac70), Merriweather.
   Loaded after products.css. Note: html font-size is 62.5%, so 1rem = 10px.

   CONTENTS
   1.  Shop Product Grid          7.  Cart & Checkout Pages
   2.  Pricing                    8.  Checkout Form
   3.  Add To Cart Form           9.  Stripe Card Element
   4.  Product Detail Page       10.  Cart Messages
   5.  Product Search            11.  Empty Cart
   6.  Floating Cart Button      12.  Cart Responsive
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Shop Product Grid
   -------------------------------------------------------------------------- */
.product_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin: 0 0 6rem;
  padding: 0;
  float: none;
}

@media (min-width: 600px) {
  .product_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .product_list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Neutralise the legacy float/width box rules so the grid owns the layout */
.box_list.product_list .box {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 1px solid hsl(0 0% 0% / 0.08);
  border-radius: 1.2rem;
  overflow: hidden;
  text-align: left;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  transition: var(--animate);
}

.box_list.product_list .box:hover {
  border-color: var(--secondary);
  box-shadow: 0 1.2rem 3.2rem hsl(0 0% 0% / 0.12);
  transform: translateY(-4px);
}

/* --- Card image --- */
.product_list .product_thumb {
  display: block;
  background: var(--white);
  border-bottom: 1px solid hsl(0 0% 0% / 0.06);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.box_list.product_list .box .product_thumb img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 2rem;
  object-fit: contain;
  background: var(--white);
  transition: var(--animate);
}

.box_list.product_list .box:hover .product_thumb img {
  transform: scale(1.04);
}

/* --- Card body --- */
.product_list .product_body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 2.4rem;
}

.box_list.product_list .box .title {
  margin: 0 0 1rem;
  font-size: 1.8rem;
  line-height: 1.3;
  text-align: left;
}

.box_list.product_list .box .title a {
  color: var(--primary);
  transition: var(--animate);
}

.box_list.product_list .box .title a:hover {
  color: var(--secondary);
}

/* Clamp the blurb so one long description cannot blow out the row */
.box_list.product_list .box p.product_blurb {
  margin: 0 0 1.6rem;
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--medium);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.box_list.product_list .box .line_detail {
  margin: 0 0 1.2rem;
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--medium);
}

/* Push price + form to the bottom so every card button lines up across a row */
.product_list .price_display {
  margin-top: auto;
}


/* --------------------------------------------------------------------------
   2. Pricing
   -------------------------------------------------------------------------- */
.price_display {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
  padding: 1.6rem 0 0;
  border-top: 1px solid hsl(0 0% 0% / 0.08);
}

.price_display .strike,
.product_highlight .strike {
  text-decoration: line-through;
  color: var(--medium);
  font-weight: 400;
  font-size: 1.6rem;
  margin-right: .4rem;
}

.price_display .sale,
.product_highlight .sale {
  color: var(--secondary);
}


/* --------------------------------------------------------------------------
   3. Add To Cart Form (shop grid + product page)
   -------------------------------------------------------------------------- */
form.add_to_cart {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 1.6rem 0 0;
}

form.add_to_cart .cart_price_option,
form.add_to_cart .cart_quantity {
  flex: 1 1 100%;
  margin: 0;
}

/* Option + qty sit side by side when both are present */
form.add_to_cart .cart_price_option {
  flex: 1 1 58%;
}

form.add_to_cart .cart_price_option + .cart_quantity,
form.add_to_cart .cart_quantity:not(:first-child) {
  flex: 1 1 30%;
}

form.add_to_cart .cart_quantity.full-width {
  flex: 1 1 100%;
}

form.add_to_cart label {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 .6rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--medium);
}

form.add_to_cart select,
form.add_to_cart input[type="number"],
.box_list .box form.add_to_cart input[type="number"],
.cart_quantity select,
.cart_quantity input {
  width: 100%;
  height: 4.4rem;
  margin: 0;
  padding: 0 1.2rem;
  font-family: var(--font);
  font-size: 1.5rem;
  color: var(--primary);
  background: var(--light);
  border: 1px solid hsl(0 0% 0% / 0.12);
  border-radius: .6rem;
  outline: none;
  transition: var(--animate);
  -webkit-appearance: none;
  appearance: none;
}

form.add_to_cart select {
  /* Chevron, since appearance:none removes the native arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23545454' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  background-size: 1.1rem;
  padding-right: 3.4rem;
}

form.add_to_cart select:focus,
form.add_to_cart input[type="number"]:focus {
  border-color: var(--secondary);
  background: var(--white);
  box-shadow: 0 0 0 3px hsl(40 52% 64% / 0.3);
}

/* The site-wide .superbutton carries 4rem of side padding, which overflows a
   card. Inside the shop/cart it becomes full-width, centred and self-sizing. */
form.add_to_cart a.superbutton.add_to_cart,
form.add_to_cart button.superbutton.add_to_cart,
.box_list.product_list .box a.superbutton {
  flex: 1 1 100%;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 4.8rem;
  margin: .4rem 0 0;
  padding: 1.2rem 2rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: none;
}

.box_list.product_list .box a.superbutton {
  margin: 1.6rem 0 0;
}

form.add_to_cart a.superbutton.add_to_cart:hover,
form.add_to_cart button.superbutton.add_to_cart:hover,
.box_list.product_list .box a.superbutton:hover {
  background: var(--primary);
  color: var(--secondary);
  box-shadow: 0 0 2.4rem hsl(40 52% 64% / 0.55);
}

/* Out of stock / in store only */
.product_status {
  margin: 1.6rem 0 0;
  padding: 1rem 1.4rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--danger);
  background: hsl(0 57% 35% / 0.08);
  border-radius: .6rem;
  text-align: center;
}

.box_list.product_list .box .product_status i {
  color: var(--danger);
}


/* --------------------------------------------------------------------------
   4. Product Detail Page
   -------------------------------------------------------------------------- */
.product-strip01 .content .product_highlight .product_form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Product title, beside the image above the price ---
   The hero band keeps its dark backdrop (the fixed header is transparent until
   scrolled) but drops to nav height, since it no longer carries the title. */
.inner-hero.compact_hero {
  height: 12rem;
  min-height: 12rem;
}

@media (max-width: 960px) {
  .inner-hero.compact_hero {
    height: 9rem;
    min-height: 9rem;
  }
}

.product_form .product_title {
  margin: 0 0 1.6rem;
  font-size: clamp(2.8rem, 4svw, 4rem);
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--primary);
}

.product_form .product_title::after {
  content: '';
  display: block;
  width: 5rem;
  height: 3px;
  margin-top: 1.6rem;
  background: var(--secondary);
}

/* No gap here - .holder children are already sized 80%/20% by products.css */
.product-strip01 .content .product_highlight .holder {
  background: var(--white);
  border: 1px solid hsl(0 0% 0% / 0.08);
  border-radius: 1.2rem;
  overflow: hidden;
  padding: 1.6rem;
  height: fit-content;
}

.product_highlight .holder .img_select figure {
  border: 1px solid hsl(0 0% 0% / 0.08);
  border-radius: .6rem;
  overflow: hidden;
  transition: var(--animate);
}

.product_highlight .holder > .img_select > figure.active {
  box-shadow: none;
  border-color: var(--secondary);
}

.product_highlight #img_title {
  display: block;
  margin-top: 1rem;
  font-size: 1.3rem;
  color: var(--medium);
}

.product-strip01 .content .product-title::after {
  background: var(--secondary);
}

.content .product_number {
  font-size: 1.2rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--medium);
}

/* On the detail page the price sits above the form, so it needs no top rule */
.product_highlight .price_display {
  padding-top: 0;
  border-top: none;
  font-size: 2.8rem;
  margin-bottom: .8rem;
}

/* --- Editor content headings ---
   styles.css sets h1-h4 to color:white so they read on .dark/.medium/.colour
   sections, but never defines a light-background counterpart. Any heading the
   client types into the editor therefore renders white on these light strips. */
.shop-content .editable_content :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4),
.product-strip01 .editable_content :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4),
.product-strip02 .editable_content :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4),
body.cart .editable_content :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4) {
  color: var(--primary);
}

.shop-content .editable_content :is(h5, .h5, h6, .h6),
.product-strip02 .editable_content :is(h5, .h5, h6, .h6) {
  color: var(--secondary);
}

/* The description strip repeats the page title as its own h1. Keep it readable
   and sized as a section heading rather than a second hero. */
.product-strip02 .editable_content h1 {
  font-size: clamp(2.4rem, 4svw, 3.2rem);
  margin-bottom: 2.4rem;
}


/* --------------------------------------------------------------------------
   5. Product Search
   -------------------------------------------------------------------------- */
.search_form.general_form {
  display: flex;
  gap: 1.2rem;
  align-items: stretch;
  margin: 0 0 4rem;
  max-width: 52rem;
}

.search_form.general_form .search_input {
  flex: 1 1 auto;
  height: 4.8rem;
  margin: 0;
  padding: 0 1.6rem;
  font-family: var(--font);
  font-size: 1.5rem;
  background: var(--light);
  border: 1px solid hsl(0 0% 0% / 0.12);
  border-radius: .6rem;
  outline: none;
  transition: var(--animate);
}

.search_form.general_form .search_input:focus {
  border-color: var(--secondary);
  background: var(--white);
  box-shadow: 0 0 0 3px hsl(40 52% 64% / 0.3);
}

/* !important overrides the inline width:24% still present on this markup */
.search_form.general_form input.superbutton[type="submit"] {
  width: auto !important;
  min-width: 10rem;
  height: 4.8rem;
  margin: 0 !important;
  padding: 0 2.4rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background-color: var(--secondary);
  color: var(--white);
  border-radius: .6rem;
}

.search_form.general_form input.superbutton[type="submit"]:hover {
  background-color: var(--primary);
  color: var(--secondary);
}


/* --------------------------------------------------------------------------
   6. Floating Cart Button
   The icon and the count badge were both dark-on-black, so effectively invisible.
   -------------------------------------------------------------------------- */
a.cart_button {
  background: var(--secondary);
  box-shadow: 0 .4rem 1.6rem hsl(0 0% 0% / 0.28);
  bottom: 3rem;
  right: 3rem;
  height: 6rem;
  width: 6rem;
}

a.cart_button:hover {
  background: var(--primary);
  transform: scale(1.08);
}

span.shopping-widget-holder {
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

span.shopping-widget-holder i {
  color: var(--primary);
  font-size: 2.2rem;
  padding: 0;
  transition: var(--animate);
}

a.cart_button:hover span.shopping-widget-holder i {
  color: var(--secondary);
}

span.shopping-widget-holder span {
  top: -.8rem;
  right: -1.4rem;
  width: 2.2rem;
  height: 2.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  background-color: var(--primary);
  color: var(--secondary);
  border: 2px solid var(--secondary);
  transition: var(--animate);
}

a.cart_button:hover span.shopping-widget-holder span {
  background-color: var(--secondary);
  color: var(--primary);
  border-color: var(--primary);
}

@media (max-width: 600px) {
  a.cart_button {
    bottom: 2rem;
    right: 2rem;
    height: 5.2rem;
    width: 5.2rem;
  }
}


/* --------------------------------------------------------------------------
   7. Cart & Checkout Pages
   -------------------------------------------------------------------------- */
.cart-content > div,
.cart-checkout-wrapper .content > div,
.cart-success-wrapper > div {
  padding: 6rem 4%;
}

body.cart h3,
.cart-success-wrapper h1 {
  font-size: 2.4rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
}

body.cart h3::after,
.cart-success-wrapper h1::after {
  content: '';
  display: block;
  width: 4rem;
  height: 3px;
  margin-top: 1.2rem;
  background: var(--secondary);
}

/* styles.css sets h1-h4 to color:white and only overrides h3 back to gold, so
   every h4 on these light panels was white-on-near-white and unreadable */
body.cart h4,
.user-info h4,
.cart-checkout h4,
.cart-success-wrapper h4 {
  margin-bottom: 1.6rem;
  font-size: 1.7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary);
}

.user_shipping_info {
  border-top: 1px solid hsl(0 0% 0% / 0.1);
  margin-top: 3.2rem;
  padding-top: 3.2rem;
}

.checkout-form,
.user-info {
  background-color: var(--light);
}

/* --- Cart line items --- */
.cart_item {
  padding: 2rem;
  margin: 0 0 1.6rem;
  background: var(--white);
  border: 1px solid hsl(0 0% 0% / 0.08);
  border-radius: 1.2rem;
  transition: var(--animate);
}

.cart_item:hover {
  border-color: var(--secondary);
}

.product_cart_content {
  gap: 2rem;
}

.product_cart_content .product-thumb {
  flex: 0 0 8rem;
  width: 8rem;
}

.product_cart_content .product-thumb img {
  border-radius: .6rem;
  background: var(--white);
  object-fit: contain;
  aspect-ratio: 1;
}

.product-details {
  flex: 1 1 auto;
  width: auto;
}

.product_cart_title {
  font-size: 1.6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--primary);
}

.product_cart_description {
  margin-top: .4rem;
  font-size: 1.3rem;
  color: var(--medium);
}

.product_cart_pricing {
  flex: 0 0 auto;
}

.product_cart_price {
  font-size: 1.4rem;
  color: var(--medium);
}

.product_cart_price small {
  position: static;
  color: var(--medium);
  margin-left: .3rem;
}

.product_cart_subtotal {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary);
}

/* --- Quantity update row --- */
.cart_item form {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid hsl(0 0% 0% / 0.08);
}

input.cart_product_quantity {
  flex: 0 0 7rem;
  width: 7rem;
  height: 4rem;
  margin: 0;
  padding: 0 1rem;
  font-family: var(--font);
  font-size: 1.5rem;
  background: var(--light);
  border: 1px solid hsl(0 0% 0% / 0.12);
  border-radius: .6rem;
  outline: none;
}

input.cart_product_quantity:focus {
  border-color: var(--secondary);
  background: var(--white);
}

input.superbutton.cart_product_submit {
  width: auto;
  height: 4rem;
  min-height: 0;
  margin: 0;
  padding: 0 1.8rem;
  line-height: 1;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: .6rem;
  box-shadow: none;
  background-color: var(--primary);
  color: var(--white);
}

input.superbutton.cart_product_submit:hover {
  background-color: var(--secondary);
  color: var(--primary);
}

/* Remove item - was absolutely positioned and overlapping the line item */
.cart_item input.superbutton[type="submit"][value="X"] {
  position: static;
  margin-left: auto;
  width: 4rem;
  height: 4rem;
  padding: 0;
  font-size: 1.3rem;
  letter-spacing: 0;
  background-color: transparent;
  color: var(--medium);
  border: 1px solid hsl(0 0% 0% / 0.12);
  border-radius: .6rem;
}

.cart_item input.superbutton[type="submit"][value="X"]:hover {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--white);
}

/* --- Totals --- */
.cart_totals {
  margin-top: 2.4rem;
  padding: 2.4rem;
  background: var(--white);
  border: 1px solid hsl(0 0% 0% / 0.08);
  border-radius: 1.2rem;
}

.cart_totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid hsl(0 0% 0% / 0.08);
  font-size: 1.5rem;
}

.cart_totals > div:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.cart_totals .total_label,
.cart_totals > div > span {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--medium);
}

.cart_totals .cart_total {
  padding-top: 1.6rem;
  margin-top: .4rem;
  border-top: 2px solid var(--primary);
  border-bottom: none;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary);
}

.cart_totals .cart_total .total_label {
  font-size: 1.3rem;
  color: var(--primary);
}


/* --------------------------------------------------------------------------
   8. Checkout Form
   -------------------------------------------------------------------------- */
.checkout-form .cart-form,
.checkout-form .cart-form .shipping_info {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2rem;
}

/* --- Field grid ---
   styles.css sizes .third_width at 33.33% and forces .country / .coupon /
   .same-shipping to 100% !important, which left Country stranded on its own
   row. One deliberate 2-up grid instead, with .full_row spanning. */
.checkout-form .cart-form .third_width,
.checkout-form .cart-form .third_width.country,
.checkout-form .cart-form .third_width.coupon {
  width: 100%;
  margin: 0;
}

@media (min-width: 600px) {
  .checkout-form .cart-form .third_width,
  .checkout-form .cart-form .third_width.country,
  .checkout-form .cart-form .third_width.coupon {
    width: calc(50% - 1rem) !important;
  }
  .checkout-form .cart-form .third_width.full_row,
  .checkout-form .cart-form .third_width.same-shipping {
    width: 100% !important;
  }
}

.checkout-form .cart-form label {
  display: block;
  margin: 0 0 .6rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--medium);
}

.checkout-form .cart-form label .req {
  color: var(--secondary);
  margin-left: .2rem;
}

.checkout-form .cart-form input[type="text"],
.checkout-form .cart-form input[type="email"],
.checkout-form .cart-form input[type="tel"],
.checkout-form .cart-form select {
  width: 100%;
  height: 4.8rem;
  padding: 0 1.4rem;
  font-family: var(--font);
  font-size: 1.5rem;
  color: var(--primary);
  background: var(--white);
  border: 1px solid hsl(0 0% 0% / 0.12);
  border-radius: .6rem;
  outline: none;
  transition: var(--animate);
}

/* Province and Country were indistinguishable from text inputs */
.checkout-form .cart-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 3.6rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23545454' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.4rem center;
  background-size: 1.1rem;
}

.checkout-form .cart-form input:focus,
.checkout-form .cart-form select:focus {
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px hsl(40 52% 64% / 0.3);
}

/* Keep autofilled fields on the form palette instead of Chrome's yellow */
.checkout-form .cart-form input:-webkit-autofill,
.checkout-form .cart-form input:-webkit-autofill:hover,
.checkout-form .cart-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--primary);
  -webkit-box-shadow: 0 0 0 100rem var(--white) inset;
  box-shadow: 0 0 0 100rem var(--white) inset;
}

.checkout-form .cart-form h3 {
  width: 100%;
  margin: 1.6rem 0 .8rem;
}

.checkout-form .cart-form .shipping_info {
  width: 100%;
  margin-top: 1.6rem;
  padding-top: 3.2rem;
  border-top: 1px solid hsl(0 0% 0% / 0.1);
}

/* --- Actions --- */
.cart-form .form_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px solid hsl(0 0% 0% / 0.1);
}

.cart-form .form_actions .form_note {
  width: 100%;
  margin: 0;
  font-size: 1.3rem;
  color: var(--danger);
}

/* styles.css pins this to width:250px with position:relative/top:20px and a
   glow shadow that read as a hard dark bar on the light panel */
.checkout-form .cart-form input.superbutton[type="submit"],
.checkout-form .cart-form a.superbutton {
  position: static;
  top: auto;
  width: auto;
  min-width: 22rem;
  height: auto;
  min-height: 5.2rem;
  margin: 0;
  padding: 1.4rem 3.2rem;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background-color: var(--secondary);
  color: var(--white);
  border-radius: .8rem;
  box-shadow: 0 .4rem 1.2rem hsl(40 52% 64% / 0.35);
}

.checkout-form .cart-form input.superbutton[type="submit"]:hover,
.checkout-form .cart-form a.superbutton:hover {
  background-color: var(--primary);
  color: var(--secondary);
  box-shadow: 0 .4rem 1.6rem hsl(0 0% 0% / 0.25);
}

.checkout-form .cart-form a.superbutton.secondary_button {
  background-color: transparent;
  color: var(--primary);
  border: 1px solid hsl(0 0% 0% / 0.2);
  box-shadow: none;
}

.checkout-form .cart-form a.superbutton.secondary_button:hover {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.checkout-form .cart-form input.superbutton.disabled_btn,
.checkout-form .cart-form input.superbutton[type="submit"]:disabled {
  background-color: hsl(0 0% 80%);
  color: hsl(0 0% 45%);
  cursor: not-allowed;
  box-shadow: none;
}

.third_width.same-shipping label {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.4rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--primary);
}


/* --------------------------------------------------------------------------
   9. Stripe Card Element
   The Elements iframe had no styling at all, so it rendered as a bare line.
   -------------------------------------------------------------------------- */
#stripe_element {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 3.2rem 0 0;
  padding: 2.4rem;
  background: var(--white);
  border: 1px solid hsl(0 0% 0% / 0.08);
  border-radius: 1.2rem;
}

/* styles.css:8190 sets a global `form { display: flex }`, so every direct child
   of this form is a flex item. Without an explicit basis .form-row shrinks to
   fit, #card-element's width:100% then resolves against that shrink-to-fit
   width, and the whole chain collapses onto the iframe's intrinsic width:1px.
   Give the row a definite full-width basis and the chain resolves properly. */
#stripe_element > * {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

#stripe_element .form-row {
  margin: 0;
}

#stripe_element .form-row label {
  display: block;
  margin: 0 0 .6rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--medium);
}

/* styles.css .StripeElement forces height:40px and a grey drop shadow. With
   padding on top of a fixed 40px border-box the mounted iframe was crushed to
   a few px and the card/expiry/CVC fields collapsed on top of each other. */
#stripe_element #card-element {
  display: block;
  width: 100%;
  height: auto;
  min-height: 5rem;
  padding: 1.5rem 1.4rem;
  background: var(--light);
  border: 1px solid hsl(0 0% 0% / 0.12);
  border-radius: .6rem;
  box-shadow: none;
  transition: var(--animate);
}

/* Stripe mounts an iframe with width:1px; min-width:100% - make sure the
   wrapper it sits in actually offers a full-width containing block */
#stripe_element #card-element > div,
#stripe_element #card-element iframe {
  width: 100%;
  min-width: 100%;
}

#stripe_element #card-element.StripeElement--focus {
  border-color: var(--secondary);
  background: var(--white);
  box-shadow: 0 0 0 3px hsl(40 52% 64% / 0.3);
}

#stripe_element #card-element.StripeElement--invalid {
  border-color: var(--danger);
}

#stripe_element #card-errors {
  margin-top: 1rem;
  font-size: 1.3rem;
  color: var(--danger);
}

#stripe_element #card-errors:empty {
  margin-top: 0;
}

#stripe_element button.superbutton {
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 5.2rem;
  margin: 0;
  padding: 1.4rem 3rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#stripe_element button.superbutton:hover {
  background: var(--primary);
  color: var(--secondary);
}

#stripe_element button.superbutton[disabled] {
  background: hsl(0 0% 80%);
  color: hsl(0 0% 45%);
  cursor: not-allowed;
  box-shadow: none;
}

.stripe_secure_note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--medium);
}

.stripe_secure_note i {
  color: var(--success);
}


/* --------------------------------------------------------------------------
   10. Cart Messages
   .message_positive was dark-grey text on a black background, and
   .message_negative / .message_red had no styling at all.
   -------------------------------------------------------------------------- */
div.message_wrapper {
  width: 100%;
  margin: 0 0 2.4rem;
}

.message_positive,
.message_negative,
.message_red {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  border-radius: .8rem;
  border-left: 4px solid;
}

.message_positive {
  height: auto;
  flex-direction: row;
  justify-content: flex-start;
  background-color: hsl(122 40% 35% / 0.1);
  border-left-color: var(--success);
}

.message_positive p {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--success);
}

.message_negative,
.message_red {
  background-color: hsl(0 57% 35% / 0.1);
  border-left-color: var(--danger);
}

.message_negative p,
.message_red p {
  margin: 0;
  font-size: 1.4rem;
  color: var(--danger);
}

.message_positive i,
.message_negative i,
.message_red i {
  color: inherit;
}

.message_wrapper a.message_link {
  color: var(--danger);
  text-decoration: underline;
}

/* styles.css hides this icon outright, which leaves nothing to click on */
.message_wrapper a#close_message {
  margin-left: auto;
  cursor: pointer;
  line-height: 1;
  opacity: .5;
  transition: var(--animate);
}

.message_wrapper a#close_message:hover {
  opacity: 1;
}

.message_wrapper a#close_message i {
  display: inline-block;
  font-size: 1.4rem;
  color: inherit;
  padding: 0;
}

.message_negative a#close_message,
.message_red a#close_message {
  color: var(--danger);
}

.message_positive a#close_message {
  color: var(--success);
}

.message_wrapper a.cart_message_link {
  margin-left: auto;
}

.message_wrapper a.cart_message_link i {
  background-color: var(--secondary);
  color: var(--primary);
  line-height: 3.6rem;
  width: 3.6rem;
  height: 3.6rem;
  font-size: 1.6rem;
  margin: 0;
}


/* --------------------------------------------------------------------------
   11. Empty Cart
   -------------------------------------------------------------------------- */
.empty-cart {
  padding: 4rem 0;
}

.empty-cart h3::after {
  margin-left: auto;
  margin-right: auto;
}

.empty-cart p {
  font-size: 1.6rem;
  color: var(--medium);
}

.empty-cart a.button {
  min-height: 5.2rem;
  padding: 1.4rem 3.2rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* --------------------------------------------------------------------------
   12. Cart Responsive
   -------------------------------------------------------------------------- */
/* The fixed "Login" side tab sits over the rightmost ~40px above 960px, which
   ran straight through the totals card. Reserve room for it. */
@media (min-width: 961px) {
  .cart-content > .your-cart,
  .cart-checkout-wrapper .content > .cart-checkout,
  .cart-success-wrapper > .cart-checkout {
    padding-right: calc(4% + 4.5rem);
  }
}

@media (max-width: 960px) {
  .cart-content > div,
  .cart-checkout-wrapper .content > div,
  .cart-success-wrapper > div {
    padding: 4rem 5%;
  }
  .cart-success-wrapper {
    flex-wrap: wrap;
  }
  .cart-success-wrapper > div {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .product_cart_content {
    display: flex;
    flex-wrap: wrap;
  }
  .product_cart_pricing {
    flex: 1 1 100%;
    text-align: left;
  }
  .cart_item form {
    flex-wrap: wrap;
  }
}