/*
Theme Name: Atimoly
Theme URI: https://example.com/atimoly
Author: Atimoly
Description: Custom beauty & skincare WooCommerce theme. Warm brown palette, cream rounded cards, hero slider, 4-column product grids. Fully customizable from Appearance > Customize.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: atimoly
Tags: e-commerce, woocommerce, custom-colors, custom-logo, responsive-layout
*/

/* ==========================================================================
   1. CSS VARIABLES (overridden live by the Customizer, see inc/customizer.php)
   ========================================================================== */
:root {
  --at-brown: #8b5a2b;          /* header / page background */
  --at-brown-dark: #6f4620;     /* hover states */
  --at-cream: #f8f5f2;          /* content cards */
  --at-white: #ffffff;
  --at-black: #111111;          /* buttons / hero CTA */
  --at-price: #e8892b;          /* orange price */
  --at-text: #5a3a1c;           /* body text inside cream cards */
  --at-font-sans: "Helvetica Neue", Arial, sans-serif;
  --at-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --at-radius: 36px;
  --at-gap: 10px;
  --at-cols: 4;
  --at-max: 1200px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--at-brown);
  color: var(--at-white);
  font-family: var(--at-font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
.screen-reader-text {
  position: absolute !important; clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden;
}
.at-container { width: 100%; max-width: var(--at-max); margin: 0 auto; padding: 0 16px; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.site-header {
  background: var(--at-brown);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}
.site-logo { display: flex; align-items: center; gap: 8px; color: #fff; }
.site-logo svg { width: 38px; height: 38px; }
.site-logo img { max-height: 44px; width: auto; }
.site-logo__text {
  font-size: 1.6rem; letter-spacing: .06em; font-weight: 400; text-transform: uppercase;
}
.main-nav ul { display: flex; gap: 26px; }
.main-nav a {
  font-weight: 700; font-size: 1.05rem; padding-bottom: 2px; color: #fff;
  border-bottom: 2px solid transparent;
}
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav a:hover { border-bottom-color: #fff; }
.header-icons { display: flex; align-items: center; gap: 16px; }
.header-icons button, .header-icons a {
  background: none; border: 0; color: #fff; cursor: pointer; padding: 4px;
  display: inline-flex; position: relative;
}
.header-icons svg { width: 26px; height: 26px; }
.cart-count {
  position: absolute; top: -4px; right: -6px;
  background: #fff; color: var(--at-brown); font-size: .7rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.cart-count:empty, .cart-count[data-count="0"] { display: none; }
.nav-toggle { display: none !important; }

/* Search drawer */
.search-drawer { display: none; background: var(--at-brown-dark); padding: 12px 0; }
.search-drawer.is-open { display: block; }
.search-drawer form { display: flex; gap: 8px; }
.search-drawer input[type=search] {
  flex: 1; padding: 10px 18px; border-radius: 30px; border: 0; font-size: 1rem;
}
.search-drawer button {
  background: var(--at-black); color: #fff; border: 0; border-radius: 30px; padding: 0 22px; cursor: pointer;
}

/* ==========================================================================
   4. HERO SLIDER
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: #d9c7b7; }
.hero__slide {
  display: none; position: relative; min-height: 420px;
  background-size: cover; background-position: center right;
  align-items: center;
}
.hero__slide.is-active { display: flex; }
.hero__content { max-width: 560px; padding: 40px 0; color: #1a1a1a; }
.hero__title {
  font-family: var(--at-font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.35; margin: 0 0 28px;
}
.hero__title::first-letter { font-size: 1.25em; }
.btn-hero {
  display: inline-block; background: var(--at-black); color: #fff;
  padding: 16px 52px; border-radius: 40px; font-size: 1.5rem; font-family: var(--at-font-sans);
  transition: transform .2s, background .2s;
}
.btn-hero:hover { transform: translateY(-2px); background: #333; }
.hero__dots {
  position: absolute; bottom: 14px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
}
.hero__dots button {
  width: 14px; height: 10px; border-radius: 6px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.7); padding: 0; transition: width .3s;
}
.hero__dots button.is-active { width: 42px; background: #fff; }

/* ==========================================================================
   5. PRODUCT GRID + CARD
   ========================================================================== */
.section-title {
  font-size: 1.35rem; font-weight: 700; text-transform: none; margin: 18px 0 10px; color: #fff;
}
.section-title--caps { text-transform: uppercase; }
.product-grid {
  display: grid; grid-template-columns: repeat(var(--at-cols), 1fr);
  gap: var(--at-gap); margin-bottom: 18px;
}
.product-card {
  background: #fff; color: #000; display: flex; flex-direction: column;
  border: 1px solid #fff; overflow: hidden;
}
.product-card__img { aspect-ratio: 1 / 1; overflow: hidden; background: #f3f3f3; }
.product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.product-card:hover .product-card__img img { transform: scale(1.05); }
.product-card__title {
  font-size: .85rem; font-weight: 700; margin: 4px 6px 0; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card__price { color: var(--at-price); font-weight: 700; margin: 0 6px; font-size: .95rem; }
.product-card__price del { opacity: .5; font-weight: 400; margin-right: 4px; }
.product-card__price ins { text-decoration: none; }
.product-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 6px 6px; margin-top: auto;
}
.product-card .star-rating { float: none; margin: 0; font-size: .95rem; color: #000; }
.add-to-cart-icon {
  background: none; border: 0; padding: 0; cursor: pointer; color: #000;
  width: 36px; height: 36px; display: inline-flex;
}
.add-to-cart-icon svg { width: 100%; height: 100%; }
.add-to-cart-icon.loading { opacity: .4; }
.add-to-cart-icon.added { color: var(--at-price); }
.added_to_cart { display: none !important; }

/* ==========================================================================
   6. CARD PAGES (About / Contact) - cream rounded card over background image
   ========================================================================== */
.page-hero {
  position: relative; min-height: calc(100vh - 64px);
  background-size: cover; background-position: center right;
  display: flex; align-items: center; padding: 16px 0;
}
.cream-card {
  background: rgba(248,245,242,.94); border-radius: var(--at-radius);
  padding: 28px 36px; width: min(100%, 490px);
  color: var(--at-text); text-align: center;
}
.cream-card h1, .cream-card h2.card-title {
  color: var(--at-brown); font-size: 1.15rem; margin: 0 0 14px; font-weight: 700;
}
.cream-card p { font-family: var(--at-font-serif); font-size: .95rem; margin: 0 0 14px; }
.cream-card a { text-decoration: underline; }

/* Contact form */
.contact-form { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.contact-form input, .contact-form textarea {
  width: 100%; max-width: 282px; background: #fff; color: #333;
  border: 1px solid var(--at-brown); border-radius: 26px;
  padding: 14px 18px; font-family: var(--at-font-serif); font-style: italic; font-size: 1rem;
}
.contact-form textarea { min-height: 130px; border-radius: 26px; resize: vertical; }
.contact-form ::placeholder { color: #c9b3a1; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--at-brown); }
.btn-send {
  background: var(--at-brown); color: #fff; border: 0; cursor: pointer;
  padding: 10px 28px; border-radius: 30px; font-size: 1.5rem; font-weight: 700;
  font-family: var(--at-font-sans); transition: background .2s;
}
.btn-send:hover { background: var(--at-brown-dark); }
.form-notice { padding: 8px 14px; border-radius: 12px; font-size: .9rem; margin-bottom: 10px; }
.form-notice.ok { background: #e6f4e6; color: #1e5a1e; }
.form-notice.err { background: #fbe5e5; color: #8a1f1f; }
.hp-field { position: absolute; left: -9999px; }

/* ==========================================================================
   7. WOOCOMMERCE (single, cart, checkout) - brown theme integration
   ========================================================================== */
.woo-wrap { background: var(--at-cream); color: var(--at-text); padding: 28px 0 48px; }
.woo-wrap .at-container > h1 { color: var(--at-brown); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce #place_order {
  background: var(--at-brown); color: #fff; border-radius: 30px; padding: 12px 26px; font-weight: 700;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce button.button.alt:hover, .woocommerce #place_order:hover { background: var(--at-brown-dark); color: #fff; }
.woocommerce .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--at-price); font-weight: 700; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 20px; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--at-brown); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--at-brown); }
.woocommerce table.shop_table { border-radius: 16px; background: #fff; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select { border-radius: 14px; padding: 10px 14px; border: 1px solid var(--at-brown); }
.woocommerce-breadcrumb { color: var(--at-text); }
.woo-wrap ul.products { display: grid; grid-template-columns: repeat(var(--at-cols), 1fr); gap: var(--at-gap); }
.woo-wrap ul.products::before, .woo-wrap ul.products::after { display: none; }
.woo-wrap ul.products li.product { width: auto; margin: 0; float: none; }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer { background: var(--at-brown-dark); color: #fff; padding: 22px 0; text-align: center; font-size: .9rem; }
.site-footer a { text-decoration: underline; }

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  :root { --at-cols: 3; }
}
@media (max-width: 720px) {
  :root { --at-cols: 2; }
  .nav-toggle { display: inline-flex !important; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--at-brown); padding: 12px 16px 18px;
    border-top: 1px solid rgba(255,255,255,.25);
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 14px; }
  .site-logo__text { font-size: 1.25rem; }
  .hero__slide { min-height: 340px; background-position: 70% center; }
  .hero__content { max-width: 60%; }
  .btn-hero { font-size: 1.2rem; padding: 12px 34px; }
  .cream-card { padding: 22px 20px; border-radius: 28px; }
  .page-hero { align-items: flex-start; padding-top: 14px; }
}
@media (max-width: 420px) {
  .hero__content { max-width: 75%; }
}