*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --background_and_select_size: #fafafa; /** pozadi webu a kdyz si vybirame dopravu/velikost tak tohle pozadi kdyz se rozklikne vyber **/

    --product_detailed: #ededed; /** pozadi u produktu kdyz je rozkliknuty velky **/
    --product_text_button_and_hover: var(
        --gray-7
    ); /** tlacitko "pridat do kosiku" u produktu kdyz je rozkliknuty a pozadi rozsviceni "si" u vyberte "si" velikost **/
    --product_button_hover: #968068; /** tlacitko produktu kdyz je rozkliknuty a najedu na nej mysi **/
    --product_detail_name_underline: var(
        --gray-5
    ); /** podtrzeni nazvu naramku u produktu kdyz je rozkliknuty **/

    --toast: #968068; /** kdyz pridame do kosiku, tak ten text co vyjede v pravo **/
    --toast_err: #d30000; /** kdyz pridame do kosiku, tak ten text co vyjede v pravo **/

    --more_button_hover: #968068; /** kdyz najedu mysi na pridat do kosiku a kdyz mysi najedu na vsechny tlacitka krome toho u rozkliknuteho produktu (product_button_hover) **/
    --cart_num_and_shop_rules: #968068; /** kosik (barva kolecka okolo cisla) a obchodni podminky v kosiku (barva textu) **/
    --submit_button: #877157; /** tlacitko odeslat objednavku **/

    --button_navigate_and_delete: #baa791; /** tlacitko pro navigovat (v kontaktu) a odebrani produktu z kosiku **/

    --list_hover_name_and_short_description: rgba(
        74,
        74,
        74,
        0.4
    ); /** kdyz najedu mysi na naramky, ktere jsou v zalozce naramky **/

    --error: #ff3860; /** oznaceni policek ktere jsou spravne vyplnene (mail atd.) **/
    --success: #09c372; /** oznaceni policek ktere jsou SPATNE vyplnene (mail atd.) **/

    /** velikost pisma v menu — nadpis stranky (h1.section-heading) se z toho
        odvozuje, takze menu je vzdy o ~15 % vetsi a jde je rozeznat **/
    --nav-size: clamp(0.85rem, 4.6vw, 1.72rem);
}

span.begone {
    display: none;
}

html {
    --shadow-strength: 1%;
    --shadow-color: 220 3% 15%;
}

body {
    /* font-family: var(--font-sans); */
    font-family: "Now", var(--font-sans);
    letter-spacing: var(--font-letterspacing-1);
    font-size: var(--font-size-fluid-1);
    line-height: var(--font-lineheight-2);
    /* background-color: var(--violet-0); */
    background-color: var(--background_and_select_size);

    color: var(--gray-8);
}

header {
    color: var(--smoke-0);
    text-align: center;
}

header img {
    opacity: 0.75;
    padding-bottom: var(--size-fluid-1);
}

h1,
.site-title {
    padding-top: 8rem;
    background: url("img/Mineralky hneda-mini.webp");
    background-repeat: no-repeat;
    background-position: center 8%;
    font-size: var(--font-size-fluid-3);
    /* font-family: monospace; */
    font-weight: 400;
    font-family: "Playfair", "Now", monospace;
    letter-spacing: var(--font-letterspacing-2);
    max-inline-size: var(--size-header-2);
    color: #5b2c29ee;
    margin: auto;
}

h2 {
    letter-spacing: var(--font-letterspacing-4);
    font-size: var(--font-size-fluid-3);
}

h3 {
    font-size: var(--font-size-fluid-1);
    color: var(--gray-7);
}

h4 {
    font-size: var(--font-size-3);
    color: var(--gray-8);
}

main {
    display: grid;
    gap: var(--size-fluid-2);
    margin-inline: max(((100% - 70rem) / 2), var(--size-fluid-4));
}

.section-heading {
    text-align: center;
    /* Menu and this heading share the colour (--gray-6) and the font, so size
       is the only cue telling them apart — derive the heading from --nav-size
       and it stays ~15% smaller than the menu at every width (capped at its
       own fluid size so it never grows past the old design). */
    font-size: min(var(--font-size-fluid-1), calc(var(--nav-size) / 1.15));
    font-weight: 400;
    color: var(--gray-6);
    letter-spacing: var(--font-letterspacing-2);
    padding: var(--size-2) 0;
}

