/* =========================
   MiCandy / Vamili Katalog
   Soft Premium Editorial Style
   ========================= */

/* ===== 1) FONT IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

/* ===== 2) DESIGN TOKENS ===== */
:root {
    --bg: #fcfaf7;
    --bg-soft: #f6f1ea;
    --bg-soft-2: #f2ebe3;
    --card: #fffdfa;
    --text: #2d2824;
    --muted: #746c64;
    --line: #e6ddd3;
    --line-dark: #d7cabe;
    --accent: #b68d72;
    --accent-dark: #9f775d;
    --sage: #a9b39b;

    --radius-xs: 0px;
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-pill: 0px;

    --shadow-soft: none;
    --shadow-card: none;

    --container: 1240px;

    --fs-body: 16px;
    --fs-small: 13px;
    --fs-meta: 12px;
    --fs-price: 16px;
    --fs-title: 26px;
    --fs-h1: clamp(34px, 5vw, 56px);
    --fs-h2: clamp(28px, 4vw, 42px);
    --fs-h3: clamp(22px, 3vw, 30px);
}

/* ===== 3) GLOBAL RESET FEEL ===== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Jost", "Tw Cen MT", "Futura", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-weight: 300;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: .25s ease;
}

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

h1,
h2,
h3,
h4,
.page-title,
.section-title,
.product-title,
.entry-title {
    font-family: "Jost", serif;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.08;
    color: var(--text);
    margin: 0 0 .35em;
}

h1,
.page-title {
    font-size: var(--fs-h1);
}

h2,
.section-title {
    font-size: var(--fs-h2);
}

h3,
.entry-title {
    font-size: var(--fs-h3);
}

p {
    margin: 0 0 1em;
}

small,
.meta,
.muted,
.text-muted {
    color: var(--muted);
}

/* ===== 4) CONTAINER / SPACING ===== */
.container,
.site-width,
.wrap,
.inner,
.content-wrap,
.archive-header,
.catalog-wrap {
    width: min(100% - 32px, var(--container));
    margin-inline: auto;
}

section,
.section,
.block-section {
    padding-block: 15px;
}

@media (min-width: 992px) {

    section,
    .section,
    .block-section {
        padding-block: 20px;
    }
}

/* ===== 5) HEADER ===== */
.site-header,
header.site-header,
.main-header,
#site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(252, 250, 247, .9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}

.site-header .inner,
.main-header .inner,
#site-header .inner,
.site-header .container,
.main-header .container {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-logo,
.logo,
.custom-logo-link,
.brand-logo {
    font-family: "Jost", serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--text);
}

.site-nav,
.main-nav,
.nav-menu,
.primary-menu {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.site-nav a,
.main-nav a,
.nav-menu a,
.primary-menu a {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    position: relative;
    padding: 6px 0;
}

.site-nav a::after,
.main-nav a::after,
.nav-menu a::after,
.primary-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background: var(--text);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.site-nav a:hover,
.main-nav a:hover,
.nav-menu a:hover,
.primary-menu a:hover {
    color: var(--text);
}

.site-nav a:hover::after,
.main-nav a:hover::after,
.nav-menu a:hover::after,
.primary-menu a:hover::after {
    transform: scaleX(1);
}

/* ===== 6) PAGE HEAD / HERO ===== */
.page-head,
.catalog-hero,
.archive-header,
.page-header,
.shop-header {
    background: linear-gradient(to bottom, #f6f1ea 0%, #fcfaf7 100%);
    border-bottom: 1px solid var(--line);
    padding: 42px 0 28px;
}

.page-head p,
.catalog-hero p,
.archive-header p,
.page-header p {
    max-width: 720px;
    color: var(--muted);
    font-size: 16px;
}

.breadcrumb,
.breadcrumbs {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 14px;
}

/* ===== 7) COMMON BUTTONS ===== */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    border-radius: 0;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: none;
    transition: .25s ease;
    border: 1px solid var(--line-dark);
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: transparent;
    color: var(--accent-dark);
}

/* ===== 8) FORM / SEARCH / FILTER ===== */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
select,
textarea {
    font-family: "Jost", "Tw Cen MT", Futura, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-dark);
    border-radius: 0;
    min-height: 44px;
    padding: 10px 0;
    box-shadow: none;
    outline: none;
    transition: .2s ease;
}

