*,
*::before,
*::after {
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: #4CAF50 #fff;
}
html,
body,
header,
main,
footer,
section,
article,
div,
menu,
nav,
ul,
li,
h1,
h2,
h3,
h4,
p,
address,
table,
td,
th,
button,
input,
label {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
vertical-align: baseline;
}
menu,
ul,
li {
list-style: none;
}
button {
cursor: pointer;
}
html {
height: 100%;
font-size: 16px;
}
body {
min-height: 100%;
background: #4CAF50;
font-family: sans-serif;
color: #333;
text-align: center;
}
main {
padding: 3rem 2rem 2rem;
background: #eee;
border-top: 0.5rem solid #fff;
}
.hidden {
visibility: hidden;
height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.off {
position: fixed;
top: 0;
left: 0;
z-index: 100;
visibility: hidden;
width: 100%;
padding: 1rem;
background: rgba(50, 50, 50, 0.92);
color: #fff;
font-weight: bold;
}
header {
position: relative;
padding: 2rem 2rem 3rem;
background: #4CAF50;
}
header img {
width: 129px;
border: 3px solid #fff;
border-radius: 50%;
}
nav {
position: relative;
z-index: 10;
display: flex;
justify-content: center;
gap: 0.5rem;
width: fit-content;
margin: -1rem auto -1.5rem;
padding: 0.5rem 1.5rem;
background: #e8e0d0;
border-radius: 0.6rem;
}
nav > div {
display: contents;
}
nav > .lang {
display: flex;
gap: 0.15rem;
align-items: center;
margin-right: 0.5rem;
}
nav > .lang a,
nav > .lang b {
padding: 0.2rem 0.35rem;
border-radius: 0.3rem;
font-size: 0.85rem;
color: #555;
text-decoration: none;
}
nav > .lang b {
color: #333;
text-decoration: underline;
text-underline-offset: 0.25rem;
}
nav > .lang a:hover {
color: #333;
background: rgba(0,0,0,0.06);
}
nav a {
padding: 0.3rem 0.5rem;
border-radius: 0.5rem;
font-size: 1.2rem;
color: #333;
text-decoration: none;
}
nav a.active {
font-weight: bold;
text-decoration: underline;
text-underline-offset: 0.3rem;
}
@media (max-width: 768px) {
nav {
min-width: 0;
margin-top: 5px;
padding: 0.3rem;
border-radius: 1rem;
transition: min-width 0.3s ease, border-radius 0.3s ease;
}
nav.open {
min-width: 15rem;
border-radius: 1rem 1rem 0 0;
}
nav::before {
content: url('/img/menu-open.png');
display: block;
padding: 0.5rem;
cursor: pointer;
}
nav.open::before {
content: url('/img/menu-close.png');
}
nav > div {
position: absolute;
top: 100%;
left: 50%;
display: block;
min-width: 15rem;
background: #e8e0d0;
border-radius: 0 0 1rem 1rem;
transform: translateX(-50%) scale(0);
transform-origin: center top;
transition: transform 0.3s ease;
}
nav.open > div {
transform: translateX(-50%) scale(1);
}
nav > div > a {
display: block;
padding: 0.8rem 1rem;
border-top: 1px solid #ddd6c6;
text-align: center;
white-space: nowrap;
}
nav > div > a:last-child {
border-radius: 0 0 1rem 1rem;
}
}
footer {
padding: 2rem 2rem 3rem;
background: #3E8E41;
}
footer > h1 {
margin-bottom: 1rem;
font-size: 0.9rem;
color: #fff;
white-space: nowrap;
}
footer > div {
margin-block: 2rem;
}
footer a,
footer a:visited {
display: block;
margin-bottom: 0.5rem;
color: #fff;
}
footer > menu > a {
display: inline-block;
}
footer > menu > a > img {
margin: 0.2rem 0.2rem 1rem;
}
.hero {
position: relative;
overflow: hidden;
margin: 0 -2rem;
}
.hero:first-child {
margin-top: calc(-3rem - 0.5rem);
border-top: 0.5rem solid #fff;
}
.hero:last-child {
margin-bottom: -2rem;
}
.hero img {
display: block;
width: 100%;
min-height: 240px;
max-height: 420px;
object-fit: cover;
}
.hero div {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.4);
}
.hero p {
font-size: clamp(1rem, 3.5vw, 1.6rem);
font-weight: bold;
line-height: 1.5;
color: #fff;
text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.hero a {
display: inline-block;
margin-top: 1rem;
padding: .7rem 1.8rem;
background: #4CAF50;
border-radius: 8px;
font-size: 1rem;
font-weight: bold;
color: #fff;
text-decoration: none;
}
article {
padding-bottom: 1rem;
text-align: left;
}
article > img {
width: 100%;
margin-block: 1rem;
border-radius: 1rem;
}
article > h2 {
font-size: 1.5rem;
font-weight: bolder;
line-height: 2rem;
}
article > h3 {
padding-block: 0.5rem;
font-size: 1.3rem;
font-weight: bold;
line-height: 1.8rem;
}
article > p {
padding-block: 0.5rem;
font-size: 1.1rem;
line-height: 1.5rem;
}
article > ul {
padding-left: 1.5rem;
}
article > ul > li {
padding-block: 0.5rem;
list-style: square;
}
article a,
article a:visited {
color: #3E8E41;
}
address {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin-top: 1.5rem;
padding: 1.5rem 0.9rem;
background: #fff;
border-radius: 1rem;
}
address > h3 {
margin-bottom: 0.5rem;
font-size: clamp(0.7rem, 4vw, 1.1rem);
font-weight: bold;
white-space: nowrap;
}
address > div,
address > a {
display: flex;
gap: 0.8rem;
padding: 0.5rem;
color: #333;
text-decoration: none;
}
address > div {
align-items: flex-start;
}
address > a {
align-items: center;
width: fit-content;
}
address img {
width: 2rem;
}
address p {
font-size: 0.95rem;
line-height: 1.4rem;
}
article > h4 {
color: #6b4226;
text-align: center;
font-size: 1.3rem;
margin-bottom:-1rem;
}
ul.prd {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin: 4rem;
}
ul.prd li {
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
text-align:center;
}
ul.prd a {
display: block;
color: inherit;
text-decoration: none;
}
ul.prd a img {
display: block;
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
}
ul.prd li a img {
margin-top: -1rem;
}
ul.prd h3 {
margin: .75rem 1rem .25rem;
font-size: 1.05rem;
}
ul.prd b {
display: block;
margin: .25rem 1rem;
font-size: 1.15rem;
color: #4CAF50;
}
ul.prd p {
margin: .25rem 1rem .75rem;
font-size: .88rem;
line-height: 1.4;
color: #666;
}
ul.prd button {
width: fit-content;
margin: auto auto 1rem;
padding: .5rem 1.5rem;
line-height: 28px;
background: #4CAF50;
border-radius: 8px;
font-size: 1.05rem;
color: #fff;
}
.pdt {
max-width: 888px;
margin: 0 auto;
padding: 1.5rem;
background: #fff;
border-radius: 1rem;
}
.pdt > img {
display: block;
width: 100%;
max-width: 480px;
margin: 0 auto 1rem;
border-radius: 12px;
}
.pdt > h1 {
margin: 0 0 .5rem;
font-size: 1.4rem;
}
.pdt > b {
display: flex;
align-items: center;
justify-content: center;
gap: .4rem;
margin: 0 0 .75rem;
font-size: 1.3rem;
color: #4CAF50;
}
.pdt > b i {
font-size: .85rem;
font-style: normal;
}
.pdt > button {
display: block;
margin: 0 auto;
padding: .7rem 1.5rem;
background: #4CAF50;
border-radius: 8px;
font-size: 1rem;
color: #fff;
}
.tabs {
margin-top: 1.5rem;
text-align: left;
}
.tabs input[type="radio"] {
display: none;
}
.tab-nav {
display: flex;
}
.tab-nav label {
flex: 1;
padding: 0.8rem;
border-bottom: 2px solid #ddd;
border-radius: 0.5rem 0.5rem 0 0;
font-size: 0.95rem;
font-weight: bold;
cursor: pointer;
color:#777;
}
#tab-desc:checked ~ .tab-nav label[for="tab-desc"],
#tab-specs:checked ~ .tab-nav label[for="tab-specs"] {
background: #fff;
border-bottom-color: #4CAF50;
color: #4CAF50;
}
.tab-desc,
.tab-specs {
display: none;
padding: 1rem 0;
}
#tab-desc:checked ~ .tab-desc {
display: block;
}
#tab-specs:checked ~ .tab-specs {
display: block;
}
.tab-desc p {
padding-block: 0.4rem;
font-size: 1rem;
line-height: 1.6;
}
.tab-specs table {
width: 100%;
border-collapse: collapse;
}
.tab-specs th,
.tab-specs td {
padding: 0.6rem 0.8rem;
border-bottom: 1px solid #eee;
font-size: 0.95rem;
text-align: left;
}
.tab-specs th {
width: 50%;
color: #555;
font-weight: bold;
}
@media (min-width: 1024px) {
ul.prd {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 600px) {
ul.prd {
grid-template-columns: 1fr;
margin: 3rem 1rem;
}
.pdt {
padding: 1rem;
}
.pdt > h1 {
font-size: clamp(0.75rem, 5vw, 1.4rem);
white-space: nowrap;
}
}
#basket .hidden {
height: 0;
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
#basket-badge {
position: fixed;
right: 1.5rem;
top: 50%;
bottom: auto;
z-index: 1000;
text-decoration: none;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
transition: transform 0.2s, box-shadow 0.2s;
border: 3px solid #fff;
}
#basket-badge:active {
transform: scale(0.95);
}
#basket-badge img {
width: 40px;
height: 40px;
border: none;
border-radius: 0;
filter: brightness(0) invert(1);
}
#basket-badge span {
position: absolute;
top: -6px;
right: -6px;
background: #4CAF50;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
border-radius: 50%;
min-width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
border: 2px solid #fff;
}
.qty-ctrl,
ul.prd button.qty-ctrl,
.pdt > button.qty-ctrl {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: #f59e0b;
border: none;
border-radius: 8px;
padding: .5rem 1rem;
}
.qty-ctrl img {
width: 28px;
height: 28px;
flex-shrink: 0;
filter: brightness(0) invert(1);
cursor: pointer;
padding: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition: background 0.15s;
}
.qty-ctrl img:active {
background: rgba(255, 255, 255, 0.5);
}
.qty-ctrl span {
font-weight: 700;
min-width: 1.5rem;
text-align: center;
font-size: 0.85rem;
color: #fff;
white-space: nowrap;
}
#basket {
position: relative;
background: #fff;
padding: 0.5rem 1.5rem 4rem;
margin: 0;
}
#basket > div {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
#basket .empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
max-width: 600px;
margin: 0 auto;
text-align: center;
}
#basket .empty:not(.hidden) {
padding-top: 6rem;
}
#basket .empty img {
width: 64px;
height: 64px;
opacity: 0.3;
border: none;
border-radius: 0;
}
#basket .empty p {
margin-top: 0.5rem;
font-size: 1rem;
color: #999;
line-height: 1.5;
}
#basket .empty a {
color: #4CAF50;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 0.2rem;
}
#basket h5 {
font-size: 1.1rem;
color: #6b4226;
text-align: center;
line-height: 1.7;
font-weight:normal;
margin-bottom: 1rem;
}
#basket .wrap {
background: #fff;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
#basket .wrap > button {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
background: transparent;
border: none;
padding: 0.5rem 0 0.8rem;
cursor: pointer;
font-size: 0.95rem;
}
#basket .wrap > button::before,
#basket .wrap > button::after {
content: '';
flex: 1;
height: 1px;
background: #d5c9b5;
}
#basket .wrap > button b {
font-weight: 600;
color: #6b4226;
white-space: nowrap;
}
#basket .wrap > button i {
font-style: normal;
color: #8b7355;
white-space: nowrap;
}
#basket .wrap > button em {
display: inline-block;
width: 7px;
height: 7px;
border-right: 2px solid #8b7355;
border-bottom: 2px solid #8b7355;
transform: rotate(45deg);
transition: transform 0.3s ease, margin 0.3s ease;
margin-top: -3px;
flex-shrink: 0;
font-style: normal;
}
#basket .wrap > button.open em {
transform: rotate(-135deg);
margin-top: 3px;
}
#basket .wrap > div {
overflow: hidden;
padding-top: 0.5rem;
}
#basket .items > div {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
padding-right: 0;
border-bottom: 1px solid #eee;
}
#basket .items > div:last-of-type {
border-bottom: none;
}
#basket .items > div > img:nth-child(2) {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 10px;
}
#basket .items > div > b {
flex: 1;
font-weight: 600;
font-size: 1.1rem;
color: #333;
}
#basket .items > div > span {
font-weight: 700;
min-width: 6rem;
text-align: right;
color: #333;
font-size: 1.2rem;
}
#basket .del {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1;
width: 24px;
height: 24px;
cursor: pointer;
padding: 4px;
border-radius: 50%;
background: #e53935;
transition: background 0.2s, transform 0.15s;
}
#basket .del:active {
background: #c62828;
}
#basket .items > div .qty-ctrl {
padding: 0.3rem 0.6rem;
gap: 0.35rem;
}
#basket .items > div .qty-ctrl img {
width: 22px;
height: 22px;
}
#basket .totals {
padding: 1rem 0;
}
#basket .totals > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.35rem 0;
font-size: 1rem;
}
#basket .totals b {
font-weight: 600;
}
#basket .totals > small {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: #2e7d32;
text-align: center;
background: #e8f5e9;
padding: 0.5rem 0.75rem;
margin: 0.5rem 0;
border-radius: 6px;
}
#basket .totals .total {
font-weight: 700;
font-size: 1.25rem;
border-top: 2px solid #f59e0b;
margin-top: 1rem;
padding-top: 0.75rem;
color: #f59e0b;
align-items: center;
}
#basket .wa {
display: block;
max-width: 350px;
margin: 1.25rem auto;
padding: 1rem 2rem;
background: #25D366;
color: #fff;
border: none;
border-radius: 10px;
font-size: 1.05rem;
font-weight: 700;
cursor: pointer;
text-align: center;
transition: background 0.2s;
}
#basket .wrap > div > h6 {
font-size: 0.85rem;
font-weight: normal;
color: #6b4226;
text-align: center;
padding: 1rem 0;
line-height: 1.6;
margin:0;
}
@media (max-width: 600px) {
#basket h5 {
font-size: 0.85rem;
}
#basket .items > div {
gap: 0.5rem;
}
#basket .items > div > img:nth-child(2) {
width: 48px;
height: 48px;
}
#basket .items > div > b {
flex: 1;
font-size: 0.85rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#basket .items > div .qty-ctrl {
flex-shrink: 0;
padding: 0.3rem 0.5rem;
gap: 0.3rem;
}
#basket .items > div .qty-ctrl img {
width: 22px;
height: 22px;
}
#basket .items > div > span {
min-width: 4.5rem;
text-align: right;
flex-shrink: 0;
font-size: 0.9rem;
}
#basket .del {
width: 20px;
height: 20px;
padding: 3px;
}
#basket-badge {
width: 70px;
height: 70px;
right: 8px;
}
#basket-badge img {
width: 35px;
height: 35px;
}
}