/* hexfashion x Shared Mobile Foundation: adapter. Loaded only for an enabled store.
   Tokens are the theme's own header values (generated by gen_adapters.py); no layout rules here. */
body.sf-m.sf-m-t-hexfashion {
    --sf-m-header-bg: rgb(255, 255, 255);
    --sf-m-header-fg: rgb(68, 68, 68);
    --sf-m-header-line: rgb(240, 234, 230);
    --sf-m-header-line-w: 1px;
    --sf-m-color-accent: rgb(232, 96, 60);
    --sf-m-color-on-accent: rgb(0, 0, 0);
    --sf-m-drawer-bg: rgb(255, 255, 255);
    --sf-m-drawer-fg: rgb(44, 44, 44);
    --sf-m-bar-bg: rgb(255, 255, 255);
    --sf-m-bar-fg: rgb(44, 44, 44);
    --sf-m-bar-line: rgb(240, 234, 230);
    --sf-m-bar-active: rgb(232, 96, 60);
    --sf-m-sheet-bg: rgb(255, 255, 255);
    --sf-m-sheet-fg: rgb(26, 26, 26);
    --sf-m-sheet-line: rgb(240, 224, 214);
    --sf-m-control-bg: rgb(255, 255, 255);
    --sf-m-control-fg: rgb(26, 26, 26);
    --sf-m-control-line: rgb(240, 224, 214);
}

@media (max-width: 991.98px) {
    /* home "Our Store" widget: a fixed 190px category column beside the grid leaves 80-120px for the
       products on a phone (theme layout, identical with the foundation off). Categories go above. */
    body.sf-m.sf-m-t-hexfashion .hf-store-layout {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    body.sf-m.sf-m-t-hexfashion .hf-store-sidebar {
        inline-size: 100%;
    }

    body.sf-m.sf-m-t-hexfashion .hf-store-catlist {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.sf-m.sf-m-t-hexfashion .hf-store-grid {
        inline-size: 100%;
        min-inline-size: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body.sf-m.sf-m-t-hexfashion .hf-store-item {
        min-inline-size: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body.sf-m.sf-m-t-hexfashion .hf-store-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}