/* Start custom CSS for html, class: .elementor-element-e5e5d68 *//* =========================================================
DISHIVA - ESD CAPS PINK
PRODUCT PAGE CSS
========================================================= */
.dishiva-product-page {
--dishiva-navy: #464B71;
--dishiva-blue: #118AB2;
--dishiva-mint: #7CD5C7;
--dishiva-cream: #F2F2ED;
--dishiva-dark: #252A48;
--dishiva-text: #4E5268;
--dishiva-border: #E3E5E8;
width: 100%;
overflow: hidden;
background: #ffffff;
color: var(--dishiva-text);
font-family:
"DM Sans",
"Segoe UI",
Arial,
sans-serif;
}
.dishiva-product-page *,
.dishiva-product-page *::before,
.dishiva-product-page *::after {
box-sizing: border-box;
}
/* =========================================================
CONTAINER
========================================================= */
.dishiva-product-container {
width: min(
1240px,
calc(100% - 50px)
);
margin: 0 auto;
}
/* =========================================================
HIDDEN RADIO BUTTONS
========================================================= */
.dishiva-product-gallery
> input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* =========================================================
PRODUCT HERO
========================================================= */
.dishiva-product-hero {
position: relative;
padding: 75px 0 85px;
background:
radial-gradient(
circle at 85% 15%,
rgba(124, 213, 199, 0.20),
transparent 30%
),
radial-gradient(
circle at 5% 85%,
rgba(17, 138, 178, 0.06),
transparent 25%
),
linear-gradient(
135deg,
#F2F2ED 0%,
#ffffff 65%
);
}
.dishiva-product-hero
.dishiva-product-container {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 70px;
align-items: center;
}
/* =========================================================
GALLERY
========================================================= */
.dishiva-product-gallery {
width: 100%;
}
.dishiva-main-image-box {
min-height: 520px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 35px;
border-radius: 28px;
background: #ffffff;
border:
1px solid
rgba(70, 75, 113, 0.08);
box-shadow:
0 25px 70px
rgba(70, 75, 113, 0.11);
}
.dishiva-main-image-box::before {
content: "";
position: absolute;
width: 370px;
height: 370px;
border-radius: 50%;
background:
rgba(124, 213, 199, 0.17);
}
.dishiva-main-image-box::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
right: -70px;
bottom: -70px;
border-radius: 50%;
background:
rgba(17, 138, 178, 0.07);
}
/* =========================================================
MAIN GALLERY IMAGES
========================================================= */
.dishiva-gallery-image {
position: relative;
z-index: 2;
width: 100%;
height: 450px;
display: none;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: zoom-in;
}
.dishiva-gallery-image img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transition:
transform 0.45s ease;
}
.dishiva-gallery-image:hover img {
transform:
scale(1.035);
}
/* =========================================================
ACTIVE IMAGE
========================================================= */
#pink-cap-img-1:checked
~ .dishiva-main-image-box
.pink-cap-gallery-image-1 {
display: flex;
}
#pink-cap-img-2:checked
~ .dishiva-main-image-box
.pink-cap-gallery-image-2 {
display: flex;
}
#pink-cap-img-3:checked
~ .dishiva-main-image-box
.pink-cap-gallery-image-3 {
display: flex;
}
#pink-cap-img-4:checked
~ .dishiva-main-image-box
.pink-cap-gallery-image-4 {
display: flex;
}
/* =========================================================
BADGE
========================================================= */
.dishiva-product-badge {
position: absolute;
top: 22px;
left: 22px;
z-index: 10;
padding: 9px 15px;
border-radius: 50px;
background:
var(--dishiva-navy);
color: #ffffff;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
}
/* =========================================================
THUMBNAILS
========================================================= */
.dishiva-image-thumbnails {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 12px;
margin-top: 14px;
}
.dishiva-thumbnail {
height: 95px;
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
overflow: hidden;
border-radius: 12px;
background: #ffffff;
border:
1px solid
var(--dishiva-border);
cursor: pointer;
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.dishiva-thumbnail:hover {
transform:
translateY(-3px);
border-color:
var(--dishiva-blue);
box-shadow:
0 8px 20px
rgba(70, 75, 113, 0.12);
}
.dishiva-thumbnail img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
/* ACTIVE THUMBNAIL */
#pink-cap-img-1:checked
~ .dishiva-image-thumbnails
.pink-cap-thumbnail-1,
#pink-cap-img-2:checked
~ .dishiva-image-thumbnails
.pink-cap-thumbnail-2,
#pink-cap-img-3:checked
~ .dishiva-image-thumbnails
.pink-cap-thumbnail-3,
#pink-cap-img-4:checked
~ .dishiva-image-thumbnails
.pink-cap-thumbnail-4 {
border:
2px solid
var(--dishiva-blue);
box-shadow:
0 7px 18px
rgba(17, 138, 178, 0.12);
}
.dishiva-gallery-note {
margin: 11px 0 0;
text-align: center;
color: #9295A2;
font-size: 10px;
letter-spacing: 0.3px;
}
/* =========================================================
PRODUCT INFO
========================================================= */
.dishiva-product-category {
display: inline-block;
margin-bottom: 13px;
color:
var(--dishiva-blue);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.dishiva-product-info h1 {
margin: 0 0 13px;
color:
var(--dishiva-navy);
font-size:
clamp(40px, 5vw, 62px);
line-height: 1.02;
letter-spacing: -2px;
font-weight: 700;
}
.dishiva-product-info h1 span {
display: block;
margin-top: 7px;
color:
#D95C91;
font-size: 0.52em;
line-height: 1.25;
letter-spacing: -0.2px;
}
.dishiva-product-info h2 {
margin: 0 0 20px;
color:
var(--dishiva-dark);
font-size: 21px;
line-height: 1.45;
font-weight: 600;
}
.dishiva-product-short {
max-width: 620px;
margin: 0 0 28px;
color: #65697C;
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
KEY FEATURES
========================================================= */
.dishiva-key-features {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 12px;
margin-bottom: 30px;
}
.dishiva-key-feature {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 9px;
background:
rgba(124, 213, 199, 0.12);
border:
1px solid
rgba(124, 213, 199, 0.28);
}
.dishiva-key-feature span {
width: 23px;
height: 23px;
flex: 0 0 23px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
var(--dishiva-mint);
color:
var(--dishiva-navy);
font-size: 12px;
font-weight: 800;
}
.dishiva-key-feature p {
margin: 0;
color:
var(--dishiva-dark);
font-size: 12.5px;
font-weight: 600;
}
/* =========================================================
CTA
========================================================= */
.dishiva-product-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.dishiva-call-btn,
.dishiva-whatsapp-btn {
min-height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 22px;
border-radius: 8px;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}
.dishiva-call-btn {
background:
var(--dishiva-navy);
color: #ffffff;
}
.dishiva-call-btn:hover {
transform:
translateY(-3px);
background:
var(--dishiva-dark);
color: #ffffff;
box-shadow:
0 12px 28px
rgba(70, 75, 113, 0.22);
}
.dishiva-whatsapp-btn {
background:
var(--dishiva-mint);
color:
var(--dishiva-navy);
}
.dishiva-whatsapp-btn:hover {
transform:
translateY(-3px);
background:
var(--dishiva-blue);
color: #ffffff;
box-shadow:
0 12px 28px
rgba(17, 138, 178, 0.22);
}
.dishiva-enquiry-note {
margin: 14px 0 0;
color: #858999;
font-size: 11px;
line-height: 1.6;
}
/* =========================================================
PRODUCT DETAILS
========================================================= */
.dishiva-product-details {
padding: 90px 0;
background: #ffffff;
}
.dishiva-product-details
.dishiva-product-container {
display: grid;
grid-template-columns:
0.85fr 1.15fr;
gap: 35px;
align-items: start;
}
.dishiva-details-card {
padding: 35px;
background: #ffffff;
border:
1px solid
var(--dishiva-border);
border-radius: 18px;
box-shadow:
0 15px 45px
rgba(70, 75, 113, 0.06);
}
/* =========================================================
SECTION HEADINGS
========================================================= */
.dishiva-section-heading > span {
display: block;
margin-bottom: 9px;
color:
var(--dishiva-blue);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.dishiva-section-heading h2 {
margin: 0 0 12px;
color:
var(--dishiva-navy);
font-size: 31px;
line-height: 1.2;
letter-spacing: -0.6px;
font-weight: 700;
}
.dishiva-section-heading > p {
margin: 0 0 27px;
color: #777B8D;
font-size: 13px;
line-height: 1.7;
}
/* =========================================================
SPECIFICATIONS
========================================================= */
.dishiva-spec-table {
border-top:
1px solid
var(--dishiva-border);
}
.dishiva-spec-row {
display: grid;
grid-template-columns:
42% 58%;
border-bottom:
1px solid
var(--dishiva-border);
}
.dishiva-spec-label,
.dishiva-spec-value {
padding: 15px 10px;
font-size: 13px;
line-height: 1.55;
}
.dishiva-spec-label {
color:
var(--dishiva-navy);
font-weight: 700;
}
.dishiva-spec-value {
color: #686C7E;
}
/* =========================================================
DESCRIPTION
========================================================= */
.dishiva-product-description {
display: flex;
flex-direction: column;
gap: 22px;
}
.dishiva-description-item {
display: grid;
grid-template-columns:
42px 1fr;
gap: 15px;
align-items: start;
}
.dishiva-description-icon {
width: 39px;
height: 39px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background:
rgba(124, 213, 199, 0.18);
color:
var(--dishiva-blue);
font-size: 10px;
font-weight: 800;
}
.dishiva-description-item h3 {
margin:
1px 0 6px;
color:
var(--dishiva-navy);
font-size: 15px;
line-height: 1.3;
font-weight: 700;
}
.dishiva-description-item p {
margin: 0;
color: #717587;
font-size: 12.5px;
line-height: 1.75;
}
/* =========================================================
APPLICATIONS
========================================================= */
.dishiva-applications {
padding: 90px 0;
background:
var(--dishiva-cream);
}
.dishiva-section-heading.center {
max-width: 720px;
margin:
0 auto 45px;
text-align: center;
}
.dishiva-section-heading.center > p {
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
.dishiva-application-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 18px;
}
.dishiva-application-card {
padding: 27px 24px;
background: #ffffff;
border:
1px solid
rgba(70, 75, 113, 0.08);
border-radius: 15px;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.dishiva-application-card:hover {
transform:
translateY(-6px);
box-shadow:
0 18px 35px
rgba(70, 75, 113, 0.10);
}
.application-number {
margin-bottom: 18px;
color:
var(--dishiva-blue);
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
}
.dishiva-application-card h3 {
margin: 0 0 9px;
color:
var(--dishiva-navy);
font-size: 16px;
font-weight: 700;
}
.dishiva-application-card p {
margin: 0;
color: #777B8D;
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
PRODUCT BENEFITS
========================================================= */
.dishiva-size-section {
padding: 90px 0;
background: #ffffff;
}
.dishiva-size-grid {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: 20px;
}
.dishiva-size-card {
min-height: 230px;
padding: 35px 25px;
text-align: center;
border-radius: 18px;
background:
var(--dishiva-cream);
border:
1px solid
rgba(70, 75, 113, 0.08);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.dishiva-size-card:hover {
transform:
translateY(-6px);
box-shadow:
0 15px 35px
rgba(70, 75, 113, 0.10);
}
.dishiva-size-card span {
display: block;
margin-bottom: 15px;
color:
var(--dishiva-blue);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.dishiva-size-card strong {
display: block;
color:
var(--dishiva-navy);
font-size: 39px;
line-height: 1;
font-weight: 700;
}
.dishiva-size-card p {
margin: 18px 0 0;
color: #74788A;
font-size: 12px;
line-height: 1.65;
}
.dishiva-size-card.featured-size {
background:
var(--dishiva-navy);
border-color:
var(--dishiva-navy);
transform:
translateY(-8px);
}
.dishiva-size-card.featured-size:hover {
transform:
translateY(-13px);
}
.dishiva-size-card.featured-size span {
color:
var(--dishiva-mint);
}
.dishiva-size-card.featured-size strong {
color: #ffffff;
}
.dishiva-size-card.featured-size p {
color:
rgba(255,255,255,0.70);
}
/* =========================================================
WHY DISHIVA
========================================================= */
.dishiva-why-product {
padding: 90px 0;
background: #ffffff;
}
.dishiva-why-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 18px;
}
.dishiva-why-card {
padding: 28px 22px;
border-radius: 15px;
background:
var(--dishiva-cream);
border:
1px solid
rgba(70, 75, 113, 0.07);
}
.dishiva-why-card strong {
display: block;
margin-bottom: 18px;
color:
var(--dishiva-blue);
font-size: 11px;
letter-spacing: 1px;
}
.dishiva-why-card h3 {
margin: 0 0 9px;
color:
var(--dishiva-navy);
font-size: 16px;
}
.dishiva-why-card p {
margin: 0;
color: #777B8D;
font-size: 12px;
line-height: 1.7;
}
/* =========================================================
FINAL CTA
========================================================= */
.dishiva-product-final-cta {
padding: 70px 0;
background:
var(--dishiva-navy);
}
.dishiva-final-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.dishiva-final-cta-inner > div:first-child {
max-width: 680px;
}
.dishiva-final-cta-inner span {
display: block;
margin-bottom: 10px;
color:
var(--dishiva-mint);
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.dishiva-final-cta-inner h2 {
margin: 0 0 12px;
color: #ffffff;
font-size: 34px;
line-height: 1.2;
letter-spacing: -0.7px;
}
.dishiva-final-cta-inner p {
margin: 0;
color:
rgba(255, 255, 255, 0.68);
font-size: 13px;
line-height: 1.7;
}
.dishiva-final-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
flex-shrink: 0;
}
.dishiva-final-buttons
.dishiva-call-btn {
background: #ffffff;
color:
var(--dishiva-navy);
}
.dishiva-final-buttons
.dishiva-call-btn:hover {
background:
var(--dishiva-mint);
color:
var(--dishiva-navy);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1050px) {
.dishiva-product-hero
.dishiva-product-container {
gap: 45px;
}
.dishiva-product-details
.dishiva-product-container {
grid-template-columns: 1fr;
}
.dishiva-application-grid {
grid-template-columns:
1fr 1fr;
}
.dishiva-why-grid {
grid-template-columns:
1fr 1fr;
}
.dishiva-final-cta-inner {
align-items: flex-start;
flex-direction: column;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
.dishiva-product-container {
width:
calc(100% - 32px);
}
.dishiva-product-hero {
padding:
45px 0 55px;
}
.dishiva-product-hero
.dishiva-product-container {
grid-template-columns: 1fr;
gap: 35px;
}
.dishiva-main-image-box {
min-height: 350px;
padding:
25px 18px;
border-radius: 18px;
}
.dishiva-gallery-image {
height: 310px;
}
.dishiva-image-thumbnails {
gap: 8px;
}
.dishiva-thumbnail {
height: 78px;
padding: 5px;
}
.dishiva-product-info h1 {
font-size: 45px;
letter-spacing: -1.5px;
}
.dishiva-product-info h1 span {
font-size: 0.50em;
}
.dishiva-product-info h2 {
font-size: 19px;
}
.dishiva-key-features {
grid-template-columns:
1fr;
}
.dishiva-product-cta {
flex-direction: column;
}
.dishiva-product-cta a {
width: 100%;
}
.dishiva-product-details {
padding:
60px 0;
}
.dishiva-details-card {
padding:
25px 20px;
}
.dishiva-section-heading h2 {
font-size: 27px;
}
.dishiva-applications {
padding:
60px 0;
}
.dishiva-application-grid {
grid-template-columns:
1fr;
}
.dishiva-size-section {
padding:
60px 0;
}
.dishiva-size-grid {
grid-template-columns:
1fr;
}
.dishiva-size-card.featured-size {
transform: none;
}
.dishiva-size-card.featured-size:hover {
transform:
translateY(-6px);
}
.dishiva-why-product {
padding:
60px 0;
}
.dishiva-why-grid {
grid-template-columns:
1fr;
}
.dishiva-product-final-cta {
padding:
55px 0;
}
.dishiva-final-cta-inner h2 {
font-size: 28px;
}
.dishiva-final-buttons {
width: 100%;
flex-direction: column;
}
.dishiva-final-buttons a {
width: 100%;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 430px) {
.dishiva-main-image-box {
min-height: 290px;
}
.dishiva-gallery-image {
height: 255px;
}
.dishiva-thumbnail {
height: 68px;
}
.dishiva-product-info h1 {
font-size: 39px;
}
.dishiva-product-info h2 {
font-size: 17px;
}
.dishiva-spec-row {
grid-template-columns:
1fr;
}
.dishiva-spec-label {
padding-bottom: 3px;
background:
rgba(242, 242, 237, 0.45);
}
.dishiva-spec-value {
padding-top: 8px;
}
.dishiva-size-card strong {
font-size: 36px;
}
}/* End custom CSS */