/* MainChick - WooCommerce page styling (cart, pay-for-order, order-received).
   These pages are WooCommerce Blocks / templates, not Elementor, because they are
   the live payment path. Styling them keeps that path intact. */

/* ---------- sticky footer: short shop pages left a cream gap under the footer ---------- */
/* sticky footer lives in mc-design.css (loads site-wide) */

/* ---------- quantity stepper ----------
   Woo caps .wc-block-components-quantity-selector at max-width:107px and clips with
   overflow:hidden. Our 44px touch targets total 128px, so the + button was cut off. */
body.mc-v2 .wc-block-components-quantity-selector{
  max-width:none!important; width:auto!important; overflow:visible!important;
  display:inline-flex!important; align-items:center; gap:2px;
  background:#fff; border:1.5px solid var(--mc-line); border-radius:11px; padding:3px;
}
body.mc-v2 .wc-block-components-quantity-selector::after{ display:none!important; }
body.mc-v2 .wc-block-components-quantity-selector__button{
  width:34px!important; min-width:34px!important; height:34px!important;
  opacity:1!important; border:0!important; background:none!important;
  border-radius:8px; font-size:17px; line-height:1; color:var(--mc-ink); cursor:pointer;
}
body.mc-v2 .wc-block-components-quantity-selector__button:hover:not(:disabled){ background:var(--mc-cream-2); }
body.mc-v2 .wc-block-components-quantity-selector__button:disabled{ opacity:.35!important; cursor:not-allowed; }
body.mc-v2 .wc-block-components-quantity-selector__button--minus{ order:1; }
body.mc-v2 .wc-block-components-quantity-selector__input{
  order:2; width:40px!important; min-width:40px!important; height:34px!important;
  border:0!important; background:none!important; text-align:center;
  font-family:inherit; font-size:15px; font-weight:700; color:var(--mc-ink); padding:0!important;
}
body.mc-v2 .wc-block-components-quantity-selector__button--plus{ order:3; }

/* keep the remove (bin) control from colliding with the stepper */
body.mc-v2 .wc-block-cart-item__remove-link,
body.mc-v2 .wc-block-components-product-remove{ margin-left:12px; }

/* ---------- pay-for-order + order-received shared shell ---------- */
body.mc-v2.woocommerce-order-pay .site-main,
body.mc-v2.woocommerce-order-received .site-main{
  max-width:760px; margin:0 auto; padding:44px 22px 72px;
}
body.mc-v2.woocommerce-order-pay .entry-title,
body.mc-v2.woocommerce-order-received .entry-title{
  font-family:'Fredoka',sans-serif; font-size:clamp(28px,4vw,40px); font-weight:600;
  line-height:1.05; margin:0 0 8px; text-align:left;
}

/* order summary strip (ORDER NUMBER / DATE / TOTAL / PAYMENT METHOD) */
body.mc-v2 ul.woocommerce-order-overview,
body.mc-v2 ul.order_details{
  list-style:none; margin:22px 0 26px; padding:18px 20px;
  background:#fff; border:1px solid var(--mc-line); border-radius:16px;
  display:flex; flex-wrap:wrap; gap:14px 30px;
}
body.mc-v2 ul.woocommerce-order-overview li,
body.mc-v2 ul.order_details li{
  border:0!important; margin:0!important; padding:0!important; float:none!important;
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mc-ink-2);
}
body.mc-v2 ul.woocommerce-order-overview li strong,
body.mc-v2 ul.order_details li strong{
  display:block; margin-top:5px; font-family:'Fredoka',sans-serif; font-size:17px;
  font-weight:600; letter-spacing:0; text-transform:none; color:var(--mc-ink);
}

/* ---------- buttons on these pages ---------- */
body.mc-v2.woocommerce-order-pay #place_order,
body.mc-v2.woocommerce-order-pay .woocommerce-Button,
body.mc-v2.woocommerce-order-pay button[name="woocommerce_pay"],
body.mc-v2 .woocommerce-order .button{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--mc-red); color:#fff!important; border:1.5px solid transparent;
  border-radius:11px; padding:15px 30px; min-height:50px;
  font-family:inherit; font-size:15px; font-weight:700; text-decoration:none; cursor:pointer;
  transition:background .18s ease;
}
body.mc-v2.woocommerce-order-pay #place_order:hover,
body.mc-v2 .woocommerce-order .button:hover{ background:var(--mc-red-2); }

