/**
 * Theme Name:     OceanWP Child
 * Author:         DJ
 * Template:       oceanwp
 * Text Domain:	   oceanwp-child
 * Description:    OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it
 * 
 * Version:        1.0.0
 */


#mobile-dropdown ul li a {
	color:black!important;
}

#mobile-dropdown #mobile-menu-search form button {
	color:black!important;
	font-size:15px!important;
}
.btnaddcart {
text-align:center;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background-color: var(--teal-500);
    color: #ffffff;
    border: 2px solid var(--teal-500);
    border-radius: var(--radius-sm);
    padding: 11px 28px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform .15s ease, box-shadow var(--transition);
    display: block;
}

.icon-magnifier {
font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* Specific rule for the magnifier */
.icon-magnifier:before {
  content: "\f002"!important;
}
/* ─── COLOUR TOKENS ─────────────────────────────────────────── */
:root {
  /* — Teal scale — */
  --teal-900:  #0D3B38;   /* deepest — top bar, footer bg      */
  --teal-700:  #1A6B64;   /* header bg, dark sections          */
  --teal-500:  #2A9E92;   /* primary action colour             */
  --teal-300:  #5DC8BC;   /* highlights, hover states          */
  --teal-50:   #E8F5F4;   /* light tints, card hover bg        */

  /* — Sand / Neutral scale — */
  --sand-50:   #FAF9F7;   /* page background                   */
  --sand-100:  #F2EFE8;   /* section alternates, card bg       */
  --sand-200:  #E0DAD0;   /* borders, dividers                 */
  --sand-400:  #A89F8E;   /* muted text, placeholders          */
  --sand-700:  #4A4438;   /* body text                         */
  --sand-900:  #1E1A14;   /* headings                          */

  /* — Semantic aliases — */
  --color-primary:       var(--teal-500);
  --color-primary-dark:  var(--teal-700);
  --color-primary-light: var(--teal-300);
  --color-bg:            var(--sand-50);
  --color-bg-alt:        var(--sand-100);
  --color-text:          var(--sand-700);
  --color-heading:       var(--sand-900);
  --color-border:        var(--sand-200);
  --color-muted:         var(--sand-400);

  /* — Spacing & Shape — */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --shadow-sm:   0 1px 4px rgba(13,59,56,.06), 0 2px 10px rgba(13,59,56,.04);
  --shadow-md:   0 4px 18px rgba(13,59,56,.10), 0 1px 4px rgba(13,59,56,.06);
  --shadow-lg:   0 8px 32px rgba(13,59,56,.14);
  --transition:  0.22s cubic-bezier(.4,0,.2,1);

  /* — Typography — */
  --font-display: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif;
  --font-body:    'DM Sans', 'Trebuchet MS', sans-serif;
}

/* ─── 1. GLOBAL RESET & BASE ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:          var(--font-body);
  font-size:            16px;
  line-height:          1.72;
  color:                var(--color-text);
  background-color:     var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ─── 2. TYPOGRAPHY ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:    var(--font-display);
  font-weight:    600;
  letter-spacing: .04em;
  text-transform: uppercase;

  line-height:    1.2;
  margin-bottom:  .5em;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.2rem; }
h5, h6 { font-size: 1rem; letter-spacing: .06em; }

p { margin-bottom: 1rem; }

a {
  color:      var(--color-primary);
  transition: color var(--transition);
}
a:hover { color: var(--color-primary-dark); }

/* Decorative section-title underline */
.entry-content h2,
.oceanwp-content h2 {
  position: relative;
  padding-bottom: 14px;
}
.entry-content h2::after,
.oceanwp-content h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--teal-300);
  border-radius: 2px;
}

/* ─── 3. TOP BAR ────────────────────────────────────────────── */
#top-bar-wrap {
  background-color: var(--teal-900);
  border-bottom: 1px solid rgba(93,200,188,.18);
}

#top-bar,
#top-bar a,
#top-bar span,
#top-bar li {
  color: rgba(232,245,244,.75);
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .03em;
}

#top-bar a:hover { color: var(--teal-300); }

