* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family:
Arial,
Helvetica,
sans-serif;
color: #171717;
background: white;
line-height: 1.5;
}
a {
color: inherit;
}
img {
display: block;
max-width: 100%;
}
.container {
width: 92%;
max-width: 1250px;
margin: auto;
}
/* ===================================
ANNOUNCEMENT
=================================== */
.announcement-bar {
background: #111;
color: white;
font-size: 12px;
}
.announcement-content {
display: flex;
justify-content:
space-between;
padding: 9px 0;
}
/* ===================================
HEADER
=================================== */
.store-header {
background: white;
position: sticky;
top: 0;
z-index: 1000;
border-bottom:
1px solid #eee;
}
.header-main {
min-height: 78px;
display: grid;
grid-template-columns:
220px 1fr auto;
align-items: center;
gap: 30px;
}
.store-logo {
font-size: 27px;
font-weight: 800;
text-decoration: none;
}
.header-search {
display: flex;
max-width: 550px;
width: 100%;
margin: auto;
border:
1px solid #ddd;
border-radius: 30px;
overflow: hidden;
}
.header-search input {
flex: 1;
border: none;
padding: 13px 18px;
outline: none;
}
.header-search button {
background: #111;
color: white;
border: none;
padding: 0 23px;
cursor: pointer;
font-weight: bold;
}
.header-icons {
display: flex;
gap: 20px;
}
.header-icons a {
text-decoration: none;
font-size: 14px;
font-weight: bold;
}
.cart-number {
display: inline-flex;
width: 20px;
height: 20px;
justify-content: center;
align-items: center;
background: #111;
color: white;
border-radius: 50%;
font-size: 10px;
}
/* ===================================
NAVIGATION
=================================== */
.store-navigation {
border-top:
1px solid #eee;
}
.navigation-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
padding: 13px 0;
overflow-x: auto;
}
.navigation-inner a {
text-decoration: none;
font-size: 14px;
white-space: nowrap;
}
.navigation-inner a:hover {
text-decoration: underline;
}
/* ===================================
HERO
=================================== */
.hero-banner {
background:
linear-gradient(
120deg,
#eee6df,
#d9cbc0
);
overflow: hidden;
}
.hero-content {
min-height: 570px;
display: grid;
grid-template-columns:
1fr 1fr;
align-items: center;
gap: 50px;
}
.hero-small,
.section-small {
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
color: #666;
}
.hero-text h1 {
font-size:
clamp(
50px,
6vw,
80px
);
line-height: 1;
margin:
12px 0 22px;
letter-spacing: -2px;
}
.hero-text > p:not(.hero-small) {
font-size: 18px;
color: #555;
max-width: 560px;
}
.shop-button {
display: inline-block;
margin-top: 18px;
padding:
14px 25px;
background: #111;
color: white;
text-decoration: none;
font-weight: bold;
}
.hero-art {
position: relative;
height: 500px;
}
.hero-shape {
position: absolute;
border-radius:
45% 55%
50% 50%;
box-shadow:
0 30px 50px
rgba(0,0,0,.15);
}
.hero-shape-one {
width: 320px;
height: 420px;
right: 20%;
top: 30px;
background:
linear-gradient(
#272727,
#666
);
}
.hero-shape-two {
width: 200px;
height: 290px;
right: 2%;
bottom: 15px;
background:
linear-gradient(
#c39877,
#805c42
);
}
/* ===================================
HOME SECTIONS
=================================== */
.home-section {
padding: 75px 0;
}
.products-background {
background: #f7f7f7;
}
.section-title {
display: flex;
justify-content:
space-between;
align-items: end;
gap: 20px;
margin-bottom: 32px;
}
.section-title h2 {
font-size: 38px;
margin:
5px 0 0;
}
.section-title a {
text-decoration: none;
font-weight: bold;
font-size: 14px;
}
/* ===================================
CATEGORIES
=================================== */
.category-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 22px;
}
.category-card {
text-decoration: none;
}
.category-image {
height: 280px;
background: #eee;
overflow: hidden;
}
.category-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform .3s;
}
.category-card:hover img {
transform: scale(1.04);
}
.category-placeholder {
width: 100%;
height: 100%;
display: flex;
justify-content:
center;
align-items: center;
font-size: 80px;
font-weight: bold;
color: #aaa;
}
.category-card h3 {
margin:
14px 0 4px;
font-size: 19px;
}
.category-card span {
font-size: 13px;
color: #666;
}
/* ===================================
PRODUCT CARDS
=================================== */
.store-product-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap:
35px 18px;
}
.store-product-card {
min-width: 0;
}
.product-image-link {
text-decoration: none;
}
.store-product-image {
position: relative;
aspect-ratio: 4 / 5;
background: #f1f1f1;
overflow: hidden;
}
.store-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform .35s;
}
.store-product-card:hover
.store-product-image img {
transform:
scale(1.04);
}
.discount-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
background: #111;
color: white;
padding:
6px 9px;
font-size: 11px;
font-weight: bold;
}
.quick-view {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
background: white;
color: #111;
text-align: center;
padding: 12px;
font-size: 13px;
font-weight: bold;
opacity: 0;
transform:
translateY(8px);
transition: .25s;
}
.store-product-card:hover
.quick-view {
opacity: 1;
transform:
translateY(0);
}
.product-placeholder {
width: 100%;
height: 100%;
display: flex;
justify-content:
center;
align-items: center;
color: #999;
}
.product-information {
padding-top: 13px;
}
.product-category {
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
color: #777;
font-weight: bold;
margin:
0 0 5px;
}
.product-information h3 {
margin:
5px 0 8px;
font-size: 16px;
}
.product-information h3 a {
text-decoration: none;
}
.product-price {
display: flex;
gap: 10px;
align-items: center;
}
.product-price strong {
font-size: 15px;
}
.product-price span {
text-decoration:
line-through;
color: #999;
font-size: 13px;
}
.stock-available {
color: #238636;
font-size: 12px;
font-weight: bold;
}
.stock-unavailable {
color: #dc2626;
font-size: 12px;
font-weight: bold;
}
/* ===================================
PROMOTION
=================================== */
.promotion-banner {
background: #111;
color: white;
padding: 65px 0;
}
.promotion-content {
display: flex;
justify-content:
space-between;
align-items: center;
gap: 30px;
}
.promotion-content p {
color: #aaa;
font-size: 12px;
letter-spacing: 2px;
}
.promotion-content h2 {
font-size: 45px;
margin:
8px 0;
}
.promotion-content span {
color: #ccc;
}
.promotion-button {
padding:
14px 22px;
background: white;
color: #111;
text-decoration: none;
font-weight: bold;
white-space: nowrap;
}
/* ===================================
SHOP PAGE
=================================== */
.shop-header {
background: #f4f4f4;
padding:
15px 0;
}
.shop-header h1 {
font-size: 35px;
margin:
6px 0;
}
.shop-header p:last-child {
color: #777;
}
.shop-content {
padding:
60px 0 90px;
}
.search-result-text {
margin-bottom: 30px;
}
.no-products {
padding: 70px;
text-align: center;
background: #f7f7f7;
}
/* ===================================
TEMP PRODUCT PAGE
=================================== */
.basic-product-page {
padding:
70px 0;
}
.basic-product-grid {
display: grid;
grid-template-columns:
1.1fr .9fr;
gap: 60px;
}
.basic-product-images img {
width: 100%;
height: 650px;
object-fit: cover;
background: #f3f3f3;
}
.large-placeholder {
height: 650px;
display: flex;
justify-content:
center;
align-items: center;
background: #eee;
}
.basic-product-details h1 {
font-size: 45px;
margin:
10px 0;
}
.detail-price {
display: flex;
align-items: center;
gap: 12px;
margin:
20px 0;
}
.detail-price strong {
font-size: 24px;
}
.detail-price span {
color: #999;
text-decoration:
line-through;
}
.add-cart-button {
margin-top: 20px;
width: 100%;
padding: 15px;
border: none;
background: #aaa;
color: white;
font-size: 16px;
}
/* ===================================
BENEFITS
=================================== */
.store-benefits {
background: #111;
color: white;
padding: 35px 0;
}
.benefits-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 30px;
}
.benefits-grid h3 {
font-size: 14px;
margin: 0;
}
.benefits-grid p {
font-size: 12px;
color: #aaa;
margin:
5px 0 0;
}
/* ===================================
FOOTER
=================================== */
.store-footer {
background: #f4f4f4;
padding-top: 55px;
}
.footer-grid {
display: grid;
grid-template-columns:
1.7fr 1fr 1fr 1fr;
gap: 45px;
padding-bottom: 50px;
}
.footer-grid h2 {
margin-top: 0;
}
.footer-grid h3 {
font-size: 15px;
}
.footer-grid p {
color: #666;
}
.footer-grid a {
display: block;
text-decoration: none;
margin:
8px 0;
font-size: 14px;
}
.footer-bottom {
border-top:
1px solid #ddd;
padding:
20px 0;
color: #777;
font-size: 12px;
}
/* ===================================
TABLET
=================================== */
@media(max-width: 1000px) {
.header-main {
grid-template-columns:
1fr auto;
}
.header-search {
grid-column:
1 / -1;
grid-row: 2;
margin-bottom: 15px;
max-width: none;
}
.hero-content {
grid-template-columns:
1fr;
}
.hero-art {
display: none;
}
.category-grid {
grid-template-columns:
repeat(2, 1fr);
}
.store-product-grid {
grid-template-columns:
repeat(3, 1fr);
}
.footer-grid {
grid-template-columns:
repeat(2, 1fr);
}
}
/* ===================================
MOBILE
=================================== */
@media(max-width: 700px) {
.announcement-content
span:last-child {
display: none;
}
.announcement-content {
justify-content:
center;
}
.store-product-grid {
grid-template-columns:
repeat(2, 1fr);
}
.basic-product-grid {
grid-template-columns:
1fr;
}
.basic-product-images img,
.large-placeholder {
height: 430px;
}
.benefits-grid {
grid-template-columns:
repeat(2, 1fr);
}
.promotion-content {
flex-direction: column;
align-items:
flex-start;
}
.promotion-content h2 {
font-size: 35px;
}
}
@media(max-width: 480px) {
.store-logo {
font-size: 23px;
}
.header-icons
a:first-child {
display: none;
}
.store-product-grid {
grid-template-columns:
1fr 1fr;
gap:
25px 10px;
}
.category-grid {
grid-template-columns:
1fr 1fr;
gap: 12px;
}
.category-image {
height: 190px;
}
.product-information h3 {
font-size: 14px;
}
.footer-grid,
.benefits-grid {
grid-template-columns:
1fr;
}
}
/* =====================================
PHASE 6 - PRODUCT DETAIL
===================================== */
/* BREADCRUMB */
.breadcrumb-section {
background: #fafafa;
border-bottom:
1px solid #eee;
}
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 9px;
padding:
15px 0;
font-size: 12px;
color: #777;
}
.breadcrumb a {
text-decoration: none;
color: #555;
}
.breadcrumb a:hover {
text-decoration:
underline;
}
.breadcrumb strong {
color: #222;
}
/* =====================================
PRODUCT DETAIL LAYOUT
===================================== */
.product-detail-section {
padding:
55px 0 80px;
}
.product-detail-grid {
display: grid;
grid-template-columns:
1.1fr .9fr;
gap: 65px;
align-items:
start;
}
/* =====================================
PRODUCT GALLERY
===================================== */
.product-gallery {
display: grid;
grid-template-columns:
90px 1fr;
gap: 15px;
}
.thumbnail-column {
display: flex;
flex-direction:
column;
gap: 10px;
}
.thumbnail-button {
border:
1px solid #ddd;
background: white;
padding: 3px;
cursor: pointer;
width: 90px;
height: 110px;
transition:
border .2s;
}
.thumbnail-button img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumbnail-button:hover,
.thumbnail-button.active {
border:
2px solid #111;
}
.main-product-image {
position: relative;
width: 100%;
background: #f4f4f4;
overflow: hidden;
min-height: 640px;
}
.main-product-image > img {
width: 100%;
height: 640px;
object-fit: cover;
}
.product-detail-discount {
position: absolute;
top: 18px;
left: 18px;
z-index: 10;
background: #111;
color: white;
padding:
8px 11px;
font-size: 12px;
font-weight: bold;
}
.large-product-placeholder {
height: 640px;
display: flex;
justify-content:
center;
align-items: center;
color: #999;
font-size: 18px;
}
/* =====================================
PRODUCT INFORMATION
===================================== */
.product-detail-info {
position: relative;
}
.detail-category {
display: inline-block;
text-transform:
uppercase;
letter-spacing: 1.5px;
font-size: 12px;
color: #666;
font-weight: bold;
text-decoration: none;
margin-bottom: 9px;
}
.product-detail-info h1 {
font-size:
clamp(
35px,
4vw,
50px
);
line-height: 1.08;
letter-spacing:
-1.5px;
margin:
6px 0 12px;
}
.product-meta {
display: flex;
gap: 25px;
color: #777;
font-size: 12px;
padding-bottom: 18px;
border-bottom:
1px solid #eee;
}
.product-meta strong {
color: #333;
}
/* =====================================
PRICE
===================================== */
.detail-product-price {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin:
24px 0;
}
.selling-price {
font-size: 28px;
font-weight: 700;
}
.detail-mrp {
color: #999;
font-size: 18px;
text-decoration:
line-through;
}
.saving-text {
background: #e8f5e9;
color: #1b7d35;
font-size: 12px;
font-weight: bold;
padding:
5px 9px;
border-radius: 3px;
}
/* =====================================
DESCRIPTION
===================================== */
.short-description {
color: #666;
line-height: 1.8;
padding-bottom: 20px;
border-bottom:
1px solid #eee;
}
/* =====================================
STOCK
===================================== */
.detail-stock {
display: flex;
align-items: center;
gap: 7px;
margin:
20px 0;
font-size: 13px;
}
.stock-dot {
width: 9px;
height: 9px;
border-radius: 50%;
}
.stock-dot.available {
background: #22a447;
}
.stock-dot.unavailable {
background: #dc2626;
}
.stock-text-available {
color: #178536;
}
.stock-text-unavailable {
color: #dc2626;
}
/* =====================================
QUANTITY
===================================== */
.quantity-section {
margin:
25px 0 18px;
}
.quantity-section > label {
display: block;
font-size: 13px;
font-weight: bold;
margin-bottom: 8px;
}
.quantity-control {
display: inline-flex;
border:
1px solid #ccc;
}
.quantity-control button {
width: 42px;
height: 44px;
border: none;
background: white;
font-size: 20px;
cursor: pointer;
}
.quantity-control input {
width: 55px;
height: 44px;
border: none;
border-left:
1px solid #ddd;
border-right:
1px solid #ddd;
text-align: center;
font-size: 15px;
outline: none;
}
/* =====================================
CART BUTTONS
===================================== */
.product-add-cart {
display: block;
width: 100%;
padding: 16px;
border: none;
background: #111;
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
}
.product-add-cart:hover {
background: #333;
}
.buy-now-button {
display: block;
width: 100%;
padding: 15px;
background: white;
color: #111;
border:
1px solid #111;
font-size: 15px;
font-weight: bold;
cursor: pointer;
margin-top: 10px;
}
.buy-now-button:hover {
background: #f5f5f5;
}
.disabled-cart {
background: #aaa;
cursor:
not-allowed;
}
.cart-phase-message {
display: none;
margin-top: 12px;
padding: 10px;
background: #fff4d6;
color: #765d00;
font-size: 12px;
text-align: center;
}
/* =====================================
PRODUCT BENEFITS
===================================== */
.product-benefits {
margin-top: 28px;
border-top:
1px solid #eee;
}
.product-benefits > div {
padding:
15px 0;
border-bottom:
1px solid #eee;
}
.product-benefits strong {
font-size: 13px;
}
.product-benefits p {
font-size: 12px;
color: #777;
margin:
3px 0 0;
}
/* =====================================
PRODUCT DESCRIPTION
===================================== */
.product-description-section {
background: #f8f8f8;
padding:
70px 0;
}
.description-box {
max-width: 950px;
margin: auto;
}
.description-box h2 {
font-size: 32px;
margin-top: 0;
}
.full-description {
color: #555;
line-height: 1.9;
}
.product-specification {
margin-top: 35px;
background: white;
border:
1px solid #e5e5e5;
}
.product-specification > div {
display: grid;
grid-template-columns:
180px 1fr;
padding:
14px 18px;
border-bottom:
1px solid #eee;
}
.product-specification > div:last-child {
border-bottom: none;
}
.product-specification span {
color: #777;
font-size: 13px;
}
.product-specification strong {
font-size: 13px;
}
/* =====================================
RELATED PRODUCTS
===================================== */
.related-products-section {
padding:
75px 0 90px;
}
/* =====================================
PRODUCT DETAIL RESPONSIVE
===================================== */
@media(max-width: 950px) {
.product-detail-grid {
grid-template-columns:
1fr;
gap: 40px;
}
.product-detail-info {
position: static;
}
.main-product-image,
.main-product-image > img,
.large-product-placeholder {
min-height: 550px;
height: 550px;
}
}
@media(max-width: 650px) {
.product-detail-section {
padding-top: 25px;
}
.product-gallery {
display: flex;
flex-direction:
column-reverse;
}
.thumbnail-column {
flex-direction: row;
overflow-x: auto;
}
.thumbnail-button {
flex:
0 0 75px;
width: 75px;
height: 90px;
}
.main-product-image,
.main-product-image > img,
.large-product-placeholder {
min-height: 460px;
height: 460px;
}
.product-detail-info h1 {
font-size: 34px;
}
.selling-price {
font-size: 24px;
}
.product-specification > div {
grid-template-columns:
120px 1fr;
}
}
@media(max-width: 450px) {
.main-product-image,
.main-product-image > img,
.large-product-placeholder {
min-height: 390px;
height: 390px;
}
}
/* =====================================
PHASE 7 - SHOPPING CART
===================================== */
.cart-page-header {
background: #f5f5f5;
padding:
50px 0;
}
.cart-page-header h1 {
font-size: 44px;
margin:
5px 0;
}
.cart-page-header p:last-child {
color: #777;
}
.cart-page-section {
padding:
55px 0 90px;
}
.cart-layout {
display: grid;
grid-template-columns:
minmax(0, 1fr) 360px;
gap: 35px;
align-items: start;
}
.cart-items-card {
border:
1px solid #e5e5e5;
padding:
0 25px 25px;
background: white;
}
.cart-item {
display: grid;
grid-template-columns:
120px minmax(180px, 1fr)
120px 135px 120px;
gap: 20px;
align-items: center;
padding:
25px 0;
border-bottom:
1px solid #eee;
}
.cart-product-image {
display: block;
width: 120px;
height: 150px;
background: #f3f3f3;
overflow: hidden;
}
.cart-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-image-placeholder {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #999;
font-size: 12px;
}
.cart-category {
margin:
0 0 5px;
color: #777;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
}
.cart-product-details h3 {
margin:
0 0 8px;
font-size: 17px;
}
.cart-product-details h3 a {
text-decoration: none;
}
.cart-sku {
color: #888;
font-size: 12px;
margin:
0 0 14px;
}
.remove-cart-button {
border: none;
background: none;
padding: 0;
color: #b91c1c;
text-decoration: underline;
cursor: pointer;
font-size: 12px;
}
.cart-unit-price {
font-weight: bold;
}
.cart-quantity {
display: flex;
border:
1px solid #ddd;
width: 125px;
}
.cart-quantity button {
width: 36px;
height: 40px;
border: none;
background: white;
cursor: pointer;
font-size: 18px;
}
.cart-quantity input {
width: 51px;
height: 40px;
text-align: center;
border: none;
border-left:
1px solid #ddd;
border-right:
1px solid #ddd;
outline: none;
}
.cart-line-total {
font-weight: bold;
text-align: right;
}
.cart-mobile-price {
display: none;
}
.cart-actions {
display: flex;
justify-content:
space-between;
align-items: center;
padding-top: 25px;
gap: 15px;
}
.continue-shopping {
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
.update-cart-button {
padding:
12px 22px;
border: none;
background: #111;
color: white;
cursor: pointer;
font-weight: bold;
}
.clear-cart-form {
margin-top: 15px;
}
.clear-cart-form button {
border: none;
background: none;
color: #b91c1c;
text-decoration: underline;
cursor: pointer;
}
/* =====================================
CART SUMMARY
===================================== */
.cart-summary {
background: #f6f6f6;
padding: 28px;
position: sticky;
top: 155px;
}
.cart-summary h2 {
margin-top: 0;
font-size: 24px;
}
.summary-row {
display: flex;
justify-content:
space-between;
gap: 20px;
padding:
13px 0;
font-size: 14px;
}
.summary-row span:last-child {
text-align: right;
}
.summary-divider {
border-top:
1px solid #ddd;
margin:
12px 0;
}
.summary-total {
display: flex;
justify-content:
space-between;
align-items: center;
padding:
10px 0;
}
.summary-total strong {
font-size: 22px;
}
.summary-tax {
color: #777;
font-size: 11px;
line-height: 1.6;
}
.checkout-button {
width: 100%;
margin-top: 15px;
padding: 16px;
border: none;
background: #111;
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
.checkout-button:hover {
background: #333;
}
.checkout-phase-message {
display: none;
margin-top: 12px;
background: #fff4d6;
padding: 10px;
color: #765d00;
font-size: 11px;
text-align: center;
}
.cart-security {
margin-top: 25px;
padding-top: 20px;
border-top:
1px solid #ddd;
}
.cart-security strong {
font-size: 13px;
}
.cart-security p {
color: #777;
font-size: 11px;
}
/* =====================================
CART MESSAGES
===================================== */
.cart-success-message {
padding: 14px 18px;
margin-bottom: 25px;
background: #dcfce7;
color: #166534;
border-radius: 4px;
}
.cart-error-message {
padding: 14px 18px;
margin-bottom: 25px;
background: #fee2e2;
color: #991b1b;
border-radius: 4px;
}
/* =====================================
EMPTY CART
===================================== */
.empty-cart {
max-width: 650px;
margin: auto;
padding:
80px 30px;
text-align: center;
background: #f7f7f7;
}
.empty-cart-icon {
font-size: 55px;
margin-bottom: 15px;
}
.empty-cart h2 {
font-size: 32px;
margin:
5px 0 10px;
}
.empty-cart p {
color: #777;
margin-bottom: 20px;
}
/* =====================================
CART RESPONSIVE
===================================== */
@media(max-width: 1050px) {
.cart-layout {
grid-template-columns:
1fr;
}
.cart-summary {
position: static;
}
.cart-item {
grid-template-columns:
100px minmax(170px, 1fr)
100px 125px 100px;
}
.cart-product-image {
width: 100px;
height: 125px;
}
}
@media(max-width: 750px) {
.cart-items-card {
padding:
0 15px 20px;
}
.cart-item {
grid-template-columns:
95px 1fr;
gap: 15px;
}
.cart-product-image {
width: 95px;
height: 120px;
}
.cart-unit-price {
display: none;
}
.cart-mobile-price {
display: block;
font-weight: bold;
margin-bottom: 12px;
}
.cart-quantity {
grid-column: 2;
width: 125px;
}
.cart-line-total {
grid-column: 2;
text-align: left;
font-size: 15px;
}
}
@media(max-width: 480px) {
.cart-page-header h1 {
font-size: 34px;
}
.cart-actions {
align-items: stretch;
flex-direction: column;
}
.continue-shopping {
text-align: center;
}
.update-cart-button {
width: 100%;
}
}
/* =====================================
PHASE 8 - CUSTOMER ACCOUNT
===================================== */
.account-page-section {
min-height: 650px;
padding: 70px 20px;
background: #f7f7f7;
}
.account-auth-container {
max-width: 480px;
margin: auto;
}
.account-auth-card {
background: white;
padding: 40px;
border: 1px solid #e5e5e5;
}
.account-auth-card h1 {
font-size: 38px;
margin: 5px 0 10px;
}
.account-intro {
color: #777;
margin-bottom: 30px;
}
.account-auth-card form {
display: flex;
flex-direction: column;
}
.account-auth-card label {
font-size: 13px;
font-weight: bold;
margin-bottom: 7px;
margin-top: 15px;
}
.account-auth-card input {
width: 100%;
padding: 13px 14px;
border: 1px solid #ccc;
font-size: 14px;
outline: none;
}
.account-auth-card input:focus {
border-color: #111;
}
.auth-submit-button {
width: 100%;
margin-top: 25px;
padding: 15px;
border: none;
background: #111;
color: white;
font-weight: bold;
font-size: 15px;
cursor: pointer;
}
.auth-submit-button:hover {
background: #333;
}
.auth-bottom-text {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #eee;
text-align: center;
font-size: 13px;
color: #666;
}
.auth-bottom-text a {
color: #111;
font-weight: bold;
}
.auth-error {
padding: 13px 15px;
margin-bottom: 20px;
background: #fee2e2;
color: #991b1b;
font-size: 13px;
}
/* =====================================
CUSTOMER ACCOUNT
===================================== */
.customer-account-header {
background: #f4f4f4;
padding: 50px 0;
}
.customer-account-header h1 {
margin: 6px 0;
font-size: 42px;
}
.customer-account-header p:last-child {
color: #777;
}
.customer-account-section {
padding: 60px 0 90px;
}
.customer-account-grid {
display: grid;
grid-template-columns: 230px 1fr;
gap: 35px;
align-items: start;
}
/* ACCOUNT SIDEBAR */
.account-sidebar {
border: 1px solid #e5e5e5;
padding: 20px;
}
.account-sidebar h3 {
margin-top: 0;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.account-sidebar a {
display: block;
padding: 11px 8px;
text-decoration: none;
color: #555;
font-size: 14px;
}
.account-sidebar a:hover,
.account-sidebar a.active {
background: #f3f3f3;
color: #111;
}
.account-sidebar .account-logout {
margin-top: 15px;
border-top: 1px solid #eee;
padding-top: 17px;
color: #b91c1c;
}
/* ACCOUNT CONTENT */
.account-content {
display: flex;
flex-direction: column;
gap: 25px;
}
.account-card {
border: 1px solid #e5e5e5;
padding: 30px;
background: white;
}
.account-card h2 {
margin-top: 0;
margin-bottom: 25px;
}
.account-info-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 20px;
padding: 13px 0;
border-bottom: 1px solid #eee;
}
.account-info-row:last-child {
border-bottom: none;
}
.account-info-row span {
color: #777;
font-size: 13px;
}
.account-info-row strong {
font-size: 14px;
}
.account-success {
background: #dcfce7;
color: #166534;
padding: 14px 18px;
margin-bottom: 25px;
}
.account-empty-state {
text-align: center;
background: #f7f7f7;
padding: 40px 20px;
}
.account-empty-state p {
color: #777;
}
.account-shop-button {
display: inline-block;
margin-top: 10px;
padding: 11px 18px;
background: #111;
color: white;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
.account-muted {
color: #777;
}
@media(max-width: 750px) {
.customer-account-grid {
grid-template-columns: 1fr;
}
.account-sidebar {
display: flex;
overflow-x: auto;
gap: 5px;
}
.account-sidebar h3 {
display: none;
}
.account-sidebar a {
white-space: nowrap;
}
.account-sidebar .account-logout {
margin-top: 0;
border-top: none;
padding-top: 11px;
}
.account-info-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
@media(max-width: 500px) {
.account-auth-card {
padding: 28px 20px;
}
.account-auth-card h1 {
font-size: 32px;
}
.customer-account-header h1 {
font-size: 34px;
}
.account-card {
padding: 22px 18px;
}
}
/* =====================================
PHASE 9 - CHECKOUT
===================================== */
.checkout-header {
background: #f5f5f5;
padding: 45px 0;
}
.checkout-header h1 {
margin: 5px 0;
font-size: 42px;
}
.checkout-section {
padding: 55px 0 90px;
}
.checkout-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 390px;
gap: 35px;
align-items: start;
}
.checkout-main {
display: flex;
flex-direction: column;
gap: 22px;
}
.checkout-card {
border: 1px solid #e5e5e5;
padding: 28px;
background: white;
}
.checkout-card h2 {
margin-top: 0;
margin-bottom: 22px;
font-size: 22px;
}
.checkout-customer {
display: flex;
flex-direction: column;
}
.checkout-customer span {
color: #777;
font-size: 13px;
}
.checkout-card label {
display: block;
margin-top: 14px;
margin-bottom: 6px;
font-size: 13px;
font-weight: bold;
}
.checkout-card input[type="text"],
.checkout-card select,
.checkout-card textarea {
width: 100%;
padding: 13px;
border: 1px solid #ccc;
font-family: inherit;
font-size: 14px;
}
.checkout-two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.address-source-option {
margin: 15px 0;
}
.address-source-option label {
display: flex;
align-items: center;
gap: 8px;
}
.checkout-select {
margin-bottom: 15px;
}
.new-address-fields {
margin-top: 20px;
}
.checkout-checkbox {
display: flex !important;
align-items: center;
gap: 8px;
}
.payment-option {
border: 1px solid #ddd;
padding: 17px;
display: flex !important;
align-items: flex-start;
gap: 12px;
}
.payment-option p {
margin: 4px 0 0;
color: #777;
font-size: 12px;
}
/* CHECKOUT SUMMARY */
.checkout-summary {
background: #f7f7f7;
padding: 28px;
position: sticky;
top: 155px;
}
.checkout-summary h2 {
margin-top: 0;
}
.checkout-product {
display: grid;
grid-template-columns: 55px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #ddd;
}
.checkout-product-image {
width: 55px;
height: 68px;
background: #eee;
position: relative;
}
.checkout-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.checkout-product-image span {
position: absolute;
right: -7px;
top: -7px;
width: 20px;
height: 20px;
background: #111;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.checkout-product-name {
display: flex;
flex-direction: column;
}
.checkout-product-name strong {
font-size: 13px;
}
.checkout-product-name small {
color: #888;
}
.checkout-product-price {
font-size: 13px;
font-weight: bold;
}
.checkout-summary-row {
display: flex;
justify-content: space-between;
padding: 12px 0;
}
.checkout-total {
display: flex;
justify-content: space-between;
border-top: 1px solid #ccc;
padding-top: 18px;
margin-top: 8px;
}
.checkout-total strong {
font-size: 23px;
}
.place-order-button {
width: 100%;
margin-top: 22px;
padding: 16px;
border: none;
background: #111;
color: white;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
.checkout-security-text {
text-align: center;
color: #777;
font-size: 11px;
}
.checkout-error {
background: #fee2e2;
color: #991b1b;
padding: 14px 18px;
margin-bottom: 25px;
}
/* CART CHECKOUT LINK */
.checkout-link {
display: block;
text-align: center;
text-decoration: none;
}
/* =====================================
ORDER SUCCESS
===================================== */
.order-success-section {
padding: 70px 0 100px;
background: #f7f7f7;
}
.order-success-card {
max-width: 800px;
margin: auto;
background: white;
padding: 45px;
border: 1px solid #e5e5e5;
}
.order-success-icon {
width: 65px;
height: 65px;
border-radius: 50%;
background: #15803d;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin-bottom: 20px;
}
.order-success-card h1 {
font-size: 42px;
margin: 5px 0;
}
.order-success-intro {
color: #777;
}
.order-number-box {
background: #f5f5f5;
padding: 17px;
margin: 25px 0;
display: flex;
justify-content: space-between;
}
.order-success-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin: 30px 0;
}
.success-order-items {
border-top: 1px solid #eee;
padding-top: 25px;
}
.success-order-item {
display: flex;
justify-content: space-between;
padding: 13px 0;
border-bottom: 1px solid #eee;
}
.success-order-item div {
display: flex;
flex-direction: column;
}
.success-order-item small {
color: #777;
}
.success-totals {
max-width: 350px;
margin-left: auto;
margin-top: 25px;
}
.success-totals > div {
display: flex;
justify-content: space-between;
padding: 8px 0;
}
.success-grand-total {
border-top: 1px solid #ccc;
margin-top: 8px;
padding-top: 14px !important;
font-size: 18px;
}
.success-actions {
display: flex;
gap: 10px;
margin-top: 35px;
}
.success-account-button,
.success-shop-button {
padding: 13px 20px;
text-decoration: none;
font-weight: bold;
font-size: 13px;
}
.success-account-button {
background: #111;
color: white;
}
.success-shop-button {
border: 1px solid #111;
}
/* =====================================
CUSTOMER ORDER HISTORY
===================================== */
.customer-order-row {
display: grid;
grid-template-columns:
1.4fr 1fr 1fr 1fr auto;
gap: 15px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid #eee;
}
.order-list-label {
display: block;
color: #888;
font-size: 10px;
text-transform: uppercase;
margin-bottom: 3px;
}
.customer-order-status {
color: #166534;
}
.view-order-button {
background: #111;
color: white;
padding: 8px 12px;
text-decoration: none;
font-size: 12px;
}
.saved-address-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.saved-address-card {
border: 1px solid #ddd;
padding: 20px;
position: relative;
}
.saved-address-card h3 {
margin-top: 0;
}
.saved-address-card p {
color: #555;
font-size: 13px;
}
.default-address-label {
position: absolute;
right: 12px;
top: 12px;
background: #111;
color: white;
padding: 4px 7px;
font-size: 10px;
}
/* =====================================
ORDER DETAILS
===================================== */
.order-details-header {
background: #f5f5f5;
padding: 45px 0;
}
.order-details-header h1 {
margin: 7px 0;
}
.back-account-link {
display: inline-block;
margin-bottom: 20px;
text-decoration: none;
font-size: 12px;
}
.order-details-section {
padding: 55px 0 90px;
}
.order-detail-status-bar {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid #ddd;
margin-bottom: 30px;
}
.order-detail-status-bar > div {
padding: 17px;
border-right: 1px solid #ddd;
}
.order-detail-status-bar > div:last-child {
border-right: none;
}
.order-detail-status-bar span {
display: block;
color: #777;
font-size: 11px;
}
.order-details-layout {
display: grid;
grid-template-columns: 1fr 330px;
gap: 30px;
align-items: start;
}
.order-details-main {
display: flex;
flex-direction: column;
gap: 20px;
}
.order-detail-card {
border: 1px solid #ddd;
padding: 25px;
}
.order-detail-card h2 {
margin-top: 0;
}
.order-detail-item {
display: flex;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid #eee;
}
.order-detail-item p {
margin: 4px 0;
color: #777;
font-size: 12px;
}
.order-total-card {
background: #f6f6f6;
padding: 25px;
}
.order-total-card h2 {
margin-top: 0;
}
.order-total-card > div {
display: flex;
justify-content: space-between;
padding: 10px 0;
}
.order-final-total {
border-top: 1px solid #ccc;
margin-top: 8px;
padding-top: 16px !important;
font-size: 18px;
}
/* RESPONSIVE */
@media(max-width: 900px) {
.checkout-layout,
.order-details-layout {
grid-template-columns: 1fr;
}
.checkout-summary {
position: static;
}
.customer-order-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media(max-width: 650px) {
.checkout-two-column,
.order-success-grid,
.saved-address-grid {
grid-template-columns: 1fr;
}
.checkout-card,
.order-success-card {
padding: 22px 18px;
}
.order-detail-status-bar {
grid-template-columns: 1fr;
}
.order-detail-status-bar > div {
border-right: none;
border-bottom: 1px solid #ddd;
}
.customer-order-row {
grid-template-columns: 1fr;
}
.success-actions {
flex-direction: column;
}
}
/* =====================================
SHOP LEFT SIDEBAR FILTER
===================================== */
.shop-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 35px;
align-items: start;
}
/* SIDEBAR */
.shop-sidebar {
border: 1px solid #e5e5e5;
padding: 22px;
background: #ffffff;
position: sticky;
top: 130px;
}
.shop-sidebar h3 {
margin: 0 0 22px;
font-size: 20px;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}
/* FILTER GROUP */
.sidebar-filter-group {
margin-bottom: 24px;
}
.sidebar-filter-group > label:first-child {
display: block;
font-size: 13px;
font-weight: 600;
margin-bottom: 10px;
}
/* INPUT */
.sidebar-filter-group input[type="number"],
.sidebar-filter-group select {
width: 100%;
height: 42px;
padding: 0 10px;
border: 1px solid #d6d6d6;
background: white;
margin-bottom: 8px;
font-size: 13px;
}
/* CHECKBOX */
.sidebar-checkbox {
display: flex !important;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: normal !important;
}
.sidebar-checkbox input {
width: 16px;
height: 16px;
}
/* APPLY BUTTON */
.sidebar-apply-button {
width: 100%;
border: none;
background: #111;
color: white;
padding: 13px;
cursor: pointer;
font-weight: 600;
margin-bottom: 8px;
}
/* CLEAR BUTTON */
.sidebar-clear-button {
display: block;
width: 100%;
padding: 12px;
text-align: center;
border: 1px solid #ddd;
color: #111;
text-decoration: none;
box-sizing: border-box;
}
/* PRODUCT AREA */
.shop-products-area {
min-width: 0;
}
/* RESPONSIVE */
@media(max-width: 900px) {
.shop-layout {
grid-template-columns: 200px 1fr;
gap: 20px;
}
}
@media(max-width: 700px) {
.shop-layout {
grid-template-columns: 1fr;
}
.shop-sidebar {
position: static;
}
}
.payment-option {
margin-bottom: 10px;
cursor: pointer;
}
.payment-option input[type="radio"] {
margin-top: 3px;
}
.online-payment-message {
margin-top: 12px;
text-align: center;
font-size: 12px;
color: #166534;
}
.online-payment-message.error {
color: #b91c1c;
}
.place-order-button:disabled {
opacity: 0.65;
cursor: not-allowed;
}
/* =====================================
HOME BANNER SLIDER
===================================== */
.home-banner-slider {
width: 100%;
position: relative;
overflow: hidden;
background: #f5f5f5;
}
.banner-slider-track {
display: flex;
width: 100%;
transition:
transform 0.7s ease-in-out;
}
.home-banner-slide {
position: relative;
min-width: 100%;
width: 100%;
overflow: hidden;
}
.home-banner-slide img {
display: block;
width: 100%;
height: 500px;
object-fit: cover;
}
/* TEXT */
.home-banner-content {
position: absolute;
top: 50%;
left: 8%;
transform:
translateY(-50%);
max-width: 520px;
z-index: 2;
}
.home-banner-content .hero-small {
margin: 0 0 10px;
font-size: 13px;
font-weight: 600;
letter-spacing: 2px;
}
.home-banner-content h1 {
margin: 0 0 25px;
font-size: 52px;
line-height: 1.05;
}
/* BUTTON */
.banner-shop-button {
display: inline-block;
background: #111;
color: white;
padding: 14px 25px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.banner-shop-button:hover {
background: #333;
}
/* =====================================
ARROWS
===================================== */
.banner-arrow {
position: absolute;
top: 50%;
transform:
translateY(-50%);
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
background:
rgba(
255,
255,
255,
0.85
);
color: #111;
font-size: 30px;
cursor: pointer;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
}
.banner-arrow:hover {
background: #111;
color: white;
}
.banner-arrow-left {
left: 20px;
}
.banner-arrow-right {
right: 20px;
}
/* =====================================
DOTS
===================================== */
.banner-dots {
position: absolute;
bottom: 18px;
left: 50%;
transform:
translateX(-50%);
display: flex;
gap: 8px;
z-index: 5;
}
.banner-dot {
width: 10px;
height: 10px;
padding: 0;
border: none;
border-radius: 50%;
background:
rgba(
255,
255,
255,
0.65
);
cursor: pointer;
}
.banner-dot.active {
background: #111;
}
/* =====================================
TABLET
===================================== */
@media(max-width: 900px) {
.home-banner-slide img {
height: 400px;
}
.home-banner-content h1 {
font-size: 40px;
}
}
/* =====================================
MOBILE
===================================== */
@media(max-width: 600px) {
.home-banner-slide img {
height: 300px;
}
.home-banner-content {
left: 7%;
right: 7%;
}
.home-banner-content h1 {
font-size: 29px;
}
.banner-arrow {
width: 34px;
height: 34px;
font-size: 23px;
}
.banner-arrow-left {
left: 8px;
}
.banner-arrow-right {
right: 8px;
}
}
.product-variants {
margin:25px 0;
}
.variant-options {
display:flex;
gap:10px;
flex-wrap:wrap;
}
.variant-button {
padding:10px 18px;
border:1px solid #ddd;
background:white;
border-radius:6px;
cursor:pointer;
}
.variant-button.active {
background:#111827;
color:white;
border-color:#111827;
}
.stock-status {
font-size:14px;
font-weight:600;
margin-top:15px;
}
.in-stock {
color:#16a34a;
}
.out-stock {
color:#dc2626;
}