/* ============================================================================
   Satella Power design layer, 3 September 2026.
   Applies the redesign palette, typography and component styling over
   OceanWP + Elementor + WooCommerce without replacing the theme.
   Remove wp-content/mu-plugins/satella-design.php to revert completely.
   ========================================================================== */

:root{
  --sp-ink:#0e182c;
  --sp-ink-soft:#1c2a45;
  --sp-ground:#f4f2ec;
  --sp-sand:#e6e1d6;
  --sp-card:#fbfaf7;
  --sp-graphite:#4a505a;
  --sp-brass:#b08a52;
  --sp-brass-deep:#8f6c3a;
  --sp-ok:#2f6b4f;
  --sp-display:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sp-serif:"Newsreader",Georgia,serif;
  --sp-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}

/* ---------- typography ---------- */
body,
body.oceanwp-theme,
.woocommerce,
#main,
#site-header,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title{
  font-family:var(--sp-display);
}
body{
  background:var(--sp-ground);
  color:var(--sp-ink);
  font-size:16.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,
.elementor-heading-title,
.entry-title,
.product_title,
.page-header-title,
.woocommerce-loop-product__title,
.widget-title,
.footer-widget-title{
  font-family:var(--sp-display);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.12;
  color:var(--sp-ink);
  text-transform:none;
}
h1,.page-header-title,.product_title{font-size:clamp(28px,3.4vw,44px)}
h2{font-size:clamp(22px,2.4vw,32px)}
h3{font-size:20px}

/* mono for anything numeric */
.price,.amount,.woocommerce-Price-amount,
.sku,.sku_wrapper,
td.product-total,td.product-subtotal,
.order-total .amount{
  font-family:var(--sp-mono);
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}

/* ---------- page furniture ---------- */
#main,#content-wrap,.container{background:transparent}
#wrap{background:var(--sp-ground)}

/* header */
#site-header,
#site-header.transparent-header,
.oceanwp-mobile-menu-icon{
  background:rgba(244,242,236,.94)!important;
  border-bottom:1px solid var(--sp-sand);
  box-shadow:none;
  backdrop-filter:saturate(1.15) blur(8px);
}
#site-header #site-navigation-wrap .dropdown-menu>li>a,
#site-header .oceanwp-mobile-menu-icon a{
  color:var(--sp-graphite)!important;
  font-weight:500;
  font-size:15px;
  letter-spacing:0;
  text-transform:none;
}
#site-header #site-navigation-wrap .dropdown-menu>li>a:hover,
#site-header #site-navigation-wrap .dropdown-menu>li.current-menu-item>a{
  color:var(--sp-ink)!important;
}
#top-bar-wrap{
  background:var(--sp-ink)!important;
  border-bottom:0;
  font-size:13px;
}
#top-bar-wrap,#top-bar-wrap a{color:#c7cdd8!important}
#top-bar-wrap a:hover{color:#fff!important}

/* page header band */
.page-header{
  background:transparent!important;
  border-bottom:1px solid var(--sp-sand);
  padding:26px 0 20px;
}
.page-header-title{color:var(--sp-ink)!important}
.site-breadcrumbs,.site-breadcrumbs a{
  font-family:var(--sp-mono);
  font-size:12px;
  color:var(--sp-graphite);
}

/* ---------- product cards ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.oceanwp-grid li.product{
  background:var(--sp-card);
  border:1px solid var(--sp-sand);
  border-radius:12px;
  padding:16px 16px 18px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(14,24,44,.08);
  border-color:#d8d2c4;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2{
  font-size:17px!important;
  font-weight:600;
  line-height:1.25;
  margin:10px 0 4px;
  color:var(--sp-ink);
  text-transform:none;
  letter-spacing:-.01em;
}
.woocommerce ul.products li.product .price{
  font-size:16px!important;
  color:var(--sp-ink)!important;
  font-weight:500;
}
/* category label above the title */
.woocommerce ul.products li.product .woocommerce-loop-product__link .category,
.woocommerce ul.products li.product .product-cat,
li.product .loop-product-category{
  font-family:var(--sp-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sp-brass-deep);
}

/* ---------- the discount theatre goes ---------- */
/* sale badge removed in PHP; this covers any theme variant that re-adds it */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.owp-badge,.product-label,.woo-entry-image .onsale{
  display:none!important;
}
/* struck-out former prices hidden; PHP also strips them */
.woocommerce .price del,
.woocommerce ul.products li.product .price del{
  display:none!important;
}
.woocommerce .price ins,
.woocommerce ul.products li.product .price ins{
  text-decoration:none!important;
  font-weight:500;
}