/* ─── 4. HEADER ─────────────────────────────────────────────── */
#site-header,
#site-header-inner {
  background-color: var(--teal-700);
  border-bottom: none;
  box-shadow: 0 2px 20px rgba(13,59,56,.22);
  transition: background var(--transition), box-shadow var(--transition);
}

/* Sticky */
#site-header.oceanwp-sticky-header,
.oceanwp-sticky #site-header {
  background-color: rgba(26,107,100,.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 24px rgba(13,59,56,.28);
}

/* Logo */
#site-logo img {
  max-height: 68px;
  width: auto;
}

/* ─── 5. NAVIGATION ─────────────────────────────────────────── */
#site-navigation ul li > a,
.ocean-main-menu li > a {
  font-family:    var(--font-display);
  font-size:      .9rem;
  font-weight:    600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color:          rgba(232,245,244,.85);
  padding:        0 15px;
  transition:     color var(--transition);
}

#site-navigation ul li > a:hover,
#site-navigation ul li.current-menu-item > a,
#site-navigation ul li.current-menu-ancestor > a {
  color: var(--teal-300);
}

/* Dropdown */
#site-navigation ul.sub-menu,
.ocean-main-menu ul.sub-menu {
  background-color: var(--teal-900);
  border-top: 2px solid var(--teal-300);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 6px 0;
}

#site-navigation ul.sub-menu li > a {
  font-size: .82rem;
  padding: 9px 20px;
  border-bottom: 1px solid rgba(93,200,188,.08);
  color: rgba(232,245,244,.80);
}

#site-navigation ul.sub-menu li > a:hover {
  background-color: rgba(93,200,188,.12);
  color: var(--teal-300);
  padding-left: 24px;
  transition: padding var(--transition);
}

/* Header CTA button */
#site-header .header-button a,
.oceans-header-buttons a {
  font-family:    var(--font-display);
  font-size:      .82rem;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background:     var(--teal-300);
  color:          var(--teal-900);
  padding:        10px 24px;
  border-radius:  var(--radius-sm);
  border:         2px solid var(--teal-300);
  transition:     background var(--transition), color var(--transition);
}

#site-header .header-button a:hover,
.oceans-header-buttons a:hover {
  background:  transparent;
  color:       var(--teal-300);
}

/* ─── 6. MOBILE NAVIGATION ──────────────────────────────────── */
#mobile-menu-icon .hamburger-inner,
#mobile-menu-icon .hamburger-inner::before,
#mobile-menu-icon .hamburger-inner::after {
  background-color: var(--teal-300);
}

.sidr, #sidr-main {
  background-color: var(--teal-900);
  border-right: 2px solid rgba(93,200,188,.15);
}

.sidr ul li a,
#sidr-main ul li a {
  color:          rgba(232,245,244,.85);
  font-family:    var(--font-display);
  font-size:      .9rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom:  1px solid rgba(93,200,188,.1);
  padding:        13px 20px;
}

.sidr ul li a:hover,
#sidr-main ul li a:hover {
  color:            var(--teal-300);
  background-color: rgba(93,200,188,.07);
}

/* ─── 7. HERO / SLIDER ──────────────────────────────────────── */
/* Overlay for readability */
.oceanwp-slider .slide-wrap::before,
.elementor-background-overlay {
  background: linear-gradient(
    135deg,
    rgba(13,59,56,.62) 0%,
    rgba(26,107,100,.30) 60%,
    rgba(13,59,56,.10) 100%
  );
}

/* Slide titles */
.oceanwp-slider .slide-title,
.elementor-slide-heading,
.hero-slider h1,
.hero-slider h2 {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 5vw, 3.6rem);
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          #ffffff;
  text-shadow:    0 2px 20px rgba(13,59,56,.55);
}

.oceanwp-slider .slide-subtitle,
.elementor-slide-description {
  font-family: var(--font-body);
  font-size:   1.05rem;
  color:       rgba(232,245,244,.92);
  letter-spacing: .02em;
}

/* Slide button */
.oceanwp-slider .slide-button a,
.elementor-slide-cta a {
  background:     var(--teal-300);
  color:          var(--teal-900);
  font-family:    var(--font-display);
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding:        13px 34px;
  border-radius:  var(--radius-sm);
  border:         2px solid var(--teal-300);
  transition:     background var(--transition), color var(--transition);
}
.oceanwp-slider .slide-button a:hover {
  background: transparent;
  color:      #ffffff;
  border-color: #ffffff;
}

