/* ================================================================
   PP-Lovable Site-Wide Theme Override
   ----------------------------------------------------------------
   Applies the pp-lovable design system (gold/orange, white cards)
   across the WHOLE front end, replacing OceanWP's red (#e2344b).

   SAFE / INSTANT REVERT:
     Remove the `sl_pp_sitewide_styles` enqueue (one add_action line)
     in secretlair_code.php. This file is PURE CSS — no PHP logic,
     no DB, no WooCommerce functionality. Removing it returns the
     site to its exact prior state.

   CONTRAST RULE (no white-on-bright):
     - Was red BACKGROUND  -> gold bg + DARK ink text.
     - Was red TEXT/border -> orange / gold.
   Selectors below mirror OceanWP's own customizer selectors 1:1,
   so ONLY elements that were red are touched (minimal blast radius).
   ================================================================ */

:root {
  --ppw-gold:        oklch(0.72 0.16 70);   /* button / accent background  */
  --ppw-gold-hover:  oklch(0.66 0.16 70);   /* darker gold on hover        */
  --ppw-ink:         oklch(0.18 0.02 250);  /* dark text on gold (READABLE)*/
  --ppw-warm:        #e07b30;               /* orange links / accents      */
  --ppw-warm-hover:  #c96820;

  --ppw-card:        #ffffff;
  --ppw-bg:          #f7f8fb;
  --ppw-text:        #1a1a1a;
  --ppw-muted:       #5a5a5a;
  --ppw-border:      rgba(20, 24, 40, 0.08);
  --ppw-radius:      18px;
  --ppw-radius-sm:   12px;
  --ppw-shadow:      0 2px 24px rgba(0, 0, 0, 0.07);
  --ppw-shadow-h:    0 10px 30px rgba(0, 0, 0, 0.12);
  --ppw-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ================================================================
   1. RED TEXT  ->  orange   (mirrors OceanWP `color:#e2344b`)
   ================================================================ */
.woocommerce-MyAccount-navigation ul li a:before,
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout #payment .payment_method_paypal .about_paypal,
.woocommerce ul.products li.product li.category a:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .product-inner .added_to_cart:hover,
.product_meta .posted_in a:hover,
.product_meta .tagged_as a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce .oceanwp-grid-list a.active,
.woocommerce .oceanwp-grid-list a:hover,
.woocommerce .oceanwp-off-canvas-filter:hover,
.widget_shopping_cart ul.cart_list li .owp-grid-wrap .owp-grid a.remove:hover,
.widget_product_categories li a:hover ~ .count,
.widget_layered_nav li a:hover ~ .count,
.woocommerce ul.products li.product:not(.product-category) .woo-entry-buttons li a:hover,
a:hover,
a.light:hover,
.theme-heading .text::before,
.theme-heading .text::after,
#top-bar-content > a:hover,
#top-bar-social li.oceanwp-email a:hover,
#site-navigation-wrap .dropdown-menu > li > a:hover,
#site-header.medium-header #medium-searchform button:hover,
.oceanwp-mobile-menu-icon a:hover,
.blog-entry.post .blog-entry-header .entry-title a:hover,
.blog-entry.post .blog-entry-readmore a:hover,
.blog-entry.thumbnail-entry .blog-entry-category a,
ul.meta li a:hover,
.dropcap,
.single nav.post-navigation .nav-links .title,
body .related-post-title a:hover,
body #wp-calendar caption,
body .contact-info-widget.default i,
body .contact-info-widget.big-icons i,
body .custom-links-widget .oceanwp-custom-links li a:hover,
body .custom-links-widget .oceanwp-custom-links li a:hover:before,
body .posts-thumbnails-widget li a:hover,
body .social-widget li.oceanwp-email a:hover,
.comment-author .comment-meta .comment-reply-link,
#respond #cancel-comment-reply-link:hover,
#footer-widgets .footer-box a:hover,
#footer-bottom a:hover,
#footer-bottom #footer-bottom-menu a:hover,
.sidr a:hover,
.sidr-class-dropdown-toggle:hover,
.sidr-class-menu-item-has-children.active > a,
.sidr-class-menu-item-has-children.active > a > .sidr-class-dropdown-toggle {
  color: var(--ppw-warm) !important;
}

/* ================================================================
   2. RED SVG STROKE  ->  orange
   ================================================================ */
.woocommerce .oceanwp-grid-list a.active .owp-icon use,
.woocommerce .oceanwp-grid-list a:hover .owp-icon use,
.single nav.post-navigation .nav-links .title .owp-icon use,
.blog-entry.post .blog-entry-readmore a:hover .owp-icon use,
body .contact-info-widget.default .owp-icon use,
body .contact-info-widget.big-icons .owp-icon use {
  stroke: var(--ppw-warm) !important;
}

/* ================================================================
   3. RED BORDERS  ->  gold   (mirrors OceanWP `border-color:#e2344b`)
   ================================================================ */
.current-shop-items-dropdown,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.wcmenucart-details.count:before,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .product-inner .added_to_cart:hover,
.woocommerce .oceanwp-grid-list a.active,
.woocommerce .oceanwp-grid-list a:hover,
.woocommerce .oceanwp-off-canvas-filter:hover,
.owp-product-nav li a.owp-nav-link:hover,
.widget_shopping_cart_content .buttons .button:first-child:hover,
.widget_shopping_cart ul.cart_list li .owp-grid-wrap .owp-grid a.remove:hover,
.widget_product_categories li a:hover ~ .count,
.woocommerce .widget_product_categories li.current-cat > a ~ .count,
.woocommerce .widget_product_categories li.current-cat > a:before,
.widget_layered_nav li a:hover ~ .count,
.woocommerce .widget_layered_nav li.chosen a ~ .count,
.woocommerce .widget_layered_nav li.chosen a:before,
#owp-checkout-timeline.arrow .active .timeline-wrapper:before,
#owp-checkout-timeline.arrow .active .timeline-wrapper:after,
.bag-style:hover .wcmenucart-cart-icon .wcmenucart-count,
.bag-style:hover .wcmenucart-cart-icon .wcmenucart-count:after,
.show-cart .wcmenucart-cart-icon .wcmenucart-count,
.show-cart .wcmenucart-cart-icon .wcmenucart-count:after,
.woocommerce ul.products li.product:not(.product-category) .woo-product-gallery .active a,
.woocommerce ul.products li.product:not(.product-category) .woo-product-gallery a:hover,
.widget-title,
blockquote,
.wp-block-quote,
#searchform-dropdown,
.dropdown-menu .sub-menu,
.blog-entry.large-entry .blog-entry-readmore a:hover,
.oceanwp-newsletter-form-wrap input[type="email"]:focus,
.social-widget li.oceanwp-email a:hover,
body .contact-info-widget.big-icons li:hover i,
body .contact-info-widget.big-icons li:hover .owp-icon,
#footer-widgets .oceanwp-newsletter-form-wrap input[type="email"]:focus {
  border-color: var(--ppw-gold) !important;
}
#owp-checkout-timeline.arrow .active .timeline-wrapper:before {
  border-top-color: var(--ppw-gold) !important;
  border-bottom-color: var(--ppw-gold) !important;
}
#owp-checkout-timeline.arrow .active .timeline-wrapper:after {
  border-left-color: var(--ppw-gold) !important;
  border-right-color: var(--ppw-gold) !important;
}

