/*
Theme Name: ODILUX Marts
Theme URI: https://odiluxmartsltd.online/
Author: ODILUX MARTS LTD
Description: A professional e-commerce agency theme for ODILUX MARTS LTD. Deep green and brass styling, sticky menu bar with the ODILUX monogram, and templates for Home, About, Contact us and Privacy policy. Navigation links use the site's own address, so the theme works on any domain.
Version: 1.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: odilux-marts
Tags: custom-menu, featured-images, threaded-comments, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ============ Menu bar (.odn) ============ */
.odn {
  --ink: #0d1f1c;
  --ink-2: #17332d;
  --cream: #ece7d8;
  --muted: #c9c4ae;
  --line: rgba(230,205,146,.25);
  --brass: #b9975b;
  --brass-hi: #e6cd92;
  --brass-lo: #8a6d2b;
  --teal: #0f766e;
  position: sticky; top: 0; z-index: 9990;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw);
  container-type: inline-size;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: rgba(13,31,28,.9);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .35s ease, border-color .35s ease, background .35s ease;
  animation: odn-drop .8s cubic-bezier(.2,.7,.2,1) both;
}
html, body { overflow-x: clip; }
.odn *, .odn *::before, .odn *::after { box-sizing: border-box; }
.odn.scrolled { background: rgba(13,31,28,.97); border-color: var(--line); box-shadow: 0 14px 34px -26px rgba(0,0,0,.8); }
@keyframes odn-drop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
.odn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; opacity: 0; transition: opacity .4s ease;
  background: linear-gradient(90deg, transparent, var(--brass-lo) 25%, var(--brass-hi) 50%, var(--brass-lo) 75%, transparent); }
.odn.scrolled::after { opacity: 1; }
.odn-bar { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; transition: height .3s ease; }
.odn.scrolled .odn-bar { height: 66px; }
.odn-brand { display: flex; align-items: center; gap: 12px; text-decoration: none !important; color: #fff !important; flex: 0 0 auto; }
.odn-brand img { height: 52px; width: auto; display: block; transition: height .3s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.odn.scrolled .odn-brand img { height: 44px; }
.odn-brand:hover svg { transform: scale(1.04); }
.odn-name { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.odn-name b { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 1.35rem; letter-spacing: .08em; }
.odn-name span { font-size: .62rem; font-weight: 700; letter-spacing: .28em; color: var(--brass-hi); margin-top: 4px; }
.odn-panel { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.odn-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0 auto; padding: 0; }
.odn-links li { white-space: nowrap; }
.odn-links a.l { position: relative; display: block; padding: 10px 16px; font-weight: 600; font-size: .96rem; letter-spacing: .005em; white-space: nowrap;
  color: var(--cream) !important; text-decoration: none !important; border-radius: 12px; transition: color .25s ease, background .25s ease; }
.odn-links a.l::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi)); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.odn-links a.l:hover { color: var(--brass-hi) !important; background: rgba(230,205,146,.08); }
.odn-links a.l:hover::after, .odn-links a.l.active::after { transform: scaleX(1); }
.odn-links a.l.active { color: var(--brass-hi) !important; }
.odn-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 14px; background: transparent; cursor: pointer; padding: 0; position: relative; flex: 0 0 auto; transition: background .25s, border-color .25s; }
.odn-toggle:hover { background: rgba(230,205,146,.08); border-color: rgba(230,205,146,.5); }
.odn-toggle i { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--cream); transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .2s ease, top .35s cubic-bezier(.2,.7,.2,1); }
.odn-toggle i:nth-child(1) { top: 16px; } .odn-toggle i:nth-child(2) { top: 22px; } .odn-toggle i:nth-child(3) { top: 28px; }
.odn.open .odn-toggle i:nth-child(1) { top: 22px; transform: rotate(45deg); }
.odn.open .odn-toggle i:nth-child(2) { opacity: 0; }
.odn.open .odn-toggle i:nth-child(3) { top: 22px; transform: rotate(-45deg); }
@container (max-width: 1100px) {
  .odn-bar { padding: 0 20px; gap: 16px; }
  .odn-brand img { height: 46px; }
  .odn-name b { font-size: 1.2rem; }
  .odn-links { gap: 2px; }
  .odn-links a.l { padding: 10px 11px; font-size: .9rem; }
  .odn-links a.l::after { left: 11px; right: 11px; }
}
@container (max-width: 940px) {
  .odn-bar { height: 68px; padding: 0 16px; }
  .odn-brand img { height: 44px; }
  .odn-panel { flex: none; }
  .odn-toggle { display: block; }
  .odn-panel { display: block; position: absolute; left: 0; right: 0; top: 100%; background: rgba(13,31,28,.98); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -28px rgba(0,0,0,.8); max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .5s cubic-bezier(.2,.7,.2,1), visibility 0s .5s; }
  .odn.open .odn-panel { max-height: 440px; visibility: visible; transition: max-height .5s cubic-bezier(.2,.7,.2,1), visibility 0s; }
  .odn-links { flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 20px 8px; margin: 0; }
  .odn-links li { opacity: 0; transform: translateY(-8px); transition: opacity .4s ease, transform .4s ease; }
  .odn.open .odn-links li { opacity: 1; transform: none; }
  .odn.open .odn-links li:nth-child(1) { transition-delay: .08s; } .odn.open .odn-links li:nth-child(2) { transition-delay: .14s; }
  .odn.open .odn-links li:nth-child(3) { transition-delay: .20s; } .odn.open .odn-links li:nth-child(4) { transition-delay: .26s; }
  .odn-links a.l { padding: 14px 12px; font-size: 1rem; }
  .odn-links a.l::after { left: 12px; right: auto; width: 36px; bottom: 8px; }
}
.odn a:focus-visible, .odn button:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 3px; }