/* Arrows */
.slick-prev::before,
.slick-next::before {
  color: var(--teal-300);
  font-size: 1.5rem;
  text-shadow: 0 1px 6px rgba(13,59,56,.4);
}

/* Dots */
.slick-dots li button::before     { color: rgba(255,255,255,.55); }
.slick-dots li.slick-active button::before { color: var(--teal-300); }

/* ─── 8. BUTTONS ────────────────────────────────────────────── */
.button,
a.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family:      var(--font-display);
  font-size:        .85rem;
  font-weight:      700;
  letter-spacing:   .1em;
  text-transform:   uppercase;
  background-color: var(--teal-500);
  color:            #ffffff;
  border:           2px solid var(--teal-500);
  border-radius:    var(--radius-sm);
  padding:          11px 28px;
  cursor:           pointer;
  transition:       background var(--transition), color var(--transition),
                    transform .15s ease, box-shadow var(--transition);
  display:          inline-block;
}

.button:hover,
a.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--teal-700);
  border-color:     var(--teal-700);
  color:            #ffffff;
  transform:        translateY(-2px);
  box-shadow:       0 6px 18px rgba(42,158,146,.28);
}

/* Ghost / alt variant */
.button.alt,
.woocommerce a.button.alt,
a.button.alt {
  background-color: transparent;
  color:            var(--teal-500);
  border-color:     var(--teal-500);
}
.button.alt:hover,
.woocommerce a.button.alt:hover {
  background-color: var(--teal-500);
  color:            #ffffff;
}

/* Smaller "Add to Cart" on cards */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  background-color: var(--teal-900);
  border-color:     var(--teal-900);
  font-size:        .78rem;
  padding:          9px 18px;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background-color: var(--teal-500);
  border-color:     var(--teal-500);
  transform:        translateY(-1px);
}

/* ─── 9. PRODUCT CARDS ──────────────────────────────────────── */
.woocommerce ul.products {
  display:   flex;
  flex-wrap: wrap;
  gap:       22px;
}

.woocommerce ul.products li.product {
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  padding:       0;
  transition:    box-shadow var(--transition), transform var(--transition);
  position:      relative;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-5px);
  border-color: var(--teal-300);
}

/* Teal top accent on hover */
.woocommerce ul.products li.product::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     3px;
  background: var(--teal-300);
  opacity:    0;
  transition: opacity var(--transition);
}
.woocommerce ul.products li.product:hover::before { opacity: 1; }

/* Product image */
.woocommerce ul.products li.product a img {
  width:      100%;
  height:     210px;
  object-fit: cover;
  display:    block;
  transition: transform .4s ease;
  background: var(--teal-50);
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.045);
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family:    var(--font-display);
  font-size:      .97rem;
  font-weight:    600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color:          var(--color-heading);
  padding:        14px 16px 4px;
  margin:         0;
}

/* Price */
.woocommerce ul.products li.product .price {
  font-family: var(--font-display);
  font-size:   1.2rem;
  font-weight: 700;
  color:       var(--teal-500);
  padding:     4px 16px 12px;
  display:     block;
}

/* Button inside card */
.woocommerce ul.products li.product .button {
  margin: 0 16px 16px;
  width:  calc(100% - 32px);
  text-align: center;
}

/* "SOLD OUT" badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  background:   var(--teal-900);
  color:        var(--teal-300);
  font-family:  var(--font-display);
  font-size:    .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  padding:      5px 9px;
  box-shadow:   none;
}

/* ─── 10. SINGLE PRODUCT PAGE ───────────────────────────────── */
.woocommerce div.product .product_title {
  font-family:  var(--font-display);
  font-size:    2.2rem;
  font-weight:  700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:        var(--color-heading);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-size:   2rem;
  font-weight: 700;
  color:       var(--teal-500);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-top: 3px solid var(--teal-500);
  background: #fff;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family:    var(--font-display);
  font-size:      .86rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          var(--color-heading);
}

/* ─── 11. SHOP / CATEGORY TILES ─────────────────────────────── */
.woocommerce ul.products li.product-category {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.woocommerce ul.products li.product-category:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-4px);
  border-color: var(--teal-300);
}

