/* CATEGORIES SHOWCASE */
.showcase-cat {padding-block: 40px 20px; transition: var(--transition);}
.showcase-cat .title {text-align: center; margin-bottom: 20px;}
.showcase-cat .title :first-child {font-size: var(--fs-xl, 36px); margin-bottom: 20px;}
.showcase-cat .title p {height: 72px;}
.showcase-cat .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; transition: var(--transition);}
.showcase-cat .product {width: 100%; display: flex; align-items: center; justify-content: space-between; background-color: #f4f9ff; color: #000; padding: 10px; border-bottom: 1px solid transparent; transition: var(--transition);}
.showcase-cat .product:hover {border-color: var(--c-secondary);}
.showcase-cat .product:hover img {transform: scale(1.1) translate(10px, 5px); transition: var(--transition);}
.showcase-cat .product div {height: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;}
.showcase-cat .product div :first-child {font-size: var(--fs-md, 24px); color: var(--c-tertiary); text-align: end;}
.showcase-cat .product .custom__btn {font-weight: 500; padding-block: 7px;}

/* PRODUCT SHOWCASE */
.showcase {padding-block: 20px; transition: var(--transition); --_c-light-100: #f8f8f8; --_c-light-600: #676767; --_c-link: #0063d3;}
.showcase .title {margin-bottom: 40px; transition: var(--transition);}
.showcase .title :first-child {font-size: var(--fs-lg, 30px);}
.showcase .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; transition: var(--transition);}
.showcase .product {position: relative; width: 100%; color: initial; padding: 10px 10px 20px; border-radius: 5px; box-shadow: 0 4px 15px 0 rgba(0 0 0 / 0.08); transition: var(--transition);}
.showcase .product:hover {background-color: var(--_c-light-100);}
.showcase .product img {width: 100%; height: 264px; object-fit: cover; margin-bottom: 5px;}
.showcase .product > :nth-child(2) {display: block; font-size: var(--fs-sm, 18px); font-weight: 700; margin-bottom: 10px; text-align: center;}
.showcase .product ul {margin-bottom: 20px;}
.showcase .product li {font-size: var(--fs-xxs, 12px); color: var(--_c-light-600); list-style: disc; list-style-position: inside;}
.showcase .product li:not(:last-of-type) {margin-bottom: 5px;}
.showcase .product > :last-child {position: absolute; inset: auto 10px 10px auto; font-size: var(--fs-xs, 14px); color: var(--_c-link); transition: var(--transition);}
.showcase .product > :last-child:hover {color: var(--c-secondary);}

/* QUOTE */
.quote {padding-block: 20px 30px; position: relative; transition: var(--transition); --_c-dark-700: #646464; --_c-blue-100: #f4f9ff; --_fs-mega: 170px;}
.quote::before {position: absolute; bottom: 140px; left: -170px; font-size: var(--_fs-mega); font-weight: 700; line-height: 200px; color: var(--_c-blue-100); transform: rotate(-90deg); z-index: -1; content: 'Custom';}
.quote::after {position: absolute; top: 120px; right: -100px; font-size: var(--_fs-mega); font-weight: 700; line-height: 200px; color: var(--_c-blue-100); transform: rotate(-90deg); z-index: -1; content: 'Quote';}
.quote .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 30px; transition: var(--transition);}
.quote .content {padding-left: 15px;}
.quote .content > :first-child {font-size: calc(var(--fs-xl, 36px) - 1px); font-weight: 600; color: var(--_c-dark-700); margin-bottom: 30px;}
.quote .content p {color: var(--_c-dark-700); margin-bottom: 15px;}
.quote .content :where(h3, h4) {font-size: calc(var(--fs-lg, 30px) - 2px); font-weight: 600; color: var(--_c-dark-700); margin-block: 30px 10px;}
.quote .content :where(ul, ol) {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 10px; margin-top: 45px;}
.quote .content li {position: relative; width: calc(50% - 10px); background-color: var(--_c-blue-100); padding: 15px 20px 15px 50px; text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden;}
.quote .content li::before {position: absolute; top: 12px; left: 10px; width: 31px; height: 31px; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/tick-round-fill.svg); content: '';}

