/*
Theme Name: BuyFreeFree
Theme URI: https://www.buyfreefree.com
Author: BuyFreeFree
Author URI: https://www.buyfreefree.com
Description: Custom dark brass/bone catalogue theme for BuyFreeFree, built for WooCommerce. A curated-catalogue aesthetic for sneakers, watches, and objects.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: buyfreefree
Tags: e-commerce, dark, custom-menu, custom-logo, translation-ready
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --ink:#0B0D10;
  --ink-soft:#14171B;
  --ink-soft-2:#1A1E23;
  --bone:#EDE8DE;
  --bone-dim:#C9C2B2;
  --brass:#B08D57;
  --brass-light:#D4AF7A;
  --burgundy:#6B1F2A;
  --pine:#3a4a3d;
  --line: rgba(237,232,222,0.14);
  --radius: 2px;

  --display: 'Cormorant Garamond', serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
button, select, input, textarea{font-family:inherit;}
button{cursor:pointer;}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:0.01em;}
.screen-reader-text{position:absolute;left:-9999px;}

.container{max-width:1240px;margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--brass-light);
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
header.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,13,16,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.main-nav{display:flex;align-items:center;justify-content:space-between;height:84px;}
.wordmark{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:0.03em;}
.wordmark span{color:var(--brass-light);}
.nav-links{display:flex;gap:40px;align-items:center;}
.nav-links a{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--bone-dim);position:relative;transition:color .25s ease;}
.nav-links li.current-menu-item > a,
.nav-links a.active{color:var(--brass-light);}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--brass-light);transition:width .3s ease;}
.nav-links a:hover{color:var(--bone);}
.nav-links a:hover::after{width:100%;}
.nav-right{display:flex;align-items:center;gap:18px;}
.nav-cta{border:1px solid var(--brass);padding:10px 22px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;transition:all .3s ease;font-family:var(--mono);}
.nav-cta:hover{background:var(--brass);color:var(--ink);}
.nav-toggle{display:none;background:none;border:none;color:var(--bone);font-size:24px;}

@media (max-width:920px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
}

/* =========================================================
   PAGE HEAD / BREADCRUMB (archive + single wrapper)
   ========================================================= */
.page-head{padding:56px 0 40px;border-bottom:1px solid var(--line);}
.breadcrumb{font-family:var(--mono);font-size:12px;color:var(--bone-dim);margin-bottom:18px;}
.breadcrumb a{color:var(--bone-dim);}
.breadcrumb a:hover{color:var(--brass-light);}
.page-head h1{font-size:clamp(38px,5vw,58px);margin-bottom:14px;}
.page-head p{color:var(--bone-dim);max-width:480px;font-size:15.5px;}

/* =========================================================
   TOOLBAR (WooCommerce ordering / result count)
   ========================================================= */
.toolbar{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding:28px 0;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:12px;color:var(--bone-dim);
}
.filters{display:flex;gap:10px;flex-wrap:wrap;}
.filter-chip{
  border:1px solid var(--line);padding:9px 16px;
  text-transform:uppercase;letter-spacing:0.08em;font-size:11px;
  transition:all .25s ease;background:transparent;color:var(--bone-dim);
}
.filter-chip.active, .filter-chip:hover{border-color:var(--brass-light);color:var(--brass-light);}
.woocommerce-ordering select{
  background:var(--ink);border:1px solid var(--line);color:var(--bone);
  padding:9px 14px;font-size:11px;text-transform:uppercase;letter-spacing:0.08em;
}
.woocommerce-result-count{font-family:var(--mono);font-size:12px;color:var(--bone-dim);}

/* =========================================================
   PRODUCT GRID (overrides WooCommerce ul.products / li.product)
   ========================================================= */
.product-section{padding:56px 0 120px;}
ul.products{
  display:grid !important;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  list-style:none;
}
ul.products li.product{
  border:1px solid var(--line);
  padding:26px 22px;
  transition:border-color .3s ease, transform .3s ease;
  position:relative;
  background:var(--ink-soft);
}
ul.products li.product:hover{border-color:var(--brass);transform:translateY(-4px);}

