/*
Theme Name: CodeSmade
Theme URI: https://codesmade.com
Author: CodeSmade
Author URI: https://codesmade.com
Description: Dark, developer-focused WooCommerce theme for selling WordPress plugins. Built on Bootstrap 5.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: codesmade
Tags: e-commerce, dark, custom-menu, featured-images, woocommerce
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  /* Color */
  --cs-bg:        #F7F9FC;   /* page background */
  --cs-surface:   #FFFFFF;   /* card / panel background */
  --cs-surface-2: #F1F4F9;   /* elevated panel (hover, header) */
  --cs-border:    #E3E8F0;
  --cs-text:      #121826;
  --cs-text-dim:  #667085;
  --cs-accent:    #0EA5A0;   /* teal — matches the </> mark */
  --cs-accent-2:  #6D4CEB;   /* violet — secondary / badges */
  --cs-accent-3:  #E08A00;   /* amber — ratings / highlights */
  --cs-danger:    #E23D3D;

  /* Type */
  --cs-font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --cs-font-body: 'Inter', 'Segoe UI', sans-serif;
  --cs-font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Layout */
  --cs-radius: 10px;
  --cs-radius-sm: 6px;
  --cs-shadow: 0 8px 30px rgba(18,24,38,0.08);
}

/* ==========================================================================
   Base
   ========================================================================== */
html{ scroll-behavior:smooth; }
body{
  background:var(--cs-bg);
  color:var(--cs-text);
  font-family:var(--cs-font-body);
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3,h4,h5,h6,
.cs-font-display{
  font-family:var(--cs-font-display);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--cs-text);
}
a{ color:var(--cs-accent); text-decoration:none; }
a:hover{ color:#5be8d6; }
code, .cs-mono{ font-family:var(--cs-font-mono); }
::selection{ background:var(--cs-accent); color:#FFFFFF; }

img{ max-width:100%; height:auto; }

.cs-container{ max-width:1200px; }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cs-accent);
  outline-offset:2px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.cs-header{
  background:rgba(247,249,252,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--cs-border);
  position:sticky;
  top:0;
  z-index:1000;
}
.cs-logo{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--cs-font-display);
  font-weight:700;
  font-size:1.25rem;
  color:var(--cs-text);
}
.cs-logo img{ height:32px; width:auto; display:block; }
.cs-logo .cs-tag{ color:var(--cs-accent); font-family:var(--cs-font-mono); }

.cs-nav .nav-link{
  color:var(--cs-text-dim);
  font-weight:500;
  padding:.5rem 1rem;
}
.cs-nav .nav-link:hover,
.cs-nav .nav-link.active{ color:var(--cs-text); }

.cs-nav-icon-btn{
  color:var(--cs-text-dim);
  position:relative;
  padding:.4rem .6rem;
}
.cs-nav-icon-btn:hover{ color:var(--cs-accent); }

.cs-dropdown-menu{
  background:var(--cs-surface);
  border:1px solid var(--cs-border);
  border-radius:var(--cs-radius-sm);
  box-shadow:var(--cs-shadow);
  padding:.5rem;
  min-width:14rem;
}
.cs-dropdown-menu .nav-link{
  color:var(--cs-text-dim);
  padding:.5rem .75rem;
  border-radius:var(--cs-radius-sm);
  display:block;
}
.cs-dropdown-menu .nav-link:hover{
  color:var(--cs-text);
  background:var(--cs-surface-2);
}
@media (max-width: 991.98px){
  .cs-dropdown-menu{
    background:transparent;
    border:none;
    box-shadow:none;
    padding-left:1rem;
  }
}
.cs-cart-count{
  position:absolute;
  top:-2px; right:-2px;
  background:var(--cs-accent-2);
  color:#fff;
  font-size:.65rem;
  line-height:1;
  padding:.25em .4em;
  border-radius:999px;
  font-family:var(--cs-font-mono);
}

/* ==========================================================================
   Hero — signature "terminal" element
   ========================================================================== */