/* The brand wordmark styling lives on `h1, .site-title` (header). When a real
   page-topic H1 lives in the body (added for SEO so the page H1 isn't the
   brand), it shouldn't pick up the wordmark background / large padding /
   wordmark font. Reset the things h1 sets that the topic-class doesn't. */
h1.section-heading,
h1.blog-heading,
.product-text h1 {
    padding-top: 0;
    background: none;
    max-inline-size: none;
}
h1.section-heading {
    font-family: "Now", var(--font-sans);
}

li {
    float: left;
    display: grid;
    margin-left: var(--size-fluid-1);
    margin-right: var(--size-fluid-1);
    text-align: center;
}

li a {
    font-size: var(--font-size-fluid-1);
    line-height: var(--font-lineheight-1);
    color: var(--gray-6);
    text-decoration: none;
}

nav {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: var(--size-fluid-1) var(--size-fluid-4);
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--background_and_select_size);
}

/* Single row from 320px up (five items at --nav-size fit with room to spare).
   Gaps are `em` so they track the label size instead of staying a fixed 8px
   while the text grows; `nowrap` stops a label like "O mně" breaking in two. */
nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

nav li {
    font-size: var(--nav-size);
    margin-inline: 0.3em;
}

/* Below 320px (Fold-style cover screens) five items can't share a line at a
   readable size — wrap instead of shrinking the menu under the heading. */
@media screen and (max-width: 319px) {
    nav ul {
        flex-wrap: wrap;
    }
}

nav li a {
    font-size: inherit;
    white-space: nowrap;
}

nav .active {
    color: var(--gray-7);
}

nav a:hover {
    transition: transform 30ms;
    transform: scale(1.13);
}

.container {
    margin: var(--size-1);
}

.row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--size-content-1), 1fr));
    /* center vertically, stretch horizontally: cards fill their column. The srcset `sizes` hint otherwise shrinks the shrink-to-fit item to ~250px on desktop. */
    place-items: center stretch;
}

/* Empty-listing notice (lib/listing_ssr.js). #shop is an auto-fit grid, so
   without the full-row span the text would sit squeezed in the first column. */
.shop-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--size-fluid-3) 0;
    color: var(--gray-6);
    font-size: var(--font-size-fluid-1);
}

.row-about-me {
    overflow: hidden;
    display: flex;
    width: 100%;
}

.row-about-me img {
    margin: 5px;
    overflow: hidden;
    object-fit: cover;
    width: 100%;
}

.image {
    position: relative;
    /* background: #EEE5E9; */
    margin: var(--size-3);
    overflow: hidden;
}

.product-details {
    display: grid;
    object-fit: contain;
    grid-template-columns: repeat(
        auto-fit,
        minmax(calc(var(--size-content-1) + 2.1rem), 1fr)
    );
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: var(--product_detailed);
    /* background: #dbd6d0; */
    /* background: #EEE1F5; */
    /* background: #EEE5E9; */
    margin: var(--size-3);
    overflow: hidden;
}

.product-text {
    display: flex;
    flex-wrap: wrap;
    margin: var(--size-3);
}

.product-text h1,
.product-text h2 {
    float: left;
    border-bottom: var(--size-1) solid var(--product_detail_name_underline);
    text-align: left;
    letter-spacing: var(--font-letterspacing-2);
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    font-family: "Now", var(--font-sans);
    color: var(--gray-8);
    font-weight: 400;
}

.product-text header {
    margin-bottom: var(--size-3);
}

.product-type-label {
    float: left;
    width: 100%;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: var(--font-letterspacing-2);
    color: var(--gray-6);
    text-transform: uppercase;
    margin-bottom: var(--size-1);
}

.product-text footer {
    margin-top: var(--size-3);
}

.product-text footer h4 {
    margin-top: var(--size-1);
    margin-bottom: var(--size-3);
}

.product-text p {
    float: left;
    letter-spacing: var(--font-letterspacing-1);
    font-size: var(--font-size-3);
}