/* WordPress admin bar offset for the sticky menu */
body.admin-bar .odn { top: 32px; }
@media (max-width: 782px) { body.admin-bar .odn { top: 46px; } }

/* ============ Page content (.od) ============ */
.od {
  --ink: #0d1f1c;
  --ink-2: #17332d;
  --paper: #f7f5ef;
  --white: #ffffff;
  --brass: #b9975b;
  --brass-hi: #e6cd92;
  --brass-lo: #8a6d2b;
  --teal: #0f766e;
  --muted: #5d6a65;
  --line: #e6e1d2;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.7;
  background: var(--paper);
}
.od *, .od *::before, .od *::after { box-sizing: border-box; }
.od a { color: inherit; }
.od h1, .od h2, .od h3 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-weight: 600; margin: 0; line-height: 1.15; }
.od p { margin: 0; }
.od-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.od-brass-text { background: linear-gradient(100deg, var(--brass-lo), var(--brass) 35%, var(--brass-hi) 55%, var(--brass)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* buttons */
.od-btn { display: inline-block; padding: 14px 28px; border-radius: 4px; font-weight: 700; font-size: .95rem; text-decoration: none; letter-spacing: .02em; transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.od-btn.brass { background: linear-gradient(120deg, var(--brass-lo), var(--brass) 45%, var(--brass-hi)); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(185,151,91,.7); }
.od-btn.brass:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(185,151,91,.85); }
.od-btn.line { border: 1.5px solid rgba(230,205,146,.55); color: #fff; }
.od-btn.line:hover { background: rgba(230,205,146,.12); }
.od-btn.dark { background: var(--ink); color: var(--brass-hi); }
.od-btn.dark:hover { background: var(--ink-2); transform: translateY(-2px); }

/* hero */
.od-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 78% 20%, #1d4a41 0%, var(--ink) 60%); color: #fff; padding: 88px 0 96px; }
.od-hero::before { content: ""; position: absolute; right: -70px; top: 50%; transform: translateY(-50%); width: 560px; height: 500px; background-image: var(--od-wm); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .09; pointer-events: none; }
.od-hero .od-wrap { position: relative; z-index: 1; }
.od-hero h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); letter-spacing: -.01em; }
.od-hero p.lead { margin: 22px 0 32px; max-width: 52ch; color: #d5dcd6; font-size: 1.1rem; }
.od-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* sections */
.od-sec { padding: 84px 0; }
.od-sec.alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.od-head { max-width: 640px; margin-bottom: 44px; }
.od-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 12px; }
.od-head p { color: var(--muted); }
.od-rule { width: 64px; height: 3px; margin-bottom: 18px; background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi)); border-radius: 2px; }

/* cards */
.od-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.od-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.od-card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: 6px; padding: 28px 26px; transition: transform .25s, box-shadow .25s; }
.od-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(138,109,43,.55); }
.od-card svg { width: 34px; height: 34px; margin-bottom: 14px; stroke: var(--brass-lo); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.od-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.od-card p { color: var(--muted); font-size: .96rem; }

/* process */
.od-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.od-step { padding: 30px 24px; border-right: 1px solid var(--line); counter-increment: s; }
.od-step:last-child { border-right: 0; }
.od-step::before { content: counter(s); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; margin-bottom: 16px; background: var(--ink); color: var(--brass-hi); font-family: 'Fraunces', Georgia, serif; font-weight: 600; }
.od-step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.od-step p { color: var(--muted); font-size: .94rem; }

/* two-column layout */
.od-why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.od-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.od-why li { padding-left: 22px; border-left: 3px solid var(--brass); }
.od-why li strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.od-why li span { color: var(--muted); }

/* about page: story + company facts */
.od-about h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 16px; }
.od-about p { margin-bottom: 16px; color: var(--ink-2); }
.od-about p:last-child { margin-bottom: 0; }
.od-facts { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: 6px; padding: 28px 26px; }
.od-facts h3 { font-size: 1.2rem; margin-bottom: 18px; }
.od-facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.od-facts li small { display: block; color: var(--brass-lo); font-weight: 700; font-size: .82rem; letter-spacing: .04em; margin-bottom: 2px; }
.od-facts li span { font-weight: 500; word-break: break-word; }
.od-facts a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: 3px; }