/* BRAND */
.brand {padding-block: 60px 40px; transition: var(--transition); --_c-dark-700: #646464;}
.brand .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 30px; transition: var(--transition);}
.brand .content > :first-child {font-size: calc(var(--fs-xl, 36px) + 2px); color: var(--c-tertiary); margin-bottom: 20px;}
.brand .content > :first-child * {display: block; font-size: var(--fs-base, 16px); font-weight: 600; color: var(--c-secondary); margin-bottom: 20px;}
.brand .content p {color: var(--_c-dark-700); margin-bottom: 35px;}
.brand .content :where(ul, ol):not(.points) {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; transition: var(--transition);}
.brand .content :where(ul, ol):not(.points) li {position: relative; width: calc(50% - 15px); padding-left: 25px; transition: var(--transition);}
.brand .content :where(ul, ol):not(.points) li::before {position: absolute; top: 6px; left: 0; width: 15px; height: 11px; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/arrow-right.svg); content: '';}
.brand .content .points {display: flex; align-items: center; gap: 15px;}
.brand .content .points li {display: flex; align-items: center; gap: 10px; font-size: calc(var(--fs-sm, 18px) + 2px); font-weight: 600; color: var(--c-tertiary); line-height: 1.4;}
.brand .content .points li img {height: 53px;}
.brand .image {width: fit-content; margin-left: auto;}

/* FEATURES */
.features {padding-block: 40px; transition: var(--transition); --_c-light-400: #a0a0a0; --_c-dark-700: #646464;}
.features .wrapper {background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/abstract-bg.webp); border-radius: 10px; padding: 50px; transition: var(--transition);}
.features .content {text-align: center;}
.features .content > :first-child {font-size: calc(var(--fs-lg, 36px) + 2px); margin-bottom: 20px;}
.features .content p {color: var(--_c-dark-700);}
.features .content p:has(+ *) {margin-bottom: 20px; transition: var(--transition);}
.features .content > div {max-height: 72px; margin-bottom: 60px; transition: var(--transition);}
.features ul {display: flex; align-content: center; justify-content: space-between; gap: 10px;}
.features li {display: inline-flex; align-items: center; gap: 10px;}
.features li div * {display: block;}
.features li div :first-child {font-size: var(--fs-lg, 30px); line-height: 1; margin-bottom: 5px;}
.features li div :nth-child(2) {color: var(--_c-light-400);}