/* ---------- buttons ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.elementor-button,
.theme-button,
input[type=submit]{
  background:var(--sp-ink)!important;
  color:#fff!important;
  border:0!important;
  border-radius:7px!important;
  font-family:var(--sp-display)!important;
  font-weight:600!important;
  font-size:14.5px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  padding:12px 20px!important;
  box-shadow:none!important;
  transition:background .18s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.elementor-button:hover,
input[type=submit]:hover{background:var(--sp-ink-soft)!important;color:#fff!important}

/* the one brass action: add to cart on a product page */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  background:var(--sp-brass)!important;
  color:var(--sp-ink)!important;
  font-size:15.5px!important;
  padding:14px 26px!important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{
  background:#c39a5f!important;color:var(--sp-ink)!important;
}

/* ---------- single product ---------- */
.woocommerce div.product .product_title{margin-bottom:8px}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--sp-ink)!important;
  font-size:27px!important;
  font-weight:500;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  border-bottom:1px solid var(--sp-sand);
  padding-left:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--sp-mono);
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sp-graphite)!important;
  font-weight:500;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
  color:var(--sp-ink)!important;
  box-shadow:inset 0 -2px 0 var(--sp-brass);
}
.woocommerce div.product .woocommerce-tabs .panel{
  border:0;padding-top:20px;
}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:22px;margin-bottom:12px}
/* spec lists read as data */
.woocommerce table.shop_attributes{border:1px solid var(--sp-sand);border-radius:10px;overflow:hidden;background:var(--sp-card)}
.woocommerce table.shop_attributes th{
  font-family:var(--sp-mono);font-size:12px;letter-spacing:.04em;
  color:var(--sp-graphite);font-weight:500;background:#f0ede5;
}
.woocommerce table.shop_attributes td{font-style:normal;color:var(--sp-ink)}

/* tables inside guide content */
.entry-content table,.single-post .entry table{
  width:100%;border-collapse:collapse;background:var(--sp-card);
  border:1px solid var(--sp-sand);border-radius:10px;overflow:hidden;
  font-size:14.5px;margin:18px 0 26px;
}
.entry-content table th{
  font-family:var(--sp-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sp-graphite);font-weight:500;
  background:#f0ede5;text-align:left;padding:11px 13px;
}
.entry-content table td{padding:11px 13px;border-top:1px solid var(--sp-sand);vertical-align:top}
.entry-content blockquote{
  border-left:3px solid var(--sp-brass);background:var(--sp-card);
  margin:20px 0;padding:16px 20px;font-family:var(--sp-serif);font-style:italic;
  color:var(--sp-graphite);
}

/* guide article readability */
.single-post .entry-content{font-size:17.5px;line-height:1.62;max-width:76ch}
.single-post .entry-content p{margin-bottom:16px}
.single-post .entry-content h2{margin:34px 0 12px}
.single-post .entry-content a{color:var(--sp-brass-deep);border-bottom:1px solid rgba(176,138,82,.35)}
.single-post .entry-content a:hover{border-bottom-color:var(--sp-brass)}

/* the buy-help block from the schema plugin */
.satella-buy-help{
  font-family:var(--sp-display);
}
.satella-buy-help a{color:var(--sp-brass-deep);border-bottom:1px solid rgba(176,138,82,.4)}

/* category intro copy */
.term-description,.tax-product_cat .archive-description{
  max-width:76ch;font-size:16.5px;line-height:1.6;color:var(--sp-graphite);
  margin-bottom:26px;
}
.term-description a,.archive-description a{color:var(--sp-brass-deep)}

/* ---------- sidebar and widgets ---------- */
#right-sidebar .sidebar-box,#left-sidebar .sidebar-box{
  background:var(--sp-card);border:1px solid var(--sp-sand);
  border-radius:10px;padding:16px 18px;
}
.widget-title{
  font-family:var(--sp-mono)!important;font-size:11.5px!important;
  letter-spacing:.11em!important;text-transform:uppercase!important;
  color:var(--sp-graphite)!important;font-weight:500!important;
}