.product-text button {
    width: 10rem;
    font-size: var(--font-size-1);
    margin-top: var(--size-4);
    padding: 0.65rem var(--size-2);
    border-radius: var(--size-2);
    border: none;
    background: var(--product_text_button_and_hover);
    color: #fff;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.product-text button:focus {
    background: var(--product_button_hover);
    outline: 0;
}

.product-text button:hover {
    background: var(--product_button_hover);
}

.product-text label {
    font-size: var(--font-size-3);
    font-weight: 500;
}

.product-text footer {
    display: grid;
    width: 100%;
}

select {
    width: 10rem;
    text-align: center;
    padding: var(--size-2);
    border-radius: var(--size-2);
    border: 1px solid var(--gray-9);
    /* background-color: var(--violet-0); */
    background-color: var(--background_and_select_size);
    color: var(--gray-9);
    /* old-support */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-size: var(--size-1);
    background-position: calc(100% - 1.3em) center;
    background-repeat: no-repeat;
}

select::-ms-expand {
    display: none;
}

.product-text footer span {
    font-weight: 900;
}

footer {
    transition: 0.7s ease-out;
}

.product-text footer:hover span:nth-child(1):before {
    content: "si";
}

.product-text label span {
    transition: 0.5s ease-out;
}

.product-text footer:hover label span:nth-child(1) {
    margin-left: var(--font-letterspacing-3);
}

.product-text footer:hover label span {
    color: var(--product_text_button_and_hover);
    text-shadow:
        0 0 var(--size-1) #fff,
        0 0 var(--size-2) #fff,
        0 0 var(--size-3) #fff;
}

.image img {
    width: 100%;
    height: auto; /* width/height attrs set a height presentational hint; without this the img renders at the literal attr height (elongated) instead of deriving height from the 100% width via aspect-ratio */
    display: block;
    position: relative;
    vertical-align: top;
    transition: 0.6s;
    transition-property: opacity;
}

.image:hover img {
    cursor: pointer;
}

.image .details {
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    width: 100%;
    padding-bottom: var(--size-fluid-4);
    background: var(--list_hover_name_and_short_description);
    background-size: cover;
    opacity: 0;
}

.image .details h2 {
    opacity: 0;
    text-align: left;
    font-size: var(--font-size-3);
    text-transform: uppercase;
    font-weight: 300;
    padding-left: var(--size-fluid-1);
    background-size: cover;
    background: var(--list_hover_name_and_short_description);
    transition: 0.4s;
    transition-property: transform, opacity;
}

.image .details h2 span {
    font-weight: 600;
}

.image:hover .details {
    opacity: 1;
}

.image:hover .details h2 {
    opacity: 1;
    transform: translateY(calc(var(--size-fluid-2) * -1));
}

.image .details p {
    margin: 0 var(--size-fluid-1) 0 var(--size-fluid-1);
    font-size: var(--size-font-1);
    font-weight: 200;
    text-align: left;
    opacity: 0;
    transition: 0.6s;
    transition-property: opacity, transform;
}

.image:hover .details p {
    opacity: 1;
    transform: translateY(calc(var(--size-fluid-2) * -1));
}

.image .details .card-price {
    font-weight: 600;
}

.card-name-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.card-name-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.more {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--size-fluid-1);
    bottom: calc(var(--size-fluid-5) * -1);
    transition: 0.6s;
    transition-property: bottom;
}

.image:hover .more {
    bottom: 0;
    cursor: pointer;
}

.more .read-more {
    color: #000;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
}

.more .read-more span {
    font-weight: 900;
}

.more span {
    transition: 0.5s ease-out;
}

.buytext {
    margin: 0;
    padding: 0;
    border: 0;
}

.more:hover span:nth-child(1):before {
    content: "mě";
}

.more:hover span:nth-child(1) {
    margin-left: var(--font-letterspacing-4);
}

.more:hover span {
    color: var(--more_button_hover);
    /* color: #957186; */
    text-shadow:
        0 0 var(--size-1) #fff,
        0 0 var(--size-2) #fff,
        0 0 var(--size-3) #fff;
}

.wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.project {
    display: flex;
}
.shop {
    flex: 75%;
}
.box {
    display: flex;
    width: 100%;
    height: 220px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff;
    transition: all 0.6s ease;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.box-contact {
    display: flex;
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff;
    transition: all 0.6s ease;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.box-contact img {
    width: 200px;
    object-fit: cover;
}

.content > * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box:hover {
    border: none;
    transform: scale(1.01);
}

.box img {
    width: 200px;
    object-fit: cover;
    cursor: pointer;
}
.content {
    padding: 20px;
    width: 100%;
    position: relative;
}
.content h3 {
    font-size: var(--font-size-3);
    margin-bottom: var(--size-4);
}
.content h4 {
    margin-bottom: 2.4rem;
    font-size: var(--font-size-2);
}

.content p {
    font-size: var(--font-size-2);
}

.btn-area {
    position: absolute;
    font-size: var(--font-size-1);
    margin-top: var(--size-4);
    padding: 0.65rem var(--size-2);
    border-radius: var(--size-2);
    border: none;
    background: var(--button_navigate_and_delete);
    bottom: 20px;
    right: 20px;
    color: white;
}
.btn-area-contact {
    position: absolute;
    font-size: var(--font-size-1);
    margin-top: var(--size-4);
    padding: 0.65rem var(--size-2);
    border-radius: var(--size-2);
    border: none;
    background: var(--button_navigate_and_delete);
    bottom: 20px;
    right: 20px;
    color: white;
    text-decoration: none;
}

.btn-area:hover,
.btn-area-contact:hover {
    cursor: pointer;
    background-color: var(--more_button_hover);
    color: #fff;
}
.unit input {
    width: 40px;
    padding: 5px;
    text-align: center;
    margin-left: 19px;
}
.btn-area i {
    margin-right: 5px;
}

.bar {
    width: 100%;
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 5px;
    background: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    font-size: var(--font-size-3);
}

.bar a {
    color: var(--cart_num_and_shop_rules);
    /* color: #957186; */
}

.bar.id p {
    font-size: var(--font-size-1);
}

.bar hr {
    margin-bottom: var(--size-4);
}

.right-bar {
    flex: 35%;
    margin-left: 20px;
    padding: 20px;
    /* height: 500px; */
    border-radius: 5px;
    background: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.right-bar hr {
    margin-bottom: 25px;
}
.right-bar p {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    font-size: 20px;
}

.right-bar .agree {
    display: block;
}

.agree a {
    color: var(--cart_num_and_shop_rules);
}

.right-bar input {
    width: 50%;
}

.right-bar textarea {
    width: 55%;
    padding: 5px;
    resize: vertical;
    font-family: inherit;
    font-size: inherit;
    border: 1px solid var(--gray-4);
    border-radius: var(--radius-1);
    vertical-align: top;
}

.right-bar textarea::placeholder {
    opacity: 0.6;
}

.input-control.error textarea {
    border-color: var(--error);
}

.right-bar #submit-btn {
    background-color: var(--submit_button);
    /* background-color: #dbabbe; */
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-weight: 500;
}
.right-bar i {
    margin-right: 15px;
}
.right-bar #submit-btn:hover {
    background-color: var(--more_button_hover);
}

.shopping-cart {
    font-family: sans-serif;
    text-decoration: none;
    position: fixed;
    right: 1rem;
    bottom: 3rem;

    width: 4rem;
    height: 4rem;
    background-color: #fff;
    border-radius: 15%;
    /* outline: .5rem solid transparent; */

    text-align: center;
    line-height: 4rem;

    cursor: pointer;
    box-shadow: 0 0.2rem 0.6rem #0006;
    transition: 0.5s ease-in-out;
    z-index: 1;
}

#agreement {
    float: right;
    width: 2rem;
    height: 2rem;
    accent-color: var(--cart_num_and_shop_rules);
    margin-right: 0;
    cursor: pointer;
}

.shopping-cart-button {
    text-decoration: none;
    color: var(--gray-8);
}

.shop-select {
    background-color: #fff;
    border-radius: var(--size-1);
    margin-top: var(--size-2);
    margin-bottom: var(--size-2);
    height: 2rem;
    width: 6.5rem;
}

.shop-label {
    font-size: var(--font-size-2);
    margin-bottom: var(--size-5);
}

