/* ==========================================================================
   CUSTOM FIXES — gramkilogram.ru
   Created: 2026-03-28
   
   All rules are OUTSIDE @layer to override Tailwind v4 layered styles.
   Organized by component. Each block documents the issue it fixes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PRODUCT CARD — equal height, image fill, footer alignment
   -------------------------------------------------------------------------- */

/*
 * Fix: Card images have template class "h-auto" which overrides the CSS
 * height:100% needed for aspect-ratio fill. Force consistent image sizing.
 */
.gk-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Fix: Card body needs flex:1 to push footer to bottom across all cards.
 * The source CSS has this, but critical.css reset (* { margin:0; padding:0 })
 * may interfere. Re-declare to ensure specificity.
 */
.gk-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gk-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;
    min-width: 0;
}

/*
 * Fix: Card name should expand to fill available space, pushing footer down.
 * margin-bottom:auto alone is set in source, but flex behavior needs flex-grow.
 */
.gk-card-name {
    flex-grow: 1;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * Fix: Card footer must always sit at the bottom regardless of content height.
 */
.gk-card-footer {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

/*
 * Fix: On small cards (mobile 2-col), reduce padding to prevent cramping.
 */
@media (max-width: 479px) {
    .gk-card-body {
        padding: 12px;
    }
    .gk-card-current-price {
        font-size: 14px;
    }
    .gk-card-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
}

/* --------------------------------------------------------------------------
   3. CONTAINER CONSISTENCY — single-product & footer use same max-width
   -------------------------------------------------------------------------- */

/*
 * Fix: Single product page uses max-w-7xl (80rem) + px-4 which is the same
 * 1280px but with fixed 16px padding. Normalize to match gk-container behavior.
 */
.woocommerce.single-product main > .max-w-7xl {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
}

/*
 * Fix: Footer uses max-w-7xl + px-4. Make it match the content container.
 */
footer .max-w-7xl {
    max-width: 1280px;
    padding-left: clamp(16px, 4vw, 48px);
    padding-right: clamp(16px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   4. SECTION SPACING — consistent vertical rhythm (8px grid)
   -------------------------------------------------------------------------- */

/*
 * Fix: Ensure consistent section spacing between hero, categories, trust, grid.
 */
.gk-hero {
    margin: 16px 0 24px;
}

.gk-section {
    margin: 24px 0;
}

.gk-trust {
    margin: 8px 0 24px;
}

.gk-section-title {
    margin: 24px 0 16px;
}

.gk-toolbar {
    margin-bottom: 16px;
}

/*
 * Fix: Category header on category pages.
 */
.gk-cat-header {
    padding: 16px 0;
}

.gk-page-title {
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   5. SINGLE PRODUCT PAGE — brand color consistency, spacing
   -------------------------------------------------------------------------- */

/*
 * Fix: Single product uses red accent (text-red-600, border-red-500) from 
 * Tailwind utility classes. Override to use brand color for links.
 */
.woocommerce.single-product .hover\:text-red-600:hover,
.woocommerce.single-product a.text-red-600 {
    color: var(--color-brand);
}

.woocommerce.single-product .border-red-500 {
    border-color: var(--color-brand);
}

.woocommerce.single-product .hover\:border-red-400:hover {
    border-color: var(--color-brand);
}

.woocommerce.single-product .bg-red-600 {
    background-color: var(--color-brand-dark);
}

/*
 * Fix: Product title on single product should match design system.
 */
.woocommerce.single-product h1 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-text);
}

@media (min-width: 768px) {
    .woocommerce.single-product h1 {
        font-size: 28px;
    }
}

/*
 * Fix: Quantity stepper input remove number spinners.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* --------------------------------------------------------------------------
   6. RELATED PRODUCTS — proper styling within design system
   -------------------------------------------------------------------------- */

/*
 * Fix: Related products section uses WC default <h2> with no proper styling.
 * Match the gk-section-title style.
 */
.related.products > h2,
.upsells.products > h2,
.cross-sells > h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin: 32px 0 16px;
    padding: 0;
    line-height: 1.3;
}

/*
 * Fix: Related products grid needs proper bottom margin.
 */
.related.products,
.upsells.products {
    margin-top: 48px;
    margin-bottom: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border-light);
}

/* --------------------------------------------------------------------------
   7. BREADCRUMBS — brand color instead of red
   -------------------------------------------------------------------------- */

/*
 * Fix: Breadcrumb links use hover:text-red-600 from template. Override to brand.
 */
.gk-breadcrumbs a:hover,
.gk-breadcrumbs .hover\:text-red-600:hover {
    color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   8. PAGINATION — brand color instead of red
   -------------------------------------------------------------------------- */

/*
 * Fix: WC inline CSS sets pagination to #db3340 (red). Override with brand.
 */
.woocommerce-pagination li a:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.woocommerce-pagination li span.current {
    background: var(--color-brand);
    color: white;
    border-color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   9. WC BUTTONS — brand color consistency
   -------------------------------------------------------------------------- */

/*
 * Fix: WC inline CSS uses red (#db3340) for buttons. Override with brand gold.
 */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: var(--color-brand);
    color: white;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
    background: var(--color-brand-dark);
}

/*
 * Fix: WC ordering select focus ring should be brand color.
 */
.woocommerce-ordering select:focus {
    outline: none;
    border-color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   10. TYPOGRAPHY — ensure headings are consistent
   -------------------------------------------------------------------------- */

/*
 * Fix: All h2 inside content should be consistently sized.
 */
.woocommerce.single-product .text-lg.font-bold {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   11. MOBILE RESPONSIVE — prevent horizontal overflow
   -------------------------------------------------------------------------- */

/*
 * Fix: Prevent any horizontal overflow at 375px viewport.
 */
html, body {
    overflow-x: hidden;
}

/*
 * Fix: At mobile widths, hero padding should be tighter.
 */
@media (max-width: 479px) {
    .gk-hero {
        padding: 32px 20px;
        border-radius: 12px;
        margin: 12px 0 20px;
    }
    .gk-hero-title {
        font-size: 24px;
    }
    .gk-hero-sub {
        font-size: 14px;
        margin-bottom: 24px;
    }
    .gk-hero-btn {
        padding: 12px 24px;
        font-size: 13px;
    }
}

/*
 * Fix: Trust bar items on mobile should wrap cleanly.
 */
@media (max-width: 479px) {
    .gk-trust {
        gap: 6px 16px;
        padding: 16px 0;
    }
    .gk-trust-item {
        font-size: 12px;
    }
}

/*
 * Fix: Product grid gap on small mobile.
 */
@media (max-width: 479px) {
    .gk-products-grid {
        gap: 10px;
    }
}

/*
 * Fix: Header actions on very small screens should have tighter spacing.
 */
@media (max-width: 374px) {
    .gk-header-inner {
        gap: 8px;
        padding: 0 12px;
    }
    .gk-actions {
        gap: 2px;
    }
    .gk-action {
        min-width: 40px;
        padding: 6px;
    }
}

/*
 * Fix: Pills (subcategory links) should scroll on mobile if too many.
 */
@media (max-width: 639px) {
    .gk-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .gk-pills::-webkit-scrollbar {
        display: none;
    }
    .gk-pill {
        flex-shrink: 0;
    }
}

/* --------------------------------------------------------------------------
   12. FOOTER — spacing and alignment fixes
   -------------------------------------------------------------------------- */

/*
 * Fix: Footer link spacing and hover brand color.
 */
footer a.hover\:text-white:hover {
    color: white;
}

footer .space-y-2 > a {
    display: block;
    padding: 2px 0;
}

/* --------------------------------------------------------------------------
   13. SEO TEXT SECTION — bottom breathing room
   -------------------------------------------------------------------------- */

.gk-seo-text {
    margin-top: 48px;
    padding: 32px 0 16px;
}

/* --------------------------------------------------------------------------
   14. WOOCOMMERCE NOTICES — match brand color
   -------------------------------------------------------------------------- */

.woocommerce-message {
    border-left-color: var(--color-success);
}

.woocommerce-info {
    border-left-color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   15. IMAGE LAZY LOAD — prevent layout shift
   -------------------------------------------------------------------------- */

/*
 * Fix: Product card images should maintain aspect ratio while loading.
 */
.gk-card-img {
    aspect-ratio: 1;
    background: #fafafa;
    overflow: hidden;
}

/*
 * Fix: Single product gallery image should not cause layout shift.
 */
.woocommerce.single-product .aspect-square {
    aspect-ratio: 1;
}

/*
 * Fix (Tailwind v4 layer-trap): unlayered `img { height: auto }` in app.css
 * overrides the `h-full` utility on the single-product gallery image, so tall
 * product photos (e.g. 217x800 bottle) grow past the square container and get
 * cropped by overflow:hidden. Higher-specificity unlayered rule restores fill
 * + object-contain so the WHOLE product is visible (letterboxed), not cropped.
 */
.aspect-square > img.object-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   16. PRODUCT LIST ITEM — WooCommerce default overrides
   -------------------------------------------------------------------------- */

/*
 * Fix: Remove WC default margin on product list items.
 */
ul.products li.product {
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
}

/*
 * Fix: Ensure the WC product grid uses our grid, not WC default float layout.
 */
ul.products.gk-products-grid {
    display: grid;
}

ul.products::after {
    display: none;
}

/* --------------------------------------------------------------------------
   17. ADD-TO-CART BUTTON — brand consistency on single product
   -------------------------------------------------------------------------- */

.gk-btn-cart {
    background: var(--color-brand);
    color: white;
}

.gk-btn-cart:hover {
    background: var(--color-brand-dark);
}

/*
 * Fix: "Added" state should use success green.
 */
.gk-add-to-cart.added {
    background: var(--color-success);
}

/* --------------------------------------------------------------------------
   18. SEARCH FORM — consistent focus ring color
   -------------------------------------------------------------------------- */

.gk-search-form:focus-within {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.15);
}

/* --------------------------------------------------------------------------
   19. HEADER LOGO — larger, clearer logo with GK badge
   -------------------------------------------------------------------------- */

/*
 * Fix: Logo was 40-44px height showing a tiny ship.
 * New logo (GK badge + text) needs 56-60px height for proper readability.
 * Use object-fit: contain to preserve proportions.
 */
.gk-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.gk-logo-img {
    display: block;
    height: 44px;
    width: auto;
    object-fit: contain;
    /* Убираем полоску по правому краю: filter / -webkit-optimize-contrast дают ореол при ресайзе PNG */
    filter: none;
    image-rendering: auto;
}

@media (min-width: 768px) {
    .gk-logo-img {
        height: 50px;
    }
}

@media (min-width: 1024px) {
    .gk-logo-img {
        height: 54px;
    }
}

/* Header height */
.gk-header-inner {
    height: 72px;
}

@media (min-width: 768px) {
    .gk-header-inner {
        height: 76px;
    }
}

/* --------------------------------------------------------------------------
   20. CATEGORY CARDS — increased padding, true centering
   -------------------------------------------------------------------------- */

/*
 * Fix: Category card text pressed against edges.
 * Increase horizontal padding to 16px and ensure centering.
 */
.gk-cat-item {
    padding: 24px 20px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    box-sizing: border-box;
}

.gk-cat-emoji {
    font-size: 40px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.gk-cat-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 479px) {
    .gk-cat-item {
        padding: 16px 12px;
        min-height: 110px;
        gap: 8px;
    }
    .gk-cat-emoji {
        font-size: 32px;
    }
    .gk-cat-label {
        font-size: 12px;
    }
}