#gherb-product {
--green: #1b5e20;
--green-light: #eaf5ec;
--green-mid: #2ccf54;
--text: #0e1e3f;
--text-gray: #4b5b67;
--radius: 30px;
font-family: "Kanit", sans-serif !important;
font-weight: 400;
font-style: normal;
color: #0e1e3f;
overflow-x: hidden;
}
#gherb-product *, #gherb-product *::before, #gherb-product *::after { box-sizing: border-box; }
#gherb-product h1, #gherb-product h2, #gherb-product h3,
#gherb-product h4, #gherb-product p, #gherb-product span,
#gherb-product a { margin: 0; padding: 0; }
#gherb-product img { display: block; max-width: 100%; height: auto; } .gp-hero { position: relative ;
aspect-ratio: 16 / 7 ;
height: auto ; overflow: hidden ;
margin: 24px ;
border-radius: 100px 0 100px 0 ;
}
.gp-hero__inner {
position: absolute; inset: 0;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.gp-hero__overlay-left {
position: absolute;
inset: 0;
backdrop-filter: blur(4px);
-webkit-mask-image: linear-gradient(to right, black 0%, black 40%, transparent 70%);
mask-image: linear-gradient(to right, black 0%, black 40%, transparent 70%);
}
.gp-hero__content {
position: absolute;
top: 50%; transform: translateY(-50%);
left: 80px; bottom: auto;
max-width: 50%; z-index: 2;
color: #0e1e3f; padding: 0;
}
.gp-hero__content h1 {
font-size: 64px; font-weight: 700; line-height: 1.2; color: #0e1e3f;
line-height: 1.25; margin-bottom: 16px;
padding: 10px 0 !important;
}
.gp-hero__content p {
font-size: 16px; color: #4b5b67;
line-height: 1.7; margin-bottom: 28px;
} #gherb-product .g-badge {
display: inline-block;
background: #1b5e20; color: #fff;
font-size: 13px; font-weight: 500;
padding: 6px 30px; border-radius: 999px; margin-bottom: 14px;
}
.gp-mfg__btn {
padding: 10px 26px !important;
font-size: 14px !important;
border-width: 1.5px !important;
}
.gp-mfg__btn:hover {
background: #1b5e20 !important;
color: #fff !important;
opacity: 1 !important;
} #gherb-product .g-section-header { text-align: center; margin-bottom: 52px; }
#gherb-product .g-section-header h2 { font-size: 36px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
#gherb-product .g-section-header p  { font-size: 16px; color: #4b5b67; margin: 0; } #gherb-product .g-btn {
display: inline-block !important;
padding: 5px 30px !important;
border-radius: 999px !important;
font-size: 15px; font-weight: 600;
text-decoration: none !important;
transition: opacity .2s; cursor: pointer;
border: none !important;
font-family: "Kanit", sans-serif;
}
#gherb-product .g-btn:hover          { opacity: .85; }
#gherb-product .g-btn--green         { background: #1b5e20 !important; color: #fff !important; }
#gherb-product .g-btn--white         { background: #fff !important; color: #1b5e20 !important; }
#gherb-product .g-btn--outline       { background: transparent !important; border: 2px solid #1b5e20 !important; color: #1b5e20 !important; }
#gherb-product .g-btn--outline-white { background: transparent !important; border: 2px solid #fff !important; color: #fff !important; }
#gherb-product .g-btn--full          { width: 100%; text-align: center; } .gp-container { max-width: 90%; margin: 0 auto; padding: 0 72px; }
.gp-section { padding: 80px 0; }
.gp-section--gray { background: #f7f9f7; } .gp-products__layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 48px;
align-items: start;
}
.gp-products__label .g-badge { margin-bottom: 16px; }
.gp-products__label h2 { font-size: 34px; font-weight: 700; line-height: 1.35; } .gp-slider { position: relative; }
.gp-slider__btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: clamp(32px, 9vw, 40px); height: clamp(32px, 9vw, 40px);
border-radius: 50%;
background: #fff; border: 1px solid #e5e7eb;
font-size: clamp(18px, 4.5vw, 22px); line-height: 1; color: #1b5e20; cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,.12);
display: flex; align-items: center; justify-content: center;
z-index: 3; transition: background .15s, transform .15s;
}
.gp-slider__btn:hover:not(:disabled) { background: #f3f4f6; transform: translateY(-50%) scale(1.05); }
.gp-slider__btn:disabled { opacity: .3; cursor: not-allowed; }
.gp-slider__btn[hidden] { display: none; } .gp-slider__btn--prev { left: 4px; }
.gp-slider__btn--next { right: 4px; } @media (min-width: 1024px) {
.gp-slider__btn--prev { left: -18px; }
.gp-slider__btn--next { right: -18px; }
}
[data-slider] {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding: 4px 0;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
scroll-padding-inline: 4px;
overscroll-behavior-x: contain;
min-width: 0;
}
.gp-slider { overflow: visible; min-width: 0; }
.gp-products__layout,
.gp-bundles__layout { min-width: 0; }
.gp-products__layout > *,
.gp-bundles__layout > * { min-width: 0; }
[data-slider]::-webkit-scrollbar { display: none; }
[data-slider] > * { scroll-snap-align: start; flex: 0 0 auto; } .gp-products__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 300px));
gap: 18px;
justify-content: start;
} .gp-products__grid[data-slider] > .gp-product-card,
.gp-bundles__grid[data-slider] > .gp-bundle-card { width: min(70vw, 260px);
}
@media (min-width: 600px) { .gp-products__grid[data-slider] > .gp-product-card,
.gp-bundles__grid[data-slider] > .gp-bundle-card {
width: calc((100% - 18px) / 2);
max-width: 300px;
}
}
@media (min-width: 1024px) { .gp-products__grid[data-slider] > .gp-product-card,
.gp-bundles__grid[data-slider] > .gp-bundle-card {
width: calc((100% - 36px) / 3);
max-width: 320px;
min-width: 240px;
}
}
@media (min-width: 1600px) { .gp-products__grid[data-slider] > .gp-product-card,
.gp-bundles__grid[data-slider] > .gp-bundle-card {
max-width: 360px;
}
}
.gp-product-card {
border-radius: 12px; overflow: hidden; background: #fff;
box-shadow: 0 1px 8px rgba(0,0,0,.06);
display: flex; flex-direction: column;
transition: transform .2s, box-shadow .2s;
}
.gp-product-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.gp-product-card__img {
overflow: hidden; background: #fafaf8;
display: flex; align-items: center; justify-content: center;
}
.gp-product-card__img a { display: block; width: 100%; }
.gp-product-card__img img { width: 100%; aspect-ratio: 1/1; height: auto; object-fit: contain; padding: 18px; display: block; }
.gp-product-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.gp-product-card__body h3 {
font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gp-product-card__body h3 a { color: inherit; text-decoration: none; }
.gp-product-card__body h3 a:hover { color: #1b5e20; }
.gp-product-card__body p {
font-size: 12px; color: #4b5b67; line-height: 1.5; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gp-product-card__price { display: flex; align-items: baseline; gap: 2px; margin-top: auto; }
.gp-product-card__price .price,
.gp-product-card__price .woocommerce-Price-amount { font-size: 18px; font-weight: 800; color: #1b5e20; }
.gp-product-card__price del .woocommerce-Price-amount { font-size: 13px; color: #999; font-weight: 400; }
.gp-product-card__price .unit  { font-size: 12px; color: #4b5b67; }
.gp-product-card__note { font-size: 11px; color: #4b5b67; display: block; }
.gp-product-card__btn {
text-align: center; width: 100%;
font-size: 14px; padding: 10px 16px;
background: #1b5e20; color: #fff; border: 1px solid #1b5e20; border-radius: 8px;
font-weight: 600; text-decoration: none; cursor: pointer;
transition: background .15s, transform .1s;
display: inline-block;
}
.gp-product-card__btn:hover { background: #154a18; color: #fff; }
.gp-product-card__btn:active { transform: translateY(1px); }
.gp-product-card__btn.added::after { content: " ✓"; } .gp-bundles__layout {
display: grid;
grid-template-columns: 80% 15%;
gap: 5%;
align-items: start;
}
.gp-bundles__label { text-align: right; padding-top: 8px; }
.gp-bundles__label .g-badge { margin-bottom: 16px; }
.gp-bundles__label h2 { font-size: 40px; font-weight: 700; line-height: 1.25; } .gp-bundles__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 18px;
} .gp-bundle-card {
border-radius: 12px; overflow: hidden; background: #fff;
box-shadow: 0 1px 8px rgba(0,0,0,.06);
display: flex; flex-direction: column;
transition: transform .2s, box-shadow .2s;
}
.gp-bundle-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.gp-bundle-card__img { overflow: hidden; background: #fafaf8; }
.gp-bundle-card__img a { display: block; }
.gp-bundle-card__img img {
width: 100%; aspect-ratio: 1/1; height: auto;
object-fit: contain; padding: 18px; display: block;
}
.gp-bundle-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.gp-bundle-card__body h3 {
font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.gp-bundle-card__body h3 a { color: inherit; text-decoration: none; }
.gp-bundle-card__body h3 a:hover { color: #1b5e20; }
.gp-bundle-card__sub {
font-size: 12px; color: #4b5b67; line-height: 1.5; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.gp-bundle-card__price { display: flex; align-items: baseline; gap: 2px; margin-top: auto; }
.gp-bundle-card__price .price,
.gp-bundle-card__price .woocommerce-Price-amount { font-size: 18px; font-weight: 800; color: #1b5e20; }
.gp-bundle-card__price del .woocommerce-Price-amount { font-size: 13px; color: #999; font-weight: 400; }
.gp-bundle-card__btn {
text-align: center; width: 100%;
font-size: 14px; padding: 10px 16px;
background: #1b5e20; color: #fff; border: 1px solid #1b5e20; border-radius: 8px;
font-weight: 600; text-decoration: none; cursor: pointer;
transition: background .15s, transform .1s;
display: inline-block;
}
.gp-bundle-card__btn:hover { background: #154a18; color: #fff; }
.gp-bundle-card__btn:active { transform: translateY(1px); }
.gp-bundle-card__btn.added::after { content: " ✓"; } .gp-mfg__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.gp-mfg__content .g-badge { margin-bottom: 12px; }
.gp-mfg__content h2 { font-size: 34px; font-weight: 700; margin-bottom: 20px; line-height: 1.3; }
.gp-mfg__content p  { font-size: 15px; color: #4b5b67; line-height: 1.8; margin-bottom: 16px; }
.gp-mfg__content p:last-of-type { margin-bottom: 28px; }
.gp-mfg__img img    { width: 100%; border-radius: 24px; display: block; object-fit: cover; } .gp-pro__layout {
display: flex;
flex-direction: row;
gap: 48px;
align-items: center;
flex-wrap: nowrap;
justify-content: center;
}
.gp-pro__label {
flex: 0 0 240px;
width: 240px;
}
.gp-pro__label .g-badge { margin-bottom: 16px; }
.gp-pro__label h2 { font-size: 32px; font-weight: 700; line-height: 1.35; }
.gp-pro__kit-card {
background: #fff; border-radius: 20px;
box-shadow: 0 2px 20px rgba(0,0,0,.08);
overflow: hidden;
display: flex; flex-direction: row;
min-height: 360px;
}
.gp-pro__img { flex: 0 0 320px; width: 320px; overflow: hidden; }
.gp-pro__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-pro__kit-info { flex: 1 1 auto; padding: 32px 32px 36px; display: flex; flex-direction: column; justify-content: center; }
.gp-pro__kit-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; color: #0e1e3f; }
.gp-pro__kit-sub     { font-size: 13px; color: #4b5b67; margin-bottom: 20px; display: block; }
.gp-pro__kit-list {
list-style: none; padding: 15px 0;
display: flex; flex-direction: column; gap: 10px;
}
.gp-pro__kit-list li {
font-size: 14px; color: #B78B2C; padding-left: 22px;
position: relative; line-height: 1.5;
}
.gp-pro__kit-list li::before { content: '✓'; position: absolute; left: 0; color: #1b5e20; font-weight: 700; }
.gp-pro__kit-btn { width: 100%; text-align: center; font-size: 13px; padding: 11px 16px !important; } .gp-compare__wrap { overflow-x: auto; }
.gp-table { width: 100%; border-collapse: collapse; font-size: 15px; border-radius: 16px; overflow: hidden; }
.gp-table thead th {
background: #1b5e20; color: #fff; padding: 18px 20px;
text-align: center; font-weight: 600; font-size: 15px;
}
.gp-table thead th:first-child { text-align: left; border-radius: 16px 0 0 0; }
.gp-table thead th:last-child  { border-radius: 0 16px 0 0; }
.gp-table tbody tr:nth-child(even) { background: #f7f9f7; }
.gp-table tbody tr:nth-child(odd)  { background: #fff; }
.gp-table tbody td { padding: 16px 20px; text-align: center; border-bottom: 1px solid #eef3ee; }
.gp-table tbody td:first-child { text-align: left; font-weight: 500; color: #0e1e3f; }
.gp-check { color: #1b5e20; font-size: 18px; font-weight: 700; }
.gp-dash  { color: #ccc; font-size: 16px; }
.gp-table__footer td {
background: #1b5e20; color: #fff;
padding: 18px 20px; text-align: center;
font-size: 14px; font-weight: 600;
}
.gp-table__footer td:first-child { text-align: left; border-radius: 0 0 0 16px; }
.gp-table__footer td:last-child  { border-radius: 0 0 16px 0; }
.gp-compare__note {
font-size: 12px; color: #C62828; line-height: 1.7;
margin-top: 16px; padding: 0 4px;
}  @media (max-width: 1200px) {
.gp-container { padding: 0 40px; }
.gp-hero { aspect-ratio: auto; height: 720px; max-height: none; }
.gp-hero__content h1 { font-size: 36px; }
.gp-products__label h2,
.gp-bundles__label h2,
.gp-pro__label h2,
.gp-mfg__content h2 { font-size: 30px; }
.gp-mfg__grid { gap: 48px; }
.gp-bundles__layout { grid-template-columns: 75% 20%; gap: 5%; }
} @media (max-width: 900px) {
.gp-section { padding: 64px 0; }
.gp-hero {
aspect-ratio: auto;
height: 560px;
max-height: none;
border-radius: 60px 0 60px 0;
margin: 16px;
}
.gp-hero__content { left: 40px; max-width: 80%; }
.gp-hero__content h1 { font-size: 32px; }
.gp-hero__content p { font-size: 15px; }
.gp-products__layout,
.gp-bundles__layout { grid-template-columns: 1fr; gap: 28px; }
.gp-bundles__label { text-align: left; order: -1; }
.gp-bundles__grid { order: 1; }
.gp-products__label h2,
.gp-bundles__label h2 { font-size: 28px; }
.gp-mfg__grid { grid-template-columns: 1fr; gap: 32px; }
.gp-mfg__content h2 { font-size: 28px; }
.gp-pro__layout { flex-direction: column; gap: 32px; }
.gp-pro__label { flex: 1 1 100%; width: 100%; }
.gp-pro__kit-card { width: 100%; min-height: 320px; }
.gp-pro__img { flex: 0 0 280px; width: 280px; }
.gp-compare__wrap { overflow-x: auto; }
.gp-table { min-width: 640px; font-size: 14px; }
.gp-table thead th,
.gp-table tbody td,
.gp-table__footer td { padding: 14px 12px !important; font-size: 13px; }
} @media (max-width: 768px) {
.gp-container { padding: 0 24px; }
.gp-section { padding: 48px 0; }
.gp-hero {
aspect-ratio: auto;
height: 480px;
max-height: none;
border-radius: 32px;
margin: 12px;
}
.gp-hero__overlay-left {
backdrop-filter: none;
-webkit-mask-image: none;
mask-image: none;
background: linear-gradient(
to top,
rgba(8, 26, 12, .75) 0%,
rgba(8, 26, 12, .35) 50%,
transparent 85%
);
}
.gp-hero__content {
top: auto;
transform: none;
bottom: 36px;
left: 24px;
right: 24px;
max-width: none;
color: #fff;
}
.gp-hero__content h1 {
font-size: 26px;
color: #fff !important;
line-height: 1.3;
margin-bottom: 12px;
text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.gp-hero__content p {
font-size: 14px;
color: rgba(255,255,255,.92);
line-height: 1.65;
}
.gp-hero__content br { display: none; } .gp-products__grid:not([data-slider]) { grid-template-columns: 1fr; gap: 20px; }
.gp-bundles__grid:not([data-slider]) { grid-template-columns: repeat(2, 1fr); gap: 14px; } [data-slider] { gap: 12px !important; }
.gp-product-card__body,
.gp-bundle-card__body { padding: 12px 14px 16px; }
.gp-mfg__content h2 { font-size: 24px; }
.gp-mfg__content p { font-size: 14px; }
.gp-mfg__img img { border-radius: 16px; }
.gp-pro__kit-card { flex-direction: column; min-height: auto; }
.gp-pro__img { flex: 1 1 auto; width: 100%; }
.gp-pro__kit-info { padding: 24px 20px 28px; }
.gp-pro__label h2 { font-size: 24px; }
.gp-table { min-width: 520px; }
.gp-table thead th,
.gp-table tbody td,
.gp-table__footer td { padding: 12px 10px !important; font-size: 12px; }
.gp-compare__note { font-size: 11px; }
} @media (max-width: 480px) {
.gp-container { padding: 0 16px; }
.gp-hero { aspect-ratio: auto; height: 440px; max-height: none; }
.gp-hero__content { bottom: 28px; left: 20px; right: 20px; }
.gp-hero__content h1 { font-size: 22px; line-height: 1.35; }
.gp-hero__content p { font-size: 13px; }
.gp-product-card__body h3,
.gp-bundle-card__body h3 { font-size: 15px; }
.gp-product-card__price .price,
.gp-bundle-card__price .price { font-size: 22px; }
.gp-mfg__content h2 { font-size: 22px; }
}