/* Layout and type values mirror the live paknamak.pk (Divi) build section by section. */
:root {
    --blue: #2ea3f2;
    --green-dark: #00463b;
    --green: #27643c;
    --orange: #ff6847;
    --grey-bg: #f2f2f2;
    --josefin: 'Josefin Sans', Helvetica, Arial, Lucida, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, form, label, strong {
    margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}
body {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7em;
    color: #666;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
p { padding-bottom: 1em; }
p:last-of-type { padding-bottom: 0; }
h1, h2, h3, h4, h5, h6 { color: #333; padding-bottom: 10px; line-height: 1em; font-weight: 500; }
h1 { font-size: 30px; } h2 { font-size: 26px; } h3 { font-size: 22px; }
h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 14px; }
img { max-width: 100%; height: auto; }
ul { list-style: none; }

.container { width: 80%; max-width: 1080px; margin: auto; position: relative; }

/* ---------- Top header ---------- */
#top-header {
    background-color: var(--blue);
    font-size: 12px; line-height: 1em; color: #fff; font-weight: 600;
    position: fixed; top: 0; left: 0; right: 0; z-index: 100000;
}
#top-header .container { padding-top: .75em; }
#top-header a { color: #fff; }
#et-info { padding-bottom: .75em; display: block; }
#et-info svg { width: 13px; height: 13px; fill: currentColor; vertical-align: -2px; margin-right: 4px; }
#et-info-phone { margin-right: 13px; }

/* ---------- Main header ---------- */
#main-header {
    position: fixed; top: 30px; left: 0; width: 100%; z-index: 99999;
    background-color: #fff; line-height: 23px; font-weight: 500;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    transition: background-color .4s, box-shadow .4s;
}
#main-header.et-fixed-header { box-shadow: 0 0 7px rgba(0, 0, 0, .1); }
#main-header .container { display: flex; justify-content: space-between; align-items: stretch; }
.logo_container { display: flex; align-items: center; }
#logo { display: block; height: 80px; width: auto; max-height: 100%; transition: height .4s ease-in-out; }
.et-fixed-header #logo { height: 54px; }
#et-top-navigation { font-weight: 600; padding-top: 33px; transition: padding .4s; }
.et-fixed-header #et-top-navigation { padding-top: 20px; }
#top-menu { line-height: 0; display: flex; }
#top-menu li { font-size: 14px; padding-right: 22px; }
#top-menu li:last-child { padding-right: 0; }
#top-menu a {
    display: block; padding-bottom: 33px; line-height: 1em;
    color: rgba(0, 0, 0, .6); transition: opacity .4s ease-in-out, padding .4s;
}
.et-fixed-header #top-menu a { padding-bottom: 20px; }
#top-menu a:hover { opacity: .7; }
#top-menu li.current-menu-item > a { color: var(--blue); }
#top-menu li { position: relative; }
#top-menu .menu-item-has-children > a { padding-right: 20px; }
#top-menu .menu-item-has-children > a::after {
    content: ''; position: absolute; right: 2px; top: 3px;
    border: solid currentColor; border-width: 0 2px 2px 0; padding: 3px; transform: rotate(45deg);
}
#top-menu .sub-menu {
    position: absolute; top: 100%; left: 0; z-index: 9999; width: 240px;
    background: #fff; padding: 20px 0; line-height: 1.3em;
    border-top: 3px solid var(--blue); box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
    visibility: hidden; opacity: 0; transition: opacity .2s ease-in-out, visibility .2s;
}
#top-menu li:hover > .sub-menu, #top-menu li:focus-within > .sub-menu { visibility: visible; opacity: 1; }
#top-menu .sub-menu li { display: block; padding: 0 20px; }
#top-menu .sub-menu a { padding: 6px 20px; width: 200px; }
#top-menu .sub-menu a:hover { background-color: rgba(0, 0, 0, .03); }

