/*
Theme Name:   MOIT Storefront Child
Theme URI:    https://moit.vn/
Description:  Child theme của Storefront cho thương hiệu M.O.I.T — Luminous Glow Sun Cream. Bao gồm trang landing tuỳ chỉnh và bộ nhận diện thương hiệu áp lên toàn bộ WooCommerce.
Author:       M.O.I.T
Template:     storefront
Version:      1.2.3
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  moit-child
*/

/* =========================================================
   LƯU Ý: file này được Storefront tự động enqueue SAU CSS của
   cả theme cha lẫn WooCommerce (xem Storefront::child_scripts).
   Không cần enqueue thủ công trong functions.php.

   Nội dung ở đây = design token + override Storefront trên
   TOÀN SITE (shop, cart, checkout, account).
   Riêng trang landing nằm ở assets/css/landing.css.
   ========================================================= */

:root{
  --red:        #A81E2D;
  --red-dark:   #7E1420;
  --red-soft:   #C8202F;
  --gold:       #E0B87C;
  --gold-dark:  #C99B57;
  --ink:        #2C2724;
  --ink-2:      #5B534E;
  --muted:      #8B807A;
  --cream:      #FBF6F1;
  --cream-2:    #F5EDE6;
  --line:       #E9DED4;

  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 4px 24px rgba(120, 80, 60, .08);
  --shadow-lg:  0 16px 48px rgba(120, 80, 60, .14);

  --font-serif: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-sans:  "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------------------------------------------------------
   1. Typography — thay Source Sans Pro của Storefront
   --------------------------------------------------------- */
body,
button,
input,
textarea,
select,
.widget h1, .widget h2, .widget h3{
  font-family:var(--font-sans);
  color:var(--ink);
}

h1,h2,h3,h4,h5,h6,
.site-title,
.entry-title,
.product_title,
.woocommerce-loop-product__title,
.price .amount{
  font-family:var(--font-serif);
  color:var(--ink);
  font-weight:700;
}

body{ line-height:1.65; }

a{ color:var(--red); }
a:hover{ color:var(--red-dark); }

/* ---------------------------------------------------------
   2. Header — Storefront mặc định nền tối #2c2d33
   --------------------------------------------------------- */
/* Điều kiện tiên quyết để header dính được.
   Storefront đặt `body{overflow-x:hidden}` và `.site{overflow-x:hidden}`.
   overflow-x:hidden khiến phần tử trở thành scroll container, và khi đó
   position:sticky bên trong nó không còn neo theo viewport nữa (sự kiện
   scroll cũng không nổi lên tới window).
   `clip` chặn tràn ngang y hệt nhưng KHÔNG tạo scroll container.
   Lưu ý: tuyệt đối không đặt overflow-y ở đây — nếu trục còn lại là
   auto/scroll thì theo spec `clip` sẽ bị tính lại thành `hidden`. */
body,
.site{ overflow-x:clip; }

.site-header{
  background-color:#fff !important;
  border-bottom:1px solid var(--line);
  padding-top:.85em;
  padding-bottom:.85em;
  margin-bottom:0;                 /* Storefront để 4.23em, gây hở dưới header */

  /* Dính khi cuộn. Topbar phía trên cứ để trôi đi. */
  position:sticky;
  top:0;
  z-index:100;
  transition:padding .25s ease, box-shadow .25s ease;
}
/* Chừa chỗ cho thanh admin của WordPress khi đang đăng nhập */
body.admin-bar .site-header{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .site-header{ top:46px; }
}

/* Trạng thái đã cuộn: header thu gọn + đổ bóng (class do moit.js gắn) */
.site-header.is-stuck{
  padding-top:.4em;
  padding-bottom:.4em;
  box-shadow:0 4px 22px rgba(120,80,60,.13);
}

/* ---------------------------------------------------------
   2a. Header một hàng
   Wrapper .moit-header-inner do moit_header_open() dựng, chứa
   logo + menu + giỏ hàng làm anh em ruột (xem functions.php).
   --------------------------------------------------------- */
.moit-header-inner{
  display:flex;
  align-items:center;
  gap:24px;
}

/* Storefront dựng header bằng lưới float, khai báo ở bộ selector 3 class
   `.woocommerce-active .site-header X{width:…%;margin-right:…%}`.
   Phải vô hiệu hoá đúng ở độ ưu tiên đó thì flex mới chi phối được kích thước.
   (float tự bị bỏ qua khi phần tử là flex item, nên chỉ cần width + margin.) */
.woocommerce-active .site-header .site-branding,
.woocommerce-active .site-header .main-navigation,
.woocommerce-active .site-header .site-header-cart,
.site-header .site-branding,
.site-header .main-navigation{
  width:auto;
  margin:0;
  clear:none;
}

.site-header .site-branding{
  flex:0 0 auto;
  padding:0;
}

/* Logo nhỏ lại, và co thêm khi header thu gọn */
.site-header .custom-logo-link img,
.site-header .site-logo-link img{
  max-width:132px;
  width:auto;
  transition:max-width .25s ease;
}
.site-header.is-stuck .custom-logo-link img,
.site-header.is-stuck .site-logo-link img{ max-width:104px; }

/* Menu: đẩy sang phải, nằm cạnh giỏ hàng */
.woocommerce-active .site-header .main-navigation{
  flex:0 1 auto;
  margin-left:auto;
}
.site-header .main-navigation .primary-navigation{ display:block; }

/* Menu ngang, không xuống dòng */
.site-header .main-navigation ul.menu,
.site-header .main-navigation ul.nav-menu{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  margin:0;
}
.site-header .main-navigation ul.menu > li,
.site-header .main-navigation ul.nav-menu > li{ float:none; }

/* Storefront để padding 1.618em (~26px) trên/dưới mỗi mục menu — quá cao cho
   header một hàng. Selector gốc là 3 class nên override cần 4. */
.site-header .main-navigation ul.menu > li > a,
.site-header .main-navigation ul.nav-menu > li > a{
  padding:.55em .8em;
  white-space:nowrap;
}

.woocommerce-active .site-header .site-header-cart{ flex:0 0 auto; }

/* Mobile (<768px): Storefront chuyển menu sang nút toggle + handheld-navigation
   dùng transition max-height. Không đụng vào cơ chế đó — chỉ xuống dòng cho
   nav để hàng trên còn logo và giỏ hàng. */
@media (max-width:767px){
  .moit-header-inner{ flex-wrap:wrap; gap:10px 14px; }
  .site-header .site-branding{ flex:1 1 auto; }
  .site-header .site-header-cart{ order:2; margin-left:auto; }
  .site-header .main-navigation{ order:3; flex:1 0 100%; margin:0; }
  .site-header .custom-logo-link img,
  .site-header .site-logo-link img{ max-width:112px; }
  .site-header.is-stuck .custom-logo-link img,
  .site-header.is-stuck .site-logo-link img{ max-width:96px; }
}
.site-header .site-title a,
.site-header .site-description,
.site-header a:not(.button){ color:var(--ink); }
.site-header .site-title a:hover{ color:var(--red); }

/* Storefront đặt .custom-logo-link{display:block} nên thẻ <a> trải hết chiều
   ngang cột (552px) dù logo chỉ 230px — khung focus vì thế rộng quá mức. */
.site-header .custom-logo-link,
.site-header .site-logo-link,
.site-header .site-logo-anchor{ width:fit-content; }

.storefront-primary-navigation{ background-color:transparent; }
.main-navigation ul li a{
  color:var(--ink-2);
  font-size:.95em;
  font-weight:500;
  padding:.6em .9em;
}
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a{ color:var(--red); }

/* Menu con */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children{
  background-color:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* ---------------------------------------------------------
   2b. Giỏ hàng trên header
   Mặc định Storefront: .cart-contents là block rộng 21.7% cột với
   padding 1.618em 0, còn icon giỏ nằm ở ::after{float:right} — nên chữ
   dạt trái, icon dạt phải, ở giữa là một khoảng trống lớn.
   Dựng lại thành một nút pill gọn: [icon] [tổng tiền] [badge số lượng].
   --------------------------------------------------------- */
/* Storefront: `.woocommerce-active .site-header .site-header-cart{width:21.7391304348%}`
   — 3 class, nên override phải cùng độ ưu tiên thì nút mới ôm sát nội dung. */
.woocommerce-active .site-header .site-header-cart,
.site-header-cart{
  width:auto;
  margin-bottom:0;
  text-align:right;
}

.site-header-cart .cart-contents{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 14px;
  height:auto;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  line-height:1;
  transition:.2s ease;
}
.site-header-cart .cart-contents:hover{
  background:#fff;
  border-color:var(--red);
  color:var(--red);
}

/* Icon giỏ: bỏ float, đưa lên đầu bằng flex order */
.site-header-cart .cart-contents::after{
  float:none;
  order:-1;
  font-size:1.05em;
  line-height:1;
  color:var(--red);
  height:auto;
}

.site-header-cart .cart-contents .moit-cart-amount{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:1.02em;
  white-space:nowrap;
}
.site-header-cart .cart-contents .amount{ margin-right:0; }

.site-header-cart .cart-contents .count{
  background-color:var(--red);
  color:#fff;
  border-radius:999px;
  min-width:20px;
  padding:3px 7px;
  font-size:11.5px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
}
/* Giỏ rỗng thì badge "0" chỉ là nhiễu */
.site-header-cart .cart-contents.is-empty .count{ display:none; }

/* Dropdown mini-cart */
.site-header-cart .widget_shopping_cart{
  width:320px;
  right:0;
  margin-top:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart{
  left:auto;           /* Storefront đặt left:0; với nút hẹp phải neo theo phải */
  right:0;
}
.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message{
  margin:0;
  padding:22px 20px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
.site-header-cart .widget_shopping_cart .cart_list{ padding:6px 16px; }
.site-header-cart .widget_shopping_cart .total{
  padding:12px 16px;
  margin:0;
  background:var(--cream);
  border-top:1px solid var(--line);
}
.site-header-cart .widget_shopping_cart .buttons{
  padding:0 16px 16px;
  margin:0;
  display:flex;
  gap:8px;
}
.site-header-cart .widget_shopping_cart .buttons .button{
  flex:1;
  padding:.7em 1em;
  font-size:13px;
  text-align:center;
}

/* Trang landing: bỏ khoảng cách mặc định, cho phép section tràn viền.
   Storefront đặt margin-bottom qua selector 4 class:
   `.home.page:not(.page-template-template-homepage) .site-header` (0,4,0),
   nên override phải đạt độ ưu tiên tương đương trở lên — không dùng !important. */
body.home.page.moit-landing .site-header,
body.moit-landing .site-header{ margin-bottom:0; }
body.moit-landing #content.site-content{ padding-top:0; }
body.moit-landing #content .col-full{
  max-width:100%;
  margin-left:0;
  margin-right:0;
  padding:0;
}
body.moit-landing .site-main{ margin-bottom:0; }
body.moit-landing .entry-header,
body.moit-landing .storefront-breadcrumb{ display:none; }

/* ---------------------------------------------------------
   3. Nút — dùng chung cho Storefront + WooCommerce
   --------------------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  background-color:var(--red);
  color:#fff;
  border-radius:999px;
  padding:.85em 1.9em;
  font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:.02em;
  text-shadow:none;
  border:1px solid transparent;
  transition:.22s ease;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  background-color:var(--red-dark);
  color:#fff;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
  background-color:var(--red);
  color:#fff;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover{
  background-color:var(--red-dark);
}

/* Nút phụ (ví dụ "Cập nhật giỏ hàng") */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled]{
  background-color:var(--cream-2);
  color:var(--muted);
}

/* ---------------------------------------------------------
   4. Form
   --------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select,
.select2-container .select2-selection--single{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background-color:#fff;
  box-shadow:none;
  padding:.7em .9em;
}
input:focus,
textarea:focus,
select:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(168,30,45,.1);
  outline:none;
}

/* ---------------------------------------------------------
   4b. Focus — chỉ báo bàn phím
   Storefront dùng `a:focus{outline:2px solid #7f54b3}` (tím WooCommerce),
   và :focus kích hoạt cả khi bấm CHUỘT nên click vào logo là hiện khung.
   Chuyển sang :focus-visible — trình duyệt chỉ bật khi điều hướng bằng
   bàn phím. Giữ nguyên khả năng tiếp cận, bỏ khung thừa khi click.
   --------------------------------------------------------- */
a:focus,
button:focus{ outline:none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--red);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------------------------------------------------------
   5. WooCommerce — shop loop
   --------------------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.15em;
  color:var(--ink);
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--red);
  font-family:var(--font-serif);
  font-weight:700;
}
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del{
  color:var(--muted);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:.75em;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins{ text-decoration:none; }

.woocommerce span.onsale{
  background-color:var(--red);
  color:#fff;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.06em;
  font-size:.75em;
  padding:.4em 1em;
  min-height:auto;
  line-height:1.6;
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before{ color:var(--gold-dark); }

/* ---------------------------------------------------------
   6. WooCommerce — trang sản phẩm đơn
   --------------------------------------------------------- */
.woocommerce div.product .product_title{ font-size:2.2em; }
.woocommerce div.product form.cart div.quantity input.qty{
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--red); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ font-weight:600; }

/* Bảng biến thể (Dung tích) */
.woocommerce div.product form.cart .variations label{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.8em;
  color:var(--muted);
}
.woocommerce div.product form.cart .reset_variations{ font-size:.85em; }

/* ---------------------------------------------------------
   7. WooCommerce — giỏ hàng & thanh toán
   --------------------------------------------------------- */
.woocommerce table.shop_table{
  border-radius:var(--radius);
  border-color:var(--line);
}
.woocommerce table.shop_table th{
  font-family:var(--font-sans);
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78em;
}
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3{
  font-family:var(--font-serif);
  color:var(--ink);
}
.woocommerce-cart .cart-collaterals .cart_totals table .order-total .amount,
.woocommerce-checkout .order-total .amount{
  color:var(--red);
  font-family:var(--font-serif);
  font-size:1.3em;
}
.woocommerce-info,
.woocommerce-message{
  background-color:var(--cream);
  color:var(--ink);
  border-top-color:var(--red);
}
.woocommerce-info::before,
.woocommerce-message::before{ color:var(--red); }
.woocommerce-error{ border-top-color:var(--red-soft); }

/* Thanh thông báo freeship trên giỏ hàng */
.moit-shipping-note{
  background:var(--cream);
  border:1px solid var(--line);
  border-left:3px solid var(--red);
  border-radius:var(--radius-sm);
  padding:.9em 1.2em;
  margin-bottom:1.4em;
  font-size:.95em;
}
.moit-shipping-note b{ color:var(--red); }

/* ---------------------------------------------------------
   8. Footer
   --------------------------------------------------------- */
.site-footer{
  background-color:var(--ink);
  color:#CFC6BF;
  padding-top:0;
  padding-bottom:0;
  font-size:.95em;
}
.site-footer a:not(.button){ color:#CFC6BF; text-decoration:none; }
.site-footer a:not(.button):hover{ color:var(--gold); }
.site-footer h1,.site-footer h2,.site-footer h3,
.site-footer .widget-title{
  color:#fff;
  font-family:var(--font-sans);
  font-size:.9em;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---- Footer 4 cột (moit_footer_columns) ---- */
.moit-footer{ padding:56px 0 44px; }

.moit-footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1.15fr .9fr 1.1fr;
  gap:40px;
}

.moit-footer h4{
  color:#fff;
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 16px;
}

.moit-footer ul{ list-style:none; margin:0; padding:0; }
.moit-footer li{ margin-bottom:10px; line-height:1.5; }
.moit-footer li:last-child{ margin-bottom:0; }

/* Logo footer: file logo màu đen nên đảo sang trắng */
.moit-footer-brand img{
  filter:brightness(0) invert(1);
  opacity:.92;
  margin-bottom:16px;
  height:auto;
}
.moit-footer-brand p{
  color:#9C918A;
  margin:0 0 18px;
  max-width:320px;
  line-height:1.7;
}

.moit-socials{ display:flex; gap:10px; }
.moit-socials a{
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:grid; place-items:center;
  color:#CFC6BF;
  transition:.2s ease;
}
.moit-socials a:hover{ background:var(--red); color:#fff; }

.moit-footer-contact span{ color:#8A7F78; font-size:.9em; }

.moit-footer-badges{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:18px;
}
.moit-footer-badges span{
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:4px 12px;
  font-size:11.5px;
  color:#9C918A;
  white-space:nowrap;
}

/* Dòng copyright của Storefront */
.site-footer .site-info{
  border-top:1px solid rgba(255,255,255,.1);
  padding:20px 0;
  color:#8A7F78;
  font-size:13px;
}

@media (max-width:1024px){
  .moit-footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:600px){
  .moit-footer{ padding:40px 0 32px; }
  .moit-footer-grid{ grid-template-columns:1fr; gap:30px; }
  .moit-footer-brand p{ max-width:none; }
}

/* ---------------------------------------------------------
   9. Thanh thông báo trên cùng (topbar)
   --------------------------------------------------------- */
.moit-topbar{
  background:var(--red);
  color:#fff;
  font-size:13px;
  letter-spacing:.04em;
}
.moit-topbar .moit-topbar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:9px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
}
.moit-topbar span{ display:flex; align-items:center; gap:7px; white-space:nowrap; }

@media (max-width:768px){
  .moit-topbar .moit-topbar-inner{ gap:16px; font-size:12px; justify-content:flex-start; }
}