/* Inner-page shared styles — ported from nexen-home-html/site.css + contact-us.html + about-us.html */

/* ---------- Hero banner ---------- */
.hero-banner{ position:relative; width:100%; height:clamp(240px,23vw,441px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero-banner img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-banner::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:1; }
.hero-banner .inner{ position:relative; z-index:2; padding:0 20px; }
.hero-banner h1{ font-size:clamp(28px,2.3vw,44px); font-weight:700; letter-spacing:1px; }
.hero-banner .rule{ width:134px; height:2px; background:#fff; margin:18px auto; opacity:.85; }
.hero-banner p{ font-size:clamp(13px,1vw,15px); font-weight:300; color:rgba(255,255,255,.85); max-width:680px; margin:0 auto; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display:flex; align-items:center; gap:9px; padding-top:34px; font-size:15px; font-weight:300; flex-wrap:wrap; }
.breadcrumb a{ color:var(--purple); }
.breadcrumb .sep{ width:6px; height:11px; opacity:.6; flex:0 0 6px; }
.breadcrumb .current{ color:#fff; }

/* ---------- Contact page ---------- */
.contact-main{ display:flex; gap:clamp(30px,3.2vw,48px); padding:48px 0 80px; align-items:flex-start; }
.contact-form{ flex:0 0 auto; width:clamp(320px,40%,736px); background:#171717; border-radius:30px; box-shadow:4px 4px 2px rgba(0,0,0,.25); padding:clamp(28px,3vw,54px) clamp(22px,2.6vw,50px) 34px; }
.contact-form h2{ font-size:clamp(28px,2.6vw,48px); font-weight:900; margin-bottom:36px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:15px; font-weight:400; margin-bottom:9px; }
.field input, .field textarea{ width:100%; background:#1c1c1c; border:1px solid rgba(255,255,255,.14); border-radius:8px; color:#fff; font-family:inherit; font-size:15px; padding:0 18px; height:56px; }
.field textarea{ height:auto; min-height:200px; padding:16px 18px; resize:vertical; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.5); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--purple); }
.contact-info{ flex:1 1 auto; min-width:0; padding-top:6px; }
.ci-label{ font-size:clamp(16px,1.1vw,20px); letter-spacing:.5px; color:#bb54cb; text-transform:uppercase; font-weight:500; }
.ci-title{ font-size:clamp(24px,2.4vw,45px); font-weight:900; margin:8px 0 18px; line-height:1.12; }
.ci-icn{ flex:0 0 auto; fill:none; stroke:#fff; stroke-width:1.7; }
.ci-icn.pin{ stroke:#e0362c; }
.ci-addr{ font-size:16px; font-weight:300; color:#fff; line-height:1.7; margin-bottom:28px; max-width:660px; display:flex; gap:12px; align-items:flex-start; }
.ci-addr .ci-icn{ width:22px; height:22px; margin-top:3px; }
.ci-rows{ display:flex; flex-direction:column; gap:18px; margin-bottom:32px; }
.ci-row{ display:flex; align-items:center; gap:12px; font-size:clamp(16px,1.35vw,24px); }
.ci-row .ci-icn{ width:26px; height:26px; }
.ci-row .k{ font-weight:700; margin-right:4px; }
.ci-row .v{ font-weight:300; color:#fff; }
.ci-follow{ display:flex; align-items:center; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.ci-follow .lbl{ font-weight:700; font-size:clamp(20px,1.7vw,32px); color:var(--purple); }
.ci-follow .socials{ display:flex; align-items:center; gap:15px; }
.ci-follow .socials svg{ width:24px; height:24px; fill:#fff; }
.contact-map img{ width:100%; border-radius:15px; display:block; }

/* Contact Form 7 output — dark card form matching the design */
.contact-form .wpcf7-form p{ margin-bottom:24px; }
.contact-form .wpcf7-form label{ display:block; font-size:16px; font-weight:500; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=tel], .contact-form input[type=url], .contact-form input[type=number], .contact-form select, .contact-form textarea{
  width:100%; background:rgba(51,51,51,.65); border:1px solid #8a3b97; border-radius:10px; color:#fff; font-family:inherit; font-size:16px; padding:0 18px; height:63px; margin-top:6px; }
.contact-form textarea{ height:auto; min-height:220px; padding:18px; resize:vertical; line-height:1.5; }
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:rgba(255,255,255,.4); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{ outline:none; border-color:#bb54cb; }
.contact-form .wpcf7-submit{ display:block; width:100%; background:var(--purple); color:#fff; border:none; border-radius:40px; padding:0; height:62px; font-size:clamp(18px,1.5vw,24px); font-weight:700; cursor:pointer; margin-top:8px; }

/* ---------- About / Why Nexen page ---------- */
.about-content{ padding-top:8px; padding-bottom:72px; }
.about-content .section-title{ margin:16px 0 30px; }
.about-content p{ font-size:clamp(14px,1.05vw,16px); line-height:1.75; margin-bottom:6px; max-width:1700px; }
.about-content p.muted{ color:var(--muted); font-weight:300; }
.about-content p.marked{ display:flex; align-items:flex-start; gap:12px; color:var(--white); font-weight:500; font-size:clamp(16px,1.3vw,20px); line-height:1.5; }
.about-content p.marked .sq{ width:16px; height:16px; background:var(--purple); border-radius:3px; flex:0 0 16px; margin-top:5px; }
.about-img{ width:100%; height:auto; display:block; border-radius:16px; object-fit:cover; margin:28px 0; }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .contact-main{ flex-direction:column; }
  .about-img{ border-radius:12px; margin:22px 0; }
}

/* ---------- News archive ---------- */
.news-intro{ padding-top:20px; padding-bottom:44px; }
.news-intro .section-title{ margin:14px 0 24px; }
.intro-p{ font-size:clamp(14px,1.05vw,15px); font-weight:300; line-height:1.75; color:var(--muted); max-width:1500px; margin-bottom:20px; }
.intro-p:last-child{ margin-bottom:0; }
.news-list{ padding-bottom:40px; }
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.news-card{ position:relative; aspect-ratio:580/440; border-radius:3px; overflow:hidden; display:block; cursor:pointer; }
.news-card > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.news-card:hover > img{ transform:scale(1.05); }
.news-overlay{ position:absolute; left:0; right:0; bottom:0; z-index:2; background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 42%, rgba(0,0,0,0) 100%); padding:64px 33px 22px; }
.news-overlay h3{ font-size:clamp(18px,1.35vw,22px); font-weight:700; text-transform:uppercase; line-height:1.18; color:#fff; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.news-overlay p{ font-size:14px; font-weight:300; line-height:1.4; margin-top:10px; color:rgba(255,255,255,.82); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Promotions archive ---------- */
.promo-sec{ padding-top:22px; padding-bottom:72px; }
.promo-sec .section-title{ margin:16px 0 42px; color:#bb54cb; text-shadow:0 0 18px rgba(187,84,203,.45); }
.promo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.promo-card{ display:flex; flex-direction:column; background:#1f1f1f; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.06); transition:transform .18s ease, box-shadow .18s ease; }
.promo-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.45); }
.promo-img{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
.promo-img img{ width:100%; height:100%; object-fit:cover; }
.promo-body{ flex:1; padding:22px 24px 28px; display:flex; flex-direction:column; gap:12px; border-top:1px solid rgba(138,59,151,.55); }
.promo-title{ font-size:20px; font-weight:700; line-height:1.35; color:#fff; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.promo-desc{ font-size:14px; font-weight:300; line-height:1.55; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Pagination (shared, WP paginate_links) ---------- */
.pager{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:44px 0 20px; flex-wrap:wrap; }
.pager .page-numbers{ min-width:40px; height:40px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.28); border-radius:6px; font-size:15px; color:#fff; transition:.15s; }
.pager a.page-numbers:hover{ border-color:rgba(255,255,255,.6); opacity:.75; }
.pager .page-numbers.current{ background:var(--purple); border-color:var(--purple); color:#fff; }
.pager .page-numbers.dots{ border:none; color:rgba(255,255,255,.55); min-width:auto; }

@media (max-width:1100px){ .news-grid, .promo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .news-grid, .promo-grid{ grid-template-columns:1fr; } .pager{ justify-content:center; } }

/* ---------- News single / long-form article ---------- */
.article-sec{ padding-bottom:80px; }
.article{ max-width:1730px; margin:0 auto; }
.article h1{ font-size:clamp(30px,3vw,44px); font-weight:700; line-height:1.25; letter-spacing:.2px; margin:30px 0 22px; }
.article h2{ font-size:clamp(24px,2vw,32px); font-weight:700; line-height:1.3; color:#bb54cb; margin:46px 0 16px; }
.article h3{ font-size:20px; font-weight:700; color:#bb54cb; margin:30px 0 10px; }
.article p{ font-size:15px; font-weight:300; line-height:1.75; color:var(--muted); margin-bottom:18px; }
.article p.intro, .article-lead{ font-size:clamp(15px,1.15vw,18px); font-weight:400; color:rgba(255,255,255,.82); line-height:1.8; margin:0 0 22px; }
.article ul, .article ol{ margin:2px 0 20px 22px; padding:0; color:var(--muted); font-size:15px; font-weight:300; line-height:1.95; }
.article li{ margin-bottom:4px; }
.article img{ width:100%; height:auto; border-radius:16px; margin:24px 0; object-fit:cover; }
.article hr{ border:none; border-top:1px solid rgba(255,255,255,.18); margin:38px 0; }

/* ---------- Promotion detail ---------- */
.pd-banner{ margin-top:24px; }
.pd-banner img{ width:100%; height:auto; border-radius:16px; }
/* full-bleed feature banner (breaks out of the centered container to viewport width) */
.promo-hero{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-top:18px; }
.promo-hero img{ display:block; width:100%; height:auto; }
.pd-body{ max-width:1730px; padding:44px 0 80px; }
.pd-body > *{ margin-bottom:20px; }
/* design v4 (Figma 2:10869): promo section headings are white with a magenta
   glow, oversized (up to 64px, black weight); body copy is large and light;
   terms are a numbered list. Inline accents (.hl magenta / .free yellow) are
   opt-in classes the editor can wrap around words like "NEXEN TIRE" / "FREE!". */
.pd-body h1,
.pd-body h2{ font-size:clamp(34px,4.4vw,64px); font-weight:900; line-height:1.16; letter-spacing:.5px; color:#fff; text-shadow:0 0 15px #bb54cb; margin:48px 0 20px; }
.pd-body h3{ font-size:clamp(22px,2.4vw,35px); font-weight:500; line-height:1.3; color:#fff; margin:26px 0 8px; }
.pd-body p{ font-size:clamp(17px,1.4vw,25px); font-weight:300; line-height:1.9; color:#fff; }
/* the design leads with a wide, centered lede: the first paragraph (or any
   paragraph the editor tags .pd-intro) is centered and constrained. */
.pd-body > p:first-child,
.pd-body p.pd-intro{ text-align:center; max-width:1530px; margin:22px auto 10px; line-height:2.15; }
.pd-body ol{ list-style:decimal; padding-left:32px; }
.pd-body ul{ list-style:disc; padding-left:30px; }
.pd-body li{ font-size:clamp(16px,1.3vw,24px); font-weight:300; color:#fff; line-height:1.9; margin-bottom:12px; padding-left:6px; }
.pd-body .hl{ color:#bb54cb; font-weight:700; }
.pd-body .free{ color:#e9fd57; font-weight:700; }
.pd-body img{ width:100%; height:auto; border-radius:16px; }
.pd-body hr{ border:none; border-top:1px solid rgba(255,255,255,.28); margin:32px 0; }

/* Purchase channels (promotion detail, render-when-populated) */
.purchase-channels{ max-width:1730px; padding:26px 0 90px; }
.purchase-channels h2{ font-size:clamp(28px,2.6vw,44px); font-weight:900; color:#fff; text-transform:uppercase; margin-bottom:12px; }
.purchase-channels .pc-note{ font-size:clamp(14px,1.1vw,16px); font-weight:300; color:#fff; margin-bottom:26px; max-width:1100px; }
.pc-btns{ display:flex; flex-wrap:wrap; gap:22px; }
.pc-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:227px; height:98px; padding:0 34px; border-radius:15px; font-size:clamp(18px,1.3vw,24px); font-weight:800; letter-spacing:.3px; transition:filter .15s, transform .15s; }
.pc-btn:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.pc-btn.pc-lazada{ background:#fff; color:#0f146d; }
.pc-btn.pc-shopee{ background:#ee4d2d; color:#fff; }
.pc-btn.pc-tiktok{ background:#fff; color:#010101; border:1px solid rgba(0,0,0,.12); }

/* ---------- Site search results (template-parts/search.php) ----------
   Named sitesearch-* to stay clear of the .sr-* classes used by the tire
   search-result page, which is a different feature in shop.css. */
.sitesearch{ padding:clamp(28px,4vw,56px) 0 clamp(50px,6vw,90px); }
.sitesearch-head{ margin-bottom:clamp(22px,2.6vw,38px); }
.sitesearch-head h1{ font-size:clamp(28px,3vw,48px); font-weight:600; letter-spacing:.5px; }
.sitesearch-summary{ margin-top:10px; font-size:clamp(14px,1.1vw,17px); font-weight:300; color:var(--muted); }
.sitesearch-summary span{ font-weight:600; color:#fff; }

.sitesearch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2vw,34px); }

.sitesearch-card{ position:relative; display:flex; flex-direction:column; background:#1f1f1f; border:1px solid rgba(255,255,255,.06); border-radius:14px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.sitesearch-card:hover{ transform:translateY(-3px); border-color:rgba(138,59,151,.5); box-shadow:0 18px 36px rgba(0,0,0,.45); }
.sitesearch-card__cover{ position:absolute; inset:0; z-index:2; }

.sitesearch-card__media{ position:relative; aspect-ratio:16/9; background:#171717; }
.sitesearch-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Type badge sits on the image; results mix products, pages and articles, so
   the label is what tells them apart at a glance. */
.sitesearch-card__type{ position:absolute; top:12px; left:12px; z-index:1; max-width:calc(100% - 24px); padding:5px 12px; border-radius:999px; background:var(--purple); color:#fff; font-size:12px; font-weight:600; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sitesearch-card__body{ display:flex; flex-direction:column; gap:8px; padding:clamp(14px,1.3vw,20px); }
.sitesearch-card__title{ font-size:clamp(16px,1.2vw,20px); font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sitesearch-card__excerpt{ font-size:14px; font-weight:300; line-height:1.5; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.sitesearch-empty{ font-size:clamp(15px,1.2vw,18px); font-weight:300; }
.sitesearch-empty a{ color:var(--purple); text-decoration:underline; text-underline-offset:4px; }

.sitesearch-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:clamp(30px,3.5vw,54px); }
.sitesearch-pager .page-numbers{ display:flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border-radius:10px; background:#1f1f1f; border:1px solid rgba(255,255,255,.08); font-size:15px; }
.sitesearch-pager .page-numbers:hover{ border-color:var(--purple); opacity:1; }
.sitesearch-pager .page-numbers.current{ background:var(--purple); border-color:var(--purple); font-weight:600; }
.sitesearch-pager .page-numbers.dots{ background:none; border:none; }

@media (max-width:1000px){ .sitesearch-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .sitesearch-grid{ grid-template-columns:1fr; } }

/* ---------- Rim-size index (/rim/) ----------
   Replaces the legacy 15" / 16" / 17" button stack with the design's cards:
   purple rim glyph and size + unit, each over its own purple rule, a wheel photo
   cropped by the card, chevron. Two up, and a short last row centres.
   Measured off the design: cards ~490 wide x 120 tall, so the grid is capped
   rather than spanning the full content width. */
.rim-grid{ --rim-gap:23px; --rim-purple:#9d38ac; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--rim-gap); max-width:985px; margin:clamp(18px,2vw,30px) auto 0; }

/* Geometry is measured off the design: 481x121 card, icon 48px at x32, label at
   x98 with its rule 11px under the text, icon rule 10px under the circle,
   chevron 33px in from the right. align-items:flex-end + the card's bottom
   padding put both rules on their design offsets without absolute positioning. */
.rim-card{ position:relative; flex:0 1 calc((100% - var(--rim-gap)) / 2); min-width:0; display:flex; align-items:flex-end; gap:18px; height:121px; padding:0 33px 37px 32px; overflow:hidden; border-radius:14px; background:linear-gradient(180deg,#141414,#080808); transition:box-shadow .18s, transform .18s; }
.rim-card:hover{ box-shadow:0 0 0 1px var(--rim-purple); opacity:1; transform:translateY(-2px); }
/* hello-elementor's theme.css underlines every link inside .page-content, and
   that beats a bare .rim-card on specificity. */
.page-content a.rim-card, a.rim-card{ text-decoration:none; }

/* Icon and label each sit on their own purple rule, at different heights. */
.rim-icn-wrap,
.rim-label{ border-bottom:2px solid var(--rim-purple); }

.rim-icn-wrap{ flex:0 0 auto; display:flex; padding-bottom:10px; }
.rim-icn{ display:block; width:48px; height:48px; color:var(--rim-purple); }

.rim-label{ display:flex; align-items:baseline; gap:9px; margin-bottom:8px; padding-bottom:11px; }
.rim-num{ font-size:34px; font-weight:700; line-height:1; }
.rim-unit{ font-size:27px; font-weight:500; line-height:1; }

/* Wheel photo, cropped by the card. Screened onto the card gradient so a photo
   shot on black loses its background without needing a cut-out; the widget can
   turn that off (.rim-photo--solid) for artwork on a light background.
   max-width keeps a wide upload clear of the chevron — object-fit then letterboxes
   it inside that width rather than squashing it. */
/* Selector carries .rim-card because Elementor's own `.elementor img` rule sets
   max-width:100%/height:auto and would otherwise win, stretching the photo to
   the full card width inside an Elementor page. */
.rim-card .rim-photo{ position:absolute; top:0; left:42.6%; height:100%; width:auto; max-width:47%; object-fit:contain; object-position:center; mix-blend-mode:screen; pointer-events:none; }
.rim-card .rim-photo--solid{ mix-blend-mode:normal; }

/* Chevron is centred on the card, so it is positioned rather than laid out with
   the icon and label (which are pinned to the rules' baseline). */
.rim-next{ position:absolute; top:50%; right:33px; width:18px; height:30px; margin-top:-15px; color:#fff; }

@media (max-width:860px){
	.rim-grid{ max-width:500px; }
	.rim-card{ flex:0 1 100%; }
}

@media (max-width:520px){
	.rim-card{ gap:14px; height:104px; padding:0 22px 32px 22px; }
	.rim-icn{ width:40px; height:40px; }
	.rim-num{ font-size:28px; }
	.rim-unit{ font-size:22px; }
	.rim-next{ right:22px; }
}