/* ============================================================
   Living Stone - Infigo styling
   Based on the public Living Stone real-estate visual identity.
   Functional/layout rules from the original CSS are preserved
   as much as possible; changes focus on colour, typography,
   buttons, navigation and component finish.
   ============================================================ */

:root {
    /* Living Stone inspired palette */
    --ls-black: #171717;
    --ls-white: #ffffff;
    --ls-off-white: #f7f5f2;
    --ls-soft-grey: #ece9e5;
    --ls-mid-grey: #77736f;
    --ls-border: #d8d3cd;

    --ls-plum: #8a235b;
    --ls-plum-dark: #6f1947;
    --ls-green: #087a55;
    --ls-green-dark: #065f43;
    --ls-salmon: #f2aaa0;

    --ls-radius: 2px;
    --ls-transition: 160ms ease;
}

html {
    scroll-behavior: smooth;
    font-size: 100%;
    -webkit-font-smoothing: antialiased;
    color: var(--ls-black);
    background-color: var(--ls-white);
}

body,
button,
input,
select,
textarea {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--ls-black);
}

/* generic elements - typography */
p {
    line-height: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

ul,
ol {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

ul li,
ol li {
    line-height: 1.5rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
    margin-top: 0;
    margin-bottom: 0;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--ls-black);
    margin-top: 1.5rem;
    margin-bottom: 0;
    letter-spacing: -0.025em;
}

h1 {
    font-size: 1.75rem;
    margin-bottom: 2rem;
    font-weight: 700;
    line-height: 1.05;
}

h2 {
    font-size: 1.35rem;
    margin-bottom: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

h3 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

h4 {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
}

h5 {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

h6 {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Links */
a {
    color: var(--ls-plum);
    transition: color var(--ls-transition);
}

a:hover,
a:focus {
    color: var(--ls-plum-dark);
}

/* generic elements - buttons */
input.catfish-button,
button.catfish-button,
.button.is-primary,
a.button.is-primary {
    min-height: 42px;
    height: auto;
    padding: 10px 20px;
    border: 1px solid var(--ls-plum);
    border-radius: var(--ls-radius);
    background-color: var(--ls-plum);
    color: var(--ls-white);
    text-align: center;
    min-width: 50px;
    width: fit-content !important;
    text-transform: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: none;
    transition: background-color var(--ls-transition),
                border-color var(--ls-transition),
                color var(--ls-transition),
                transform var(--ls-transition);
}

input.catfish-button:hover,
input.catfish-button:focus,
button.catfish-button:hover,
button.catfish-button:focus,
.button.is-primary:hover,
.button.is-primary:focus,
a.button.is-primary:hover,
a.button.is-primary:focus {
    background-color: var(--ls-plum-dark);
    border-color: var(--ls-plum-dark);
    color: var(--ls-white);
}

/* Secondary / neutral Bulma-style buttons */
.button.is-light {
    background-color: var(--ls-off-white);
    border-color: var(--ls-border);
    color: var(--ls-black);
    border-radius: var(--ls-radius);
}

.button.is-light:hover,
.button.is-light:focus {
    background-color: var(--ls-soft-grey);
    border-color: var(--ls-black);
    color: var(--ls-black);
}

/* generic elements - top navigation */
#main-nav {
    background-color: var(--ls-white);
    color: var(--ls-black);
    border-bottom: 1px solid var(--ls-border);
    box-shadow: none;
}

#logorow .navbar .navbar-brand {
    background-color: transparent;
}

a.navbar-item,
.navbar-link {
    color: var(--ls-black);
    font-weight: 600;
    transition: background-color var(--ls-transition), color var(--ls-transition);
}

a.navbar-item:hover,
a.navbar-item:focus,
.navbar-link:hover,
.navbar-link:focus {
    background-color: var(--ls-off-white);
    color: var(--ls-plum);
}

.navbar-dropdown {
    background-color: var(--ls-white);
    border-top: 2px solid var(--ls-plum);
    box-shadow: 0 10px 28px rgba(23, 23, 23, 0.10);
}

.navbar-dropdown a.navbar-item,
.navbar-dropdown .navbar-link {
    color: var(--ls-black);
}

.navbar-dropdown a.navbar-item:hover,
.navbar-dropdown a.navbar-item:focus {
    background-color: var(--ls-off-white);
    color: var(--ls-plum);
}

.content-field-navbar .navbar-link:not(.is-arrowless)::after {
    border-color: var(--ls-black);
}

a.button.is-primary[href="/cart"] {
    border-radius: var(--ls-radius);
}

/* Form elements */
input.input,
textarea.textarea,
select,
.select select {
    border-color: var(--ls-border);
    border-radius: var(--ls-radius);
    box-shadow: none;
}

input.input:focus,
textarea.textarea:focus,
select:focus,
.select select:focus {
    border-color: var(--ls-green);
    box-shadow: 0 0 0 1px var(--ls-green);
}

/* product landing page - hide sliders */
.hideSliders .dynamicProductOptionTable.is-fullwidth {
    display: none;
}

/* product landing page - attribute selection */
/* html.page-catalog-product div.name_paperSizePro .attribute-item.columns.is-multiline {
    flex-flow: nowrap;
} */

@media only screen and (min-width: 768px) {
    .attributes .name_paperSizePro .attribute-value-item.column {
        max-width: 25%;
    }
}

html.page-catalog-product div.name_paperSizePro .attribute-item.columns.is-multiline .attributeValueInfo {
    font-size: 10px;
    color: var(--ls-mid-grey);
}

/* product landing page - modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 243, 96, 0.72);
    z-index: 100;
}

.modal-content {
    background-color: var(--ls-white);
    margin: 100px auto;
    padding: 20px;
    width: 90%;
    border-top: 4px solid var(--ls-salmon);
    border-radius: var(--ls-radius);
    box-shadow: 0 12px 36px rgba(23, 23, 23, 0.18);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

/* upload page */
/* move and hide the delete icons */
.upload-pages .gallery__item .gallery__item__delete {
    position: absolute;
    top: -1.75rem;
    z-index: 2;
    right: 0.5rem;
    left: 0.5rem;
    display: none;
}

.upload-pages .gallery__item:first-of-type .gallery__item__delete {
    display: inherit;
}

.upload-pages__dimensions {
    display: none;
}

.upload-pages .attributesUploadPageContainer .rawAttributeInfo__item .title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ls-black);
}