.product-frame{
  aspect-ratio:1/1;border:1px solid var(--line);position:relative;
  overflow:hidden;
  margin-bottom:18px;
  background:linear-gradient(160deg, rgba(176,141,87,0.06), transparent 60%);
}
.product-frame img{width:100%;height:100%;object-fit:cover;}
.product-frame .badge{
  position:absolute;top:10px;left:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  background:var(--burgundy);color:var(--bone);padding:4px 8px;
  z-index:2;
}
.product-ref{font-family:var(--mono);font-size:11px;color:var(--bone-dim);margin-bottom:6px;}
ul.products li.product h2,
ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--body);font-weight:500;font-size:15px;margin-bottom:6px;color:var(--bone);
}
.product-meta{display:flex;justify-content:space-between;align-items:center;}
.product-price,
ul.products li.product .price{font-family:var(--mono);font-size:14px;color:var(--brass-light);}
ul.products li.product .price del{color:var(--bone-dim);opacity:0.6;margin-right:6px;}
ul.products li.product .price ins{text-decoration:none;}
.product-stock{font-family:var(--mono);font-size:11px;color:var(--bone-dim);}

/* hide default WC add-to-cart button in loop, we style our own */
ul.products li.product .add_to_cart_button,
ul.products li.product a.button{
  display:block;margin-top:14px;
  border:1px solid var(--line);
  text-align:center;
  padding:9px 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--bone-dim);
  transition:all .25s ease;
}
ul.products li.product a.button:hover{border-color:var(--brass-light);color:var(--brass-light);}

.pagination, nav.woocommerce-pagination{
  display:flex;justify-content:center;gap:10px;margin-top:64px;
  font-family:var(--mono);font-size:12px;
}
nav.woocommerce-pagination ul{display:flex;gap:10px;}
nav.woocommerce-pagination a, nav.woocommerce-pagination span{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--bone-dim);transition:all .25s ease;
}
nav.woocommerce-pagination a:hover, nav.woocommerce-pagination span.current{border-color:var(--brass-light);color:var(--brass-light);}

/* =========================================================
   HERO (front page)
   ========================================================= */
.hero{ padding:110px 0 90px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 600px 400px at 85% 15%, rgba(176,141,87,0.14), transparent 70%),
    radial-gradient(ellipse 500px 500px at 10% 90%, rgba(58,74,61,0.18), transparent 70%);
  pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:60px; align-items:center; position:relative; }
.hero .eyebrow{ margin-bottom:22px; display:flex; align-items:center; gap:12px; }
.hero .eyebrow::before{content:""; width:28px; height:1px; background:var(--brass);}
h1.title{ font-size:clamp(2.5rem, 5vw, 4rem); line-height:1.05; margin-bottom:24px; }
h1.title em{ font-style:italic; color:var(--brass-light); }
.hero-sub{ font-size:1.03rem; color:var(--bone-dim); max-width:46ch; margin-bottom:36px; }
.hero-ctas{display:flex; gap:16px; align-items:center;}
.btn-primary{
  background:var(--brass); color:var(--ink); padding:14px 30px;
  font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em;
  font-weight:500; border-radius:var(--radius); transition:background .2s ease;
  display:inline-block;
}
.btn-primary:hover{background:var(--brass-light);}
.btn-ghost{ font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; border-bottom:1px solid var(--line); padding-bottom:3px; }
.hero-photo{
  position:relative; border:1px solid var(--line); background:var(--ink-soft);
  overflow:hidden;
}
.hero-photo img{ width:100%; height:340px; object-fit:cover; display:block; filter:saturate(0.92) contrast(1.02); }
.hero-photo-tag{
  position:absolute; left:18px; bottom:18px;
  background:rgba(11,13,16,0.82);
  border:1px solid var(--line);
  padding:8px 14px;
  font-size:0.72rem;
  display:flex; gap:14px;
  font-family:var(--mono);
}

/* =========================================================
   HOMEPAGE CATEGORY SECTIONS
   ========================================================= */