.toast-wrapper {
    /* display: none; */
    width: 16rem;
    padding: 30px 20px;
    position: fixed;
    bottom: 6rem;
    right: 0;
    overflow: hidden;
    z-index: -1;
}

.toast-wrapper-err {
    /* display: none; */
    width: 18rem;
    padding: 30px 20px;
    position: fixed;
    bottom: 6rem;
    right: 0;
    overflow: hidden;
    z-index: -1;
}

#toast {
    width: 14rem;
    height: 4rem;
    padding: 1rem;
    background-color: #ffffff;
    box-shadow: 0 5px 10px var(--toast);
    border-left: 16px solid var(--toast);
    border-radius: 7px;
    transform: translate(16rem);
    /* transition: 0.5s; */
}

#toast-err {
    width: 18rem;
    height: 5rem;
    padding: 1rem;
    background-color: #f3dede;
    box-shadow: 0 5px 10px var(--toast_err);
    border-left: 16px solid var(--toast_err);
    border-radius: 7px;
    transform: translate(18rem);
    /* transition: 0.5s; */
}

#toast h3 {
    /* font-weight: 600; */
    font-weight: 600;
    font-size: var(--font-size-2);
}

.shopping-cart::before {
    text-decoration: none;
    position: absolute;
    content: attr(data-product-count);

    top: -0.5rem;
    right: -0.5rem;

    width: 2rem;
    height: 2rem;

    color: #fff;
    background-color: var(--cart_num_and_shop_rules);
    /* font-family: sans-serif; */

    border-radius: 50%;

    text-align: center;
    line-height: 2rem;
}

.cart-icon {
    outline: none;
    text-decoration: none;
    font-size: 2rem;
    transition: 0.5s ease-in-out;
}

.modal {
    display: none;
    margin: 0;
    transform: translate(0, 0);
    overflow: auto;
    padding: 1rem;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
    z-index: 2;
}

#modal-message {
    /* top padding leaves room for the absolutely-positioned .close-modal button */
    padding: 3rem 1.25rem 1.25rem 1.25rem;
    font-size: 1.05rem;
    line-height: 1.45;
    word-break: break-word;
    max-width: min(560px, 92vw);
    max-height: 70vh;
    overflow-y: auto;
    margin: 0 auto;
}

.close-modal {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    font-size: 2rem;
    border: none;
    background: var(--button_navigate_and_delete);
    border-radius: 10%;
    padding: var(--size-1) var(--size-2);
    cursor: pointer;
    z-index: 100;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 1;
}

.input-control.success input {
    border-color: var(--success);
}

.input-control.error input {
    border-color: var(--error);
}

.input-control .error {
    display: flex;
    flex-direction: row-reverse;
    color: var(--error);
    font-size: 12px;
    height: 15px;
}

/* #ppl-parcelshop-map svg, #ppl-parcel-shop-map.smap, .language-wrapper{
  display: none;
} */

@media screen and (max-width: 1250px) {
    .wrapper {
        max-width: 95%;
    }
    .box img {
        width: 200px;
        object-fit: cover;
    }

    .right-bar input {
        width: 8rem;
    }
}

@media screen and (max-width: 950px) {
    .project {
        flex-direction: column;
    }
    .right-bar {
        margin-left: 0;
        margin-bottom: 20px;
    }

    .right-bar input {
        width: 13rem;
    }
}

@media screen and (max-width: 700px) {
    .content h3 {
        font-size: var(--font-size-2);
        margin-bottom: var(--size-1);
    }
    .content h4 {
        font-size: var(--font-size-1);
        margin-bottom: var(--size-3);
    }

    .content p {
        font-size: var(--font-size-1);
    }

    .shop-label {
        font-size: var(--font-size-1);
    }

    .shop-select {
        margin-top: var(--size-1);
        /* margin-bottom: var(--size-1); */
    }

    .row-about-me {
        flex-direction: column;
    }
    .other-img {
        display: none;
    }

    /* The 2rem–3rem fluid inline padding is a third of a phone screen — give
       the five menu items that room back. */
    nav {
        padding-inline: var(--size-2);
    }
}

