/* ===== GLOBAL STYLES ===== */

:root {
--black: #0b0b0b;
--dark: #151515;
--red: #c8202f;
--red-hover: #ed2939;
--white: #ffffff;
--gray: #b8b8b8;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
background: var(--black);
color: var(--white);
font-family: "Roboto", sans-serif;
line-height: 1.6;
}

a {
color: inherit;
text-decoration: none;
}

h1, h2, h3 {
font-family: "Oswald", sans-serif;
line-height: 1.15;
}


/* ===== HEADER ===== */

.site-header {
width: 100%;
min-height: 90px;
padding: 16px 6%;
background: #111111;
border-bottom: 3px solid var(--red);

display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}

.logo img {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--red);
  border: 2px solid #ffffff;
  border-radius: 6px;

display: flex;
align-items: center;
justify-content: center;

font-family: "Oswald", sans-serif;
font-size: 25px;
font-weight: 700;
letter-spacing: -1px;
}

.logo-text {
display: flex;
flex-direction: column;
font-family: "Oswald", sans-serif;
font-size: 38px;
font-weight: 700;
line-height: 1.05;
}

.logo-text small {
margin-top: 4px;
color: var(--red);
font-size: 16px;
line-height: 1.2;
letter-spacing: 2px;
}


/* ===== MAIN NAVIGATION ===== */

.main-nav {
display: flex;
align-items: center;
gap: 30px;
}

.main-nav a {
font-family: "Oswald", sans-serif;
font-size: 16px;
text-transform: uppercase;
transition: color 0.2s ease;
}

.main-nav a:hover {
color: var(--red-hover);
}

.logo {
display: flex;
align-items: center;
gap: 18px;
}


/* ===== HERO SECTION ===== */

.hero {
padding: 50px 8% 35px;
  
display: flex;
align-items: flex-start;
justify-content: center;
text-align: center;

background:
linear-gradient(
135deg,
#191919 0%,
#090909 60%,
#26080c 100%
);

border-bottom: 1px solid #333333;
}

.hero-content {
max-width: 850px;
}

.eyebrow {
color: var(--red-hover);
font-size: 13px;
font-weight: 700;
letter-spacing: 4px;
margin-bottom: 18px;
}

.hero h1 {
font-size: clamp(42px, 7vw, 82px);
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 22px;
}

.hero h1 span {
display: block;
color: var(--red);
}

.hero-description {
max-width: 600px;
margin: 0 auto 30px;
color: var(--gray);
font-size: 18px;
}

.about-feature {
padding: 42px 8% 20px;
}

.about-image-frame,
.about-gallery-slide {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #242424, #101010 65%, #26080c);
}

.about-image-frame {
width: min(100%, 420px);
margin: 0 auto;
border: 5px solid var(--white);
border-radius: 4px;
}

.about-image-frame.image-placeholder {
aspect-ratio: 3 / 4;
}

.about-image-frame img {
height: auto;
}

.about-image-frame img,
.about-gallery-slide img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}

.about-image-frame figcaption,
.about-gallery-slide figcaption {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
padding: 20px;
color: var(--gray);
font-size: 15px;
text-align: center;
}

.image-placeholder figcaption {
display: flex;
}

.image-placeholder img {
display: none;
}

.about-gallery-section {
padding: 42px 8% 30px;
text-align: center;
}

.about-gallery-section h1,
.about-story h2 {
margin-bottom: 28px;
font-size: clamp(32px, 5vw, 48px);
}

.about-gallery {
position: relative;
width: min(100%, 1000px);
aspect-ratio: 16 / 9;
margin: 0 auto;
border: 5px solid var(--white);
border-radius: 4px;
}

.about-gallery-slide {
position: absolute;
inset: 0;
}

.about-gallery-slide[hidden] {
display: none;
}

.gallery-control {
position: absolute;
top: 50%;
z-index: 1;
width: 46px;
height: 46px;
transform: translateY(-50%);
background: rgb(0 0 0 / 65%);
border: 1px solid rgb(255 255 255 / 70%);
border-radius: 50%;
color: var(--white);
font-size: 20px;
cursor: pointer;
}

.gallery-control:hover,
.gallery-control:focus-visible {
background: var(--red);
}

.gallery-control:focus-visible,
.gallery-pagination button:focus-visible {
outline: 2px solid var(--white);
outline-offset: 3px;
}

.gallery-previous {
left: 16px;
}

.gallery-next {
right: 16px;
}

.gallery-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 18px;
}

.gallery-pagination button {
width: 11px;
height: 11px;
padding: 0;
background: #666666;
border: 0;
border-radius: 50%;
cursor: pointer;
}

.gallery-pagination button[aria-current="true"] {
background: var(--red-hover);
}

