/**
 * ArgonShop — functional interface styles.
 *
 * @package ArgonShop
 * @author  Ivan Voitkov
 *
 * ============================================================
 * PURPOSE
 * ============================================================
 *
 * This file contains the MINIMAL set of CSS required for
 * the plugin's JavaScript modules to work correctly. There is no
 * styling here — only functional element states.
 *
 * All styling (colors, sizes, fonts, spacing, grid,
 * element positioning) lives entirely in the theme and can
 * be replaced with any other design.
 *
 * ============================================================
 * SEPARATION PRINCIPLE
 * ============================================================
 *
 * Store CSS lives in the theme.
 * Store JS lives in the plugin.
 * Functional CSS (this file) lives in the plugin.
 *
 * CSS is considered "functional" if it:
 *   1. Is controlled by the plugin's JavaScript modules.
 *   2. Defines the initial state of elements that JS
 *      shows or hides while running.
 *   3. Is not related to visual styling and cannot be
 *      replaced in the theme without breaking the interface behaviour.
 *
 * ============================================================
 * WHAT NOT TO ADD TO THIS FILE
 * ============================================================
 *
 * - Colors, sizes, fonts, spacing, shadows.
 * - Responsive media queries.
 * - Grids and flexbox layouts.
 * - hover, focus, active styles.
 * - Decorative pseudo-elements.
 *
 * All of that belongs in the theme.
 *
 * ============================================================
 * IMPORTANT FOR THE THEME
 * ============================================================
 *
 * Store errors (.shoppingCartError, .submitError, etc.)
 * are hidden by default and shown by the JavaScript modules when
 * AJAX requests fail. The theme must define visual styles
 * for them (border, color, spacing), otherwise the user
 * will see only text without highlighting.
 *
 * ============================================================
 * JS CONTRACT
 * ============================================================
 *
 * If the theme rebuilds the markup of the cart, account or another
 * store block, it must keep the classes and attributes listed
 * in the header of the corresponding JS module (the "DOM ELEMENTS" block).
 *
 * The full list of selectors is in the file headers:
 *
 *   assets/interface/js/modules/cart.js
 *   assets/interface/js/modules/product.js
 *   assets/interface/js/modules/card-product.js
 *   assets/interface/js/modules/cabinet.js
 *   assets/interface/js/modules/search.js
 *   assets/interface/js/modules/sort.js
 *   assets/interface/js/modules/control-panels.js
 *   assets/interface/js/modules/request.js
 *   assets/interface/js/modules/catalog-page.js
 *   assets/interface/js/modules/menu-catalog.js
 *   assets/interface/js/modules/mobile-menu.js
 *   assets/interface/js/modules/consent.js
 *
 * ============================================================
 */

/* ============================================================
   TAB BLOCKS
   ============================================================
 *
 * Containers switched by panels (the control-panels.js module).
 * All are hidden by default. JS shows only the active block.
 *
 * If the theme uses its own selectors and overrides
 * display via media queries with !important (for example, showing
 * catalog child categories on desktop regardless of the tabs),
 * this still works: !important in the theme CSS takes priority
 * over the inline style set by JS.
 */

.blockItemPage {
    display: none;
}

/* ============================================================
   REGISTRATION IN THE CART
   ============================================================
 *
 * The login field block is hidden by default and shown
 * when the "Register an account?" checkbox is checked (the cart.js module).
 */

.cartLogin {
    display: none;
}

/* ============================================================
   ERROR MESSAGES
   ============================================================
 *
 * Shown by the JavaScript modules when AJAX requests fail or
 * validation errors occur. They must be invisible until JS runs.
 *
 * Visual styles (border, color, spacing) are in the theme.
 */

.shoppingCartError,
.submitError,
.errorDeleteProducts,
.as-error-sort,
#addProductError,
.card-addProductError {
    display: none;
}

/* ============================================================
   AJAX SEARCH RESULTS
   ============================================================
 *
 * Dropdown block with search results (the search.js module).
 * Shown when 2+ characters are typed.
 */

.searchAjaxResult {
    display: none;
}

/* ============================================================
   "SHOW ALL" BUTTON IN THE POPULAR QUERIES BLOCK
   ============================================================
 *
 * Shown by the request.js module only if the content
 * of the block is cut off by height.
 */

.view-allCards-request {
    display: none;
}

/* ============================================================
   LEGAL ENTITY FIELDS IN THE ACCOUNT
   ============================================================
 *
 * The table with legal entity fields is hidden and shown only when
 * the "Legal entity" checkbox is checked (the cabinet.js module).
 */

#accountLegalBlock {
    display: none;
}

/* ============================================================
   FUNCTIONAL STATE CLASSES
   ============================================================
 *
 * Classes that JavaScript adds to or removes from elements
 * while running.
 */

/**
 * Expanded state of the popular queries block (the request.js module).
 *
 * When the "Show all" button is clicked, the .block-cards-request block
 * gets the .is-expanded class and the max-height limit is removed.
 */
.block-cards-request.is-expanded {
    max-height: none;
}