.category{ padding:88px 0; border-bottom:1px solid var(--line); }
.cat-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; gap:24px; flex-wrap:wrap; }
.cat-num{ font-size:0.78rem; color:var(--brass-light); margin-bottom:10px; display:block; font-family:var(--mono);}
.cat-head h2{ font-size:clamp(1.8rem, 3vw, 2.6rem); }
.cat-desc{ max-width:34ch; color:var(--bone-dim); font-size:0.92rem; text-align:right; }
.lot-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.lot-card{
  border:1px solid var(--line); background:var(--ink-soft);
  padding:20px; border-radius:var(--radius);
  transition:border-color .2s ease, transform .2s ease;
}
.lot-card:hover{ border-color:var(--brass); transform:translateY(-3px); }
.lot-card-top{ display:flex; justify-content:space-between; font-size:0.72rem; color:var(--bone-dim); margin-bottom:14px; font-family:var(--mono);}
.lot-thumb{
  width:100%; aspect-ratio:1/1; background:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; margin-bottom:16px;
}
.lot-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.lot-card h3{ font-size:1.02rem; margin-bottom:6px; line-height:1.25; }
.lot-meta{ font-size:0.8rem; color:var(--bone-dim); margin-bottom:12px; }
.lot-bottom{ display:flex; justify-content:space-between; align-items:center; border-top:1px dashed var(--line); padding-top:14px; }
.lot-price{font-size:1rem; color:var(--brass-light); font-family:var(--mono);}
.lot-stock{font-size:0.72rem; color:var(--bone-dim); font-family:var(--mono);}
.cat-footer{ margin-top:40px; display:flex; justify-content:flex-end; }

/* =========================================================
   SINGLE PRODUCT
   ========================================================= */
.single-product-wrap{padding:56px 0 120px;}
.single-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.single-gallery{border:1px solid var(--line);aspect-ratio:1/1;overflow:hidden;background:var(--ink-soft);}
.single-gallery img{width:100%;height:100%;object-fit:cover;}
.single-info .product-ref{margin-bottom:14px;}
.single-info h1{font-size:clamp(30px,3.6vw,44px);margin-bottom:14px;}
.single-info .price{font-family:var(--mono);font-size:22px;color:var(--brass-light);margin-bottom:24px;display:block;}
.single-info .price del{color:var(--bone-dim);opacity:0.6;margin-right:10px;font-size:16px;}
.single-info .woocommerce-product-details__short-description{color:var(--bone-dim);margin-bottom:28px;max-width:52ch;}
.single-info form.cart{display:flex;gap:14px;align-items:center;margin-bottom:32px;flex-wrap:wrap;}
.single-info .quantity input{
  background:var(--ink);border:1px solid var(--line);color:var(--bone);
  width:64px;padding:12px;text-align:center;font-family:var(--mono);
}
.single-info button[type="submit"]{
  background:var(--brass);color:var(--ink);padding:14px 32px;
  border:none;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;font-weight:500;
}
.single-info button[type="submit"]:hover{background:var(--brass-light);}
.spec-table{width:100%;border-top:1px solid var(--line);margin-top:20px;font-family:var(--mono);font-size:13px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table th,.spec-table td{text-align:left;padding:12px 0;color:var(--bone-dim);}
.spec-table th{color:var(--bone);font-weight:400;width:40%;}

@media (max-width:860px){
  .single-product-grid{grid-template-columns:1fr;}
  .hero-grid{grid-template-columns:1fr;}
  .lot-grid{grid-template-columns:repeat(2,1fr);}
}

/* =========================================================
   BRAND STORY (front page)
   ========================================================= */
.story{ padding:96px 0; border-bottom:1px solid var(--line); }
.story-grid{ display:grid; grid-template-columns: 0.5fr 1fr; gap:60px; }
.story h2{font-size:1.9rem; max-width:14ch;}
.story-body p{ color:var(--bone-dim); margin-bottom:18px; max-width:62ch; }
.story-body p:first-child{color:var(--bone);}
@media (max-width:860px){ .story-grid{grid-template-columns:1fr;} }

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{padding:80px 0 40px;border-top:1px solid var(--line);}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line);}
.footer-brand p{color:var(--bone-dim);font-size:14px;max-width:280px;margin-top:16px;}
.footer-col h4{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:18px;}
.footer-col a{display:block;font-size:14px;color:var(--bone);margin-bottom:12px;transition:color .25s ease;}
.footer-col a:hover{color:var(--brass-light);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-size:12px;color:var(--bone-dim);flex-wrap:wrap;gap:12px;}

@media (max-width:920px){
  ul.products{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  ul.products{grid-template-columns:1fr;}
  .lot-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .toolbar{flex-direction:column;align-items:flex-start;}
  .container{padding:0 20px;}
}

/* =========================================================
   WooCommerce notices / misc overrides
   ========================================================= */
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  background:var(--ink-soft);border:1px solid var(--line);color:var(--bone);
  padding:16px 20px;font-size:14px;list-style:none;margin-bottom:24px;
}
.woocommerce-message a.button, .woocommerce-error a.button{
  background:var(--brass);color:var(--ink);padding:6px 14px;margin-left:12px;font-size:12px;text-transform:uppercase;
}
.star-rating{color:var(--brass-light);}