.about-story {
max-width: 850px;
min-height: 220px;
margin: 0 auto;
padding: 48px 24px 64px;
text-align: center;
}

.about-story-placeholder {
color: var(--gray);
}

.cart-setup {
width: min(100% - 40px, 680px);
margin: 50px auto 70px;
padding: 42px 30px;
background: var(--dark);
border: 1px solid #383838;
border-top: 4px solid var(--red);
border-radius: 4px;
text-align: center;
}

.cart-setup h2 {
margin-bottom: 16px;
font-size: clamp(26px, 4vw, 36px);
}

.cart-setup p {
margin-bottom: 24px;
color: var(--gray);
}

.shop-category-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
padding: 24px 20px 8px;
}

.shop-category-nav a {
padding: 9px 18px;
border: 1px solid #444444;
border-radius: 3px;
color: var(--white);
font-family: "Oswald", sans-serif;
text-transform: uppercase;
}

.shop-category-nav a:hover,
.shop-category-nav a:focus-visible {
border-color: var(--red-hover);
color: var(--red-hover);
}

.shop-setup-notice {
width: min(100% - 40px, 1000px);
margin: 22px auto 0;
padding: 14px 18px;
background: #171717;
border-left: 4px solid var(--red);
color: var(--gray);
text-align: center;
}

.store-categories {
width: min(100% - 40px, 1100px);
margin: 0 auto;
}

.store-category {
padding: 48px 0;
scroll-margin-top: 20px;
}

.store-category + .store-category {
border-top: 1px solid #333333;
}

.store-category > .eyebrow,
.store-category > h2 {
text-align: center;
}

.store-category > h2 {
margin-bottom: 28px;
font-size: clamp(30px, 4vw, 42px);
}

.store-product-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}

.product-group-heading {
grid-column: 1 / -1;
margin-top: 10px;
color: var(--red-hover);
font-family: "Oswald", sans-serif;
font-size: 22px;
}

.store-product-card {
overflow: hidden;
background: var(--dark);
border: 1px solid #383838;
border-top: 3px solid var(--red);
border-radius: 4px;
}

.product-placeholder-image {
min-height: 190px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #242424, #101010 65%, #26080c);
color: #888888;
}

.store-product-info {
padding: 18px;
}

.store-product-info h3 {
margin-bottom: 8px;
font-size: 21px;
}

.product-price {
margin-bottom: 15px;
color: var(--gray);
font-weight: 700;
}

.store-product-info button {
width: 100%;
padding: 11px 14px;
background: #292929;
border: 1px solid #555555;
border-radius: 3px;
color: #aaaaaa;
font: inherit;
}

.affiliate-intro {
max-width: 760px;
margin: -8px auto 28px;
color: var(--gray);
text-align: center;
}

.affiliate-disclosure {
margin: -12px auto 24px;
color: var(--gray);
font-size: 14px;
text-align: center;
}

.affiliate-placeholder-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}

.affiliate-placeholder-card {
min-height: 180px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--dark);
border: 1px solid #383838;
border-top: 3px solid var(--red);
border-radius: 4px;
text-align: center;
}

.affiliate-placeholder-card h3 {
font-size: 21px;
}

.affiliate-placeholder-card p {
color: var(--gray);
}

.affiliate-link {
margin-top: 8px;
}

.affiliate-placeholder-card span {
color: var(--red-hover);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}

.social-links-section {
padding: 48px 8% 60px;
}

.social-links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 18px;
max-width: 1000px;
margin: 0 auto;
}

.social-card {
min-height: 180px;
padding: 24px 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--dark);
border: 1px solid #383838;
border-top: 3px solid var(--red);
border-radius: 4px;
text-align: center;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

a.social-card:hover,
a.social-card:focus-visible {
transform: translateY(-4px);
background: #1c1c1c;
border-color: var(--red-hover);
}

.social-card:focus-visible {
outline: 2px solid var(--white);
outline-offset: 3px;
}

.social-icon {
width: 38px;
height: 38px;
margin-bottom: 4px;
fill: currentColor;
color: var(--red-hover);
}

.social-name {
font-family: "Oswald", sans-serif;
font-size: 21px;
font-weight: 600;
}

.social-action {
color: var(--gray);
font-size: 13px;
}

.social-card-unavailable {
color: #b8b8b8;
border-top-color: #555555;
}

.social-card-unavailable .social-icon {
color: #888888;
}

.contact-content {
width: min(100%, 760px);
}

.contact-form {
padding: 28px;
background: var(--dark);
border: 1px solid #383838;
border-top: 4px solid var(--red);
border-radius: 4px;
text-align: left;
}

.contact-status {
display: none;
margin-bottom: 16px;
padding: 12px 16px;
border: 1px solid #383838;
border-radius: 3px;
}

.contact-success:not(:empty),
.contact-error:not(:empty) {
display: block;
}