@media screen and (max-width: 450px) {
    html {
        display: grid;
    }

    main {
        margin: 0.7rem;
    }

    .box-contact {
        display: flex;
        width: 100%;
        height: 180px;
        overflow: hidden;
        margin-bottom: 20px;
        background: #fff;
        transition: all 0.6s ease;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

    .box img {
        width: 140px;
        object-fit: cover;
    }

    .box-contact img {
        width: 10rem;
        object-fit: fill;
    }

    .content h3 {
        font-size: var(--font-size-2);
        margin-bottom: var(--size-1);
    }
    .content h4 {
        font-size: 14px;
        margin-bottom: var(--size-2);
    }

    .btn2 {
        display: none;
    }

    .btn-area {
        padding: var(--size-2) var(--size-2) var(--size-2) var(--size-3);
    }

    header img {
        height: 12ch;
    }

    .unit input {
        margin-left: 1rem;
    }

    .bar p {
        font-size: var(--font-size-1);
    }
}

@media screen and (max-width: 350px) {
    .box-contact {
        height: 200px;
    }

    .box-contact img {
        width: 7.5rem;
        object-fit: fill;
    }

    .box img {
        width: 120px;
        object-fit: cover;
    }

    .content h3 {
        font-size: var(--font-size-1);
        margin-bottom: var(--size-1);
    }
    .content h4 {
        font-size: 12px;
        margin-bottom: var(--size-3);
    }

    .content .unit {
        font-size: 13px;
        margin-bottom: var(--size-1);
    }

    .shop-label {
        font-size: 13px;
    }

    .right-bar input {
        width: 7rem;
    }

    .unit input,
    select {
        font-size: 12px;
    }

    .content {
        padding-left: 10px;
        padding-right: 5px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .btn-area {
        right: 10px;
        bottom: 15px;
    }

    .input-control .error {
        font-size: 10px;
    }

    .bar p {
        font-size: 0.8rem;
    }

    .bar.id p {
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 300px) {
    .content {
        padding-left: 3px;
        padding-right: 0px;
        padding-top: 7px;
        padding-bottom: 5px;
    }

    .btn-area {
        right: 8px;
        bottom: 10px;
    }

    .btn2-contact {
        display: none;
    }
}

/* ---------- Mobile card layout ---------- */
/* On touch-sized screens hover doesn't fire, so we make the overlay always
   visible: details flow below the image, name + price + add-to-cart are
   readable without any interaction. */

@media (max-width: 600px) {
    .image.item {
        overflow: visible;
        background: var(--product_detailed);
        border-radius: var(--size-2);
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        padding: var(--size-2);
    }
    .image.item > a:first-child img {
        border-radius: var(--size-1);
    }
    .image.item .details {
        position: static;
        opacity: 1;
        background: none;
        color: var(--gray-8);
        padding: var(--size-2) 0 0 0;
    }
    .image.item .details h2,
    .image.item:hover .details h2 {
        opacity: 1;
        transform: none;
        transition: none;
        background: none;
        color: var(--gray-8);
        padding-left: 0;
    }
    .image.item .details p,
    .image.item:hover .details p,
    .image.item .details .card-price {
        opacity: 1;
        transform: none;
        transition: none;
        color: var(--gray-8);
        margin-left: 0;
        margin-right: 0;
    }
    .image.item .details .card-price {
        margin-top: var(--size-2);
        margin-bottom: var(--size-2);
    }
    .image.item .more {
        position: static;
        width: auto;
        background-color: var(--more_button_hover);
        padding: var(--size-2) var(--size-fluid-1);
        border-radius: var(--size-1);
        margin: var(--size-1) 0 0 0;
        justify-content: center;
    }
    .image.item .more .read-more {
        color: #fff;
        font-size: var(--font-size-2);
    }
    .card-name-link {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

/* ---------- Blog ---------- */

.blog-heading {
    text-align: center;
    margin: var(--size-fluid-2) 0;
    font-family: "Playfair", "Now", monospace;
    font-weight: 400;
    font-size: 1.9rem;
}

.blog-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--size-fluid-2);
    margin: 0 auto;
    max-inline-size: var(--size-content-3);
}

.blog-list li {
    float: none;
    display: block;
    margin: 0;
    text-align: left;
    padding: var(--size-fluid-2);
    background: var(--product_detailed);
    border-radius: var(--radius-2);
    transition: transform 0.2s ease-out;
}

.blog-list li:hover {
    transform: translateY(-2px);
}

.blog-list li a {
    text-decoration: none;
    color: var(--gray-8);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--size-fluid-2);
    align-items: center;
}

.blog-list li a:not(:has(.blog-thumb)) {
    display: block;
}

.blog-thumb {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-2);
    display: block;
}

.blog-card-text {
    min-width: 0;
}

@media (max-width: 480px) {
    .blog-list li a {
        grid-template-columns: 1fr;
    }
    .blog-thumb {
        width: 100%;
        height: 200px;
    }
}

.blog-list h3 {
    font-family: "Playfair", "Now", monospace;
    font-size: 1.3rem;
    color: var(--gray-8);
    margin-bottom: var(--size-2);
}

.blog-list .blog-date,
.blog-post .blog-date {
    color: var(--gray-6);
    font-size: var(--font-size-1);
    margin-bottom: var(--size-fluid-2);
}

.blog-list p.blog-excerpt {
    color: var(--gray-7);
    font-size: 1rem;
    line-height: var(--font-lineheight-3);
}

.blog-post {
    max-inline-size: 80ch;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: var(--font-lineheight-3);
    color: var(--gray-8);
}

.blog-hero {
    display: block;
    width: 100%;
    max-width: 520px;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--radius-2);
    margin: var(--size-2) auto var(--size-fluid-2);
}