/* ================================================================
   4. RED BACKGROUNDS  ->  gold bg + DARK ink text
      (mirrors OceanWP `background-color:#e2344b`)
      Dark ink guarantees readability — never white-on-gold.
   ================================================================ */
.woocommerce div.product div.images .open-image,
.wcmenucart-details.count,
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.owp-product-nav li a.owp-nav-link:hover,
.woocommerce div.product.owp-tabs-layout-vertical .woocommerce-tabs ul.tabs li a:after,
.woocommerce .widget_product_categories li.current-cat > a ~ .count,
.woocommerce .widget_product_categories li.current-cat > a:before,
.woocommerce .widget_layered_nav li.chosen a ~ .count,
.woocommerce .widget_layered_nav li.chosen a:before,
#owp-checkout-timeline .active .timeline-wrapper,
.bag-style:hover .wcmenucart-cart-icon .wcmenucart-count,
.show-cart .wcmenucart-cart-icon .wcmenucart-count,
.woocommerce ul.products li.product:not(.product-category) .image-wrap .button,
.thumbnail:hover i,
.thumbnail:hover .link-post-svg-icon,
.post-quote-content,
.omw-modal .omw-close-modal,
body .contact-info-widget.big-icons li:hover i,
body .contact-info-widget.big-icons li:hover .owp-icon,
#site-navigation-wrap .dropdown-menu > li.btn > a > span {
  background-color: var(--ppw-gold) !important;
  color: var(--ppw-ink) !important;
}

