/*
 * exo-wp.css -- EXOTICSDISPO WordPress/WooCommerce overrides.
 * Loaded LAST by functions.php. Every rule that exists only because WooCommerce markup differs
 * from the Shopify markup goes here (and ONLY here) -- never edit the ported Dawn/exo stylesheets.
 *
 * v1 contents (requested by the home-shell/shop packages, 2026-10-08):
 *   1. WordPress' .screen-reader-text (WooCommerce prints it everywhere; classic themes must define it)
 *   2. Rail "Add to Cart": WooCommerce needs `add_to_cart_button ajax_add_to_cart` on the rail button and
 *      home-shell also adds Dawn's `.button`; restore the live .exo-atc-btn geometry over base.css .button
 *   3. Hide WooCommerce's injected "View cart" link inside rail cards (no room for it in the Shopify card)
 *   4. WooCommerce price HTML (del/ins) inside rail cards -> live compare-price look
 *
 * Override hooks the home-shell templates expose (no rules yet -- target these when WC output needs a nudge):
 *   .page-width > .exo-wc-page        full-width wrapper around WC cart / checkout / my-account content (page.php; no .rte)
 *   ul.exo-search__grid.product-grid  non-product search results grid (search.php; mixes product + article cards)
 */

/* 1. WordPress accessibility helper (same as Dawn's .visually-hidden) */
.screen-reader-text {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
}

/* 2. Rail ATC button: values are the live .exo-atc-btn rule (exo-sections.css), re-asserted over base.css .button */
.exo-scroll-card__atc-wrap .exo-atc-btn.button,
.exo-scroll-card__atc-wrap .exo-atc-btn.button:hover,
.exo-scroll-card__atc-wrap .exo-atc-btn.button:focus-visible {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 10px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  text-decoration: none;
  --color-button: 29, 29, 31;
  --color-button-text: 255, 255, 255;
  --buttons-border-width: 0px;
  --buttons-radius: 8px;
  --buttons-radius-outset: 8px;
}
.exo-scroll-card__atc-wrap .exo-atc-btn.button::after,
.exo-scroll-card__atc-wrap .exo-atc-btn.button::before {
  display: none;
}
.exo-scroll-card__atc-wrap .exo-atc-btn.button:hover {
  background: #333;
}
.exo-scroll-card__atc-wrap .exo-atc-btn.button.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* 3. WooCommerce appends <a class="added_to_cart wc-forward">View cart</a> after an AJAX add */
.exo-scroll-card__atc-wrap .added_to_cart,
.exo-collection-row .added_to_cart {
  display: none !important;
}

/* 4. WooCommerce get_price_html() inside rail cards: <del> = live .exo-scroll-card__compare-price, <ins> plain */
.exo-scroll-card__price del {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  margin-right: 4px;
  font-weight: 400;
}
.exo-scroll-card__price ins,
.exo-scroll-card__price .woocommerce-Price-amount {
  text-decoration: none;
  font-weight: inherit;
  color: inherit;
}