.cs-hero{
  padding:5.5rem 0 4.5rem;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(600px 300px at 85% -10%, rgba(14,165,160,0.14), transparent 60%),
    radial-gradient(500px 260px at -5% 110%, rgba(109,76,235,0.12), transparent 60%);
}
.cs-hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--cs-font-mono);
  font-size:.8rem;
  color:var(--cs-accent);
  background:rgba(14,165,160,0.08);
  border:1px solid rgba(14,165,160,0.3);
  padding:.35rem .75rem;
  border-radius:999px;
  margin-bottom:1.25rem;
}
.cs-hero-eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--cs-accent);
  box-shadow:0 0 0 3px rgba(14,165,160,0.2);
}
.cs-hero h1{
  font-size:clamp(2.1rem, 4vw, 3.25rem);
  line-height:1.1;
  margin-bottom:1.25rem;
}
.cs-hero h1 .grad{
  background:linear-gradient(90deg,var(--cs-accent),var(--cs-accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cs-hero p.lead{ color:var(--cs-text-dim); font-size:1.1rem; max-width:34rem; }
.cs-hero-stats{ display:flex; gap:2rem; margin-top:2rem; }
.cs-hero-stats .num{ font-family:var(--cs-font-display); font-size:1.5rem; font-weight:700; color:var(--cs-text); }
.cs-hero-stats .lbl{ font-size:.8rem; color:var(--cs-text-dim); }

/* Terminal window */
.cs-terminal{
  background:#0F1420;
  border:1px solid #232B3D;
  border-radius:var(--cs-radius);
  box-shadow:var(--cs-shadow);
  overflow:hidden;
}
.cs-terminal-bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.65rem .9rem;
  background:#171D2B;
  border-bottom:1px solid #232B3D;
}
.cs-terminal-bar span{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.cs-terminal-bar span:nth-child(1){ background:#FF5F56; }
.cs-terminal-bar span:nth-child(2){ background:#FFBD2E; }
.cs-terminal-bar span:nth-child(3){ background:#27C93F; }
.cs-terminal-title{
  margin-left:.5rem; font-family:var(--cs-font-mono); font-size:.75rem; color:#8A93A8;
}
.cs-terminal-body{
  padding:1.25rem 1.4rem 1.5rem;
  font-family:var(--cs-font-mono);
  font-size:.88rem;
  min-height:220px;
  color:#C7CEDC;
}
.cs-terminal-body .line{ margin-bottom:.5rem; white-space:pre-wrap; }
.cs-terminal-body .prompt{ color:#5be8d6; }
.cs-terminal-body .path{ color:#b7a6ff; }
.cs-terminal-body .ok{ color:#27C93F; }
.cs-terminal-body .out{ color:#8A93A8; }
.cs-caret{
  display:inline-block; width:8px; height:1.1em; background:var(--cs-accent);
  vertical-align:text-bottom; animation:cs-blink 1s step-end infinite;
}
@keyframes cs-blink{ 50%{ opacity:0; } }

/* ==========================================================================
   Section headings
   ========================================================================== */
.cs-section{ padding:4rem 0; }
.cs-section-head{ margin-bottom:2.25rem; }
.cs-section-head .kicker{
  font-family:var(--cs-font-mono);
  color:var(--cs-accent);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.cs-section-head h2{ font-size:1.9rem; margin-top:.35rem; }
.cs-section-head p{ color:var(--cs-text-dim); max-width:38rem; }

/* ==========================================================================
   Product / plugin cards
   ========================================================================== */
.cs-card{
  background:var(--cs-surface);
  border:1px solid var(--cs-border);
  border-radius:var(--cs-radius);
  overflow:hidden;
  height:100%;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cs-card:hover{
  transform:translateY(-4px);
  border-color:rgba(14,165,160,0.4);
  box-shadow:var(--cs-shadow);
}
.cs-card-media{
  aspect-ratio:16/10;
  background:var(--cs-surface-2);
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--cs-border);
  overflow:hidden;
  position:relative;
}
.cs-card-media img{ width:100%; height:100%; object-fit:cover; }
.cs-badge{
  position:absolute; top:.65rem; left:.65rem;
  font-family:var(--cs-font-mono);
  font-size:.7rem;
  padding:.25em .55em;
  border-radius:5px;
  background:rgba(109,76,235,0.15);
  color:#b7a6ff;
  border:1px solid rgba(109,76,235,0.35);
}
.cs-card-body{ padding:1.1rem 1.2rem 1.3rem; }
.cs-card-cat{ font-family:var(--cs-font-mono); font-size:.72rem; color:var(--cs-text-dim); text-transform:uppercase; letter-spacing:.06em; }
.cs-card-title{ font-size:1.05rem; margin:.35rem 0 .5rem; }
.cs-card-title a{ color:var(--cs-text); }
.cs-card-title a:hover{ color:var(--cs-accent); }
.cs-card-excerpt{ color:var(--cs-text-dim); font-size:.88rem; margin-bottom:.85rem; }
.cs-card-foot{ display:flex; align-items:center; justify-content:space-between; }
.cs-price{ font-family:var(--cs-font-mono); font-weight:600; color:var(--cs-text); }
.cs-price del{ color:var(--cs-text-dim); font-weight:400; margin-right:.35rem; }
.cs-price ins{ text-decoration:none; }
.cs-rating{ color:var(--cs-accent-3); font-size:.8rem; }

/* Buttons */
.btn-cs{
  font-family:var(--cs-font-mono);
  font-weight:600;
  font-size:.85rem;
  border-radius:var(--cs-radius-sm);
  padding:.55rem 1.1rem;
  border:1px solid transparent;
  transition:all .15s ease;
}
.btn-cs-primary{ background:var(--cs-accent); color:#FFFFFF; }
.btn-cs-primary:hover{ background:#5be8d6; color:#FFFFFF; }
.btn-cs-outline{ background:transparent; color:var(--cs-text); border-color:var(--cs-border); }
.btn-cs-outline:hover{ border-color:var(--cs-accent); color:var(--cs-accent); }

/* WooCommerce button remap */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit{
  font-family:var(--cs-font-mono) !important;
  background:var(--cs-accent) !important;
  color:#FFFFFF !important;
  border:none !important;
  border-radius:var(--cs-radius-sm) !important;
  font-weight:600 !important;
  padding:.6rem 1.1rem !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  background:#5be8d6 !important; color:#FFFFFF !important;
}
.woocommerce span.onsale{
  background:var(--cs-accent-2) !important;
  font-family:var(--cs-font-mono);
  border-radius:5px;
  top:.65rem; left:.65rem; right:auto;
}
.woocommerce ul.products li.product{ background:transparent; }
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--cs-text); }
.woocommerce nav.woocommerce-pagination ul{ border:none; }
.woocommerce nav.woocommerce-pagination ul li{ border:none; background:transparent; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  background:var(--cs-surface); color:var(--cs-text); border:1px solid var(--cs-border);
  border-radius:var(--cs-radius-sm); margin:0 .2rem;
}
.woocommerce div.product form.cart, .woocommerce-page div.product form.cart{ margin-bottom:1.5rem; }
.woocommerce table.shop_table{ border:1px solid var(--cs-border); background:var(--cs-surface); }
.woocommerce table.shop_table th{ background:var(--cs-surface-2); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th{ border-color:var(--cs-border); }
.woocommerce-checkout input, .woocommerce-checkout select, .woocommerce-checkout textarea,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea{
  background:var(--cs-surface); border:1px solid var(--cs-border); color:var(--cs-text);
  border-radius:var(--cs-radius-sm);
  padding:.6rem .8rem;
  width:100%;
}
.select2-container--default .select2-selection--single{
  background:var(--cs-surface); border:1px solid var(--cs-border); color:var(--cs-text);
  border-radius:var(--cs-radius-sm) !important;
  height:calc(2.5rem + 2px) !important;
  display:flex; align-items:center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--cs-text); line-height:normal; }
.select2-dropdown{ background:var(--cs-surface); border-color:var(--cs-border); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--cs-accent); color:#fff; }

/* ==========================================================================
   Checkout page
   ========================================================================== */
.cs-checkout-grid{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  align-items:flex-start;
}
.cs-checkout-col-main{
  flex:1 1 480px;
  min-width:0;
}
.cs-checkout-col-side{
  flex:1 1 360px;
  min-width:0;
  position:sticky;
  top:5.5rem;
}
.woocommerce-checkout .col2-set{ display:block; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2{
  width:100%;
  float:none;
}
.woocommerce-checkout h3{ font-size:1.15rem; margin:0 0 1.1rem; }
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields{
  background:var(--cs-surface);
  border:1px solid var(--cs-border);
  border-radius:var(--cs-radius);
  padding:1.5rem;
  margin-bottom:1.5rem;
}
.woocommerce-checkout .form-row{ margin-bottom:1rem; }
.woocommerce-checkout .form-row label{
  display:block; margin-bottom:.4rem; font-size:.85rem; color:var(--cs-text-dim);
}
.woocommerce-checkout .form-row .required{ color:var(--cs-danger); text-decoration:none; }
.woocommerce-checkout-review-order{
  background:var(--cs-surface);
  border:1px solid var(--cs-border);
  border-radius:var(--cs-radius);
  padding:1.5rem;
}
.woocommerce-checkout-review-order-table{ background:transparent; border:none; width:100%; }
.woocommerce-checkout-review-order-table thead{ display:none; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
  border:none; border-bottom:1px solid var(--cs-border);
  padding:.75rem 0; background:transparent;
}
.woocommerce-checkout-review-order-table .product-name{ color:var(--cs-text); }
.woocommerce-checkout-review-order-table .product-total{ color:var(--cs-text); font-family:var(--cs-font-mono); text-align:right; }
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td{ font-family:var(--cs-font-mono); }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td{
  border-bottom:none; border-top:2px solid var(--cs-border);
  font-size:1.05rem; font-weight:700; color:var(--cs-text);
}

/* Coupon box */
.woocommerce-form-coupon-toggle .woocommerce-info{
  background:var(--cs-surface-2);
  border:1px solid var(--cs-border);
  border-left:3px solid var(--cs-accent);
  border-radius:var(--cs-radius-sm);
  padding:.9rem 1.1rem;
  color:var(--cs-text-dim);
  list-style:none;
  margin-bottom:1.5rem;
}
.woocommerce-form-coupon-toggle .woocommerce-info a{ color:var(--cs-accent); font-weight:600; }
.checkout_coupon.woocommerce-form-coupon{
  background:var(--cs-surface); border:1px solid var(--cs-border);
  border-radius:var(--cs-radius); padding:1.25rem; margin-bottom:1.5rem;
  display:flex; gap:.75rem; flex-wrap:wrap;
}
.checkout_coupon.woocommerce-form-coupon p{ margin:0; flex:1 1 auto; }
.checkout_coupon.woocommerce-form-coupon .form-row-first{ flex:2 1 220px; }

/* Payment methods */
#payment{
  background:transparent;
  border:none;
  border-radius:0;
  margin-top:1.5rem;
  padding:0;
}
ul.wc_payment_methods{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.75rem; }
ul.payment_methods li.wc_payment_method{
  border:1px solid var(--cs-border);
  border-radius:var(--cs-radius-sm);
  padding:1rem 1.1rem;
  background:var(--cs-surface);
  transition:border-color .15s ease;
}
ul.payment_methods li.wc_payment_method:has(input:checked){
  border-color:var(--cs-accent);
}
ul.payment_methods li label{
  color:var(--cs-text);
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0;
}
ul.payment_methods li input[type="radio"]{
  accent-color:var(--cs-accent);
  width:18px; height:18px; flex:none;
}
ul.payment_methods li label img{ height:20px; width:auto; margin-left:.35rem; }
.payment_box{
  background:var(--cs-surface-2);
  border:1px solid var(--cs-border);
  border-radius:var(--cs-radius-sm);
  padding:1rem;
  margin-top:.85rem;
  color:var(--cs-text-dim);
  font-size:.88rem;
  line-height:1.55;
}
.payment_box:before{ display:none; }
.payment_box p:last-child{ margin-bottom:0; }
/* Contain gateway-injected widgets (PayPal Smart Buttons, Stripe Elements, etc.)
   so they don't visually break out of the card */
.payment_box iframe{ max-width:100%; }
.payment_box > div[id*="paypal"],
.payment_box > div[class*="paypal"]{
  border-radius:var(--cs-radius-sm);
  overflow:hidden;
  margin-top:.5rem;
}
#place_order{ width:100%; margin-top:1.25rem; padding:.9rem 1rem !important; font-size:.95rem !important; }
.woocommerce-terms-and-conditions-wrapper{ margin:1rem 0; font-size:.85rem; color:var(--cs-text-dim); }

@media (max-width: 991.98px){
  .cs-checkout-col-side{ position:static; }
}

/* Product grid — self-contained fallback so the shop/related/cross-sells
   grid always wraps into columns, even if Bootstrap's CDN stylesheet is
   blocked, cached wrong, or loads after this stylesheet. Bootstrap's own
   .row/.col-* rules still apply on top when present; these are just the
   floor that guarantees a wrapped grid either way. */
.cs-products-row{
  width:100%;
  display:grid !important;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
	    margin: 0;
}
.cs-products-row > .cs-loop-item{
  width:auto !important;
  max-width:none !important;
  flex:none !important;
  padding:0 !important;
  margin:0 !important;
}
@media (max-width: 991.98px){
  .cs-products-row{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .cs-products-row{ grid-template-columns:1fr; }
}

/* Safety net: any leftover ul.products (columns-N) from a widget/plugin that
   doesn't go through our loop-start/loop-end overrides still renders as our
   card grid instead of WooCommerce's default float layout. */
ul.products{
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap:1.5rem !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
ul.products li.product{
  width:auto !important;
  float:none !important;
  margin:0 !important;
}
/* WooCommerce core pages without a theme template override (single product,
   cart, checkout, my-account) still use WC's default #primary wrapper —
   give it the same container width/spacing as the rest of the theme. */
.woocommerce #primary,
.woocommerce-page #primary{
  max-width:1200px;
  margin:0 auto;
  padding:2.5rem 1rem 4rem;
}

.cs-filter-pill{
  font-family:var(--cs-font-mono);
  font-size:.78rem;
  color:var(--cs-text-dim);
  border:1px solid var(--cs-border);
  border-radius:999px;
  padding:.4rem .9rem;
  display:inline-block;
  margin:0 .4rem .4rem 0;
  background:var(--cs-surface);
}
.cs-filter-pill:hover{ color:var(--cs-text); border-color:var(--cs-accent); }
.cs-filter-pill.active{ color:#FFFFFF; background:var(--cs-accent); border-color:var(--cs-accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
.cs-footer{
  background:var(--cs-surface);
  border-top:1px solid var(--cs-border);
  padding:1.5rem 0;
  margin-top:4rem;
}
.cs-footer h5{ font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; color:var(--cs-text-dim); margin-bottom:1rem; }
.cs-footer ul{ list-style:none; padding:0; margin:0; }
.cs-footer ul li{ margin-bottom:.55rem; }
.cs-footer a{ color:var(--cs-text-dim); }
.cs-footer a:hover{ color:var(--cs-accent); }
.cs-footer-bottom{
  border-top:none;
  margin-top:0;
  padding-top:0;
  font-size:.85rem;
  color:var(--cs-text-dim);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem;
}

/* ==========================================================================
   Widgets / sidebar
   ========================================================================== */
.cs-widget{
  background:var(--cs-surface);
  border:1px solid var(--cs-border);
  border-radius:var(--cs-radius);
  padding:1.25rem;
  margin-bottom:1.5rem;
}
.cs-widget h4{ font-size:1rem; margin-bottom:1rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cs-caret{ animation:none; }
  .cs-card{ transition:none; }
}

/* Mobile */
@media (max-width: 991.98px){
  .cs-hero{ padding:3.5rem 0; text-align:center; }
  .cs-hero p.lead{ margin-left:auto; margin-right:auto; }
  .cs-hero-stats{ justify-content:center; }
  .cs-terminal{ margin-top:2rem; }
}