/* checklist */
.od-checklist { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.od-checklist li { padding-left: 22px; border-left: 3px solid var(--brass); }
.od-checklist li strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.od-checklist li span { color: var(--muted); }

/* form */
.od-form { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--brass); border-radius: 6px; padding: 32px 28px; }
.od-form h3 { font-size: 1.3rem; margin-bottom: 22px; }
.od-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.od-field { margin-bottom: 18px; }
.od-field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.od-field input, .od-field select, .od-field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 4px; font: inherit; font-size: .95rem; background: var(--paper); color: var(--ink); }
.od-field textarea { min-height: 150px; resize: vertical; }
.od-field input:focus, .od-field select:focus, .od-field textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(185,151,91,.18); }
.od-form button { border: 0; cursor: pointer; font: inherit; }
.od-note { color: var(--muted); font-size: .9rem; margin-top: 16px; }
.od-note a { text-decoration-color: var(--brass); text-underline-offset: 3px; }

/* contact boxes */
.od-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.od-contact.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.od-contact div { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px; }
.od-contact small { display: block; color: var(--brass-lo); font-weight: 700; font-size: .85rem; margin-bottom: 4px; }
.od-contact span, .od-contact a { word-break: break-word; font-weight: 500; }
.od-contact a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: 3px; }

/* call to action */
.od-cta { background: linear-gradient(135deg, var(--ink), #1d4a41); color: #fff; text-align: center; padding: 76px 0; border-top: 3px solid var(--brass); }
.od-cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 14px; }
.od-cta p { max-width: 54ch; margin: 0 auto 28px; color: #d5dcd6; }

/* policy content */
.od-policy { max-width: 780px; }
.od-policy h2 { font-size: 1.5rem; margin: 38px 0 10px; }
.od-policy h2:first-child { margin-top: 0; }
.od-policy p { margin-bottom: 14px; color: var(--ink-2); }
.od-policy ul { margin: 0 0 14px; padding-left: 22px; color: var(--ink-2); }
.od-policy li { margin-bottom: 6px; }
.od-policy li::marker { color: var(--brass); }
.od-policy a { text-decoration-color: var(--brass); text-underline-offset: 3px; }
.od-summary { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--brass); border-radius: 6px; padding: 22px 24px; margin-bottom: 38px; }
.od-summary p { margin: 0; color: var(--ink-2); }
.od-summary strong { color: var(--ink); }

/* generic WordPress page/post content */
.od-content { max-width: 780px; }
.od-content h2 { font-size: 1.5rem; margin: 32px 0 10px; }
.od-content h3 { font-size: 1.2rem; margin: 26px 0 8px; }
.od-content p { margin-bottom: 14px; color: var(--ink-2); }
.od-content ul, .od-content ol { margin: 0 0 14px; padding-left: 22px; color: var(--ink-2); }
.od-content li { margin-bottom: 6px; }
.od-content li::marker { color: var(--brass); }
.od-content a { text-decoration-color: var(--brass); text-underline-offset: 3px; }
.od-content img { max-width: 100%; height: auto; border-radius: 6px; }

/* footer */
.od-foot { background: var(--ink); color: #c9c4ae; padding: 52px 0 28px; font-size: .92rem; }
.od-foot .top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; padding-bottom: 32px; border-bottom: 1px solid rgba(230,205,146,.2); }
.od-foot h3 { font-family: 'Inter', sans-serif; font-size: .95rem; color: var(--brass-hi); margin-bottom: 12px; }
.od-foot a { text-decoration: none; }
.od-foot a:hover { color: var(--brass-hi); }
.od-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.od-foot .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 22px; color: #9b947f; font-size: .85rem; }
.od-foot .legal b { color: var(--brass-hi); font-weight: 600; }

/* accessibility + responsive */
.od a:focus-visible, .od button:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 900px) {
  .od-why { grid-template-columns: 1fr; }
  .od-hero::before { width: 320px; height: 300px; right: -80px; opacity: .07; }
  .od-grid, .od-contact { grid-template-columns: 1fr; }
  .od-steps { grid-template-columns: 1fr 1fr; }
  .od-step:nth-child(2) { border-right: 0; }
  .od-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .od-row { grid-template-columns: 1fr; }
  .od-foot .top { grid-template-columns: 1fr; }
  .od-hero { padding: 56px 0 64px; }
  .od-sec { padding: 60px 0; }
}
@media (max-width: 520px) { .od-steps { grid-template-columns: 1fr; } .od-step { border-right: 0; border-bottom: 1px solid var(--line); } .od-step:last-child { border-bottom: 0; } }
@media (prefers-reduced-motion: reduce) {
  .od *, .od *::before, .od *::after { animation: none !important; transition: none !important; }
  .odn, .odn * { animation: none !important; transition: none !important; }
  .odn-links li { opacity: 1 !important; transform: none !important; }
}