/* ---------- footer ---------- */
#footer-wrap,#footer-widgets,#footer-bottom{
  background:var(--sp-ink)!important;
  border-top:0;
}
#footer-wrap,#footer-wrap p,#footer-bottom,#footer-bottom p{color:#c7cdd8!important}
#footer-wrap a,#footer-bottom a{color:#c7cdd8!important}
#footer-wrap a:hover,#footer-bottom a:hover{color:var(--sp-brass)!important}
#footer-widgets .footer-widget-title,#footer-wrap .widget-title{
  color:#fff!important;font-family:var(--sp-mono)!important;
  font-size:11.5px!important;letter-spacing:.11em!important;
}
/* tag cloud in the footer was noise */
#footer-widgets .tagcloud a{
  font-size:11px!important;border:1px solid rgba(255,255,255,.16);
  border-radius:4px;padding:3px 8px;margin:0 4px 6px 0;display:inline-block;
}

/* ---------- forms ---------- */
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=search],input[type=password],textarea,select{
  border:1px solid #d4d8e0!important;border-radius:7px!important;
  background:#fff!important;font-family:var(--sp-display)!important;
  font-size:15px!important;padding:11px 13px!important;color:var(--sp-ink)!important;
}
input:focus,textarea:focus,select:focus{
  outline:2px solid var(--sp-brass)!important;outline-offset:1px;border-color:var(--sp-brass)!important;
}

/* ---------- accessibility floor ---------- */
a:focus-visible,button:focus-visible,
.woocommerce a.button:focus-visible{
  outline:2px solid var(--sp-brass)!important;outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .woocommerce ul.products li.product:hover{transform:none}
}

/* ---------- mobile ---------- */
@media (max-width:767px){
  body{font-size:16px}
  .woocommerce ul.products li.product{padding:14px}
  .woocommerce div.product p.price,.woocommerce div.product span.price{font-size:23px!important}
  .single-post .entry-content{font-size:17px}
}

/* ============================================================================
   Corrections found in live verification, 3 September 2026.
   ========================================================================== */

/* Affirm's loop widget renders a bare "-" until its script prices the item,
   which put a stray dash above every card. It stays on the product page,
   where it resolves, and comes off the listing. */
.woocommerce ul.products li.product .affirm-as-low-as,
li.product .affirm-as-low-as{display:none!important}

/* Price colour: the sale price inherited the theme's green. One ink price. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price ins bdi,
.woocommerce ul.products li.product .price > .amount,
.woocommerce ul.products li.product .price bdi,
.woocommerce div.product p.price,
.woocommerce div.product p.price ins,
.woocommerce div.product p.price ins .amount,
.woocommerce div.product p.price ins bdi,
.woocommerce div.product p.price bdi,
.woocommerce div.product span.price ins bdi{
  color:var(--sp-ink)!important;
}

/* Strike-through pricing also survived in the sidebar and footer widgets. */
.product_list_widget del,
.widget_products del,
.widget_top_rated_products del,
.widget_recently_viewed_products del,
.wc-block-grid__product del,
li.product .price del,
.woocommerce .price del{display:none!important}
.product_list_widget ins,
.widget_products ins,
.widget_top_rated_products ins{text-decoration:none!important}
.product_list_widget .amount,
.widget_top_rated_products .amount{
  font-family:var(--sp-mono);color:var(--sp-ink);
}

/* Single guides printed their title twice: once in the page header band and
   again as the entry title. The band keeps the H1, the duplicate comes off. */
.single-post .entry-title,
.single-post .entry-header h1.entry-title,
.single-post header.entry-header{display:none!important}
.single-post .page-header{padding:30px 0 22px}
.single-post .page-header-title{max-width:24ch}

/* Guide sidebar: archives and category widgets are noise beside an article. */
.single-post #right-sidebar .widget_archive,
.single-post #right-sidebar .widget_categories,
.single-post #left-sidebar .widget_archive,
.single-post #left-sidebar .widget_categories{display:none!important}

/* Product loop: the category eyebrow above the title, set in the brand type. */
.woocommerce ul.products li.product li.category,
.woocommerce ul.products li.product .category a{
  font-family:var(--sp-mono)!important;
  font-size:10.5px!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  color:var(--sp-brass-deep)!important;
  font-style:normal!important;
}

/* Loop description was running long and uneven. */
.woocommerce ul.products li.product .woo-desc{
  font-size:13.5px;color:var(--sp-graphite);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}