textarea {
    border-radius: var(--radius-md);
    min-height: 120px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: transparent;
    border-bottom: 1px solid var(--text);
    box-shadow: none;
}

.catalog-filters,
.filter-bar,
.shop-filters,
.toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin: 18px 0 6px;
}

.catalog-search,
.search-wrap,
.search-form {
    position: relative;
}

.catalog-search input[type="search"],
.search-form input[type="search"] {
    min-height: 50px;
    padding-inline: 18px;
}

/* ===== 9) PRODUCT GRID ===== */
.products,
.product-grid,
.books-grid,
.catalog-grid,
ul.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 768px) {

    .products,
    .product-grid,
    .books-grid,
    .catalog-grid,
    ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px 22px;
    }
}

@media (min-width: 1200px) {

    .products,
    .product-grid,
    .books-grid,
    .catalog-grid,
    ul.products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 42px 26px;
    }
}

/* ===== 10) PRODUCT CARD ===== */
.product,
.product-card,
.book-card,
.products .product,
ul.products li.product {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    transition: transform .22s ease;
}

.product:hover,
.product-card:hover,
.book-card:hover,
.products .product:hover,
ul.products li.product:hover {
    transform: translateY(-3px);
}

/* image / thumb */
.product .thumb,
.product-card .thumb,
.book-card .thumb,
.product .product-image,
.product-card .product-image,
ul.products li.product a img,
.products .product img {
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

ul.products li.product a img,
.products .product img {
    width: 100%;
    aspect-ratio: 3 / 4.2;
    object-fit: cover;
    transition: transform .45s ease;
    border-radius: 0;
}

.product:hover img,
.product-card:hover img,
.book-card:hover img,
ul.products li.product:hover a img {
    transform: scale(1.02);
}

/* inner spacing after image */
.product .summary,
.product-card .summary,
.book-card .summary,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price {
    margin-top: 14px;
}

/* product meta */
.product .publisher,
.product .meta,
.product-card .publisher,
.product-card .meta,
.book-card .publisher,
.book-card .meta,
.product .format,
.book-format,
.book-publisher {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

/* product title */
.product .title,
.product-card .title,
.book-card .title,
ul.products li.product .woocommerce-loop-product__title,
.products .product .title {
    font-family: "Jost", serif;
    font-size: var(--fs-title);
    line-height: 1.08;
    font-weight: 600;
    color: var(--text);
    margin: 8px 0 8px;
    letter-spacing: .01em;
}

/* clamp 2 lines if browser supports */
.product .title,
.product-card .title,
.book-card .title,
ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* description / small text */
.product .desc,
.product-card .desc,
.book-card .desc,
.product .excerpt {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 10px;
}

/* price */
.price,
.product .price,
.product-card .price,
.book-card .price,
ul.products li.product .price {
    font-size: var(--fs-price);
    font-weight: 500;
    color: var(--text);
    margin-top: 6px;
}

.price del,
.product .price del,
ul.products li.product .price del {
    color: #9d9288;
    opacity: .9;
    margin-right: 6px;
}

.price ins,
.product .price ins,
ul.products li.product .price ins {
    text-decoration: none;
    color: var(--accent-dark);
}

/* actions */
.product .actions,
.product-card .actions,
.book-card .actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.product .actions .btn,
.product-card .actions .btn,
.book-card .actions .btn {
    padding: 10px 16px;
    font-size: 14px;
}

/* ===== 11) BADGES ===== */
.badge,
.stock,
.label,
.status-badge,
.onsale,
.out-of-stock,
.instock {
    display: inline-block;
    min-height: auto;
    padding: 0;
    border-radius: 0;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 0;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

.onsale {
    background: #f3ebe4;
    color: var(--accent-dark);
    border-color: #ead9ca;
}

.out-of-stock {
    background: #eee5dd;
    color: #8f655c;
}

.instock {
    background: #f3f1e9;
    color: #67735c;
}

/* if badge overlays image */
.product .badge-wrap,
.product-card .badge-wrap,
.thumb .badge,
.product .onsale,
ul.products li.product .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
}

/* ===== 12) COLLECTION / SECTION HEAD ===== */
.section-head,
.block-head,
.row-head,
.catalog-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.section-head p,
.block-head p,
.row-head p {
    color: var(--muted);
    max-width: 560px;
    margin: 0;
}

/* ===== 13) SOFT SECTION VARIANTS ===== */
.section-soft,
.soft-block,
.bg-soft {
    background: transparent;
    border: 0;
}

.section+.section {
    border-top: 1px solid rgba(0, 0, 0, .05);
}

.section-cream,
.bg-cream {
    background: var(--bg-soft-2);
}

/* ===== 14) PAGINATION ===== */
.pagination,
nav.pagination,
.woocommerce-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
    padding-top: 8px;
}

.pagination a,
.pagination span,
.woocommerce-pagination a,
.woocommerce-pagination span {
    min-width: auto;
    height: auto;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    transition: .2s ease;
}

.pagination a:hover,
.woocommerce-pagination a:hover {
    border-color: var(--text);
    background: var(--text);
    color: #fff;
}

.pagination .current,
.pagination .active,
.woocommerce-pagination .current {
    background: transparent;
    color: var(--text);
    border: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ===== 15) TABLES / MINI DATA BLOCKS ===== */
table {
    width: 100%;
    border-collapse: collapse;
    background: #fffdfa;
    border-radius: var(--radius-md);
    overflow: hidden;
}

th,
td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 14px;
}

