/* EZ Pants Theme Styles */
/* Base */
:root { --bg:#0a0a0a; --text:#161616; --muted:#666; --card:#ffffff; --alt:#f7f7f8; --brand:#0b5fff; --brand-ink:#0a3fbf; --ink:#101113; --page-bg:#ffffff; --surface:#ffffff; --border:#eee; --header-bg:rgba(255,255,255,.85); }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: "Lora", serif; color:var(--ink); background:var(--page-bg); }
body { font-size: clamp(16px, 1.1vw, 18px); }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
.container { width: min(1280px, 94%); margin-inline:auto; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border); }
.announcement-bar { background:#3a3d42; color:#fff; font-size:.9rem; }
.announcement-inner { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.4rem 0; position:relative; }
.announcement-dismiss { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:transparent; border:0; color:#fff; cursor:pointer; opacity:.85; }
[data-theme="dark"] .announcement-bar { background:#222733; }
.header-inner { display:flex; flex-direction:column; gap:.25rem; padding: .5rem 0; }
.promo-bar { display:flex; align-items:center; justify-content:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.35rem .6rem; margin-bottom:.25rem; position:relative; }
.promo-inner { display:flex; gap:10px; flex-wrap:wrap; font-size:.85rem; color:#555; }
.promo-bar .dot { opacity:.5; }
.promo-dismiss { position:absolute; right:.35rem; top:50%; transform:translateY(-50%); background:transparent; border:0; cursor:pointer; color:#666; }
[data-theme="dark"] .promo-inner { color:#aab4c3; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { font-weight:800; color: #0b5fff; letter-spacing:.2px; font-size:clamp(1.5rem, 3.2vw, 2.25rem); }
.brand-center { position:relative; left:0; }
.brand-logo { height:40px; width:auto; display:block; }
.site-nav ul { list-style:none; display:flex; gap:1.25rem; margin:0; padding:.25rem 0 .5rem; align-items:center; justify-content:center; }
.site-nav a { padding:.5rem .75rem; border-radius:8px; }
.site-nav a:hover { background:#f1f2f4; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:10px; border:1px solid #d7d8db; background:#fff; font-weight:600; }
.btn:hover{ background:#f8f9fb; }
.btn-primary { background:var(--brand); border-color:var(--brand); color:white; }
.btn-primary:hover { background:var(--brand-ink); border-color:var(--brand-ink); }
.btn-secondary { background:#101113; color:#fff; border-color:#101113; }

.nav-toggle { display:none; background:transparent; border:0; padding:.25rem; border-radius:8px; }
.nav-toggle:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.nav-toggle-bar { width:24px; height:2px; background:#111; display:block; margin:5px 0; border-radius:2px; }

/* Search */
.topbar .left { display:flex; align-items:center; gap:.5rem; min-width:auto; }
.right { display:flex; align-items:center; gap:.5rem; }
.icon-btn.cart { position:relative; padding:.4rem .6rem; border:1px solid var(--border); border-radius:10px; background:var(--card); }
.icon-btn .badge { position:absolute; top:-6px; right:-6px; background:var(--brand); color:#fff; font-size:.7rem; line-height:1; padding:2px 5px; border-radius:999px; }

/* Theme toggle */
.theme-toggle { background:transparent; border:1px solid var(--border); border-radius:10px; padding:.45rem .6rem; margin-right:.25rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; }
.theme-toggle:hover { background:#f1f2f4; }
.theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:inline; }

/* Hero */
.hero { position:relative; min-height:60svh; display:grid; align-items:center; overflow:hidden; }
.hero-media { position:absolute; inset:0; background-size:cover; background-position:center; overflow:hidden; }
.hero-video { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.7); }
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.7) 100%); }
.hero-content { position:relative; color:#fff; padding: 12svh 0 10svh; }
.hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin:0 0 .4rem; }
.hero h1, .hero .lead { text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.lead { font-size: clamp(1.1rem, 2.2vw, 1.35rem); max-width: 64ch; color: rgba(255,255,255,.96); }
.hero-ctas { display:flex; gap:.9rem; margin-top:.85rem; flex-wrap:wrap; }

/* Sections */
.section { padding: clamp(32px, 6svh, 64px) 0; background:var(--page-bg); }
.section-alt { background:var(--alt); }
.grid { display:grid; gap:clamp(12px, 2.2vw, 20px); }
.two-col { grid-template-columns: repeat(12, 1fr); }
.two-col > *:first-child { grid-column: span 6; }
.two-col > *:last-child { grid-column: span 6; }
.three-col { grid-template-columns: repeat(3, 1fr); }
.four-col { grid-template-columns: repeat(4, 1fr); }

h2 { font-size: clamp(1.8rem, 3.1vw, 2.4rem); margin:0 0 .45rem; }
p { line-height:1.6; color:#2a2b2f; }
.features .feature { background:var(--card); padding:1rem; border:1px solid var(--border); border-radius:14px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.25rem; }
.media-card img { border-radius:12px; }
#functionality .media-card { display:flex; align-items:center; justify-content:center; }
.how-video { width:100%; height:auto; max-height:60svh; object-fit:contain; display:block; border-radius:12px; }
.contact { display:grid; grid-template-columns:1fr; gap:.5rem; margin:0; }
.contact dt { font-weight:700; color:#111; }
.contact dd { margin:0; color:#34363b; }
.cta-row { display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:var(--muted); margin:0 0 .5rem; }
/* Center helper for CTA rows */
.cta-center { justify-content:center; }

/* Contact band */
.contact-band .card { padding:14px; }
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px 24px; }
.contact-grid div { padding:.25rem 0; border-bottom:1px solid var(--border); }
.contact-grid div:nth-child(2n) { border-left:0; }
.about-center { text-align:center; max-width: 980px; }
.about-center p { margin:0; }

/* Pillars refreshed with monochrome icons */
.pillars { display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; text-align:center; }
.pillar { padding: 8px 14px; }
.pillar-icon { color:#111; width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:var(--card); margin: 0 auto 8px; }
.pillar-icon svg { width:20px; height:20px; }
.pillar-eyebrow { margin:8px 0 8px; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; color:#1c1d20; }
.pillar p { margin:0; color:#2a2b2f; }

@media (max-width: 960px) {
  .pillars { grid-template-columns: 1fr; }
}

/* Technology section centered copy */
#technology .tech-content { text-align:center; max-width: 900px; margin: 0 auto; }
#technology .tech-content .cta-row { justify-content:center; }

/* About section: refine layout and spacing */
#about .grid.two-col { align-items:stretch; }
#about .two-col > *:first-child { grid-column: span 7; }
#about .two-col > *:last-child { grid-column: span 5; }
#about .card { height:100%; justify-self:stretch; }
#about .contact { grid-template-columns: 1fr 1fr; column-gap:16px; }
#about .contact div { padding:.25rem 0; border-bottom:1px solid var(--border); }
#about .contact div:last-child { border-bottom:0; }
#about.section { padding-bottom: clamp(20px, 4svh, 48px); }

/* About page specific */
.about-grid { align-items:center; }
.about-media { display:flex; justify-content:center; }
.about-media img { width:min(100%, 720px); height:auto; border-radius:12px; display:block; }
.about-stack { display:grid; gap:18px; max-width: 980px; }
.about-copy { text-align:center; }
.about-resources { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.resources-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 34px; text-align:left; }
.about-resources li { padding:0; }
.res-title { margin:0 0 4px; font-weight:700; }
.res-link { color:#2a2b2f; word-break:break-all; text-decoration:underline; }

@media (max-width: 960px) {
  .resources-grid { grid-template-columns: 1fr; }
}

/* Full width carousel */
.full-bleed { padding:0; }
.fw-carousel { position:relative; width:100%; overflow:hidden; }
.fw-track { display:flex; transition: transform .5s ease; }
.fw-slide { flex: 0 0 100%; max-height: 72svh; display:flex; align-items:center; justify-content:center; }
.fw-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.fw-track, .carousel-track { touch-action: pan-y; }
.fw-btn { position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid var(--border); color:#111; border-radius:10px; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.fw-btn.prev { left:12px; }
.fw-btn.next { right:12px; }
[data-theme="dark"] .fw-btn { background:#121722; border-color:#283140; color:#e8edf6; }

/* Visually hidden (for sr-only headings in carousels) */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Gallery Carousel */
.gallery-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:.5rem; }
.carousel { position:relative; overflow:hidden; min-height:64svh; }
.carousel-track { display:flex; gap:16px; width:max-content; padding: .25rem 0 1rem; will-change: transform; }
.carousel-track:focus { outline:2px solid var(--brand); outline-offset:3px; }
.carousel-track > figure { flex: 0 0 auto; width: clamp(300px, 60vw, 640px); scroll-snap-align:start; margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:var(--card); }
.carousel-track img { width:100%; height:100%; object-fit:cover; aspect-ratio: 3/4; }
.carousel-controls { display:flex; gap:.5rem; }
.carousel-btn { background:#fff; border:1px solid var(--border); color:#111; border-radius:10px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.carousel-btn:hover { background:#f1f2f4; }
[data-theme="dark"] .carousel-btn { background:#121722; border-color:#283140; color:#e8edf6; }
[data-theme="dark"] .carousel-track > figure { border-color:#1f2630; }

/* Footer */
.site-footer { background:#0b0c0f; color:#ffffff; padding:34px 0 18px; }
.site-footer { font-size:17px; }
.site-footer a { color:#ffffff; }
.footer-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; align-items:start; }
.footer-grid.footer-three-col { display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; align-items:start; }
.footer-col p { color:#dfe3ea; margin:0; }
.footer-eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:.8rem; margin:0 0 .6rem; color:#f0f3f8; }
.footer-links { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.footer-links a { text-decoration:underline; }
.newsletter-form { display:flex; gap:8px; margin-top:.5rem; }
.newsletter-form input { flex:1; padding:.6rem .7rem; border-radius:10px; border:1px solid #283140; background:#121722; color:#e8edf6; }
.newsletter-form button { width:44px; border-radius:10px; border:1px solid #283140; background:#121722; color:#e8edf6; cursor:pointer; }
.social { display:flex; gap:10px; margin-top:.5rem; }
.social-btn { width:40px; height:40px; border:1px solid #283140; border-radius:10px; display:grid; place-items:center; color:#e8edf6; }
.social-btn svg { width:18px; height:18px; }
.footer-bottom { display:none; }

/* Footer Contact Info */
.footer-col.contact { text-align:left; }
.footer-contact-info p { color:#dfe3ea; margin:0.25rem 0; font-size:0.95rem; }
.footer-contact-info strong { color:#ffffff; }
.footer-contact-info a { color:#ffffff; text-decoration:none; }
.footer-contact-info a:hover { text-decoration:underline; }
.footer-contact-info .copyright-text { margin-top:0.75rem; opacity:.85; }

/* Desktop-only tweaks */
@media (min-width: 961px) {
  /* cleaner look: remove underline on footer links */
  .site-footer .footer-links a { text-decoration:none; }
  .site-footer .footer-links a:hover { text-decoration:underline; }
  /* center the info column only on desktop */
  .footer-col.info { text-align:center; }
}

/* Tablet/large-phone breakpoint: applies to big phones like OnePlus Open */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1fr; gap:24px; text-align:center; justify-items:center; }
  .footer-grid.footer-three-col { grid-template-columns: 1fr; gap:32px; text-align:center; justify-items:center; }
  .footer-col, .footer-col.contact { text-align:center; }
  .footer-contact-info { text-align:center; }
  .footer-links { display: block !important; text-align: center; margin: 0 auto; width: 100vw; }
  .footer-links li { text-align: center; margin: 0.4rem 0; }
  .footer-links a { text-align: center; display: inline-block; }
}

@media (max-width: 768px) {
  .footer-grid.footer-three-col { flex-direction: column; gap:24px; text-align:center; }
  
  /* Mobile Benefits Carousel */
  #benefits .container { padding-left: 20px; padding-right: 20px; }
  #benefits h2 { font-size: 2rem; margin-bottom: 1rem; }
  #benefits > .container > p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; }
  #benefits .grid.three-col.features { 
    display: flex; 
    overflow-x: auto; 
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 20px;
    margin: 0 -20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #benefits .grid.three-col.features::-webkit-scrollbar { display: none; }
  
  #benefits .feature { 
    flex: 0 0 85vw; 
    scroll-snap-align: center;
    padding: 1.5rem;
    margin-right: 0;
  }
  
  #benefits .feature h3 { 
    font-size: 1.25rem; 
    margin-bottom: 0.75rem;
  }
  
  #benefits .feature p { 
    font-size: 1rem; 
    line-height: 1.5;
  }
  
  /* Add carousel indicators */
  #benefits::after {
    content: "← Swipe to see more benefits →";
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    margin-top: 1rem;
    opacity: 0.7;
  }
}

/* Contact Section - Centered Design */
.contact-centered {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.contact-centered h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--ink);
}

/* Simple Contact Form */
.contact-form-simple {
  display: grid;
  gap: 1rem;
  margin-bottom: 3rem;
}

.form-row {
  display: flex;
  flex-direction: column;
}

.contact-form-simple input,
.contact-form-simple textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  background: #fff;
  color: #333;
  box-sizing: border-box;
}

.contact-form-simple input:focus,
.contact-form-simple textarea:focus {
  outline: none;
  border-color: #999;
}

.contact-form-simple textarea {
  resize: vertical;
  font-family: inherit;
}

.btn-submit {
  background: #666;
  color: white;
  border: none;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin: 0 auto;
  width: fit-content;
}

.btn-submit:hover {
  background: #555;
}

/* Contact Information */
.contact-info-simple {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}

.contact-info-simple h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--ink);
}

.contact-details-simple p {
  margin: 0.5rem 0;
  color: #666;
  line-height: 1.6;
}

.contact-details-simple a {
  color: var(--brand);
  text-decoration: none;
}

.contact-details-simple a:hover {
  text-decoration: underline;
}

@media (max-width: 1200px) {
  .contact-centered {
    max-width: 100%;
    padding: 0 1rem;
  }
  
  .contact-centered h2 {
    font-size: 2rem;
  }
}

/* Under construction modal */
.uc-modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:100; }
.uc-modal[aria-hidden="false"] { display:flex; }
.uc-dialog { background:var(--card); color:var(--ink); border:1px solid var(--border); border-radius:14px; padding:18px 20px; width:min(92vw, 460px); box-shadow: 0 10px 30px rgba(0,0,0,.25); text-align:center; }
.uc-dialog h3 { margin:0 0 8px; font-size:1.25rem; }
.uc-dialog p { margin:0 0 12px; }

/* Product Page */
.product-page { padding: clamp(32px, 6svh, 64px) 0; background:var(--page-bg); }
.product-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:24px; }
.product-media { grid-column: span 6; }
.product-info { grid-column: span 6; }
.product-hero { border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--card); }
.product-hero img { width:100%; display:block; }
.product-thumbs { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.product-thumbs .thumb { border:1px solid var(--border); background:var(--card); padding:0; border-radius:10px; overflow:hidden; cursor:pointer; }
.product-thumbs .thumb img { width:72px; height:72px; object-fit:cover; display:block; }
.product-thumbs .thumb.is-active { outline:2px solid var(--brand); outline-offset:2px; }
.product-title { margin:0 0 6px; font-size: clamp(1.25rem, 2.5vw, 2rem); }
.product-price { font-weight:700; color:var(--brand-ink); margin:0 0 16px; }
.product-form { display:grid; gap:12px; max-width:520px; }
.product-form .field { display:grid; gap:6px; }
.product-form select, .product-form input[type="number"] { padding:.6rem .7rem; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--ink); }
.product-accordion { margin-top:10px; border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:var(--card); }
.product-accordion summary { font-weight:700; cursor:pointer; }

@media (max-width: 960px) {
  .product-media { grid-column: span 12; }
  .product-info { grid-column: span 12; }
}

/* Responsive */
@media (max-width: 960px) {
  .two-col > *:first-child { grid-column: span 12; }
  .two-col > *:last-child { grid-column: span 12; }
  .three-col { grid-template-columns: 1fr 1fr; }
  .four-col { grid-template-columns: 1fr 1fr; }
  .site-nav { position:fixed; inset:56px 0 auto 0; background:var(--surface); border-bottom:1px solid var(--border); transform: translateY(-120%); transition: transform .25s ease; }
  .site-nav.open { transform: translateY(0); }
  .site-nav ul { flex-direction:column; padding: .75rem; align-items:stretch; }
  .nav-toggle { display:inline-block; }
  .brand-logo { height:34px; }
}

@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }

/* Dark theme */
[data-theme="dark"] { --page-bg:#0c0f13; --ink:#e8edf6; --muted:#97a0ad; --card:#10151c; --alt:#0f141b; --surface:#10151c; --border:#222a35; --header-bg:rgba(15,18,23,.75); }
[data-theme="dark"] .site-nav a:hover { background:#171c23; }
[data-theme="dark"] .btn { background:#121722; border-color:#283140; color:#e8edf6; }
[data-theme="dark"] .btn:hover{ background:#182030; }
[data-theme="dark"] .btn-secondary { background:#e8edf6; color:#0c0f13; border-color:#e8edf6; }
[data-theme="dark"] p { color:#d7deea; }
[data-theme="dark"] .gallery figure { border-color:#1f2630; }
/* Ensure contact card text is readable in dark mode */
[data-theme="dark"] .contact dt { color:#e8edf6; }
[data-theme="dark"] .contact dd { color:#cbd6e5; }
/* Copied from site styles.css */
@import url('../../../styles.css');