
/* ================================================================
                GRID SYSTEM

   Поддержка:
   - CSS Grid (основной)
   - Flex fallback (через @supports)
   ================================================================ */




/* ==================================|
            GRID — CORE              |
   =================================*/

/* grid */
/* .view-content,
.view-content .views-row .node .field.field--type-image.field__items {
    --cols: 1;
    --gap: 20px;
    --row-gap: 30px;
    --column-gap: 30px;

    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gap);
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}

.view-content .views-row {width: 100%;}
.view-content .views-row .node {width: 100%;}
.view-content .views-row .node .field--type-image {width: 100%;}
.view-content .views-row .node .field--type-image img {width: 100%; height: 100%; object-fit: cover;} */








/* ========================================================================|
            GRID — MODIFIERS - for .views-row in .view-content             |
   =======================================================================*/




/* C A T A L O G || Store (Taxonomy Main) */
.view.view-catalog-store.view-id-catalog_store .view-content {
    --cols: 2;
    --gap: 20px;
    --row-gap: 30px;
    --column-gap: 30px;

    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gap);
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}
.view.view-catalog-store.view-id-catalog_store .view-content .views-row {width: 100%;}
.view.view-catalog-store.view-id-catalog_store .view-content .views-row .node {width: 100%;}
.view.view-catalog-store.view-id-catalog_store .view-content .views-row .node .field--type-image {width: 100%;}
.view.view-catalog-store.view-id-catalog_store .view-content .views-row .node .field--type-image img {width: 100%; height: 100%; object-fit: cover;}
.view.view-catalog-store.view-id-catalog_store .view-content .views-row .taxonomy-term.taxonomy-term--view-mode-teaser {width: 100%;}
.view.view-catalog-store.view-id-catalog_store .view-content .views-row .taxonomy-term.taxonomy-term--view-mode-teaser .field--type-image {width: 100%;}
.view.view-catalog-store.view-id-catalog_store .view-content .views-row .taxonomy-term.taxonomy-term--view-mode-teaser .field--type-image img {width: 100%; height: 100%; object-fit: cover;}

/* C A T A L O G || Store (Products Main) */
.view.view-products-store.view-id-products_store .view-content {
    --cols: 3;
    --gap: 20px;
    --row-gap: 30px;
    --column-gap: 30px;

    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gap);
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}
.view.view-products-store.view-id-products_store .view-content .views-row {width: 100%;}
.view.view-products-store.view-id-products_store .view-content .views-row .node {width: 100%;}
.view.view-products-store.view-id-products_store .view-content .views-row .node .field--type-image {width: 100%;}
.view.view-products-store.view-id-products_store .view-content .views-row .node .field--type-image img {width: 100%; height: 100%; object-fit: cover;}
.view.view-products-store.view-id-products_store .view-content .views-row .commerce-product {width: 100%;}
.view.view-products-store.view-id-products_store .view-content .views-row .commerce-product .field--type-image {width: 100%;}
.view.view-products-store.view-id-products_store .view-content .views-row .commerce-product .field--type-image img {width: 100%; height: 100%; object-fit: cover;}






/* G A L L E R Y || !1 | nodes | photogallery (Nodes) */
.view.view-photogallery-nodes.view-id-photogallery_nodes .view-content {
    --cols: 4;
    --gap: 20px;
    --row-gap: 40px;
    --column-gap: 30px;

    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gap);
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}
.view.view-photogallery-nodes.view-id-photogallery_nodes .view-content .views-row {width: 100%;}
.view.view-photogallery-nodes.view-id-photogallery_nodes .view-content .views-row .node {width: 100%;}
.view.view-photogallery-nodes.view-id-photogallery_nodes .view-content .views-row .node .field--type-image {width: 100%;}
.view.view-photogallery-nodes.view-id-photogallery_nodes .view-content .views-row .node .field--type-image img {width: 100%; height: 100%; object-fit: cover;}





















/* =======================================================================|
            GRID — MODIFIERS - for .field__item in .views-row             |
   ======================================================================*/

/* B E N E F I T S */
/* .view.view-benefits.view-id-benefits .view-content .views-row .node.node--type-benefits.node--view-mode-teaser */
.node.node--type-benefits .field.field--name-field-benefits-set.field--type-text-long.field--label-hidden.field__items {
    --cols: 4;
    --gap: 20px;
    --row-gap: 30px;
    --column-gap: 30px;

    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gap);
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}
.node.node--type-benefits .field.field--name-field-benefits-set.field--type-text-long.field--label-hidden.field__items .field__item {width: 100%;}
.node.node--type-benefits .field.field--name-field-benefits-set.field--type-text-long.field--label-hidden.field__items .field__item img { width: 100%; height: 100%; object-fit: cover;}
























/* ==========================================================================|
            GRID — MODIFIERS - for .field__item on the Node Page             |
   =========================================================================*/