/* ---- Buy More, Save More bundle buttons (ported from the Shopify PDP) ---- */
.exo-bundle-wrap{margin:1rem 0 0}
.exo-bundle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%;max-width:32rem}
.exo-bundle-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:55px;border:1.5px solid #1d1d1f;border-radius:8px;background:#fff;color:#1d1d1f;padding:8px 4px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;font-family:var(--font-body-family,Inter,sans-serif);line-height:1.1;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.exo-bundle-btn:hover{background:#f5f5f7}
.exo-bundle-btn.active{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
.exo-bundle-btn::before{content:attr(data-qty);pointer-events:none;font-size:15px;font-weight:700;text-align:center}
.exo-bundle-btn::after{content:attr(data-off);pointer-events:none;font-size:8px;font-weight:400;color:#86868b;margin-top:2px;text-align:center;line-height:1.2;min-height:1em}
.exo-bundle-btn.active::after{color:rgba(255,255,255,.65)}
.exo-bundle-btn.active::before{color:#fff}
/* ---- Pickup availability (Dawn component-pickup-availability subset) ---- */
.product__pickup-availabilities{margin:1.5rem 0 0}
.pickup-availability-preview{align-items:flex-start;display:flex;gap:.2rem}
.pickup-availability-preview .icon{flex-shrink:0;height:1.8rem;width:1.8rem}
.pickup-availability-info *{margin:0 0 .6rem}
.pickup-availability-info .caption-large{font-size:1.3rem}
.pickup-availability-info .caption{font-size:1.2rem;color:rgba(var(--color-foreground),.75)}
.pickup-availability-button{background:transparent;color:rgba(var(--color-foreground),.75);padding-left:0;text-align:left;letter-spacing:.06rem;font-size:1.2rem}
.pickup-availability-button:hover{color:rgb(var(--color-foreground))}

/* ---- Mobile header: keep the centered brand clear of the search icon + cart pill (375px with a cart count) ---- */
@media (max-width: 749px) {
  .rd-header__brand { gap: 8px; }
  .rd-header__emblem { height: 30px; width: 30px; }
  .rd-header__wordmark { font-size: 13.5px; letter-spacing: .09em; }
  .rd-cart-btn { padding: 9px 10px; gap: 5px; }
}

/* Contact Form 7 (contact-us, product-request) — Dawn field look, 2026-10-09 */
.wpcf7 { max-width: 620px; margin: 8px 0 32px; }
.wpcf7 form p { margin: 0 0 16px; }
.wpcf7 label { display: block; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: rgb(var(--color-foreground)); }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
  width: 100%; box-sizing: border-box; padding: 13px 15px; font: inherit; font-size: 16px; font-weight: 400;
  color: rgb(var(--color-foreground)); background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), .3); border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
.wpcf7 textarea { height: 150px; min-height: 110px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
.wpcf7 input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 32px; border: 0; border-radius: 999px;
  background: #7c3aed; color: #fff; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background .15s;
}
.wpcf7 input[type="submit"]:hover { background: #6d28d9; }
.wpcf7 .wpcf7-spinner { vertical-align: middle; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 13px; margin-top: 4px; color: #dc2626; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; font-size: 15px; }
.product-request-page .wpcf7 { margin: 0 auto; }

/* Product reviews (Judge.me look), 2026-10-09 — inc/reviews.php */
.exo-stars { display: inline-flex; gap: 1px; vertical-align: middle; line-height: 0; }
.exo-review-badge { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 14px; color: color-mix(in srgb, currentColor 75%, transparent); text-decoration: none; }
.exo-review-badge:hover span { text-decoration: underline; }
.exo-reviews { margin-top: 48px; margin-bottom: 24px; }
.exo-reviews__title { text-align: center; margin: 0 0 24px; }
.exo-reviews__head { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; align-items: center; padding: 0 0 24px; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.exo-reviews__summary { text-align: center; }
.exo-reviews__summary p { margin: 6px 0 0; font-size: 15px; }
.exo-reviews__based { color: color-mix(in srgb, currentColor 70%, transparent); }
.exo-reviews__histogram { display: grid; gap: 4px; border-left: 1px solid color-mix(in srgb, currentColor 12%, transparent); border-right: 1px solid color-mix(in srgb, currentColor 12%, transparent); padding: 0 24px; }
.exo-reviews__bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.exo-reviews__bar { flex: 1; height: 10px; background: #ece8f3; border-radius: 6px; overflow: hidden; }
.exo-reviews__bar span { display: block; height: 100%; background: #f5b301; }
.exo-reviews__bar-n { width: 22px; text-align: right; color: color-mix(in srgb, currentColor 70%, transparent); }
.exo-reviews__cta { text-align: center; }
.exo-reviews__form { max-width: 620px; margin: 24px auto 0; }
.exo-reviews__form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.exo-reviews__form input[type="text"], .exo-reviews__form input[type="email"], .exo-reviews__form select, .exo-reviews__form textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 16px; color: #1a1a1a; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 10px; background: #fff; }
.exo-reviews__form p, .exo-reviews__form .comment-form-rating { margin: 0 0 14px; }
.exo-reviews__form .comment-form-cookies-consent { display: none; }
.exo-reviews__form p.stars { display: none; } /* keep the plain select; WC's star widget is not styled in this theme */
.exo-reviews__form .comment-form-rating select#rating { display: block !important; }
.exo-reviews__note { font-size: 13px; color: color-mix(in srgb, currentColor 70%, transparent); }
.exo-reviews__list { list-style: none; margin: 0; padding: 0; }
.exo-review { padding: 20px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.exo-review__top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: color-mix(in srgb, currentColor 60%, transparent); }
.exo-review__author { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font-weight: 600; font-size: 15px; }
.exo-review__avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #ece8f3; color: #6d28d9; font-weight: 700; }
.exo-review__verified { font-size: 12px; font-weight: 600; color: #fff; background: #7c3aed; padding: 2px 8px; border-radius: 999px; }
.exo-review__body p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; }
.exo-review__reply { margin: 10px 0 0 16px; padding: 10px 14px; border-left: 3px solid #7c3aed; background: color-mix(in srgb, #7c3aed 14%, transparent); font-size: 14px; }
@media (max-width: 749px) {
  .exo-reviews__head { grid-template-columns: 1fr; }
  .exo-reviews__histogram { border: 0; padding: 0; }
}

/* ── VIP Rewards (inc/vip-rewards.php, 2026-10-10): Shopify's "Join VIP Rewards" popup, sign-up code card, floating button ── */
#exo-vip-popup { position: fixed; inset: 0; z-index: 99998; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s ease; }
#exo-vip-popup.is-visible { opacity: 1; }
.exo-vip__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.exo-vip__card { position: relative; width: 90%; max-width: 440px; padding: 48px 40px 36px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 25px 60px rgba(0, 0, 0, .5); text-align: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; opacity: 0; transform: translateY(20px) scale(.97); transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .45s ease; }
.exo-vip__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #6B2FA0, #2ECC71, #6B2FA0); background-size: 200% 100%; animation: exo-vip-bar 3s ease infinite; }
@keyframes exo-vip-bar { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
#exo-vip-popup.is-visible .exo-vip__card { opacity: 1; transform: none; }
.exo-vip__logo-wrap { display: flex; justify-content: center; margin: 0 auto 20px; }
.exo-vip__logo { display: block; max-width: 180px; height: auto; }
.exo-vip__divider { width: 50px; height: 3px; margin: 16px auto 24px; border-radius: 2px; background: linear-gradient(90deg, #6B2FA0, #2ECC71); }
.exo-vip__headline { margin: 0 0 8px; color: #1a1a2e; font-size: 26px; font-weight: 700; line-height: 1.2; }
.exo-vip__subtext { margin: 0 0 28px; color: #555; font-size: 15px; line-height: 1.5; }
.exo-vip__buttons { display: flex; flex-direction: column; gap: 12px; }
.exo-vip__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 14px 32px; border-radius: 12px; background: linear-gradient(135deg, #6B2FA0, #5A2788); box-shadow: 0 4px 15px rgba(107, 47, 160, .35); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-decoration: none; text-transform: uppercase; touch-action: manipulation; transition: all .3s ease; }
.exo-vip__btn:hover { background: linear-gradient(135deg, #2ECC71, #27AE60); box-shadow: 0 4px 20px rgba(46, 204, 113, .4); color: #fff; transform: translateY(-1px); }
.exo-vip__dismiss { width: 100%; min-height: 44px; padding: 10px 24px; border: 1px solid #e0e0e0; border-radius: 10px; background: transparent; color: #888; font-size: 14px; font-weight: 500; cursor: pointer; touch-action: manipulation; transition: all .25s ease; }
.exo-vip__dismiss:hover { border-color: #bbb; color: #555; }
.exo-vip__note { margin: 12px 0 0; color: #888; font-size: 12px; }
@media (max-width: 480px) { .exo-vip__card { width: 92%; padding: 36px 24px 28px; border-radius: 14px; } .exo-vip__headline { font-size: 22px; } }
.exo-vip-code { margin: 0 0 24px; padding: 20px 22px; border: 1px solid #e3d4f5; border-radius: 14px; background: #f6f0fc; color: #1a1a1a; }
.exo-vip-code__eyebrow { margin: 0 0 4px; color: #6B2FA0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.exo-vip-code__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.exo-vip-code__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.exo-vip-code__code { flex: 1 1 160px; padding: 10px 14px; border: 2px dashed #6B2FA0; border-radius: 10px; background: #fff; color: #1a1a1a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; font-weight: 700; letter-spacing: .06em; text-align: center; }
.exo-vip-code__copy { min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: #6B2FA0; color: #fff; font-weight: 700; cursor: pointer; }
.exo-vip-code__note { margin: 10px 0 14px; color: #555; font-size: 13px; }
.exo-vip-code__actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.exo-vip-code__shop { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #1a1a1a; color: #fff; font-weight: 700; text-decoration: none; }
.exo-vip-code__shop:hover { background: #333; color: #fff; }
.exo-vip-code__rewardup { color: #6B2FA0; font-weight: 700; }
.exo-vip-apply { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 0 0 18px; padding: 12px 16px; border: 1px solid #e3d4f5; border-radius: 12px; background: #f6f0fc; color: #1a1a1a; font-size: 14px; }
.exo-vip-apply__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #6B2FA0; color: #fff; font-weight: 700; text-decoration: none; }
.exo-vip-apply__btn:hover { background: #5A2788; color: #fff; }
.exo-vip-register-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #f6f0fc; color: #4b1f73; font-size: 14px; font-weight: 600; }
.exo-vipfab { position: fixed; left: 16px; bottom: 16px; z-index: 60; }
.exo-vipfab__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #6B2FA0, #5A2788); box-shadow: 0 6px 18px rgba(107, 47, 160, .35); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.exo-vipfab__panel { position: absolute; left: 0; bottom: 58px; width: min(300px, calc(100vw - 32px)); padding: 16px; border-radius: 14px; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); color: #1a1a1a; }
.exo-vipfab__panel[hidden] { display: none; }
.exo-vipfab__title { margin: 0 0 8px; color: #6B2FA0; font-size: 16px; font-weight: 800; }
.exo-vipfab__text { margin: 8px 0; color: #444; font-size: 13px; }
.exo-vipfab__primary, .exo-vipfab__secondary { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.exo-vipfab__primary { background: #6B2FA0; color: #fff; }
.exo-vipfab__primary:hover { background: #5A2788; color: #fff; }
.exo-vipfab__secondary { border: 1px solid #d9c6ef; color: #6B2FA0; }
@media (max-width: 749px) { .exo-vipfab { left: 12px; bottom: 12px; } .exo-vipfab__btn { min-height: 42px; padding: 0 14px; font-size: 13px; } }
#exo-vip-popup .exo-vip__overlay, #exo-vip-popup .exo-vip__divider { display: block; } /* Dawn base.css hides empty divs (div:empty) */