/*
Theme Name: Krishna Flute
Theme URI: https://krishnaflute.com
Author: Rahul Krishnan
Description: Custom theme for Krishna Flute bansuri lessons — built from the approved Krishna Flute Redesign mockup.
Version: 1.0
Text Domain: krishna-flute
*/

:root{
  --ink:#12262A; --ink-2:#1B3238; --paper:#FAF3E3; --paper-card:#FFFCF4;
  --line:#E3D6B4; --line-dark:#2A4046; --cream:#F4ECD8; --muted:#6B7A78;
  --muted-dark:#9FB0AC; --accent:#C1791E; --accent-hover:#A6650F; --accent-soft:#F0DDB8;
  --teal:#2F8577;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; font-family:'Source Sans 3',ui-sans-serif,system-ui,sans-serif; background:var(--paper); color:var(--ink);}
h1,h2,h3{font-family:'Fraunces',ui-serif,Georgia,serif; text-wrap:balance; margin:0;}
img{max-width:100%; height:auto;}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;}
a{color:var(--teal); text-decoration:none;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:4px; font-weight:600; font-size:15px; cursor:pointer; border:1px solid transparent; font-family:inherit;}
.btn-accent{background:var(--accent); color:#1B1204;}
.btn-accent:hover{background:var(--accent-hover); color:#1B1204;}
.btn-ghost-dark{border-color:rgba(244,236,216,.4); color:var(--cream);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;}
.wrap{max-width:1240px; margin:0 auto; padding:0 40px;}
.stars{display:inline-flex; gap:2px;}
.pad{padding-left:22px; padding-right:22px;}

/* site width */
.knf-page{width:100%; background:var(--paper);}

/* responsive swap: desktop markup vs mobile markup (mirrors the two approved mockup artboards 1:1) */
.knf-desktop{display:block;}
.knf-mobile{display:none;}
@media (max-width: 782px){
  .knf-desktop{display:none;}
  .knf-mobile{display:block;}
  .knf-mobile-inner{width:100%; max-width:430px; min-width:320px; margin:0 auto;}
  .knf-nav-m{display:flex;}
}

/* nav */
.knf-nav{background:var(--ink); border-bottom:1px solid var(--line-dark);}
.knf-nav-inner{display:flex; align-items:center; justify-content:space-between; height:84px;}
.knf-brand{display:flex; align-items:center; gap:12px;}
.knf-brand-name{font-family:'Fraunces',serif; font-size:21px; font-weight:600; color:var(--cream); letter-spacing:.01em;}
.knf-nav-links{display:flex; align-items:center; gap:40px; list-style:none; margin:0; padding:0;}
.knf-nav-links a{color:var(--cream); font-size:15px;}
.knf-nav-links a:hover{color:var(--accent);}
.knf-nav-right{display:flex; align-items:center; gap:14px;}
.knf-nav-right a{color:var(--cream); font-size:15px;}

.knf-nav-m{background:var(--ink); align-items:center; justify-content:space-between; height:64px;}
.knf-brand-name-m{font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:var(--cream);}

/* footer */
.knf-footer{background:var(--ink-2);}
.knf-footer-inner{padding:36px 40px; display:flex; align-items:center; justify-content:space-between;}
.knf-footer-inner a{color:var(--muted-dark); font-size:13px;}
.knf-footer-m{background:var(--ink-2); padding:28px 0;}
.knf-footer-m a{color:var(--muted-dark); font-size:12.5px; margin-right:20px;}

@media (max-width: 782px){
  .knf-footer-m .knf-footer-links{display:flex; gap:20px;}
}

/* store / product cards */
.pill{padding:9px 18px; border-radius:20px; font-size:13.5px; white-space:nowrap;}
.pcard{background:var(--paper-card); border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column;}
.pimg{height:200px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.pimg img{width:100%; height:100%; object-fit:cover;}

/* WooCommerce loop add-to-cart button, styled as .btn.btn-outline */
.knf-add-to-cart a.add_to_cart_button,
.knf-add-to-cart a.button{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:14px 28px; border-radius:4px; font-weight:600; font-size:15px;
  border:1px solid var(--ink); color:var(--ink); background:transparent;
}
.knf-add-to-cart a.add_to_cart_button:hover{background:var(--ink); color:var(--cream);}

/* WooCommerce single product page — keep typography consistent with theme */
.woocommerce div.product .price, .woocommerce ul.products li.product .price{color:var(--ink); font-family:'IBM Plex Mono',monospace;}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--accent); color:#1B1204; border-radius:4px; font-family:inherit; font-weight:600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--accent-hover); color:#1B1204;}

/* checkout — restyle WooCommerce's native checkout to match the brand look
   (fields, cards, totals, button) without touching its form logic/fields,
   since payment handling stays on the tested WooCommerce/Razorpay/Stripe plugins. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col2-set{max-width:100%;}
.woocommerce-checkout h3{font-family:'Fraunces',serif; font-size:22px; margin-bottom:16px;}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper label,
.woocommerce-checkout label{font-size:12.5px; font-weight:600; color:var(--ink);}
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea{
  border:1px solid var(--line) !important; border-radius:4px !important; padding:12px 14px !important;
  font-size:14.5px; font-family:'Source Sans 3',sans-serif; background:var(--paper-card); color:var(--ink);
}
.woocommerce-checkout #order_review,
.woocommerce-checkout table.shop_table{
  background:var(--paper-card); border:1px solid var(--line); border-radius:8px; padding:24px;
}
.woocommerce-checkout table.shop_table th, .woocommerce-checkout table.shop_table td{border-color:var(--line);}
.woocommerce-checkout .order-total .amount{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600;}
.woocommerce-checkout #place_order{
  width:100%; background:var(--accent); color:#1B1204; border-radius:4px; font-weight:600; font-size:15.5px; padding:16px 28px;
}
.woocommerce-checkout #place_order:hover{background:var(--accent-hover);}
.woocommerce-checkout .woocommerce-info{border-top-color:var(--teal); background:var(--accent-soft); color:var(--ink);}