/* =========================================================
CUBE AROMA — DEVICES PAGE
========================================================= */

.cube-products-page {
--cube-bg: #FFFDFB;
--cube-soft: #F8F1E8;
--cube-beige: #EAD6C9;
--cube-dark: #4D4C50;
--cube-grey: #5C5D60;

width: 100%;
margin: 0;
padding: 0;

background: var(--cube-bg);
color: var(--cube-dark);

font-family: "Cairo", sans-serif;

}

.cube-products-page *,
.cube-products-page *::before,
.cube-products-page *::after {
box-sizing: border-box;
}

.cube-products-page a {
color: inherit;
text-decoration: none;
}

/* =========================================================
HERO
========================================================= */

.cube-products-page .cube-products-hero {
    position: relative !important;

    width: 100%;
    height: 390px;

    overflow: hidden !important;

    background: var(--cube-beige);

    isolation: isolate;
}


.cube-products-page .cube-products-hero-image {
    position: absolute !important;
    inset: 0 !important;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: 0;
}


.cube-products-page .cube-products-hero-overlay {
    position: absolute !important;
    inset: 0 !important;

    width: 100%;
    height: 100%;

    z-index: 1;

    background:
        linear-gradient(
            270deg,
            rgba(77, 76, 80, 0.56) 0%,
            rgba(77, 76, 80, 0.14) 42%,
            rgba(77, 76, 80, 0) 72%
        );

    pointer-events: none;
}


.cube-products-page .cube-products-hero-content {
    position: absolute !important;

    top: auto !important;
    left: auto !important;
    right: clamp(28px, 6vw, 90px) !important;
    bottom: 42px !important;

    z-index: 2;

    width: min(460px, calc(100% - 56px));

    margin: 0 !important;
    transform: none !important;

    color: #ffffff;

    text-align: right;
}


.cube-products-page .cube-products-hero-content h1 {
    margin: 0 0 9px;

    color: #ffffff;

    font-size: clamp(34px, 4vw, 52px);
    font-weight: 600;
    line-height: 1.25;
}


.cube-products-page .cube-products-hero-content p {
    max-width: 420px;

    margin: 0;

    color: rgba(255, 255, 255, 0.92);

    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

/* =========================================================
DEVICE CALCULATOR
========================================================= */

.cube-device-calculator-section {
width: 100%;

padding: 54px 32px 20px;

background: var(--cube-bg);

}

.cube-device-calculator {
width: 100%;
max-width: 980px;

margin: 0 auto;

padding: 30px;

background: var(--cube-soft);

border-radius: 14px;

}

/* =========================================================
CALCULATOR HEAD
========================================================= */

.cube-device-calculator-head {
margin-bottom: 24px;

text-align: right;

}

.cube-device-calculator-head h2 {
margin: 0 0 7px;

color: var(--cube-dark);

font-size: 28px;
font-weight: 600;
line-height: 1.4;

}

.cube-device-calculator-head p {
margin: 0;

color: var(--cube-grey);

font-size: 13px;
font-weight: 400;
line-height: 1.7;

}

/* =========================================================
CALCULATOR FORM
========================================================= */

.cube-device-calculator-form {
width: 100%;
}

.cube-device-calculator-fields {
display: grid;

grid-template-columns:
    repeat(2, minmax(0, 1fr));

gap: 14px;

margin-bottom: 14px;

}

.cube-device-field {
min-width: 0;
}

.cube-device-field label {
display: block;

margin-bottom: 7px;

color: var(--cube-dark);

font-size: 12px;
font-weight: 500;

text-align: right;

}

.cube-device-field input {
width: 100%;
height: 46px;

padding: 0 14px;

background: var(--cube-bg);

border: 1px solid rgba(77, 76, 80, 0.16);
border-radius: 8px;

color: var(--cube-dark);

font-family: "Cairo", sans-serif;

font-size: 14px;
font-weight: 500;

text-align: right;

outline: none;

transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

}

.cube-device-field input::placeholder {
color: rgba(92, 93, 96, 0.55);
}

.cube-device-field input {
border-color: rgba(77, 76, 80, 0.48);

box-shadow:
    0 0 0 2px rgba(77, 76, 80, 0.06);

}

/* =========================================================
CALCULATE BUTTON
========================================================= */

.cube-products-page button.cube-device-calculate-button {
display: flex;

width: 100%;
min-height: 44px;

align-items: center;
justify-content: center;

padding: 9px 14px;

appearance: none;
-webkit-appearance: none;

background: var(--cube-dark);

border: 1px solid var(--cube-dark);
border-radius: 8px;

color: var(--cube-bg);

font-family: "Cairo", sans-serif;

font-size: 13px;
font-weight: 600;
line-height: 1.4;

text-align: center;

cursor: pointer;

transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;

}

.cube-products-page button.cube-device-calculate-button:hover,
.cube-products-page button.cube-device-calculate-button:focus-visible {
background: var(--cube-bg);

border-color: var(--cube-dark);

color: var(--cube-dark);

outline: none;

}

/* =========================================================
CALCULATOR ERROR
========================================================= */

.cube-device-calculator-error {
margin: 12px 0 0;

color: #9A1220;

font-size: 12px;
font-weight: 500;

text-align: right;

}

/* =========================================================
CALCULATOR RESULT
========================================================= */

.cube-device-calculator-result {
margin-top: 20px;

padding-top: 20px;

border-top: 1px solid rgba(77, 76, 80, 0.12);

}

.cube-device-result-info {
display: flex;

align-items: center;
justify-content: space-between;

gap: 20px;

margin-bottom: 14px;

}

.cube-device-result-label {
color: var(--cube-grey);

font-size: 12px;
font-weight: 500;

}

#cubeCalculatedArea {
color: var(--cube-dark);

font-size: 17px;
font-weight: 600;

}