/* the secondary "Cancel" link next to Pay Now */
body.mc-v2 .woocommerce-checkout .cancel,
body.mc-v2 a.cancel-order,
body.mc-v2 .order-pay-cancel{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--mc-ink)!important; border:1.5px solid var(--mc-line);
  border-radius:11px; padding:15px 26px; min-height:50px;
  font-size:15px; font-weight:700; text-decoration:none; margin-left:10px;
}
body.mc-v2 .woocommerce-checkout .cancel:hover{ border-color:var(--mc-ink); }

/* ---------- order-received extras ---------- */
body.mc-v2 .woocommerce-thankyou-order-received{
  font-family:'Fredoka',sans-serif; font-size:clamp(24px,3.4vw,32px); font-weight:600;
  color:var(--mc-ink); line-height:1.15; margin:0 0 6px;
}
body.mc-v2 .woocommerce-order p{ font-size:15px; line-height:1.6; color:var(--mc-ink-2); }
body.mc-v2 .woocommerce-order h2{
  font-family:'Fredoka',sans-serif; font-size:20px; font-weight:600; color:var(--mc-ink);
  margin:30px 0 12px;
}
body.mc-v2 .woocommerce-table--order-details,
body.mc-v2 .woocommerce-table--customer-details{
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--mc-line); border-radius:16px; overflow:hidden; font-size:14px;
}
body.mc-v2 .woocommerce-table--order-details th,
body.mc-v2 .woocommerce-table--order-details td,
body.mc-v2 .woocommerce-table--customer-details th,
body.mc-v2 .woocommerce-table--customer-details td{
  padding:13px 16px; border-bottom:1px solid var(--mc-line); text-align:left; vertical-align:top;
}
body.mc-v2 .woocommerce-table--order-details tfoot td,
body.mc-v2 .woocommerce-table--order-details tfoot th{ font-weight:700; color:var(--mc-ink); }
body.mc-v2 .woocommerce-table--order-details tr:last-child th,
body.mc-v2 .woocommerce-table--order-details tr:last-child td{ border-bottom:0; }

/* ---------- the branded confirmation block we inject ---------- */
.mc-thanks{ background:var(--mc-cream); border-radius:20px; padding:26px 24px; margin:0 0 26px; }
.mc-thanks__tick{
  width:46px; height:46px; border-radius:50%; background:var(--mc-green); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; margin-bottom:14px;
}
.mc-thanks h2{ font-family:'Fredoka',sans-serif; font-size:clamp(23px,3.2vw,30px); font-weight:600; margin:0 0 8px!important; color:var(--mc-ink); }
.mc-thanks p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--mc-ink-2); }
.mc-thanks__row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.mc-wa{
  display:inline-flex; align-items:center; gap:9px; background:#25D366; color:#fff!important;
  border-radius:11px; padding:14px 22px; min-height:50px; font-size:14.5px; font-weight:700;
  text-decoration:none; transition:filter .18s ease;
}
.mc-wa:hover{ filter:brightness(.94); }
.mc-wa, .mc-shopmore, body.mc-v2 .mc-thanks a{ text-decoration:none!important; }
.mc-wa svg{ width:18px; height:18px; fill:currentColor; flex:0 0 18px; }
.mc-shopmore{
  display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--mc-ink)!important;
  border:1.5px solid var(--mc-line); border-radius:11px; padding:14px 22px; min-height:50px;
  font-size:14.5px; font-weight:700; text-decoration:none;
}
.mc-shopmore:hover{ border-color:var(--mc-ink); }

/* ---------- mobile ---------- */
@media (max-width:620px){
  body.mc-v2.woocommerce-order-pay .site-main,
  body.mc-v2.woocommerce-order-received .site-main{ padding:28px 16px 54px; }
  body.mc-v2 ul.woocommerce-order-overview,
  body.mc-v2 ul.order_details{ flex-direction:column; gap:14px; padding:16px 18px; }
  .mc-thanks{ padding:22px 18px; border-radius:18px; }
  .mc-thanks__row{ flex-direction:column; }
  .mc-wa, .mc-shopmore{ width:100%; }
  body.mc-v2 .woocommerce-table--order-details,
  body.mc-v2 .woocommerce-table--customer-details{ font-size:13px; }
  body.mc-v2 .woocommerce-table--order-details th,
  body.mc-v2 .woocommerce-table--order-details td{ padding:11px 12px; }
  body.mc-v2.woocommerce-order-pay #place_order,
  body.mc-v2 .woocommerce-order .button,
  body.mc-v2 .woocommerce-checkout .cancel{ width:100%; margin-left:0; margin-top:10px; }
}