.contact-success {
color: #b8e6c1;
}

.contact-error,
.field-error {
color: #ff8b94;
}

.field-error {
font-size: 13px;
}

.contact-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

.form-field {
display: flex;
flex-direction: column;
gap: 7px;
}

.form-field label {
font-family: "Oswald", sans-serif;
font-size: 16px;
font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
padding: 12px;
background: #0b0b0b;
border: 1px solid #555555;
border-radius: 3px;
color: var(--white);
font: inherit;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: 2px solid var(--red-hover);
outline-offset: 2px;
}

.form-field textarea {
resize: vertical;
}

.form-field-message {
grid-column: 1 / -1;
}

.contact-submit {
margin-top: 22px;
cursor: pointer;
}

.contact-note {
margin-top: 12px;
color: var(--gray);
font-size: 13px;
}

.button {
display: inline-block;
padding: 14px 34px;
background: var(--red);
border: 2px solid var(--red);
border-radius: 3px;

font-family: "Oswald", sans-serif;
font-size: 17px;
font-weight: 600;
letter-spacing: 1px;

transition: background 0.2s ease;
}

.button:hover {
background: transparent;
color: var(--white);
}


/* ===== FEATURED SECTION ===== */

.featured {
padding: 45px 8%;
text-align: center;
}

.featured h2 {
margin-bottom: 35px;
font-size: clamp(30px, 4vw, 44px);
}

.featured-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 25px;
max-width: 1000px;
margin: 0 auto;
}

.featured-card {
min-height: 220px;
padding: 35px 25px;
background: var(--dark);
border: 1px solid #383838;
border-top: 4px solid var(--red);
border-radius: 4px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;

transition: transform 0.2s ease,
border-color 0.2s ease;
}

.featured-card:hover {
transform: translateY(-5px);
border-color: var(--red);
}

.featured-card:nth-child(3) {
grid-column: 1 / -1;
width: calc((100% - 25px) / 2);
justify-self: center;
}

.featured-card h3 {
font-size: 25px;
}

.featured-card p {
color: var(--gray);
}

.featured-card span {
color: var(--red-hover);
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
}


/* ===== FOOTER ===== */

.site-footer {
padding: 35px 20px 22px;
background: #080808;
border-top: 3px solid var(--red);
text-align: center;
}

.footer-nav {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 25px;
margin-bottom: 22px;
}

.footer-nav a {
color: #cccccc;
font-size: 13px;
text-transform: uppercase;
transition: color 0.2s ease;
}

.footer-nav a:hover {
color: var(--red-hover);
}

.socials {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 22px;
}

.socials a {
color: var(--red-hover);
font-size: 13px;
}

.socials a:hover {
color: var(--white);
}

.copyright {
padding-top: 18px;
border-top: 1px solid #292929;
color: #777777;
font-size: 12px;
}


/* ===== MOBILE RESPONSIVENESS ===== */

@media (max-width: 760px) {
.site-header {
flex-direction: column;
gap: 18px;
padding: 18px 15px;
}

.logo {
flex-direction: column;
gap: 10px;
}

.logo-text {
font-size: 32px;
}

.main-nav {
justify-content: center;
flex-wrap: wrap;
gap: 12px 20px;
}

.main-nav a {
font-size: 14px;
}

.hero {
padding: 35px 20px 40px;
}

.hero-description {
font-size: 16px;
}

.about-feature {
padding: 25px 20px 10px;
}

.about-image-frame {
border-width: 4px;
}

.about-gallery-section {
padding: 35px 20px 20px;
}

.about-gallery {
border-width: 4px;
}

.gallery-control {
width: 38px;
height: 38px;
font-size: 16px;
}

.gallery-previous {
left: 10px;
}

.gallery-next {
right: 10px;
}

.about-story {
padding: 35px 20px 48px;
}

.store-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.affiliate-placeholder-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-placeholder-image {
min-height: 150px;
}

.social-links-section {
padding: 35px 20px 40px;
}

.social-links-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.social-card {
min-height: 160px;
padding: 18px 10px;
}

.contact-form {
padding: 20px;
}

.contact-form-grid {
grid-template-columns: 1fr;
}

.form-field-message {
grid-column: auto;
}

.featured {
padding: 40px 20px;
}

.featured-grid {
grid-template-columns: 1fr;
}

.featured-card:nth-child(3) {
grid-column: auto;
width: 100%;
}

.footer-nav {
gap: 12px 20px;
}
}

@media (max-width: 380px) {
.logo-text {
font-size: 28px;
}

.main-nav {
gap: 10px 14px;
}

.store-product-grid {
grid-template-columns: 1fr;
}

.affiliate-placeholder-grid {
grid-template-columns: 1fr;
}

.main-nav a {
font-size: 13px;
}
}