/* =========================================================
RECOMMENDED DEVICE
========================================================= */

.cube-device-recommended {
display: grid;

grid-template-columns:
    105px minmax(0, 1fr) auto;

gap: 18px;

align-items: center;

padding: 14px;

background: var(--cube-bg);

border-radius: 10px;

}

.cube-device-recommended-image {
display: block;

width: 105px;
height: 105px;

object-fit: contain;

background: #ffffff;

border-radius: 8px;

}

.cube-device-recommended-content {
min-width: 0;

display: flex;
flex-direction: column;

gap: 3px;

text-align: right;

}

#cubeRecommendedDeviceName {
color: var(--cube-dark);

font-size: 17px;
font-weight: 600;

}

#cubeRecommendedDeviceCoverage {
color: var(--cube-grey);

font-size: 12px;
font-weight: 400;

}

/* =========================================================
RESULT BUTTON
========================================================= */

.cube-products-page a.cube-device-result-button,
.cube-products-page a.cube-device-result-button {
display: flex;

min-width: 120px;
min-height: 40px;

align-items: center;
justify-content: center;

padding: 8px 14px;

background: var(--cube-dark);

border: 1px solid var(--cube-dark);
border-radius: 7px;

color: #FFFDFB;

font-family: "Cairo", sans-serif;

font-size: 12px;
font-weight: 600;
line-height: 1.4;

text-align: center;
text-decoration: none;

transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;

}

.cube-products-page a.cube-device-result-button:hover,
.cube-products-page a.cube-device-result-button:focus-visible {
background: var(--cube-bg);

border-color: var(--cube-dark);

color: var(--cube-dark);

outline: none;

}

/* =========================================================
LARGE AREA / NO MATCH MESSAGE
========================================================= */

.cube-device-no-match {
margin: 12px 0 0;

padding: 12px 14px;

background: var(--cube-bg);

border-radius: 8px;

color: var(--cube-dark);

font-size: 13px;
font-weight: 500;
line-height: 1.7;

text-align: right;

}

/* =========================================================
PRODUCTS SECTION
========================================================= */

.cube-products-section {
width: 100%;

padding: 50px 32px 76px;

background: var(--cube-bg);

}

.cube-products-heading {
width: 100%;
max-width: 1365px;

margin: 0 auto 26px;

text-align: right;

}

.cube-products-heading h2 {
margin: 0;

color: var(--cube-dark);

font-size: 34px;
font-weight: 600;
line-height: 1.4;

}

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

.cube-products-grid {
display: grid;

grid-template-columns:
    repeat(4, minmax(0, 1fr));

gap: 10px;

width: 100%;
max-width: 1365px;

margin: 0 auto;

}

/* =========================================================
PRODUCT CARD
========================================================= */

.cube-product-card {
position: relative;

min-width: 0;

overflow: hidden;

background: var(--cube-soft);

border-radius: 12px;

transition: transform 0.25s ease;

}

.cube-product-card {
transform: translateY(-4px);
}

/* =========================================================
PRODUCT IMAGE
========================================================= */

.cube-product-image-wrap {
position: relative;

display: block;

width: 100%;

overflow: hidden;

background: var(--cube-bg);

line-height: 0;

}

