.home_cont{
    /* border: 2px solid red; */
}
.categories{
    /* border: 2px solid yellow; */
    height: 50px;
}
.slider,.owl-carousel{
    /* border: 2px solid pink; */
    margin: 0;
    padding: 0;
    height: 100px;
    /* border: 2px solid black; */
    box-shadow: 3px 3px 8px black;
    z-index: -1;
}
.card{
    border-right: 2px solid black;
    height: 100px;
    margin: 0;
    padding-top: 10px;
    text-align: center;
}
.slide_categorie{
    /* border: 2px solid black; */
}
.card_img{
    display: inline-block;
    max-width: 60%;
    margin-left: 20%;
    height: 70%;
    /* border: 1px solid green; */
}
.card_img_title{
    font-size: 16px;
}
.ctg_title{
    /* border-bottom: 2px solid black; */
    font-size: 29px;
    padding-left: 20px;
    padding-bottom: 10px;
}
.home_welcome{
    /* border: 2px solid red; */
    padding: 10px;
    text-align: center;
}
/* Same alpha-stop trap as .profile_user in profile.css: c5 is 0.773 alpha and da
   is 0.855, so this was never the pale grey it looks like in the source — it
   composited against --page and landed at #b6b5b4 → #dddbdb under the light theme
   but #83817f → #dddbdb under the dark one. The 30px welcome text inherits --ink,
   which is near-white in the dark theme, so it ran 1.2:1 over the pale end of that
   sweep. --surface + --ink is the card pairing the rest of the site uses and it
   flips with the theme, which is the only way text on this card can be readable in
   both. Shadow softened off pure black at 10px blur for the same reason it was in
   my_posts.css: a shadow tuned for a light page reads as a halo on a dark one. */
.welcome{
    /* border: 2px solid black; */
    background: var(--surface);
    color: var(--ink);
    width: 70%;
    display: inline-block;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    /* border-radius: 20% 20% 20% 20%; */
    padding: 15px;
}
.welcome_txt_a{
    font-size: 30px;
    display: block;
    padding-bottom: 15px;
}
.welcome_txt_b{
    font-size: 30px;
    display: block;
    padding-bottom: 10px;
}
.data_area{
    /* border: 2px solid brown; */
    margin-top: 15px;
    text-align: center;
}
/* The listing card behind every .cont_ctg / .cont_heading / .cont_price on
   /all-stock, /profile, /stock-profile/<n> and the search results — and it carried
   the same two alpha stops as .welcome above, so it composited to #b6b5b4 → #dddbdb
   light and #83817f → #dddbdb dark. That is what the note on .cont_ctg was really
   measuring against: --ink-3 reads 4.8:1 on --surface as that note says, but on this
   grey it was 2.35:1 light and 1.45:1 dark. Both were live failures, and the card
   being pale in the dark theme is why. --surface + --ink instead, the same swap made
   for .my_posts and .profile_mystatus_main, which puts --ink-3 back on the ground it
   was measured against. */
.data_area_cont{
    /* border: 2px solid black; */
    display: inline-block;
    /* height: 220px; */
    width: 22%;
    padding-bottom: 7px;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    margin-bottom: 18px;
    margin-right: 1%;
    background: var(--surface);
    color: var(--ink);
    }
.cont_pic{
    /* border: 2px solid purple; */
}
.cont_pic img{
    max-height: 220px;
    max-width: 100%;
}
.cont_detail{
    /* border: 2px solid yellow; */
    /* height: 100px; */
    text-align: left;
}
/* Neither .cont_price nor .t_a_detail carries its colour here: every card that
   uses them sets it with an inline style="" attribute, in all_stock.html,
   search_data.html, profile.html and stock_profile_user.html — twice per file,
   because the "load more" handler rebuilds the same markup as a JS string. Those
   were rgb(37,83,83) for the price (1.89:1 on the dark card, the most important
   field on a listing) and `gray` for the area/time row (3.6:1), and inline styles
   outrank anything written here, so the fix had to go where the literals were:
   --accent-ink and --ink-3. Search for style="color: var( to find all fourteen. */