th {
    color: var(--muted);
    font-weight: 600;
    background: #faf5ef;
}

/* ===== 16) SIDEBAR / FILTER BOX / WIDGET ===== */
.sidebar .widget,
.filter-box,
.widget-area .widget {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 24px;
    margin: 0 0 24px;
    border-bottom: 1px solid var(--line);
}

.sidebar .widget-title,
.filter-box .title,
.widget-area .widget-title {
    font-family: "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 14px;
}

/* ===== 17) CART MINI / SUMMARY BOX ===== */
.cart-box,
.summary-box,
.order-summary,
.mini-cart {
    background: #fffdfa;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-soft);
}

/* ===== 18) FOOTER ===== */
.site-footer,
footer.site-footer,
.main-footer,
#site-footer {
    margin-top: 84px;
    background: transparent;
    border-top: 1px solid var(--line);
    padding: 56px 0 28px;
}

.site-footer .grid,
.main-footer .grid,
.footer-grid {
    display: grid;
    grid-template-columns: 2.4fr .85fr .85fr;
    gap: 36px;
    align-items: start;
}

.site-footer .brand-title {
    grid-column: 2/4;
}

.site-footer .footer-contact {
    grid-column: 3;
}

.site-footer .footer-help {
    grid-column: 4;
}

@media (max-width: 900px) {

    .site-footer .grid,
    .main-footer .grid,
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {

    .site-footer .grid,
    .main-footer .grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

.site-footer h3,
.site-footer h4,
.main-footer h3,
.main-footer h4 {
    font-family: "Inter", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 14px;
}

.site-footer a,
.site-footer p,
.main-footer a,
.main-footer p {
    font-size: 14px;
    color: var(--text);
    line-height: 1.85;
}

.site-footer a:hover,
.main-footer a:hover {
    color: var(--accent-dark);
}

/* ===== 19) MOBILE TUNE ===== */
@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    .site-header .inner,
    .main-header .inner {
        min-height: 68px;
        gap: 14px;
    }

    .site-logo,
    .logo,
    .custom-logo-link {
        font-size: 26px;
    }

    .page-head,
    .catalog-hero,
    .archive-header,
    .page-header {
        padding: 30px 0 20px;
    }

    .products,
    .product-grid,
    .books-grid,
    .catalog-grid,
    ul.products {
        gap: 24px 16px;
    }

    .product .title,
    .product-card .title,
    .book-card .title,
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 22px;
    }
}

/* ===== 20) OPTIONAL NICE TOUCHES ===== */
hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 28px 0;
}

.card,
.panel,
.box {
    background: #fffdfa;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.notice,
.info-box {
    background: #fbf6f0;
    border: 1px solid #eadfd3;
    color: var(--text);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}