html {
scroll-behavior: smooth;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f5f5f5;
font-family: 'Montserrat', sans-serif;
}
/* HEADER */
.header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 60px;
background: white;
position: relative;
z-index: 100;
}
/* LOGO */
.logo img {
width: 40px;
height: auto;
display: block;
text-decoration: none;
}
/* MENU */
.menu {
display: flex;
align-items: center;
gap: 40px;
}
/* LINKS */
.menu a {
text-decoration: none;
color: black;
font-size: 17px;
font-weight: 500;
transition: 0.3s;
}
/* HOVER */
.menu a:hover {
color: #d62828;
}
/* CART */
.cart {
font-size: 22px;
cursor: pointer;
}
.cart svg {
width: 26px;
height: 26px;
}
/* HERO */
.hero {
height: 780px;
background-image: url("images/hero.jpg");
background-size: cover;
background-position: center;
position: relative;
margin: 0 20px;
border-radius: 6px;
overflow: hidden;
}
/* DARK OVERLAY */
.overlay {
width: 100%;
height: 100%;
background: transparent;
display: flex;
align-items: center;
}
/* TEXT CONTENT */
.hero-content {
padding-left: 0;
color: white;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* BIG TITLE */
.hero-content h1 {
color: #d62828;
font-size: 100px;
font-weight: 700;
margin-bottom: 20px;
line-height: 1;
}
/* SUBTITLE */
.hero-content p {
color: #000000;
text-shadow: 0 1px 6px rgba(255, 255, 255, 0.8);
font-size: 24px;
line-height: 1.5;
letter-spacing: 3px;
margin-bottom: 35px;
max-width: 500px;
}
/* SHOP BUTTON */
.gender-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 45px;
margin-top: 0;
}
.gender-button {
width: 205px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* WOMAN STORY */
.gender-button:first-child {
background: rgba(255, 255, 255, 0.92);
color: #111;
border: none;
}
/* MAN STORY */
.gender-button:last-child {
background: rgba(0, 0, 0, 0.92);
color: white;
border: 1px solid black;
}
/* HOVER */
.gender-button:first-child:hover {
background: #eeeeee;
color: black;
}
.gender-button:last-child:hover {
background: #222222;
color: white;
}
/* DROPDOWN */
.dropdown {
position: relative;
}
/* DROPDOWN MENU */
.dropdown-menu {
position: absolute;
top: 35px;
left: 0;
background: white;
min-width: 180px;
padding: 15px 0;
border-radius: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: 0.3s;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
/* SHOW MENU */
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* DROPDOWN LINKS */
.dropdown-menu a {
display: block;
padding: 12px 20px;
color: black;
text-decoration: none;
font-size: 14px;
transition: 0.3s;
}
/* HOVER */
.dropdown-menu a:hover {
background: #f5f5f5;
}
/* PRODUCTS */
.products {
padding: 100px 60px;
}
/* SECTION TITLE */
.section-title {
font-size: 42px;
margin-bottom: 50px;
font-weight: 700;
}
/* GRID */
.products-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 35px;
}
/* PRINTED T-SHIRTS PAGE */
.printed-page .products-grid {
width: calc(100% - 60px);
max-width: none;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.printed-page .product-card {
min-width: 0;
}
.printed-page .product-image {
width: 100%;
min-width: 0;
height: 350px;
overflow: hidden;
}
.printed-page .product-image img {
width: 100%;
height: 100%;
max-width: 100%;
object-fit: contain;
display: block;
}
/* CARD */
.product-card {
cursor: pointer;
}
/* IMAGE BLOCK */
.product-image {
position: relative;
overflow: hidden;
border-radius: 6px;
}
/* PRODUCT IMAGES */
.product-image img {
width: 100%;
display: block;
transition: 0.5s;
}
/* HOVER IMAGE */
.hover-image {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
/* HOVER EFFECT */
.product-card:hover .hover-image {
opacity: 1;
}
.product-card:hover .main-image {
opacity: 0;
}
/* PRODUCT INFO */
.product-info {
padding-top: 18px;
}
/* TITLE */
.product-info h3 {
font-size: 18px;
margin-bottom: 10px;
}
/* DESCRIPTION */
.product-info p {
color: #777;
font-size: 14px;
margin-bottom: 12px;
}
/* PRICE */
.price {
font-size: 18px;
font-weight: 600;
}
/* SINGLE PRODUCT */
.single-product {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
padding: 80px 60px;
}
/* PRODUCT IMAGE */
.single-product-image img {
width: 90%;
max-height: 70vh;
object-fit: contain;
display: block;
margin: 0 auto;
border-radius: 8px;
}
/* INFO */
.single-product-info {
padding-top: 40px;
}
/* TITLE */
.single-product-info h1 {
font-size: 40px;
margin-bottom: 25px;
}
/* DESCRIPTION */
.product-description {
font-size: 18px;
color: #666;
line-height: 1.7;
margin-bottom: 30px;
}
/* PRICE */
.product-price {
font-size: 32px;
font-weight: 700;
margin-bottom: 40px;
}
/* SIZES */
.sizes {
display: flex;
gap: 15px;
margin-bottom: 40px;
}
/* SIZE BUTTON */
.sizes button {
width: 55px;
height: 55px;
border: 1px solid #ddd;
background: white;
color: #111;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
}
/* HOVER */
.sizes button:hover {
background: black;
color: white;
}
/* ADD TO CART */
.add-to-cart {
background: #d62828;
color: white;
border: none;
padding: 20px 45px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}
/* HOVER */
.add-to-cart:hover {
background: #b71c1c;
}
.product-card {
text-decoration: none;
color: inherit;
display: block;
}
/* CART */
.cart {
position: relative;
text-decoration: none;
color: black;
}
/* COUNT */
.cart-count {
position: absolute;
top: -8px;
right: -10px;
background: #d62828;
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
/* ACTIVE SIZE */
.size-btn.active {
background: black;
color: white;
border-color: black;
}
/* CART PAGE */
.cart-page {
padding: 80px 60px;
}
/* TITLE */
.cart-page h1 {
font-size: 48px;
margin-bottom: 50px;
}
/* CART ITEM */
.cart-item {
display: flex;
align-items: center;
gap: 50px;
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #eee;
}
/* IMAGE */
.cart-item img {
width: 320px;
border-radius: 10px;
object-fit: cover;
}
/* INFO */
.cart-item-info h3 {
font-size: 32px;
margin-bottom: 18px;
}
.cart-item-info p {
font-size: 18px;
color: #555;
margin-bottom: 12px;
}
.cart-item-info p {
color: #666;
margin-bottom: 8px;
}
/* REMOVE */
.remove-btn {
margin-top: 20px;
background: none;
border: none;
color: #d62828;
cursor: pointer;
font-size: 16px;
transition: 0.3s;
font-weight: 600;
}
.remove-btn:hover {
opacity: 0.6;
}
/* TOTAL */
.cart-total {
margin-top: 50px;
font-size: 32px;
font-weight: 700;
}
/* CART LAYOUT */
.cart-layout {
display: flex;
gap: 80px;
align-items: flex-start;
}
/* LEFT */
.cart-items {
flex: 2;
}
/* RIGHT */
.cart-summary {
flex: 1;
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 5px 30px rgba(0,0,0,0.05);
position: sticky;
top: 40px;
}
/* SUMMARY TITLE */
.cart-summary h2 {
font-size: 28px;
margin-bottom: 30px;
}
/* ROW */
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
font-size: 18px;
}
/* CHECKOUT BUTTON */
.checkout-btn {
width: 100%;
padding: 18px;
border: none;
background: #d62828;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
border-radius: 6px;
transition: 0.3s;
}
.checkout-btn:hover {
background: black;
}
/* BIGGER PRODUCT IMAGE */
.cart-item img {
width: 210px;
}
@media (max-width: 768px) {
.cart-item {
gap: 20px;
align-items: flex-start;
}
.cart-item img {
width: 120px;
}
.cart-item-info h3 {
font-size: 24px;
margin-bottom: 10px;
}
.cart-item-info p {
font-size: 16px;
}
.product-title {
font-size: 36px;
line-height: 1;
}
.header {
padding: 15px 20px;
}
.hero-content h1 {
font-size: 48px;
}
.hero-content p {
font-size: 11px;
}
.products-grid {
grid-template-columns: 1fr;
}
.single-product {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
padding: 20px;
}
.single-product-image {
width: 100%;
}
.single-product-image img {
width: 100%;
max-width: 100%;
display: block;
}
.single-product-info {
width: 100%;
}
.cart-container {
flex-direction: column;
}
.cart-summary {
width: 100%;
}
.single-product-info h1 {
font-size: 28px;
margin-bottom: 15px;
}
}
.back-link {
display: inline-block;
margin: 20px 30px;
color: #111;
text-decoration: none;
font-weight: 600;
}
.back-link:hover {
color: #c00000;
}
.image-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.95);
justify-content: center;
align-items: center;
z-index: 9999;
}
.image-modal img {
max-width: 90%;
max-height: 90%;
border-radius: 10px;
}
.close-modal {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 40px;
cursor: pointer;
}
@media (max-width: 768px) {
.cart-page {
flex-direction: column;
padding: 40px 20px;
}
.cart-summary {
position: static;
width: 100%;
margin-top: 30px;
box-sizing: border-box;
}
}
@media (max-width: 768px) {
.cart-layout {
flex-direction: column;
}
.cart-page {
padding: 20px;
}
.cart-page h1 {
font-size: 42px;
margin-bottom: 15px;
}
.cart-summary {
position: static;
width: 100%;
margin-top: 0px;
padding: 20px;
box-sizing: border-box;
}
.cart-item {
gap: 15px;
margin-bottom: 15px;
padding-bottom: 15px;
}
}
@media (max-width: 768px) {
.hero{
background-image: url("images/hero-mobile.jpg");
}
.hero-content {
padding-left: 0;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.overlay{
align-items: flex-end;
padding-bottom: 230px;
}
.shop-button {
padding: 10px 22px;
font-size: 15px;
border-radius: 6px;
}
}
/* =========================
RETURNS PAGE
========================= */
.returns-page {
max-width: 900px;
margin: 0 auto;
padding: 0px 60px 50px;
}
.returns-page h1 {
font-family: inherit;
font-size: 125px;
line-height: 0.85;
font-weight: 700;
letter-spacing: -5px;
color: #d9d9d9;
margin: 35px 35px 35px;
}
.returns-line {
width: 100%;
height: 1px;
background: #e5e5e5;
margin-bottom: 35px;
}
.return-section {
display: flex;
gap: 40px;
padding: 0 0 25px;
margin-bottom: 25px;
border-bottom: 1px solid #eeeeee;
}
.return-number {
font-size: 13px;
color: #999;
min-width: 35px;
padding-top: 5px;
}
.return-info {
max-width: 650px;
}
.return-info h2 {
font-size: 23px;
margin: 0 0 8px;
font-weight: 600;
}
.return-info p {
font-size: 16px;
line-height: 1.45;
margin: 0;
color: #444;
}
.returns-contact {
margin-top: 12px;
}
.returns-contact h2 {
font-size: 19px;
margin: 0 0 6px;
}
.returns-contact a {
font-size: 16px;
color: #d62828;
text-decoration: none;
}
.returns-contact a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.menu {
gap: 18px;
}
.menu a {
font-size: 18px;
}
.logo img {
width: 55px;
}
}
/* SIZE GUIDE */
.size-guide {
margin-top: 28px;
max-width: 330px;
}
.size-guide-title {
font-size: 13px;
letter-spacing: 1.5px;
font-weight: 600;
margin-bottom: 14px;
}
.size-guide-table {
display: grid;
grid-template-columns: 1fr 80px 80px;
row-gap: 10px;
font-size: 14px;
text-align: center;
}
.size-guide-table > div:first-child {
text-align: left;
}
.size-column {
font-weight: 600;
}
.measurement {
text-align: left;
color: #777;
}
.size-guide-note {
margin-top: 15px;
margin-bottom: 40px;
font-size: 11px;
line-height: 1.4;
color: #999;
}
@media (max-width: 768px) {
.size-guide {
width: 100%;
max-width: 320px;
margin-top: 25px;
}
.size-guide-table {
grid-template-columns: 1fr 75px 75px;
font-size: 13px;
row-gap: 9px;
}
.size-guide-note {
font-size: 10px;
}
}
.printed-product-info {
padding: 0px 2px 20px;
}
.printed-product-name {
font-size: 20px;
font-weight: 500;
margin-bottom: 6px;
}
.printed-product-description {
font-size: 15px;
line-height: 1.25;
color: #666;
margin-bottom: 0px;
}
.printed-product-price {
font-size: 17px;
font-weight: 500;
}
.cart-link {
position: relative;
display: inline-flex;
align-items: center;
}
.cart-icon {
width: 30px;
height: 30px;
display: block;
}
.cart-count {
position: absolute;
top: -8px;
right: -10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #c62828;
color: white;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.printed-page .section-title {
width: calc(100% - 60px);
margin: 0 auto 25px;
padding: 0;
text-align: left;
position: relative;
top: 20px;
}
/* WOMAN STORE CATEGORY BUTTONS */
.category-buttons {
display: flex;
gap: 25px;
margin-top: 45px;
}
.category-button {
display: flex;
align-items: center;
justify-content: center;
width: 260px;
height: 65px;
background: black;
color: white;
text-decoration: none;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
transition: 0.3s;
}
.category-button:hover {
background: #d62828;
}
/* =========================
WOMAN STORE
========================= */
.woman-categories {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
width: calc(100% - 80px);
margin: 35px auto 60px;
}
.woman-category {
position: relative;
height: 500px;
overflow: hidden;
text-decoration: none;
color: black;
background: #f2f2f2;
}
.woman-category img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.woman-category:hover img {
transform: scale(1.03);
}
.woman-category-content {
position: absolute;
inset: 0;
padding: 28px 35px;
display: flex;
flex-direction: column;
align-items: flex-start;
background: none;
}
.woman-number {
font-size: 64px;
font-weight: 300;
color: #999;
line-height: 1;
margin-bottom: 25px;
}
.woman-category h2 {
margin: 0 0 15px;
font-size: 30px;
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.5px;
}
.woman-category p {
margin: 0;
font-size: 14px;
line-height: 1.4;
color: #333;
}
.woman-arrow {
margin-top: auto;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: #d62828;
color: white;
border-radius: 50%;
font-size: 22px;
transition: 0.3s;
}
.woman-category:hover .woman-arrow {
transform: translateX(5px);
}
/* =========================
WOMAN STORE — MOBILE
========================= */
@media (max-width: 768px) {
.logo img {
width: 36px;
}
.woman-categories {
grid-template-columns: 1fr;
width: calc(100% - 30px);
gap: 15px;
margin-top: 10px;
}
.woman-category {
height: 280px;
}
.woman-category-content {
padding: 22px;
}
.woman-number {
font-size: 48px;
margin-bottom: 18px;
}
.woman-category h2 {
font-size: 25px;
}
.woman-page .section-title {
font-size: 40px;
margin: 0 0 15px 0;
padding-left: 27px;
padding-top: 15px
}
}
/* =========================
WOMAN STORE — DESKTOP
========================= */
@media (min-width: 769px) {
.woman-page .section-title {
margin-top: 30px;
margin-left: 35px;
margin-bottom: 25px;
}
.woman-page .woman-categories {
margin-top: 80;
}
@media (min-width: 769px) {
.woman-page .woman-category-content {
transform: translateY(35px) !important;
}
.woman-page .woman-number {
transform: translateY(-15px) !important;
}
}
.woman-page .woman-number {
transform: translateY(-15px) !important;
}
.woman-page .woman-arrow {
transform: translateY(-30px) !important;
}
}
@media (min-width: 769px) {
.woman-categories {
margin-top: 85px !important;
}
}
@media (min-width: 769px) {
.section-title {
margin-top: 68px !important;
}
}
/* WOMAN STORE — new desktop title */
@media (min-width: 769px) {
.woman-title {
position: relative;
height: 115px;
margin: 55px 35px 0 !important;
padding: 0 !important;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.woman-word {
font-family: inherit;
font-size: 125px;
line-height: 0.85;
font-weight: 700;
letter-spacing: -5px;
color: #d9d9d9;
}
.store-word {
font-family: inherit;
font-size: 62px;
line-height: 1;
font-weight: 500;
letter-spacing: -2px;
color: #111;
margin-left: 18px;
margin-bottom: 2px;
}
}
@media (min-width: 769px) {
main.printed-page > h1.section-title {
transform: translateY(-50px) !important;
}
}
@media (min-width: 769px) {
main.printed-page > .products-grid {
margin-top: -25px !important;
}
}
/* PRINTED T-SHIRTS — FINAL IMAGE SIZE */
.printed-page .products-grid {
width: calc(100% - 60px);
max-width: none;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.printed-page .product-card {
width: 100%;
}
.printed-page .product-image {
width: 100%;
max-width: none;
height: auto;
}
.printed-page .product-image img {
width: 100%;
max-width: none;
height: auto;
object-fit: contain;
}
@media (min-width: 769px) {
.printed-page .section-title {
margin-top: 5px;
margin-bottom: 0;
line-height: 0.9;
}
}
/* PRINTED PAGE — FINAL SPACING */
.printed-page .section-title {
margin-top: 20 !important;
margin-bottom: 10px !important;
transform: none !important;
}
.printed-page .printed-product-price {
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
margin-top: 6px !important;
}
.printed-page .section-title {
margin-bottom: 0px !important;
}
/* FINAL PRINTED PAGE FIX */
.printed-page .section-title {
margin: 50px 30px 15px !important;
}
.printed-page .printed-product-price {
font-size: 22px !important;
margin-top: 10px !important;
}
@media (min-width: 769px) {
.hero .hero-content {
transform: translateX(-270px) !important;
}
}
/* =========================
MOBILE HERO
========================= */
@media (max-width: 768px) {
.hero-content {
position: absolute;
top: 18%;
left: 0;
width: 100%;
padding: 0;
transform: none;
text-align: center;
align-items: center;
}
.hero-content h1 {
font-size: 52px;
margin-bottom: 18px;
}
.hero-content h1 {
transform: translateY(-60px);
}
.hero-content p {
transform: translateY(-70px);
}
.gender-buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
}
.gender-buttons {
transform: translateY(270px);
}
.gender-button {
width: 240px;
height: 56px;
margin: 0;
}
.gender-button:first-child {
background: rgba(0, 0, 0, 0.18);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.8);
}
.gender-button:last-child {
background: rgba(0, 0, 0, 0.18);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.8);
}
}
.product-name {
color: #111;
text-decoration: none;
font-size: 16px;
font-weight: 500;
margin-top: 5px;
margin-bottom: 4px;
}
.product-card a {
text-decoration: none;
color: inherit;
}
.product-description {
margin-top: 0;
margin-bottom: 4px;
}
.product-price {
margin-top: 6px;
}
.back-to-shop {
display: inline-block;
color: #111;
text-decoration: none;
font-size: 16px;
font-weight: 500;
margin: 20px 0 0 30px;
position: relative;
top: -10px;
}
/* CART — QUANTITY CONTROL */
.quantity-control {
display: flex;
align-items: center;
width: fit-content;
height: 38px;
border: 1px solid #d8d8d8;
margin-top: 12px;
}
.quantity-control button {
width: 38px;
height: 38px;
padding: 0;
border: none;
background: white;
color: #111;
font-size: 18px;
font-weight: 400;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.quantity-control button:hover {
background: #f3f3f3;
}
.quantity-control span {
min-width: 34px;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #111;
}
.total-price {
font-size: 24px;
font-weight: 600;
}
.size-btn:disabled,
.size-btn:disabled:hover {
background: #f5f5f5;
color: #aaa;
border-color: #ddd;
cursor: not-allowed;
}
.cart-notification {
position: fixed;
top: 30px;
right: 30px;
z-index: 9999;
background: #111;
color: white;
padding: 16px 22px;
font-size: 14px;
letter-spacing: 1px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
animation: cartNotificationIn 0.25s ease;
}
.cart-notification span {
display: block;
margin-top: 6px;
font-size: 12px;
color: #ccc;
letter-spacing: 0.5px;
}
@keyframes cartNotificationIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* FINAL MOBILE RETURNS FIX */
@media (max-width: 768px) {
.returns-page {
padding: 30px 25px 40px !important;
}
.returns-page h1 {
font-size: 44px !important;
line-height: 1 !important;
letter-spacing: normal !important;
font-weight: 700 !important;
color: #d9d9d9 !important;
margin: 0 0 20px !important;
}
.returns-line {
margin-bottom: 25px !important;
}
.return-section {
gap: 25px !important;
padding-bottom: 20px !important;
margin-bottom: 20px !important;
}
}
/* PRINTED T-SHIRTS — MOBILE */
@media (max-width: 768px) {
.printed-page .section-title {
font-size: 34px !important;
white-space: nowrap !important;
line-height: 1 !important;
margin: 5px 25px 45px !important;
}
.printed-page .products-grid {
width: calc(100% - 50px) !important;
grid-template-columns: 1fr !important;
gap: 45px !important;
}
.printed-page .product-card {
width: 100% !important;
}
.printed-page .printed-product-name {
margin-top: 12px !important;
}
.printed-page .product-image {
width: 100% !important;
}
.printed-page .product-info {
padding-top: 18px !important;
}
.printed-page .product-info h3 {
font-size: 22px !important;
margin-bottom: 6px !important;
line-height: 1.15 !important;
}
.printed-page .product-info p {
font-size: 17px !important;
line-height: 1.3 !important;
margin-bottom: 8px !important;
}
.printed-page .printed-product-price {
font-size: 22px !important;
margin-top: 6px !important;
}
}
/* PRODUCT PAGE — MOBILE COMPACT */
@media (max-width: 768px) {
.single-product {
gap: 12px !important;
padding: 15px 20px 25px !important;
}
.single-product-image {
width: 100% !important;
}
.single-product-image img {
width: 100% !important;
max-width: 100% !important;
max-height: 420px !important;
object-fit: contain !important;
}
.single-product-info {
width: 100% !important;
padding-top: 0 !important;
}
.single-product-info h1 {
font-size: 28px !important;
line-height: 1.1 !important;
margin: 8px 0 10px !important;
}
.product-description {
font-size: 16px !important;
line-height: 1.35 !important;
margin-bottom: 15px !important;
}
.product-price {
font-size: 26px !important;
margin-bottom: 15px !important;
}
.sizes {
gap: 10px !important;
margin-bottom: 15px !important;
}
.sizes button {
width: 50px !important;
height: 50px !important;
}
.add-to-cart {
padding: 14px 30px !important;
font-size: 15px !important;
}
}
/* MOBILE PRODUCT — COMPACT INFO LAYOUT */
@media (max-width: 768px) {
.single-product-info {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 20px;
align-items: start;
}
.single-product-info h1 {
grid-column: 1 / 3;
font-size: 26px !important;
margin-bottom: 10px !important;
}
.product-description {
grid-column: 1 / 3;
margin-bottom: 15px !important;
}
.product-price {
grid-column: 1;
margin-bottom: 12px !important;
}
.sizes {
grid-column: 1;
margin-bottom: 0 !important;
}
.add-to-cart {
grid-column: 2;
grid-row: 4;
width: 300%;
height: 55px;
padding: 0;
align-self: start;
}
.size-guide {
grid-column: 1 / 3;
}
}
/* MOBILE PRODUCT — SMALLER ADD TO CART */
@media (max-width: 768px) {
.single-product-info .add-to-cart {
width: 130px !important;
height: 48px !important;
padding: 0 !important;
box-sizing: border-box !important;
align-self: start !important;
font-size: 13px !important;
}
}
/* =================================
MAN STORE — EDITORIAL HERO
================================= */
.man-page {
background: #f5f5f5;
padding: 0 35px 60px;
box-sizing: border-box;
}
.man-hero {
position: relative;
min-height: calc(100vh - 120px);
display: grid;
grid-template-columns: 58% 42%;
overflow: hidden;
}
/* LEFT SIDE */
.man-copy {
position: relative;
background: #f5f5f5;
padding: 45px 40px 120px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 105px;
z-index: 2;
}
.man-title {
margin: 0;
display: flex;
align-items: flex-end;
font-size: 125px;
line-height: 0.85;
font-weight: 500;
letter-spacing: -5px;
color: #111;
}
.man-word {
font-size: 125px;
line-height: 0.85;
font-weight: 700;
letter-spacing: -5px;
color: #d9d9d9;
}
.man-store-word {
font-size: 62px;
line-height: 1;
font-weight: 500;
letter-spacing: -2px;
color: #111;
margin-left: 18px;
margin-bottom: 2px;
}
.man-subtitle {
margin: 25px 0 0;
font-size: 12px;
line-height: 1.7;
font-weight: 500;
letter-spacing: 3px;
color: #333;
}
.man-line {
width: 35px;
height: 2px;
background: #d62828;
margin-top: 18px;
}
/* PHOTO */
.man-photo {
width: 100%;
height: 100%;
min-height: calc(100vh - 120px);
overflow: hidden;
}
.man-photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
}
/* BUTTONS */
.man-buttons {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 90px);
z-index: 5;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 88px;
width: 52%;
}
.man-button {
height: 58px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: #111;
color: #fff;
border: 1px solid #111;
text-decoration: none;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.8px;
transition: 0.25s ease;
}
.man-button:hover {
background: #fff;
color: #111;
}
/* =================================
MAN + WOMAN STORE — MOBILE
================================= */
@media (max-width: 768px) {
.man-page {
padding: 0;
}
.man-hero {
min-height: auto;
display: flex;
flex-direction: column;
}
/* TEXT AREA */
.man-copy {
min-height: 250px;
padding: 40px 25px 30px;
justify-content: center;
box-sizing: border-box;
}
.man-title {
font-size: 58px;
letter-spacing: -3px;
transform: none;
white-space: nowrap;
}
.man-word {
font-size: 58px;
line-height: 0.85;
letter-spacing: -3px;
}
.man-store-word {
font-size: 30px;
line-height: 1;
letter-spacing: -1px;
margin-left: 10px;
margin-bottom: 1px;
}
.man-subtitle {
margin-top: 20px;
font-size: 10px;
letter-spacing: 2.5px;
}
.man-line {
margin-top: 15px;
}
/* PHOTO */
.man-photo {
min-height: 500px;
height: 500px;
position: relative;
}
.man-photo img {
object-position: center center;
}
/* BUTTONS */
.man-buttons {
bottom: 25px;
width: 280px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 20px;
}
.man-button {
width: 280px;
height: 56px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
text-decoration: none;
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.8);
}
.man-button::after {
content: "→";
position: absolute;
right: 24px;
font-size: 25px;
font-weight: 400;
}
}
@media (max-width: 768px) {
.man-page .man-button {
font-size: 10px !important;
}
}
/* MAN STORE — BUTTONS SAME AS HOMEPAGE */
.man-category-button {
height: 58px !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
line-height: 1 !important;
}
/* MAN STORE — align with subtitle */
.man-title {
transform: translateX(-10px);
}
/* WOMAN STORE — 2 CATEGORY BUTTONS */
@media (min-width: 769px) {
.woman-page .man-buttons {
grid-template-columns: repeat(2, 1fr);
gap: 80px;
width: 34%;
}
}
/* MOBILE HOMEPAGE BUTTONS ONLY */
@media (max-width: 768px) {
.gender-buttons .gender-button {
position: relative;
background: rgba(0, 0, 0, 0.28) !important;
border: 1px solid rgba(255, 255, 255, 0.8) !important;
color: transparent !important;
}
/* WOMAN */
.gender-buttons .gender-button:first-child::before {
content: "WOMAN";
color: white;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.8px;
}
/* MAN */
.gender-buttons .gender-button:last-child::before {
content: "MAN";
color: white;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.8px;
}
/* ARROW */
.gender-buttons .gender-button::after {
content: "→";
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 25px;
font-weight: 300;
line-height: 1;
}
}
@media (max-width: 768px) {
.gender-button {
padding-left: 25px;
}
}
@media (max-width: 768px) {
.woman-page .man-button {
justify-content: flex-start !important;
padding-left: 30px !important;
}
}
@media (max-width: 768px) {
.man-page .man-button {
justify-content: flex-start !important;
padding-left: 30px !important;
}
}
/* =========================
CONTACTS PAGE
========================= */
.contacts-page {
max-width: 1200px;
margin: 0 auto;
padding: 65px 70px 120px;
box-sizing: border-box;
}
/* TOP INTRO */
.contacts-small-title {
font-size: 14px;
font-weight: 500;
letter-spacing: 4px;
line-height: 1.6;
color: #222;
}
.contacts-red-line {
width: 60px;
height: 3px;
background: #d62828;
margin-top: 18px;
}
/* MAIN TITLE */
.contacts-title {
margin: 35px 0 75px;
font-size: 125px;
line-height: 0.85;
font-weight: 700;
letter-spacing: -5px;
color: #d9d9d9;
}
/* CONTACT LIST */
.contacts-list {
width: 100%;
}
/* CONTACT ROW */
.contact-item {
display: grid;
grid-template-columns: 70px 1fr 50px;
column-gap: 25px;
align-items: start;
padding: 35px 0 45px;
border-bottom: 1px solid #e5e5e5;
color: #111;
text-decoration: none;
transition: opacity 0.2s ease;
}
.contact-item:first-child {
border-top: 1px solid #e5e5e5;
}
.contact-item:hover {
opacity: 0.65;
}
/* ICON */
.contact-icon {
width: 42px;
height: 42px;
color: #d62828;
}
.contact-icon svg {
width: 100%;
height: 100%;
}
/* CONTACT NAME */
.contact-main {
font-size: 23px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 14px;
}
/* DESCRIPTION */
.contact-description {
font-size: 14px;
line-height: 1.8;
letter-spacing: 2px;
color: #555;
}
/* ARROW */
.contact-arrow {
font-size: 32px;
font-weight: 300;
line-height: 1;
text-align: right;
}
/* =========================
MOBILE
========================= */
@media (max-width: 768px) {
.contacts-page {
padding: 55px 28px 90px;
}
.contacts-small-title {
font-size: 12px;
letter-spacing: 3px;
line-height: 1.7;
transform: translateY(-20px);
}
.contacts-title {
margin: 35px 0 55px;
font-size: 78px;
line-height: 0.85;
letter-spacing: -5px;
}
.contact-item {
grid-template-columns: 45px 1fr 30px;
column-gap: 15px;
padding: 30px 0 35px;
}
.contact-icon {
width: 32px;
height: 32px;
}
.contact-main {
font-size: 16px;
letter-spacing: 0.8px;
margin-bottom: 12px;
}
.contact-description {
font-size: 10px;
line-height: 1.8;
letter-spacing: 1.5px;
}
.contact-arrow {
font-size: 25px;
transform: translateY(45px);
}
}
@media (max-width: 768px) {
@media (max-width: 768px) {
.contacts-page h1 {
font-size: 44px !important;
line-height: 1 !important;
letter-spacing: normal !important;
font-weight: 700 !important;
color: #d9d9d9 !important;
margin: 0 0 20px !important;
}
}
}
@media (max-width: 768px) {
.contact-item {
position: relative;
}
.contact-arrow {
position: absolute !important;
right: 0 !important;
top: 20px !important;
margin: 0 !important;
}
}
@media (max-width: 768px) {
.return-info h2 {
font-size: 20px;
}
.return-info p {
font-size: 14px;
}
.returns-contact h2 {
font-size: 20px;
}
.returns-contact a {
font-size: 16px;
}
}
@media (max-width: 768px) {
.contacts-red-line {
display: none !important;
}
}
/* =========================
CONTACTS — DESKTOP
========================= */
@media (min-width: 769px) {
/* Убираем верхнюю надпись */
.contacts-small-title,
.contacts-red-line {
display: none !important;
}
/* Заголовок как RETURNS */
.contacts-page {
max-width: 900px;
padding: 0 60px 120px;
}
.contacts-title {
margin: 35px 35px 35px !important;
font-size: 125px !important;
line-height: 0.85 !important;
letter-spacing: -5px !important;
transform: translateY(40px);
}
/* Делаем контактные блоки компактнее */
.contact-item {
grid-template-columns: 50px 1fr 35px;
column-gap: 20px;
padding: 25px 0 30px;
}
.contact-icon {
width: 32px;
height: 32px;
}
.contact-main {
font-size: 18px;
letter-spacing: 0.8px;
margin-bottom: 10px;
}
.contact-description {
font-size: 12px;
line-height: 1.7;
letter-spacing: 1.5px;
}
.contact-arrow {
font-size: 26px;
}
.contacts-list {
padding-top: 95px !important;
}
}
/* LEGAL FOOTER — HOMEPAGE */
.legal-footer {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
padding: 45px 20px 22px;
background: #f5f5f5;
z-index: 10;
}
.legal-footer a {
font-size: 12px;
font-weight: 400;
color: #777;
text-decoration: none;
transition: opacity 0.2s ease;
}
.legal-footer a:hover {
opacity: 0.6;
}
/* LEGAL LINKS — MOBILE */
@media (max-width: 768px) {
.legal-footer {
margin-top: -40px;
padding: 0 20px 24px;
background: transparent;
position: relative;
z-index: 20;
}
.legal-footer a {
color: #000;
font-size: 12px;
}
}
/* =========================
LEGAL PAGES
========================= */
.legal-page {
max-width: 900px;
margin: 0 auto;
padding: 0 60px 100px;
}
.legal-page h1 {
font-size: 90px;
line-height: 0.9;
font-weight: 700;
letter-spacing: -4px;
color: #d9d9d9;
margin: 55px 0 35px;
}
.legal-line {
width: 100%;
height: 1px;
background: #e5e5e5;
margin-bottom: 25px;
}
.legal-updated {
font-size: 11px;
color: #999;
margin-bottom: 55px;
}
.legal-section {
max-width: 700px;
margin-bottom: 42px;
}
.legal-section h2 {
font-size: 22px;
font-weight: 600;
margin: 0 0 12px;
}
.legal-section p,
.legal-section li {
font-size: 15px;
line-height: 1.7;
color: #444;
}
.legal-section p {
margin: 0 0 12px;
}
.legal-section ul {
margin: 10px 0 0;
padding-left: 20px;
}
.legal-section a {
color: #111;
text-decoration: none;
}
.legal-section a:hover {
text-decoration: underline;
}
.legal-contact {
margin-top: 55px;
}
@media (max-width: 768px) {
.legal-page {
padding: 0 25px 70px;
}
.legal-page h1 {
font-size: 48px;
letter-spacing: -2px;
margin: 35px 0 25px;
}
.legal-updated {
margin-bottom: 40px;
}
.legal-section {
margin-bottom: 35px;
}
.legal-section h2 {
font-size: 19px;
}
.legal-section p,
.legal-section li {
font-size: 14px;
line-height: 1.65;
}
}
/* =========================================
HOMEPAGE — DESKTOP BUTTONS
SAME STYLE AS MOBILE
========================================= */
@media (min-width: 769px) {
.gender-buttons .gender-button {
position: relative;
width: 300px;
height: 64px;
background: rgba(0, 0, 0, 0.28) !important;
border: 1px solid rgba(255, 255, 255, 0.8) !important;
color: transparent !important;
box-shadow: none !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 0 !important;
}
/* WOMAN */
.gender-buttons .gender-button:first-child::before {
content: "WOMAN";
color: white;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
}
/* MAN */
.gender-buttons .gender-button:last-child::before {
content: "MAN";
color: white;
font-size: 15px;
font-weight: 600;
letter-spacing: 1px;
}
/* ARROW */
.gender-buttons .gender-button::after {
content: "→";
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 27px;
font-weight: 300;
line-height: 1;
}
/* HOVER */
.gender-buttons .gender-button:hover {
background: rgba(0, 0, 0, 0.42) !important;
}
}
/* =========================
MOBILE — MAN PRODUCT PAGE ONLY
========================= */
@media (max-width: 768px) {
body.man-product .single-product {
display: grid;
grid-template-columns: 1fr;
gap: 0;
padding: 20px 20px 30px;
}
body.man-product .single-product-image {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 18px;
}
body.man-product .single-product-image img {
width: 100%;
max-width: 100%;
max-height: 48vh;
object-fit: contain;
}
body.man-product .single-product-info {
padding-top: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
body.man-product .product-title {
font-size: 30px;
line-height: 1.05;
margin: 0 0 10px;
}
body.man-product .product-description {
font-size: 15px;
line-height: 1.35;
margin: 0 0 14px;
}
body.man-product .product-price {
font-size: 27px;
line-height: 1;
margin: 0 0 18px;
}
body.man-product .sizes {
display: flex;
flex-wrap: nowrap;
gap: 7px;
width: 100%;
margin: 0;
}
body.man-product .sizes .size-btn {
width: 48px;
height: 48px;
min-width: 48px;
padding: 0;
font-size: 14px;
flex: 0 0 48px;
}
body.man-product .single-product-info .add-to-cart {
display: block;
width: 100%;
max-width: 100%;
margin: 14px 0 0;
height: 48px;
flex: none;
}
}
@media (max-width: 768px) {
#man-product-page {
gap: 0 !important;
}
#man-product-page .single-product-image {
margin-bottom: 0 !important;
}
#man-product-page .single-product-info {
margin-top: 8px !important;
padding-top: 0 !important;
}
}
/* MAN STORE — 2 CATEGORY BUTTONS, SAME AS WOMAN STORE */
@media (min-width: 769px) {
.man-page .man-buttons {
grid-template-columns: repeat(2, 1fr);
gap: 80px;
width: 34%;
}
}
/* =========================
RETURNS & DELIVERY — RESPONSIVE LAYOUT
========================= */
.returns-page {
max-width: 1180px;
}
.returns-page > .section-title {
font-size: clamp(48px, 6vw, 82px);
letter-spacing: -3px;
line-height: .92;
margin: 8px 0 16px;
}
.returns-columns {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 42px;
align-items: start;
}
.returns-column + .returns-column {
border-left: 1px solid #e5e5e5;
padding-left: 42px;
}
.returns-column-title {
font-size: 24px;
font-weight: 600;
margin: 0 0 18px;
text-transform: uppercase;
letter-spacing: .02em;
}
.returns-column .return-section {
gap: 18px;
margin-bottom: 12px;
padding-bottom: 12px;
}
.returns-column .return-info {
max-width: none;
}
.returns-column .return-info h3 {
font-size: 17px;
margin: 0 0 5px;
font-weight: 600;
}
.returns-column .return-info p,
.delivery-intro {
font-size: 13px;
line-height: 1.4;
color: #444;
margin: 0;
}
.delivery-price {
font-size: clamp(38px, 4vw, 52px);
line-height: 1;
font-weight: 600;
letter-spacing: -2px;
color: #d62828;
margin: 0 0 8px;
}
.delivery-intro {
margin-bottom: 18px;
}
@media (max-width: 768px) {
.returns-page {
max-width: 100%;
padding: 30px 25px 40px !important;
}
.returns-page > .section-title {
font-size: 40px !important;
line-height: 1.05 !important;
letter-spacing: -1.5px !important;
white-space: normal;
margin: 0 0 20px !important;
}
.returns-columns {
grid-template-columns: 1fr;
gap: 32px;
}
.returns-column + .returns-column {
border-left: 0;
border-top: 1px solid #e5e5e5;
padding-left: 0;
padding-top: 30px;
}
.returns-column-title {
font-size: 24px;
margin-bottom: 22px;
}
.returns-column .return-section {
gap: 25px !important;
padding-bottom: 20px !important;
margin-bottom: 20px !important;
}
.delivery-price {
font-size: 42px;
letter-spacing: -1.5px;
}
}
/* CONTACTS TITLE — MATCH RETURNS & DELIVERY ON DESKTOP */
@media (min-width: 769px) {
.contacts-page {
max-width: 1180px;
padding: 0 60px 50px;
}
.contacts-title {
font-size: clamp(48px, 6vw, 82px) !important;
line-height: .92 !important;
letter-spacing: -3px !important;
margin: 8px 0 16px !important;
transform: none !important;
}
}
/* YARKO TYPOGRAPHY REFINEMENT — MATCH PAGE TITLES + IMPROVE READABILITY */
@media (min-width: 769px) {
.returns-page > .section-title,
.contacts-page .contacts-title {
font-size: clamp(48px, 6vw, 82px) !important;
line-height: .92 !important;
letter-spacing: -3px !important;
font-weight: 700 !important;
color: #d9d9d9 !important;
transform: none !important;
}
.contacts-page .contacts-title {
margin: 8px 35px 16px !important;
}
.returns-page > .section-title {
margin: 8px 0 16px !important;
}
.returns-column-title {
font-size: 26px !important;
}
.returns-column .return-info h3 {
font-size: 19px !important;
}
.returns-column .return-info p,
.returns-page .delivery-intro {
font-size: 15px !important;
line-height: 1.5 !important;
}
.returns-page .return-number {
font-size: 14px !important;
}
.returns-contact h2 {
font-size: 21px !important;
}
.returns-contact a {
font-size: 17px !important;
}
}
@media (max-width: 768px) {
.returns-column .return-info h3 {
font-size: 18px !important;
}
.returns-column .return-info p,
.returns-page .delivery-intro {
font-size: 15px !important;
line-height: 1.5 !important;
}
}
/* YARKO DESKTOP PAGE SPACING — VERSION 6 */
@media (min-width: 769px) {
/* Give both informational pages the same breathing room below the header. */
.returns-page,
.contacts-page {
padding-top: 34px !important;
}
.returns-page > .section-title,
.contacts-page .contacts-title {
margin-top: 0 !important;
}
/* Keep the return contact visible while preserving the added top space. */
.returns-column .return-section {
margin-bottom: 9px !important;
padding-bottom: 9px !important;
}
}
/* YARKO DESKTOP REBALANCE — VERSION 7
Larger, more confident information pages; preserve mobile styling. */
@media (min-width: 769px) {
/* CONTACTS: use the page width and remove the oversized empty gap. */
.contacts-page {
max-width: 1180px !important;
padding: 34px 60px 70px !important;
margin: 0 auto !important;
}
.contacts-page .contacts-title {
margin: 0 0 28px !important;
}
.contacts-page .contacts-list {
width: 100% !important;
max-width: 980px !important;
margin: 0 auto !important;
padding-top: 28px !important;
}
.contacts-page .contact-item {
grid-template-columns: 54px minmax(0, 1fr) 44px !important;
column-gap: 26px !important;
align-items: start !important;
padding: 38px 8px 42px !important;
min-height: 170px;
}
.contacts-page .contact-icon {
width: 36px !important;
height: 36px !important;
}
.contacts-page .contact-main {
font-size: 24px !important;
line-height: 1.25 !important;
letter-spacing: .7px !important;
margin-bottom: 15px !important;
}
.contacts-page .contact-description {
font-size: 15px !important;
line-height: 1.75 !important;
letter-spacing: 1.6px !important;
color: #555 !important;
}
.contacts-page .contact-arrow {
font-size: 30px !important;
align-self: start !important;
padding-top: 2px;
}
.contacts-page .copy-email-btn {
font-size: 10px !important;
padding: 6px 9px !important;
}
/* RETURNS: improve readability without changing the page structure. */
.returns-page > .section-title {
margin-bottom: 28px !important;
}
.returns-column-title {
font-size: 27px !important;
margin-bottom: 24px !important;
}
.returns-column .return-info h3 {
font-size: 21px !important;
line-height: 1.3 !important;
}
.returns-column .return-info p,
.returns-page .delivery-intro {
font-size: 16px !important;
line-height: 1.6 !important;
}
.returns-page .return-number {
font-size: 14px !important;
}
.returns-contact h2 {
font-size: 22px !important;
}
.returns-contact a {
font-size: 18px !important;
}
}
/* YARKO CONTACTS DESKTOP — VERSION 8: balanced scale and alignment */
@media (min-width: 769px) {
.contacts-page {
max-width: 1120px !important;
padding: 42px 60px 90px !important;
margin: 0 auto !important;
}
/* Title and contact rows share one centered left edge. */
.contacts-page .contacts-title {
width: 860px !important;
max-width: 100% !important;
margin: 0 auto 24px !important;
padding: 0 !important;
text-align: left !important;
}
.contacts-page .contacts-list {
width: 860px !important;
max-width: 100% !important;
margin: 0 auto !important;
padding-top: 8px !important;
}
/* More balanced rows: smaller labels and arrows, comfortable whitespace. */
.contacts-page .contact-item {
grid-template-columns: 42px minmax(0, 1fr) 34px !important;
column-gap: 22px !important;
align-items: start !important;
min-height: 0 !important;
padding: 30px 0 34px !important;
}
.contacts-page .contact-icon {
width: 30px !important;
height: 30px !important;
margin-top: 1px !important;
}
.contacts-page .contact-main {
font-size: 20px !important;
line-height: 1.3 !important;
letter-spacing: .45px !important;
margin-bottom: 10px !important;
}
.contacts-page .contact-description {
font-size: 13px !important;
line-height: 1.7 !important;
letter-spacing: 1.35px !important;
}
.contacts-page .contact-arrow {
font-size: 24px !important;
line-height: 1.2 !important;
padding-top: 0 !important;
}
.contacts-page .copy-email-btn {
font-size: 8px !important;
padding: 4px 6px !important;
letter-spacing: .7px !important;
}
}
/* YARKO CONTACTS DESKTOP — VERSION 9: vertical composition */
@media (min-width: 769px) {
.contacts-page {
/* Keep the content visually centered in the space below the header. */
padding-top: 62px !important;
padding-bottom: 100px !important;
}
.contacts-page .contacts-title {
/* Title sits halfway between the top navigation and contact rows. */
margin-top: 18px !important;
margin-bottom: 76px !important;
}
.contacts-page .contacts-list {
padding-top: 0 !important;
transform: translateY(18px);
}
.contacts-page .contact-item {
/* Center each icon, text group and arrow vertically within its row. */
align-items: center !important;
padding-top: 34px !important;
padding-bottom: 38px !important;
}
.contacts-page .contact-icon,
.contacts-page .contact-arrow {
align-self: center !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
}