/* CUSTOMIZATION */
.customization {padding-block: 40px; transition: var(--transition); --_c-light-500: #888888; --_c-blue-100: #f4f9ff; position: relative; --_fs-mega: 170px;}
.customization::before {position: absolute; bottom: 200px; left: -170px; font-size: var(--_fs-mega); font-weight: 700; line-height: 200px; color: var(--_c-blue-100); transform: rotate(-90deg); z-index: -1; content: 'Custom';}
.customization::after {position: absolute; top: 120px; right: -80px; font-size: var(--_fs-mega); font-weight: 700; line-height: 200px; color: var(--_c-blue-100); transform: rotate(-90deg); z-index: -1; content: 'styles';}
.customization .title {text-align: center; max-width: 890px; margin: 0 auto 40px; transition: var(--transition);}
.customization .title :first-child {font-size: var(--fs-xl, 36px);}
.customization .wrapper {display: grid; grid-template-columns: minmax(560px, 700px) minmax(360px, 453px); align-items: center; gap: 30px; transition: var(--transition);}
.customization .boxes {width: fit-content; display: grid; grid-template-columns: repeat(2, 1fr); gap: 19px 30px; transition: var(--transition);}
.customization .product {position: relative; width: 100%;}
.customization .product:nth-child(even) {margin-block: 26px;}
.customization .product > :last-child {position: absolute; inset: auto 0 36px; width: 200px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md, 24px); background-color: #fff; color: #000; box-shadow: 0 0 5px var(--_c-light-500); margin-inline: auto; transition: var(--transition);}
.customization .product:nth-child(even) > :last-child {bottom: -17px;}
.customization .product:hover > :last-child {background-color: var(--c-tertiary); color: #fff;}
.customization .content > div {max-height: 225px; margin-bottom: 40px;}
.customization .content > div > :first-child {font-size: var(--fs-xl, 36px); margin-bottom: 30px;}
.customization .content > div > :first-child * {display: block; font-family: var(--ff-secondary); font-size: var(--fs-base, 16px); font-weight: 700; color: var(--c-secondary); margin-bottom: 5px;}
.customization .content > div p:has(+ *) {margin-bottom: 20px;}
.customization .content > div :where(ul, ol) {margin-bottom: 20px;}
.customization .content > div li[data-list="bullet"] {list-style: disc; list-style-position: inside;}
.customization .content > div li[data-list="ordered"] {list-style: decimal; list-style-position: inside;}
.customization .content a {width: 140px; font-size: calc(var(--fs-sm, 18px) + 2px); font-weight: 700; text-align: center; float: right;}

/* IDEAS */
.ideas {padding-block: 102px; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/ideas-bg.webp); background-color: var(--c-secondary); transition: var(--transition);}
.ideas .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; transition: var(--transition);}
.ideas .item {display: flex; align-items: flex-start; gap: 30px; color: #fff; transition: var(--transition);}
.ideas .item div :first-child {display: block; font-size: var(--fs-lg, 30px); font-weight: 600; margin-bottom: 10px;}
.ideas .item p {color: #fff; padding-right: 10px;}

/* DESCRIPTION */
.description {padding-block: 35px 40px; transition: var(--transition); --_c-light-500: #747474;}
.description .wrapper {display: grid; grid-template-columns: minmax(260px, 370px) minmax(450px, 766px); align-items: flex-start; gap: 30px; transition: var(--transition);}
.description .title :first-child {font-size: calc(var(--fs-md, 24px) + 2px);}
.description .additional {max-height: 154px; transition: var(--transition);}
.description .additional p {margin-bottom: 8px;}
.description .additional :where(h3, h4) {font-size: var(--fs-md, 24px); font-weight: 500; margin-bottom: 8px;}
.description .additional :where(h5, h6) {font-size: var(--fs-sm, 18px); font-weight: 500; margin-bottom: 8px;}
.description .additional :where(p, li) {color: var(--_c-light-500);}
.description .additional :where(ul, ol) {margin-block: 8px;}
.description .additional :where(ul, ol) li {list-style-position: inside;}
.description .additional li[data-list="bullet"] {list-style: disc; list-style-position: inside;}
.description .additional li[data-list="ordered"] {list-style: decimal; list-style-position: inside;}

/* DISCOUNTS */
.discounts {padding-block: 40px; transition: var(--transition); --_c-dark-700: #646464; --_c-dark-800: #555555; background: no-repeat center/contain url(https://www.emenacpackaging.co.nz/theme/website/assets/images/bgperfect.webp);} 
.discounts .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 30px; transition: var(--transition);}
.discounts .content > :first-child {font-size: calc(var(--fs-xl, 36px) + 2px); margin-bottom: 30px;}
.discounts .content p {margin-bottom: 25px;}
.discounts .content :where(ul, ol):not(.info) li {margin-bottom: 10px; list-style-image: url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/tick-sm-round.svg); list-style-position: inside;}
.discounts .content :where(p, li) {color: var(--_c-dark-700);}
.discounts .content .info {display: flex; align-items: center; justify-content: space-between; text-align: center; padding-inline: 30px; margin-block: 35px 20px; transition: var(--transition);}
.discounts .content .info li :first-child {display: block; font-size: calc(var(--fs-xl, 36px) - 2px); color: var(--_c-dark-800);}
.discounts .content > a {font-size: var(--fs-base, 16px); font-weight: 600; border-radius: 5px; padding: 13px 18px; float: right; text-align: center;}

/* SOLUTION */
.solution {padding-block: 40px 20px; transition: var(--transition); --_c-dark-600: #646464;}
.solution .wrapper {background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/abstract-bg.webp); border-radius: 10px; padding: 50px; transition: var(--transition);}
.solution .content :first-child {font-size: var(--fs-xl, 36px); margin-bottom: 20px;}
.solution .content p {height: 74px; color: var(--_c-dark-600); border-left: 5px solid var(--c-secondary); padding-left: 15px;}

/* GALLERY */
.gallery {padding-block: 25px 15px;}
.gallery .head {text-align: center; margin-bottom: 40px;}
.gallery .head :first-child {font-size: var(--fs-xl, 36px); margin-bottom: 20px;}
.gallery .head p {max-height: 75px;}
.gallery .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.gallery .box img {width: 100%; height: auto;}
.gallery .box:nth-of-type(1) {grid-row: 1/3; grid-column: 1/3;}
.gallery .box {position:relative;}
.gallery .box > a {position:absolute ; bottom:0; left:0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #FFFFFFE5; width:100%; max-width:277px;  border-top-right-radius:15px;  padding-block:13px 15px;}
.gallery .box > a:hover  {background-color: #F5F5F5; transition:var(--transition);}
.gallery .box > a:hover :nth-child(2)   {color:var(--c-secondary);}
.gallery .box:nth-of-type(1) > a {padding-block: 24px;}
.gallery .box > a :first-child {position: relative; font-size: var(--fs-sm); font-weight:700;  margin-bottom: 14px; color:#000;}
.gallery .box > a :first-child::before {position: absolute; inset: 30px 0 0; width: 98px; height: 1px; background-color: #EF233CCC; margin-inline: auto; content: '';}
.gallery .box > a:nth-child(2) {color: #0A489B;  font-weight: 700; font-size:var(--fs-xs);} 
.gallery .box > a button:hover {text-decoration: underline;}

/* INFORMATION */
.information {padding-block: 25px 30px; transition: var(--transition);}
.information .wrapper {background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/abstract-bg-2.webp); padding: 20px; border-radius: 20px; box-shadow: 0 0 5px rgba(0 0 0 / 0.3);}
.information .content {text-align: center;} 
.information .content > :first-child {font-size: var(--fs-xl, 36px); margin-bottom: 20px;}
.information .content > div {max-height: 150px;}
.information .content li[data-list="bullet"] {list-style: disc; list-style-position: inside;}
.information .content li[data-list="ordered"] {list-style: decimal; list-style-position: inside;}

/* ORDER */
.order {padding-block: 58px; background-color: #f4f9ff; transition: var(--transition);}
.order .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; justify-content: space-between; gap: 30px; transition: var(--transition);}
.order .content div {padding: 30px; margin: 30px 0; background-color: #fff; transition: var(--transition);}
.order .content div > :first-child {display: block; color: var(--c-secondary); margin-bottom: 5px;}
.order .content div > :nth-child(2) {font-size: calc(var(--fs-xl, 36px) - 2px); margin-bottom: 30px;}
.order .content div p {margin-bottom: 15px;}
.order .content :where(ul, ol) {display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 80px; transition: var(--transition);}
.order .content li {width: calc(50% - 10px); list-style-image: url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/arrow-right.svg); transition: var(--transition);}
.order .content > a {font-size: calc(var(--fs-sm, 18px) + 2px); font-weight: 700; padding-inline: 20px; float: right;}

/* ADDONS */
.addons {padding-block: 55px; transition: var(--transition); --_c-dark-900: #1f1f1f;}
.addons .container {max-width: 100%; padding-left: 0;}
.addons .wrapper {display: grid; grid-template-columns: 43% 1fr; gap: 50px; transition: var(--transition);}
.addons .image img {width: 100%; height: auto;}
.addons .content {max-width: 710px; transition: var(--transition);}
.addons .content > :first-child {font-size: calc(var(--fs-xl, 36px) + 4px); margin-bottom: 10px;}
.addons .content p {color: var(--_c-dark-900); margin-bottom: 30px;}
.addons .content :where(h3, h4) {font-size: calc(var(--fs-xl, 36px) + 4px); color: var(--c-secondary); margin-bottom: 10px;}
.addons .content :where(ul, ol) {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px;}
.addons .content li {position: relative; width: fit-content; padding-left: 25px;}
.addons .content li::before {position: absolute; top: 7px; left: 0; width: 15px; height: 11px; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/arrow-right.svg); content: '';}
.addons .content li:hover::before {left: 6px;}

/* PERKS */
.perks {padding-block: 40px; transition: var(--transition); --_c-dark-800: #363636;}
.perks .head {text-align: center; margin-bottom: 50px; transition: var(--transition);}
.perks .head :first-child {position: relative; font-size: calc(var(--fs-xl, 36px) + 4px); padding-bottom: 20px; margin-bottom: 15px;}
.perks .head :first-child::before {position: absolute; inset: auto 0 0; width: 150px; height: 2px; background-color: var(--c-secondary); margin-inline: auto; content: '';}
.perks .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 30px; transition: var(--transition);}
.perks .item:hover img {filter: saturate(250%);}
.perks .item img {width: 100%; margin-bottom: 20px;}
.perks .item :nth-child(2) {display: block; font-size: calc(var(--fs-sm, 18px) + 2px); color: var(--_c-dark-800); margin-bottom: 10px;}

/* TESTIMONIALS */
.testimonials {padding-block: 40px 55px; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images//testimonials-bg.webp); --_c-light-300: #bababa; --_c-light-500:#747474;}
.testimonials .head {display: grid; grid-template-columns: minmax(300px, 360px) minmax(450px, 540px) auto; align-items: center; gap: 30px; margin-bottom: 32px;}
.testimonials .head :first-child {font-size: calc(var(--fs-xl, 36px) - 2px); line-height: 52px;}
.testimonials .head p {font-size: var(--fs-sm, 18px); color: var(--_c-light-500);}
.testimonials .head a {width: 160px; height: fit-content; font-family: var(--ff-secondary); font-size: var(--fs-base, 16px); font-weight: 700; color: var(--_c-light-500); background-color: #fff; text-align: center; border: 1px solid var(--_c-light-300); border-radius: 5px; padding-block: 10.5px; justify-self: end;}
.testimonials .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px;}
.testimonials .review {display: flex; flex-direction: column; justify-content: space-between; background-color: #fff; border: 1px solid #bdbdbd80; border-radius: 5px; padding: 50px 12px 25px 32px;}
.testimonials .review p {max-height: 222px; color: var(--_c-light-500); border-bottom: 1px solid #0000000D; padding-bottom: 15px; margin-bottom: 20px;}
.testimonials .review > div {text-align: end;}
.testimonials .review > div * {display: block; font-family: var(--ff-secondary);}
.testimonials .review > div :first-child {font-size: calc(var(--fs-sm, 18px) + 2px); font-weight: 600;}
.testimonials .review > div :nth-child(2) {font-size: var(--fs-xs, 14px); color: var(--_c-light-500);}
.testimonials .review ul {display: flex; align-items: center; justify-content: end; padding-block:8px;}
.testimonials .review ul li {padding-right: 3px;}

/* FAQ */
.faq {padding-block: 30px 60px; transition: var(--transition);}
.faq .container {max-width: 1600px;}
.faq .wrapper {display: grid; grid-template-columns: minmax(500px, 682px) minmax(400px, 472px); gap: 85px; transition: var(--transition);}
.faq .content > :first-child {position: relative; font-size: calc(var(--fs-xl, 36px) - 1px); padding-bottom: 20px; margin-bottom: 20px;}
.faq .content > :first-child::before {position: absolute; bottom: 0; left: 0; width: 313px; height: 1px; background-color: var(--c-secondary); content: '';}
.faq .content .accordions {max-height: 380px; transition: var(--transition);}
.faq .content .custom__scroll {padding-right: 0;}
.faq .content button {position: relative; width: 100%; display: block; font-weight: 700; line-height: 1.4; color: #000; text-align: start; border-bottom: 1px solid rgba(0 0 0 / 0.125); padding: 7px 12px 7px 26px; margin-bottom: 11px; transition: var(--transition);}
.faq .content button::before {position: absolute; top: 14px; left: 12px; width: 5px; height: 9px; background: no-repeat center/cover url(https://www.emenacpackaging.co.nz/theme/website/assets/images/icons/accordian-arrow.svg); content: '';}
.faq .content .panel[data-collapse="false"] {display: none;}
.faq .content .panel {padding: 6px 20px 10px 20px; transition: var(--transition);}
.faq .content .panel p {margin-bottom: 10px;}
.faq .content .panel :where(ul, ol) {margin-bottom: 20px;}
.faq .content .panel li {color: var(--c-tertiary);}
.faq .content .panel li[data-list="bullet"] {list-style: disc; list-style-position: inside;}
.faq .content .panel li[data-list="ordered"] {list-style: decimal; list-style-position: inside;}

/* MEDIA QUERIES */
@media only screen and (max-width: 1200px) {
    /* (Categories Showcase) */
    .showcase-cat .product img {max-width:  180px;}
    /* (Products Showcase) */
    .showcase .product img {height: 215px;}
    /* (Quote) */
    .quote::before,
    .quote::after {content: none;}
    /* (Brand) */
    .brand .content .points {align-items: flex-start; flex-direction: column;}
    /* (Ideas) */
    .ideas :is(.wrapper, .item) {gap: 20px;}
    /* (Discounts) */
    .discounts .content .info {padding-inline: 0;}
    /* (Addons) */
    .addons .wrapper {grid-template-columns: 1fr;}
    .addons .content {max-width: 900px; padding-inline: 15px;}
    /* (Testimonials) */
    .testimonials .wrapper {gap: 20px;}
    /* (Faq) */
    .faq .wrapper {gap: 50px;}
}

@media only screen and (max-width: 991px) {
    /* (Categories Showcase) */
    .showcase-cat .product {flex-direction: column; gap: 10px;}
    .showcase-cat .product div {align-items: center; gap: 5px;}
    /* (Products Showcase) */
    .showcase .wrapper {grid-template-columns: repeat(3, 1fr);}
    .showcase .product img {height: 200px;}
    /* (Quote) */
    .quote .wrapper {grid-template-columns: 1fr; gap: 50px;}
    .quote .content {padding-left: 0;}
    /* (Brand) */
    .brand .wrapper {grid-template-columns: 1fr; gap: 50px;}
    .brand .content .points {flex-direction: row; gap: 30px;}
    .brand .image {order: -1; max-width: 400px; margin-inline: auto;}
    /* (Features) */
    .features {padding-block: 25px;}
    .features .wrapper {padding: 15px;}
    /* (Customization) */
    .customization .wrapper {grid-template-columns: 1fr; gap: 50px;}
    .customization .boxes {margin-inline: auto;}
    /* (Ideas) */
    .ideas .wrapper {grid-template-columns: repeat(2, 1fr); row-gap: 50px;}
    /* (Description) */
    .description .wrapper {gap: 20px;}
    /* (Discounts) */
    .discounts .wrapper {grid-template-columns: 1fr; gap: 50px;}
    .discounts .image {max-width: 450px; margin-inline: auto;}
    .discounts .content .info {padding-inline: 50px;}
    /* (Gallery) */
    .gallery .box > a {max-width: 212px; padding-block: 12px;}
    .gallery .box:nth-of-type(1) {grid-row: 1/1; grid-column: 1/1;}
    .gallery .box:nth-of-type(1) > a {max-width:212px; padding-block: 12px;}
    /* (Order) */
    .order .wrapper {grid-template-columns: 1fr; gap: 50px;}
    .order .image {max-width: 470px; margin-inline: auto;}
    /* (Perks) */
    .perks .wrapper {grid-template-columns: repeat(2, 1fr);}
    /* (Testimonials) */
    .testimonials .head {grid-template-columns: 1fr; gap: 15px;}
    .testimonials .head :first-child {line-height: 1;}
    .testimonials .wrapper {grid-template-columns: repeat(2, 1fr);}
    /* (Faq) */
    .faq .wrapper {grid-template-columns: 1fr;}
    .faq .image {max-width: 510px;}
}

@media only screen and (max-width: 767px) {
    /* (Categories Showcase) */
    .showcase-cat .wrapper {grid-template-columns: repeat(2, 1fr);}
    /* (Products Showcase) */
    .showcase .title {margin-bottom: 20px;}
    .showcase .wrapper {grid-template-columns: repeat(2, 1fr);}
    /* (Brand) */
    .brand {padding-block: 20px;}   .brand .wrapper {grid-template-columns: 1fr; gap: 50px;}
    .brand .content .points {flex-direction: row; gap: 30px;}
    .brand .image {order: -1; max-width: 400px; margin-inline: auto;}
    /* (Features) */
    .features ul {flex-wrap: wrap; row-gap: 20px;}
    .features li {width: calc(50% - 20px);}
    /* (Customization) */
    .customization {padding-block: 20px;}
    .customization .product > :last-child {max-width: 160px; height: 40px;}
    /* (Ideas) */
    .ideas {padding-block: 65px;}
    /* (Description) */
    .description {padding-block: 25px;}
    .description .wrapper {grid-template-columns: 1fr;}
    /* (Discounts) */
    .discounts {padding-block: 20px;}
    .discounts .content .info {padding-inline: 0;}
    /* (Solution) */
    .solution {padding-block: 15px;}
    .solution .wrapper {padding: 30px;}
    /* (Gallery) */
    .gallery .wrapper {grid-template-columns: repeat(2, 1fr);}
    .gallery .box > a {max-width:220px; padding-block:10px;}
    .gallery .box:nth-of-type(1) > a {max-width:220px; padding-block:10px;}
    .gallery .box > a :first-child::before {inset : 30px 0 0;}
    /* (Order) */
    .order {padding-block: 15px 30px;}
    /* (Addons) */
    .addons {padding-block: 30px;}
    .addons .content :is(ul, ol) {grid-template-columns: repeat(2, 1fr);}
    /* (Perks) */
    .perks {padding-block: 30px;}
    .perks .wrapper {gap: 20px 15px;}
    /* (Testimonials) */
    .testimonials {padding-block: 30px;}
    .testimonials .wrapper {gap: 10px;}
    .testimonials .review {padding: 35px 18px 15px 18px;}
    /* (Faq) */
    .faq {padding-block: 20px;}
}

@media only screen and (max-width: 575px) {
    /* (Brand) */
    .brand .content :is(ul, ol):not(.points) li {width: 100%;}
    .brand .content .points {flex-direction: column; gap: 10px;}
    /* (Customization) */
    .customization .boxes {gap: 19px;}
    /* (Ideas) */
    .ideas .wrapper {grid-template-columns: 1fr;}
    /* (Description) */
    .description .wrapper {gap: 10px;}
    .description .additional > div {flex: 100%;}
    /* (Solution) */
    .solution .wrapper {padding: 20px;}
    .solution .content p {height: 95px;}
    /* (Gallery) */
    .gallery .box > a {max-width:188px; padding-block:8px;}
    .gallery .box:nth-of-type(1) > a {max-width:188px; padding-block:8px;}
    /* (Testimonials) */
    .testimonials .wrapper {grid-template-columns: 1fr;}
}

@media only screen and (max-width: 475px) {
    /* (Categories Showcase) */
    .showcase-cat .wrapper {grid-template-columns: 1fr;}
    /* (Products Showcase) */
    .showcase .title {text-align: center;}
    .showcase .wrapper {grid-template-columns: 1fr;}
    .showcase .product img {height: auto; max-height: 264px;}
    /* (Quote) */
    .quote .content :is(ul, ol) {gap: 20px;}
    .quote .content li {width: 100%;}
    /* (Brand) */
    .brand .wrapper {gap: 30px;}
    .brand .content > :is(:first-child, :nth-child(2)) {margin-bottom: 10px;}
    .brand .content p {margin-bottom: 20px;}
    .brand .content :is(ul, ol):not(.points) {gap: 10px; margin-bottom: 20px;}
    /* (Features) */
    .features .content > :first-child {margin-bottom: 10px;}
    .features .content > div {margin-bottom: 30px;}
    .features ul {gap: 20px;}
    .features li {width: 100%;}
    /* (Customization) */
    .customization .wrapper {gap: 40px;}
    .customization .boxes {grid-template-columns: 1fr; gap: 50px;}
    .customization .product > :last-child {bottom: -17px;}
    .customization .product:nth-child(even) {margin-block: 0;}
    .customization .product img {width: 100%;}
    .customization .content > div {max-height: 280px; margin-bottom: 25px;}
    .customization .content > div p:has(+ *),
    .customization .content > div :is(ul, ol) {margin-bottom: 15px;}
    /* (Ideas) */
    .ideas .wrapper {gap: 30px;}
    /* (Description) */
    .description .additional {height: 137px;}
    /* (Discounts) */
    .discounts .wrapper {gap: 30px;}
    .discounts .content > :is(:first-child, p) {margin-bottom: 15px;}
    .discounts .content .info {flex-wrap: wrap; gap: 20px; margin-block: 25px 10px;}
    .discounts .content .info li {width: calc(50% - 20px);}
    .discounts .content > a {padding: 10px;}
    /* (Solution) */
    .solution .content :first-child {margin-bottom: 10px;}
    /* (Gallery) */
    .gallery .head {margin-bottom: 20px;}
    .gallery .head :first-child {margin-bottom: 10px;}
    .gallery .wrapper {grid-template-columns: 1fr;}
    .gallery .box img {width: 100%;}
    /* (Order) */
    .order .wrapper {gap: 30px;}
    .order .content > :nth-child(2) {margin-bottom: 15px;}
    .order .content p {margin-bottom: 10px;}
    .order .content :is(ul, ol) {margin-bottom: 30px;}
    .order .content > a {padding: 8px 10px;}
    /* (Addons) */
    .addons .wrapper {gap: 30px;}
    .addons .content :is(ul, ol) {grid-template-columns: 1fr; gap: 10px;}
    .addons .content p {margin-bottom: 15px;}
    /* (Perks) */
    .perks .head {margin-bottom: 25px;}
    .perks .head :first-child {padding-bottom: 15px; margin-bottom: 10px;}
    .perks .wrapper {grid-template-columns: 1fr;}
    .perks .item img {margin-bottom: 10px;}
    .perks .item :nth-child(2) {margin-bottom: 5px;}
    /* (Testimonials) */
    .testimonials .head {margin-bottom: 20px;}
    .testimonials .head a {width: 140px; padding-block: 8px;}
    .testimonials .review {padding: 25px 12px 12px 12px;}
    .testimonials .review p {max-height: 184px; padding-bottom: 7px; margin-bottom: 10px;}
    /* (Faq) */
    .faq .wrapper {gap: 30px;}
    .faq .content > :first-child {padding-bottom: 15px; margin-bottom: 10px;}
    .faq .content > :first-child::before {max-width: 180px;}
    .faq .content button {line-height: 24px; margin-bottom: 7px;}
    .faq .content .panel {padding-block: 6px;}
}