/*
Theme Name: selfmade
Theme URI: https://selfmade.local
Author: selfmade
Author URI: https://selfmade.local
Description: Theme streetwear cao cấp cho selfmade — WooCommerce. Canvas kem ấm, charcoal + accent gold, card trắng nổi khối, font Be Vietnam Pro. Thuần PHP/CSS/JS.
Version: 1.2.1
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: selfmade
WC requires at least: 8.0
WC tested up to: 10.9
*/

/* ==========================================================================
   Design tokens — warm premium palette
   ========================================================================== */
:root {
	--sm-cream: #ffffff;      /* canvas */
	--sm-cream-2: #f7f7f7;    /* dải nhấn nhạt */
	--sm-card: #ffffff;
	--sm-ink: #1e1e1e;        /* tiêu đề / chữ đậm (theo smaker #333/#1e1e1e) */
	--sm-body: #3a3a3a;       /* chữ thường */
	--sm-ink-2: #2a2419;
	--sm-white: #ffffff;

	--sm-gold: #bd8a34;       /* accent chính */
	--sm-gold-2: #d8b45a;     /* gold sáng (trên nền tối) */
	--sm-sale: #e02b2b;       /* đỏ sale/giá KM (theo smaker #fb4141) */

	--sm-muted: #8a8a8a;      /* chữ mờ (smaker #898989) */
	--sm-line: #eeeeee;
	--sm-line-dark: #35301f;

	--sm-bg: var(--sm-cream);
	--sm-black: var(--sm-ink);
	--sm-bg-soft: var(--sm-cream-2);

	--sm-font: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--sm-display: var(--sm-font);

	--sm-container: 1420px;
	--sm-gutter: 22px;
	--sm-radius: 14px;

	--sm-header-h: 78px;
	--sm-shadow: 0 6px 22px rgba(24,20,15,.08);
	--sm-shadow-lg: 0 16px 40px rgba(24,20,15,.14);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--sm-font);
	font-size: 15px;
	line-height: 1.65;
	color: var(--sm-body);
	background: var(--sm-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { color: var(--sm-gold); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-family: var(--sm-font); color: var(--sm-ink); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.page-article:not(.page-article--checkout) > .entry-content { max-width: 760px; margin: 0 auto; }

/* Layout helpers */
.container {
	width: 100%;
	max-width: var(--sm-container);
	margin: 0 auto;
	padding-left: var(--sm-gutter);
	padding-right: var(--sm-gutter);
}
.section { padding-top: 56px; padding-bottom: 56px; }
.section--tight { padding-top: 36px; padding-bottom: 36px; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 30px;
	font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	background: var(--sm-ink); color: var(--sm-white);
	border: 1.5px solid var(--sm-ink); border-radius: 999px;
	transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--sm-gold); border-color: var(--sm-gold); color: #fff; transform: translateY(-1px); box-shadow: var(--sm-shadow); }
.btn--gold { background: var(--sm-gold); border-color: var(--sm-gold); }
.btn--gold:hover { background: var(--sm-ink); border-color: var(--sm-ink); }
.btn--ghost { background: transparent; color: var(--sm-ink); }
.btn--ghost:hover { background: var(--sm-ink); color: #fff; }
.btn--block { display: flex; width: 100%; }

/* Section heading */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }
.section-head .eyebrow { color: var(--sm-gold); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.section-head h2 {
	font-family: var(--sm-display);
	font-weight: 800;
	font-size: clamp(24px, 3.2vw, 34px);
	letter-spacing: -0.02em;
	text-transform: none;
	margin: 0;
}
.section-head p { color: var(--sm-muted); margin: 4px 0 0; }
.section-head a.link-all {
	flex: none;
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--sm-ink);
	padding-bottom: 3px; border-bottom: 2px solid var(--sm-gold);
}
.section-head a.link-all:hover { color: var(--sm-gold); }

@media (max-width: 820px) {
	:root { --sm-gutter: 10px; }
}