.woocommerce ul.products li.product-category a img {
  transition: transform .4s ease;
}
.woocommerce ul.products li.product-category:hover a img {
  transform: scale(1.05);
}

.woocommerce ul.products li.product-category h2 {
  font-size: .92rem;
  color:     var(--color-heading);
}
.woocommerce ul.products li.product-category h2 .count {
  color:     var(--teal-500);
  font-size: .8rem;
}

/* ─── 12. PAGE HEADER / BREADCRUMB ──────────────────────────── */
.page-header,
.ocean-page-header {
  background-color: var(--teal-900);
  border-bottom:    3px solid var(--teal-300);
  padding:          44px 0;
}

.page-header .page-title,
.ocean-page-header h1 {
  color:       #ffffff;
  font-family: var(--font-display);
  font-size:   2.2rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.oceanwp-breadcrumbs,
.breadcrumb,
.woocommerce .woocommerce-breadcrumb {
  font-size: .82rem;
  color:     rgba(255,255,255,.65);
}

.oceanwp-breadcrumbs a,
.breadcrumb a,
.woocommerce .woocommerce-breadcrumb a {
  color: var(--teal-300);
}

/* ─── 13. SECTION BACKGROUNDS ───────────────────────────────── */
/* Alternate section rhythm */
.oceanwp-content-area,
.content-area {
  background-color: var(--color-bg);
}

/* "Alt" content sections — slight warm tint */
.has-background,
.wp-block-cover,
section.alt-bg {
  background-color: var(--sand-100);
}

/* Section title widget */
.widget-title,
.sidebar-box .widget-title {
  font-family:    var(--font-display);
  font-size:      .92rem;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--color-heading);
  padding-bottom: 10px;
  margin-bottom:  18px;
  border-bottom:  2px solid var(--teal-300);
}

/* ─── 14. FORMS & INPUTS ────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  font-family:    var(--font-body);
  font-size:      .9rem;
  color:          var(--color-text);
  background:     #ffffff;
  border:         1.5px solid var(--color-border);
  border-radius:  var(--radius-md);
  padding:        11px 15px;
  width:          100%;
  transition:     border-color var(--transition), box-shadow var(--transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  outline:      none;
  border-color: var(--teal-500);
  box-shadow:   0 0 0 3px rgba(42,158,146,.14);
}

label {
  font-family:    var(--font-display);
  font-size:      .78rem;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--color-muted);
  display:        block;
  margin-bottom:  5px;
}

/* ─── 15. FOOTER ────────────────────────────────────────────── */
#footer-widgets,
.footer-widgets {
  background-color: var(--teal-900);
  border-top:       3px solid var(--teal-300);
  padding:          60px 0 40px;
}

/* Footer widget headings */
#footer-widgets .footer-widget-title,
#footer-widgets .widget-title,
.footer-box .widget-title {
  font-family:    var(--font-display);
  font-size:      .88rem;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--teal-300);
  border-bottom:  1px solid rgba(93,200,188,.2);
  padding-bottom: 10px;
  margin-bottom:  18px;
}

/* Footer body text */
#footer-widgets p,
.footer-box p {
  font-size:   .88rem;
  color:       rgba(232,245,244,.6);
  line-height: 1.75;
}

/* Footer links */
#footer-widgets ul li a,
#footer-widgets a,
.footer-box a {
  font-size:   .88rem;
  color:       rgba(232,245,244,.65);
  line-height: 2;
  transition:  color var(--transition), padding-left var(--transition);
}

#footer-widgets ul li a:hover,
#footer-widgets a:hover,
.footer-box a:hover {
  color:        var(--teal-300);
  padding-left: 4px;
}

/* Copyright bar */
#footer-bottom,
#footer-bottom-inner {
  background-color: #071e1c;
  border-top:       1px solid rgba(93,200,188,.1);
  padding:          14px 0;
}

#footer-bottom,
#footer-bottom p,
#footer-bottom a {
  font-size: .8rem;
  color:     rgba(232,245,244,.4);
}

#footer-bottom a:hover { color: var(--teal-300); }