.cont_price{
    /* border: 2px solid brown; */
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 5px;
}
.cont_ctg{
    /* border: 1px solid green; */
    display: block;
    font-size: 12px;
    /* font-weight: bold; */
    /* `grey`/`gray` is #808080 — 3.5:1 on the light page and 3.6:1 on the dark card,
       so it failed the 4.5 small-text floor in BOTH themes. --ink-3 is the muted-text
       tier the palette measures for exactly this job (4.8:1 light, 6.9:1 dark). */
    color: var(--ink-3);
    padding-bottom: 5px;
}
.cont_heading{
    /* border: 1px solid darkkhaki; */
    display: block;
    font-size: 17px;
    font-weight: bold;
    /* rgb(80,22,58) is the plum from before the rebrand — a fixed dark ink that
       worked only while the card under it was fixed and pale. On --surface it is
       1.3:1 in the dark theme. --primary keeps this a branded title rather than
       flattening it to body ink, and measures 5.2:1 light / 4.6:1 dark at 17px
       bold. */
    color: var(--primary-strong);
    padding-bottom: 5px;
    text-overflow: ellipsis;
}
.o_detail{
    padding: 5px 14px;
}
.t_a_detail{
    /* border: 2px solid palegreen; */
    padding: 0px 5px;
    font-size: 11px; 
    /* height: 20px; */
}
.adrs{
    float: left;
}
.time{
    float: right;
}
.view_more{
    /* border: 2px solid red; */
    text-align: center;
}
/* `brown` (#a52a2a) sits directly on --page here, not on a card: 2.26:1 in the dark
   theme, a dark red link on a near-black page. The plum border is pre-rebrand too.
   One token for both, so the button follows the palette: 4.9:1 light / 5.3:1 dark
   for the text, and the border clears the 3:1 non-text floor on the same numbers. */
.view_more a{
    border: 2px solid var(--primary);
    padding: 10px;
    display: inline-block;
    border-radius: 6px;
    color: var(--primary-strong);
}
/* The legacy footer: a plum band from before the rebrand, then a sheet-white strip
   under it with plum text. Neither was unreadable — white on #551640 is 13.3:1 and
   the plum on white is 10:1 — but both are fixed colours from the old palette, so
   the footer stayed plum-and-white while the site went brown, and the white strip
   was a lit block at the bottom of a dark-theme page. --header/--header-ink is the
   chrome pairing (dark in both themes by construction, which is why the whites in
   .about_cont and .footer can stay as a role rather than a literal), and the strip
   becomes a normal card: --surface with --ink-2 at 7.4:1 light / 8.8:1 dark. */
.footer{
    bottom: 0;
    color: var(--header-ink);
}
.footer_aboutus{
    background-color: var(--header);
}
.about_cont{
    display: inline-block;
    /* float: left; */
    width: 32%;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    color: var(--header-ink);
}
.about_cont i{
    font-size: 22px;
    cursor: pointer;
}
.footer_copyright{
    background-color: var(--surface);
}
.copyright_cont{
    display: inline-block;
    width: 45%;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: var(--ink-2);
}


                                /* Responsive  */


@media only screen and (max-width: 850px) {
    .data_area_cont{
        /* border: 2px solid black; */
        display: inline-block;
        /* height: 220px; */
        width: 30%;
        }
        .t_a_detail{
            font-size: 10px; 
        }

}
@media only screen and (max-width: 600px) {
    .data_area_cont{
        width: 45%;
        }
    .time{
        display: none;
    }
    .t_a_detail{
        font-size: 9px; 
    }
}

@media only screen and (max-width: 550px) {
    .welcome_txt_a{
        font-size: 20px;
    }
    .welcome_txt_b{
        font-size: 20px;
}
.t_a_detail{
    font-size: 8px; 
}
}
@media only screen and (max-width: 400px) {
    .welcome_txt_a{
        font-size: 16px;
    }
    .welcome_txt_b{
        font-size: 16px;
    }
    .cont_pic img{
        height: 180px;
        width: 100%;
    }
    .cont_heading{
        font-size: 13px;
    }
    .t_a_detail{
        font-size: 8px; 
    }
}
@media only screen and (max-width: 300px) {
    .welcome_txt_a{
        font-size: 14px;
    }
    .welcome_txt_b{
        font-size: 14px;
}
.t_a_detail{
    font-size: 7px; 
}
}