/* =========================================================================
   LuxeLuna – main.css
   Style tùy biến bám sát design Figma (teal + đỏ + kem + vàng, font Khmer).
   Token màu lấy từ theme.json (--wp--preset--color--*).
   ========================================================================= */

:root {
	--ll-teal-900: #092F2E;
	--ll-teal-700: #155957;
	--ll-red-900: #490A0B;
	--ll-red-700: #891113;
	--ll-gold: #D5BE89;
	--ll-gold-300: #EFCDA1;
	--ll-cream: #F8E3BB;
	--ll-maroon: #9F1D29;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }

.ll-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---- Tiện ích --------------------------------------------------------- */
.ll-eyebrow {
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ll-gold-300);
	margin-bottom: .25rem;
}
.ll-eyebrow--dark { color: var(--ll-maroon); }

/* Tiêu đề dạng "biển teal" bo viền vàng (thay cho ảnh banner trong Figma) */
.ll-banner {
	display: inline-block;
	margin-inline: auto;
	padding: .55rem 2.5rem;
	background: linear-gradient(90deg, #0E423F, #1B5E5A, #0E423F);
	border: 1px solid var(--ll-gold);
	border-radius: 999px;
	color: var(--ll-gold-300) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3), inset 0 0 0 3px rgba(213, 190, 137, .12);
	overflow-wrap: anywhere;
}
.ll-collection > .ll-banner,
.ll-roundels > .ll-banner,
.ll-promo > .ll-banner,
.ll-reviews > .ll-banner { display: block; width: max-content; max-width: 92%; }