/* ─── 16. BLOG / POST CARDS ─────────────────────────────────── */
article.post,
.blog-entry {
  background:    var(--color-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  margin-bottom: 28px;
  transition:    box-shadow var(--transition), transform var(--transition);
}

article.post:hover,
.blog-entry:hover {
  box-shadow:    var(--shadow-md);
  transform:     translateY(-3px);
  border-color:  var(--teal-300);
}

.entry-title a {
  font-family:    var(--font-display);
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:          var(--color-heading);
}

.entry-title a:hover  { color: var(--teal-500); }

.entry-meta,
.entry-meta a,
.entry-meta span {
  font-size: .8rem;
  color:     var(--color-muted);
}

.entry-meta a:hover { color: var(--teal-500); }

/* ─── 17. PAGINATION ────────────────────────────────────────── */
.page-numbers li .page-numbers,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border:        1.5px solid var(--color-border);
  color:         var(--color-text);
  border-radius: var(--radius-sm);
  font-family:   var(--font-display);
  font-size:     .85rem;
  font-weight:   600;
  padding:       7px 14px;
  transition:    background var(--transition), color var(--transition),
                 border-color var(--transition);
}

.page-numbers li .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.current,
.page-numbers li .page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background-color: var(--teal-500);
  border-color:     var(--teal-500);
  color:            #ffffff;
}

/* ─── 18. WOO NOTICES & CART ────────────────────────────────── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--teal-500);
  background:       var(--teal-50);
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--teal-500);
}

.woocommerce-error {
  border-top-color: #d95f1a;
}

/* Cart totals */
.woocommerce .cart_totals h2,
.woocommerce .order-total th,
.woocommerce .order-total td {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.woocommerce .order-total td .amount {
  color: var(--teal-500);
  font-weight: 700;
}

/* ─── 19. SCROLL-TO-TOP ─────────────────────────────────────── */
#scroll-top {
  background-color: var(--teal-500);
  color:            #ffffff;
  border-radius:    var(--radius-sm);
  width:            40px;
  height:           40px;
  box-shadow:       var(--shadow-md);
  transition:       background var(--transition), transform var(--transition);
}
#scroll-top:hover {
  background-color: var(--teal-700);
  transform:        translateY(-2px);
}

/* ─── 20. BRAND LOGO STRIP ──────────────────────────────────── */
/* Desaturated logos on sand bg */
.brand-logos img,
.logo-strip img,
.partner-logos img {
  filter:     grayscale(40%) opacity(.75);
  transition: filter var(--transition);
}
.brand-logos img:hover,
.logo-strip img:hover,
.partner-logos img:hover {
  filter: grayscale(0%) opacity(1);
}

/* ─── 21. SELECTION COLOUR ──────────────────────────────────── */
::selection {
  background: var(--teal-300);
  color:      var(--teal-900);
}

/* ─── 22. FOCUS ACCESSIBILITY ───────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--teal-300);
  outline-offset: 3px;
}

/* ─── 23. MOBILE / RESPONSIVE ───────────────────────────────── */
@media (max-width: 1024px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
  #site-logo img { max-height: 56px; }
}

@media (max-width: 767px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.15rem; }

  #site-logo img { max-height: 46px; }

  /* Full-width product cards on mobile */
  .woocommerce ul.products[class*="columns-"] li.product {
    width:        100%;
    float:        none;
    margin-right: 0;
  }

  /* Full-width category tiles */
  .woocommerce ul.products[class*="columns-"] li.product-category {
    width:        100%;
    float:        none;
    margin-right: 0;
  }

  /* Stack footer columns */
  #footer-widgets .col,
  .footer-box {
    width:         100%;
    margin-bottom: 32px;
    padding:       0;
  }

  /* Full-width buttons on small screens */
  .button,
  a.button,
  .woocommerce a.button,
  .woocommerce button.button,
  input[type="submit"] {
    width:       100%;
    text-align:  center;
    padding:     14px 20px;
  }

  /* Hero text scale */
  .oceanwp-slider .slide-title,
  .elementor-slide-heading {
    font-size: 1.7rem;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.45rem; }
  h2 { font-size: 1.2rem; }

  #footer-widgets { padding: 36px 18px 24px; }

  .woocommerce ul.products li.product a img {
    height: 180px;
  }
}