/* ====================
HERO SECTION IMAGE AND TEXT BOX
==================== */
.hero-section {
margin-top: 5px;
margin-bottom: 6px;
display: block;
}

.hero-container {
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: center;
}

.hero-image { width: 439px; flex-shrink: 0; padding-right: 6px; }
.hero-image img { width: 100%; height: auto; display: block; }
.hero-text { width: 567px; flex-shrink: 0; }
.hero-text img { width: 100%; height: auto; display: block; }
.text-box img {
width: 100%;
height: auto;
display: block;
margin-top: 2px;
margin-bottom: 7px;
}

.text-box-a img,
.text-box-c img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.text-box-b {
position: relative;
cursor: pointer;
}

.text-box-b img.text-box-b-default {
display: block;
width: 100%;
height: auto;
opacity: 1;
}

.text-box-b img.text-box-b-alt {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
opacity: 0;
}

.text-box-b:hover img.text-box-b-default {
opacity: 0;
}

.text-box-b:hover img.text-box-b-alt {
opacity: 1;
}

.text-box-b.swapped img.text-box-b-default {
opacity: 0;
}
.text-box-b.swapped img.text-box-b-alt {
opacity: 1;
}

.text-box-c img {
color: #77611d;
font-size: 2.4rem;
letter-spacing: 0.03em;
line-height: 1.09;
transform: rotate(180deg);
transition: transform 0.4s ease;
}

.text-box-c:hover img {
transform: rotate(0deg);
}

.shop-link img {
display: block;
max-width: 100%;
height: auto;
transition: transform 0.3s ease;
}

.shop-link:hover img {
transform: scale(1.02);
}

.two-images-a {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 2px;
flex-wrap: nowrap;
}

.image-block-a {
max-width: 500px;
margin: 0 auto;
    
}

.image-block-a img {
width: 100%;
height: auto;
display: block;
}

.image-block-b {
max-width: 500px;
margin: 0 auto;
}

.image-block-b img {
width: 100%;
height: auto;
display: block;
}

/* ====================
MOBILE RESPONSIVE
==================== */
@media (max-width: 768px) {

.hero-container {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 0 2px;
box-sizing: border-box;
}

.hero-section {
align-items: center;
justify-content: center;
}

.hero-image { 
width: 100%;
max-width: none;
justify-content: center;
margin: 0 auto;
padding-right: 0;
}

.hero-text {
width: 100%;
max-width: none;
justify-content: center;
margin: 0 auto;
}

.two-images-a {
flex-direction: column;
align-items: center;
}

.text-box img {
width: 97%;
max-width: 600px;
height: auto;
}
}