/* Base Reset */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Lato',sans-serif; color:#333; line-height:1.6; }
.container { width:90%; max-width:1200px; margin:0 auto; }
.btn { display:inline-block; padding:0.75em 1.5em; border-radius:5px; text-decoration:none; transition:background 0.3s; }
.btn-primary { background:#b76e79; color:#fff; }
.btn-secondary { background:transparent; border:2px solid #b76e79; color:#b76e79; }
.btn-secondary:hover, .btn-secondary:focus { background:#b76e79; color:#fff; }
.btn-text { background:none; color:#b76e79; }

.btn-danger {
    background-color: #dc3545; /* Standard Bootstrap danger color */
    color: #fff;
    border-color: #dc3545;
}

.btn-danger:hover, .btn-danger:focus {
    background-color: #c82333;
    border-color: #bd2130;
    color: #fff;
}

/* Header */
.site-header { background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.1); position:sticky; top:0; z-index:1000; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; padding:1em 0; }
.logo { font-family:'Playfair Display',serif; font-size:1.5em; color:#333; }
.main-nav ul { display:flex; gap:1.5em; list-style:none; }
.main-nav a { color:#333; font-weight:500; }
.main-nav a:hover, .main-nav a:focus { color:#b76e79; text-decoration:underline; }
.menu-toggle { display:none; background:none; border:none; font-size:1.5em; cursor:pointer; }

@media(max-width:768px) { .main-nav { display:none; flex-direction:column; } .main-nav.active { display:flex; } .menu-toggle { display:block; } }

/* Hero */
.hero { position:relative; /* Fallback gradient background to avoid broken image */ background: radial-gradient(circle at 30% 30%, #f9e3e6, #f3c6cd); height:80vh; display:flex; align-items:center; }
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); }
.hero-content { position:relative; text-align:center; color:#fff; width:100%; }
.hero-content h1 { font-family:'Playfair Display',serif; font-size:2.5em; margin-bottom:0.5em; }
.hero-content p { font-size:1.1em; margin-bottom:1em; }

/* Sections */
.section { padding:4em 0; }
.section h2 { text-align:center; font-family:'Playfair Display',serif; font-size:2em; margin-bottom:1em; }
.product-grid, .tutorial-cards, .blog-grid { display:grid; gap:2em; }
.product-grid { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.blog-grid, .tutorial-cards { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.product-card, .card, .blog-post { background:#fff; padding:1.5em; border-radius:5px; box-shadow:0 2px 5px rgba(0,0,0,0.1); text-align:center; }
.product-card img { max-width:100%; height:auto; }

.product-actions { /* Wrapper for buttons in product card */
    margin-top: 1em;
    display: flex;
    justify-content: center; /* Center buttons in the card */
    gap: 0.5em; /* Space between buttons */
}

/* Forms & Tables */
.contact-form, .login-page .container, .admin-panel .container, .cart-page .container { max-width:600px; margin:0 auto; }
.form-group, label { display:block; margin-bottom:0.5em; font-weight:500; }
.form-group input, .form-group textarea, input, textarea { width:100%; padding:0.75em; border:1px solid #ccc; border-radius:5px; }
.form-group input:focus, .form-group textarea:focus { outline:2px solid #b76e79; outline-offset:2px; box-shadow:0 0 0 4px rgba(183, 110, 121, 0.3); }
.cart-items div { margin-bottom:1em; }

/* Footer */
.site-footer { background:#f8f8f8; padding:2em 0; text-align:center; }
.site-footer p { margin-bottom:1em; }
.social-links { display:flex; gap:1em; justify-content:center; list-style:none; }

/* Accessibility Enhancements */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #b76e79;
    color: white;
    padding: 8px;
    z-index: 99999;
    text-decoration: none;
}

.skip-link:focus {
    top: 10px;
    left: 10px;
}

/* Responsive Typography */
html {
    font-size: 100%;
}

@media (max-width: 768px) {
    html {
        font-size: 95%;
    }
    .hero-content h1 { font-size: 2em; }
    .section h2 { font-size: 1.75em; }
}

@media (max-width: 480px) {
    html {
        font-size: 90%;
    }
    .hero-content h1 { font-size: 1.8em; }
    .section h2 { font-size: 1.5em; }
    .main-nav ul { flex-direction: column; align-items: center; }
}

.btn:focus,
.menu-toggle:focus {
    outline: 2px solid #b76e79;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(183, 110, 121, 0.3);
}