.cube-product-image {
display: block;

width: 100%;
height: auto;

margin: 0;
padding: 0;

transition:
    transform 0.4s ease,
    filter 0.3s ease;

}

.cube-product-card .cube-product-image {
transform: scale(1.025);
}

/* =========================================================
OUT OF STOCK
========================================================= */

.cube-product-card.is-out-of-stock .cube-product-image {
filter: grayscale(0.65);
}

.cube-product-stock-overlay {
position: absolute;
inset: 0;

display: flex;

align-items: center;
justify-content: center;

background: rgba(77, 76, 80, 0.22);

color: #ffffff;

font-size: 14px;
font-weight: 600;
line-height: 1;

}

/* =========================================================
PRODUCT CONTENT
========================================================= */

.cube-product-content {
padding: 10px 14px 11px;

display: grid;

grid-template-columns:
    minmax(0, 1fr) auto;

grid-template-areas:
    "title title"
    "price colors"
    "button button";

column-gap: 12px;
row-gap: 6px;

align-items: center;

text-align: right;

}

/* =========================================================
PRODUCT TITLE
========================================================= */

.cube-product-title {
grid-area: title;

min-width: 0;
min-height: 0;

margin: 0;

color: var(--cube-dark);

font-size: 18px;
font-weight: 600;
line-height: 1.35;

text-align: right;

}

.cube-product-title a {
display: block;

color: var(--cube-dark);

text-align: right;

transition: opacity 0.2s ease;

}

.cube-product-title a {
color: var(--cube-dark);

opacity: 0.72;

}

/* =========================================================
PRICE
========================================================= */

.cube-product-price {
grid-area: price;

min-width: 0;
min-height: 0;

margin: 0;

color: var(--cube-dark);

font-size: 13px;
font-weight: 500;
line-height: 1.4;

direction: ltr;
unicode-bidi: isolate;

text-align: right;

}

.cube-product-price del {
margin-right: 6px;

color: var(--cube-grey);

opacity: 0.55;

}

.cube-product-price ins {
color: var(--cube-dark);

text-decoration: none;

}

/* =========================================================
COLOR SWATCHES
========================================================= */

.cube-product-colors {
grid-area: colors;

min-height: 0;

margin: 0;

display: flex;

align-items: center;
justify-content: flex-start;

gap: 8px;

}

.cube-product-color {
display: block;

width: 20px;
height: 20px;

flex: 0 0 20px;

border: 1px solid rgba(77, 76, 80, 0.18);

border-radius: 6px;

background: var(--cube-swatch-color, #E4E5E6);

box-shadow:
    0 0 0 1px rgba(255, 253, 251, 0.9) inset;

}

.cube-product-color.has-no-color-value {
background:
linear-gradient(
135deg,
#E4E5E6 0%,
#E4E5E6 45%,
#4D4C50 46%,
#4D4C50 54%,
#E4E5E6 55%,
#E4E5E6 100%
);
}

/* =========================================================
   ADD TO CART BUTTON
   ========================================================= */

.cube-products-page a.cube-product-button,
.cube-products-page a.cube-product-button:visited {
    grid-area: button;

    position: relative;

    display: flex;

    width: 100%;
    min-height: 36px;

    align-items: center;
    justify-content: center;

    flex-direction: row-reverse;

    gap: 7px;

    padding: 7px 10px;

    background-color: var(--cube-dark) !important;

    border: 1px solid var(--cube-dark);
    border-radius: 7px;

    color: var(--cube-bg) !important;

    font-family: "Cairo", sans-serif;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;

    text-align: center;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


/* CART ICON */

.cube-products-page
a.cube-product-button:not(.cube-product-button-disabled)::before {
    content: "";

    display: block;

    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    background-color: currentColor;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.6 10.4a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.6L21 8H7'/%3E%3C/svg%3E")
        center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.6 10.4a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.6L21 8H7'/%3E%3C/svg%3E")
        center / contain no-repeat;
}


/* DESKTOP HOVER ONLY */

@media (hover: hover) and (pointer: fine) {

    .cube-products-page
    a.cube-product-button:not(.cube-product-button-disabled):hover,
    .cube-products-page
    a.cube-product-button:not(.cube-product-button-disabled):focus-visible {

        background-color: var(--cube-bg) !important;

        border-color: var(--cube-dark);

        color: var(--cube-dark) !important;

        outline: none;
    }
}


/* DISABLED */

.cube-products-page
.cube-product-button-disabled,
.cube-products-page
.cube-product-button-disabled:visited {

    background-color: var(--cube-dark) !important;

    color: var(--cube-bg) !important;

    cursor: default;

    opacity: 0.55;
}
/* =========================================================
EMPTY STATE
========================================================= */

.cube-products-empty {
grid-column: 1 / -1;

padding: 60px 20px;

color: var(--cube-grey);

text-align: center;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 980px) {

.cube-products-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

/* Hero */

.cube-products-hero {
    height: 300px;
}

.cube-products-hero-content {
    right: 18px;
    bottom: 22px;

    width: calc(100% - 36px);
}

.cube-products-hero-content h1 {
    margin-bottom: 6px;

    font-size: 29px;
}

.cube-products-hero-content p {
    max-width: 290px;

    font-size: 11px;
    line-height: 1.65;
}


/* Calculator */

.cube-device-calculator-section {
    padding: 32px 15px 10px;
}

.cube-device-calculator {
    padding: 18px 14px;

    border-radius: 10px;
}

.cube-device-calculator-head {
    margin-bottom: 18px;
}

.cube-device-calculator-head h2 {
    margin-bottom: 5px;

    font-size: 21px;
}

.cube-device-calculator-head p {
    font-size: 11px;
    line-height: 1.65;
}

.cube-device-calculator-fields {
    grid-template-columns: 1fr;

    gap: 10px;

    margin-bottom: 10px;
}

.cube-device-field label {
    margin-bottom: 5px;

    font-size: 11px;
}

.cube-device-field input {
    height: 42px;

    padding: 0 11px;

    font-size: 13px;
}

.cube-products-page button.cube-device-calculate-button {
    min-height: 40px;

    padding: 8px 10px;

    font-size: 12px;
}

.cube-device-calculator-result {
    margin-top: 16px;

    padding-top: 16px;
}

.cube-device-result-info {
    margin-bottom: 10px;
}

#cubeCalculatedArea {
    font-size: 15px;
}

.cube-device-recommended {
    grid-template-columns:
        76px minmax(0, 1fr);

    gap: 10px;

    padding: 10px;
}

.cube-device-recommended-image {
    width: 76px;
    height: 76px;
}

#cubeRecommendedDeviceName {
    font-size: 14px;
}

#cubeRecommendedDeviceCoverage {
    font-size: 10px;
}