/* Download-invoice button on the order-received page */
.mc-invoice-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:50px;
  padding:14px 24px; border-radius:11px; font-size:14.5px; font-weight:700;
  background:var(--mc-ink); color:#fff!important; text-decoration:none!important;
  transition:filter .18s ease;
}
.mc-invoice-btn:hover{ filter:brightness(1.15); }
@media (max-width:620px){ .mc-invoice-btn{ width:100%; } }

/* =====================================================================
   MainChick review UI
   WooCommerce ships these as bare lists and default form controls. This
   rebuilds them as brand cards without touching the markup, so the star
   widget and comment form keep working exactly as WooCommerce expects.
   ===================================================================== */

/* ---- product tabs as pills ---- */
body.mc-v2 .woocommerce-tabs ul.tabs{ list-style:none; margin:0 0 26px; padding:0; display:flex; gap:8px; flex-wrap:wrap; border:0; }
body.mc-v2 .woocommerce-tabs ul.tabs::before,
body.mc-v2 .woocommerce-tabs ul.tabs::after{ display:none!important; }
body.mc-v2 .woocommerce-tabs ul.tabs li{ margin:0; padding:0; background:none; border:0; border-radius:9999px; }
body.mc-v2 .woocommerce-tabs ul.tabs li::before,
body.mc-v2 .woocommerce-tabs ul.tabs li::after{ display:none!important; }
body.mc-v2 .woocommerce-tabs ul.tabs li a{
  display:block; padding:11px 20px; border-radius:9999px; text-decoration:none!important;
  font-size:14px; font-weight:700; color:var(--mc-ink-2)!important;
  background:rgba(21,21,21,.05); transition:background .18s ease, color .18s ease;
}
body.mc-v2 .woocommerce-tabs ul.tabs li a:hover{ background:rgba(21,21,21,.09); color:var(--mc-ink)!important; }
body.mc-v2 .woocommerce-tabs ul.tabs li.active a{ background:var(--mc-ink); color:#fff!important; }
body.mc-v2 .woocommerce-tabs .panel{ border:0; padding:0; margin:0; }

/* ---- heading ---- */
body.mc-v2 #reviews h2, body.mc-v2 .woocommerce-Reviews-title{
  font-family:'Fredoka',sans-serif; font-size:clamp(21px,2.6vw,27px); font-weight:600;
  color:var(--mc-ink); margin:0 0 20px; letter-spacing:-.01em;
}

/* ---- review cards ---- */
body.mc-v2 .commentlist{ list-style:none; margin:0 0 34px; padding:0; display:grid; gap:14px; }
body.mc-v2 .commentlist li.review, body.mc-v2 .commentlist li.comment{ margin:0; padding:0; background:none; border:0; }
body.mc-v2 .commentlist .comment_container{
  position:relative; display:block; background:#fff; border:1px solid var(--mc-line);
  border-radius:18px; padding:22px 24px; overflow:hidden;
}
/* the default grey gravatar silhouette adds nothing - drop it */
body.mc-v2 .commentlist img.avatar{ display:none!important; }
body.mc-v2 .commentlist .comment-text{ margin:0; padding:0; border:0; }

/* gold stars, a touch larger */
body.mc-v2 .commentlist .star-rating{ float:none; margin:0 0 10px; font-size:15px; color:var(--mc-gold); }
body.mc-v2 .commentlist .star-rating span{ color:var(--mc-gold); }

