/* Chance Fashion :: WooCommerce integration */

.woocommerce .cf-content { padding-top: 40px; }

/* Shop loop */
.woocommerce ul.products {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 22px;
  margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
  width: 100% !important; margin: 0 !important; float: none !important; text-align: left;
}
.woocommerce ul.products li.product a img {
  margin: 0 0 14px; aspect-ratio: 3/4; object-fit: cover; width: 100%;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; overflow: hidden; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cf-body) !important; font-size: .98rem !important; font-weight: 400 !important;
  padding: 0 !important; margin: 0 0 6px !important; letter-spacing: .01em;
}
.woocommerce ul.products li.product .price {
  font-family: var(--cf-display); font-size: 1.05rem; color: var(--cf-ink);
}
.woocommerce ul.products li.product .price del { color: var(--cf-mute); font-size: .88rem; margin-right: 8px; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--cf-red); font-weight: 400; }
.woocommerce span.onsale {
  background: var(--cf-red); color: #fff; border-radius: 0; min-height: 0; min-width: 0;
  line-height: 1; padding: 7px 11px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  top: 12px; left: 12px; right: auto; margin: 0; font-weight: 500;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  display: inline-flex; align-items: center; margin-top: 12px;
  background: transparent; color: var(--cf-ink); border: 1px solid var(--cf-ink);
  border-radius: 2px; padding: 10px 20px; font-size: .74rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  transition: background .25s, color .25s, border-color .25s;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
  background: var(--cf-red); border-color: var(--cf-red); color: #fff;
}

.woocommerce .woocommerce-result-count { color: var(--cf-mute); font-size: .86rem; }
.woocommerce .woocommerce-ordering select {
  width: auto; padding: 10px 14px; border: 1px solid var(--cf-line); font-size: .86rem;
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 0; border-left: 3px solid var(--cf-red); background: var(--cf-shell);
  padding: 16px 20px 16px 22px; font-size: .92rem; border-radius: 2px;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { color: var(--cf-red); }
.woocommerce-message .button, .woocommerce-info .button { background: var(--cf-ink); color: #fff; }

/* Buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--cf-ink); color: #fff; border-radius: 2px; font-weight: 500;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; padding: 15px 30px;
  line-height: 1; transition: background .25s;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--cf-red); color: #fff; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--cf-red); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--cf-ink); }

/* Single product */
.woocommerce div.product { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 66px); }
.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce div.product .summary { width: 100% !important; float: none !important; margin: 0 !important; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-product-gallery + .summary + * { grid-column: 1 / -1; }
.woocommerce div.product .product_title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: .3em; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  font-family: var(--cf-display); font-size: 1.7rem; color: var(--cf-ink);
}
.woocommerce div.product p.price ins { text-decoration: none; color: var(--cf-red); }
.woocommerce div.product p.price del { color: var(--cf-mute); font-size: 1.1rem; opacity: 1; }
.woocommerce div.product form.cart { margin: 26px 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce .quantity .qty { width: 82px; text-align: center; padding: 14px 6px; border: 1px solid var(--cf-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 26px; border-bottom: 1px solid var(--cf-line); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none; border: 0; border-radius: 0; margin: 0 26px 0 0; padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 12px 0; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--cf-red); color: var(--cf-red); }
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 {
  font-size: 1.7rem; margin-bottom: 26px;
}

/* Cart & checkout */
.woocommerce table.shop_table { border: 1px solid var(--cf-line); border-radius: 2px; }
.woocommerce table.shop_table th { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; }
.woocommerce-cart table.cart img { width: 78px; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { font-size: 1.4rem; }
.woocommerce form .form-row label { font-size: .8rem; letter-spacing: .08em; margin-bottom: 6px; display: block; }
.woocommerce-checkout #payment { background: var(--cf-shell); border-radius: 2px; }
.woocommerce-checkout #payment div.payment_box { background: #fff; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #fff; }
.select2-container .select2-selection--single { height: 48px; border-color: var(--cf-line); border-radius: 2px; }
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 46px; padding-left: 14px; }
.select2-container .select2-selection--single .select2-selection__arrow { height: 46px; }

/* Mini cart drawer */
.cf-cartdrawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 90vw); background: #fff;
  z-index: 130; transform: translateX(100%); transition: transform .38s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,.12);
}
.cf-cartdrawer.is-open { transform: translateX(0); }
.cf-cartdrawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--cf-line);
}
.cf-cartdrawer__top strong { font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.cf-cartdrawer__body { flex: 1; overflow-y: auto; padding: 22px 24px; }
.cf-cartdrawer .woocommerce-mini-cart__empty-message { color: var(--cf-mute); }
.cf-cartdrawer ul.cart_list li { padding: 16px 0; border-bottom: 1px solid var(--cf-line); }
.cf-cartdrawer .widget_shopping_cart_content .total { border-top: 0; padding-top: 16px; font-size: 1rem; }
.cf-cartdrawer .buttons a { display: block; text-align: center; margin-bottom: 8px; }

/* Responsive */
@media (max-width: 1080px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .woocommerce div.product { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; } }