.cube-products-page a.cube-device-result-button,
.cube-products-page a.cube-device-result-button:visited {
    grid-column: 1 / -1;

    width: 100%;
    min-width: 0;
    min-height: 36px;

    margin-top: 2px;

    padding: 7px 10px;

    font-size: 11px;
}

.cube-device-no-match {
    margin-top: 10px;

    padding: 10px;

    font-size: 11px;
}


/* Products */

.cube-products-section {
    padding: 34px 15px 48px;
}

.cube-products-heading {
    margin-bottom: 20px;
}

.cube-products-heading h2 {
    font-size: 25px;
}

.cube-products-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.cube-product-card {
    border-radius: 9px;
}

.cube-product-content {
    padding: 8px 7px 8px;

    grid-template-columns:
        minmax(0, 1fr) auto;

    grid-template-areas:
        "title title"
        "price colors"
        "button button";

    column-gap: 7px;
    row-gap: 5px;
}

.cube-product-title {
    margin: 0;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    text-align: right;
}

.cube-product-title a {
    text-align: right;
}

.cube-product-price {
    margin: 0;

    color: var(--cube-dark);

    font-size: 10.5px;
    line-height: 1.35;

    text-align: right;
}

.cube-product-colors {
    margin: 0;

    gap: 5px;

    justify-content: flex-start;
}

.cube-product-color {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    border-radius: 5px;
}

.cube-products-page .cube-product-button {
    min-height: 32px;

    gap: 5px;

    padding: 5px;

    border-radius: 6px;

    font-size: 11px;

    flex-direction: row-reverse;
}

.cube-products-page .cube-product-button:not(.cube-product-button-disabled)::before {
    width: 12px;
    height: 12px;

    flex: 0 0 12px;
}

.cube-product-stock-overlay {
    font-size: 11px;
}

}

/* =========================================================
VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

.cube-products-section {
    padding-right: 10px;
    padding-left: 10px;
}

.cube-products-grid {
    gap: 8px;
}

.cube-product-content {
    padding-right: 6px;
    padding-left: 6px;

    column-gap: 5px;
}

.cube-product-title {
    font-size: 13px;
}

.cube-product-price {
    font-size: 9.5px;
}

.cube-product-color {
    width: 15px;
    height: 15px;

    flex-basis: 15px;
}

.cube-products-page .cube-product-button {
    font-size: 10.5px;
}

}