.blog-post .blog-back a {
    color: var(--gray-6);
    text-decoration: none;
    font-size: 0.95rem;
}

.blog-post .blog-back a:hover {
    color: var(--more_button_hover);
}

.blog-post h1 {
    background: none;
    padding-top: var(--size-fluid-2);
    font-size: 1.75rem;
    font-family: "Now", var(--font-sans);
    color: var(--gray-8);
    text-align: left;
    max-inline-size: none;
}

.blog-post h2 {
    font-family: "Now", var(--font-sans);
    font-size: 1.25rem;
    font-weight: 500;
    margin: var(--size-fluid-2) 0 var(--size-2);
    letter-spacing: var(--font-letterspacing-1);
}

.blog-post h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: var(--size-fluid-1) 0 var(--size-2);
    color: var(--gray-8);
}

.blog-post p {
    margin: var(--size-2) 0;
}

.blog-post ul,
.blog-post ol {
    padding-left: var(--size-fluid-2);
    margin: var(--size-2) 0;
}

.blog-post ul li,
.blog-post ol li {
    float: none;
    display: list-item;
    margin: var(--size-1) 0;
    text-align: left;
}

.blog-post a {
    color: var(--submit_button);
}

.blog-post hr {
    border: none;
    border-top: 1px solid var(--gray-4);
    margin: var(--size-fluid-2) 0;
}

.blog-post code {
    background: var(--gray-2);
    padding: 0 var(--size-1);
    border-radius: var(--radius-1);
    font-size: 0.95em;
}

.blog-post pre {
    background: var(--gray-2);
    padding: var(--size-2);
    border-radius: var(--radius-2);
    overflow-x: auto;
}

.blog-post blockquote {
    margin: var(--size-2) 0;
    padding-left: var(--size-3);
    border-left: 3px solid var(--gray-4);
    color: var(--gray-7);
    font-style: italic;
}

.blog-post img {
    display: block;
    width: 100%;
    max-width: 520px;
    max-height: 340px;
    object-fit: cover;
    border-radius: var(--radius-2);
    margin: var(--size-fluid-2) auto;
}

.blog-post a:has(> img) {
    display: block;
}

/* Site-wide footer (added with the blog) */
.site-footer {
    margin-top: var(--size-fluid-4);
    padding: var(--size-fluid-2) var(--size-fluid-2);
    border-top: 1px solid var(--gray-3);
    text-align: center;
}

.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--size-fluid-2);
    justify-content: center;
}

.site-footer li {
    float: none;
    display: inline-block;
    margin: 0;
}

.site-footer a {
    color: var(--gray-6);
    text-decoration: none;
    font-size: 0.95rem;
}

.site-footer a:hover {
    color: var(--more_button_hover);
}