/* Theme Name: Rayha Description: RTL WooCommerce storefront for Rayha Shop โ€” perfume, skincare & makeup. Light/dark mode. Version: 1.0.0 Text Domain: rayha */ @font-face { font-family: "IRANYekanX"; src: url("assets/fonts/IRANYekanXFaNum-Regular.woff2") format("woff2"); font-weight: 100 900; /* single file; browser synthesizes bold */ font-display: swap; } /* ---------- Tokens (brand: #417067 deep sage, #ABE5D9 mint) ---------- */ :root { --brand: #417067; --brand-ink: #2c4f48; --mint: #abe5d9; --mint-soft: #e3f5f0; --peach: #ffcfb8; --blush: #f7b8c6; --sun: #ffe29a; --bg: #f7fbf9; --bg-alt: #edf6f2; --surface: #ffffff; --text: #1d2f2b; --muted: #5e746f; --line: #d7e8e2; --accent: var(--brand); --on-accent: #ffffff; --sale: #e2566f; --shadow: 0 1px 2px rgb(29 47 43 / .06), 0 10px 30px -12px rgb(29 47 43 / .18); --shadow-lg: 0 24px 60px -24px rgb(29 47 43 / .35); --r: 22px; --r-sm: 14px; --wrap: 1240px; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23417067' stroke-opacity='0.09' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(38 52) rotate(-28) scale(1)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(168 40) rotate(34) scale(0.8)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(110 140) rotate(-62) scale(1.1)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(26 196) rotate(12) scale(0.75)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(206 176) rotate(-8) scale(0.9)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3C/g%3E%3Cg fill='%23417067' fill-opacity='0.09'%3E%3Ccircle cx='96' cy='30' r='1.6'/%3E%3Ccircle cx='214' cy='102' r='1.6'/%3E%3Ccircle cx='60' cy='118' r='1.6'/%3E%3Ccircle cx='152' cy='212' r='1.6'/%3E%3Ccircle cx='186' cy='128' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); /* faint leaf pattern from the logo */ --ease: cubic-bezier(.2, .8, .2, 1); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1a18; --bg-alt: #13221f; --surface: #182b27; --text: #e7f4f0; --muted: #9bb6af; --line: #26403a; --accent: #7fd3c1; --on-accent: #0c1715; --mint-soft: #1d3832; --brand-ink: #abe5d9; --sale: #ff7d93; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -14px rgb(0 0 0 / .7); --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / .8); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23abe5d9' stroke-opacity='0.06' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(38 52) rotate(-28) scale(1)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(168 40) rotate(34) scale(0.8)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(110 140) rotate(-62) scale(1.1)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(26 196) rotate(12) scale(0.75)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(206 176) rotate(-8) scale(0.9)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3C/g%3E%3Cg fill='%23abe5d9' fill-opacity='0.06'%3E%3Ccircle cx='96' cy='30' r='1.6'/%3E%3Ccircle cx='214' cy='102' r='1.6'/%3E%3Ccircle cx='60' cy='118' r='1.6'/%3E%3Ccircle cx='152' cy='212' r='1.6'/%3E%3Ccircle cx='186' cy='128' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0f1a18; --bg-alt: #13221f; --surface: #182b27; --text: #e7f4f0; --muted: #9bb6af; --line: #26403a; --accent: #7fd3c1; --on-accent: #0c1715; --mint-soft: #1d3832; --brand-ink: #abe5d9; --sale: #ff7d93; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -14px rgb(0 0 0 / .7); --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / .8); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23abe5d9' stroke-opacity='0.06' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(38 52) rotate(-28) scale(1)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(168 40) rotate(34) scale(0.8)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(110 140) rotate(-62) scale(1.1)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(26 196) rotate(12) scale(0.75)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3Cpath transform='translate(206 176) rotate(-8) scale(0.9)' d='M0 0c10-16 30-22 46-20-3 16-17 31-46 20zM0 0 32-14'/%3E%3C/g%3E%3Cg fill='%23abe5d9' fill-opacity='0.06'%3E%3Ccircle cx='96' cy='30' r='1.6'/%3E%3Ccircle cx='214' cy='102' r='1.6'/%3E%3Ccircle cx='60' cy='118' r='1.6'/%3E%3Ccircle cx='152' cy='212' r='1.6'/%3E%3Ccircle cx='186' cy='128' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); color-scheme: dark; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font: 16px/1.85 "IRANYekanX", Tahoma, sans-serif; background: var(--grain) var(--bg); /* tiled, scrolls with the page (fixed attachment would repaint on scroll) */ color: var(--text); overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 4px; } h1, h2, h3, h4 { line-height: 1.45; margin: 0 0 .6em; font-weight: 800; color: var(--text); } p { margin: 0 0 1em; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; } ::selection { background: var(--mint); color: #1d2f2b; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; background: var(--surface); padding: .5rem 1rem; border-radius: 10px; } .skip-link:focus { top: 1rem; } .wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; } .muted { color: var(--muted); } .i { width: 22px; height: 22px; flex: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---------- Buttons & fields ---------- */ .btn, .button, button.button, input[type="submit"], .wp-element-button, .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer; background: var(--accent); color: var(--on-accent) !important; font-weight: 700; line-height: 1.4; text-decoration: none !important; box-shadow: 0 8px 20px -10px var(--accent); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; } .btn:hover, .button:hover, input[type="submit"]:hover, .wpcf7-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px var(--accent); } .btn:active, .button:active { transform: translateY(0) scale(.98); } .btn-ghost { background: transparent; color: var(--accent) !important; box-shadow: inset 0 0 0 2px var(--accent); } .btn-ghost:hover { background: var(--mint-soft); box-shadow: inset 0 0 0 2px var(--accent); } .btn-light { background: #fff; color: #1d2f2b !important; box-shadow: none; } .button:disabled, .button.disabled { opacity: .5; cursor: not-allowed; transform: none; } input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea, .select2-container .select2-selection { width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface); transition: border-color .2s, box-shadow .2s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } label { font-size: .92rem; font-weight: 600; } /* ---------- Topbar & header ---------- */ .topbar { background: var(--brand); color: #fff; text-align: center; font-size: .82rem; padding: .45rem 1rem; } .topbar p { margin: 0; } .site-header { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top); /* app webview draws under the status bar */ background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .header-row { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; } .brand { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none !important; } .brand-mark { display: grid; place-items: center; } .brand-mark img { width: 63px; height: 40px; transition: transform .4s var(--ease); } .brand:hover .brand-mark img { transform: rotate(-6deg) scale(1.06); } .brand-text { display: flex; flex-direction: column; line-height: 1.25; } .brand-text b { font-size: 1.35rem; color: var(--brand-ink); } .brand-text small { font-size: .72rem; color: var(--muted); } .primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; } .primary-nav a { display: block; padding: .5rem .9rem; border-radius: 999px; color: var(--text); font-weight: 600; font-size: .95rem; text-decoration: none; transition: background-color .2s; } .primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current-menu-parent > a { background: var(--mint-soft); color: var(--brand-ink); } .primary-nav li { position: relative; } .primary-nav .sub-menu { position: absolute; top: 100%; inset-inline-start: 0; min-width: 210px; padding: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); display: block; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s var(--ease); } .primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .primary-nav .sub-menu a { border-radius: 10px; } .header-actions { display: flex; align-items: center; gap: .4rem; margin-inline-start: auto; } .icon-btn { position: relative; width: 44px; height: 44px; border-radius: 14px; border: 0; cursor: pointer; display: grid; place-items: center; background: transparent; color: var(--text); transition: background-color .2s, transform .2s; } .icon-btn:hover { background: var(--mint-soft); text-decoration: none; transform: translateY(-1px); } .theme-toggle .i:last-child { display: none; } :root[data-theme="dark"] .theme-toggle .i:first-child { display: none; } :root[data-theme="dark"] .theme-toggle .i:last-child { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i:first-child { display: none; } :root:not([data-theme="light"]) .theme-toggle .i:last-child { display: block; } } .cart-count { position: absolute; top: 2px; inset-inline-end: 0; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--sale); color: #fff; font-size: .72rem; line-height: 20px; text-align: center; font-weight: 700; } .cart-count[data-count="0"] { display: none; } .cart-count.bump { animation: bump .5s var(--ease); } @keyframes bump { 40% { transform: scale(1.5); } } .header-search { position: relative; width: 260px; } .header-search input { padding-inline-end: 2.8rem; border-radius: 999px; background: var(--bg-alt); border-color: transparent; font-size: .9rem; } .header-search button { position: absolute; inset-inline-end: 4px; top: 50%; translate: 0 -50%; border: 0; background: none; color: var(--muted); padding: .4rem; cursor: pointer; display: grid; } .menu-toggle { display: none; } @media (max-width: 1080px) { .header-search { display: none; } } @media (max-width: 900px) { .menu-toggle { display: grid; } .header-row { gap: .5rem; } .primary-nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw); z-index: 60; padding: 5rem 1rem 1rem; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .3s var(--ease); overflow-y: auto; } body.nav-open .primary-nav { transform: none; } .primary-nav ul { flex-direction: column; } .primary-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 1rem 0 0; } .brand-text small { display: none; } } /* ---------- Sections ---------- */ .section { padding: clamp(2.5rem, 6vw, 5rem) 0; } .section-alt { background: color-mix(in srgb, var(--bg-alt) 75%, transparent); } /* translucent so the pattern shows through */ .section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; } .section-head h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0; } .section-head p { margin: .2rem 0 0; color: var(--muted); } .eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--accent); background: var(--mint-soft); padding: .2rem .8rem; border-radius: 999px; margin-bottom: .6rem; } .link-more { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; } .link-more .i { width: 18px; height: 18px; transition: transform .2s; } .link-more:hover .i { transform: translateX(-4px); } /* ---------- Hero ---------- */ .hero { position: relative; padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 720px; aspect-ratio: 1; background: radial-gradient(circle closest-side, var(--mint), transparent); opacity: .55; z-index: -1; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; } .hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.3; margin-bottom: .4em; } .hero h1 em { font-style: normal; color: var(--accent); position: relative; white-space: nowrap; } .hero h1 em::after { content: ""; position: absolute; inset: auto -4px .08em; height: .32em; background: var(--mint); opacity: .55; border-radius: 99px; z-index: -1; transform: scaleX(var(--u, 1)); transform-origin: right; } .hero .lead { font-size: 1.1rem; color: var(--muted); max-width: 34rem; } .hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.6rem 0 2rem; } .hero-stats { display: flex; gap: 2rem; flex-wrap: wrap; } .hero-stats b { display: block; font-size: 1.6rem; color: var(--brand-ink); } .hero-stats span { font-size: .85rem; color: var(--muted); } .hero-art { position: relative; aspect-ratio: 1; max-width: 560px; justify-self: center; width: 100%; } .hero-blob { position: absolute; inset: 6%; border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; background: linear-gradient(140deg, var(--mint), var(--brand)); box-shadow: var(--shadow-lg); } @keyframes morph { 50% { transform: rotate(14deg) scale(1.03); } } /* transform only: border-radius morph repaints every frame */ .hero-bottle { position: absolute; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); } .hero-bottle img { width: 100%; height: 100%; object-fit: cover; } .hero-bottle.b1 { width: 54%; inset-inline-start: 23%; top: 14%; z-index: 2; rotate: -4deg; } .hero-bottle.b2 { width: 34%; inset-inline-start: 2%; bottom: 8%; rotate: 8deg; } .hero-bottle.b3 { width: 32%; inset-inline-end: 0; top: 4%; rotate: -10deg; } .hero-ring { position: absolute; inset: -2%; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); } .sticker { position: absolute; z-index: 3; background: var(--sun); color: #3d2e00; font-weight: 800; font-size: .9rem; padding: .6rem 1rem; border-radius: 999px; box-shadow: var(--shadow); rotate: 6deg; } .sticker.s1 { inset-inline-end: 6%; bottom: 14%; } .sticker.s2 { inset-inline-start: 0; top: 18%; background: var(--blush); color: #4a1020; rotate: -8deg; } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { max-width: 420px; order: -1; } } /* ---------- Category masonry ---------- */ .masonry { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 150px; grid-auto-flow: dense; } .tile { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r); padding: 1.2rem 1.3rem; display: flex; background: var(--c); color: #1d2f2b; text-decoration: none !important; transition: transform .35s var(--ease), box-shadow .35s; } .tile-wide { grid-column: span 2; } .tile-tall { grid-row: span 2; } .tile-big { grid-column: span 2; grid-row: span 2; } .tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .tile-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .15rem; max-width: 62%; } .tile b { font-size: 1.15rem; font-weight: 800; } .tile-big b { font-size: clamp(1.4rem, 2.6vw, 2rem); } .tile small { font-size: .82rem; opacity: .75; } .tile em { margin-top: auto; padding-top: .6rem; font-style: normal; font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; gap: .3rem; } .tile em .i { width: 16px; height: 16px; transition: transform .3s var(--ease); } .tile:hover em .i { transform: translateX(-5px); } .tile img { /* product shot floats in the corner, blended into tile colour */ position: absolute; z-index: 0; inset-inline-end: -6%; bottom: -8%; width: 58%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; mix-blend-mode: multiply; transition: transform .6s var(--ease); } .tile-tall img { width: 92%; bottom: -4%; } .tile-big img { width: 62%; bottom: -6%; } .tile-wide img { width: auto; height: 100%; bottom: 0; inset-inline-end: 8%; } .tile:hover img { transform: scale(1.08) rotate(-6deg); } .tile::before { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; inset-inline-end: -15%; bottom: -25%; border-radius: 50%; background: rgb(255 255 255 / .45); } :root[data-theme="dark"] .tile { filter: saturate(.85) brightness(.92); } @media (max-width: 900px) { .masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 130px; } } @media (max-width: 520px) { .masonry { gap: .6rem; grid-auto-rows: 118px; } .tile { padding: .9rem; border-radius: var(--r-sm); } .tile b { font-size: .98rem; } .tile small { display: none; } .tile-text { max-width: 75%; } } /* ---------- Featured spotlight ---------- */ .featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.2rem; align-items: stretch; } .featured .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spotlight { position: relative; display: flex; flex-direction: column; border-radius: calc(var(--r) * 1.3); overflow: hidden; color: #fff; isolation: isolate; background: linear-gradient(160deg, var(--brand), #1f3a35); text-decoration: none !important; min-height: 520px; } .spotlight-img { flex: 1; position: relative; overflow: hidden; } .spotlight-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } .spotlight:hover .spotlight-img img { transform: scale(1.05); } .spotlight-body { padding: 0 1.6rem 1.6rem; display: flex; flex-direction: column; gap: .35rem; margin-top: -3rem; position: relative; } .spotlight .card-brand { background: rgb(255 255 255 / .16); color: #fff; } .spotlight-title { font-size: 1.3rem; line-height: 1.6; } .spotlight .card-latin { color: rgb(255 255 255 / .7); } .spotlight .price { font-weight: 800; font-size: 1.2rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; } .spotlight .price del { color: rgb(255 255 255 / .6); } .spotlight .price ins { color: var(--sun); } .spotlight .btn { align-self: flex-start; margin-top: .6rem; background: #fff; color: #1d2f2b !important; } @media (max-width: 900px) { .featured { grid-template-columns: 1fr; } .spotlight { min-height: 440px; } } /* ---------- Promo banners ---------- */ .promos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .promo { position: relative; min-height: 280px; border-radius: var(--r); overflow: hidden; display: flex; align-items: end; padding: 1.8rem; color: #fff; text-decoration: none !important; isolation: isolate; } .promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); } .promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(12 26 23 / .85), rgb(12 26 23 / .05) 70%); } .promo:hover img { transform: scale(1.06); } .promo h3 { color: #fff; font-size: 1.6rem; margin: 0 0 .2rem; } .promo p { margin: 0 0 .8rem; opacity: .9; } @media (max-width: 720px) { .promos { grid-template-columns: 1fr; } } /* ---------- Brands marquee ---------- */ .brands { overflow: hidden; mask-image: linear-gradient(to left, transparent, #000 10%, #000 90%, transparent); } .brands-track { display: flex; gap: 1rem; width: max-content; animation: marquee 40s linear infinite; } .brands:hover .brands-track { animation-play-state: paused; } .brands-track span { width: 150px; height: 96px; border-radius: var(--r-sm); background: #fff; display: grid; place-items: center; border: 1px solid var(--line); } .brands-track img { width: 110px; height: 80px; object-fit: contain; } :root[data-theme="dark"] .brands-track span { background: #e8f2ef; } @keyframes marquee { to { transform: translateX(50%); } } /* ---------- Product grid (Woo loop) ---------- */ .woocommerce ul.products, ul.products { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1024px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } ul.products::before, ul.products::after { display: none !important; } ul.products li.product { --pad: .9rem; position: relative; display: flex; flex-direction: column; margin: 0 !important; width: auto !important; float: none !important; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad) !important; overflow: hidden; /* Woo layout css zeroes padding with higher specificity */ transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; } ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } ul.products li.product a.woocommerce-LoopProduct-link { color: inherit; text-decoration: none !important; display: flex; flex-direction: column; flex: 1; gap: .25rem; } .card-media { position: relative; aspect-ratio: 1; margin-bottom: .6rem; border-radius: calc(var(--r) - var(--pad) + 2px); overflow: hidden; background: #fff; } ul.products li.product .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; transition: transform .6s var(--ease), opacity .4s; } ul.products li.product .card-media .card-alt { opacity: 0; } ul.products li.product:hover .card-media img { transform: scale(1.04); } ul.products li.product:hover .card-media .card-alt { opacity: 1; } .card-brand { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--accent); text-transform: uppercase; min-height: 1.4em; line-height: 1.4; text-align: right; /* ltr text, aligned with the rtl title */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ul.products li.product .woocommerce-loop-product__title { font-size: .92rem; font-weight: 700; line-height: 1.75; margin: 0; padding: 0; min-height: 3.5em; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-latin { font-size: .75rem; color: var(--muted); min-height: 1.5em; line-height: 1.5; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--line); } ul.products li.product .price { display: flex; flex-direction: column; justify-content: center; min-height: 2.9rem; margin: 0; min-width: 0; font-weight: 800; color: var(--text); font-size: 1rem; line-height: 1.45; } .woocommerce-Price-currencySymbol { margin-inline-start: .25em; font-size: .78em; font-weight: 600; color: var(--muted); } .price del { color: var(--muted); font-weight: 400; font-size: .78em; } .price del .woocommerce-Price-currencySymbol { display: none; } .price ins { text-decoration: none; color: var(--sale); } .price ins .woocommerce-Price-currencySymbol { color: inherit; } ul.products li.product .button { flex: none; width: 2.9rem; height: 2.9rem; padding: 0; margin: 0; border-radius: 14px; display: grid; place-items: center; box-shadow: none; transition: transform .25s var(--ease), background-color .25s; } ul.products li.product .button .i { width: 20px; height: 20px; } ul.products li.product .button:hover { transform: translateY(-2px); } ul.products li.product .button.loading { opacity: .7; } ul.products li.product .button.loading .i { display: none; } ul.products li.product .button.loading::after { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } ul.products li.product .button.added { background: var(--brand-ink); } :root[data-theme="dark"] ul.products li.product .button.added { background: var(--mint); } ul.products li.product .added_to_cart { display: none; } /* drawer opens instead */ @keyframes spin { to { transform: rotate(360deg); } } .onsale { position: absolute; top: .6rem; inset-inline-start: .6rem; z-index: 2; background: var(--sale); color: #fff; font-size: .74rem; font-weight: 800; padding: .15rem .6rem; border-radius: 8px; } @media (max-width: 520px) { ul.products { gap: .7rem; } ul.products li.product { --pad: .55rem; border-radius: var(--r-sm); } ul.products li.product .woocommerce-loop-product__title { font-size: .82rem; } ul.products li.product .price { font-size: .86rem; min-height: 2.6rem; } ul.products li.product .button { width: 2.4rem; height: 2.4rem; border-radius: 12px; } .card-foot { margin-top: .5rem; padding-top: .5rem; gap: .3rem; } .card-latin { display: none; } } /* ---------- Perfume finder wizard ---------- */ .wizard { position: relative; max-width: 860px; margin-inline: auto; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--r) * 1.4); box-shadow: var(--shadow); padding: clamp(1.2rem, 4vw, 2.4rem); } .wizard { scroll-margin-top: 100px; } .wizard-head { text-align: center; margin-bottom: 1.4rem; } .wizard-head h2 { font-size: clamp(1.25rem, 3vw, 1.8rem); margin: 0; transition: font-size .35s var(--ease), color .35s; } /* Once the user interacts, the intro heading steps back and the question takes the lead. */ .wizard.started .wizard-head { margin-bottom: .9rem; } .wizard.started .wizard-head .eyebrow { display: none; } .wizard.started .wizard-head h2 { font-size: .9rem; font-weight: 700; color: var(--muted); } /* Step tabs: progress indicator + jump to any step */ .wizard-tabs { display: none; } .is-wizard .wizard-tabs { display: flex; gap: .35rem; margin: 0 0 1.4rem; padding: 0; counter-reset: none; } .wizard-tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 0 0 .1rem; background: none; border: 0; cursor: pointer; color: var(--muted); font-size: .78rem; font-weight: 700; } .wizard-tab::before { /* progress segment */ content: ""; align-self: stretch; height: 5px; border-radius: 99px; background: var(--bg-alt); transition: background-color .3s; } .wizard-tab b { display: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; place-items: center; font-size: .78rem; background: var(--bg-alt); color: var(--muted); transition: background-color .25s, color .25s; } .wizard-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .wizard-tab.done::before { background: var(--mint); } .wizard-tab.done { color: var(--brand-ink); } .wizard-tab[aria-current]::before { background: var(--accent); } .wizard-tab[aria-current] { color: var(--accent); } .wizard-tab:hover { color: var(--accent); } .wizard-tab:focus-visible { outline-offset: 4px; } .wizard-step { border: 0; margin: 0 0 1.4rem; padding: 0; min-width: 0; } .wizard-step legend { display: block; width: 100%; padding: 0; text-align: center; font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 800; color: var(--text); transition: font-size .35s var(--ease); } .wizard.started .wizard-step legend { font-size: clamp(1.45rem, 3.4vw, 2.1rem); line-height: 1.5; } .wizard-hint { text-align: center; color: var(--muted); font-size: .9rem; margin: .3rem 0 1.2rem; } .wizard-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .7rem; } .opt { position: relative; cursor: pointer; display: grid; } .opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .opt span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 104px; padding: .9rem .6rem; text-align: center; border-radius: var(--r-sm); background: var(--bg-alt); border: 2px solid transparent; transition: border-color .2s, background-color .2s, transform .25s var(--ease), box-shadow .25s; } .opt i { font-style: normal; font-size: 1.9rem; line-height: 1; transition: transform .3s var(--ease); } .opt b { font-size: .92rem; line-height: 1.6; } .opt:hover span { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px); } .opt input:checked + span { background: var(--mint-soft); border-color: var(--accent); box-shadow: 0 10px 24px -14px var(--accent); } .opt input:checked + span i { transform: scale(1.15) rotate(-6deg); } .opt input:checked + span::after { /* check badge */ content: "โœ“"; position: absolute; top: .45rem; inset-inline-end: .55rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; background: var(--accent); color: var(--on-accent); } .opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; } .wizard-nav { display: flex; gap: .6rem; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 1.2rem; } .wizard-nav [hidden] { display: none; } .wizard-next, .wizard-submit { margin-inline-start: auto; } .wizard-live { /* live result count; tap to jump to results */ border: 0; background: var(--mint-soft); color: var(--brand-ink); font: inherit; font-size: .85rem; font-weight: 700; padding: .45rem .9rem; border-radius: 999px; cursor: pointer; white-space: nowrap; } .wizard-live:hover { background: var(--mint); color: #1d2f2b; } .wizard-back .i { transform: scaleX(-1); } .is-wizard .wizard-step { margin-bottom: 1.2rem; } .motion .wizard-step.in { animation: rise .45s var(--ease) backwards; --rise: 14px; } @media (max-width: 560px) { .wizard { border-radius: var(--r); } .wizard-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .opt span { min-height: 92px; padding: .7rem .4rem; } .opt i { font-size: 1.6rem; } .opt b { font-size: .84rem; } /* Nav sticks to the bottom of the screen while answering, thumb-reachable. */ .is-wizard .wizard-nav { position: sticky; bottom: 0; margin: 0 calc(-1 * clamp(1.2rem, 4vw, 2.4rem)) calc(-1 * clamp(1.2rem, 4vw, 2.4rem)); padding: .8rem clamp(1.2rem, 4vw, 2.4rem) calc(.8rem + env(safe-area-inset-bottom)); background: var(--surface); } .wizard-nav { flex-wrap: wrap; } .wizard-nav .btn { flex: 1; justify-content: center; } .wizard-back { flex: 0 0 auto !important; } .wizard-live { order: -1; flex-basis: 100%; } .wizard-tab span { font-size: .7rem; } body:has(.wizard:focus-within) .wa-float { display: none; } /* would cover the sticky wizard buttons */ } .finder-results { scroll-margin-top: 110px; } .finder-results:not(:empty) { margin-top: 1.6rem; } .finder-results.loading { opacity: .5; pointer-events: none; transition: opacity .2s; } .finder-bar { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; color: var(--muted); } .finder-bar > span { display: flex; gap: .5rem; flex-wrap: wrap; } .finder-results:focus { outline: none; } .finder-empty .btn { margin-top: 1rem; } .finder-empty { text-align: center; padding: 2rem 1rem; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r); margin: 0; } .finder-section { padding-top: 0; } /* ---------- Features ---------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .feature { display: flex; gap: 1rem; padding: 1.4rem; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); } .feature .ico { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: var(--c, var(--mint-soft)); color: #1d2f2b; flex: none; rotate: -6deg; } .feature h3 { font-size: 1rem; margin: 0 0 .2rem; } .feature p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.7; } /* ---------- Story / CTA band ---------- */ .band { position: relative; border-radius: calc(var(--r) * 1.5); padding: clamp(2rem, 5vw, 3.5rem); overflow: hidden; background: linear-gradient(135deg, var(--brand), #2c4f48); color: #fff; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; } .band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); } .band p { opacity: .88; } .band-leaf { position: absolute; inset-inline-end: -40px; bottom: -40px; width: 260px; opacity: .14; color: #fff; } .band-leaf .i { width: 100%; height: auto; } .band-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .band-list li { background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); padding: .8rem 1rem; border-radius: var(--r-sm); } @media (max-width: 760px) { .band { grid-template-columns: 1fr; } } /* ---------- Blog cards ---------- */ .posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.4rem; } .post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s; } .post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .post-card .thumb { aspect-ratio: 16/10; overflow: hidden; background: var(--mint-soft); } .post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .post-card:hover .thumb img { transform: scale(1.05); } .post-card .body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; } .post-card h3 { font-size: 1.08rem; margin: 0; } .post-card h3 a { color: var(--text); } .post-card p { color: var(--muted); font-size: .9rem; margin: 0; } .post-card time { font-size: .78rem; color: var(--muted); } /* ---------- Generic page / article ---------- */ .page-hero { background: var(--bg-alt); padding: 2.5rem 0; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); } .page-hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0; } .page-hero p { margin: .3rem 0 0; color: var(--muted); } .woocommerce-breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; } .woocommerce-breadcrumb a { color: var(--muted); } .prose { max-width: 760px; margin-inline: auto; padding-bottom: 4rem; font-size: 1.04rem; } .prose h2 { font-size: 1.4rem; margin-top: 2em; } .prose h3 { font-size: 1.15rem; margin-top: 1.6em; color: var(--brand-ink); } .prose img { border-radius: var(--r); margin: 1.5rem 0; } .prose ul { padding-inline-start: 1.2rem; } .prose li::marker { color: var(--accent); } .prose blockquote { margin: 1.5rem 0; padding: 1rem 1.4rem; border-inline-start: 4px solid var(--accent); background: var(--mint-soft); border-radius: var(--r-sm); } .prose details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .9rem 1.2rem; margin-bottom: .8rem; } .prose details[open] { box-shadow: var(--shadow); } .prose summary { cursor: pointer; font-weight: 700; color: var(--brand-ink); } .prose details > :not(summary) { margin-top: .6rem; } .article-cover { border-radius: var(--r); overflow: hidden; margin-bottom: 2rem; box-shadow: var(--shadow-lg); } .article-cover img { width: 100%; margin: 0; border-radius: 0; } /* ---------- Shop archive ---------- */ .shop-layout { padding-bottom: 4rem; } .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .woocommerce-result-count { margin: 0; color: var(--muted); font-size: .9rem; } .woocommerce-ordering { margin: 0; } .woocommerce-ordering select { width: auto; border-radius: 999px; padding: .55rem 1rem; } .cat-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.6rem; } .cat-chips a { padding: .4rem 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); font-size: .88rem; font-weight: 600; text-decoration: none; transition: .2s; } .cat-chips a:hover, .cat-chips a.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .woocommerce-pagination ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: 0; margin: 2.5rem 0 0; border: 0 !important; background: none; } .woocommerce-pagination li { border: 0 !important; } .woocommerce-pagination li > .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text); padding: 0 .6rem; } .woocommerce-pagination .page-numbers.current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* ---------- Single product ---------- */ .single-product div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: 3rem; position: relative; } .single-product div.product .woocommerce-product-gallery, .single-product div.product .summary { width: auto !important; float: none !important; margin: 0 !important; } .woocommerce-product-gallery { position: relative; background: #fff; border-radius: var(--r); padding: 1rem; border: 1px solid var(--line); align-self: start; overflow: hidden; min-width: 0; } /* clip flexslider's wide track */ .woocommerce-product-gallery img { border-radius: var(--r-sm); } .woocommerce-product-gallery__trigger { position: absolute; top: 1.4rem; inset-inline-end: 1.4rem; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: var(--shadow); font-size: 0; } .woocommerce-product-gallery__trigger::before { content: "โคข"; font-size: 1.1rem; color: var(--text); } .flex-control-thumbs { list-style: none; display: flex; gap: .6rem; padding: 0; margin: .8rem 0 0; } .flex-control-thumbs li { width: 72px; } .flex-control-thumbs img { border-radius: 12px; cursor: pointer; opacity: .55; border: 2px solid transparent; transition: .2s; } .flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; border-color: var(--accent); } .single-product .onsale { top: 1.6rem; inset-inline-start: 1.6rem; font-size: .9rem; } .product_title { font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.6; } .summary .price { font-size: 1.6rem; font-weight: 800; display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; margin: .5rem 0 1rem; color: var(--text); } .woocommerce-product-details__short-description { color: var(--muted); } form.cart { display: flex; gap: .8rem; align-items: stretch; flex-wrap: wrap; margin: 1.4rem 0; } .quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; } .quantity .qty { width: 3.2rem; text-align: center; border: 0; background: transparent; padding: .7rem 0; -moz-appearance: textfield; box-shadow: none !important; } .quantity .qty::-webkit-inner-spin-button, .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; } .qty-btn { width: 40px; height: 100%; min-height: 44px; border: 0; background: transparent; cursor: pointer; font-size: 1.3rem; color: var(--accent); } .qty-btn:hover { background: var(--mint-soft); } .single_add_to_cart_button { flex: 1; min-width: 200px; font-size: 1.05rem; padding: .9rem 2rem; } .trust-chips { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; } .trust-chips li { display: inline-flex; align-items: center; gap: .4rem; background: var(--mint-soft); color: var(--brand-ink); padding: .4rem .9rem; border-radius: 999px; font-size: .84rem; font-weight: 600; } .trust-chips .i { width: 18px; height: 18px; } .wa-ask { font-size: .9rem; padding: .55rem 1.2rem; } .product_meta { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px dashed var(--line); font-size: .85rem; color: var(--muted); display: grid; gap: .3rem; } .product_meta a { color: var(--muted); } .woocommerce-tabs { grid-column: 1 / -1; min-width: 0; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem clamp(1rem, 3vw, 2rem) 2rem; } .woocommerce-tabs ul.tabs { list-style: none; display: flex; gap: .4rem; padding: 0 0 1rem; margin: 0 0 1rem; border-bottom: 1px solid var(--line); overflow-x: auto; } .woocommerce-tabs ul.tabs li a { display: block; padding: .5rem 1.1rem; border-radius: 999px; color: var(--muted); font-weight: 700; white-space: nowrap; text-decoration: none; } .woocommerce-tabs ul.tabs li.active a { background: var(--accent); color: var(--on-accent); } .woocommerce-tabs .panel h2:first-child { font-size: 1.15rem; } .woocommerce-tabs table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .woocommerce-tabs img, .woocommerce-tabs .wp-caption { max-width: 100% !important; height: auto; } .woocommerce-tabs th, .woocommerce-tabs td { padding: .6rem; border-bottom: 1px solid var(--line); text-align: start; } .related, .upsells { grid-column: 1 / -1; margin-top: 1rem; } .related > h2, .upsells > h2 { font-size: 1.5rem; } @media (max-width: 820px) { .single-product div.product { grid-template-columns: minmax(0, 1fr); } } /* plain 1fr grows to fit long words/tables */ /* ---------- Notices ---------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper > * { list-style: none; margin: 0 0 1.5rem; padding: 1rem 1.3rem; border-radius: var(--r-sm); background: var(--mint-soft); color: var(--text); border-inline-start: 4px solid var(--accent); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; } .woocommerce-error { background: color-mix(in srgb, var(--sale) 14%, var(--surface)); border-color: var(--sale); flex-direction: column; align-items: stretch; } .woocommerce-message .button, .woocommerce-info .button { padding: .45rem 1.1rem; font-size: .88rem; order: 2; } .woocommerce-store-notice { position: fixed; bottom: 0; inset-inline: 0; z-index: 80; margin: 0; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background: var(--sun); color: #3d2e00; text-align: center; font-size: .9rem; } .woocommerce-store-notice a { color: #3d2e00; font-weight: 700; margin-inline-start: 1rem; } /* ---------- Cart & checkout (classic shortcodes) ---------- */ .woo-page { padding-bottom: 4rem; } table.shop_table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } table.shop_table th, table.shop_table td { padding: 1rem; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; } table.shop_table thead th { background: var(--bg-alt); font-size: .88rem; color: var(--muted); } table.shop_table tr:last-child > * { border-bottom: 0; } table.shop_table .product-thumbnail img { width: 72px; border-radius: 12px; background: #fff; } table.shop_table .product-name a { color: var(--text); font-weight: 700; } table.shop_table a.remove { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-alt); color: var(--sale) !important; font-size: 1.3rem; text-decoration: none; } table.shop_table a.remove:hover { background: var(--sale); color: #fff !important; } table.shop_table td.actions { background: var(--bg-alt); } table.shop_table td.actions .coupon { display: inline-flex; gap: .5rem; flex-wrap: wrap; } table.shop_table td.actions .coupon input { width: 200px; min-width: 200px; } table.shop_table td.actions > .button { float: inline-end; } .cart-collaterals { margin-top: 2rem; display: flex; justify-content: flex-end; } .cart_totals { width: min(100%, 440px); } .cart_totals h2, #order_review_heading, .woocommerce-billing-fields h3, .woocommerce-additional-fields h3 { font-size: 1.2rem; } .wc-proceed-to-checkout .checkout-button { width: 100%; margin-top: 1rem; font-size: 1.05rem; padding: 1rem; } .order-total .amount { font-size: 1.25rem; color: var(--accent); font-weight: 800; } #shipping_method { list-style: none; margin: 0; padding: 0; } .woocommerce-shipping-methods li { display: flex; gap: .4rem; align-items: center; } form.checkout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: start; } form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } #customer_details, #order_review_heading, #order_review { min-width: 0; } #customer_details { grid-row: span 2; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1rem, 3vw, 2rem); } #customer_details .col-1, #customer_details .col-2 { width: 100% !important; float: none !important; } #order_review_heading { margin: 0; } #order_review { position: sticky; top: 100px; } .form-row { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; } .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .form-row-wide, #billing_address_1_field, #billing_address_2_field, #billing_country_field, #billing_email_field, .notes { grid-column: 1 / -1; } .form-row .required { color: var(--sale); text-decoration: none; } #payment { background: var(--bg-alt); border-radius: var(--r); padding: 1.2rem; margin-top: 1rem; } #payment ul.payment_methods { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; } #payment ul.payment_methods > li { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .8rem 1rem; } #payment ul.payment_methods > li:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } #payment .payment_box { font-size: .88rem; color: var(--muted); padding-top: .5rem; } #payment .payment_box p:last-child { margin: 0; } #place_order { width: 100%; font-size: 1.1rem; padding: 1rem; margin-top: 1rem; } .woocommerce-terms-and-conditions-wrapper { font-size: .85rem; color: var(--muted); } .woocommerce-form-coupon-toggle .woocommerce-info { justify-content: flex-start; } .select2-container--default .select2-selection--single { height: auto; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); line-height: 1.6; padding: 0; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; left: 8px; right: auto; } .select2-dropdown { background: var(--surface); border-color: var(--line); border-radius: var(--r-sm); overflow: hidden; } .select2-results__option--highlighted { background: var(--accent) !important; color: var(--on-accent) !important; } @media (max-width: 900px) { form.checkout { grid-template-columns: 1fr; } #order_review { position: static; } .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } } @media (max-width: 720px) { table.shop_table_responsive thead { display: none; } table.shop_table_responsive tr { display: grid; grid-template-columns: auto 1fr; border-bottom: 1px solid var(--line); } table.shop_table_responsive td { border: 0; padding: .5rem 1rem; } table.shop_table_responsive td[data-title]::before { content: attr(data-title) ": "; font-weight: 700; color: var(--muted); font-size: .85rem; } table.shop_table_responsive td.product-remove, table.shop_table_responsive td.product-thumbnail { grid-row: span 1; } table.shop_table_responsive td.actions, table.shop_table_responsive td.product-name { grid-column: 1 / -1; } table.shop_table td.actions > .button { float: none; width: 100%; margin-top: .6rem; } } /* Thank-you page */ .woocommerce-order { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1rem, 4vw, 2.5rem); } .woocommerce-thankyou-order-received { font-size: 1.3rem; font-weight: 800; color: var(--accent); } .woocommerce-thankyou-order-received::before { content: "๐ŸŒฟ "; } ul.order_details { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.5rem 0; } ul.order_details li { background: var(--bg-alt); border-radius: var(--r-sm); padding: .8rem 1.2rem; font-size: .85rem; color: var(--muted); } ul.order_details li strong { display: block; color: var(--text); font-size: 1rem; } /* My account */ .woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; } .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; } .woocommerce-MyAccount-navigation ul { list-style: none; padding: .6rem; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .woocommerce-MyAccount-navigation a { display: block; padding: .6rem 1rem; border-radius: 12px; color: var(--text); } .woocommerce-MyAccount-navigation .is-active a { background: var(--accent); color: var(--on-accent); } .woocommerce-account:not(.logged-in) .woocommerce { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; } .u-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .u-columns > div { width: auto !important; float: none !important; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; } @media (max-width: 760px) { .woocommerce-account .woocommerce, .u-columns { grid-template-columns: 1fr; } } /* ---------- Mini cart drawer ---------- */ .drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgb(8 18 16 / .45); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; } body.cart-open .drawer-backdrop { opacity: 1; } .cart-drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 95; width: min(420px, 92vw); padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateX(-105%); transition: transform .4s var(--ease); visibility: hidden; } body.cart-open .cart-drawer { transform: none; visibility: visible; } .cart-drawer > header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); } .cart-drawer h2 { font-size: 1.15rem; margin: 0; } .cart-drawer .widget_shopping_cart_content { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .woocommerce-mini-cart { list-style: none; margin: 0; padding: 1rem 1.3rem; overflow-y: auto; flex: 1; display: grid; gap: .8rem; align-content: start; } .woocommerce-mini-cart-item { position: relative; padding: .7rem; padding-inline-end: 2.6rem; border-radius: var(--r-sm); background: var(--bg-alt); font-size: .85rem; line-height: 1.6; } .woocommerce-mini-cart-item a:not(.remove) { display: flex; gap: .8rem; align-items: center; color: var(--text); font-weight: 700; text-decoration: none; } .woocommerce-mini-cart-item img { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: 12px; background: #fff; } .woocommerce-mini-cart-item .quantity { border: 0; background: none; color: var(--muted); font-size: .82rem; display: block; margin-inline-start: calc(64px + .8rem); } .woocommerce-mini-cart-item a.remove { position: absolute; top: .5rem; inset-inline-end: .5rem; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--sale) !important; background: var(--surface); text-decoration: none; font-size: 1.1rem; } .woocommerce-mini-cart__total { margin: 0; padding: 1rem 1.3rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 1.05rem; } .woocommerce-mini-cart__buttons { margin: 0; padding: 0 1.3rem 1.3rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .woocommerce-mini-cart__buttons .button:not(.checkout) { background: transparent; color: var(--accent) !important; box-shadow: inset 0 0 0 2px var(--accent); } .woocommerce-mini-cart__empty-message { padding: 3rem 1.5rem; text-align: center; color: var(--muted); } .woocommerce-mini-cart__empty-message::before { content: "๐Ÿ›๏ธ"; display: block; font-size: 3rem; margin-bottom: .5rem; } /* ---------- Footer ---------- */ .site-footer { margin-top: 2rem; background: color-mix(in srgb, var(--bg-alt) 75%, transparent); border-top: 1px solid var(--line); padding-top: 3rem; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 2rem; padding-bottom: 2rem; } .site-footer h3 { font-size: 1rem; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .site-footer ul a { color: var(--muted); } .site-footer .brand { margin-bottom: 1rem; } .site-footer p.muted { font-size: .9rem; } .contact-list li { display: flex; gap: .5rem; align-items: flex-start; color: var(--muted); font-size: .9rem; } .contact-list .i { color: var(--accent); width: 20px; height: 20px; margin-top: .25rem; } .footer-bottom { border-top: 1px solid var(--line); padding: 1.2rem 0; font-size: .82rem; color: var(--muted); } .footer-bottom p { margin: 0; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } } .wa-float { position: fixed; bottom: calc(1.2rem + env(safe-area-inset-bottom)); inset-inline-start: 1.2rem; z-index: 70; display: flex; align-items: center; gap: .5rem; background: #25d366; color: #fff; padding: .75rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: 0 10px 24px -8px rgb(37 211 102 / .6); text-decoration: none !important; transition: transform .2s; } .wa-float:hover { transform: translateY(-3px) scale(1.03); } body.woocommerce-demo-store .wa-float { bottom: 4.2rem; } @media (max-width: 600px) { .wa-float span { display: none; } .wa-float { padding: .8rem; } } /* ---------- Contact form 7 ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; padding-bottom: 4rem; } .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.8rem; } .wpcf7 form { display: grid; gap: .3rem; } .wpcf7 .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .wpcf7 .row2 > p { display: contents; } .wpcf7 label { display: block; margin-bottom: .8rem; } .wpcf7 br { display: none; } .wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: .3rem; } .wpcf7-not-valid-tip { color: var(--sale); font-size: .82rem; } .wpcf7-response-output { border-radius: var(--r-sm) !important; margin: 1rem 0 0 !important; } @media (max-width: 760px) { .contact-grid, .wpcf7 .row2 { grid-template-columns: 1fr; } } /* ---------- Motion (CSS only) ---------- gets .motion or .lite before paint (see functions.php). Lite = reduced motion, data saver, slow network or weak device: everything renders static. Only transform/opacity animate (compositor-only). */ .lite *, .lite *::before, .lite *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } @keyframes rise { from { opacity: 0; transform: translateY(var(--rise, 28px)); } } @keyframes pop { from { opacity: 0; transform: scale(.6) rotate(-12deg); } } @keyframes grow { from { opacity: 0; transform: scale(.5) rotate(-30deg); } } @keyframes word { from { transform: translateY(110%); } } @keyframes bob { 50% { transform: translateY(-12px); } } @keyframes underline { from { transform: scaleX(0); } } /* Hero intro */ .motion .hero-anim { animation: rise .9s var(--ease) var(--d, 0s) backwards; } .hero-title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .12em; margin-bottom: -.12em; } .hero-title .w > span { display: inline-block; } .motion .hero-title .w > span { animation: word 1s var(--ease) calc(.12s + var(--i) * .08s) backwards; } .motion .hero-title em::after { animation: underline .8s var(--ease) .75s backwards; } .motion .hero-blob { animation: grow 1.4s var(--ease) .1s backwards, morph 14s ease-in-out 1.5s infinite; } .motion .hero-ring { animation: grow 1.4s var(--ease) .2s backwards, spin 60s linear 1.6s infinite; } .motion .hero-bottle { animation: rise 1.1s cubic-bezier(.34, 1.4, .64, 1) var(--d) backwards, bob var(--b) ease-in-out calc(var(--d) + 1.1s) infinite; --rise: 80px; } .hero-bottle.b1 { --d: .3s; --b: 6s; } .hero-bottle.b2 { --d: .45s; --b: 7s; } .hero-bottle.b3 { --d: .6s; --b: 8s; } .motion .sticker { animation: pop .7s cubic-bezier(.34, 1.8, .64, 1) 1s backwards; } .motion .sticker.s2 { animation-delay: 1.15s; } /* Scroll reveals: hidden until .in is set by the observer */ .motion .reveal:not(.in), .motion .stagger:not(.in) > *, .motion ul.products:not(.in) > li { opacity: 0; } .motion .reveal.in { animation: rise .8s var(--ease) backwards; } .motion .stagger.in > *, .motion ul.products.in > li { animation: rise .7s var(--ease) calc(var(--i, 0) * .06s) backwards; } /* Off-screen sections skip layout/paint until near the viewport (big scroll win on long pages). */ .section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 900px; } /* Inside the mobile app (user agent "RayhaApp"): drop the promo bar to save screen height. */ .in-app .topbar { display: none; }