body.mc-v2 .commentlist p.meta{ font-size:13.5px; color:var(--mc-ink-2); margin:0 0 10px; }
body.mc-v2 .commentlist .woocommerce-review__author{ color:var(--mc-ink); font-weight:800; font-size:15px; }
body.mc-v2 .commentlist .woocommerce-review__dash{ display:none; }
body.mc-v2 .commentlist .woocommerce-review__published-date{ display:block; margin-top:2px; font-size:12.5px; color:var(--mc-ink-2); }
/* verified owner becomes a proper badge */
body.mc-v2 .commentlist .woocommerce-review__verified{
  display:inline-block; margin-left:8px; font-style:normal; font-size:11px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--mc-green);
  background:rgba(31,122,70,.12); padding:4px 9px; border-radius:9999px; vertical-align:middle;
}
body.mc-v2 .commentlist .description p{ font-size:15.5px; line-height:1.62; color:var(--mc-ink); margin:0; }

/* ---- add-a-review form ---- */
body.mc-v2 #review_form_wrapper #respond{ background:var(--mc-cream-2); border-radius:20px; padding:26px 26px 28px; }
body.mc-v2 #respond .comment-reply-title{ font-family:'Fredoka',sans-serif; font-size:20px; font-weight:600; color:var(--mc-ink); display:block; margin:0 0 4px; }
body.mc-v2 #respond .comment-notes{ font-size:13.5px; color:var(--mc-ink-2); margin:0 0 18px; }
body.mc-v2 #respond label{ display:block; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--mc-ink-2); margin-bottom:7px; }
body.mc-v2 #respond .comment-form-rating{ margin-bottom:18px; }
body.mc-v2 #respond .stars{ margin:0; }
body.mc-v2 #respond .stars a{ color:var(--mc-gold)!important; font-size:0; margin-right:4px; }
body.mc-v2 #respond .stars a::before{ font-size:26px; }
body.mc-v2 #respond .stars a:hover{ transform:scale(1.12); }
body.mc-v2 #respond textarea,
body.mc-v2 #respond input[type=text],
body.mc-v2 #respond input[type=email]{
  width:100%; background:#fff; border:1.5px solid var(--mc-line); border-radius:12px;
  padding:13px 14px; font-family:inherit; font-size:15px; color:var(--mc-ink);
  transition:border-color .18s ease;
}
body.mc-v2 #respond textarea{ min-height:130px; resize:vertical; }
body.mc-v2 #respond textarea:focus,
body.mc-v2 #respond input[type=text]:focus,
body.mc-v2 #respond input[type=email]:focus{ outline:none; border-color:var(--mc-ink); }
body.mc-v2 #respond .comment-form-author,
body.mc-v2 #respond .comment-form-email{ margin-bottom:16px; }
body.mc-v2 #respond .form-submit{ margin:20px 0 0; }
/* Woo ships a generic button rule that repaints submits #CC3366 on hover and
   focus - pin every state so the brand red always wins */
body.mc-v2 #respond input#submit,
body.mc-v2 #respond input#submit:hover,
body.mc-v2 #respond input#submit:focus,
body.mc-v2 #respond input#submit:active{
  background:var(--mc-red)!important; color:#fff!important; border:0!important;
  border-radius:11px!important; padding:15px 34px!important; min-height:52px;
  font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; width:auto;
}
body.mc-v2 #respond input#submit:hover{ background:var(--mc-red-2)!important; }
body.mc-v2 #respond input#submit:focus-visible{ outline:2px solid var(--mc-ink); outline-offset:3px; }
body.mc-v2 #respond .comment-form-cookies-consent{ display:flex; align-items:center; gap:9px; margin-top:14px; }
body.mc-v2 #respond .comment-form-cookies-consent label{ margin:0; text-transform:none; letter-spacing:0; font-weight:500; font-size:13px; }

@media (max-width:620px){
  body.mc-v2 .commentlist .comment_container{ padding:18px 18px; }
  body.mc-v2 #review_form_wrapper #respond{ padding:20px 18px 22px; }
  body.mc-v2 #respond input#submit{ width:100%; }
  body.mc-v2 .woocommerce-tabs ul.tabs li a{ padding:10px 16px; font-size:13px; }
}

/* WooCommerce ships these with deep selectors of its own, so the overrides
   above lose on specificity. Repeat them at Woo's own depth to out-specify
   WooCommerce rather than scatter !important everywhere. */

/* tabs: the <li> was still white with square corners and its own padding,
   which drew a second box around the pill */
