/*
Theme Name: Sea Containers USA v4
Theme URI: https://seacontainersusa.com
Author: Sea Containers USA
Description: Native WordPress editor theme for Sea Containers USA. All page content is editable directly from the WordPress admin — no plugins needed.
Version: 3.0.0
License: GNU General Public License v2 or later
Text Domain: scusa
*/

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body { font-family: 'Jost', sans-serif; color: #333; background: #fff; overflow-x: hidden; line-height: 1.7; }
a { text-decoration: none; color: inherit; transition: all .22s; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============================================================
   LAYOUT
============================================================ */
.wrap     { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.wrap-sm  { max-width: 860px;  margin: 0 auto; padding: 0 24px; }
.wrap-md  { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   TOPBAR
============================================================ */
.topbar { background: #1c3557; color: rgba(255,255,255,.72); font-size: .77rem; padding: 7px 0; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.topbar-left  { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.topbar-right { display: flex; gap: 12px; align-items: center; }
.topbar a, .topbar span { color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 6px; }
.topbar a:hover { color: #f90; }
.topbar svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.topbar-right a { font-size: .71rem; color: rgba(255,255,255,.45); }
.topbar-right a:hover { color: #f90; }

/* ============================================================
   PROMO BAR
============================================================ */
.promo-bar { background: #f90; padding: 7px 0; text-align: center; font-size: .79rem; font-weight: 600; color: #fff; }
.promo-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   HEADER
============================================================ */
.site-header { background: #fff; border-bottom: 1px solid #e8e8e8; box-shadow: 0 2px 10px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 100; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; max-width: 1240px; margin: 0 auto; gap: 16px; }
.site-logo { display: flex; align-items: center; gap: 11px; cursor: pointer; text-decoration: none; }
.logo-box { width: 44px; height: 44px; background: #1c3557; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-box svg { width: 25px; height: 25px; fill: #f90; }
.logo-name { font-size: .97rem; font-weight: 700; color: #1c3557; text-transform: uppercase; letter-spacing: 1px; line-height: 1.1; display: block; }
.logo-sub  { font-size: .59rem; color: #f90; letter-spacing: 2px; text-transform: uppercase; }
.main-nav ul { display: flex; align-items: center; gap: 2px; }
.main-nav a { display: block; padding: 7px 11px; font-size: .76rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #444; border-radius: 4px; transition: .18s; }
.main-nav a:hover, .main-nav a.current-menu-item { color: #f90; background: #fff9f0; }
.header-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.icon-btn { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 50%; color: #555; transition: .2s; cursor: pointer; }
.icon-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.icon-btn:hover { background: #1c3557; color: #fff; border-color: #1c3557; }
.quote-btn { background: #f90; color: #fff; border-radius: 20px; padding: 0 18px; height: 36px; display: flex; align-items: center; gap: 5px; font-size: .73rem; font-weight: 700; transition: .2s; white-space: nowrap; }
.quote-btn:hover { background: #e08800; }

/* Mobile menu toggle */
.menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 5px; }
.menu-toggle span { width: 22px; height: 2px; background: #1c3557; border-radius: 2px; transition: .28s; display: block; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   CATEGORY NAV
============================================================ */
.cat-nav { background: #f5f6f8; border-bottom: 1px solid #e0e0e0; position: relative; }
.cat-nav .wrap { display: flex; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.cat-nav .wrap::-webkit-scrollbar { display: none; }
.cat-nav-link { display: flex; align-items: center; padding: 10px 13px; font-size: .68rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #555; white-space: nowrap; border-bottom: 2px solid transparent; transition: .18s; text-decoration: none; flex-shrink: 0; }
.cat-nav-link:hover, .cat-nav-link.active { color: #f90; border-bottom-color: #f90; background: #fff; }
.cat-nav-arrow { position: absolute; top: 0; bottom: 0; width: 36px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #f5f6f8 60%, transparent); cursor: pointer; z-index: 2; border: none; padding: 0; }
.cat-nav-arrow.right { right: 0; background: linear-gradient(to left, #f5f6f8 60%, transparent); }
.cat-nav-arrow svg { width: 16px; height: 16px; stroke: #888; stroke-width: 2.5; fill: none; }

/* ============================================================
   BUTTONS
============================================================ */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 24px; font-size: .78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 5px; transition: .22s; border: 2px solid transparent; cursor: pointer; font-family: inherit; text-decoration: none; }
.btn-orange { background: #f90; color: #fff; border-color: #f90; }
.btn-orange:hover { background: #e08800; border-color: #e08800; transform: translateY(-2px); box-shadow: 0 5px 18px rgba(255,153,0,.3); color: #fff; }
.btn-dark   { background: #1c3557; color: #fff; border-color: #1c3557; }
.btn-dark:hover { background: #152a45; color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.btn-outline-dark { background: transparent; color: #1c3557; border-color: #1c3557; }
.btn-outline-dark:hover { background: #1c3557; color: #fff; }

/* ============================================================
   PAGE HERO (inner pages)
============================================================ */
.page-hero { background: linear-gradient(135deg, #0d1f35, #1c3557); padding: 50px 0; position: relative; overflow: hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background-image: repeating-linear-gradient(0deg,transparent,transparent 49px,rgba(255,255,255,.02) 50px), repeating-linear-gradient(90deg,transparent,transparent 49px,rgba(255,255,255,.02) 50px); }
.page-hero-inner { position: relative; z-index: 2; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: rgba(255,255,255,.4); margin-bottom: 11px; }
.breadcrumb a { color: rgba(255,255,255,.4); }
.breadcrumb a:hover { color: #f90; }
.breadcrumb .sep { color: rgba(255,255,255,.25); }
.breadcrumb .current { color: #f90; }
.page-hero h1 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 9px; }
.page-hero h1 em { color: #f90; font-style: normal; }
.page-hero p.hero-sub { font-size: .88rem; color: rgba(255,255,255,.58); max-width: 520px; }

/* ============================================================
   SECTIONS
============================================================ */
.sec     { padding: 58px 0; }
.sec-alt { background: #f7f8fa; }
.sec-dk  { background: #1c3557; }
.sec-label { font-size: .67rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #f90; display: block; margin-bottom: 7px; }
.sec-title { font-size: clamp(1.35rem, 2.5vw, 1.95rem); font-weight: 700; color: #1c3557; line-height: 1.2; }
.sec-title span, .sec-title em { color: #f90; font-style: normal; }
.sec-title.white { color: #fff; }
.sec-sub { font-size: .87rem; color: #777; margin-top: 8px; line-height: 1.7; max-width: 540px; }
.sh { margin-bottom: 28px; }
.sh-center { text-align: center; }
.sh-center .sec-sub { margin: 8px auto 0; }
.row-between { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.view-all-link { font-size: .73rem; font-weight: 700; color: #f90; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid #f90; padding-bottom: 2px; text-decoration: none; }
.view-all-link:hover { color: #e08800; }

/* ============================================================
   HERO (front page)
============================================================ */
.hero { background: #1c3557; position: relative; overflow: hidden; min-height: 510px; display: flex; align-items: center; }
.hero::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg,#0d1f35,#1c3557 50%,#1e3f68); }
.hero-grid { position:absolute; inset:0; background-image: repeating-linear-gradient(0deg,transparent,transparent 49px,rgba(255,255,255,.022) 50px), repeating-linear-gradient(90deg,transparent,transparent 49px,rgba(255,255,255,.022) 50px); }
.hero-blob1 { position:absolute; right:-80px; top:-80px; width:480px; height:480px; background:rgba(255,153,0,.07); border-radius:50%; }
.hero-blob2 { position:absolute; left:-60px; bottom:-60px; width:280px; height:280px; background:rgba(255,153,0,.04); border-radius:50%; }
.hero-inner { position:relative; z-index:2; display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center; padding:62px 24px; max-width:1240px; margin:0 auto; width:100%; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; font-size:.69rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:#f90; margin-bottom:13px; }
.hero-badge::before { content:''; width:22px; height:2px; background:#f90; }
.hero h1 { font-size: clamp(1.85rem,3.5vw,2.9rem); font-weight:700; color:#fff; line-height:1.16; margin-bottom:15px; text-transform:uppercase; }
.hero h1 em { color:#f90; font-style:normal; }
.hero-desc { font-size:.89rem; color:rgba(255,255,255,.65); max-width:460px; margin-bottom:26px; line-height:1.8; }
.hero-btns { display:flex; gap:11px; flex-wrap:wrap; margin-bottom:28px; }
.hero-pills { display:flex; gap:18px; flex-wrap:wrap; }
.hero-pill { display:flex; align-items:center; gap:5px; font-size:.71rem; color:rgba(255,255,255,.56); }
.hero-pill svg { width:12px; height:12px; stroke:#f90; fill:none; stroke-width:2.5; flex-shrink:0; }

/* Hero card */
.hero-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:11px; padding:18px; }
.hero-card-img { width:100%; aspect-ratio:4/3; border-radius:7px; background:linear-gradient(135deg,#1c3557,#2a4a6a); display:flex; align-items:center; justify-content:center; margin-bottom:14px; position:relative; overflow:hidden; }
.hero-card-img::after { content:'FEATURED'; position:absolute; top:9px; left:9px; background:#f90; color:#fff; font-size:.57rem; font-weight:700; letter-spacing:2px; padding:3px 8px; border-radius:3px; }
.hero-card-img img { width:100%; height:100%; object-fit:cover; border-radius:7px; }
.hero-card-meta  { font-size:.6rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:4px; }
.hero-card-name  { font-size:.89rem; font-weight:700; color:#fff; margin-bottom:5px; line-height:1.3; }
.hero-card-price { font-size:1.25rem; font-weight:700; color:#f90; margin-bottom:13px; }
.hero-card-price small { font-size:.7rem; font-weight:400; color:rgba(255,255,255,.36); margin-left:4px; }
.hero-card-btn { display:block; text-align:center; padding:10px; background:#f90; color:#fff; font-size:.73rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:4px; transition:.2s; }
.hero-card-btn:hover { background:#e08800; color:#fff; }

/* ============================================================
   FEATURES STRIP
============================================================ */
.features-strip { background: #1c3557; padding: 28px 0; }
.features-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.feature-item { display: flex; align-items: center; gap: 13px; padding: 0 22px; border-right: 1px solid rgba(255,255,255,.09); }
.feature-item:last-child { border: none; }
.feature-ico { width: 42px; height: 42px; background: rgba(255,153,0,.13); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feature-ico svg { width: 19px; height: 19px; stroke: #f90; fill: none; stroke-width: 2; }
.feature-title { font-size: .76rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .4px; }
.feature-desc  { font-size: .69rem; color: rgba(255,255,255,.44); margin-top: 2px; }

/* ============================================================
   PRODUCTS GRID
============================================================ */
.products-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.product-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; transition: .28s; position: relative; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(28,53,87,.11); border-color: #d5d5d5; }
.product-badge { position: absolute; top: 9px; left: 9px; font-size: .57rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; z-index: 1; }
.badge-feat { background: #f90; color: #fff; }
.badge-new  { background: #27ae60; color: #fff; }
.badge-sale { background: #e74c3c; color: #fff; }
.product-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.product-img-placeholder { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.product-img-placeholder svg { width: 52px; height: 52px; opacity: .15; }
.product-body { padding: 13px; }
.product-cat { font-size: .62rem; color: #f90; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.product-name { font-size: .84rem; font-weight: 600; color: #1c3557; line-height: 1.28; margin-bottom: 6px; }
.product-stars { color: #f90; font-size: .7rem; letter-spacing: 1.5px; margin-bottom: 8px; }
.product-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.product-price { font-size: .94rem; font-weight: 700; color: #1c3557; }
.product-price del { font-size: .74rem; color: #bbb; font-weight: 400; margin-right: 3px; }
.product-price .sale-price { color: #e74c3c; }
.add-btn { background: #1c3557; color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 6px 12px; border-radius: 4px; border: none; cursor: pointer; transition: .22s; display: flex; align-items: center; gap: 4px; font-family: inherit; flex-shrink: 0; }
.add-btn:hover { background: #f90; }
.add-btn svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* ============================================================
   CATEGORIES GRID
============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.cat-card { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 3/2; display: flex; align-items: flex-end; transition: .28s; box-shadow: 0 2px 10px rgba(0,0,0,.08); text-decoration: none; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.cat-card-bg { position: absolute; inset: 0; transition: transform .4s; background-size: cover; background-position: center; }
.cat-card:hover .cat-card-bg { transform: scale(1.06); }
.cat-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,22,38,.93) 0%, rgba(10,22,38,.2) 55%, transparent); }
.cat-card-body { position: relative; z-index: 2; padding: 15px 17px; width: 100%; }
.cat-card-sub { font-size: .6rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #f90; margin-bottom: 2px; }
.cat-card-title { font-size: .9rem; font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 2px; }
.cat-card-count { font-size: .68rem; color: rgba(255,255,255,.5); }
.cat-card-arrow { position: absolute; right: 13px; bottom: 15px; z-index: 2; width: 28px; height: 28px; background: rgba(255,255,255,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .28s; }
.cat-card:hover .cat-card-arrow { background: #f90; }
.cat-card-arrow svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.5; }
/* gradient placeholders */
.g1{background:linear-gradient(135deg,#1c3557,#2a4a6a)}.g2{background:linear-gradient(135deg,#255225,#1a3a16)}.g3{background:linear-gradient(135deg,#4a2c1c,#2a180e)}.g4{background:linear-gradient(135deg,#1a2d4a,#0e1a2d)}.g5{background:linear-gradient(135deg,#2a2a1c,#1a1a0e)}.g6{background:linear-gradient(135deg,#2a1c4a,#160e2d)}.g7{background:linear-gradient(135deg,#1c3a3a,#0e2222)}

/* ============================================================
   ABOUT LAYOUT
============================================================ */
.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.about-imgs { position: relative; padding-bottom: 38px; padding-right: 38px; }
.about-main-img { width: 100%; aspect-ratio: 1; border-radius: 11px; background: linear-gradient(135deg,#1c3557,#2a4a6a); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.about-main-img img { width:100%; height:100%; object-fit:cover; }
.about-main-img svg { width:105px; height:105px; opacity:.12; fill:white; }
.about-badge { position:absolute; bottom:0; right:0; width:43%; aspect-ratio:1; background:#f90; border-radius:10px; border:5px solid #fff; box-shadow:0 7px 22px rgba(0,0,0,.13); display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:12px; }
.about-badge-num { font-size:2rem; font-weight:700; color:#fff; line-height:1; }
.about-badge-txt { font-size:.57rem; color:rgba(255,255,255,.9); text-transform:uppercase; letter-spacing:1.5px; margin-top:4px; }
.about-checklist { list-style: none; display: grid; gap: 8px; margin: 16px 0; }
.about-checklist li { display: flex; align-items: flex-start; gap: 9px; font-size: .85rem; color: #555; }
.about-checklist li::before { content:'✓'; min-width:19px; height:19px; background:#f90; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:700; flex-shrink:0; margin-top:2px; }

/* ============================================================
   STATS BAR
============================================================ */
.stats-bar { background: #f90; padding: 34px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); text-align: center; }
.stat-item { padding: 0 14px; border-right: 1px solid rgba(255,255,255,.26); }
.stat-item:last-child { border: none; }
.stat-num   { display: block; font-size: 2.3rem; font-weight: 700; color: #fff; line-height: 1; }
.stat-label { display: block; font-size: .69rem; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 5px; }

/* ============================================================
   TESTIMONIALS
============================================================ */
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.testimonial-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 22px; transition: .28s; border-top: 3px solid transparent; }
.testimonial-card:hover { border-top-color: #f90; transform: translateY(-3px); box-shadow: 0 9px 26px rgba(28,53,87,.08); }
.testimonial-stars { color: #f90; font-size: .76rem; letter-spacing: 2px; margin-bottom: 11px; }
.testimonial-text { font-size: .84rem; color: #555; font-style: italic; line-height: 1.75; margin-bottom: 14px; }
.testimonial-text::before { content:'"'; font-size:1.9rem; color:#f90; line-height:.28; display:block; margin-bottom:9px; font-style:normal; }
.testimonial-author { display: flex; align-items: center; gap: 9px; }
.testimonial-avatar { width: 36px; height: 36px; border-radius: 50%; background: #1c3557; color: #fff; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.testimonial-name { display: block; font-size: .8rem; font-weight: 700; color: #1c3557; }
.testimonial-role { display: block; font-size: .69rem; color: #999; }

/* ============================================================
   CTA BANNER
============================================================ */
.cta-banner { background: linear-gradient(135deg,#0d1f35,#1c3557); padding: 52px 0; position: relative; overflow: hidden; }
.cta-banner::after { content:''; position:absolute; right:-50px; top:-50px; width:340px; height:340px; background:rgba(255,153,0,.07); border-radius:50%; }
.cta-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.cta-text h2 { font-size: clamp(1.15rem,2.2vw,1.8rem); font-weight: 700; color: #fff; text-transform: uppercase; margin-bottom: 5px; }
.cta-text p { color: rgba(255,255,255,.6); font-size: .87rem; }
.cta-btns { display: flex; gap: 11px; flex-wrap: wrap; flex-shrink: 0; }

/* ============================================================
   PAGE CONTENT (WordPress editor output)
============================================================ */
.page-content { padding: 58px 0; }
.entry-content { max-width: 820px; }
.entry-content.wide { max-width: 100%; }

/* Standard WordPress block styles */
.entry-content h1,
.entry-content h2 { font-size: clamp(1.25rem,2.5vw,1.8rem); font-weight: 700; color: #1c3557; margin: 28px 0 12px; line-height: 1.25; }
.entry-content h3 { font-size: 1.08rem; font-weight: 700; color: #1c3557; margin: 22px 0 9px; }
.entry-content h4 { font-size: .95rem; font-weight: 700; color: #1c3557; margin: 16px 0 7px; }
.entry-content p { font-size: .9rem; color: #555; line-height: 1.82; margin-bottom: 16px; }
.entry-content ul, .entry-content ol { padding-left: 22px; margin-bottom: 16px; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { font-size: .9rem; color: #555; line-height: 1.7; margin-bottom: 5px; }
.entry-content a { color: #f90; text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: #e08800; }
.entry-content strong { font-weight: 700; color: #333; }
.entry-content blockquote { border-left: 4px solid #f90; padding: 14px 20px; background: #f7f8fa; border-radius: 0 6px 6px 0; margin: 20px 0; font-style: italic; color: #555; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: .88rem; }
.entry-content th { background: #1c3557; color: #fff; padding: 10px 14px; text-align: left; font-weight: 600; }
.entry-content td { padding: 9px 14px; border-bottom: 1px solid #eee; color: #555; }
.entry-content tr:nth-child(even) td { background: #f9f9f9; }
.entry-content img { border-radius: 6px; margin: 16px 0; }
.entry-content .wp-block-image { margin: 20px 0; }
.entry-content .wp-block-separator { border: none; border-top: 2px solid #eee; margin: 28px 0; }
.entry-content .wp-block-quote { border-left: 4px solid #f90; padding: 14px 20px; background: #f7f8fa; margin: 20px 0; }
.entry-content .wp-block-buttons { margin: 20px 0; }
.entry-content .wp-block-button__link { background: #f90; color: #fff; padding: 11px 24px; border-radius: 5px; font-weight: 700; font-size: .78rem; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; display: inline-block; transition: .22s; }
.entry-content .wp-block-button__link:hover { background: #e08800; }
.entry-content .wp-block-columns { gap: 24px; }

/* Policy page specific */
.policy-intro { font-size: .88rem; background: #f7f8fa; padding: 16px 20px; border-radius: 7px; border-left: 4px solid #f90; margin-bottom: 26px; color: #555; line-height: 1.75; }

/* Contact form */
.contact-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 46px; align-items: start; }
.contact-form-box { background: #fff; border: 1px solid #e8e8e8; border-radius: 10px; padding: 30px; }
.contact-form-box h2 { font-size: 1.08rem; font-weight: 700; color: #1c3557; margin-bottom: 18px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #555; margin-bottom: 5px; }
.form-group input,
.form-group select,
.form-group textarea { width: 100%; border: 1px solid #e0e0e0; border-radius: 5px; padding: 9px 13px; font-size: .87rem; font-family: 'Jost',sans-serif; color: #333; outline: none; transition: .18s; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: #f90; box-shadow: 0 0 0 3px rgba(255,153,0,.1); }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.contact-info-cards { display: grid; gap: 14px; }
.contact-info-card { background: #f7f8fa; border-radius: 9px; padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
.contact-info-ico { width: 42px; height: 42px; background: #1c3557; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-ico svg { width: 19px; height: 19px; stroke: #f90; fill: none; stroke-width: 2; }
.contact-info-card h4 { font-size: .77rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #1c3557; margin-bottom: 3px; }
.contact-info-card p, .contact-info-card a { font-size: .83rem; color: #666; }
.contact-info-card a:hover { color: #f90; }

/* Values */
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.value-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 9px; padding: 22px; transition: .28s; }
.value-card:hover { border-color: #f90; transform: translateY(-3px); box-shadow: 0 7px 22px rgba(28,53,87,.08); }
.value-ico { width: 46px; height: 46px; background: rgba(255,153,0,.1); border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.value-ico svg { width: 21px; height: 21px; stroke: #f90; fill: none; stroke-width: 2; }
.value-title { font-size: .88rem; font-weight: 700; color: #1c3557; margin-bottom: 6px; }
.value-desc  { font-size: .8rem; color: #666; line-height: 1.62; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.team-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 9px; overflow: hidden; text-align: center; transition: .28s; }
.team-card:hover { transform: translateY(-3px); box-shadow: 0 9px 26px rgba(28,53,87,.1); }
.team-img { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.team-img img { width:100%; height:100%; object-fit:cover; }
.team-img svg { width: 58px; height: 58px; opacity: .16; fill: white; }
.team-body { padding: 16px; }
.team-name { font-size: .89rem; font-weight: 700; color: #1c3557; margin-bottom: 2px; }
.team-role { font-size: .73rem; color: #f90; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 7px; }
.team-bio  { font-size: .78rem; color: #777; line-height: 1.58; }

/* Buyers guide steps */
.guide-step { display: flex; gap: 20px; align-items: flex-start; background: #fff; border: 1px solid #e8e8e8; border-radius: 9px; padding: 22px; margin-bottom: 14px; }
.guide-step-num { font-size: 1.7rem; font-weight: 700; color: #f90; opacity: .32; line-height: 1; flex-shrink: 0; min-width: 46px; }
.guide-step-title { font-size: .93rem; font-weight: 700; color: #1c3557; margin-bottom: 6px; }
.guide-step-desc  { font-size: .84rem; color: #666; line-height: 1.75; }
.container-types  { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 44px; }
.container-type   { background: #fff; border: 1px solid #e8e8e8; border-radius: 9px; padding: 20px; border-top: 4px solid #f90; }
.container-type h3 { font-size: .86rem; font-weight: 700; color: #1c3557; margin-bottom: 6px; }
.container-type p  { font-size: .8rem; color: #666; line-height: 1.68; }

/* FAQ */
.faq-item { border: 1px solid #e8e8e8; border-radius: 7px; margin-bottom: 9px; overflow: hidden; }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 17px 21px; font-size: .86rem; font-weight: 600; color: #1c3557; cursor: pointer; gap: 11px; background: none; border: none; width: 100%; font-family: inherit; text-align: left; }
.faq-question:hover { background: #f7f8fa; }
.faq-icon { width: 23px; height: 23px; border: 2px solid #ddd; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: .22s; }
.faq-icon svg { width: 11px; height: 11px; stroke: #888; fill: none; stroke-width: 2.5; transition: .22s; }
.faq-item.open .faq-icon { background: #f90; border-color: #f90; }
.faq-item.open .faq-icon svg { stroke: #fff; transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 21px 17px; font-size: .85rem; color: #666; line-height: 1.75; border-top: 1px solid #f0f0f0; }
.faq-answer p { padding-top: 13px; }
.faq-item.open .faq-answer { display: block; }
.faq-category-title { font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #f90; margin: 28px 0 13px; border-bottom: 1px solid #eee; padding-bottom: 9px; }

/* Shop */
.shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
.shop-sidebar-box { background: #f7f8fa; border-radius: 9px; padding: 18px; border: 1px solid #e8e8e8; position: sticky; top: 20px; }
.sidebar-heading { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #1c3557; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #f90; display: inline-block; }
.sidebar-cat-links { display: grid; gap: 0; }
.sidebar-cat-link { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: .8rem; color: #555; border-bottom: 1px solid #eee; transition: .18s; text-decoration: none; }
.sidebar-cat-link:hover, .sidebar-cat-link.active { color: #f90; }
.sidebar-cat-link span { background: #e8e8e8; color: #888; font-size: .68rem; padding: 2px 7px; border-radius: 10px; }
.sidebar-cat-link.active span { background: #f90; color: #fff; }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 13px; border-bottom: 1px solid #eee; flex-wrap: wrap; gap: 9px; }
.shop-result-count { font-size: .8rem; color: #888; }
.shop-sort select { border: 1px solid #ddd; border-radius: 5px; padding: 6px 11px; font-size: .78rem; font-family: 'Jost',sans-serif; color: #555; outline: none; cursor: pointer; }

/* WooCommerce overrides */
.woo-products-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.woo-products-grid ul.products { display:contents !important; margin:0 !important; padding:0 !important; }
.woo-products-grid ul.products li.product { background:#fff; border:1px solid #e8e8e8; border-radius:8px; overflow:hidden; transition:.28s; position:relative; list-style:none !important; float:none !important; width:auto !important; margin:0 !important; }
.woo-products-grid ul.products li.product:hover { transform:translateY(-4px); box-shadow:0 10px 28px rgba(28,53,87,.11); }
.woo-products-grid ul.products li.product a img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.woo-products-grid ul.products li.product .woocommerce-loop-product__title { font-size:.86rem; font-weight:600; color:#1c3557; padding:12px 13px 4px; line-height:1.3; }
.woo-products-grid ul.products li.product .price { display:block; padding:0 13px 4px; font-size:.92rem; font-weight:700; color:#1c3557; }
.woo-products-grid ul.products li.product .price del { color:#bbb; font-size:.76rem; font-weight:400; }
.woo-products-grid ul.products li.product .price ins { text-decoration:none; color:#e74c3c; }
.woo-products-grid ul.products li.product .button { display:block; margin:0 13px 13px; padding:8px 14px; background:#1c3557; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:4px; border:none; cursor:pointer; transition:.22s; text-align:center; font-family:'Jost',sans-serif; }
.woo-products-grid ul.products li.product .button:hover { background:#f90; }
.woo-products-grid ul.products li.product .onsale { position:absolute; top:9px; left:9px; background:#e74c3c; color:#fff; font-size:.57rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:3px 7px; border-radius:3px; z-index:1; min-height:auto; line-height:1.5; }
.woo-pagination { margin-top:28px; text-align:center; }
.woo-pagination .woocommerce-pagination ul { display:inline-flex; gap:5px; list-style:none; padding:0; margin:0; }
.woo-pagination .woocommerce-pagination ul li a, .woo-pagination .woocommerce-pagination ul li span { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid #e0e0e0; border-radius:5px; font-size:.8rem; font-weight:600; color:#555; transition:.18s; }
.woo-pagination .woocommerce-pagination ul li a:hover { background:#f90; color:#fff; border-color:#f90; }
.woo-pagination .woocommerce-pagination ul li span.current { background:#1c3557; color:#fff; border-color:#1c3557; }
.cat-empty { text-align:center; padding:60px 24px; background:#f7f8fa; border-radius:11px; border:2px dashed #ddd; }
.cat-empty-icon { width:64px; height:64px; background:rgba(28,53,87,.07); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.cat-empty-icon svg { width:30px; height:30px; stroke:#1c3557; opacity:.4; }
.cat-empty h3 { font-size:1.05rem; font-weight:700; color:#1c3557; margin-bottom:8px; }
.cat-empty p { font-size:.87rem; color:#777; line-height:1.7; }

/* ============================================================
   404 PAGE
============================================================ */
.error-page { text-align: center; padding: 80px 24px; }
.error-num { font-size: 7rem; font-weight: 700; color: #e8e8e8; line-height: 1; display: block; }
.error-title { font-size: 1.35rem; font-weight: 700; color: #1c3557; margin-bottom: 8px; }
.error-text  { font-size: .88rem; color: #777; margin-bottom: 26px; }
.error-btns  { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
============================================================ */
.site-footer { background: #0f1e2e; }
.footer-top  { padding: 50px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 38px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.07); }
.footer-brand-name { font-size: .92rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: block; }
.footer-brand-sub  { font-size: .58rem; color: #f90; letter-spacing: 2px; text-transform: uppercase; }
.footer-about-text { font-size: .77rem; color: rgba(255,255,255,.42); margin: 11px 0 16px; line-height: 1.75; }
.footer-social     { display: flex; gap: 7px; }
.footer-social a   { width: 30px; height: 30px; background: rgba(255,255,255,.07); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .22s; }
.footer-social a:hover { background: #f90; }
.footer-social svg { width: 12px; height: 12px; stroke: rgba(255,255,255,.6); fill: none; stroke-width: 2; }
.footer-col-title { font-size: .68rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #fff; margin-bottom: 13px; padding-bottom: 7px; border-bottom: 2px solid #f90; display: inline-block; }
.footer-links { display: grid; gap: 7px; }
.footer-links a { font-size: .78rem; color: rgba(255,255,255,.42); display: flex; align-items: center; gap: 4px; transition: .18s; text-decoration: none; }
.footer-links a::before { content: '›'; color: #f90; font-size: 1rem; }
.footer-links a:hover { color: #fff; padding-left: 3px; }
.footer-contact-item { display: flex; gap: 8px; align-items: flex-start; font-size: .77rem; color: rgba(255,255,255,.42); margin-bottom: 10px; }
.footer-contact-item svg { width: 13px; height: 13px; stroke: #f90; fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 3px; }
.footer-contact-item a { color: rgba(255,255,255,.42); transition: .18s; }
.footer-contact-item a:hover { color: #f90; }
.footer-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.footer-chips a { background: rgba(255,255,255,.05); color: rgba(255,255,255,.45); font-size: .66rem; padding: 4px 11px; border-radius: 3px; border: 1px solid rgba(255,255,255,.09); transition: .18s; text-decoration: none; }
.footer-chips a:hover { background: rgba(255,153,0,.15); color: #f90; border-color: #f90; }
.footer-bottom { padding: 13px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 7px; font-size: .7rem; color: rgba(255,255,255,.28); }
.footer-bottom a { color: rgba(255,255,255,.28); margin-right: 13px; transition: .18s; text-decoration: none; }
.footer-bottom a:hover { color: #f90; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1060px) {
  .products-grid { grid-template-columns: repeat(3,1fr); }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 860px) {
  .hero-inner  { grid-template-columns: 1fr; }
  .hero-card   { display: none; }
  .about-layout { grid-template-columns: 1fr; }
  .about-imgs  { padding: 0; }
  .contact-layout { grid-template-columns: 1fr; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar-box { position: static; }
  .woo-products-grid { grid-template-columns: repeat(2,1fr); }
  .features-grid { grid-template-columns: repeat(2,1fr); }
  .cat-grid    { grid-template-columns: repeat(2,1fr); }
  .values-grid { grid-template-columns: repeat(2,1fr); }
  .team-grid   { grid-template-columns: repeat(2,1fr); }
  .container-types { grid-template-columns: repeat(2,1fr); }
  .stats-grid  { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .main-nav    { display: none; }
  .menu-toggle { display: flex; }
  .main-nav.open { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 9999; align-items: center; justify-content: center; gap: 8px; }
  .main-nav.open ul { flex-direction: column; align-items: center; }
  .main-nav.open a { font-size: 1.1rem; padding: 12px 24px; }
}
@media (max-width: 560px) {
  .products-grid    { grid-template-columns: repeat(2,1fr); }
  .woo-products-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .features-grid    { grid-template-columns: 1fr; }
  .cat-grid         { grid-template-columns: 1fr; }
  .values-grid      { grid-template-columns: 1fr; }
  .team-grid        { grid-template-columns: 1fr; }
  .container-types  { grid-template-columns: 1fr; }
  .footer-grid      { grid-template-columns: 1fr; }
  .cta-inner        { flex-direction: column; text-align: center; }
  .cta-btns         { justify-content: center; }
  .form-row         { grid-template-columns: 1fr; }
}

/* ============================================================
   WOOCOMMERCE SHOP TOOLBAR — ordering select fix
============================================================ */
.woocommerce-ordering,
.woocommerce-ordering select {
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 6px 11px;
  outline: none;
  background: #fff;
  cursor: pointer;
}
.woocommerce-result-count {
  font-size: .8rem;
  color: #888;
  margin: 0;
}
/* Remove default WC shop page title (we have our own hero) */
.woocommerce-products-header,
.woocommerce-products-header__title.page-title { display: none !important; }

/* Fix WC stripping ul.products margins */
ul.products { margin: 0 !important; padding: 0 !important; }
ul.products::before, ul.products::after { display: none !important; }