/* ---- Header ----------------------------------------------------------- */
.ll-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: linear-gradient(90deg,#092F2E 0%,#155957 16.5%,#092F2E 31%,#155957 49%,#092F2E 64%,#155957 78%,#092F2E 100%);
	border-bottom: 2px solid var(--ll-gold);
}
.admin-bar .ll-header { top: 32px; }
.ll-header__inner { width: 100%; min-height: 64px; }
.ll-header__nav a { text-decoration: none; font-weight: 400; font-size: 1.05rem; }
.ll-header__nav a:hover { color: var(--ll-cream); }
.ll-header__nav a:focus-visible,
.wp-element-button:focus-visible,
.ll-newsletter__form :is(input, button):focus-visible {
	outline: 3px solid var(--ll-cream);
	outline-offset: 3px;
}
/* Logo trong khung đỏ bo góc dưới như Figma */
.ll-header__logo {
	background: linear-gradient(180deg, #881113 62%, #5D1011 100%);
	border: 2px solid var(--ll-gold);
	border-radius: 0 0 18px 18px;
	padding: .35rem 1rem .6rem;
	margin-top: -2px;
}

/* ---- Hero ------------------------------------------------------------- */
.ll-hero {
	margin: 0;
	padding: 0;
}
.ll-hero__banner { margin: 0; width: 100%; }
.ll-hero__banner img { display: block; width: 100%; height: auto; }

/* ---- Panels About / Why ---------------------------------------------- */
.ll-panel { border-radius: 26px; }
.ll-panel--about {
	border: 2px solid var(--ll-gold);
	background: linear-gradient(180deg, rgba(137,17,19,.35), rgba(73,10,11,.55));
	box-shadow: inset 0 0 0 6px rgba(213, 190, 137, .12);
}
.ll-panel--about, .ll-panel--about :where(p,h2,h3) { color: #EDD3A3; }
.ll-panel--why {
	border: 2px solid var(--ll-gold);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.ll-why__item + .ll-why__item { margin-top: 1.25rem; }

/* ---- Thẻ sản phẩm ----------------------------------------------------- */
.ll-cards { align-items: stretch; }
.ll-card {
	background: linear-gradient(180deg, #7a1a2a, #530F11);
	border: 1px solid rgba(213, 190, 137, .4);
	border-radius: 16px;
	padding: 1rem 1rem 1.25rem;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ll-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,.4); border-color: var(--ll-gold-300); }
.ll-card__img img { border-radius: 12px; aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.ll-card h3 { margin: .85rem 0 .35rem; }
.ll-card__feats { list-style: none; padding-left: 0; margin: 0 0 .75rem; opacity: .9; }
.ll-card__feats li { position: relative; padding-left: 1.1rem; }
.ll-card__feats li::before { content: "•"; position: absolute; left: 0; color: var(--ll-gold-300); }
.ll-card__buy { width: 100%; flex-wrap: wrap; }
.ll-card__price { font-size: 1.3rem; font-weight: 700; color: var(--ll-cream); margin: 0; }

/* ---- Bộ sưu tập roundel ---------------------------------------------- */
.ll-roundel img { border-radius: 50%; box-shadow: 0 0 0 2px var(--ll-gold), 0 12px 26px rgba(0,0,0,.4); }
.ll-roundel-card h3 { margin: 0 0 .2rem; }

/* ---- Khuyến mãi ------------------------------------------------------- */
.ll-promo { border-block: 1px solid rgba(213,190,137,.3); }
.ll-promo__art img { filter: drop-shadow(0 16px 32px rgba(0,0,0,.45)); }

/* ---- Đánh giá --------------------------------------------------------- */
.ll-review {
	background: rgba(0,0,0,.18);
	border: 1px solid rgba(213,190,137,.3);
	border-radius: 16px;
	padding: 1.75rem 1.25rem;
}
.ll-review__badge img { border-radius: 50%; }
.ll-stars { color: #F5C451; letter-spacing: .18em; margin: .35rem 0; }

/* ---- Newsletter ------------------------------------------------------- */
.ll-newsletter { border: 1px solid var(--ll-gold); border-radius: 16px; }
.ll-newsletter__form { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 820px; margin: 1.25rem auto 0; }
.ll-newsletter__form input {
	flex: 1 1 180px; padding: .7rem 1rem; border-radius: 8px;
	border: 1px solid var(--ll-gold); background: #FBF5E6; color: #2A0E12;
}
.ll-newsletter__form button {
	padding: .7rem 1.4rem; border: 0; border-radius: 8px; cursor: pointer;
	background: var(--ll-gold-300); color: var(--ll-red-900); font-weight: 700;
}
.ll-newsletter__form button:hover { background: var(--ll-cream); }
.ll-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ll-form-notice { max-width: 820px; margin: 1rem auto 0; padding: .75rem 1rem; border-radius: 8px; text-align: center; }
.ll-form-notice--success { color: #123f2c; background: #dff7e8; }
.ll-form-notice--error { color: #651217; background: #ffe6e1; }

/* ---- Footer ----------------------------------------------------------- */
.ll-footer a { text-decoration: none; }
.ll-contact-line { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; }
.ll-contact-line img { flex: none; }
.ll-map iframe { display: block; width: 100%; }

/* =========================================================================
   RESPONSIVE — WP tự xếp chồng columns ở <=781px; phần dưới tinh chỉnh thêm.
   ========================================================================= */
@media (max-width: 781px) {
	.admin-bar .ll-header { top: 46px; }
	.ll-header__inner { display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem; justify-items: center; padding-block: .35rem; }
	.ll-header__logo { grid-column: 1 / -1; grid-row: 1; }
	.ll-header__nav { width: 100%; justify-content: center !important; }
	.ll-header__nav .wp-block-navigation__container { justify-content: center; gap: .65rem 1rem !important; }
	.ll-header__nav a { font-size: .95rem; }

	.ll-banner { padding: .5rem 1.5rem; }
	.ll-promo__row { gap: 1.5rem; }
	.ll-newsletter__form { flex-direction: column; }
	.ll-newsletter__form input { flex: none; width: 100%; min-height: 44px; }
	.ll-newsletter__form button { min-height: 44px; }
}

@media (max-width: 480px) {
	.ll-hero__banner { aspect-ratio: 4 / 3; overflow: hidden; }
	.ll-hero__banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
	.ll-header__nav .wp-block-navigation__container { gap: .45rem .7rem !important; }
	.ll-header__nav a { font-size: .86rem; }
	.ll-banner { width: calc(100% - 1rem) !important; max-width: none !important; padding-inline: .75rem; }
	.ll-card__price { font-size: 1.15rem; }
	.ll-panel { border-radius: 18px; }
	.ll-panel--about,
	.ll-panel--why { padding: 1.5rem !important; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ll-card { transition: none; }
}