#et_mobile_nav_menu { display: none; position: relative; }
.mobile_menu_bar { display: block; cursor: pointer; padding-bottom: 24px; line-height: 0; background: none; border: 0; }
.mobile_menu_bar svg { width: 32px; height: 32px; fill: var(--blue); }
.et_mobile_menu {
    display: none; position: absolute; top: 100%; left: 0; width: 100%;
    background: #fff; padding: 5%; z-index: 9999;
    border-top: 3px solid var(--blue); box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
.et_mobile_menu.open { display: block; }
.et_mobile_menu li a {
    display: block; padding: 10px 5%; color: #666; font-size: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .03);
}
.et_mobile_menu li a:hover { background-color: rgba(0, 0, 0, .03); opacity: .7; }

#page-container { padding-top: 110px; }

/* ---------- Sections / rows / columns ---------- */
.et_pb_section { position: relative; background-color: #fff; padding: 10px 0; background-size: cover; background-position: 50%; }
.et_pb_row { width: 80%; max-width: 1080px; margin: auto; position: relative; padding: 2% 0; display: flex; align-items: flex-start; }
.et_pb_row.equal { align-items: stretch; }
.col { position: relative; margin-right: 5.5%; min-width: 0; }
.col:last-child { margin-right: 0; }
.col-4_4 { width: 100%; }
.col-1_2 { width: 47.25%; }
.col-1_3 { width: 29.6667%; }
.col-2_5 { width: 36.7%; }
.col-3_5 { width: 57.8%; }
.gutters1 .col { margin-right: 0; }
.gutters1 .col-1_2 { width: 50%; }
.gutters1 .col-1_3 { width: 33.3333%; }

.mod { position: relative; word-wrap: break-word; }
.col-4_4 > .mod { margin-bottom: 2.75%; }
.col-1_2 > .mod { margin-bottom: 5.82%; }
.col-1_3 > .mod { margin-bottom: 9.27%; }
.col-2_5 > .mod { margin-bottom: 7.493%; }
.col-3_5 > .mod { margin-bottom: 4.758%; }
.gutters1 .col > .mod { margin-bottom: 0; }
.col > .mod:last-child { margin-bottom: 0 !important; }

/* Module spacing overrides used by the live layout */
.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 30px !important; }
.pad-20 { padding: 20px; }
.pad-30 { padding: 30px; }
.pad-40 { padding: 40px; }
.border-2 { border: 2px solid #000; }

.t-center { text-align: center; }
.t-left { text-align: left; }
.t-right { text-align: right; }

/* Default heading sizes inside narrow columns */
.col-1_3 h1, .col-2_5 h1 { font-size: 26px; }
.col-1_3 h2, .col-2_5 h2 { font-size: 23px; }
.col-1_3 h3, .col-2_5 h3 { font-size: 20px; }

/* ---------- Typography presets (Divi module settings) ---------- */
.jh { font-family: var(--josefin); font-weight: 700; }
.h72 { font-family: var(--josefin); font-weight: 700; font-size: 72px; line-height: 1.2em; }
.h52 { font-family: var(--josefin); font-weight: 700; font-size: 52px; line-height: 1.2em; }
.h24 { font-family: var(--josefin); font-weight: 700; font-size: 24px; line-height: 1.4em; }
.h20 { font-family: var(--josefin); font-weight: 700; font-size: 20px; line-height: 1.4em; }
.h14up { font-family: var(--josefin); font-weight: 700; font-size: 14px; line-height: 1.4em; text-transform: uppercase; letter-spacing: 1px; }
.txt16 { font-size: 16px; line-height: 1.8em; }
.lh16 { line-height: 1.6em; }

.c-white, .c-white a { color: #fff !important; }
.c-green { color: var(--green-dark) !important; }
.c-orange { color: var(--orange) !important; }
.c-black { color: #000 !important; }
.c-333 { color: #333 !important; }
.c-666 { color: #666 !important; }
.bg-grey { background-color: var(--grey-bg); }
.bg-white { background-color: #fff; }
.bg-green { background-color: var(--green) !important; }
.bg-green-dark { background-color: var(--green-dark); }
.bg-orange { background-color: var(--orange); }

/* ---------- Images ---------- */
.et_pb_image { line-height: 0; }
.et_pb_image img { position: relative; }
.icon-64 { max-width: 64px; }
.icon-64 img { max-height: 64px; width: auto; }
.thumb-225 img { width: 225px; height: 300px; object-fit: cover; }

/* ---------- Buttons ---------- */
.btn-wrap { position: relative; }
.et_pb_button {
    display: inline-block; position: relative;
    font-family: var(--josefin); font-weight: 700; font-size: 14px;
    letter-spacing: .12em; text-transform: uppercase;
    line-height: 1.7em; padding: 12px 24px; border: 0; border-radius: 50px;
    transition: all 300ms ease 0ms; cursor: pointer;
}
.et_pb_button::after {
    content: '\2192'; position: absolute; font-size: 1.2em; line-height: 1.4em;
    opacity: 0; margin-left: -1em; transition: all .2s; text-transform: none;
}
.et_pb_button:hover::after { opacity: 1; margin-left: .2em; }
.btn-white { background-color: #fff; color: #000 !important; }
.btn-green { background-color: var(--green-dark); color: #fff !important; }

/* ---------- Social follow ---------- */
.social-follow { display: flex; flex-wrap: wrap; margin: 0 -8px 22px; }
.social-follow.no-neg { margin-left: 0; margin-right: 0; }
.social-follow li { margin: 0 0 8px 8px; }
.social-follow.no-neg li { margin: 0 8px 8px 0; }
.social-follow a {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 3px; color: #fff;
}
.social-follow svg { width: 16px; height: 16px; fill: currentColor; transition: opacity .3s; }
.social-follow a:hover svg { opacity: .7; }
.sn-facebook { background-color: #3b5998; }
.sn-tiktok { background-color: #fe2c55; }
.sn-youtube { background-color: #a82400; }
.sn-whatsapp { background-color: #25d366; }
.sn-linkedin { background-color: #007bb6; }
.sn-twitter { background-color: #000; }
.sn-instagram { background-color: #ea2c59; }

/* ---------- Hero sections ---------- */
.hero-home {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .7) 100%), url('../images/hero-bg.jpg');
}
.hero-shop {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .72) 100%), url('../images/hero-bg.jpg');
}
.row-800 { max-width: 800px; }
.row-wide { width: 87.3%; }
.row-pt0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.row-pb0 { padding-bottom: 0 !important; }
.row-pb29 { padding-bottom: 29px !important; }
.col-pad-10pct { padding-top: 10%; padding-bottom: 10%; }

/* ---------- Contact form (CF7 styles) ---------- */
.wpcf7-form label { font-weight: 600; margin-top: 10px; display: block; }
.wpcf7-form p { padding-bottom: 1em; }
.wpcf7-form .form-control {
    width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; margin-top: 5px;
    font: inherit; color: #666; background: #fff;
}
.wpcf7-form textarea.form-control { height: 150px; resize: vertical; }
.wpcf7-form .btn { background: #28a745; color: #fff; padding: 10px 25px; border: none; border-radius: 6px; cursor: pointer; font: inherit; }
.wpcf7-form .btn:hover { background: #218838; }
.form-msg { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; }
.form-msg.ok { background: #e6f4ea; color: #1e5631; border: 1px solid #b7dfc1; }
.form-error { color: #dc3232; font-size: 1em; display: block; }

.contact-icon svg { width: 32px; height: 32px; fill: #fff; display: block; }

/* ---------- Accordion (FAQs) ---------- */
.accordion .toggle { padding: 20px; border-bottom: 1px solid #000; background-color: transparent; margin-bottom: 10px; position: relative; }
.accordion .toggle:last-child { margin-bottom: 0; }
.accordion .toggle-title {
    font-family: var(--josefin); font-weight: 700; font-size: 20px; line-height: 1.4em;
    color: var(--green-dark) !important; padding: 0 50px 0 0; cursor: pointer; position: relative;
}
.accordion .toggle-title::before {
    content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 26px; font-weight: 400; color: var(--green-dark); line-height: 1;
}
.accordion .toggle.open .toggle-title::before { display: none; }
.accordion .toggle-content { display: none; padding-top: 20px; line-height: 1.6em; }
.accordion .toggle.open .toggle-content { display: block; }
.accordion .toggle-content p { line-height: 1.6em; }


/* ---------- Contact map ---------- */
.map-embed { line-height: 0; }
.map-embed iframe { width: 100%; height: 450px; border: 0; }

/* ---------- 404 ---------- */
.error-code { font-family: var(--josefin); font-weight: 700; font-size: 140px; line-height: 1; color: var(--orange); padding-bottom: 0; }
.error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }


/* ---------- Large screens ---------- */
@media (min-width: 1350px) {
    .et_pb_row { padding: 27px 0; }
}

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
    #top-header, #main-header { position: relative; top: 0; }
    #top-header .container { padding-top: .75em; text-align: center; }
    #page-container { padding-top: 0; }
    #main-header .container { min-height: 80px; }
    #logo { height: 80px; max-width: 50vw; object-fit: contain; }
    #top-menu-nav { display: none; }
    #et-top-navigation { padding-top: 24px; }
    #et_mobile_nav_menu { display: block; }
    #main-header .container { position: static; }

    .et_pb_row { flex-wrap: wrap; padding: 30px 0; }
    .col, .gutters1 .col { width: 100% !important; margin-right: 0; margin-bottom: 30px; }
    .col:last-child { margin-bottom: 0; }
    .gutters1 .col { margin-bottom: 0; }
    .col > .mod { margin-bottom: 30px; }
    .gutters1 .col > .mod { margin-bottom: 0; }
    .pad-30, .pad-40 { padding: 30px; }

    .h72 { font-size: 40px; }
    .h52 { font-size: 32px; }
    .h24, .h20, .accordion .toggle-title { font-size: 16px; }
    .txt16 { font-size: 15px; }
    .contact-icon { display: flex; justify-content: center; }
    .map-embed iframe { height: 320px; }
    .error-code { font-size: 96px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
    .pad-20, .pad-30, .pad-40 { padding: 20px; }
    .h72 { font-size: 24px; }
    .h52 { font-size: 20px; }
    .h24 { font-size: 15px; }
    .h20, .txt16 { font-size: 14px; }
    .et_pb_button::after { display: inline-block; }
}


/* ---------- Legal pages ---------- */
.legal h2 { font-family: var(--josefin); font-weight: 700; font-size: 24px; line-height: 1.4em; color: var(--green-dark); padding: 20px 0 6px; }
.legal p { padding-bottom: 1em; }
.legal ul { list-style: disc; padding: 0 0 1em 22px; }
.legal li { padding-bottom: .4em; }
.legal a { color: var(--green); text-decoration: underline; }
@media (max-width: 767px) { .legal h2 { font-size: 18px; } }


/* ---------- Footer ---------- */
.ft { background: #0b3a32; color: #b9cdc6; font-size: 14px; line-height: 1.7; }
.ft a { color: #e3eeea; transition: color .2s; }
.ft a:hover { color: #fff; }
.ft p { padding: 0; }
.ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.6fr; gap: 40px; padding: 56px 0 48px; }
.ft-brand { display: flex; flex-direction: column; gap: 14px; }
.ft-logo { display: inline-flex; align-items: center; gap: 12px; }
.ft-logo img { width: 64px; height: 64px; background: #fff; border-radius: 50%; padding: 4px; }
.ft-logo span { font-family: var(--josefin); font-weight: 700; font-size: 20px; line-height: 1.1; color: #fff; }
.ft-logo small { display: block; font-weight: 400; font-size: 14px; color: #b9cdc6; }
.ft-tagline { font-size: 18px; line-height: 1.8; color: #ffb39f; text-align: left; }
.ft-brand > p:not(.ft-tagline) { max-width: 320px; }
.ft-social.social-follow { display: flex; gap: 8px; margin: 4px 0 0; }
.ft-social.social-follow li { margin: 0; }
.ft-social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08) !important; color: #fff; transition: background .2s; }
.ft-social a:hover { background: rgba(255, 255, 255, .2) !important; }
.ft-social svg { width: 16px; height: 16px; }
.ft-col h2 { font-family: var(--josefin); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: #fff; padding: 0 0 16px; }
.ft-col ul { display: flex; flex-direction: column; gap: 10px; }
.ft-col li a { display: inline-block; }
.ft-contact li { display: flex; gap: 12px; align-items: flex-start; }
.ft-contact svg { flex: none; width: 18px; height: 18px; fill: #ffb39f; margin-top: 3px; }
.ft-address { display: block; line-height: 1.9; text-align: right; }
.ft-more { display: inline-block; font-size: 13px; color: #ffb39f !important; }
.ft-more:hover { text-decoration: underline; }
.ft-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 11px 18px; border-radius: 999px; background: #1f7a45; color: #fff !important; font-weight: 600; font-size: 14px; line-height: 1; }
.ft-wa:hover { background: #1a6e3d; }
.ft-wa svg { fill: currentColor; flex: none; }
.ft-bottom { background: #072a24; font-size: 13px; color: #8fa9a1; }
.ft-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; padding: 16px 0; }
.ft-bottom ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ft-bottom a { color: #b9cdc6; }
.ft-ntn { margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .2); }

@media (max-width: 980px) {
    .ft-grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; padding: 44px 0 36px; }
    .ft-brand, .ft-contact { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .ft .container { width: auto; margin: 0 16px; }
    .ft-grid { gap: 32px 20px; padding: 36px 0 28px; }
    .ft-col h2 { padding-bottom: 12px; }
    .ft-col ul { gap: 4px; }
    .ft-col:not(.ft-contact) li a { padding: 6px 0; }
    .ft-wa { width: 100%; justify-content: center; height: 48px; }
    .ft-bottom-inner { flex-direction: column; align-items: flex-start; padding: 18px 0; }
    .ft-ntn { display: block; margin: 2px 0 0; padding: 0; border: 0; }
}

/* ---------- Utilities ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Products page ---------- */
.pp { --pp-ground: #f6f4ee; --pp-line: #e6e2d6; --pp-ink: #1d2b26; --pp-text: #3d4a45; --pp-muted: #5d6b66; --pp-wa: #1f7a45; --pp-wa-hover: #1a6e3d;
    background: var(--pp-ground); color: var(--pp-text); font-size: 15px; }
.pp h1, .pp h2, .pp h3 { font-family: var(--josefin); font-weight: 700; padding: 0; line-height: 1.15; }
.pp p { padding: 0; }
.pp [hidden] { display: none !important; }

.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; font-size: 14px; line-height: 1;
    padding: 12px 20px; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; font-family: inherit; }
.pp-btn svg { fill: currentColor; flex: none; }
.pp-btn-lg { padding: 15px 26px; font-size: 15px; }
.pp-btn-sm { padding: 10px 15px; font-size: 13px; }
.pp-btn-wa { background: var(--pp-wa); color: #fff; }
.pp-btn-wa:hover { background: var(--pp-wa-hover); color: #fff; }
.pp-btn-ghost { border-color: var(--green-dark); color: var(--green-dark); background: #fff; }
.pp-btn-ghost:hover { background: var(--green-dark); color: #fff; }
.pp-btn-primary { background: var(--green-dark); color: #fff; }
.pp-btn-primary:hover { background: var(--green); }
.pp-btn-light { background: #fff; color: var(--green-dark); }
.pp-btn-light:hover { background: #e9f1ee; color: var(--green-dark); }
.pp-btn-outline-light { border-color: rgba(255, 255, 255, .55); color: #fff; }
.pp-btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Hero */
.pp-hero { background: var(--green-dark); color: #dbe8e3; }
.pp-hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; padding: 56px 0 64px; }
.pp-hero-text { display: flex; flex-direction: column; gap: 18px; }
.pp-crumbs { font-size: 13px; color: #b9d3c9; }
.pp-crumbs a { color: #b9d3c9; }
.pp-crumbs a:hover { color: #fff; }
.pp-crumbs span { margin: 0 6px; }
.pp-hero h1 { font-size: 54px; line-height: 1.05; color: #fff; }
.pp-lead { font-size: 17px; line-height: 1.7; max-width: 480px; }
.pp-lead-ur { font-size: 18px; line-height: 2; text-align: left; }
.pp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.pp-hero-media { position: relative; }
.pp-hero-media img { display: block; width: 100%; height: 380px; object-fit: cover; border-radius: 20px; }
.pp-hero-stats { position: absolute; left: -24px; bottom: 28px; margin: 0; display: flex; gap: 24px; background: #fff; color: var(--green-dark);
    border-radius: 14px; padding: 14px 20px; box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.pp-hero-stats div { display: flex; flex-direction: column-reverse; }
.pp-hero-stats dt { font-size: 12px; color: var(--pp-muted); }
.pp-hero-stats dd { margin: 0; font-family: var(--josefin); font-weight: 700; font-size: 26px; line-height: 1.1; }

/* Filter bar */
.pp-bar { position: sticky; top: 84px; z-index: 50; background: #fff; border-bottom: 1px solid var(--pp-line); }
.pp-bar-inner { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.pp-tabs { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pp-tabs::-webkit-scrollbar { display: none; }
.pp-tabs button { flex: none; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #d9d4c5; background: #fff; color: var(--pp-text);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; }
.pp-tabs button span { font-weight: 500; opacity: .7; margin-left: 2px; }
.pp-tabs button:hover { border-color: var(--green-dark); }
.pp-tabs button.is-active { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.pp-search { position: relative; display: flex; align-items: center; flex: 0 0 260px; }
.pp-search svg { position: absolute; left: 14px; fill: none; stroke: #7a8782; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.pp-search input { width: 100%; height: 44px; padding: 0 16px 0 40px; border: 1px solid #d9d4c5; border-radius: 999px; background: #faf9f5; font: inherit; font-size: 14px; color: var(--pp-ink); }
.pp-search input:focus { outline: none; border-color: var(--green-dark); background: #fff; }

/* Groups */
.pp-main { padding: 48px 0 64px; display: flex; flex-direction: column; gap: 64px; }
.pp-group { scroll-margin-top: 160px; }
.pp-group-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; border-bottom: 1px solid #e0dbcc; padding-bottom: 14px; margin-bottom: 24px; }
.pp-group-head h2 { font-size: 30px; color: var(--green-dark); }
.pp-group-head p { margin-top: 6px; font-size: 14px; color: var(--pp-muted); }
.pp-group-head .pp-group-ur { margin: 0; font-size: 18px; line-height: 1.8; color: var(--green); }

/* Cards */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.pp-grid-wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.pp-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pp-line); border-radius: 16px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.pp-card:hover { box-shadow: 0 14px 34px rgba(0, 70, 59, .12); transform: translateY(-2px); }
.pp-card-media { position: relative; height: 240px; background: #efece3; }
.pp-card-media-square { height: auto; aspect-ratio: 1 / 1; }
.pp-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-swatch { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; }
.pp-swatch span { font-size: 24px; line-height: 1.8; color: #fff; }
.pp-swatch small { font-size: 12px; color: rgba(255, 255, 255, .85); }
.pp-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 18px; }
.pp-card-title { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.pp-card-title h3 { font-size: 19px; color: var(--pp-ink); line-height: 1.3; }
.pp-card-title span { font-size: 14px; color: var(--green); }
.pp-card-desc { font-size: 14px; line-height: 1.9; color: var(--pp-muted); text-align: right; }
.pp-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pp-chips button { height: 36px; border-radius: 8px; border: 1px solid #d9d4c5; background: #faf9f5; color: var(--pp-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; }
.pp-chips button:hover { border-color: var(--green-dark); }
.pp-chips button.is-active { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.pp-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed #e0dbcc; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pp-rate { font-size: 13px; color: var(--pp-muted); }
.pp-card-actions { display: flex; gap: 8px; }
.pp-card-media-square + .pp-card-body .pp-card-foot { flex-direction: column; align-items: stretch; }
.pp-card-media-square + .pp-card-body .pp-card-actions .pp-btn { flex: 1; height: 42px; }

/* Size table (one item, many sizes) */
.pp-sizes { display: grid; grid-template-columns: 5fr 7fr; background: #fff; border: 1px solid var(--pp-line); border-radius: 18px; overflow: hidden; }
.pp-sizes-media { position: relative; min-height: 420px; background: #efece3; }
.pp-sizes-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-sizes-body { padding: 12px 28px 20px; }
.pp-sizes-hint { display: none; }
.pp-table { width: 100%; border-collapse: collapse; }
.pp-table th { padding: 14px 8px; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pp-muted); }
.pp-table td { padding: 12px 8px; border-top: 1px solid #eeeae0; }
.pp-table tbody tr:hover { background: var(--pp-ground); }
.pp-size { font-family: var(--josefin); font-weight: 700; font-size: 20px; color: var(--pp-ink); }
.pp-row-order { text-align: right; }
.pp-hide-lg { display: none; }

/* Empty, steps, CTA */
.pp-empty { text-align: center; padding: 50px 20px; border: 2px dashed #d9d4c5; border-radius: 16px; }
.pp-empty h2 { font-size: 24px; color: var(--green-dark); padding-bottom: 8px; }
.pp-empty p { padding-bottom: 18px; }
.pp-steps { background: #fff; border: 1px solid var(--pp-line); border-radius: 20px; padding: 40px; }
.pp-steps h2 { font-size: 26px; color: var(--green-dark); margin-bottom: 28px; }
.pp-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pp-steps li { display: flex; gap: 16px; }
.pp-steps li > span { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff1ec; color: #c2401f; font-family: var(--josefin); font-weight: 700; font-size: 20px;
    display: flex; align-items: center; justify-content: center; }
.pp-steps h3 { font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; color: var(--pp-ink); margin-bottom: 6px; }
.pp-steps p { font-size: 14px; line-height: 1.6; }
.pp-cta { background: var(--green); color: #dbe8e3; border-radius: 20px; padding: 40px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 32px; }
.pp-cta h2 { font-size: 28px; color: #fff; margin-bottom: 8px; }
.pp-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pp-actionbar { display: none; }

@media (max-width: 980px) {
    .pp-hero-grid { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 44px; }
    .pp-hero h1 { font-size: 40px; }
    .pp-hero-media img { height: 300px; }
    .pp-hero-stats { left: 16px; bottom: 16px; }
    .pp-bar { top: 0; }
    .pp-bar-inner { flex-direction: column-reverse; align-items: stretch; gap: 10px; padding: 12px 0 10px; }
    .pp-search { flex: none; }
    .pp-sizes { grid-template-columns: 1fr; }
    .pp-sizes-media { min-height: 220px; }
    .pp-steps ol { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 767px) {
    .pp .container { width: auto; margin: 0 16px; }
    .pp-hero-grid { padding: 24px 0 28px; gap: 20px; }
    .pp-hero h1 { font-size: 32px; line-height: 1.1; }
    .pp-hero h1 br { display: none; }
    .pp-lead { font-size: 15px; line-height: 1.6; }
    .pp-lead-ur { font-size: 15px; }
    .pp-hero-actions { display: none; }
    .pp-hero-media img { height: 200px; border-radius: 14px; }
    .pp-hero-stats { padding: 10px 14px; gap: 18px; }
    .pp-hero-stats dd { font-size: 20px; }
    .pp-bar .container { margin: 0; }
    .pp-search { margin: 0 16px; }
    .pp-tabs { padding: 0 16px; }
    .pp-tabs button { height: 40px; padding: 0 16px; }
    .pp-main { padding: 24px 0 32px; gap: 36px; }
    .pp-group { scroll-margin-top: 120px; }
    .pp-group-head { display: block; border: 0; padding: 0; margin-bottom: 14px; }
    .pp-group-head h2 { font-size: 24px; }
    .pp-group-head .pp-group-ur { font-size: 14px; text-align: left; margin-top: 2px; }

    /* Cards: photo-left rows for big single-size items, 2-up tiles for sized items */
    .pp-grid-wide { grid-template-columns: 1fr; gap: 12px; }
    .pp-grid-wide .pp-card { flex-direction: row; }
    .pp-grid-wide .pp-card-media { flex: none; width: 116px; height: auto; min-height: 150px; }
    .pp-grid-wide .pp-card-body { padding: 12px 14px; gap: 6px; min-width: 0; }
    .pp-grid-wide .pp-card-title h3 { font-size: 18px; }
    .pp-grid-wide .pp-card-desc { font-size: 13px; }
    .pp-grid-wide .pp-card-foot { border: 0; padding-top: 4px; }
    .pp-grid-wide .pp-rate, .pp-grid-wide .pp-btn-ghost { display: none; }
    .pp-grid-wide .pp-card-actions, .pp-grid-wide .pp-card-actions .pp-btn { flex: 1; }
    .pp-grid:not(.pp-grid-wide) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pp-grid:not(.pp-grid-wide) .pp-card-body { padding: 10px 10px 12px; gap: 8px; }
    .pp-grid:not(.pp-grid-wide) .pp-card-title h3 { font-size: 15px; }
    .pp-grid:not(.pp-grid-wide) .pp-card-title span, .pp-grid:not(.pp-grid-wide) .pp-rate, .pp-grid:not(.pp-grid-wide) .pp-card-desc { display: none; }
    .pp-grid:not(.pp-grid-wide) .pp-card-foot { border: 0; padding-top: 0; }
    .pp-chips { gap: 5px; }
    .pp-chips button { font-size: 12px; }
    .pp-swatch span { font-size: 18px; }
    .pp-card:hover { transform: none; }

    /* Size table becomes a grid of tappable tiles */
    .pp-sizes { border-radius: 16px; }
    .pp-sizes-media { min-height: 180px; }
    .pp-sizes-body { padding: 0 14px 14px; }
    .pp-sizes-hint { display: block; padding: 12px 0 8px !important; font-size: 13px; color: var(--pp-muted); }
    .pp-table thead { display: none; }
    .pp-table { display: block; }
    .pp-table tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .pp-table tr { display: flex; flex-direction: column; gap: 2px; position: relative; padding: 12px; border: 1px solid #d9d4c5; border-radius: 12px; background: #faf9f5; }
    .pp-table td { display: block; padding: 0; border: 0; }
    .pp-table .pp-rate { display: none; }
    .pp-packs { font-size: 12px; color: var(--pp-muted); }
    .pp-hide-lg { display: inline; }
    .pp-row-order { text-align: left; margin-top: 6px; }
    .pp-row-order .pp-btn { background: none; color: var(--pp-wa); padding: 0; font-size: 12px; }
    .pp-row-order .pp-btn:hover { background: none; color: var(--pp-wa-hover); }
    .pp-row-order .pp-btn svg { display: none; }
    .pp-row-order .pp-btn::before { content: ''; position: absolute; inset: 0; }
    .pp-row-order .pp-btn::after { content: '→'; }

    .pp-steps { padding: 20px; border-radius: 16px; }
    .pp-steps h2 { font-size: 20px; margin-bottom: 16px; }
    .pp-steps li { align-items: center; gap: 12px; }
    .pp-steps li > span { width: 32px; height: 32px; font-size: 15px; }
    .pp-steps p { display: none; }
    .pp-steps h3 { font-size: 14px; font-weight: 600; margin: 0; }
    .pp-cta { padding: 22px 20px; border-radius: 16px; }
    .pp-cta h2 { font-size: 22px; }
    .pp-cta-actions, .pp-cta-actions .pp-btn { width: 100%; }
    .pp-cta-actions .pp-btn { height: 46px; }

    .pp-actionbar { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--pp-line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .06); }
    .pp-actionbar .pp-btn { height: 48px; }
    .pp-actionbar .pp-btn-wa:only-child { grid-column: 1 / -1; }
    .pp + #main-footer { padding-bottom: 68px; }
}