/* ========================================================= HEAD & TAIL — GLOBAL STYLESHEET Design system + layout for the pet-shop site. Light mode is default; ".dark-mode" on switches to the dark theme. ========================================================= */ /* ========================================================= 1. RESET ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, picture, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } /* ========================================================= 2. DESIGN TOKENS ========================================================= */ /* ========================================================= 3. BASE ========================================================= */ body { font-family: var(--font-body); background-color: var(--color-background); color: var(--color-text); line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased; transition: background-color var(--dur-med) var(--ease-standard), color var(--dur-med) var(--ease-standard); overflow-x: hidden; } body.scroll-locked, body.menu-open { overflow: hidden !important; touch-action: none; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-text-strong); line-height: 1.14; font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: clamp(2.4rem, 4.5vw, 4.2rem); } h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); } h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); } h4 { font-size: 1.1rem; } p { color: var(--color-muted); max-width: 62ch; } .container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--space-md); } section { padding-block: var(--space-2xl); } .section-head { max-width: 640px; margin-bottom: var(--space-lg); } .section-head--center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2xs); } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--color-primary); border-radius: var(--radius-pill); } .section-subhead { margin-top: var(--space-2xs); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } /* ========================================================= 4. BUTTONS ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); padding: 0.8rem 1.5rem; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.92rem; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .btn i { font-size: 0.85em; transition: transform var(--dur-fast) var(--ease-standard); } .btn:hover i { transform: translateX(3px); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--color-primary); color: var(--color-primary-ink); } .btn-primary:hover { background: var(--color-primary-strong); } .btn-outline { background: transparent; color: var(--color-text-strong); border: 1.5px solid var(--color-border); } .btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); } .btn-block { width: 100%; } /* ========================================================= 5. PAGE LOADER ========================================================= */ .page-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--color-background); transition: opacity var(--dur-med) ease, visibility var(--dur-med) ease; } .page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader-mark { text-align: center; } .loader-logo { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--color-text-strong); letter-spacing: 0.02em; } .loader-logo span { color: var(--color-primary); } .loader-line { width: 140px; height: 2px; margin: var(--space-md) auto 0; background: var(--color-primary); border-radius: var(--radius-pill); transform-origin: left center; transform: scaleX(0); } .site-header { position: sticky; top: 0; left: 0; width: 100%; z-index: 1000; background: var(--color-background); border-bottom: 1px solid transparent; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .site-header.scrolled { border-bottom-color: var(--color-border); box-shadow: var(--shadow-tight); } /* ========================================================= NAVBAR ========================================================= */ .navbar { width: 100%; max-width: var(--container-w); height: var(--header-h); margin: 0 auto; padding-inline: var(--space-md); display: flex; align-items: center; gap: 20px; min-width: 0; } /* ========================================================= LOGO ========================================================= */ .navbar-brand { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; min-width: max-content; white-space: nowrap; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--color-text-strong); line-height: 1; text-decoration: none; } .navbar-brand i, .navbar-brand .brand-amp { color: var(--color-primary); } /* ========================================================= DESKTOP NAVIGATION ========================================================= */ .navbar-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; } .navbar-nav-list { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 30px); white-space: nowrap; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; flex: 0 0 auto; } .nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 2px; color: var(--color-text); font-size: 0.95rem; font-weight: 500; white-space: nowrap; background: transparent; border: 0; text-decoration: none; cursor: pointer; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--color-primary); border-radius: 999px; transition: width 0.25s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link:hover, .nav-link.active { color: var(--color-text-strong); } .dropdown-toggle i { font-size: 0.65rem; transition: transform 0.25s ease; } .dropdown.open .dropdown-toggle i { transform: rotate(180deg); } /* ========================================================= DESKTOP DROPDOWN ========================================================= */ .dropdown-menu { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 210px; margin: 0; padding: 8px; list-style: none; transform: translate(-50%, 8px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 100; } .dropdown:hover .dropdown-menu, .dropdown.open .dropdown-menu, .dropdown:focus-within .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .dropdown-menu a { display: block; padding: 10px 14px; color: var(--color-text); font-size: 0.9rem; border-radius: var(--radius-sm); text-decoration: none; } .dropdown-menu a:hover, .dropdown-menu a.active { color: var(--color-primary); background: var(--color-surface-2); } /* ========================================================= NAVBAR ACTIONS ========================================================= */ .navbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex: 0 0 auto; min-width: max-content; } /* ========================================================= ICON BUTTON ========================================================= */ .icon-btn { position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 42px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text); font-size: 1rem; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .icon-btn:hover { background: var(--color-surface-2); color: var(--color-primary); } /* ========================================================= CART ========================================================= */ .cart-btn { background: transparent; border: 0; color: var(--color-text-strong); } .cart-btn:hover { background: transparent; color: var(--color-primary); } .cart-count { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-primary-ink); border-radius: var(--radius-pill); font-size: 0.65rem; font-weight: 700; line-height: 1; } /* ========================================================= HAMBURGER DESKTOP HIDDEN ========================================================= */ .menu-toggle { display: none; width: 42px; height: 42px; padding: 0; align-items: center; justify-content: center; flex: 0 0 42px; border: 0; border-radius: 50%; background: transparent; color: var(--color-primary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, color 0.2s ease; } .menu-toggle:hover { background: var(--color-surface-2); } /* ========================================================= HAMBURGER BARS ========================================================= */ .menu-toggle-bars { position: relative; display: block; width: 20px; height: 15px; } .menu-toggle-bars span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-primary); border-radius: 999px; transition: top 0.3s ease, transform 0.3s ease, opacity 0.2s ease; } .menu-toggle-bars span:nth-child(1) { top: 0; } .menu-toggle-bars span:nth-child(2) { top: 6px; } .menu-toggle-bars span:nth-child(3) { top: 12px; } /* Hamburger → X */ .menu-toggle.open .menu-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); } .menu-toggle.open .menu-toggle-bars span:nth-child(2) { opacity: 0; } .menu-toggle.open .menu-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 2000; display: flex; flex-direction: column; background: var(--color-background); transform: translateX(100%); visibility: hidden; pointer-events: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; transition: transform 0.35s ease, visibility 0.35s ease; } .mobile-menu.open { transform: translateX(0); visibility: visible; pointer-events: auto; } .mobile-menu-header { width: 100%; min-height: var(--header-h); padding-inline: var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; border-bottom: 1px solid var(--color-border); } .mobile-menu-actions { display: flex; align-items: center; flex: 0 0 auto; } .mobile-menu-close { width: 42px; height: 42px; color: var(--color-text-strong); font-size: 1.15rem; } .mobile-menu-close:hover { color: var(--color-primary); background: var(--color-surface-2); } .mobile-nav { width: 100%; flex: 1 1 auto; padding: 10px var(--space-md) 20px; overflow: visible; } .mobile-nav-item { width: 100%; margin: 0; padding: 0; border-bottom: 1px solid var(--color-border); } .mobile-nav-item > a, .mobile-dropdown-trigger { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--color-text-strong); background: transparent; border: 0; text-align: start; text-decoration: none; cursor: pointer; } .mobile-nav-item > a:hover, .mobile-dropdown-trigger:hover { color: var(--color-primary); } .mobile-dropdown-panel { width: 100%; max-height: 0; margin: 0; padding: 0; overflow: hidden; list-style: none; transition: max-height 0.35s ease; } .mobile-dropdown.open .mobile-dropdown-panel { max-height: 400px; } .mobile-dropdown-trigger i { font-size: 0.7rem; transition: transform 0.25s ease; } .mobile-dropdown.open .mobile-dropdown-trigger i { transform: rotate(180deg); } .mobile-dropdown-panel a { display: block; padding: 9px 0 9px 16px; color: var(--color-muted); font-size: 0.95rem; text-decoration: none; border-left: 2px solid var(--color-border); transition: color 0.2s ease, border-color 0.2s ease; } .mobile-dropdown-panel a:hover, .mobile-dropdown-panel a.active { color: var(--color-primary); border-left-color: var(--color-primary); } .mobile-menu-footer { width: 100%; min-height: 70px; padding: 12px var(--space-md); display: flex; align-items: center; gap: 6px; flex-shrink: 0; border-top: 1px solid var(--color-border); background: var(--color-background); } /* LEFT = THEME + DIRECTION RIGHT = CART + ACCOUNT */ .mobile-menu-footer .cart-btn { margin-inline-start: auto; } .mobile-menu-footer .icon-btn { width: 42px; height: 42px; flex: 0 0 42px; } /* ========================================================= BODY LOCK ========================================================= */ body.menu-open { overflow: hidden; } /* ========================================================= 8. HERO ========================================================= */ .hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 5vw, 5rem); } /* ========================================================= HERO CONTAINER ========================================================= */ .hero .container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); } /* ========================================================= HERO CONTENT ========================================================= */ .hero-content { position: relative; min-width: 0; width: 100%; z-index: 2; } .hero-content h1 { margin-block: var(--space-xs) var(--space-sm); font-size: clamp(2.3rem, 4.5vw, 5rem); line-height: 1.05; } .hero-content > p:not(.eyebrow) { width: 100%; max-width: 46ch; font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.7; } /* ========================================================= HERO ACTIONS ========================================================= */ .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); } /* ========================================================= HERO STATS ========================================================= */ .hero-stats { display: flex; align-items: flex-start; gap: clamp(1rem, 3vw, var(--space-lg)); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-border); } .hero-stat { min-width: 0; } .hero-stat b { display: block; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.1; color: var(--color-text-strong); } .hero-stat span { display: block; margin-top: 4px; font-size: clamp(0.68rem, 1vw, 0.82rem); color: var(--color-muted); } /* ========================================================= HERO VISUAL ========================================================= */ .hero-visual { position: relative; display: grid; place-items: center; width: 100%; min-width: 0; z-index: 1; } /* ========================================================= HERO IMAGE ========================================================= */ .hero-image-wrap { position: relative; width: 100%; /* Image automatically scales with available column width. */ max-width: clamp(350px, 42vw, 580px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); z-index: 1; } .hero-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ========================================================= HERO DECORATIVE RING ========================================================= */ .hero-ring { position: absolute; top: -8%; left: -10%; width: clamp(120px, 16vw, 220px); height: clamp(120px, 16vw, 220px); border: 1px solid var(--color-border); border-radius: 50%; z-index: 0; } /* ========================================================= HERO BADGES ========================================================= */ .hero-badge { position: absolute; display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-tight); z-index: 3; } .hero-badge--top { top: 8%; right: -4%; } .hero-badge--bottom { bottom: 7%; left: -6%; } .hero-badge i { font-size: 1.1rem; color: var(--color-primary); } .hero-badge b { display: block; font-size: 0.9rem; color: var(--color-text-strong); } .hero-badge span { display: block; font-size: 0.75rem; color: var(--color-muted); } /* ========================================================= 9. SHOP BY PET ========================================================= */ .pet-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .pet-category { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; } .pet-category img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); z-index: -2; } .pet-category::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(8, 10, 8, 0.85) 0%, rgba(8, 10, 8, 0.05) 60% ); z-index: -1; } .pet-category:hover img { transform: scale(1.06); } .pet-category-body { padding: var(--space-md); color: #fff; } .pet-category-body span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .pet-category-body h3 { color: #fff; margin-top: 2px; } .pet-category-arrow { position: absolute; top: var(--space-md); right: var(--space-md); width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .pet-category:hover .pet-category-arrow { background: var(--color-primary); color: var(--color-primary-ink); transform: scale(1.08); } /* ========================================================= POPULAR PRODUCTS ========================================================= */ .products-section { padding: var(--space-xl) 0; } .section-flex-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 32px; } .section-flex-head .section-head { margin: 0; } .section-flex-head .btn { flex-shrink: 0; } /* ========================================================= PRODUCT GRID ========================================================= */ .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } /* ========================================================= PRODUCT CARD ========================================================= */ .product-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--color-surface, #f8f6f0); border: 1px solid rgba(120, 90, 40, 0.15); border-radius: 22px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .product-card:hover { transform: translateY(-5px); border-color: rgba(180, 115, 35, 0.45); box-shadow: 0 16px 35px rgba(30, 25, 15, 0.10); } /* ========================================================= PRODUCT IMAGE ========================================================= */ .product-media { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-surface-2, #eee9df); } .product-media a { display: block; width: 100%; height: 100%; } .product-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(.2,.65,.3,1); } .product-card:hover .product-media img { transform: scale(1.055); } /* ========================================================= PRODUCT TAG ========================================================= */ .product-tag { position: absolute; z-index: 3; top: 14px; left: 14px; display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--color-primary, #bd741e); color: var(--color-primary-ink, #fff); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12); } /* ========================================================= PRODUCT BODY ========================================================= */ .product-body { display: flex; flex-direction: column; padding: 18px 18px 17px; min-height: 156px; } /* ========================================================= CATEGORY ========================================================= */ .product-category { display: block; margin-bottom: 5px; color: var(--color-muted, #777); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } /* ========================================================= PRODUCT TITLE ========================================================= */ .product-body h4 { margin: 0; font-size: 1rem; line-height: 1.35; } .product-body h4 a { color: var(--color-text-strong, #201c17); text-decoration: none; transition: color 0.2s ease; } .product-body h4 a:hover { color: var(--color-primary, #bd741e); } /* ========================================================= RATING ========================================================= */ .product-rating { display: flex; align-items: center; gap: 3px; margin-top: 8px; color: var(--color-primary, #bd741e); font-size: 0.72rem; } .product-rating span { margin-left: 5px; color: var(--color-muted, #777); font-size: 0.72rem; } /* ========================================================= PRODUCT FOOTER ========================================================= */ .product-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 15px; } /* ========================================================= PRICE ========================================================= */ .product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; color: var(--color-text-strong, #201c17); font-family: var(--font-display, Georgia, serif); font-size: 1.05rem; font-weight: 700; } .product-price del { color: var(--color-muted, #888); font-family: inherit; font-size: 0.72rem; font-weight: 400; } /* ========================================================= QUICK ADD BUTTON ========================================================= */ .quick-add { position: relative; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #ebe5d2; color: var(--color-text-strong, #201c17); cursor: pointer; font-size: 0.85rem; transition: width 0.25s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .quick-add:hover { background: var(--color-primary, #bd741e); color: var(--color-primary-ink, #fff); transform: translateY(-1px); } .quick-add:active { transform: scale(0.95); } /* ========================================================= ACTIVE QUANTITY CONTROL ========================================================= */ .quick-add.quantity-active { width: auto; min-width: 122px; height: 40px; padding: 0 5px; gap: 2px; background: var(--color-text-strong, #201c17); color: #fff; cursor: default; } .quick-add.quantity-active:hover { transform: none; background: var(--color-text-strong, #201c17); } /* ========================================================= QUANTITY BUTTONS ========================================================= */ .quick-add .quantity-minus, .quick-add .quantity-plus, .quick-add .quantity-delete { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: inherit; cursor: pointer; font-size: 0.78rem; transition: background 0.18s ease, color 0.18s ease; } .quick-add .quantity-minus:hover, .quick-add .quantity-plus:hover { background: rgba(255, 255, 255, 0.16); } /* ========================================================= NUMBER ========================================================= */ .quick-add .quantity-number { min-width: 25px; text-align: center; color: #fff; font-size: 0.82rem; font-weight: 700; } /* ========================================================= DELETE ========================================================= */ .quick-add .quantity-delete { margin-left: 2px; color: #ffb5a8; } .quick-add .quantity-delete:hover { background: #d84c3d; color: #fff; } /* ========================================================= 12. NEW ARRIVALS ========================================================= */ .arrivals-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-md); } .arrival-feature { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; isolation: isolate; } .arrival-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .arrival-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba(8, 10, 8, 0.82), rgba(8, 10, 8, 0) ); z-index: -1; } .arrival-feature-body { padding: var(--space-md); color: #fff; } .arrival-feature-body .product-tag { position: static; display: inline-block; margin-bottom: var(--space-xs); } .arrival-feature-body h3 { color: #fff; font-size: 1.5rem; } .arrival-feature-body p { color: rgba(255, 255, 255, 0.8); margin-top: 4px; } .arrival-side { display: flex; flex-direction: column; gap: var(--space-sm); } .arrival-card { display: flex; align-items: center; gap: var(--space-xs); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-xs); flex: 1; transition: border-color var(--dur-fast) var(--ease-standard); } .arrival-card:hover { border-color: var(--color-primary); } .arrival-card-media { width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--color-surface-2); } .arrival-card-media img { width: 100%; height: 100%; object-fit: cover; } .arrival-card-body span { font-size: 0.7rem; color: var(--color-primary); text-transform: uppercase; } .arrival-cta { display: flex; align-items: center; justify-content: space-between; background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-md); gap: var(--space-sm); } .arrival-cta p { margin: 0; font-size: 0.88rem; } /* ========================================================= 13. QUICK CARE TIPS ========================================================= */ .tips-section { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .tips-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .tip-card { display: flex; flex-direction: column; gap: var(--space-xs); } .tip-card-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .tip-card p { font-size: 0.88rem; margin: 0; } /* ========================================================= 14. GROOMING / PET CARE ========================================================= */ .split-section .container { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); } .split-media { position: relative; width: 100%; max-width: 430px; margin-inline: auto; } .split-media img { display: block; width: 100%; max-height: 500px; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: var(--radius-lg); } .split-media-note { position: absolute; bottom: 5%; right: -5%; background: var(--color-primary); color: var(--color-primary-ink); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-md); max-width: 175px; box-shadow: var(--shadow-soft); } .split-media-note i { font-size: 1.1rem; margin-bottom: 4px; } .split-media-note p { color: var(--color-primary-ink); font-size: 0.8rem; margin: 0; line-height: 1.3; } .split-content { width: 100%; max-width: 600px; } .split-content > p:not(.eyebrow) { margin-top: var(--space-sm); max-width: 55ch; } .service-list { display: flex; flex-direction: column; width: 100%; margin-top: var(--space-lg); } .service-row { display: flex; align-items: center; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-border); } .service-row:first-child { border-top: 1px solid var(--color-border); } .service-row > i:first-child { font-size: 1rem; color: var(--color-primary); width: 24px; flex: 0 0 24px; } .service-row > i:last-child { font-size: 0.75rem; color: var(--color-muted); flex: 0 0 auto; } .service-row a { flex: 1; font-weight: 600; color: var(--color-text-strong); } .service-row a:hover { color: var(--color-primary); } .split-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); } /* ========================================================= 15. CARE TIPS / EDITORIAL BLOG ========================================================= */ .editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .editorial-card { display: flex; flex-direction: column; } .editorial-media { aspect-ratio: 5 / 4; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-xs); } .editorial-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-standard); } .editorial-card:hover .editorial-media img { transform: scale(1.04); } .editorial-meta { display: flex; align-items: center; gap: var(--space-2xs); font-size: 0.75rem; color: var(--color-primary); margin-bottom: 4px; } .editorial-meta span { color: var(--color-muted); } .editorial-card h3 { font-size: 1.2rem; } .editorial-read { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-xs); font-weight: 600; font-size: 0.88rem; color: var(--color-text-strong); } /* ========================================================= 16. CUSTOMER STORIES ========================================================= */ .stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .story-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); display: flex; flex-direction: column; justify-content: space-between; } .story-rating { color: var(--color-primary); font-size: 0.85rem; margin-bottom: var(--space-xs); } .story-quote { font-size: 0.92rem; font-style: italic; color: var(--color-text); margin-bottom: var(--space-md); } .story-person { display: flex; align-items: center; gap: var(--space-xs); } .story-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; } .story-avatar img { width: 100%; height: 100%; object-fit: cover; } .story-person b { display: block; font-size: 0.88rem; color: var(--color-text-strong); } .story-person span { display: block; font-size: 0.75rem; color: var(--color-muted); } /* ========================================================= 17. WHY HEAD & TAIL ========================================================= */ .why-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } .why-row { display: flex; flex-direction: column; gap: var(--space-xs); } .why-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; } .why-row p { font-size: 0.88rem; } /* ========================================================= 18. CTA / NEWSLETTER ========================================================= */ .cta-wrap { padding-block: var(--space-xl); } .cta-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-md); text-align: center; max-width: 820px; margin-inline: auto; position: relative; } .cta-section h2 { margin-block: var(--space-2xs) var(--space-xs); } .cta-section p { margin-inline: auto; } .newsletter-form { display: flex; gap: var(--space-xs); max-width: 460px; margin: var(--space-md) auto var(--space-2xs); } .newsletter-form input { flex: 1; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0.8rem 1.2rem; color: var(--color-text-strong); font-size: 0.92rem; transition: border-color var(--dur-fast) ease; } .newsletter-form input.has-error { border-color: var(--color-danger) !important; } .validation-message { display: block; min-height: 1.2rem; font-size: 0.82rem; color: var(--color-danger); margin-bottom: var(--space-2xs); } .newsletter-note { font-size: 0.78rem; } /* ========================================================= NEWSLETTER SUCCESS POPUP ========================================================= */ .newsletter-success-popup { position: fixed; inset: 0; z-index: 9990; background: var(--color-overlay); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--space-md); } .newsletter-success-popup[hidden] { display: none !important; } .newsletter-success-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-xl) var(--space-lg); max-width: 400px; width: 100%; text-align: center; box-shadow: var(--shadow-soft); } .newsletter-success-close { position: absolute; top: var(--space-xs); right: var(--space-xs); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-muted); } .newsletter-success-close:hover { color: var(--color-text-strong); background: var(--color-surface-2); } .newsletter-success-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-ink); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0 auto var(--space-xs); } .newsletter-success-card h3 { margin-bottom: var(--space-2xs); } .newsletter-success-card p { font-size: 0.9rem; margin-bottom: var(--space-md); } /* ========================================================= 19. BACK TO TOP ========================================================= */ .back-to-top { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-tight); z-index: 900; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--dur-fast) ease, visibility var(--dur-fast) ease, transform var(--dur-fast) ease, background var(--dur-fast) ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--color-primary-strong); } /* ========================================================= 20. FOOTER ========================================================= */ .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding-top: var(--space-2xl); padding-bottom: var(--space-lg); } .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.4fr; gap: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border); } .footer-brand p { font-size: 0.88rem; margin-top: var(--space-xs); } .footer-social { display: flex; gap: var(--space-xs); margin-top: var(--space-md); } .footer-social a { width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; color: var(--color-text); transition: background var(--dur-fast) ease, color var(--dur-fast) ease; } .footer-social a:hover { background: var(--color-primary); color: var(--color-primary-ink); } .footer-col h4 { font-size: 1rem; margin-bottom: var(--space-xs); } .footer-col ul { display: flex; flex-direction: column; gap: 8px; } .footer-col a { font-size: 0.88rem; color: var(--color-muted); } .footer-col a:hover { color: var(--color-primary); } .footer-contact li { font-size: 0.88rem; color: var(--color-muted); display: flex; align-items: center; gap: 8px; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-md); font-size: 0.82rem; color: var(--color-muted); } .footer-bottom-links { display: flex; gap: var(--space-md); } /* ========================================================= 21. LTR / RTL DIRECTION SUPPORT ========================================================= */ /* Base RTL direction */ html[dir="rtl"], body.rtl { direction: rtl; text-align: right; } /* Direction-aware icons */ html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .btn i { transform: scaleX(-1) !important; } /* Navbar */ html[dir="rtl"] .navbar, html[dir="rtl"] .navbar-nav-list, html[dir="rtl"] .navbar-actions, html[dir="rtl"] .nav-link { direction: rtl; } /* Navbar underline */ html[dir="rtl"] .nav-link::after { left: auto; right: 0; } /* Navbar dropdown */ html[dir="rtl"] .dropdown-menu { left: auto; right: 50%; transform: translate(50%, 8px); } html[dir="rtl"] .dropdown:hover .dropdown-menu, html[dir="rtl"] .dropdown.open .dropdown-menu, html[dir="rtl"] .dropdown:focus-within .dropdown-menu { transform: translate(50%, 0); } html[dir="rtl"] .mobile-menu { transform: translateX(-100%); } html[dir="rtl"] .mobile-menu.open { transform: translateX(0); } html[dir="ltr"] .mobile-menu { transform: translateX(100%); } html[dir="ltr"] .mobile-menu.open { transform: translateX(0); } html[dir="rtl"] .mobile-nav, html[dir="rtl"] .mobile-nav-item > a, html[dir="rtl"] .mobile-dropdown-trigger { direction: rtl; } html[dir="rtl"] .mobile-dropdown-panel a { padding-left: 0; padding-right: 16px; border-left: none; border-right: 2px solid var(--color-border); } /* Hero */ html[dir="rtl"] .hero .container, html[dir="rtl"] .hero-content, html[dir="rtl"] .hero-actions, html[dir="rtl"] .hero-stats { direction: rtl; } html[dir="rtl"] .hero-content { text-align: right; } /* Hero ring */ html[dir="rtl"] .hero-ring { left: auto; right: -10%; } /* Hero badges */ html[dir="rtl"] .hero-badge--top { right: auto; left: -4%; } html[dir="rtl"] .hero-badge--bottom { left: auto; right: -6%; } /* Shop by pet */ html[dir="rtl"] .pet-category-arrow { right: auto; left: var(--space-md); } /* Products */ html[dir="rtl"] .product-tag { left: auto; right: var(--space-xs); } html[dir="rtl"] .product-footer { direction: rtl; } html[dir="rtl"] .product-price del { margin-right: 0; margin-left: 4px; } /* Quantity */ html[dir="rtl"] .quick-add.quantity-active { direction: rtl; } html[dir="rtl"] .quick-add .quantity-delete { margin-left: 0; margin-right: 2px; } /* Arrivals */ html[dir="rtl"] .arrival-card, html[dir="rtl"] .arrival-cta { direction: rtl; } /* Split / Services */ html[dir="rtl"] .split-section .container, html[dir="rtl"] .service-row { direction: rtl; } html[dir="rtl"] .split-content { text-align: right; } html[dir="rtl"] .split-media-note { right: auto; left: -6%; } html[dir="rtl"] .service-row i { margin-inline-end: 0; } /* Editorial */ html[dir="rtl"] .editorial-grid, html[dir="rtl"] .editorial-meta { direction: rtl; } /* Customer stories */ html[dir="rtl"] .stories-grid, html[dir="rtl"] .story-person { direction: rtl; } /* Why Head & Tail */ html[dir="rtl"] .why-list { direction: rtl; } /* Newsletter */ html[dir="rtl"] .newsletter-form { direction: rtl; } html[dir="rtl"] .newsletter-form input { direction: rtl; text-align: right; } /* Success popup */ html[dir="rtl"] .newsletter-success-card { direction: rtl; } html[dir="rtl"] .newsletter-success-close { right: auto; left: var(--space-xs); } /* Back to top */ html[dir="rtl"] .back-to-top { right: auto; left: 24px; } /* Footer */ html[dir="rtl"] .site-footer, html[dir="rtl"] .footer-grid, html[dir="rtl"] .footer-social, html[dir="rtl"] .footer-contact li, html[dir="rtl"] .footer-bottom, html[dir="rtl"] .footer-bottom-links { direction: rtl; } /* RTL text alignment */ html[dir="rtl"] .section-head { text-align: right; } html[dir="rtl"] .section-head--center { text-align: center; } html[dir="rtl"] .section-flex-head { direction: rtl; } html[dir="rtl"] p { text-align: right; } /* Keep centered content centered */ html[dir="rtl"] .cta-section, html[dir="rtl"] .newsletter-success-card { text-align: center; } /* RTL form controls */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { direction: rtl; text-align: right; } /* RTL flex rows */ html[dir="rtl"] .hero-actions, html[dir="rtl"] .split-actions, html[dir="rtl"] .footer-social, html[dir="rtl"] .footer-bottom-links { direction: rtl; } /* RTL button icon */ html[dir="rtl"] .btn i { transform: scaleX(-1); } html[dir="rtl"] .btn:hover i { transform: translateX(-3px) scaleX(-1); } /* Icons that should NOT be mirrored */ html[dir="rtl"] .theme-toggle i, html[dir="rtl"] .direction-toggle i, html[dir="rtl"] .cart-btn i, html[dir="rtl"] .menu-toggle-bars { transform: none; } /* ========================================================= ABOUT PAGE Uses the existing HEAD & TAIL design system ========================================================= */ /* --------------------------------------------------------- ABOUT HERO --------------------------------------------------------- */ .about-hero { padding-top: var(--space-xl); } .about-hero .hero-content { opacity: 1; } .about-hero .hero-visual { min-height: 520px; } /* --------------------------------------------------------- ABOUT STORY --------------------------------------------------------- */ .about-hero + .split-section { padding-top: var(--space-3xl); } .split-section { position: relative; } .split-section .container { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: var(--space-2xl); } .split-media { position: relative; width: 100%; max-width: 520px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .split-media img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); } .split-media:hover img { transform: scale(1.04); } .split-content { max-width: 620px; } .split-content h2 { margin-block: var(--space-xs) var(--space-sm); } .split-content p + p { margin-top: var(--space-sm); } /* --------------------------------------------------------- ABOUT VALUES --------------------------------------------------------- */ .about-hero ~ .why-section { background: var(--color-surface); } .about-hero ~ .why-section .section-head { margin-bottom: var(--space-xl); } .about-hero ~ .why-section .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } .about-hero ~ .why-section .why-row { position: relative; padding: var(--space-lg); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: transform var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); } .about-hero ~ .why-section .why-row:hover { transform: translateY(-6px); border-color: var(--color-primary); box-shadow: var(--shadow-soft); } .about-hero ~ .why-section .why-icon { margin-bottom: var(--space-xs); transition: transform var(--dur-med) var(--ease-standard), background-color var(--dur-med) var(--ease-standard); } .about-hero ~ .why-section .why-row:hover .why-icon { transform: scale(1.08) rotate(-4deg); background: var(--color-primary); color: var(--color-primary-ink); } .about-hero ~ .why-section .why-row h3 { margin-bottom: 4px; } /* --------------------------------------------------------- ABOUT PET FAMILY --------------------------------------------------------- */ .about-hero ~ .category-section { padding-block: var(--space-3xl); } .about-hero ~ .category-section .section-head { margin-bottom: var(--space-xl); } /* --------------------------------------------------------- ABOUT CTA --------------------------------------------------------- */ .about-hero ~ .cta-wrap { padding-top: 0; } .about-hero ~ .cta-wrap .cta-section { overflow: hidden; } .about-hero ~ .cta-wrap .cta-section::before { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid var(--color-border); border-radius: 50%; left: -70px; top: -80px; pointer-events: none; } .about-hero ~ .cta-wrap .cta-section::after { content: ""; position: absolute; width: 120px; height: 120px; border: 1px solid var(--color-border); border-radius: 50%; right: -45px; bottom: -55px; pointer-events: none; } .about-hero ~ .cta-wrap .split-actions { position: relative; z-index: 2; } /* ========================================================= ABOUT PAGE — RTL ========================================================= */ html[dir="rtl"] .split-section .container { direction: rtl; } html[dir="rtl"] .split-actions { direction: rtl; } /* ========================================================= ABOUT PAGE — REDUCED MOTION ========================================================= */ /* ========================================================= CONTACT SECTION ========================================================= */ .contact-section { width: 100%; padding-block: clamp(3rem, 7vw, 6rem); } .contact-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: stretch; } /* ========================================================= LEFT — CONTACT INFORMATION ========================================================= */ .contact-info { width: 100%; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .contact-info-list { width: 100%; display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; } /* Individual contact cards */ .contact-info-card { width: 100%; min-width: 0; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; box-sizing: border-box; text-decoration: none; /* BORDER */ border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px; /* BACKGROUND */ background: var(--color-surface, #ffffff); /* SMOOTH EFFECT */ transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } /* Contact card hover */ .contact-info-card:hover { border-color: var(--color-primary, #c9a227); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } /* Icon */ .contact-info-icon { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary, #c9a227); color: #ffffff; } /* Content */ .contact-info-content { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .contact-info-content b { font-size: 1rem; font-weight: 700; } .contact-info-content small { font-size: 0.9rem; line-height: 1.5; } /* ========================================================= RIGHT — CONTACT FORM CARD ========================================================= */ .contact-form-wrap { width: 100%; min-width: 0; display: flex; } .contact-form-card { width: 100%; min-width: 0; box-sizing: border-box; padding: clamp(1.5rem, 3vw, 2.5rem); /* FORM BORDER */ border: 1px solid var(--color-border, #e5e7eb); border-radius: 16px; /* FORM BACKGROUND */ background: var(--color-surface, #ffffff); /* FORM SHADOW */ box-shadow: 0 10px 35px rgba(0, 0, 0, 0.05); } /* ========================================================= FORM ========================================================= */ .contact-form { width: 100%; margin-top: 1.5rem; } .contact-form-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } .form-field { width: 100%; min-width: 0; margin-bottom: 1.15rem; } /* ========================================================= LABEL ========================================================= */ .form-field label { display: block; margin-bottom: 0.5rem; font-weight: 600; } /* ========================================================= INPUT + TEXTAREA ========================================================= */ .form-field input, .form-field textarea { width: 100%; max-width: 100%; box-sizing: border-box; padding: 0.85rem 1rem; font: inherit; /* INPUT BORDER */ border: 1px solid var(--color-border, #d9dde3); border-radius: 8px; /* BACKGROUND */ background: var(--color-background, #ffffff); /* TEXT */ color: var(--color-text, #222222); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } /* Textarea */ .form-field textarea { min-height: 140px; resize: vertical; } /* ========================================================= INPUT FOCUS ========================================================= */ .form-field input:focus, .form-field textarea:focus { border-color: var(--color-primary, #c9a227); box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12); } /* ========================================================= PLACEHOLDER ========================================================= */ .form-field input::placeholder, .form-field textarea::placeholder { color: #9ca3af; opacity: 1; } /* ========================================================= ERROR STATE ========================================================= */ .form-field.has-error input, .form-field.has-error textarea { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.08); } .form-field.has-error label { color: #dc3545; } /* ========================================================= VALID STATE ========================================================= */ .form-field.is-valid input, .form-field.is-valid textarea { border-color: #198754; } /* ========================================================= ERROR MESSAGE ========================================================= */ .contact-error { display: block; min-height: 1.25rem; margin-top: 0.35rem; font-size: 0.82rem; line-height: 1.4; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; } .contact-error.show { opacity: 1; visibility: visible; transform: translateY(0); } /* ========================================================= SUBMIT BUTTON ========================================================= */ .contact-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; margin-top: 0.5rem; cursor: pointer; } .contact-submit:disabled { opacity: 0.6; cursor: not-allowed; } /* ========================================================= FORM STATUS ========================================================= */ .contact-form-status { min-height: 1.4rem; margin-top: 0.75rem; } /* ========================================================= SUCCESS POPUP ========================================================= */ .contact-success-overlay { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1rem; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .contact-success-overlay[hidden] { display: none; } .contact-success-overlay.is-visible { opacity: 1; visibility: visible; } /* Modal */ .contact-success-modal { position: relative; width: min(100%, 460px); padding: 2.5rem 2rem; text-align: center; border: 1px solid var(--color-border, #e5e7eb); border-radius: 16px; background: var(--color-surface, #ffffff); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); transform: translateY(20px) scale(0.96); transition: transform 0.3s ease; } .contact-success-overlay.is-visible .contact-success-modal { transform: translateY(0) scale(1); } /* ========================================================= SUCCESS ICON ========================================================= */ .contact-success-icon { width: 72px; height: 72px; margin: 0 auto 1.25rem; display: grid; place-items: center; border-radius: 50%; background: #198754; color: #ffffff; font-size: 2rem; } /* ========================================================= CLOSE BUTTON ========================================================= */ .contact-success-close { position: absolute; top: 0.85rem; right: 0.85rem; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 1.1rem; } /* ========================================================= CONTACT SECTION ========================================================= */ /* ========================================================= LEFT — CONTACT INFORMATION ========================================================= */ .contact-info { width: 100%; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .contact-intro { max-width: 560px; } .contact-info-card { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; box-sizing: border-box; text-decoration: none; } .contact-info-icon { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; } /* ========================================================= RIGHT — CONTACT FORM ========================================================= */ .contact-form-card { width: 100%; box-sizing: border-box; } .form-field input, .form-field textarea { width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; } /* ========================================================= FORM ERROR ========================================================= */ /* Invalid field */ .form-field.has-error input, .form-field.has-error textarea { border-color: #dc3545; } /* Valid field */ /* ========================================================= SUBMIT BUTTON ========================================================= */ /* ========================================================= FORM STATUS ========================================================= */ /* ========================================================= SUCCESS POPUP OVERLAY ========================================================= */ /* ========================================================= SUCCESS MODAL ========================================================= */ .contact-success-modal { position: relative; width: min(100%, 460px); padding: 2.5rem 2rem; text-align: center; border-radius: 1.25rem; background: var(--color-surface, #ffffff); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); transform: translateY(20px) scale(0.96); transition: transform 0.3s ease; } /* ========================================================= SUCCESS ICON ========================================================= */ .contact-success-modal h3 { margin: 0 0 0.75rem; } .contact-success-modal p { margin: 0 auto 1.5rem; max-width: 340px; line-height: 1.6; } /* ========================================================= CLOSE BUTTON ========================================================= */ /* --------------------------------------------------------- QUICK HELP --------------------------------------------------------- */ .contact-help-section { padding-block: var(--space-3xl); } .contact-help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .contact-help-card { padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: transform var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); } .contact-help-card:hover { transform: translateY(-6px); border-color: var(--color-primary); box-shadow: var(--shadow-soft); } .contact-help-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: var(--space-sm); border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary); transition: transform var(--dur-med) var(--ease-standard); } .contact-help-card:hover .contact-help-icon { transform: scale(1.08) rotate(-5deg); } .contact-help-card h3 { margin-bottom: 4px; } .contact-help-card p { font-size: 0.9rem; } .contact-help-link { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--space-md); color: var(--color-primary); font-size: 0.85rem; font-weight: 600; } .contact-help-link i { transition: transform var(--dur-fast) ease; } .contact-help-card:hover .contact-help-link i { transform: translateX(4px); } .cart-hero { padding-block: var(--space-3xl); } .cart-hero h1 { margin-block: var(--space-xs) var(--space-sm); } .cart-hero h1 span { color: var(--color-primary); } .cart-hero p:last-child { max-width: 55ch; } /* ========================================================= CART LAYOUT ========================================================= */ .cart-section { padding-block: var(--space-3xl); background: var(--color-surface); } .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-xl); align-items: start; } .cart-heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-md); margin-bottom: var(--space-lg); } .cart-heading-row h2 { margin-top: var(--space-xs); } .cart-clear-btn { border: 0; background: transparent; color: var(--color-danger); cursor: pointer; font: inherit; font-size: 0.85rem; font-weight: 600; } .cart-clear-btn:hover { text-decoration: underline; } /* ========================================================= CART ITEMS ========================================================= */ .cart-items { display: grid; gap: var(--space-sm); } .cart-item { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: var(--space-md); align-items: center; padding: var(--space-md); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: transform var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); } .cart-item:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow-soft); } .cart-item-image { width: 100px; height: 100px; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-2); } .cart-item-image img { width: 100%; height: 100%; object-fit: cover; } .cart-item-info h3 { margin-bottom: 5px; font-size: 1rem; } .cart-item-info p { margin: 0; font-size: 0.82rem; color: var(--color-muted); } .cart-item-price { margin-top: 8px; font-weight: 700; color: var(--color-text-strong); } .cart-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); } .cart-quantity { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; } .cart-quantity button { width: 34px; height: 34px; border: 0; background: var(--color-surface-2); color: var(--color-text); cursor: pointer; } .cart-quantity button:hover { color: var(--color-primary); } .cart-quantity span { min-width: 34px; text-align: center; font-size: 0.85rem; font-weight: 600; } .cart-remove { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--color-danger); cursor: pointer; } .cart-remove:hover { background: var(--color-surface-2); } /* ========================================================= SUMMARY ========================================================= */ .cart-summary { position: sticky; top: 100px; padding: var(--space-lg); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .cart-summary h2 { margin-block: var(--space-xs) var(--space-lg); } .summary-row { display: flex; justify-content: space-between; align-items: center; padding-block: 10px; font-size: 0.92rem; } .summary-row strong { color: var(--color-text-strong); } .summary-note { display: flex; align-items: flex-start; gap: 8px; margin-block: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: 0.78rem; color: var(--color-muted); } .summary-note i { color: var(--color-primary); margin-top: 2px; } .summary-total { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); font-size: 1.05rem; font-weight: 700; } .summary-total strong { font-size: 1.35rem; color: var(--color-primary); } .cart-checkout-btn { width: 100%; margin-top: var(--space-lg); } .cart-continue { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: var(--space-md); color: var(--color-muted); font-size: 0.85rem; font-weight: 600; } .cart-continue:hover { color: var(--color-primary); } /* ========================================================= EMPTY CART ========================================================= */ .cart-empty { max-width: 620px; margin-inline: auto; padding-block: var(--space-3xl); text-align: center; } .cart-empty-icon { width: 82px; height: 82px; margin: 0 auto var(--space-md); display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary); font-size: 2rem; } .cart-empty h2 { margin-block: var(--space-xs) var(--space-sm); } .cart-empty p:not(.eyebrow) { margin-inline: auto; max-width: 48ch; } .cart-empty .btn { margin-top: var(--space-md); } /* ========================================================= RTL ========================================================= */ html[dir="rtl"] .cart-item { direction: rtl; } html[dir="rtl"] .cart-item-actions { direction: rtl; } html[dir="rtl"] .cart-continue i { transform: scaleX(-1); } /* ========================================================= SERVICES — COMMON CSS Add this block to your existing style.css ========================================================= */ .service-hero, .service-detail-hero { padding-block: var(--space-3xl); } .service-hero-grid, .service-detail-grid { display:grid; grid-template-columns:1fr .8fr; gap:var(--space-2xl); align-items:center; } .service-hero h1, .service-detail-hero h1 { max-width:760px; margin-block:var(--space-xs) var(--space-sm); } .service-hero h1 span { color:var(--color-primary); } .service-hero p:last-child, .service-detail-hero p:not(.eyebrow) { max-width:58ch; } .service-hero-art, .detail-visual { min-height:340px; display:grid; place-items:center; } .service-art-circle, .detail-visual-circle { width:250px; height:250px; border-radius:50%; display:grid; place-items:center; background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-soft); animation:serviceFloat 4s ease-in-out infinite; } .service-art-circle i, .detail-visual-circle i { font-size:5.5rem; color:var(--color-primary); } @keyframes serviceFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } } .services-overview, .detail-content { padding-block:var(--space-3xl); background:var(--color-surface); } .section-head--center { text-align:center; max-width:760px; margin-inline:auto; margin-bottom:var(--space-xl); } .section-subhead { max-width:60ch; margin-inline:auto; } .services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); } .service-card { position:relative; padding:var(--space-xl); background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius-lg); transition:transform var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); } .service-card:hover { transform:translateY(-7px); border-color:var(--color-primary); box-shadow:var(--shadow-soft); } .service-card-icon { width:58px; height:58px; display:grid; place-items:center; margin-bottom:var(--space-md); border-radius:50%; background:var(--color-surface-2); color:var(--color-primary); font-size:1.3rem; transition:transform var(--dur-med) var(--ease-standard); } .service-card:hover .service-card-icon { transform:scale(1.08) rotate(-5deg); } .service-card h3 { margin-bottom:7px; } .service-card p { font-size:.9rem; } .service-card-link { display:inline-flex; gap:7px; align-items:center; margin-top:var(--space-md); color:var(--color-primary); font-size:.85rem; font-weight:700; } .service-card-link i { transition:transform var(--dur-fast) ease; } .service-card:hover .service-card-link i { transform:translateX(4px); } .service-benefits { padding-block:var(--space-3xl); } .benefits-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); } .benefits-grid > div { text-align:center; } .benefits-grid span { width:58px; height:58px; margin:0 auto var(--space-sm); display:grid; place-items:center; border-radius:50%; background:var(--color-surface-2); color:var(--color-primary); } .benefits-grid h3 { margin-bottom:5px; } .benefits-grid p { max-width:32ch; margin-inline:auto; font-size:.9rem; } .service-detail-hero { padding-block:var(--space-3xl); } .service-detail-hero .btn { margin-top:var(--space-md); } .detail-content { background:var(--color-surface); } .detail-features { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); } .detail-feature { display:flex; gap:var(--space-md); padding:var(--space-lg); background:var(--color-background); border:1px solid var(--color-border); border-radius:var(--radius-md); transition:transform var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); } .detail-feature:hover { transform:translateY(-5px); border-color:var(--color-primary); box-shadow:var(--shadow-soft); } .detail-feature > span { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border-radius:50%; background:var(--color-surface-2); color:var(--color-primary); } .detail-feature h3 { margin-bottom:4px; font-size:1rem; } .detail-feature p { margin:0; font-size:.84rem; } html[dir="rtl"] .service-card-link i { transform:scaleX(-1); } html[dir="rtl"] .service-card:hover .service-card-link i { transform:translateX(-4px) scaleX(-1); } /* ========================================================= SHOP — COMMON CSS Add this block to your existing style.css ========================================================= */ .shop-hero{padding-block:var(--space-3xl)} .shop-hero-grid{display:grid;grid-template-columns:1fr .75fr;gap:var(--space-2xl);align-items:center} .shop-hero h1{max-width:760px;margin-block:var(--space-xs) var(--space-sm)} .shop-hero p:last-child{max-width:58ch} .shop-hero-art{min-height:320px;display:grid;place-items:center} .shop-art-circle{width:245px;height:245px;border-radius:50%;display:grid;place-items:center;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-soft);animation:shopFloat 4s ease-in-out infinite} .shop-art-circle i{font-size:5.2rem;color:var(--color-primary)} @keyframes shopFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .shop-section{padding-block:var(--space-3xl);background:var(--color-surface)} .shop-toolbar{display:flex;justify-content:space-between;align-items:end;gap:var(--space-lg);margin-bottom:var(--space-xl)} .shop-toolbar h2{margin-top:var(--space-xs)} .shop-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} .shop-filter{padding:.6rem .9rem;border:1px solid var(--color-border);border-radius:999px;color:var(--color-muted);background:var(--color-background);font-size:.8rem;font-weight:600;transition:all var(--dur-fast) ease} .shop-filter:hover,.shop-filter.active{color:var(--color-primary);border-color:var(--color-primary);transform:translateY(-2px)} /* ========================================================= PRODUCT GRID ========================================================= */ .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); } /* ========================================================= PRODUCT CARD ========================================================= */ .product-card { overflow: hidden; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: transform var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); } .product-card:hover { transform: translateY(-6px); border-color: var(--color-primary); box-shadow: var(--shadow-soft); } /* ========================================================= PRODUCT VISUAL ========================================================= */ .product-visual { height: 210px; position: relative; overflow: hidden; background: var(--color-surface-2); } /* ========================================================= PRODUCT IMAGE ========================================================= */ .product-visual img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--dur-med) var(--ease-standard); } /* ========================================================= IMAGE HOVER ========================================================= */ .product-card:hover .product-visual img { transform: scale(1.06); } /* ========================================================= PRODUCT BADGE ========================================================= */ .product-badge { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 8px; border-radius: 999px; background: var(--color-background); font-size: .68rem; font-weight: 700; color: var(--color-primary); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); } /* ========================================================= PRODUCT INFO ========================================================= */ .product-info { padding: var(--space-md); } /* ========================================================= PRODUCT CATEGORY ========================================================= */ .product-category { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); } /* ========================================================= PRODUCT TITLE ========================================================= */ .product-info h3 { margin-block: 5px; } /* ========================================================= PRODUCT DESCRIPTION ========================================================= */ .product-info p { font-size: .8rem; min-height: 38px; } /* ========================================================= PRODUCT BOTTOM ========================================================= */ .product-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: var(--space-md); } /* ========================================================= PRODUCT PRICE ========================================================= */ .product-bottom strong { font-size: 1.05rem; color: var(--color-text-strong); } /* ========================================================= ADD TO CART ========================================================= */ .product-add { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-primary); border-radius: 999px; padding: .55rem .75rem; background: transparent; color: var(--color-primary); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 700; transition: all var(--dur-fast) ease; } .product-add:hover { background: var(--color-primary); color: var(--color-background); transform: translateY(-2px); } .product-add.added { pointer-events: none; } /* ========================================================= TABLET 768px – 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= LARGE DEVICES 1024px – 1280px ========================================================= */ @media (min-width: 1025px) and (max-width: 1280px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ========================================================= MOBILE 320px – 767px ========================================================= */ @media (max-width: 767px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); } .product-visual { height: 170px; } .product-info { padding: var(--space-sm); } .product-bottom { align-items: flex-start; flex-direction: column; } .product-add { width: 100%; justify-content: center; } } .shop-promise{padding-block:var(--space-3xl)} .promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)} .promise-grid>div{text-align:center} .promise-grid span{width:58px;height:58px;margin:0 auto var(--space-sm);display:grid;place-items:center;border-radius:50%;background:var(--color-surface-2);color:var(--color-primary)} .promise-grid h3{margin-bottom:5px}.promise-grid p{max-width:34ch;margin-inline:auto;font-size:.88rem} html[dir="rtl"] .product-card,.html[dir="rtl"] .shop-filter{direction:rtl} html[dir="rtl"] .shop-filter{direction:rtl} /* ========================================================= HEAD & TAIL — NEW PAGES ADDITIONS Append this block to the existing common style.css. No loader is used by the new pages. ========================================================= */ /* Page hero */ .ht-page-hero, .ht-blog-hero { padding-block: clamp(4rem, 8vw, 7rem); } .ht-page-hero-inner { max-width: 820px; text-align: center; } .ht-page-hero-inner p:not(.eyebrow) { margin-inline: auto; font-size: 1.05rem; } .ht-page-hero-inner .hero-actions { justify-content: center; } /* Shop */ .ht-shop-section, .ht-blog-section, .ht-tips-section { padding-block: var(--space-3xl); } .ht-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .ht-filter, .ht-blog-filter { padding: .55rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-muted); background: var(--color-surface); font-size: .82rem; transition: .2s ease; } .ht-filter:hover, .ht-filter.active, .ht-blog-filter:hover, .ht-blog-filter.active { color: var(--color-primary-ink); background: var(--color-primary); border-color: var(--color-primary); } .ht-product.is-hidden, .ht-article-card.is-hidden { display: none; } .ht-care-strip { padding-block: var(--space-xl); } .ht-care-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-xl); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } .ht-care-strip-inner p { margin-top: 6px; } /* Blog */ .ht-blog-hero { overflow: hidden; } .ht-blog-hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-xl); } .ht-blog-hero-copy h1 { margin-block: var(--space-xs) var(--space-sm); } .ht-blog-hero-copy > p:not(.eyebrow) { font-size: 1.05rem; } .ht-blog-feature { position: relative; min-height: 460px; border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; } .ht-blog-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease-standard); } .ht-blog-feature:hover img { transform: scale(1.04); } .ht-blog-feature::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(to top, rgba(8,10,8,.88), rgba(8,10,8,.03) 65%); } .ht-blog-feature > div { padding: var(--space-lg); color:#fff; } .ht-blog-feature span { color: #fff; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; } .ht-blog-feature h2 { color:#fff; margin-top:5px; } .ht-blog-feature p { color:rgba(255,255,255,.8); margin-top:4px; } .ht-article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg); } .ht-article-card { background: var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); overflow:hidden; transition: transform .25s var(--ease-standard), box-shadow .25s ease; } .ht-article-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-soft); } .ht-article-media { display: block; aspect-ratio: 5 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface-2); } .ht-article-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .5s var(--ease-standard); } .ht-article-card:hover .ht-article-media img { transform:scale(1.04); } .ht-article-body { padding:var(--space-md); } .ht-article-meta { display:flex; gap:7px; align-items:center; color:var(--color-primary); font-size:.74rem; margin-bottom:5px; } .ht-article-meta span:nth-child(n+2) { color:var(--color-muted); } .ht-article-body h3 { font-size:1.25rem; } .ht-article-body p { font-size:.88rem; margin-top:6px; } .ht-article-body .editorial-read { margin-top:var(--space-sm); } .ht-blog-categories { padding-block:var(--space-3xl); background:var(--color-surface); border-block:1px solid var(--color-border); } .ht-category-links { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-sm); } .ht-category-links a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:125px; padding:var(--space-md); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-background); color:var(--color-text-strong); transition:.25s ease; } .ht-category-links a:hover { transform:translateY(-3px); border-color:var(--color-primary); color:var(--color-primary); } .ht-category-links i { font-size:1.35rem; color:var(--color-primary); } /* Care tips */ .ht-tip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); } .ht-tip-feature { padding:var(--space-lg); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); } .ht-tip-feature i { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--color-surface-2); color:var(--color-primary); margin-bottom:var(--space-sm); } .ht-tip-feature p { margin-top:6px; font-size:.9rem; } /* ========================================================= AUTH PAGES ========================================================= */ .ht-auth-section { min-height: calc(100vh - var(--header-h)); padding-block: clamp(2rem, 5vw, 4rem); display: flex; align-items: center; } .ht-auth-card { width: min(100%, 460px); margin-inline: auto; padding: clamp(1.35rem, 3vw, 2rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } /* ========================================================= AUTH LOGO ========================================================= */ .ht-auth-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text-strong); text-decoration: none; margin-bottom: 1.25rem; } .ht-auth-logo-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); color: var(--color-surface); font-size: 1rem; transition: transform .25s ease, background-color .25s ease; } .ht-auth-logo-text { display: flex; flex-direction: column; line-height: .9; letter-spacing: .08em; font-weight: 700; } .ht-auth-logo-text span:first-child { font-size: .92rem; } .ht-auth-logo-text span:last-child { margin-top: 4px; font-size: .7rem; color: var(--color-primary); } .ht-auth-logo:hover .ht-auth-logo-icon { transform: translateY(-2px); } .ht-auth-logo:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); } /* ========================================================= AUTH HEADING ========================================================= */ .ht-auth-card h1 { font-size: clamp(1.7rem, 3.5vw, 2.35rem); line-height: 1.15; margin-top: 4px; } .ht-auth-intro { margin-top: var(--space-xs); font-size: .9rem; line-height: 1.6; } /* ========================================================= AUTH FORM ========================================================= */ .ht-auth-form { display: flex; flex-direction: column; gap: 5px; margin-top: var(--space-md); } .ht-auth-form > label:not(.ht-check) { color: var(--color-text-strong); font-size: .82rem; font-weight: 600; margin-top: 6px; } .ht-auth-form input[type="text"], .ht-auth-form input[type="email"], .ht-auth-form input[type="password"] { width: 100%; min-height: 44px; padding: .7rem .9rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-strong); font-size: .88rem; transition: border-color .2s ease, box-shadow .2s ease; } .ht-auth-form input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix( in srgb, var(--color-primary) 12%, transparent ); outline: none; } .ht-auth-form input.has-error { border-color: var(--color-danger); } /* ========================================================= PASSWORD ========================================================= */ .ht-password-wrap { position: relative; } .ht-password-wrap input { padding-inline-end: 3rem !important; } .ht-password-toggle { position: absolute; top: 50%; right: 6px; width: 34px; height: 34px; transform: translateY(-50%); border-radius: 50%; color: var(--color-muted); } .ht-password-toggle:hover { color: var(--color-primary); background: var(--color-surface-2); } /* ========================================================= FIELD ERROR ========================================================= */ .ht-field-error { min-height: .9rem; font-size: .72rem; color: var(--color-danger); } /* ========================================================= LOGIN ROW ========================================================= */ .ht-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block: 4px var(--space-xs); font-size: .78rem; } .ht-auth-row a, .ht-auth-switch a { color: var(--color-primary); font-weight: 600; } /* ========================================================= CHECKBOX ========================================================= */ .ht-check { display: flex; align-items: flex-start; gap: 7px; font-size: .78rem; color: var(--color-muted); cursor: pointer; } .ht-check input { accent-color: var(--color-primary); margin-top: 3px; } .ht-terms { margin-block: 4px 3px; } /* ========================================================= PASSWORD RULES ========================================================= */ .ht-password-rules { display: flex; flex-wrap: wrap; gap: 5px; margin: 1px 0 3px; } .ht-password-rules span { padding: 3px 6px; border-radius: var(--radius-pill); background: var(--color-background); border: 1px solid var(--color-border); color: var(--color-muted); font-size: .67rem; } .ht-password-rules span.valid { color: var(--color-secondary); border-color: var(--color-secondary); } /* ========================================================= FORM STATUS ========================================================= */ .ht-form-status { min-height: 1rem; text-align: center; font-size: .78rem; color: var(--color-secondary); } /* ========================================================= AUTH SWITCH ========================================================= */ .ht-auth-switch { text-align: center; margin: var(--space-xs) auto 0; font-size: .8rem; } /* ========================================================= RESET MESSAGE ========================================================= */ .ht-reset-message { display: flex; align-items: flex-start; gap: 9px; margin-top: 5px; padding: 10px; border-radius: var(--radius-sm); background: var(--color-background); border: 1px solid var(--color-border); color: var(--color-secondary); font-size: .78rem; line-height: 1.5; } .ht-reset-message i { margin-top: 2px; } /* 404 */ .ht-404-section { min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; padding-block:var(--space-3xl); } .ht-404-card { max-width:850px; margin-inline:auto; text-align:center; } .ht-404-number { font-family:var(--font-display); font-size:clamp(7rem,20vw,15rem); line-height:.75; font-weight:600; letter-spacing:-.06em; color:var(--color-surface-2); } .ht-404-paw { width:58px; height:58px; margin:0 auto var(--space-sm); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--color-surface); color:var(--color-primary); border:1px solid var(--color-border); } .ht-404-card h1 { margin-block:var(--space-xs) var(--space-sm); } .ht-404-card > p:not(.eyebrow) { margin-inline:auto; } .ht-404-card .hero-actions { justify-content:center; } /* RTL */ html[dir="rtl"] .ht-password-toggle { right:auto; left:7px; } html[dir="rtl"] .ht-password-wrap input { padding-inline-end:1rem !important; padding-inline-start:3rem !important; } html[dir="rtl"] .ht-blog-hero-copy, html[dir="rtl"] .ht-auth-card { text-align:right; } html[dir="rtl"] .ht-page-hero-inner, html[dir="rtl"] .ht-404-card { text-align:center; } html[dir="rtl"] .ht-filter-pills { justify-content:flex-start; } .service-art-circle { width: 320px; height: 320px; border-radius: 50%; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); animation: serviceFloat 4s ease-in-out infinite; } .service-art-image { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; } /* ========================================================= SERVICE IMAGE SIZE ========================================================= */ /* ========================================================= CONTACT PAGE ========================================================= */ .contact-hero { padding-block: var(--space-3xl); } .contact-hero-grid { display: grid; grid-template-columns: 1fr 0.8fr; align-items: center; gap: var(--space-2xl); } .contact-hero-content h1 { margin-block: var(--space-xs) var(--space-sm); max-width: 700px; } .contact-hero-content h1 span { color: var(--color-primary); } .contact-hero-content > p:last-child { font-size: 1.05rem; max-width: 55ch; } .contact-hero-art { min-height: 360px; display: grid; place-items: center; position: relative; } .contact-art-circle { width: 260px; height: 260px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); animation: contactFloat 4s ease-in-out infinite; } .contact-art-circle i { font-size: 6rem; color: var(--color-primary); } @keyframes contactFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* --------------------------------------------------------- CONTACT CONTENT --------------------------------------------------------- */ .contact-section { background: var(--color-surface); } .contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); align-items: start; } .contact-info h2, .contact-form-card h2 { margin-block: var(--space-xs) var(--space-sm); } .contact-intro { margin-bottom: var(--space-lg); } .contact-info-list { display: grid; gap: var(--space-sm); } .contact-info-card { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: transform var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); } .contact-info-card:hover { transform: translateY(-4px); border-color: var(--color-primary); box-shadow: var(--shadow-tight); } .contact-info-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-2); color: var(--color-primary); } .contact-info-card b, .contact-info-card small { display: block; } .contact-info-card b { color: var(--color-text-strong); margin-bottom: 2px; } .contact-info-card small { color: var(--color-muted); } /* ========================================================= 18. RESPONSIVE ONLY THESE BREAKPOINTS ARE USED: Mobile 320px - 767px Tablet 768px - 1024px Large Devices 1024px - 1280px ========================================================= */ /* ========================================================= MOBILE 320px - 767px ========================================================= */ @media (min-width: 320px) and (max-width: 767px) { .ht-auth-section { min-height: auto; padding-block: 1.5rem 2.5rem; } .ht-auth-card { width: min(100%, 430px); padding: 1.25rem; } .ht-auth-card h1 { font-size: 1.7rem; } .ht-auth-intro { font-size: .86rem; } /* Hide desktop navigation */ .navbar-nav { display: none; } /* Hide desktop actions */ .navbar-actions { display: none; } /* Hide desktop cart */ .navbar > .cart-btn { display: none; } /* Hide desktop account */ .navbar > .account-btn { display: none; } /* Show hamburger */ .menu-toggle { display: inline-flex; margin-inline-start: auto; } /* Mobile / Tablet menu */ .mobile-menu { display: flex; } .navbar { padding-inline: 12px; } .navbar-brand { font-size: 1.15rem; gap: 4px; } .navbar-brand i { font-size: 0.95rem; } .menu-toggle { width: 40px; height: 40px; flex-basis: 40px; } .mobile-menu-header { padding-inline: 12px; } .mobile-menu-header .navbar-brand { font-size: 1.15rem; } .mobile-menu-close { width: 40px; height: 40px; flex-basis: 40px; } .mobile-nav { padding-inline: 12px; } .mobile-nav-item > a, .mobile-dropdown-trigger { min-height: 50px; font-size: 1.08rem; } .mobile-dropdown-panel a { font-size: 0.9rem; } .mobile-menu-footer { min-height: 64px; padding: 10px 12px; gap: 4px; } .mobile-menu-footer .icon-btn { width: 40px; height: 40px; flex-basis: 40px; } .mobile-menu-footer .cart-count { top: 1px; right: 1px; min-width: 15px; height: 15px; font-size: 0.6rem; } .loader-logo { font-size: 1.5rem; } .loader-line { width: 110px; height: 2px; margin-top: var(--space-sm); } .products-section { padding: 55px 0; } .section-flex-head { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 24px; } .section-flex-head .btn { width: 100%; justify-content: center; } .product-grid { grid-template-columns: 1fr; gap: 12px; } .product-card { border-radius: 17px; } .product-body { padding: 13px 12px 13px; min-height: 145px; } .product-body h4 { font-size: 0.88rem; line-height: 1.3; } .product-category { font-size: 0.59rem; margin-bottom: 4px; } .product-rating { font-size: 0.64rem; } .product-rating span { font-size: 0.64rem; } .product-price { font-size: 0.92rem; } .quick-add { width: 36px; height: 36px; } .quick-add.quantity-active { min-width: 112px; height: 36px; } .quick-add .quantity-minus, .quick-add .quantity-plus, .quick-add .quantity-delete { width: 27px; height: 27px; flex-basis: 27px; } .hero { padding-block: 2.5rem 3rem; } .hero .container { grid-template-columns: 1fr; gap: 2.5rem; } .hero-content { text-align: center; } .hero-content h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); line-height: 1.08; } .hero-content > p:not(.eyebrow) { max-width: 46ch; margin-inline: auto; font-size: 0.95rem; line-height: 1.65; } .hero-actions { justify-content: center; gap: 10px; } .hero-stats { justify-content: center; gap: 1.2rem; margin-top: 2rem; padding-top: 1rem; } .hero-stat { text-align: center; } .hero-stat b { font-size: 1.25rem; } .hero-stat span { font-size: 0.68rem; } .hero-visual { width: 100%; } .hero-image-wrap { width: min(100%, 420px); max-width: 420px; aspect-ratio: 4 / 5; } .hero-ring { top: -6%; left: -5%; width: 120px; height: 120px; } .hero-badge { gap: 6px; padding: 8px 10px; } .hero-badge--top { top: 6%; right: -2%; } .hero-badge--bottom { bottom: 6%; left: -2%; } .hero-badge i { font-size: 0.9rem; } .hero-badge b { font-size: 0.75rem; } .hero-badge span { font-size: 0.65rem; } /* ----------------------------------------------------- SHOP BY PET ----------------------------------------------------- */ .pet-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pet-category { aspect-ratio: 3 / 4; border-radius: 17px; } .pet-category-body { padding: 13px; } .pet-category-body span { font-size: 0.62rem; } .pet-category-body h3 { font-size: 1rem; } .pet-category-arrow { top: 12px; right: 12px; width: 32px; height: 32px; font-size: 0.75rem; } /* ----------------------------------------------------- PRODUCTS SECTION ----------------------------------------------------- */ /* ----------------------------------------------------- PRODUCT GRID ----------------------------------------------------- */ .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* ----------------------------------------------------- PRODUCT CARD ----------------------------------------------------- */ /* ----------------------------------------------------- PRODUCT IMAGE ----------------------------------------------------- */ .product-media { aspect-ratio: 1 / 1; } /* ----------------------------------------------------- PRODUCT TAG ----------------------------------------------------- */ .product-tag { top: 10px; left: 10px; padding: 5px 8px; font-size: 0.58rem; } /* ----------------------------------------------------- PRODUCT BODY ----------------------------------------------------- */ .product-body { padding: 13px 12px; min-height: 145px; } /* ----------------------------------------------------- RATING ----------------------------------------------------- */ .product-rating { margin-top: 7px; font-size: 0.64rem; } /* ----------------------------------------------------- PRODUCT FOOTER ----------------------------------------------------- */ .product-footer { gap: 7px; padding-top: 12px; } /* ----------------------------------------------------- PRICE ----------------------------------------------------- */ .product-price { gap: 3px; font-size: 0.92rem; } .product-price del { font-size: 0.65rem; } /* ----------------------------------------------------- QUICK ADD ----------------------------------------------------- */ .quick-add { width: 36px; height: 36px; font-size: 0.78rem; } .quick-add .quantity-number { min-width: 22px; font-size: 0.76rem; } /* ----------------------------------------------------- NEW ARRIVALS ----------------------------------------------------- */ .arrivals-grid { grid-template-columns: 1fr; gap: 14px; } .arrival-feature { min-height: 380px; border-radius: 17px; } .arrival-feature-body { padding: 14px; } .arrival-feature-body h3 { font-size: 1.3rem; } .arrival-feature-body p { font-size: 0.88rem; } /* ----------------------------------------------------- ARRIVAL SIDE ----------------------------------------------------- */ .arrival-side { gap: 10px; } .arrival-card { gap: 10px; padding: 8px; } .arrival-card-media { width: 68px; height: 68px; } .arrival-card-body span { font-size: 0.64rem; } /* ----------------------------------------------------- ARRIVAL CTA ----------------------------------------------------- */ .arrival-cta { padding: 14px; gap: 10px; } .arrival-cta p { font-size: 0.82rem; } .product-media { aspect-ratio: 1.15 / 1; } .about-hero { padding-top: var(--space-sm); } .about-hero + .split-section { padding-top: var(--space-lg); } .split-content h2 { margin-top: var(--space-2xs); } .split-content p { font-size: 0.92rem; } .split-actions { width: 100%; flex-direction: column; } .split-actions .btn { width: 100%; } .about-hero ~ .category-section { padding-block: var(--space-xl); } .about-hero ~ .cta-wrap .cta-section::before, .about-hero ~ .cta-wrap .cta-section::after { display: none; } .ht-page-hero, .ht-blog-hero { padding-block: var(--space-2xl); } .ht-shop-section, .ht-blog-section, .ht-tips-section, .ht-blog-categories { padding-block: var(--space-2xl); } .ht-blog-feature { min-height: 340px; } .ht-article-grid, .ht-tip-grid { grid-template-columns: 1fr; } .ht-category-links { grid-template-columns: repeat(2,1fr); } .ht-care-strip-inner { padding: var(--space-lg) var(--space-md); } .ht-auth-section { padding-block: var(--space-xl); } .ht-auth-card { padding: var(--space-lg) var(--space-md); } .ht-auth-row { align-items: flex-start; flex-direction: column; } .ht-404-section { padding-block: var(--space-2xl); } .ht-404-number { font-size: clamp(6rem,29vw,10rem); } /* ----------------------------------------------------- 13. QUICK CARE TIPS ----------------------------------------------------- */ .tips-grid { grid-template-columns: 1fr; gap: var(--space-md); } /* ----------------------------------------------------- 14. GROOMING / PET CARE ----------------------------------------------------- */ .split-section .container { grid-template-columns: 1fr; gap: var(--space-xl); } .split-media { max-width: 100%; } .split-media img { max-height: 450px; } .split-media-note { right: 2%; bottom: 4%; max-width: 160px; } .split-content { max-width: 100%; } .service-row { gap: var(--space-sm); } .split-actions { flex-direction: column; align-items: stretch; } /* ----------------------------------------------------- 15. CARE TIPS / EDITORIAL BLOG ----------------------------------------------------- */ .editorial-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .editorial-card h3 { font-size: 1.1rem; } /* ----------------------------------------------------- 16. CUSTOMER STORIES ----------------------------------------------------- */ .stories-grid { grid-template-columns: 1fr; gap: var(--space-md); } .story-card { padding: var(--space-md); } /* ----------------------------------------------------- 17. WHY HEAD & TAIL ----------------------------------------------------- */ .why-list { grid-template-columns: 1fr; gap: var(--space-lg); } /* ----------------------------------------------------- 18. CTA / NEWSLETTER ----------------------------------------------------- */ .cta-wrap { padding-block: var(--space-lg); } .cta-section { padding: var(--space-lg) var(--space-sm); } .newsletter-form { flex-direction: column; width: 100%; } .newsletter-form input { width: 100%; min-height: 46px; } .newsletter-form .btn { width: 100%; min-height: 46px; } /* ----------------------------------------------------- NEWSLETTER SUCCESS POPUP ----------------------------------------------------- */ .newsletter-success-popup { padding: var(--space-sm); } .newsletter-success-card { padding: var(--space-lg) var(--space-md); } /* ----------------------------------------------------- 19. BACK TO TOP ----------------------------------------------------- */ .back-to-top { width: 40px; height: 40px; bottom: 16px; right: 16px; } /* ----------------------------------------------------- 20. FOOTER ----------------------------------------------------- */ .site-footer { padding-top: var(--space-xl); } .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); padding-bottom: var(--space-lg); } .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-xs); } .footer-bottom-links { flex-wrap: wrap; gap: var(--space-sm); } html[dir="rtl"] .split-media-note { right: auto; left: 2%; } html[dir="rtl"] .back-to-top { right: auto; left: 16px; } /* ----------------------------------------------------- ABOUT HERO ----------------------------------------------------- */ .about-hero { padding-top: var(--space-lg); } .about-hero .hero-visual { min-height: 360px; } /* ----------------------------------------------------- ABOUT STORY ----------------------------------------------------- */ .about-hero + .split-section { padding-top: var(--space-2xl); } .split-media img { aspect-ratio: 4 / 4.6; } .split-content h2 { margin-block: var(--space-xs) var(--space-sm); } /* ----------------------------------------------------- ABOUT VALUES ----------------------------------------------------- */ .about-hero ~ .why-section .section-head { margin-bottom: var(--space-lg); } .about-hero ~ .why-section .why-list { grid-template-columns: 1fr; gap: var(--space-md); } .about-hero ~ .why-section .why-row { padding: var(--space-md); } /* ----------------------------------------------------- ABOUT PET FAMILY ----------------------------------------------------- */ .about-hero ~ .category-section { padding-block: var(--space-2xl); } .about-hero ~ .category-section .section-head { margin-bottom: var(--space-lg); } /* ----------------------------------------------------- ABOUT CTA ----------------------------------------------------- */ .about-hero ~ .cta-wrap { padding-top: 0; } .about-hero ~ .cta-wrap .cta-section { padding: var(--space-lg) var(--space-sm); } .about-hero ~ .cta-wrap .cta-section::before { width: 120px; height: 120px; left: -55px; top: -55px; } .about-hero ~ .cta-wrap .cta-section::after { width: 90px; height: 90px; right: -35px; bottom: -40px; } .about-hero ~ .cta-wrap .split-actions { flex-direction: column; align-items: stretch; } .about-hero ~ .cta-wrap .split-actions .btn { width: 100%; } /* ----------------------------------------------------- ABOUT PAGE — RTL MOBILE ----------------------------------------------------- */ html[dir="rtl"] .split-media { margin-inline: auto; } /* ----------------------------------------------------- CONTACT HERO ----------------------------------------------------- */ .contact-hero { padding-block: var(--space-2xl); } .contact-hero-grid { grid-template-columns: 1fr; gap: var(--space-xl); text-align: center; } .contact-hero-content h1 { max-width: 100%; margin-inline: auto; } .contact-hero-content > p:last-child { max-width: 100%; margin-inline: auto; font-size: 0.95rem; } .contact-hero-art { min-height: 260px; } .contact-art-circle { width: 190px; height: 190px; } .contact-art-circle i { font-size: 4.5rem; } /* ----------------------------------------------------- CONTACT CONTENT ----------------------------------------------------- */ .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); } .contact-info { width: 100%; } .contact-info-list { gap: var(--space-sm); } .contact-info-card { padding: var(--space-sm); } /* ----------------------------------------------------- CONTACT FORM ----------------------------------------------------- */ .contact-form-card { padding: var(--space-lg) var(--space-md); } .contact-form-row { grid-template-columns: 1fr; gap: 0; } .contact-form input, .contact-form textarea { font-size: 0.92rem; } .contact-submit { width: 100%; } /* ----------------------------------------------------- QUICK HELP ----------------------------------------------------- */ .contact-help-section { padding-block: var(--space-2xl); } .contact-help-grid { grid-template-columns: 1fr; gap: var(--space-md); } .contact-help-card { padding: var(--space-md); } html[dir="rtl"] .contact-hero-grid, html[dir="rtl"] .contact-grid, html[dir="rtl"] .contact-help-grid { direction: rtl; } html[dir="rtl"] .contact-hero-grid { text-align: center; } /* ----------------------------------------------------- CART / CHECKOUT HERO ----------------------------------------------------- */ .cart-hero { padding-block: var(--space-xl); } .cart-hero h1 { font-size: clamp(1.8rem, 8vw, 2.4rem); } /* ----------------------------------------------------- CART LAYOUT ----------------------------------------------------- */ .cart-section { padding-block: var(--space-xl); } .cart-layout { grid-template-columns: 1fr; gap: var(--space-lg); } .cart-heading-row { align-items: flex-start; flex-direction: column; gap: var(--space-xs); } /* ----------------------------------------------------- CART ITEMS ----------------------------------------------------- */ .cart-item { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-sm); } .cart-item-image { width: 72px; height: 72px; } .cart-item-info h3 { font-size: 0.92rem; } .cart-item-info p { font-size: 0.78rem; } .cart-item-price { font-size: 0.9rem; } .cart-item-actions { grid-column: 1 / -1; justify-content: space-between; padding-top: var(--space-xs); border-top: 1px solid var(--color-border); } .cart-quantity button { width: 32px; height: 32px; } .cart-quantity span { min-width: 32px; } /* ----------------------------------------------------- SUMMARY ----------------------------------------------------- */ .cart-summary { position: static; padding: var(--space-md); } /* ----------------------------------------------------- EMPTY CART ----------------------------------------------------- */ .cart-empty { padding-block: var(--space-xl); } /* ===================================================== SERVICES ===================================================== */ .service-hero, .service-detail-hero { padding-block: var(--space-xl); } .service-hero-grid, .service-detail-grid { grid-template-columns: 1fr; gap: var(--space-xl); } .service-hero-art, .detail-visual { min-height: 240px; } .service-art-circle, .detail-visual-circle { width: 190px; height: 190px; } .service-art-circle i, .detail-visual-circle i { font-size: 4rem; } /* ----------------------------------------------------- SERVICES OVERVIEW ----------------------------------------------------- */ .services-overview, .detail-content { padding-block: var(--space-xl); } .section-head--center { margin-bottom: var(--space-lg); } .services-grid { grid-template-columns: 1fr; gap: var(--space-md); } .service-card { padding: var(--space-lg); } /* ----------------------------------------------------- BENEFITS ----------------------------------------------------- */ .service-benefits { padding-block: var(--space-xl); } .benefits-grid { grid-template-columns: 1fr; gap: var(--space-xl); } /* ----------------------------------------------------- DETAIL FEATURES ----------------------------------------------------- */ .detail-features { grid-template-columns: 1fr; gap: var(--space-md); } .detail-feature { padding: var(--space-md); } html[dir="rtl"] .cart-item, html[dir="rtl"] .cart-item-actions { direction: rtl; } html[dir="rtl"] .cart-continue i { transform: scaleX(-1); } html[dir="rtl"] .service-card-link i { transform: scaleX(-1); } html[dir="rtl"] .service-card:hover .service-card-link i { transform: translateX(-4px) scaleX(-1); } /* ===================================================== SHOP ===================================================== */ .shop-hero { padding-block: var(--space-xl); } .shop-hero-grid { grid-template-columns: 1fr; gap: var(--space-xl); } .shop-hero-art { min-height: 220px; } .shop-art-circle { width: 190px; height: 190px; } .shop-art-circle i { font-size: 4rem; } .shop-section { padding-block: var(--space-xl); } .shop-toolbar { flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-bottom: var(--space-lg); } .shop-filters { width: 100%; justify-content: flex-start; } .shop-filter { font-size: .76rem; padding: .5rem .75rem; } .product-grid { grid-template-columns: 1fr; gap: var(--space-md); } .product-visual { height: 220px; } .product-info { padding: var(--space-md); } .product-bottom { flex-wrap: wrap; } .product-add { padding: .55rem .8rem; } .shop-promise { padding-block: var(--space-xl); } .promise-grid { grid-template-columns: 1fr; gap: var(--space-xl); } /* ===================================================== HEAD & TAIL — COMMON PAGES ===================================================== */ .ht-page-hero, .ht-blog-hero { padding-block: var(--space-xl); } .ht-page-hero-inner { max-width: 100%; } .ht-page-hero-inner p:not(.eyebrow) { font-size: .95rem; } /* ===================================================== HT SHOP ===================================================== */ .ht-shop-section, .ht-blog-section, .ht-tips-section { padding-block: var(--space-xl); } .ht-filter-pills { justify-content: flex-start; } .ht-care-strip { padding-block: var(--space-lg); } .ht-care-strip-inner { flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); } /* ===================================================== BLOG ===================================================== */ .ht-blog-hero-grid { grid-template-columns: 1fr; gap: var(--space-lg); } .ht-blog-feature > div { padding: var(--space-md); } .ht-blog-feature h2 { font-size: 1.35rem; } .ht-article-grid { grid-template-columns: 1fr; gap: var(--space-md); } .ht-article-body { padding: var(--space-md); } .ht-article-body h3 { font-size: 1.1rem; } .ht-blog-categories { padding-block: var(--space-xl); } .ht-category-links { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } .ht-category-links a { min-height: 105px; padding: var(--space-sm); } /* ===================================================== CARE TIPS ===================================================== */ .ht-tip-grid { grid-template-columns: 1fr; gap: var(--space-md); } .ht-tip-feature { padding: var(--space-md); } /* ===================================================== AUTH ===================================================== */ .ht-auth-section { min-height: auto; padding-block: var(--space-xl); } .ht-auth-card h1 { font-size: 2rem; } .ht-auth-form { margin-top: var(--space-md); } .ht-auth-row { flex-direction: column; align-items: flex-start; gap: 8px; } .ht-password-rules { gap: 5px; } html[dir="rtl"] .shop-toolbar { align-items: flex-start; } html[dir="rtl"] .shop-filters, html[dir="rtl"] .ht-filter-pills { justify-content: flex-start; } html[dir="rtl"] .ht-care-strip-inner { align-items: flex-start; } html[dir="rtl"] .ht-password-toggle { right: auto; left: 7px; } html[dir="rtl"] .ht-password-wrap input { padding-inline-end: 1rem !important; padding-inline-start: 3rem !important; } .ht-404-section { min-height: auto; padding-block: var(--space-xl); } .ht-404-card { max-width: 100%; padding-inline: var(--space-sm); } .ht-404-number { font-size: clamp(6rem, 32vw, 9rem); line-height: .8; } .ht-404-paw { width: 50px; height: 50px; margin-bottom: var(--space-sm); } .ht-404-card h1 { font-size: 1.7rem; } .ht-404-card > p:not(.eyebrow) { max-width: 42ch; font-size: .9rem; } .ht-404-card .hero-actions { flex-direction: column; align-items: stretch; width: 100%; margin-top: var(--space-md); } .ht-404-card .hero-actions .btn { width: 100%; } html[dir="rtl"] .ht-404-card { text-align: center; } html[dir="rtl"] .ht-filter-pills { justify-content: flex-start; } .service-art-circle { width: 240px; height: 240px; } /* ----------------------------------------------------- AUTH LOGO ----------------------------------------------------- */ .ht-auth-logo { margin-bottom: 1.15rem; } .ht-auth-logo-name { font-size: 1.35rem; } .ht-auth-logo-paw { font-size: 1.2rem; } /* ----------------------------------------------------- HEADING ----------------------------------------------------- */ /* ----------------------------------------------------- FORM ----------------------------------------------------- */ .ht-auth-form { margin-top: var(--space-sm); } .ht-auth-form input[type="text"], .ht-auth-form input[type="email"], .ht-auth-form input[type="password"] { min-height: 44px; } /* ----------------------------------------------------- LOGIN ROW ----------------------------------------------------- */ .ht-auth-row { align-items: flex-start; flex-direction: column; gap: 7px; } /* ----------------------------------------------------- PASSWORD RULES ----------------------------------------------------- */ .ht-password-rules span { font-size: .65rem; padding: 3px 6px; } /* ----------------------------------------------------- RESET MESSAGE ----------------------------------------------------- */ .ht-reset-message { font-size: .76rem; } html[dir="rtl"] .ht-auth-row { align-items: flex-start; } html[dir="rtl"] .ht-password-toggle { right: auto; left: 6px; } html[dir="rtl"] .ht-password-wrap input { padding-inline-end: .9rem !important; padding-inline-start: 3rem !important; } .contact-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } .contact-hero-art { order: 2; } .contact-hero-content { order: 1; } .contact-art-image { aspect-ratio: 4 / 3; border-radius: 18px; } /* --------------------------------------------------------- MOBILE — GENERAL RESPONSIVE SAFEGUARDS --------------------------------------------------------- */ .container { padding-inline: 12px; } section { padding-block: var(--space-xl); } .hero .container, .split-section .container, .contact-grid { grid-template-columns: 1fr; } .hero-content, .split-content { max-width: 100%; } .hero-actions, .split-actions, .section-flex-head, .footer-bottom { flex-direction: column; align-items: stretch; } .hero-actions .btn, .split-actions .btn, .section-flex-head .btn { width: 100%; } .contact-form-row { grid-template-columns: 1fr; } .newsletter-form { flex-direction: column; width: 100%; } .newsletter-form .btn { width: 100%; } .pet-categories, .product-grid, .tips-grid, .editorial-grid, .stories-grid, .why-list, .services-grid, .benefits-grid, .promise-grid, .contact-help-grid { grid-template-columns: 1fr; } .arrivals-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom-links { flex-wrap: wrap; } .split-media, .hero-image-wrap, .contact-form-card, .contact-info-card { max-width: 100%; } .mobile-menu { display: flex; } } /* ========================================================= TABLET 768px - 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } /* Hide desktop navigation */ .navbar-nav { display: none; } /* Hide desktop actions */ .navbar-actions { display: none; } /* Hide desktop cart */ .navbar > .cart-btn { display: none; } /* Hide desktop account */ .navbar > .account-btn { display: none; } /* Show hamburger */ .menu-toggle { display: inline-flex; margin-inline-start: auto; } /* Mobile / Tablet menu */ .mobile-menu { display: flex; } .navbar { padding-inline: 20px; } .navbar-brand { font-size: 1.3rem; } .navbar-brand i { font-size: 1.05rem; } .menu-toggle { width: 44px; height: 44px; flex-basis: 44px; } .mobile-menu-header { padding-inline: 20px; } .mobile-menu-header .navbar-brand { font-size: 1.3rem; } .mobile-menu-close { width: 44px; height: 44px; flex-basis: 44px; } .mobile-nav { padding-inline: 20px; } .mobile-nav-item > a, .mobile-dropdown-trigger { min-height: 54px; font-size: 1.05rem; } .mobile-dropdown-panel a { font-size: 0.95rem; } .mobile-menu-footer { min-height: 68px; padding: 12px 20px; gap: 8px; } .mobile-menu-footer .icon-btn { width: 44px; height: 44px; flex-basis: 44px; } .mobile-menu-footer .cart-count { top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 0.65rem; } .loader-logo { font-size: 1.7rem; } .loader-line { width: 125px; height: 2px; margin-top: var(--space-md); } .products-section { padding: 65px 0; } .hero { padding-block: 3.5rem 4rem; } .hero .container { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr); gap: 2.5rem; } .hero-content h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); } .hero-content > p:not(.eyebrow) { max-width: 44ch; font-size: 1rem; } .hero-actions { gap: 10px; } .hero-stats { gap: 1.5rem; margin-top: 2rem; } .hero-stat b { font-size: 1.4rem; } .hero-stat span { font-size: 0.72rem; } .hero-image-wrap { width: 100%; max-width: 400px; aspect-ratio: 4 / 5; } .hero-ring { width: 150px; height: 150px; top: -7%; left: -7%; } .hero-badge { padding: 9px 12px; } .hero-badge--top { top: 7%; right: -3%; } .hero-badge--bottom { bottom: 7%; left: -4%; } /* ----------------------------------------------------- SHOP BY PET ----------------------------------------------------- */ .pet-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .pet-category { aspect-ratio: 3 / 4; border-radius: 18px; } .pet-category-body { padding: 14px; } .pet-category-body span { font-size: 0.66rem; } .pet-category-body h3 { font-size: 1.05rem; } .pet-category-arrow { top: 14px; right: 14px; width: 34px; height: 34px; } /* ----------------------------------------------------- PRODUCTS ----------------------------------------------------- */ .section-flex-head { gap: 24px; margin-bottom: 28px; align-items: flex-start; flex-direction: column; } /* ----------------------------------------------------- PRODUCT CARD ----------------------------------------------------- */ .product-card { border-radius: 20px; } .product-tag { top: 12px; left: 12px; padding: 6px 10px; font-size: 0.62rem; } .product-body { padding: 16px; min-height: 150px; } .product-body h4 { font-size: 0.95rem; } .product-category { font-size: 0.64rem; } .product-rating { font-size: 0.68rem; } .product-rating span { font-size: 0.68rem; } .product-price { font-size: 1rem; } /* ----------------------------------------------------- QUICK ADD ----------------------------------------------------- */ .quick-add { width: 38px; height: 38px; } .quick-add.quantity-active { min-width: 116px; height: 38px; } .quick-add .quantity-minus, .quick-add .quantity-plus, .quick-add .quantity-delete { width: 28px; height: 28px; flex-basis: 28px; } /* ----------------------------------------------------- NEW ARRIVALS ----------------------------------------------------- */ .arrivals-grid { grid-template-columns: 1.1fr 1fr; gap: 16px; } .arrival-feature { min-height: 400px; border-radius: 18px; } .arrival-feature-body { padding: 16px; } .arrival-feature-body h3 { font-size: 1.4rem; } .arrival-feature-body p { font-size: 0.9rem; } .arrival-side { gap: 10px; } .arrival-card { gap: 10px; padding: 9px; } .arrival-card-media { width: 70px; height: 70px; } .arrival-card-body span { font-size: 0.67rem; } .arrival-cta { padding: 14px; } .arrival-cta p { font-size: 0.84rem; } .about-hero { padding-top: var(--space-lg); } .about-hero .hero-visual { min-height: auto; } .split-section .container { grid-template-columns: 1fr; gap: var(--space-lg); } .split-media { max-width: 100%; margin-inline: auto; } .split-content { max-width: 680px; margin-inline: auto; width: 100%; } .about-hero ~ .why-section .why-list { grid-template-columns: 1fr; gap: var(--space-sm); } .about-hero + .split-section { padding-top: var(--space-xl); } .about-hero ~ .why-section .why-row { padding: var(--space-md); } .contact-hero-grid, .contact-grid { grid-template-columns: 1fr; } .contact-hero-content { text-align: center; margin-inline: auto; } .contact-hero-content > p:last-child { margin-inline: auto; } .contact-hero-art { min-height: 280px; } .contact-info { max-width: 700px; margin-inline: auto; width: 100%; } .contact-form-wrap { width: 100%; } .contact-help-grid { grid-template-columns: repeat(2, 1fr); } .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } .ht-blog-hero-grid { grid-template-columns: 1fr; } .ht-blog-hero-copy { text-align: center; max-width: 700px; margin-inline: auto; } .ht-blog-hero-copy > p:not(.eyebrow) { margin-inline: auto; } .ht-blog-hero-copy .hero-actions { justify-content: center; } .ht-article-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .ht-category-links { grid-template-columns: repeat(3,1fr); } .ht-tip-grid { grid-template-columns: repeat(2,1fr); } .ht-care-strip-inner { align-items: flex-start; flex-direction: column; } .ht-filter-pills { justify-content: flex-start; } /* ----------------------------------------------------- 13. QUICK CARE TIPS ----------------------------------------------------- */ .tips-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } /* ----------------------------------------------------- 14. GROOMING / PET CARE ----------------------------------------------------- */ .split-section .container { grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.15fr); gap: var(--space-lg); } .split-media { max-width: 360px; } .split-media img { max-height: 450px; } .split-media-note { right: -3%; max-width: 160px; } .service-row { gap: var(--space-sm); } /* ----------------------------------------------------- 15. CARE TIPS / EDITORIAL BLOG ----------------------------------------------------- */ .editorial-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } /* ----------------------------------------------------- 16. CUSTOMER STORIES ----------------------------------------------------- */ .stories-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } /* ----------------------------------------------------- 17. WHY HEAD & TAIL ----------------------------------------------------- */ .why-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } /* ----------------------------------------------------- 18. CTA / NEWSLETTER ----------------------------------------------------- */ .cta-section { padding: var(--space-xl) var(--space-lg); } .newsletter-form { max-width: 520px; } /* ----------------------------------------------------- NEWSLETTER SUCCESS POPUP ----------------------------------------------------- */ .newsletter-success-card { max-width: 420px; } /* ----------------------------------------------------- 19. BACK TO TOP ----------------------------------------------------- */ .back-to-top { bottom: 20px; right: 20px; } /* ----------------------------------------------------- 20. FOOTER ----------------------------------------------------- */ .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } .footer-bottom { gap: var(--space-sm); } html[dir="rtl"] .split-media-note { right: auto; left: -3%; } html[dir="rtl"] .back-to-top { right: auto; left: 20px; } /* ----------------------------------------------------- ABOUT HERO ----------------------------------------------------- */ .about-hero { padding-top: var(--space-xl); } .about-hero .hero-visual { min-height: 440px; } /* ----------------------------------------------------- ABOUT STORY ----------------------------------------------------- */ .about-hero + .split-section { padding-top: var(--space-2xl); } .split-section .container { grid-template-columns: minmax(250px, 0.85fr) minmax(0, 1.15fr); gap: var(--space-xl); } .split-media { max-width: 380px; } .split-content { max-width: 100%; } .split-actions { gap: var(--space-xs); } /* ----------------------------------------------------- ABOUT VALUES ----------------------------------------------------- */ .about-hero ~ .why-section .section-head { margin-bottom: var(--space-lg); } .about-hero ~ .why-section .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } /* ----------------------------------------------------- ABOUT PET FAMILY ----------------------------------------------------- */ .about-hero ~ .category-section { padding-block: var(--space-2xl); } .about-hero ~ .category-section .section-head { margin-bottom: var(--space-lg); } /* ----------------------------------------------------- ABOUT CTA ----------------------------------------------------- */ .about-hero ~ .cta-section { max-width: 90%; } .about-hero ~ .cta-wrap .cta-section::before { width: 150px; height: 150px; left: -60px; top: -65px; } .about-hero ~ .cta-wrap .cta-section::after { width: 100px; height: 100px; right: -40px; bottom: -45px; } /* ----------------------------------------------------- ABOUT PAGE — RTL TABLET ----------------------------------------------------- */ html[dir="rtl"] .split-section .container { direction: rtl; } html[dir="rtl"] .split-media { margin-inline: auto; } /* ----------------------------------------------------- CONTACT HERO ----------------------------------------------------- */ .contact-hero { padding-block: var(--space-2xl); } .contact-hero-grid { grid-template-columns: 1fr 0.8fr; gap: var(--space-xl); } .contact-hero-content h1 { max-width: 600px; } .contact-hero-content > p:last-child { font-size: 1rem; } .contact-hero-art { min-height: 320px; } .contact-art-circle { width: 220px; height: 220px; } .contact-art-circle i { font-size: 5rem; } /* ----------------------------------------------------- CONTACT CONTENT ----------------------------------------------------- */ .contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-xl); } .contact-info-card { padding: var(--space-sm); } /* ----------------------------------------------------- CONTACT FORM ----------------------------------------------------- */ .contact-form-card { padding: var(--space-lg); } .contact-form-row { grid-template-columns: 1fr 1fr; gap: var(--space-sm); } /* ----------------------------------------------------- QUICK HELP ----------------------------------------------------- */ .contact-help-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } html[dir="rtl"] .contact-hero-grid, html[dir="rtl"] .contact-grid, html[dir="rtl"] .contact-help-grid { direction: rtl; } /* ----------------------------------------------------- CART / CHECKOUT HERO ----------------------------------------------------- */ .cart-hero { padding-block: var(--space-2xl); } /* ----------------------------------------------------- CART LAYOUT ----------------------------------------------------- */ .cart-section { padding-block: var(--space-2xl); } .cart-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-lg); } /* ----------------------------------------------------- CART ITEMS ----------------------------------------------------- */ .cart-item { grid-template-columns: 84px minmax(0, 1fr) auto; gap: var(--space-sm); padding: var(--space-sm); } .cart-item-image { width: 84px; height: 84px; } .cart-item-actions { gap: var(--space-xs); } /* ----------------------------------------------------- SUMMARY ----------------------------------------------------- */ .cart-summary { top: 90px; padding: var(--space-md); } /* ===================================================== SERVICES ===================================================== */ .service-hero, .service-detail-hero { padding-block: var(--space-2xl); } .service-hero-grid, .service-detail-grid { grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr); gap: var(--space-xl); } .service-hero-art, .detail-visual { min-height: 280px; } .service-art-circle, .detail-visual-circle { width: 210px; height: 210px; } .service-art-circle i, .detail-visual-circle i { font-size: 4.5rem; } /* ----------------------------------------------------- SERVICES OVERVIEW ----------------------------------------------------- */ .services-overview, .detail-content { padding-block: var(--space-2xl); } .services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .service-card { padding: var(--space-lg); } /* ----------------------------------------------------- BENEFITS ----------------------------------------------------- */ .service-benefits { padding-block: var(--space-2xl); } .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } /* ----------------------------------------------------- DETAIL FEATURES ----------------------------------------------------- */ .detail-features { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } html[dir="rtl"] .cart-item, html[dir="rtl"] .cart-item-actions { direction: rtl; } html[dir="rtl"] .service-card-link i { transform: scaleX(-1); } html[dir="rtl"] .service-card:hover .service-card-link i { transform: translateX(-4px) scaleX(-1); } /* ===================================================== SHOP ===================================================== */ .shop-hero { padding-block: var(--space-2xl); } .shop-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr); gap: var(--space-xl); } .shop-hero-art { min-height: 280px; } .shop-art-circle { width: 210px; height: 210px; } .shop-art-circle i { font-size: 4.5rem; } .shop-section { padding-block: var(--space-2xl); } .shop-toolbar { align-items: flex-end; gap: var(--space-md); } .shop-filters { justify-content: flex-end; } .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .product-visual { height: 210px; } .shop-promise { padding-block: var(--space-2xl); } .promise-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); } /* ===================================================== HEAD & TAIL ===================================================== */ .ht-page-hero, .ht-blog-hero { padding-block: var(--space-2xl); } .ht-blog-hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } .ht-blog-feature { min-height: 380px; } .ht-article-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .ht-blog-categories { padding-block: var(--space-2xl); } .ht-category-links { grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); } .ht-category-links a { min-height: 115px; } /* ===================================================== CARE TIPS ===================================================== */ .ht-tip-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } /* ===================================================== AUTH ===================================================== */ .ht-auth-section { padding-block: var(--space-2xl); } .ht-auth-card { width: min(100%, 540px); } html[dir="rtl"] .shop-toolbar { direction: rtl; } html[dir="rtl"] .shop-filters, html[dir="rtl"] .ht-filter-pills { direction: rtl; } html[dir="rtl"] .ht-blog-hero-grid { direction: rtl; } html[dir="rtl"] .ht-password-toggle { right: auto; left: 7px; } html[dir="rtl"] .ht-password-wrap input { padding-inline-end: 1rem !important; padding-inline-start: 3rem !important; } .ht-404-section { min-height: calc(100vh - var(--header-h)); padding-block: var(--space-2xl); } .ht-404-card { max-width: 720px; } .ht-404-number { font-size: clamp(8rem, 20vw, 12rem); } .ht-404-paw { width: 54px; height: 54px; } .ht-404-card h1 { font-size: 2rem; } html[dir="rtl"] .ht-404-card { text-align: center; } html[dir="rtl"] .ht-filter-pills { justify-content: flex-start; } .service-art-circle { width: 280px; height: 280px; } .ht-auth-section { min-height: calc(100vh - var(--header-h)); padding-block: 2.5rem 3.5rem; } .ht-auth-card { width: min(100%, 460px); padding: 1.75rem; } /* ----------------------------------------------------- AUTH LOGO ----------------------------------------------------- */ .ht-auth-logo { margin-bottom: 1.35rem; } .ht-auth-logo-name { font-size: 1.5rem; } /* ----------------------------------------------------- HEADING ----------------------------------------------------- */ .ht-auth-card h1 { font-size: 2rem; } .ht-auth-intro { font-size: .88rem; } /* ----------------------------------------------------- FORM ----------------------------------------------------- */ .ht-auth-form { margin-top: var(--space-md); } /* ----------------------------------------------------- LOGIN ROW ----------------------------------------------------- */ .ht-auth-row { flex-direction: row; align-items: center; } html[dir="rtl"] .ht-password-toggle { right: auto; left: 6px; } html[dir="rtl"] .ht-password-wrap input { padding-inline-end: .9rem !important; padding-inline-start: 3rem !important; } .contact-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; } /* --------------------------------------------------------- TABLET — GENERAL RESPONSIVE SAFEGUARDS --------------------------------------------------------- */ .container { padding-inline: 18px; } .pet-categories, .product-grid, .tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .editorial-grid, .stories-grid, .services-grid, .benefits-grid, .promise-grid, .contact-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arrivals-grid { grid-template-columns: 1fr 1fr; } .contact-form-row { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================= LARGE DEVICES 1024px - 1280px ========================================================= */ @media (min-width: 1024px) and (max-width: 1280px) { /* Desktop navigation */ .navbar-nav { display: flex; } /* Desktop actions */ .navbar-actions { display: flex; } /* Desktop cart */ .navbar > .cart-btn { display: inline-flex; } /* Desktop account */ .navbar > .account-btn { display: inline-flex; } /* Hide hamburger */ .menu-toggle { display: none; } /* Hide mobile menu */ .mobile-menu { display: none; } .loader-logo { font-size: 1.85rem; } .loader-line { width: 135px; height: 2px; margin-top: var(--space-md); } .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .hero { padding-block: 4rem; } .hero .container { grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: 3.5rem; } .hero-content h1 { font-size: clamp(3rem, 4.5vw, 4.5rem); } .hero-content > p:not(.eyebrow) { font-size: 1rem; } .hero-stats { gap: 2rem; } .hero-image-wrap { max-width: 500px; } .hero-ring { width: 190px; height: 190px; } .hero-badge--top { right: -3%; } .hero-badge--bottom { left: -5%; } /* ----------------------------------------------------- SHOP BY PET ----------------------------------------------------- */ .pet-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .pet-category { aspect-ratio: 3 / 4; } .pet-category-body { padding: 16px; } /* ----------------------------------------------------- PRODUCTS ----------------------------------------------------- */ .products-section { padding: var(--space-xl) 0; } .section-flex-head { gap: 28px; margin-bottom: 30px; } .product-card { border-radius: 21px; } .product-body { padding: 17px; min-height: 154px; } .product-body h4 { font-size: 0.98rem; } .product-category { font-size: 0.66rem; } .product-price { font-size: 1.03rem; } /* ----------------------------------------------------- NEW ARRIVALS ----------------------------------------------------- */ .arrivals-grid { grid-template-columns: 1.15fr 1fr; gap: 18px; } .arrival-feature { min-height: 410px; } .arrival-feature-body { padding: 17px; } .arrival-feature-body h3 { font-size: 1.45rem; } .arrival-side { gap: 11px; } .arrival-card { padding: 9px; } /* ----------------------------------------------------- 13. QUICK CARE TIPS ----------------------------------------------------- */ .tips-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); } /* ----------------------------------------------------- 14. GROOMING / PET CARE ----------------------------------------------------- */ .split-section .container { grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr); gap: var(--space-xl); } .split-media { max-width: 400px; } /* ----------------------------------------------------- 15. CARE TIPS / EDITORIAL BLOG ----------------------------------------------------- */ .editorial-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } /* ----------------------------------------------------- 16. CUSTOMER STORIES ----------------------------------------------------- */ .stories-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } /* ----------------------------------------------------- 17. WHY HEAD & TAIL ----------------------------------------------------- */ .why-list { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } /* ----------------------------------------------------- 18. CTA / NEWSLETTER ----------------------------------------------------- */ .cta-section { max-width: 780px; } /* ----------------------------------------------------- 20. FOOTER ----------------------------------------------------- */ .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--space-lg); } /* ----------------------------------------------------- ABOUT HERO ----------------------------------------------------- */ .about-hero { padding-top: var(--space-xl); } .about-hero .hero-visual { min-height: 500px; } /* ----------------------------------------------------- ABOUT STORY ----------------------------------------------------- */ .about-hero + .split-section { padding-top: var(--space-3xl); } .split-section .container { grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); } .split-media { max-width: 480px; } .split-content { max-width: 600px; } /* ----------------------------------------------------- ABOUT VALUES ----------------------------------------------------- */ .about-hero ~ .why-section .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); } /* ----------------------------------------------------- ABOUT PET FAMILY ----------------------------------------------------- */ .about-hero ~ .category-section { padding-block: var(--space-3xl); } /* ----------------------------------------------------- ABOUT CTA ----------------------------------------------------- */ .about-hero ~ .cta-wrap .cta-section::before { width: 180px; height: 180px; } .about-hero ~ .cta-wrap .cta-section::after { width: 120px; height: 120px; } /* ----------------------------------------------------- CONTACT HERO ----------------------------------------------------- */ .contact-hero { padding-block: var(--space-2xl); } .contact-hero-grid { grid-template-columns: 1fr 0.85fr; gap: var(--space-xl); } .contact-hero-art { min-height: 340px; } .contact-art-circle { width: 240px; height: 240px; } .contact-art-circle i { font-size: 5.5rem; } /* ----------------------------------------------------- CONTACT CONTENT ----------------------------------------------------- */ .contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-xl); } /* ----------------------------------------------------- CONTACT FORM ----------------------------------------------------- */ .contact-form-card { padding: var(--space-xl); } .contact-form-row { grid-template-columns: 1fr 1fr; gap: var(--space-md); } /* ----------------------------------------------------- QUICK HELP ----------------------------------------------------- */ .contact-help-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } html[dir="rtl"] .contact-hero-grid, html[dir="rtl"] .contact-grid, html[dir="rtl"] .contact-help-grid { direction: rtl; } /* ----------------------------------------------------- CART / CHECKOUT ----------------------------------------------------- */ .cart-hero { padding-block: var(--space-2xl); } .cart-section { padding-block: var(--space-2xl); } .cart-layout { grid-template-columns: minmax(0, 1fr) 350px; gap: var(--space-lg); } /* ----------------------------------------------------- CART ITEMS ----------------------------------------------------- */ .cart-item { grid-template-columns: 90px minmax(0, 1fr) auto; gap: var(--space-md); } .cart-item-image { width: 90px; height: 90px; } /* ----------------------------------------------------- SUMMARY ----------------------------------------------------- */ .cart-summary { top: 100px; } /* ===================================================== SERVICES ===================================================== */ .service-hero, .service-detail-hero { padding-block: var(--space-2xl); } .service-hero-grid, .service-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr); gap: var(--space-2xl); } .service-hero-art, .detail-visual { min-height: 320px; } .service-art-circle, .detail-visual-circle { width: 230px; height: 230px; } /* ----------------------------------------------------- SERVICES OVERVIEW ----------------------------------------------------- */ .services-overview, .detail-content { padding-block: var(--space-2xl); } .services-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } /* ----------------------------------------------------- BENEFITS ----------------------------------------------------- */ .service-benefits { padding-block: var(--space-2xl); } .benefits-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } /* ----------------------------------------------------- DETAIL FEATURES ----------------------------------------------------- */ .detail-features { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } html[dir="rtl"] .cart-item, html[dir="rtl"] .cart-item-actions { direction: rtl; } html[dir="rtl"] .service-card-link i { transform: scaleX(-1); } html[dir="rtl"] .service-card:hover .service-card-link i { transform: translateX(-4px) scaleX(-1); } /* ===================================================== SHOP ===================================================== */ .shop-hero { padding-block: var(--space-2xl); } .shop-hero-grid { grid-template-columns: 1fr .75fr; gap: var(--space-xl); } .shop-hero-art { min-height: 300px; } .shop-art-circle { width: 230px; height: 230px; } .shop-section { padding-block: var(--space-2xl); } .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); } .product-visual { height: 195px; } .shop-promise { padding-block: var(--space-2xl); } .promise-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } /* ===================================================== HEAD & TAIL ===================================================== */ .ht-page-hero, .ht-blog-hero { padding-block: var(--space-2xl); } .ht-blog-hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } .ht-blog-feature { min-height: 420px; } .ht-article-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .ht-blog-categories { padding-block: var(--space-2xl); } .ht-category-links { grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); } .ht-category-links a { min-height: 120px; } /* ===================================================== CARE TIPS ===================================================== */ .ht-tip-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } /* ===================================================== AUTH ===================================================== */ .ht-auth-section { padding-block: var(--space-2xl); } html[dir="rtl"] .shop-toolbar { direction: rtl; } html[dir="rtl"] .shop-filters, html[dir="rtl"] .ht-filter-pills { direction: rtl; } html[dir="rtl"] .ht-blog-hero-grid { direction: rtl; } html[dir="rtl"] .ht-password-toggle { right: auto; left: 7px; } html[dir="rtl"] .ht-password-wrap input { padding-inline-end: 1rem !important; padding-inline-start: 3rem !important; } .ht-404-section { min-height: calc(100vh - var(--header-h)); padding-block: var(--space-2xl); } .ht-404-card { max-width: 800px; } .ht-404-number { font-size: clamp(9rem, 18vw, 14rem); } html[dir="rtl"] .ht-404-card { text-align: center; } html[dir="rtl"] .ht-filter-pills { justify-content: flex-start; } .service-art-circle { width: 320px; height: 320px; } .ht-auth-section { min-height: calc(100vh - var(--header-h)); padding-block: 3rem 4rem; } .ht-auth-card { width: min(100%, 460px); padding: 1.9rem; } /* ----------------------------------------------------- AUTH LOGO ----------------------------------------------------- */ .ht-auth-logo { margin-bottom: 1.5rem; } .ht-auth-logo-name { font-size: 1.6rem; } /* ----------------------------------------------------- HEADING ----------------------------------------------------- */ .ht-auth-card h1 { font-size: 2.25rem; } .ht-auth-intro { font-size: .9rem; } /* ----------------------------------------------------- FORM ----------------------------------------------------- */ .ht-auth-form { margin-top: var(--space-md); } html[dir="rtl"] .ht-password-toggle { right: auto; left: 6px; } html[dir="rtl"] .ht-password-wrap input { padding-inline-end: .9rem !important; padding-inline-start: 3rem !important; } /* --------------------------------------------------------- LARGE DEVICES — GENERAL RESPONSIVE SAFEGUARDS --------------------------------------------------------- */ .container { padding-inline: 24px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .split-media img, .about-hero ~ .why-section .why-row, .about-hero ~ .why-section .why-icon { transition: none; } } /* ========================================================= RESPONSIVE — PAGE LOADER + SITE HEADER ========================================================= */ /* ========================================================= MOBILE 320px - 767px ========================================================= */ @media (min-width: 320px) and (max-width: 767px) { /* PAGE LOADER */ .loader-logo { font-size: 1.6rem; } .loader-line { width: 110px; margin-top: var(--space-sm); } /* SITE HEADER */ .site-header { width: 100%; } } /* ========================================================= TABLET 768px - 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { /* PAGE LOADER */ .loader-logo { font-size: 1.8rem; } .loader-line { width: 125px; } /* SITE HEADER */ .site-header { width: 100%; } } /* ========================================================= LARGE DEVICES 1024px - 1280px ========================================================= */ @media (min-width: 1024px) and (max-width: 1280px) { /* PAGE LOADER */ .loader-logo { font-size: 1.9rem; } .loader-line { width: 140px; } /* SITE HEADER */ .site-header { width: 100%; } }