/*
Theme Name: Selectify Plus — Pro
Theme URI: https://selectifyplus.com
Description: Custom Storefront child theme matching the Selectify+ 2026 redesign — SELECTIFY+ wordmark, white nav, cobalt accents, Fraunces + Libre Franklin type, and a bespoke homepage (hero, trust strip, category tiles, featured products, band, newsletter). Reversible: reactivate Storefront to restore the previous look.
Author: Selectify+
Template: storefront
Version: 1.0.4
Text Domain: selectify-pro
*/

/* Hero visual as a product link (clickable). */
a.sp-hero-visual{display:block;text-decoration:none;cursor:pointer;color:inherit;}
a.sp-hero-visual:hover .sp-badge{transform:translateY(-2px);}

:root{
  --sp-ink:#0B0B0C; --sp-ink-2:#2A2A2C; --sp-muted:#6E6E72; --sp-faint:#9A9A9E;
  --sp-paper:#FFFFFF; --sp-sand:#F5F3EF; --sp-sand-2:#EDEAE3; --sp-line:#E6E3DC; --sp-line-2:#D8D4CB;
  --sp-accent:#2E5BDA; --sp-accent-ink:#1E3FA0; --sp-accent-tint:#EAF0FF; --sp-signal:#1F7A4D;
  --sp-display:"Fraunces", Georgia, "Times New Roman", serif;
  --sp-sans:"Libre Franklin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sp-radius:14px; --sp-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base type & colour ---------- */
body, button, input, select, textarea, .site-title, p, li, td, th{ font-family:var(--sp-sans); letter-spacing:-.01em; }
body{ color:var(--sp-ink-2); background:var(--sp-paper); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6{ font-family:var(--sp-sans); color:var(--sp-ink); letter-spacing:-.02em; font-weight:600; }
.entry-title,.page-title,h1.entry-title,.single-product .product_title,.hentry .entry-title{ font-family:var(--sp-display); font-weight:500; letter-spacing:-.025em; line-height:1.05; }
a{ color:var(--sp-accent); transition:color .18s var(--sp-ease); }
a:hover{ color:var(--sp-accent-ink); }

/* ---------- Header + wordmark ---------- */
.site-header{ background:rgba(255,255,255,.92)!important; border-bottom:1px solid var(--sp-line); -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px); padding-top:1.1em; padding-bottom:1.1em; }
.site-header, .site-header a{ color:var(--sp-ink)!important; }
.sp-branding{ margin:0; }
.sp-wordmark{ display:inline-flex; align-items:baseline; gap:3px; text-decoration:none; font-family:var(--sp-sans); font-weight:700; font-size:30px; letter-spacing:-.03em; line-height:1; color:var(--sp-ink)!important; }
.sp-wordmark .sp-word{ color:var(--sp-ink); }
.sp-wordmark .sp-plus{ display:inline-grid; place-items:center; width:28px; height:28px; background:var(--sp-accent); color:#fff; border-radius:7px; font-size:21px; font-weight:700; transform:translateY(3px); transition:transform .25s var(--sp-ease); }
.sp-wordmark:hover .sp-plus{ transform:translateY(3px) rotate(90deg); }

/* ---------- Nav (Storefront + Max Mega Menu) -> white ---------- */
.main-navigation,.storefront-primary-navigation,.main-navigation ul,.main-navigation ul.menu,.main-navigation ul.nav-menu,.secondary-navigation ul.menu{ background-color:#fff!important; }
.site-header .main-navigation{ background:#fff!important; }
.main-navigation ul li a,.storefront-primary-navigation a,.secondary-navigation ul.menu a{ color:var(--sp-ink-2)!important; font-weight:500; }
.main-navigation ul li a:hover,.main-navigation ul li.current-menu-item>a{ color:var(--sp-accent)!important; }
.mega-menu-wrap,.mega-menu-wrap .mega-menu,#mega-menu-wrap-primary,#mega-menu-wrap-primary .mega-menu,.max-mega-menu{ background:#fff!important; box-shadow:none!important; }
#mega-menu-wrap-primary{ border-top:1px solid var(--sp-line); border-bottom:1px solid var(--sp-line); }
.mega-menu-wrap .mega-menu-link,#mega-menu-primary .mega-menu-link{ color:var(--sp-ink-2)!important; font-weight:500!important; text-transform:none!important; }
#mega-menu-primary>li.mega-menu-item:hover>a.mega-menu-link,#mega-menu-primary>li.mega-current-menu-item>a.mega-menu-link,#mega-menu-primary>li.mega-menu-item>a.mega-menu-link:hover{ color:var(--sp-accent)!important; background:transparent!important; }
.mega-menu-wrap .mega-sub-menu{ background:#fff!important; border:1px solid var(--sp-line)!important; }
.mega-menu-wrap .mega-sub-menu .mega-menu-link{ color:var(--sp-ink-2)!important; }
.site-header-cart .count{ background:var(--sp-accent); color:#fff; }

/* ---------- Buttons ---------- */
button, input[type="button"], input[type="reset"], input[type="submit"],
.button, .added_to_cart, .wc-block-components-button,
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce .widget_price_filter .button{
  background-color:var(--sp-accent)!important; color:#fff!important; border:1px solid var(--sp-accent)!important;
  border-radius:999px!important; font-weight:600; letter-spacing:-.01em; padding:.72em 1.5em; text-shadow:none;
  transition:background-color .2s var(--sp-ease), box-shadow .2s var(--sp-ease), transform .15s var(--sp-ease);
}
button:hover, .button:hover, .added_to_cart:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{
  background-color:var(--sp-accent-ink)!important; border-color:var(--sp-accent-ink)!important;
  box-shadow:0 12px 30px -12px rgba(46,91,218,.5); transform:translateY(-1px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .single_add_to_cart_button{ background-color:var(--sp-accent)!important; border-color:var(--sp-accent)!important; }
.woocommerce .button.wc-backward{ background:transparent!important; color:var(--sp-ink)!important; border-color:var(--sp-line-2)!important; }

/* ---------- Product cards (shop loop) ---------- */
ul.products li.product{ text-align:left; }
ul.products li.product a img, .woocommerce ul.products li.product a img{ border-radius:var(--sp-radius); border:1px solid var(--sp-line); background:var(--sp-sand); margin-bottom:1em; transition:transform .5s var(--sp-ease); }
ul.products li.product:hover a img{ transform:scale(1.025); }
ul.products li.product .woocommerce-loop-product__title{ font-family:var(--sp-sans); font-weight:600; font-size:1em; color:var(--sp-ink); padding:0; }
ul.products li.product .price{ color:var(--sp-ink)!important; font-weight:600; font-size:1em; }
ul.products li.product .price del{ color:var(--sp-faint); font-weight:400; }
.woocommerce span.onsale{ background:var(--sp-ink); color:#fff; border-radius:999px; padding:.35em .8em; font-size:.72em; font-weight:700; top:12px; left:12px; right:auto; margin:0; min-height:auto; min-width:auto; }
.star-rating span{ color:var(--sp-ink); }

/* ---------- Single product ---------- */
.single-product div.product .product_title{ font-size:2.2em; margin-bottom:.3em; }
.single-product div.product p.price, .single-product div.product span.price{ color:var(--sp-ink)!important; font-weight:600; }
.single-product .woocommerce-product-gallery__image img, .woocommerce-product-gallery__wrapper img{ border-radius:16px; border:1px solid var(--sp-line); }
.single-product .woocommerce-product-gallery .flex-control-thumbs li img{ border-radius:10px; border:1px solid var(--sp-line); }
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active{ border-color:var(--sp-accent); opacity:1; }
.woocommerce div.product form.cart .variations select{ border:1px solid var(--sp-line-2); border-radius:10px; padding:.6em .8em; background:var(--sp-paper); }
.stock.in-stock{ color:var(--sp-signal)!important; font-weight:600; }
.woocommerce-tabs ul.tabs li.active{ border-bottom-color:var(--sp-accent); }
.quantity .qty{ border:1px solid var(--sp-line-2); border-radius:999px; padding:.5em; }

/* ---------- Cart & checkout ---------- */
.woocommerce table.shop_table{ border-radius:14px; border-color:var(--sp-line); }
.cart_totals, .woocommerce-checkout #order_review{ background:var(--sp-sand); border:1px solid var(--sp-line); border-radius:16px; padding:1.2em 1.4em; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout .form-row select{ border:1px solid var(--sp-line-2)!important; border-radius:11px!important; padding:.7em .9em; min-height:48px; }
.woocommerce form .form-row input.input-text:focus{ border-color:var(--sp-accent)!important; box-shadow:0 0 0 3px var(--sp-accent-tint); outline:none; }
#payment{ background:var(--sp-sand); border-radius:14px; }
.woocommerce-info, .woocommerce-message{ border-top-color:var(--sp-accent); }

/* ---------- Footer / misc ---------- */
.site-footer{ background:var(--sp-paper); color:var(--sp-muted); border-top:1px solid var(--sp-line); }
.site-footer a{ color:var(--sp-ink-2); } .site-footer a:hover{ color:var(--sp-accent); }
mark, .woocommerce-store-notice{ background:var(--sp-accent); color:#fff; }
::selection{ background:var(--sp-accent); color:#fff; }
img.wp-post-image{ border-radius:var(--sp-radius); }

/* ================================================================
   HOMEPAGE (front-page.php) — full-bleed custom sections
   ================================================================ */
.sp-home .site-content .col-full{ max-width:none!important; padding-left:0!important; padding-right:0!important; width:100%!important; }
.sp-home #content{ padding-top:0; }
.sp-home-root{ color:var(--sp-ink-2); }
.sp-wrap{ max-width:1240px; margin:0 auto; padding:0 28px; }
.sp-display{ font-family:var(--sp-display); font-weight:500; letter-spacing:-.028em; line-height:1.0; color:var(--sp-ink); }
.sp-kicker{ font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--sp-accent); font-weight:700; }
.sp-kicker--light{ color:rgba(255,255,255,.6); }
.sp-sub{ font-size:18px; color:var(--sp-muted); line-height:1.6; }
.sp-btn{ display:inline-flex; align-items:center; gap:10px; height:50px; padding:0 24px; border-radius:999px; font-size:14px; font-weight:600; border:1px solid var(--sp-accent); text-decoration:none; transition:transform .2s var(--sp-ease), box-shadow .25s var(--sp-ease), background .25s var(--sp-ease); }
.sp-btn span{ transition:transform .25s var(--sp-ease); }
.sp-btn:hover span{ transform:translateX(4px); }
.sp-btn-primary{ background:var(--sp-accent); color:#fff!important; }
.sp-btn-primary:hover{ background:var(--sp-accent-ink); box-shadow:0 12px 30px -10px rgba(46,91,218,.5); }
.sp-btn-ghost{ background:transparent; color:var(--sp-ink)!important; border-color:var(--sp-line-2); }
.sp-btn-ghost:hover{ background:var(--sp-sand); border-color:var(--sp-ink); }
.sp-btn-light{ background:#fff; color:var(--sp-ink)!important; border-color:#fff; }

/* hero */
.sp-hero{ background:var(--sp-paper); }
.sp-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-top:72px; padding-bottom:64px; }
.sp-hero h1{ font-size:clamp(44px,6.6vw,92px); margin:22px 0 24px; font-weight:600; letter-spacing:-.035em; }
.sp-hero h1 .sp-italic{ font-family:var(--sp-display); font-weight:400; font-style:italic; color:var(--sp-accent); margin-right:.26em; }
.sp-hero .sp-sub{ max-width:460px; margin-bottom:34px; }
.sp-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.sp-hero-visual{ position:relative; aspect-ratio:1/1; border-radius:24px; background:radial-gradient(120% 120% at 70% 10%, #fff 0%, var(--sp-sand) 55%, var(--sp-sand-2) 100%); border:1px solid var(--sp-line); overflow:hidden; }
.sp-ring{ position:absolute; inset:0; background:repeating-radial-gradient(circle at 60% 55%, transparent 0 38px, rgba(11,11,12,.035) 38px 39px); }
.sp-orb{ position:absolute; left:50%; top:46%; width:46%; height:46%; transform:translate(-50%,-50%); border-radius:50%; background:var(--sp-accent); box-shadow:inset -18px -22px 40px rgba(0,0,0,.18), 0 30px 60px -20px rgba(46,91,218,.5); }
.sp-badge{ position:absolute; left:22px; bottom:22px; background:#fff; border:1px solid var(--sp-line); border-radius:12px; padding:12px 16px; font-size:12.5px; font-weight:600; color:var(--sp-ink); display:inline-flex; gap:10px; align-items:center; box-shadow:0 14px 40px -24px rgba(0,0,0,.35); }
.sp-dot{ width:8px; height:8px; border-radius:999px; background:var(--sp-signal); box-shadow:0 0 0 4px rgba(31,122,77,.14); }

/* trust */
.sp-trust{ border-top:1px solid var(--sp-line); border-bottom:1px solid var(--sp-line); background:var(--sp-sand); }
.sp-trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.sp-t{ padding:22px 24px; border-right:1px solid var(--sp-line); }
.sp-t:last-child{ border-right:0; }
.sp-t b{ display:block; font-size:14px; color:var(--sp-ink); margin-bottom:3px; }
.sp-t span{ font-size:12.5px; color:var(--sp-muted); line-height:1.45; }

/* sections */
.sp-section{ padding:84px 0; }
.sp-section--tight{ padding-top:0; }
.sp-sec-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:34px; gap:24px; }
.sp-h2{ font-size:clamp(28px,3.6vw,44px); }
.sp-h2--light{ color:#fff; }
.sp-link{ font-size:14px; font-weight:600; white-space:nowrap; text-decoration:none; }
.sp-cats{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.sp-cat{ position:relative; border-radius:var(--sp-radius); overflow:hidden; border:1px solid var(--sp-line); aspect-ratio:16/10; display:block; text-decoration:none; background:var(--sp-sand); }
.sp-cat-img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .7s var(--sp-ease); }
.sp-cat:hover .sp-cat-img{ transform:scale(1.05); }
.sp-cat-meta{ position:absolute; left:0; right:0; bottom:0; padding:22px; display:flex; justify-content:space-between; align-items:flex-end; background:linear-gradient(to top,rgba(0,0,0,.46),transparent); color:#fff; }
.sp-cat-meta b{ color:#fff; font-size:21px; font-weight:600; }
.sp-cat-meta em{ font-size:12px; opacity:.85; font-style:normal; }

/* product grid */
.sp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sp-card{ display:flex; flex-direction:column; text-decoration:none; }
.sp-card-thumb{ position:relative; border-radius:var(--sp-radius); overflow:hidden; background:radial-gradient(130% 120% at 72% 12%, #fff 0%, var(--sp-sand) 58%, var(--sp-accent-tint) 150%); border:1px solid var(--sp-line); aspect-ratio:1/1; display:grid; place-items:center; }
.sp-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--sp-ease); }
.sp-card:hover .sp-card-thumb img{ transform:scale(1.05); }
.sp-card-name{ font-size:14.5px; font-weight:600; color:var(--sp-ink); margin:14px 0 3px; }
.sp-card-price{ font-size:15px; font-weight:600; color:var(--sp-ink); }
.sp-card-price del{ color:var(--sp-faint); font-weight:400; margin-left:6px; }

/* band */
.sp-band{ background:var(--sp-ink); color:#fff; border-radius:28px; overflow:hidden; position:relative; }
.sp-band-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:60px; }
.sp-band-p{ color:rgba(255,255,255,.72); max-width:440px; margin:18px 0 28px; font-size:16px; }
.sp-stats{ display:flex; gap:40px; margin-top:30px; }
.sp-stats b{ font-family:var(--sp-display); font-weight:400; font-size:40px; display:block; line-height:1; color:#fff; }
.sp-stats span{ font-size:12.5px; color:rgba(255,255,255,.6); }
.sp-band-visual{ display:grid; place-items:center; }
.sp-orb--light{ position:relative; left:auto; top:auto; transform:none; width:230px; height:230px; background:linear-gradient(145deg,#2E5BDA,#1E3FA0); box-shadow:inset -18px -22px 50px rgba(0,0,0,.3); }

/* newsletter */
.sp-news{ background:var(--sp-sand); border-top:1px solid var(--sp-line); }
.sp-news-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding-top:60px; padding-bottom:60px; }
.sp-news-form{ display:flex; gap:10px; max-width:440px; margin-left:auto; width:100%; }
.sp-news-form input{ flex:1; height:54px; border:1px solid var(--sp-line-2); border-radius:999px; padding:0 20px; font-size:14px; font-family:inherit; background:#fff; outline:none; }
.sp-news-form input:focus{ border-color:var(--sp-accent); box-shadow:0 0 0 3px var(--sp-accent-tint); }

/* responsive */
@media(max-width:980px){
  .sp-hero-grid{ grid-template-columns:1fr; gap:30px; padding-top:48px; padding-bottom:48px; }
  .sp-hero-visual{ max-width:460px; }
  .sp-band-inner{ grid-template-columns:1fr; padding:40px; }
  .sp-grid{ grid-template-columns:1fr 1fr; }
  .sp-news-grid{ grid-template-columns:1fr; } .sp-news-form{ margin-left:0; }
  .sp-trust-grid{ grid-template-columns:1fr 1fr; } .sp-t:nth-child(2){ border-right:0; }
}
@media(max-width:640px){
  .sp-cats{ grid-template-columns:1fr; } .sp-grid{ grid-template-columns:1fr 1fr; }
  .sp-trust-grid{ grid-template-columns:1fr; } .sp-t{ border-right:0; border-bottom:1px solid var(--sp-line); }
  .sp-sec-head{ flex-direction:column; align-items:flex-start; }
}
/* ================================================================
   SOFT-OPENING MARQUEE
   ================================================================ */
.sp-marquee{ background:var(--sp-ink); color:#fff; overflow:hidden; white-space:nowrap; position:relative; z-index:50; border-bottom:1px solid rgba(255,255,255,.12); }
.sp-marquee-track{ display:inline-flex; align-items:center; gap:0; padding:9px 0; animation:sp-marq 28s linear infinite; will-change:transform; }
.sp-marq-item{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:0 18px; }
.sp-marq-dot{ color:var(--sp-accent); font-size:12px; }
@keyframes sp-marq{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
.sp-marquee:hover .sp-marquee-track{ animation-play-state:paused; }
@media(prefers-reduced-motion:reduce){ .sp-marquee-track{ animation:none; justify-content:center; width:100%; } .sp-marquee-track .sp-marq-item:nth-child(n+5){ display:none; } }

/* ================================================================
   TRUST STRIP — icons
   ================================================================ */
.sp-home .sp-trust .sp-t{ display:flex; gap:13px; align-items:flex-start; }
.sp-home .sp-trust .sp-t b::before{ content:none !important; }  /* replace the dot marker with real icons */
.sp-home .sp-trust .sp-t b{ padding-left:0 !important; }
.sp-t-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:var(--sp-paper); border:1px solid var(--sp-line); display:grid; place-items:center; color:var(--sp-accent); }
.sp-t-ic svg{ width:18px; height:18px; }
.sp-t-tx{ display:flex; flex-direction:column; }

/* ================================================================
   SINGLE-ROW HEADER (desktop)
   ================================================================ */
@media(min-width:992px){
  .site-header .col-full{ display:flex; align-items:center; column-gap:30px; flex-wrap:nowrap; }
  .site-header .site-branding{ flex:0 0 auto; margin:0 !important; width:auto !important; }
  .site-header .site-search, .site-header .widget_product_search{ order:4; flex:0 0 auto; width:240px; margin:0 !important; }
  .site-header .storefront-primary-navigation, .site-header .main-navigation{ order:2; flex:1 1 auto; margin:0 !important; width:auto !important; }
  .site-header .site-header-cart{ order:5; flex:0 0 auto; margin:0 !important; }
  #mega-menu-wrap-primary{ border:0 !important; }
  .site-header .storefront-primary-navigation ul.menu, #mega-menu-primary{ justify-content:flex-start; }
}

/* ================================================================
   CART & CHECKOUT — closer to the mockup
   ================================================================ */
.woocommerce-cart .cart-collaterals .cart_totals>h2, .woocommerce-checkout #order_review_heading{ font-family:var(--sp-display); font-weight:500; font-size:1.4em; }
.woocommerce-cart table.cart td.product-name a{ font-weight:600; color:var(--sp-ink); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout #order_review{ box-shadow:0 20px 50px -34px rgba(0,0,0,.4); }
.woocommerce #payment #place_order, .woocommerce-checkout .wc-block-components-checkout-place-order-button{ width:100%; height:56px; font-size:15px; }
.woocommerce form.checkout h3{ font-family:var(--sp-display); font-weight:500; letter-spacing:-.01em; }
.woocommerce .quantity input.qty{ text-align:center; }

@media(prefers-reduced-motion:reduce){ *{ transition-duration:.01ms!important; } }