/* ================================================================
   5. BUTTONS  ->  gold pill + dark ink   (the lovable CTA look)
      Color + shape only; padding/display left to the theme so
      no button layout shifts. Was red+white -> gold+ink.
   ================================================================ */
input[type="button"],
input[type="reset"],
input[type="submit"],
button[type="submit"],
body .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce-page .button,
body div.wpforms-container-full .wpforms-form input[type=submit],
body div.wpforms-container-full .wpforms-form button[type=submit],
body div.wpforms-container-full .wpforms-form .wpforms-page-button {
  background-color: var(--ppw-gold) !important;
  color: var(--ppw-ink) !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
body .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
body div.wpforms-container-full .wpforms-form input[type=submit]:hover,
body div.wpforms-container-full .wpforms-form button[type=submit]:hover {
  background-color: var(--ppw-gold-hover) !important;
  color: var(--ppw-ink) !important;
  box-shadow: var(--ppw-shadow-h);
  transform: translateY(-1px);
}

/* ================================================================
   6. MY-ACCOUNT structural fix + cards
      The page is set to Elementor full-width, so OceanWP's
      `.container` max-width wrapper is ABSENT — the login form &
      account menu sprawled edge-to-edge / "outside the structure".
      Re-add a centered 1400px container (matches header/footer/
      breadcrumb) and turn the nav + panels into cards.
   ================================================================ */
.woocommerce-account #main {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.woocommerce-account #main > .woocommerce {
  max-width: 1400px;
  margin: 16px auto 48px;   /* tight above; user dislikes big gaps over titles */
  font-family: var(--ppw-font);
}

/* --- logged-in: nav (left) + content (right) --- */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--ppw-card);
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius);
  box-shadow: var(--ppw-shadow);
  padding: 14px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
  border: none !important;
  margin: 0;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 11px 16px;
  border-radius: 10px;
  color: var(--ppw-text) !important;
  font-weight: 600;
  transition: background-color 140ms ease, color 140ms ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--ppw-bg);
  color: var(--ppw-warm) !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--ppw-gold);
  color: var(--ppw-ink) !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--ppw-card);
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius);
  box-shadow: var(--ppw-shadow);
  padding: 20px 30px 26px;   /* trimmed top so titles sit close to the edge */
}
/* never let the first element (page title) carry its own top margin */
.woocommerce-account .woocommerce-MyAccount-content > *:first-child {
  margin-top: 0 !important;
}

/* --- logged-out: login + register columns as cards --- */
.woocommerce-account #customer_login.col2-set .u-column1,
.woocommerce-account #customer_login.col2-set .u-column2,
.woocommerce-account .woocommerce-ResetPassword.lost_reset_password {
  background: var(--ppw-card);
  border: 1px solid var(--ppw-border);
  border-radius: var(--ppw-radius);
  box-shadow: var(--ppw-shadow);
  padding: 30px 32px;
}
.woocommerce-account form .woocommerce-Input,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"] {
  border: 1px solid var(--ppw-border) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  background: #f7f8fb !important;
}

/* ================================================================
   7. WooCommerce notices — soften to card style (color only;
      keep WC's status semantics: info=gold accent, error=red bar
      stays red so failures remain obvious).
   ================================================================ */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--ppw-gold) !important;
  border-radius: var(--ppw-radius-sm);
}