body.mc-v2 .woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; margin:0 0 26px; }
body.mc-v2 .woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent; border:0; border-radius:0; padding:0; margin:0;
  box-shadow:none;
}
body.mc-v2 .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.mc-v2 .woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none!important; border:0!important; box-shadow:none!important; }
body.mc-v2 .woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block; padding:11px 20px; border-radius:9999px;
  font-size:14px; font-weight:700; color:var(--mc-ink-2)!important;
  background:rgba(21,21,21,.05); text-shadow:none;
}
body.mc-v2 .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{ background:rgba(21,21,21,.09); color:var(--mc-ink)!important; }
body.mc-v2 .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ background:var(--mc-ink); color:#fff!important; }

/* the review body carried Woo's own bordered box + 50px avatar indent,
   which nested a second card inside ours */
body.mc-v2 .woocommerce #reviews #comments ol.commentlist li .comment-text{
  margin:0; padding:0; border:0; border-radius:0;
}
body.mc-v2 .woocommerce #reviews #comments ol.commentlist li img.avatar{ display:none; }
body.mc-v2 .woocommerce #reviews #comments ol.commentlist li{ padding:0; margin:0; }
body.mc-v2 .woocommerce #reviews #comments ol.commentlist{ padding:0; }

/* keep the star widget legible at Woo's depth too */
body.mc-v2 .woocommerce #reviews #comments ol.commentlist li .comment-text .star-rating{ float:none; margin:0 0 10px; color:var(--mc-gold); }
body.mc-v2 .woocommerce #review_form #respond input#submit{
  background:var(--mc-red); color:#fff; border-radius:11px; padding:15px 34px; font-weight:700;
}

/* Woo's tab rules sit at .woocommerce div.product .woocommerce-tabs ul.tabs li,
   but on this theme div.product has no .woocommerce ancestor - so matching that
   depth is impossible. Pin the handful of properties instead. */
body.mc-v2 .woocommerce-tabs ul.tabs li{
  background:transparent!important; border:0!important; border-radius:0!important;
  padding:0!important; margin:0!important; box-shadow:none!important;
}
body.mc-v2 .woocommerce-tabs ul.tabs li.active{ background:transparent!important; }
body.mc-v2 .woocommerce-tabs ul.tabs li a{
  padding:11px 20px!important; border-radius:9999px!important; display:block!important;
  text-shadow:none!important;
}
body.mc-v2 .woocommerce-tabs ul.tabs::before,
body.mc-v2 .woocommerce-tabs ul.tabs::after{ display:none!important; }

/* same story for the review body box */
body.mc-v2 #reviews .commentlist li .comment-text{
  margin:0!important; padding:0!important; border:0!important; border-radius:0!important;
}
body.mc-v2 #reviews .commentlist li img.avatar{ display:none!important; }

/* Woo sizes the star anchors from font-size (width/height are in em), so an
   earlier font-size:0 here collapsed all five to 0x0 and stacked them on top
   of each other. Size them explicitly instead. */
body.mc-v2 #respond .comment-form-rating{ margin:0 0 22px; }
body.mc-v2 #respond .comment-form-rating > label{ margin-bottom:10px; }
body.mc-v2 #respond .comment-form-rating .stars{ display:inline-flex; gap:7px; margin:0; line-height:1; }
body.mc-v2 #respond .comment-form-rating .stars a{
  font-size:27px!important; width:1.05em!important; height:1.05em!important;
  line-height:1!important; display:inline-block!important; position:relative;
  color:var(--mc-gold)!important; text-decoration:none!important;
  transition:transform .12s ease;
}
body.mc-v2 #respond .comment-form-rating .stars a::before{ font-size:1em!important; line-height:1!important; }
body.mc-v2 #respond .comment-form-rating .stars a:hover{ transform:scale(1.14); }
body.mc-v2 #respond .comment-form-rating .stars.selected a.active,
body.mc-v2 #respond .comment-form-rating .stars.selected a:not(.active){ color:var(--mc-gold)!important; }

/* the badge reads "(verified owner)" in Woo's markup - swap the label text */
body.mc-v2 .commentlist .woocommerce-review__verified{ font-size:0!important; }
body.mc-v2 .commentlist .woocommerce-review__verified::before{
  content:"Verified buyer"; font-size:11px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; font-style:normal;
}