/* ONGLE24 — replica additions on top of the Impact theme stylesheet. */

/* ---------- global ---------- */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
body.admin-bar { --ongle24-admin-bar: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --ongle24-admin-bar: 46px; }
}

#main { min-height: 40vh; }

/* utility: hide scrollbars on horizontal rails while keeping them scrollable */
.ongle24-hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.ongle24-hide-scrollbar::-webkit-scrollbar { display: none; }

/* keep the mobile nav drawer panels working without the theme JS bundle */
.navigation-drawer .panel[aria-hidden="true"] { display: none; }
.navigation-drawer .panel[aria-hidden="false"] { display: block; }

/* ---------- empty state ---------- */
.ongle24-empty { padding: 80px 0; text-align: center; }
.ongle24-empty .button { margin-top: 24px; }

/* ---------- price notice (110 EUR tier rule) ---------- */
.ongle24-price-notice {
  border-radius: var(--rounded);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  line-height: 1.6;
}
.ongle24-price-notice.is-sale { background: #f0f7ef; color: #1c4b1c; }
.ongle24-price-notice.is-regular { background: #fdf0ee; color: #7a1c12; }

/* ---------- product cards: reference shows a compact 12px subtitle ---------- */
.product-card__content { font-size: 12px; }
.product-card .price-list { font-size: 14px; }
.product-card__info .product-card__content .bold { font-weight: 600; }
.product-card .badge--on-sale {
  background: #d21c1c;
  color: #fff;
  border-radius: 10px;
  border: 1px solid #d21c1c;
}

/* ---------- home: testimonials ---------- */
.ongle24-reviews { padding-block: 60px; }
.ongle24-reviews__head { display: flex; flex-direction: column; gap: 6px; padding-inline: var(--container-gutter); margin-bottom: 28px; }
.ongle24-reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 320px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--container-gutter);
  padding-bottom: 8px;
}
.ongle24-review-card {
  background: #fff;
  border: 1px solid rgb(var(--text-color) / .12);
  border-radius: var(--rounded);
  padding: 22px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 170px;
}
.ongle24-review-card__stars { display: flex; gap: 2px; color: #ff5d5d; }
.ongle24-review-card__text { font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.ongle24-review-card__author { font-size: 0.75rem; color: rgb(var(--text-color) / .6); margin: 0; }

/* ---------- cookie consent ---------- */
.ongle24-cookie {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 100;
  background: #000;
  color: #fff;
  border-radius: var(--rounded);
  box-shadow: 0 8px 40px rgb(0 0 0 / .25);
}
.ongle24-cookie__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px; justify-content: space-between; }
.ongle24-cookie p { margin: 0; font-size: 0.8125rem; line-height: 1.5; max-width: 780px; color: #fff; }
.ongle24-cookie a { text-decoration: underline; }
.ongle24-cookie__actions { display: flex; gap: 8px; }
.ongle24-cookie .button--outline { background: transparent; color: #fff; border-color: #fff; }

/* ---------- PDP live strip (countdown / viewers / stock) ---------- */
.ongle24-live {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 0.8125rem;
  margin: 14px 0;
}
.ongle24-live__item { display: inline-flex; align-items: center; gap: 8px; }
.ongle24-live__dot { width: 7px; height: 7px; border-radius: 50%; background: #17a34a; box-shadow: 0 0 0 4px rgb(23 163 74 / .18); }
.ongle24-countdown { font-variant-numeric: tabular-nums; font-weight: 600; }
.ongle24-stock { color: #b42318; font-weight: 500; }

/* ---------- cart drawer ---------- */
.ongle24-drawer-overlay {
  position: fixed; inset: 0; background: rgb(0 0 0 / .4);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 90;
}
.ongle24-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.ongle24-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
  background: #fff; z-index: 91; transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column;
}
.ongle24-cart-drawer.is-open { transform: translateX(0); }
body.ongle24-noscroll { overflow: hidden; }
.ongle24-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgb(0 0 0 / .12); }
.ongle24-cart-drawer__title { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.ongle24-cart-drawer__body { flex: 1; overflow-y: auto; padding: 6px 20px; }
.ongle24-cart-drawer__foot { border-top: 1px solid rgb(0 0 0 / .12); padding: 18px 20px 22px; }
.ongle24-cart-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgb(0 0 0 / .08); }
.ongle24-cart-line__img { width: 72px; aspect-ratio: 1; border-radius: 6px; object-fit: cover; background: #f5f5f5; }
.ongle24-cart-line__name { font-weight: 500; font-size: 0.875rem; margin: 0 0 4px; }
.ongle24-cart-line__sub { font-size: 0.75rem; color: rgb(0 0 0 / .6); margin: 0 0 8px; }
.ongle24-cart-line__price { font-size: 0.875rem; }
.ongle24-qty { display: inline-flex; align-items: center; border: 1px solid rgb(0 0 0 / .2); border-radius: 6px; overflow: hidden; }
.ongle24-qty button { width: 30px; height: 30px; background: none; border: 0; cursor: pointer; font-size: 15px; line-height: 1; }
.ongle24-qty span { min-width: 26px; text-align: center; font-size: 0.8125rem; }
.ongle24-subtotal-row { display: flex; justify-content: space-between; margin-bottom: 14px; font-size: 0.9375rem; }
.ongle24-drawer-actions { display: grid; gap: 10px; }
.ongle24-drawer-actions .button { width: 100%; }
.ongle24-free-ship { font-size: 0.75rem; color: rgb(0 0 0 / .65); margin: 0 0 10px; }
.ongle24-free-ship__bar { height: 4px; border-radius: 2px; background: rgb(0 0 0 / .1); margin-top: 6px; overflow: hidden; }
.ongle24-free-ship__bar span { display: block; height: 100%; background: #000; width: 0; transition: width .4s ease; }

/* ---------- added-to-cart popup ---------- */
.ongle24-added {
  position: fixed; z-index: 95; top: 96px; right: 24px; width: min(380px, calc(100vw - 32px));
  background: #fff; border: 1px solid rgb(0 0 0 / .12); border-radius: var(--rounded);
  box-shadow: 0 16px 60px rgb(0 0 0 / .18);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.ongle24-added.is-open { opacity: 1; transform: none; visibility: visible; }
.ongle24-added__head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgb(0 0 0 / .1); font-size: 0.8125rem; font-weight: 600; }
.ongle24-added__card { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 14px 16px; }
.ongle24-added__img { width: 64px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.ongle24-added__name { font-size: 0.875rem; font-weight: 500; margin: 0 0 2px; }
.ongle24-added__sub { font-size: 0.75rem; color: rgb(0 0 0 / .6); margin: 0 0 6px; }
.ongle24-added__price { font-size: 0.875rem; }
.ongle24-added__foot { display: flex; gap: 8px; padding: 0 16px 16px; }
.ongle24-added__foot .button { flex: 1; }
.ongle24-added__close { margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 18px; line-height: 1; }

/* ---------- PDP ---------- */
.ongle24-pdp-gallery { position: sticky; top: 24px; }
.ongle24-pdp-thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; }
.ongle24-pdp-thumbs button { border: 1px solid transparent; border-radius: 6px; padding: 0; background: none; cursor: pointer; }
.ongle24-pdp-thumbs button.is-active { border-color: #000; }
.ongle24-pdp-thumbs img { width: 64px; aspect-ratio: 1; object-fit: cover; border-radius: 5px; display: block; }
.ongle24-variant-group { margin-bottom: 16px; }
.ongle24-variant-group__label { font-size: 0.8125rem; margin-bottom: 8px; color: rgb(0 0 0 / .7); }
.ongle24-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.ongle24-variant-options button {
  min-width: 56px; padding: 9px 14px; border: 1px solid rgb(0 0 0 / .2); border-radius: var(--rounded-button);
  background: #fff; cursor: pointer; font-size: 0.8125rem;
}
.ongle24-variant-options button.is-active { border-color: #000; background: #000; color: #fff; }
.ongle24-buy-buttons { display: grid; gap: 10px; margin-top: 18px; }
.ongle24-buy-buttons .button { width: 100%; height: 52px; font-size: 0.9375rem; }
.ongle24-pdp-price { display: flex; align-items: baseline; gap: 12px; font-size: 1.5rem; margin: 10px 0 4px; }
.ongle24-pdp-price s { font-size: 1rem; color: rgb(0 0 0 / .5); }
.ongle24-pdp-badges { display: flex; gap: 8px; margin-bottom: 10px; }
.ongle24-pdp-desc { margin-top: 26px; font-size: 0.9375rem; line-height: 1.7; }
.ongle24-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: 0.8125rem; }
.ongle24-trust img { width: 24px; height: 24px; object-fit: contain; }

/* ---------- collection page ---------- */
.ongle24-collection-head { padding-block: 42px 26px; }
.ongle24-collection-head h1 { margin: 0 0 12px; }
.ongle24-collection-desc { max-width: 820px; color: rgb(var(--text-color) / .75); line-height: 1.7; }
.ongle24-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; font-size: 0.8125rem; }
.ongle24-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--product-list-row-gap, 40px) var(--product-list-column-gap, 24px);
}
@media screen and (max-width: 999px) { .ongle24-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media screen and (max-width: 699px) { .ongle24-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; } }

/* ---------- cart page / checkout ---------- */
.ongle24-page-head { padding-block: 34px 18px; }
.ongle24-cart-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 48px; align-items: start; }
@media screen and (max-width: 999px) { .ongle24-cart-layout { grid-template-columns: 1fr; gap: 28px; } }
.ongle24-panel { border: 1px solid rgb(var(--text-color) / .12); border-radius: var(--rounded); padding: 24px; }
.ongle24-cart-table { width: 100%; border-collapse: collapse; }
.ongle24-cart-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: rgb(0 0 0 / .55); padding-bottom: 12px; }
.ongle24-cart-table td { padding: 18px 0; border-top: 1px solid rgb(0 0 0 / .08); vertical-align: middle; }
.ongle24-cart-item { display: flex; gap: 16px; align-items: center; }
.ongle24-cart-item img { width: 84px; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.ongle24-cart-item__name { font-size: 0.9375rem; font-weight: 500; margin: 0 0 4px; }
.ongle24-cart-item__sub { font-size: 0.75rem; color: rgb(0 0 0 / .6); margin: 0; }
.ongle24-summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.9375rem; }
.ongle24-summary-row.is-total { border-top: 1px solid rgb(0 0 0 / .12); margin-top: 10px; padding-top: 16px; font-weight: 600; font-size: 1.0625rem; }
.ongle24-payment-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ongle24-payment-icons img { height: 26px; width: auto; display: block; }
.ongle24-checkout-layout { display: grid; grid-template-columns: minmax(0, 904px) minmax(360px, 440px); gap: 56px; align-items: start; }
@media screen and (max-width: 1099px) { .ongle24-checkout-layout { grid-template-columns: 1fr; } }
.ongle24-checkout-summary { background: #f7f5f2; border-radius: var(--rounded); padding: 26px; position: sticky; top: 24px; }
.ongle24-terms-box { margin: 18px 0; font-size: 0.8125rem; line-height: 1.6; }
.ongle24-terms-box label { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; cursor: pointer; }
.ongle24-terms-box input { margin-top: 3px; }
.ongle24-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media screen and (max-width: 699px) { .ongle24-form-row { grid-template-columns: 1fr; } }
.ongle24-checkout-form .form-row { margin-bottom: 14px; }
.ongle24-checkout-form input.input-text, .ongle24-checkout-form select, .ongle24-checkout-form textarea {
  width: 100%; height: 48px; border: 1px solid rgb(0 0 0 / .18); border-radius: var(--rounded-input); padding: 0 14px; background: #fff;
}
.ongle24-checkout-form label { font-size: 0.8125rem; margin-bottom: 6px; display: block; }
.ongle24-place-order .button { width: 100%; height: 52px; font-size: 0.9375rem; }

/* checkout: keep the tax note on its own line */
.woocommerce-checkout-review-order-table .order-total td { white-space: normal; }

/* ---------- account / pages ---------- */
.ongle24-page .prose h2 { margin-top: 1.6em; }
.ongle24-page .prose { max-width: 860px; font-size: 0.9375rem; line-height: 1.75; }
.ongle24-page .prose ul, .ongle24-page .prose ol { padding-left: 1.2em; }
.ongle24-page .prose li { margin-bottom: .4em; }
.ongle24-policy .prose { max-width: 900px; }

/* ---------- PDP: rating row above price ---------- */
.product-info__rating { display: flex; align-items: center; gap: 10px; margin: -2px 0 0; }
.product-info__rating .ongle24-stars { color: #ff5d5d; font-size: 13px; letter-spacing: 1.5px; line-height: 1; }
.product-info__rating a { text-decoration: underline; text-underline-offset: 2px; }
.product-info .ongle24-live { margin: 4px 0 0; font-size: 12px; gap: 6px 16px; }
.product-info .ongle24-live__item:nth-child(2) { display: none; }
.product-info .ongle24-live__item:nth-child(3) { display: none; }
.product-info .product-trust-badges-ul { background: rgb(255 244 239); border-radius: 8px; padding: 14px 18px; }
.product-info .product-trust-badges-ul ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.product-info .product-trust-badges-ul li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.product-info .product-trust-badges-ul img { border-radius: 4px; }
.product-info__price .tax-note { font-size: 13px; margin-top: 6px; }
.product-info__price .shipping_available { margin-top: 2px; }
.product-info__price .shipping-note-container { display: flex; align-items: center; gap: 6px; color: #1a7f37; }
.product-info__price .shipping-note-container svg { flex: none; }

/* ================= CHECKOUT (Shopify-like 2 columns) ================= */
.ongle24-checkout-body { background: #fff; }
.ongle24-checkout-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 34px;
  border-bottom: 1px solid #ececec; background: #fff; }
.ongle24-checkout-header__logo img { height: 42px; width: auto; display: block; margin: 0 auto; }
.ongle24-checkout-header__cart { position: relative; color: #ff5d5d; display: inline-flex; }
.ongle24-checkout-header__count { position: absolute; top: -8px; right: -10px; background: #000; color: #fff;
  font-size: 10px; line-height: 16px; min-width: 16px; text-align: center; border-radius: 9px; }

.ongle24-checkout { display: grid; grid-template-columns: 1fr; background: #fff; }
.ongle24-checkout__form { padding: 30px 0 60px; }
.ongle24-checkout .woocommerce { max-width: 100%; }

/* two-column form */
.ongle24-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 53.4%) minmax(0, 46.6%); align-items: start; }
.ongle24-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1; padding: 6px 64px 40px 228px; }
.ongle24-checkout form.checkout #order_review_heading { display: none; }
.ongle24-checkout form.checkout #order_review { grid-column: 2; grid-row: 1; background: #f5f5f5;
  padding: 34px 60px 60px; min-height: calc(100vh - 79px); }
@media screen and (max-width: 999px) {
  .ongle24-checkout form.checkout { grid-template-columns: 1fr; }
  .ongle24-checkout form.checkout #customer_details { padding: 10px 20px 24px; }
  .ongle24-checkout form.checkout #order_review { grid-column: 1; grid-row: 2; padding: 24px 20px 40px; min-height: 0; }
}

.ongle24-checkout h3.ongle24-checkout-heading { font-size: 20px; font-weight: 600; margin: 26px 0 14px; letter-spacing: 0; }
.ongle24-checkout .woocommerce-billing-fields > h3 { display: none; }
.ongle24-checkout #customer_details { font-size: 14px; }
.ongle24-checkout form.checkout .form-row { margin: 0 0 14px; padding: 0; }
.ongle24-checkout form.checkout .form-row label { display: block; font-size: 12px; color: #6b6b6b; margin-bottom: 5px; }
.ongle24-checkout form.checkout .form-row input.input-text,
.ongle24-checkout form.checkout .form-row select,
.ongle24-checkout form.checkout .form-row textarea,
.ongle24-checkout .select2-container .select2-selection--single {
  width: 100%; height: 46px; border: 1px solid #d6d6d6; border-radius: 5px; padding: 0 14px; background: #fff; font-size: 14px; color: #111;
}
.ongle24-checkout form.checkout .form-row input.input-text:focus,
.ongle24-checkout form.checkout .form-row select:focus { border-color: #ff5d5d; outline: none; }
.ongle24-checkout .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; padding-left: 0; }
.ongle24-checkout .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; }
/* two-column rows */
.ongle24-checkout form.checkout .form-row-first,
.ongle24-checkout form.checkout .form-row-last { width: calc(50% - 7px); float: left; }
.ongle24-checkout form.checkout .form-row-first { margin-right: 14px; }
.ongle24-checkout form.checkout .form-row-wide { width: 100%; clear: both; }
.ongle24-checkout form.checkout .woocommerce-billing-fields::after { content: ""; display: table; clear: both; }

/* summary */
.ongle24-checkout #order_review table.shop_table { width: 100%; border: 0; margin: 0 0 18px; border-collapse: collapse; }
.ongle24-checkout #order_review table.shop_table th { display: none; }
.ongle24-checkout #order_review table.shop_table td { border: 0; padding: 0; vertical-align: top; }
.ongle24-checkout #order_review .cart_item td { padding: 0 0 16px; }
.ongle24-checkout #order_review .cart_item .product-name { font-size: 14px; }
.ongle24-checkout #order_review .cart_item img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; margin-right: 12px; float: left; }
.ongle24-checkout #order_review .cart_item .product-quantity { display: none; }
.ongle24-checkout #order_review .order-total td,
.ongle24-checkout #order_review .cart-subtotal td,
.ongle24-checkout #order_review .cart-subtotal-tax td,
.ongle24-checkout #order_review .tax-rate td,
.ongle24-checkout #order_review .tax-total td,
.ongle24-checkout #order_review .shipping td,
.ongle24-checkout #order_review .fee td { border: 0; padding: 5px 0; font-size: 14px; text-align: left; }
.ongle24-checkout #order_review .order-total td:last-child,
.ongle24-checkout #order_review .cart-subtotal td:last-child,
.ongle24-checkout #order_review .tax-rate td:last-child,
.ongle24-checkout #order_review .shipping td:last-child,
.ongle24-checkout #order_review .fee td:last-child { text-align: right; }
.ongle24-checkout #order_review .order-total td { font-size: 16px; font-weight: 600; padding-top: 14px; border-top: 1px solid #dedede; margin-top: 10px; }
.ongle24-checkout #order_review .order-total .amount { font-weight: 600; }
.ongle24-checkout #order_review #payment { background: transparent; margin-top: 14px; }
.ongle24-checkout #order_review #payment ul.payment_methods { border: 0; padding: 0; margin: 0 0 12px; }
.ongle24-checkout #order_review #payment ul.payment_methods li { list-style: none; }
.ongle24-checkout #order_review #payment ul.payment_methods li label { font-size: 14px; }
.ongle24-checkout #order_review #payment div.form-row.place-order { padding: 0; margin: 0; }
.ongle24-checkout #order_review #place_order { width: 100%; height: 56px; font-size: 15px; font-weight: 700;
  text-transform: uppercase; border-radius: 6px; background: #ff5d5d; color: #fff; border: 0; cursor: pointer; }
.ongle24-checkout #order_review #place_order:hover { background: #f24f4f; }
.ongle24-checkout .ongle24-terms-box label { font-size: 12px; color: #555; }
.ongle24-checkout .ongle24-terms-box a { text-decoration: underline; }
.ongle24-checkout .woocommerce-terms-and-conditions-wrapper { display: none; }

/* payment icons block */
.ongle24-checkout__payments { margin-top: 16px; }
.ongle24-checkout__payments svg, .ongle24-checkout__payments img { height: 24px; width: auto; }
.ongle24-checkout__trust { margin-top: 24px; font-size: 13px; color: #333; }
.ongle24-checkout__trust h4 { font-size: 14px; margin: 0 0 10px; }
.ongle24-checkout__trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ongle24-checkout__trust li::before { content: "✓"; margin-right: 8px; }

/* Body has WP's "page" class which theme.css would lay out as a centered .page grid */
body.page, body.single, body.archive, body.tax-product_cat, body.search, body.error404 {
  display: block; max-width: none; margin-inline: 0; gap: 0;
}

/* Checkout: hide WooCommerce blocks the reference checkout does not show */
.ongle24-checkout .woocommerce-form-login-toggle,
.ongle24-checkout #ship-to-different-address,
.ongle24-checkout .woocommerce-additional-fields,
.ongle24-checkout .woocommerce-shipping-fields,
.ongle24-checkout .woocommerce-account-fields,
.ongle24-checkout .woocommerce-info { display: none; }
.ongle24-checkout .ongle24-checkout-heading { margin: 6px 0 14px; font-size: 20px; font-weight: 600; }
.ongle24-checkout .ongle24-price-notice { margin: 0 0 18px; }

/* ---------- Checkout refinements (v2) ---------- */
.ongle24-checkout-header__logo img { height: 40px !important; width: auto !important; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper { display: flex; flex-wrap: wrap; gap: 12px; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row { width: 100%; margin: 0; float: none; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row-last { width: calc(50% - 6px); }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_email) { order: 1; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_country) { order: 2; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_first_name) { order: 3; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_last_name) { order: 4; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_company) { order: 5; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_address_1) { order: 6; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_address_2) { order: 7; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_postcode) { order: 8; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_city) { order: 9; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_phone) { order: 10; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#billing_state) { display: none; }
.ongle24-checkout .woocommerce-billing-fields__field-wrapper .form-row:has(#order_comments) { order: 12; }
.ongle24-checkout #order_review table.shop_table tbody td.product-name { width: auto; font-size: 14px; }
.ongle24-checkout #order_review table.shop_table tbody td.product-total { text-align: right; white-space: nowrap; }
.ongle24-checkout #order_review table.shop_table { table-layout: auto; }
.ongle24-checkout #order_review .cart_item td { padding-bottom: 16px; }
.ongle24-checkout #payment ul.payment_methods { display: none; }
.ongle24-checkout #payment .form-row.place-order { margin-top: 18px !important; }
.ongle24-checkout .woocommerce-terms-and-conditions-wrapper { margin-bottom: 12px; }
.ongle24-checkout__payments { margin: 10px 0 6px; }
.ongle24-checkout__payments .ongle24-payment-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.ongle24-checkout__payments svg, .ongle24-checkout__payments img { height: 26px; width: auto; }
.ongle24-checkout .ongle24-price-notice { margin: 0; border-radius: 0; padding: 14px 34px; }

/* ---------- Mega menu reveal (theme JS normally animates this) ---------- */
.js .mega-menu { opacity: 1; visibility: visible; }
details[is="mega-menu-disclosure"] { position: relative; }
details[is="mega-menu-disclosure"] > summary { list-style: none; cursor: pointer; }
details[is="mega-menu-disclosure"] > summary::-webkit-details-marker { display: none; }
details[is="mega-menu-disclosure"]:not([open]) > .mega-menu { display: none; }
details[is="mega-menu-disclosure"][open] > .mega-menu { display: flex; }
.js .mega-menu { display: none; }
.js details[is="mega-menu-disclosure"][open] > .mega-menu { display: flex; opacity: 1; }

/* ---------- Mobile navigation drawer ---------- */
navigation-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; width: min(420px, 92vw);
  background: #fff; z-index: 93; transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1); display: block; overflow-y: auto;
  padding: 18px 20px 40px; box-shadow: 0 0 60px rgb(0 0 0 / .2);
}
navigation-drawer.is-open { transform: none; }
navigation-drawer .panel { display: block; }
navigation-drawer .panel[aria-hidden="true"] { display: none; }
navigation-drawer .panel__wrapper { padding: 0; }
navigation-drawer .panel a { display: block; padding: 8px 0; font-size: 14px; }

/* navigation drawer semantics */
navigation-drawer[open], navigation-drawer.is-open { display: block !important; }

/* mega menu anchoring to the header (full-width panel) */
details[is="mega-menu-disclosure"] { position: static; }
details[is="mega-menu-disclosure"] > .mega-menu {
  position: absolute; left: 0; right: 0; top: 100%; width: 100%;
  background: #fff; z-index: 70; box-shadow: 0 18px 40px rgb(0 0 0 / .08);
}

/* Checkout: keep WooCommerce's required T&C checkbox visible and tappable */
.ongle24-checkout .woocommerce-terms-and-conditions-wrapper { display: block !important; margin: 10px 0 14px; font-size: 12px; color: #555; }
.ongle24-checkout .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; }
.ongle24-checkout .woocommerce-terms-and-conditions-wrapper label { display: flex; gap: 8px; align-items: flex-start; }
.ongle24-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { margin-top: 2px; }

/* Drawer open state must override the theme's hidden drawer styles */
navigation-drawer[open], navigation-drawer.is-open { visibility: visible !important; opacity: 1 !important; display: block !important; }
.ongle24-drawer-overlay.is-open { z-index: 90; }

/* Stacking: drawer/nav above overlay; added popup above everything */
.ongle24-drawer-overlay { z-index: 1000 !important; }
.ongle24-cart-drawer { z-index: 1001 !important; }
navigation-drawer { z-index: 1001 !important; }
.ongle24-added { z-index: 1002 !important; }

/* ---------- Product card media: primary/secondary image stacking ---------- */
.product-card__figure { position: relative; overflow: hidden; }
.product-card__figure .product-card__image-wrapper { display: block; position: relative; }
.product-card__figure picture { display: block; }
.product-card__image--primary { position: relative; z-index: 1; width: 100%; height: auto; }
.product-card__image--secondary {
  position: absolute !important; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; z-index: 2; transition: opacity .25s ease;
}
.product-card:hover .product-card__image--secondary { opacity: 1; }
.product-card__image { aspect-ratio: 1 / 1; object-fit: contain; }

/* Mobile drawer: active panel/wrapper must be visible and tappable */
navigation-drawer[open] .panel,
navigation-drawer.is-open .panel,
navigation-drawer[open] .panel__wrapper,
navigation-drawer.is-open .panel__wrapper {
  visibility: visible !important;
  opacity: 1 !important;
}
navigation-drawer .panel-list__wrapper { position: relative; z-index: 1; }
navigation-drawer .panel__wrapper:not([hidden]) { display: block !important; }

/* ---------- Home slideshow: fade transition for slide switching ---------- */
.slideshow__slide { transition: opacity .45s ease, visibility .45s ease; }
.slideshow__slide.is-selected { opacity: 1; visibility: visible; position: relative; z-index: 1; }

/* ================= Collection pages ================= */
/* Standard faceted grid: left filter sidebar + results */
.collection--filters-sidebar { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 48px; align-items: start; }
@media screen and (max-width: 999px) {
  .collection--filters-sidebar { grid-template-columns: 1fr; gap: 20px; }
  .facets-vertical { display: none; }
}
.facets-vertical__sidebar .accordion { border-bottom: 1px solid rgb(var(--text-color) / .12); padding: 14px 0; }
.facets-vertical__sidebar .accordion__toggle { font-size: 14px; }
.facets-vertical__sidebar .accordion__content { padding-top: 10px; }
.facets-vertical__sidebar .checkbox-list { display: grid; gap: 8px; font-size: 13px; }
.facets-vertical__sidebar .checkbox-container { display: flex; align-items: center; gap: 8px; }
.facets-vertical__sidebar .checkbox { width: 15px; height: 15px; }
.collection-header { padding-block: 40px 20px; }
.collection-header .prose { max-width: 1000px; }
/* Editorial landing sections: reduce excessive paddings inside collection context */
.page-template-collection .shopify-section--collection-banner .collection-header { padding-top: 0; }

/* Rails pulled from the reference DOM use <reveal-items> which the theme JS
   normally fades in; force visible in the replica (no animation library). */
.js reveal-items { opacity: 1 !important; }
.js .reveal, .js [reveal-on-scroll] { opacity: 1 !important; }

/* Blog article: video poster blocks (reference videos not shipped) */
.ongle24-video-poster { margin-block: 1.5rem; }
.ongle24-video-poster img { width: 100%; height: auto; display: block; border-radius: var(--rounded-block, 0); }

/* Blog article: video poster blocks keep a square ratio like the reference videos */
.ongle24-video-poster img { aspect-ratio: 1 / 1; object-fit: cover; }

/* Blog index cards */
.blog-posts { display: grid; grid-template-columns: repeat(var(--blog-posts-per-row, 4), minmax(0, 1fr)); gap: 40px 24px; }
main.page-template-blog .blog-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
@media screen and (max-width: 999px) { .blog-posts, main.page-template-blog .blog-posts { grid-template-columns: 1fr; gap: 32px; } }
.blog-post-card { display: block; }
.blog-post-card__figure { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--rounded-block, 12px); background: rgb(var(--text-color) / .05); }
.blog-post-card__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-post-card__info { padding-top: 16px; }
.blog-post-card__info .h3 { font-size: 20px; line-height: 1.35; }

/* Product rail arrows must sit above the product cards (reference kept them clickable) */
.floating-controls-container > scroll-carousel { position: relative; z-index: 0; }
.floating-controls-container .circle-button { z-index: 9 !important; pointer-events: auto !important; }

/* ---------- Default product grid for standalone product lists ---------- */
/* PDP "related products", search results and other places that render a
   product-list outside a collection section (which sets its own carousel
   variables via inline section styles). Without these defaults the grid
   shorthand is invalid and every card stretches to full page width. */
product-list.product-list {
  --product-list-items-per-row: 2;
  --product-list-grid: auto-flow dense / repeat(var(--product-list-items-per-row), minmax(0, 1fr));
  --product-list-gap: 32px var(--spacing-4);
}
@media screen and (min-width: 700px) {
  product-list.product-list { --product-list-items-per-row: 2; }
}
@media screen and (min-width: 1000px) {
  product-list.product-list { --product-list-items-per-row: 3; }
}
@media screen and (min-width: 1400px) {
  product-list.product-list { --product-list-items-per-row: 4; }
}

/* ---------- Collection featured-product block (2 columns like the reference) -- */
.ongle24-featured-product .product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ongle24-featured-product .product-gallery,
.ongle24-featured-product .product-info { min-width: 0; }
.ongle24-featured-product .product-gallery__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@media screen and (max-width: 999px) {
  .ongle24-featured-product .product { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Sale price highlight (reference accent red) ---------- */
/* Only our -50 % campaign exists, so every discounted price is highlighted. */
sale-price, .sale-price { color: rgb(var(--on-sale-text, 180 28 28)) !important; }

/* ---------- Product card alignment: equal-height info, price row on the same line ---------- */
.product-list { align-items: stretch; }
.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card__info { display: flex; flex: 1 1 auto; flex-direction: column; }
.product-card__info-stack { display: flex; flex: 1 1 auto; flex-direction: column; }
.product-card__title { display: block; min-height: 2.7em; }
.product-card__title a { display: block; }
.product-card__content { display: block; min-height: 1.5em; }
.product-card__info-stack > price-list { margin-top: auto; padding-top: 4px; }

/* ---------- Blog article embedded product rows ---------- */
/* The captured reference carousels rely on theme JS and can collapse to
   zero-width grid tracks in the replica; use a clean, aligned 5-column grid. */
main.page-template-article product-list.product-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px 24px;
  overflow: visible;
  width: 100%;
}
main.page-template-article product-list.product-list > product-card {
  width: auto !important;
  min-width: 0;
}
@media screen and (max-width: 999px) {
  main.page-template-article product-list.product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Force a clean grid for article product rows (captured section styles use
   ID-scoped carousel rules that are hard to override without !important). */
main.page-template-article product-list.product-list {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
}
@media screen and (max-width: 999px) {
  main.page-template-article product-list.product-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* Home blog section: centered heading like the reference */
.shopify-section--blog-posts .section-header { text-align: center; }
.shopify-section--blog-posts .section-header h2 { text-align: center; margin-inline: auto; }

/* ================= Collection facets component ================= */
.ongle24-facets-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgb(var(--text-color) / .12); margin-bottom: 4px; }
.ongle24-facets-title { font-size: 18px; font-weight: 600; margin: 0; }
.ongle24-facets-clear { background: none; border: 0; padding: 0; font-size: 12px; color: rgb(var(--text-color) / .6); text-decoration: underline; cursor: pointer; }
.ongle24-facet .checkbox-list { display: grid; gap: 9px; font-size: 13px; }
.ongle24-facet .checkbox-container { display: flex; align-items: center; gap: 8px; }
.ongle24-facet .checkbox { width: 15px; height: 15px; accent-color: rgb(var(--on-sale-text, 180 28 28)); }
.ongle24-facet-count { color: rgb(var(--text-color) / .5); font-size: 12px; }
.ongle24-collection.is-loading [data-ongle24-grid] { opacity: .45; transition: opacity .15s ease; }

.ongle24-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ongle24-toolbar__right { display: flex; align-items: center; gap: 14px; }
.ongle24-sort { display: flex; align-items: center; gap: 8px; }
.ongle24-sort__label { font-size: 13px; color: rgb(var(--text-color) / .65); margin: 0; }
.ongle24-sort__select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid rgb(var(--text-color) / .18); border-radius: 10px; background-color: #fff;
  padding: 8px 34px 8px 12px; font-size: 13px; line-height: 1.2; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.ongle24-mobile-filter { display: none; }
@media screen and (max-width: 999px) {
  .ongle24-mobile-filter { display: inline-flex; }
  .collection--filters-sidebar .facets-vertical { display: none; }
}

/* Mobile facets drawer */
.ongle24-facets-drawer { position: fixed; inset: 0; z-index: 1200; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s ease; }
.ongle24-facets-drawer.is-open { visibility: visible; opacity: 1; }
.ongle24-facets-drawer__overlay { position: absolute; inset: 0; background: rgb(0 0 0 / .45); }
.ongle24-facets-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .25s ease; }
.ongle24-facets-drawer.is-open .ongle24-facets-drawer__panel { transform: translateX(0); }
.ongle24-facets-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgb(var(--text-color) / .12); }
.ongle24-facets-drawer__head .h5 { margin: 0; font-size: 18px; }
.ongle24-facets-drawer__close { background: none; border: 0; padding: 6px; cursor: pointer; }
.ongle24-facets-drawer__body { flex: 1; overflow-y: auto; padding: 4px 20px 20px; }
.ongle24-facets-drawer__foot { padding: 14px 20px; border-top: 1px solid rgb(var(--text-color) / .12); }
.ongle24-facets-drawer__foot .button { width: 100%; }

/* ================= Reference-like collection topbar / facets ================= */
.ongle24-collection-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 8px 18px; }
.ongle24-facets-label { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.ongle24-facets-btn { display: none; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font-size: 16px; font-weight: 500; cursor: pointer; }
.ongle24-sort { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }
.ongle24-sort__label { margin: 0; font-weight: 600; font-size: 16px; }
.ongle24-sort__value { font-size: 16px; }
.ongle24-sort__select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; }
.ongle24-sort__chevron { width: 28px; height: 28px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; margin-left: 6px; }
.ongle24-count { display: none; font-size: 14px; color: rgb(var(--text-color) / .7); margin: 0 0 8px; }

.collection--filters-sidebar { grid-template-columns: 312px minmax(0, 1fr); gap: 48px; }
.facets-vertical__sidebar .accordion { border-bottom: 1px solid rgb(var(--text-color) / .14); padding: 16px 0; }
.facets-vertical__sidebar .accordion__toggle { font-size: 16px; font-weight: 600; }
.facets-vertical__sidebar .accordion summary .circle-chevron {
  width: 26px; height: 26px; border-radius: 50%; background: #000; color: #fff;
  display: grid; place-items: center; transition: transform .2s ease;
}
.facets-vertical__sidebar .accordion[open] summary .circle-chevron { transform: rotate(180deg); }
.facets-vertical__sidebar .accordion summary { cursor: pointer; list-style: none; }
.facets-vertical__sidebar .accordion summary::-webkit-details-marker { display: none; }
.facets-vertical__sidebar .accordion__content { padding-top: 14px; }

@media screen and (max-width: 999px) {
  .ongle24-facets-label { display: none; }
  .ongle24-facets-btn { display: inline-flex; }
  .ongle24-count { display: block; }
  .collection--filters-sidebar { grid-template-columns: 1fr; gap: 20px; }
  .ongle24-sort { font-size: 14px; }
  .ongle24-sort__label, .ongle24-sort__value { font-size: 14px; }
}
.ongle24-collection-topbar { scroll-margin-top: calc(var(--header-height, 120px) + 24px); }