/* C A T A L O G || Store    (Products Commerce) */
.commerce-product.commerce-product--type-products-store.commerce-product--view-mode-full.product-full .field.field--name-field-product-photo-set.field--type-image.field--label-hidden.field__items {
    --cols: 4;
    --gap: 20px;
    --row-gap: 30px;
    --column-gap: 30px;

    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gap);
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}
.commerce-product.commerce-product--type-products-store.commerce-product--view-mode-full.product-full .field.field--name-field-product-photo-set.field--type-image.field--label-hidden.field__items .field__item {width: 100%;}
.commerce-product.commerce-product--type-products-store.commerce-product--view-mode-full.product-full .field.field--name-field-product-photo-set.field--type-image.field--label-hidden.field__items .field__item img { width: 100%; height: 100%; object-fit: cover;}



/* G A L L E R Y || separated | photo */
.node.node--type-photogallery.node--view-mode-full .field.field--name-field-photogallery-photo-set.field--type-image.field--label-hidden.field__items {
    --cols: 4;
    --gap: 20px;
    --row-gap: 30px;
    --column-gap: 30px;

    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    gap: var(--gap);
    column-gap: var(--column-gap);
    row-gap: var(--row-gap);
}
.node.node--type-photogallery.node--view-mode-full .field.field--name-field-photogallery-photo-set.field--type-image.field--label-hidden.field__items .field__item {width: 100%;}
.node.node--type-photogallery.node--view-mode-full .field.field--name-field-photogallery-photo-set.field--type-image.field--label-hidden.field__items .field__item img { width: 100%; height: 100%; object-fit: cover;}




/* ======================================|
            GRID — ADAPTIVER             |
   =====================================*/

@media (max-width: 1199px) {

    /* .views-row in .view-content */

        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-catalog-store.view-id-catalog_store .view-content {--cols: 2; --column-gap: 20px; --row-gap: 20px; }
        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-products-store.view-id-products_store .view-content {--cols: 3; --column-gap: 20px; --row-gap: 20px; }


        /* G A L L E R Y || !1 | nodes | photogallery (Nodes) */ .view.view-photogallery-nodes.view-id-photogallery_nodes .view-content {--cols: 4; --column-gap: 20px; --row-gap: 20px; }


    /* .field__item in row */

        /* B E N E F I T S */ .node.node--type-benefits .field.field--name-field-benefits-set.field--type-text-long.field--label-hidden.field__items {--cols: 4; --column-gap: 20px; --row-gap: 20px; }
    
    
    
    /* fields in card */

        /* C A T A L O G || Store    (Products Commerce) */ .commerce-product.commerce-product--type-products-store.commerce-product--view-mode-full.product-full .field.field--name-field-product-photo-set.field--type-image.field--label-hidden.field__items,

        /* G A L L E R Y || sep | photo */ .node.node--type-photogallery.node--view-mode-full .field.field--name-field-photogallery-photo-set.field--type-image.field--label-hidden.field__items
         {--cols: 4; --column-gap: 20px; --row-gap: 20px; }
}

@media (max-width: 991px) {

    /* .views-row in .view-content */

        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-catalog-store.view-id-catalog_store .view-content {--cols: 2; --column-gap: 20px; --row-gap: 20px; }
        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-products-store.view-id-products_store .view-content {--cols: 2; --column-gap: 20px; --row-gap: 20px; }
        

        /* G A L L E R Y || !1 | nodes | photogallery (Nodes) */ .view.view-photogallery-nodes.view-id-photogallery_nodes .view-content {--cols: 3; --column-gap: 20px; --row-gap: 20px; }


    /* .field__item in row */

        /* B E N E F I T S */ .node.node--type-benefits .field.field--name-field-benefits-set.field--type-text-long.field--label-hidden.field__items {--cols: 2; --column-gap: 20px; --row-gap: 20px; }
    
    
    
    /* fields in card */

        /* C A T A L O G || Store    (Products Commerce) */ .commerce-product.commerce-product--type-products-store.commerce-product--view-mode-full.product-full .field.field--name-field-product-photo-set.field--type-image.field--label-hidden.field__items,

        /* G A L L E R Y || sep | photo */ .node.node--type-photogallery.node--view-mode-full .field.field--name-field-photogallery-photo-set.field--type-image.field--label-hidden.field__items
         {--cols: 4; --column-gap: 20px; --row-gap: 20px; }
}

@media (max-width: 767px) {

    /* .views-row in .view-content */

        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-catalog-store.view-id-catalog_store .view-content {--cols: 2; --column-gap: 15px; --row-gap: 15px; }
        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-products-store.view-id-products_store .view-content {--cols: 2; --column-gap: 15px; --row-gap: 15px; }
        

        /* G A L L E R Y || !1 | nodes | photogallery (Nodes) */ .view.view-photogallery-nodes.view-id-photogallery_nodes .view-content {--cols: 2; --column-gap: 15px; --row-gap: 15px; }


    /* .field__item in row */

        /* B E N E F I T S */ .node.node--type-benefits .field.field--name-field-benefits-set.field--type-text-long.field--label-hidden.field__items {--cols: 2; --column-gap: 15px; --row-gap: 15px; }
    
    
    
    /* fields in card */

        /* C A T A L O G || Store    (Products Commerce) */ .commerce-product.commerce-product--type-products-store.commerce-product--view-mode-full.product-full .field.field--name-field-product-photo-set.field--type-image.field--label-hidden.field__items,

        /* G A L L E R Y || sep | photo */ .node.node--type-photogallery.node--view-mode-full .field.field--name-field-photogallery-photo-set.field--type-image.field--label-hidden.field__items
         {--cols: 3; --column-gap: 15px; --row-gap: 15px; }
}