.upload-pages .queue__item__report li {
    font-size: 1rem;
}

/* cart page */
textarea#checkout_attribute_13 {
    tab-size: 50; /* allows to display tabs when pasting from XLS (for a distribution list) */
    font-size: medium;
    border-color: var(--ls-border);
}

textarea#checkout_attribute_13:focus {
    border-color: var(--ls-green);
    box-shadow: 0 0 0 1px var(--ls-green);
}

/* product attributes - radio buttons - icons -> vouwmethode */
.name_Vouwmethode .attribute-value-item.column {
    padding: 10px;
}

.name_Vouwmethode .attribute-value-item label.button,
.name_Vouwmethode .attribute-value-item label.button:focus,
.name_Vouwmethode .attribute-value-item label.button:hover {
    height: 145px;
    background-color: var(--ls-off-white);
    color: var(--ls-black);
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius);
    box-shadow: none;
}

.name_Vouwmethode .attribute-value-item label.button:hover,
.name_Vouwmethode .attribute-value-item label.button:focus {
    background-color: var(--ls-white);
    color: var(--ls-black);
    border-color: var(--ls-green);
}

/* Common selected-state variants used by Infigo/Bulma implementations */
.name_Vouwmethode .attribute-value-item label.button.is-primary,
.name_Vouwmethode .attribute-value-item label.button.is-selected,
.name_Vouwmethode .attribute-value-item label.button.is-active {
    background-color: var(--ls-green);
    color: var(--ls-white);
    border-color: var(--ls-green);
}

.name_Vouwmethode span.text {
    position: absolute;
    bottom: 2px;
    width: 90%;
    white-space: initial;
    font-weight: 700;
}

.name_Vouwmethode .attributeValueInfo {
    margin: 0.5rem 0;
    margin-top: -15px;
    font-size: 0.833em;
    color: var(--ls-mid-grey);
}

.attributeValueInfo img {
    height: 40px;
    vertical-align: middle;
}

/* ------ */
.best-for-me-icon {
    width: 120px;
    height: 150px;
    text-align: center;
    margin: 10px auto 20px;
}

.best-for-me .content-inner-container h3 {
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.best-for-me .content-inner-container ul {
    list-style: disc;
    margin: 0 0 0 20px;
    text-align: left;
}

label.button div.attributeValueInfo:not(:empty),
label.button div.attributeValueInfo img {
    padding: 5px;
}

.first-column {
    column-count: 2;
    column-gap: 0;
    min-width: 400px;
}

/* FAQ page */
div.faq-intro {
    text-align: left;
}

.multipart-preview .cf_imageViewer_pageCounter {
    display: none;
}

/* Products images - fit neatly inside their frame */
.product-item--image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Category/product tiles: keep image fully visible inside square frame */
section.category-product-section a.image.is-1by1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}