/*
Theme Name: Филькина Грамота
Theme URI: https://f-gramota.ru
Author: Филькина Грамота
Description: Кастомная тема WooCommerce для магазина оригинальных подарков и сувениров "Филькина Грамота"
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
WC requires at least: 8.0
WC tested up to: 9.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fgramota
Tags: woocommerce, e-commerce, custom-colors, custom-logo, full-width-template
*/

/* =====================================================
   CSS ПЕРЕМЕННЫЕ
===================================================== */
:root {
  --font-family: "Inter", sans-serif;
  --second-family: "Golos Text", sans-serif;
  --third-family: "Roboto Condensed", sans-serif;

  --temnyy-tekst: #2a2a2a;
  --seryy-tekst: #a9a9a9;
  --white: #fff;
  --light-grey: #b5b5b5;
  --light-yellow: #ffe5ae;
  --dark: #121212;
  --bright-yellow: #f0c568;
  --brown: #634607;
  --grey: #3b3b3b;
  --green: #d0fd43;
  --violet: #9055ec;
  --pink: #ff6cf3;
  --dark-blue: #007aff;
  --red: #ff2c30;
  --orange: #ff6200;
  --blue: #05d1ff;
  --light-blue: #a5e8e1;
  --light-pink: #faa1bf;
  --light-light-pink: #ffcfdf;
  --transparent-white: rgba(255, 255, 255, 0.5);
  --transparent-grey: rgba(181, 181, 181, 0.1);
  --transparent-for-window: rgba(181, 181, 181, 0.5);

  --header-top-bg: #3b3b3b;
  --header-main-bg: #2f2f2f;
  --accent: #ffc74e;
  --accent-hover: #ffb83b;
  --wrapper-max: 1200px;
}

/* =====================================================
   СБРОС И БАЗОВЫЕ СТИЛИ
===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  transition: opacity 0.2s, color 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  color: var(--temnyy-tekst);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
}

ul, ol, li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

input, button, textarea, select {
  outline: none;
  font-family: var(--font-family);
}

label {
  user-select: none;
}

/* =====================================================
   УТИЛИТЫ
===================================================== */
.wrapper {
  width: 100%;
  max-width: var(--wrapper-max);
  margin: 0 auto;
  padding: 0 20px;
}

.none { display: none !important; }
.mobile { display: none; }

/* =====================================================
   КНОПКИ
===================================================== */
.btn-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 16px;
  color: var(--temnyy-tekst);
  background: #fff;
  border-radius: 9px;
  padding: 0 20px;
  height: 41px;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.15s;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-accent {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 14px;
  color: var(--temnyy-tekst);
  background: var(--accent);
  border-radius: 9px;
  padding: 0 20px;
  height: 41px;
  cursor: pointer;
  border: none;
}

.btn-cart {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  color: var(--temnyy-tekst);
  background: var(--light-yellow);
  border-radius: 9px;
  padding: 0 16px;
  height: 35px;
  cursor: pointer;
  border: none;
  width: 100%;
  margin-top: 8px;
}

.btn-cart:hover {
  background: var(--bright-yellow);
}

/* =====================================================
   PRODUCT CARD (Карточка товара)
===================================================== */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.product-card__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.product-card__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__price {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.product-card__price .real-price {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 14px;
  color: var(--temnyy-tekst);
}

.product-card__price .old-price {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 12px;
  color: var(--seryy-tekst);
  text-decoration: line-through;
}

.product-card__title {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 13px;
  color: var(--temnyy-tekst);
  margin-top: 6px;
  line-height: 1.4;
}

.product-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.product-card__rating .stars {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--temnyy-tekst);
  font-weight: 600;
}

.product-card__rating .reviews {
  font-size: 12px;
  color: var(--dark-blue);
}

.product-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.badge {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.badge--hit {
  background: var(--red);
  color: #fff;
}

.badge--new {
  background: var(--green);
  color: var(--temnyy-tekst);
}

.badge--sale {
  background: var(--orange);
  color: #fff;
}

/* =====================================================
   СЕКЦИЯ: ЗАГОЛОВОК БЛОКА
===================================================== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.section-header h2,
.section-header h3 {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 24px;
  color: #2d2d2d;
}

.section-header a {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 14px;
  color: var(--temnyy-tekst);
}

/* =====================================================
   WooCommerce: базовые переопределения
===================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  margin-bottom: 0;
}

.woocommerce .woocommerce-ordering,
.woocommerce .woocommerce-result-count {
  font-family: var(--font-family);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--accent);
  color: var(--brown);
  font-family: var(--font-family);
  font-weight: 600;
  border-radius: 9px;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--accent-hover);
  color: var(--brown);
}

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

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: #7a5609;
  color: #fff;
}