@media (max-width: 575px) {
    /* .views-row in .view-content */

        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-catalog-store.view-id-catalog_store .view-content {--cols: 2; --column-gap: 15px; --row-gap: 15px; }
        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-products-store.view-id-products_store .view-content {--cols: 2; --column-gap: 15px; --row-gap: 15px; }
        

        /* G A L L E R Y || !1 | nodes | photogallery (Nodes) */ .view.view-photogallery-nodes.view-id-photogallery_nodes .view-content {--cols: 2; --column-gap: 15px; --row-gap: 15px; }


    /* .field__item in row */

        /* B E N E F I T S */ .node.node--type-benefits .field.field--name-field-benefits-set.field--type-text-long.field--label-hidden.field__items {--cols: 2; --column-gap: 15px; --row-gap: 15px; }
    
    
    
    /* fields in card */

        /* C A T A L O G || Store    (Products Commerce) */ .commerce-product.commerce-product--type-products-store.commerce-product--view-mode-full.product-full .field.field--name-field-product-photo-set.field--type-image.field--label-hidden.field__items,

        /* G A L L E R Y || sep | photo */ .node.node--type-photogallery.node--view-mode-full .field.field--name-field-photogallery-photo-set.field--type-image.field--label-hidden.field__items
         {--cols: 3; --column-gap: 15px; --row-gap: 15px; }
}

@media (max-width: 460px) {
    /* .views-row in .view-content */

        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-catalog-store.view-id-catalog_store .view-content {--cols: 1; --column-gap: 15px; --row-gap: 15px; }
        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-products-store.view-id-products_store .view-content {--cols: 1; --column-gap: 15px; --row-gap: 15px; }
        

        /* G A L L E R Y || !1 | nodes | photogallery (Nodes) */ .view.view-photogallery-nodes.view-id-photogallery_nodes .view-content {--cols: 1; --column-gap: 15px; --row-gap: 15px; }


    /* .field__item in row */

        /* B E N E F I T S */ .node.node--type-benefits .field.field--name-field-benefits-set.field--type-text-long.field--label-hidden.field__items {--cols: 1; --column-gap: 15px; --row-gap: 15px; }
    
    
    
    /* fields in card */

        /* C A T A L O G || Store    (Products Commerce) */ .commerce-product.commerce-product--type-products-store.commerce-product--view-mode-full.product-full .field.field--name-field-product-photo-set.field--type-image.field--label-hidden.field__items,

        /* G A L L E R Y || sep | photo */ .node.node--type-photogallery.node--view-mode-full .field.field--name-field-photogallery-photo-set.field--type-image.field--label-hidden.field__items
         {--cols: 2; --column-gap: 15px; --row-gap: 15px; }
}

@media (max-width: 350px) {    
    /* .views-row in .view-content */

        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-catalog-store.view-id-catalog_store .view-content {--cols: 1; --column-gap: 10px; --row-gap: 10px; }
        /* C A T A L O G || Store (Taxonomy Main) */ .view.view-products-store.view-id-products_store .view-content {--cols: 1; --column-gap: 10px; --row-gap: 10px; }
        

        /* G A L L E R Y || !1 | nodes | photogallery (Nodes) */ .view.view-photogallery-nodes.view-id-photogallery_nodes .view-content {--cols: 1; --column-gap: 10px; --row-gap: 10px; }


    /* .field__item in row */

        /* B E N E F I T S */ .node.node--type-benefits .field.field--name-field-benefits-set.field--type-text-long.field--label-hidden.field__items {--cols: 1; --column-gap: 10px; --row-gap: 10px; }
    
    
    
    /* fields in card */

        /* C A T A L O G || Store    (Products Commerce) */ .commerce-product.commerce-product--type-products-store.commerce-product--view-mode-full.product-full .field.field--name-field-product-photo-set.field--type-image.field--label-hidden.field__items,

        /* G A L L E R Y || sep | photo */ .node.node--type-photogallery.node--view-mode-full .field.field--name-field-photogallery-photo-set.field--type-image.field--label-hidden.field__items
         {--cols: 2; --column-gap: 10px; --row-gap: 10px; }
}



/* =======================================================|
            GRID — FALLBACK (NO GRID SUPPORT)             |
   ======================================================*/
@supports not (display: grid) {
    .view-content,
    .auto-grid {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
    }

    .view-content > *,
    .view-content .views-row .node .field.field--type-image.field__items > *,
    .auto-grid > * {
        flex: 0 0 calc(100% / var(--cols));
    }
}

















