/* CNN Surgicals: responsive layout shared by the storefront and content pages. */
:root {
    --cnn-ink: #173646;
    --cnn-teal: #237f76;
    --cnn-line: #dce6e8;
    --cnn-soft: #f4f8f8;
}
*, *::before, *::after { box-sizing: border-box; }
body { color: var(--cnn-ink); background: #fff; line-height: 1.65; }
body, button, input, select, textarea { font-family: 'Barlow', Arial, sans-serif; }
#page { width: 100%; max-width: 100%; overflow: visible; }
.site-layout-boxed #page { width: min(100%, 1280px); }
.container { width: 100%; max-width: 1240px; padding-inline: clamp(16px, 3vw, 36px); }
img, video { max-width: 100%; height: auto; }
iframe, embed, object { max-width: 100%; }
p, li { overflow-wrap: break-word; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--cnn-teal);
    outline-offset: 4px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
    max-width: 100%; min-height: 44px; border-radius: 5px; font-size: 16px;
}
button, a.button, input[type="submit"], .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button {
    min-height: 44px; padding: 12px 20px; border-radius: 5px;
    font-size: 16px; line-height: 1.35; white-space: normal;
}

/* Contact bar and header. Floats previously left the mobile logo and menu overlapping. */
#top-bar { float: none; position: relative; z-index: 200; background: #123342; }
#top-bar > .container { display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; }
#top-bar .top-left, #top-bar .top-right { float: none; width: auto; min-width: 0; }
#top-bar .top-left-inner, #top-bar .top-right { display: flex; align-items: center; flex-wrap: wrap; }
#top-bar .top-left span { width: auto; float: none; margin: 0; border: 0; font-size: 14px; }
#top-bar .top-right { justify-content: flex-end; }
#top-bar .top-social-menu:has(.widget:empty) { display: none; }
#top-bar a { color: #fff; }
#top-bar .search-btn, #top-bar .top-icon-wrap a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
#top-bar .search-holder { position: relative; }
#top-bar .search-box { width: min(440px, calc(100vw - 32px)); right: 0; max-width: none; z-index: 1100; }
#top-bar .product-search-wrapper form { display: grid; grid-template-columns: minmax(0, 1fr) 48px; }
#top-bar .search-box .products-search { width: 100%; grid-column: 1; }
#top-bar .search-box .product-cat { width: 100%; grid-column: 1; border-top: 1px solid var(--cnn-line); }
#top-bar .search-box .search-submit { position: static; grid-column: 2; grid-row: 1 / 3; width: 48px; padding: 0; }
#top-bar .top-cart-content { width: min(320px, calc(100vw - 32px)); right: 0; }
#masthead { float: none; background: #fff; border-bottom: 1px solid var(--cnn-line); z-index: 100; }
#masthead .head-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; min-height: 100px; padding-block: 18px; }
#masthead .site-branding { float: none; margin: 0; min-width: 0; max-width: 300px; }
#masthead .custom-logo-link { float: none; display: block; margin: 0; max-width: 100%; }
#masthead .custom-logo { display: block; width: 300px; max-width: 100%; height: auto; }
#main-nav { display: block; float: none; min-width: 0; max-width: 100%; }
.main-navigation > .wrap-menu-content > div > ul { display: flex; flex-wrap: wrap; align-items: center; }
.main-navigation ul li { float: none; }
.main-navigation ul li a { padding: 14px 15px; font-size: 15px; color: var(--cnn-ink); }
.main-navigation ul li.current-menu-item > a { color: var(--cnn-teal); }
.main-navigation ul ul { box-shadow: 0 8px 24px #17364620; border: 1px solid var(--cnn-line); }
.main-navigation ul li:focus-within > ul { left: 0; opacity: 1; z-index: 999; }
.main-navigation ul ul li:focus-within > ul { left: 100%; }
.site-menu-toggle, .submenu-toggle { display: none; }

/* Hero stays readable and bounded at narrow widths. */
.main-slider { float: none; clear: both; background: #e8f0f2; }
.main-slider:not(.slick-initialized) > .item:not(:first-child) { display: none; }
.main-slider .item { float: none; min-height: 460px; padding: clamp(40px, 6vw, 90px) 0; }
.main-slider.slick-initialized .slick-slide { float: left; }
.main-slider .slider-caption { float: none; display: flow-root; }
.main-slider .slider-caption .caption-wrap { width: min(100%, 390px); max-width: 100%; background: #123342ed; border-radius: 8px; padding: 10px; }
.main-slider .slider-caption .caption-wrap .caption-inner { padding: clamp(22px, 4vw, 48px) 18px; border: 1px solid #ffffff50; border-radius: 4px; }
.main-slider .slider-caption .caption-wrap .caption-inner .slider-meta p { font-size: clamp(24px, 3.2vw, 38px); line-height: 1.3; margin-bottom: 24px; color: #fff; }
.main-slider .slider-caption .caption-wrap .button { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--cnn-teal); }
.main-slider .slick-dots { bottom: 16px; }

/* Consistent category tiles and product cards, with no hidden hover-only actions. */
#home-page-advertisement-area { float: none; clear: both; padding: 36px 0; }
#home-page-advertisement-area > .container > .inner-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; }
#home-page-advertisement-area.widget-area .ecommerce_gem_widget_advertisement,
#home-page-advertisement-area.widget-area .widget_media_image { width: auto; float: none; padding: 0; min-width: 0; }
#home-page-advertisement-area .advertisement-widget .advertisement-wrap { min-height: 260px; border-radius: 8px; overflow: hidden; padding: 24px 18px; }
#home-page-advertisement-area .advertisement-widget .advertisement-text-wrap { width: 100%; max-width: 100%; }
#home-page-advertisement-area .advertisement-widget .advertisement-content { min-height: 95px; }
#home-page-advertisement-area .advertisement-widget .advertisement-content p { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; }
#home-page-widget-area { float: none; clear: both; }
#home-page-widget-area > .widget > .container { display: flow-root; }
.latest-products-wrapper, .featured-categories-wrapper { float: none; width: 100%; }
#home-page-widget-area > .widget { float: none; clear: both; padding: 44px 0; margin: 0; }
#home-page-widget-area > .widget:nth-child(even) { background: var(--cnn-soft); }
#home-page-widget-area .widget-title { font-size: clamp(25px, 3vw, 34px); line-height: 1.25; color: var(--cnn-ink); margin-bottom: 30px; }
#home-page-widget-area .inner-wrapper { margin: 0; }
.products-carousel-wrap { float: none; width: 100%; min-width: 0; }
body.woocommerce ul.products, .latest-product-items {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
    width: 100%; margin: 0 0 30px; padding: 0; list-style: none;
}
.latest-product-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ecommerce_gem_widget_featured_categories .latest-product-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.woocommerce ul.products::before, body.woocommerce ul.products::after,
.latest-product-items::before, .latest-product-items::after { display: none; }
body.woocommerce.woocommerce-page ul.products li.product, .latest-product-items > li.product {
    float: none; clear: none; width: auto; min-width: 0; max-width: 100%; margin: 0;
    padding: 0; border: 1px solid var(--cnn-line); border-radius: 8px;
    background: #fff; overflow: hidden; box-shadow: 0 4px 16px #17364608;
}
li.product .product-thumb-wrap { float: none; width: 100%; background: #fff; }
li.product .product-thumb-wrap::before { display: none; }
li.product .product-thumb-wrap > img, .woocommerce ul.products li.product a img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 16px; margin: 0; }
li.product .product-thumb-wrap .add-to-cart-wrap { position: static; transform: none; opacity: 1; visibility: visible; width: 100%; padding: 0 16px 12px; background: #fff; }
li.product .view-detail-wishlist-wrap { opacity: 1; }
li.product .add-to-cart-wrap .button { display: block; margin: 0; width: 100%; text-align: center; background: var(--cnn-teal); color: #fff; }
li.product .product-info-wrap { float: none; padding: 16px; width: 100%; border-top: 1px solid var(--cnn-line); }
li.product .product-info-wrap h2, .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0; padding: 0; font-family: 'Barlow', Arial, sans-serif; font-size: 18px; line-height: 1.4; color: var(--cnn-ink); }

/* Content, WooCommerce forms, and embeds. */
#primary, #sidebar-primary, .woocommerce div.product, .woocommerce div.product .summary { min-width: 0; }
.entry-content { overflow-wrap: anywhere; }
.entry-content img { height: auto; }
.entry-content iframe { width: 100%; }
.entry-content table { max-width: 100%; }
.woocommerce .woocommerce-ordering { max-width: 100%; }
.woocommerce .woocommerce-ordering select { width: 100%; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio) { width: 100%; }
.woocommerce div.product div.images img { object-fit: contain; }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; padding: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0 4px 4px 0; }
.woocommerce table.shop_table { border-color: var(--cnn-line); }
#content > .container > .inner-wrapper { display: flow-root; }
#primary .entry-content a:not(.button), #sidebar-primary a { color: var(--cnn-teal); }
#page a.button, #page button.button, #page input[type="submit"],
#page .woocommerce #payment #place_order {
    background: var(--cnn-teal); border-color: var(--cnn-teal); color: #fff;
}
#page a.button:hover, #page button.button:hover, #page input[type="submit"]:hover,
#page .woocommerce #payment #place_order:hover { background: #185c55; border-color: #185c55; }
#page .woocommerce-tabs ul.tabs li { background: var(--cnn-teal); border-color: var(--cnn-teal); }
#page .woocommerce-tabs ul.tabs li a { color: #fff; }
#page .woocommerce-tabs ul.tabs li.active { background: #fff; }
#page .woocommerce-tabs ul.tabs li.active a { color: var(--cnn-ink); }
.top-cart-wrapper:focus-within .top-cart-content { opacity: 1; visibility: visible; top: 100%; }
#top-bar .top-cart-content { background: #123342; }
.woocommerce-cart .coupon { display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-cart table.cart td.actions .coupon .input-text { width: 160px; margin: 0; }

/* Footer columns and map follow the same responsive grid. */
#footer-widgets { clear: both; background: #123342; padding: 48px 0; }
#footer-widgets .inner-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; }
#footer-widgets .widget-column { float: none; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; }
#footer-widgets .widget-title { font-family: 'Barlow', Arial, sans-serif; color: #fff; font-weight: 600; font-size: 20px; }
#footer-widgets a, #footer-widgets .textwidget p, #footer-widgets li { color: #d2e3e8; font-size: 16px; line-height: 1.7; overflow-wrap: anywhere; }
#footer-widgets iframe { display: block; width: 100%; height: 240px; border-radius: 8px; }
#colophon { background: #0c2632; padding: 20px 0; }
#colophon .copyright { float: none; width: 100%; text-align: center; color: #d2e3e8; }

@media (max-width: 1100px) {
    .main-navigation ul li a { padding-inline: 10px; }
    #masthead .site-branding { max-width: 260px; }
    .latest-product-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
    #masthead .head-wrap { min-height: 84px; gap: 12px; }
    #masthead .site-branding { max-width: min(60%, 280px); }
    .cnn-navigation-ready .site-menu-toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; min-height: 44px; color: var(--cnn-ink); background: #fff; border: 1px solid var(--cnn-line); }
    .menu-toggle-icon, .menu-toggle-icon::before, .menu-toggle-icon::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
    .menu-toggle-icon::before, .menu-toggle-icon::after { content: ''; position: absolute; left: 0; }
    .menu-toggle-icon::before { top: -6px; }
    .menu-toggle-icon::after { top: 6px; }
    #main-nav { flex: 0 0 100%; width: 100%; }
    .cnn-navigation-ready #main-nav { display: none; }
    .cnn-navigation-ready #main-nav.is-open { display: block; }
    .main-navigation > .wrap-menu-content > div > ul { display: block; padding-block: 8px; border-top: 1px solid var(--cnn-line); }
    .main-navigation ul li { display: block; width: 100%; }
    .main-navigation ul li a { padding: 13px 48px 13px 12px; border-bottom: 1px solid var(--cnn-line); }
    .main-navigation ul li.menu-item-has-children > a::after { display: none; }
    .main-navigation ul ul, .main-navigation ul ul ul { display: block; position: static; min-width: 0; opacity: 1; box-shadow: none; border: 0; padding-left: 16px; }
    .cnn-navigation-ready .main-navigation ul ul { display: none; }
    .cnn-navigation-ready .main-navigation li.submenu-open > ul { display: block; }
    .cnn-navigation-ready .submenu-toggle { display: block; position: absolute; top: 2px; right: 0; width: 44px; min-height: 44px; padding: 8px; background: #edf5f4; color: var(--cnn-ink); border: 0; z-index: 100; }
    #home-page-advertisement-area > .container > .inner-wrapper { gap: 16px; }
    #home-page-advertisement-area .advertisement-widget .advertisement-wrap { min-height: 240px; }
    body.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #primary, #sidebar-primary, .global-layout-left-sidebar #primary,
    .global-layout-no-sidebar #primary { float: none; width: 100%; padding-inline: 15px; }
    #sidebar-primary { margin-top: 32px; }
    #footer-widgets .inner-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #footer-widgets .widget-column:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    #top-bar > .container { flex-direction: column; gap: 0; padding-top: 6px; }
    #top-bar .top-left-inner { justify-content: center; gap: 0 12px; }
    #top-bar .top-left span { padding: 4px 0; font-size: 13px; }
    #top-bar .top-right { width: 100%; justify-content: center; border-top: 1px solid #ffffff25; }
    #top-bar .top-account-wrapper { float: none; width: auto; border: 0; font-size: 14px; }
    #top-bar .search-holder { position: static; }
    #top-bar .top-cart-wrapper { position: static; }
    #top-bar .top-cart-content { right: 16px; top: 100%; }
    #top-bar > .container { position: relative; }
    #top-bar .search-box { right: 16px; left: 16px; width: auto; top: 100%; }
    .main-slider .item { min-height: 360px; padding: 36px 0; background-position: 65% center !important; }
    .main-slider .slider-caption .caption-wrap { width: min(100%, 340px); }
    .main-slider .slider-caption .caption-wrap .caption-inner { padding: 26px 14px; }
    #home-page-advertisement-area > .container > .inner-wrapper { grid-template-columns: 1fr; }
    #home-page-advertisement-area .advertisement-widget .advertisement-wrap { min-height: 220px; }
    .latest-product-items, .ecommerce_gem_widget_featured_categories .latest-product-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    #home-page-widget-area > .widget { padding: 32px 0; }
    .woocommerce div.product div.images, .woocommerce div.product div.summary,
    .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary { float: none; width: 100%; }
    .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2 { float: none; width: 100%; margin-bottom: 24px; }
    .woocommerce form .form-row-first, .woocommerce form .form-row-last { float: none; width: 100%; }
    .woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count { float: none; width: 100%; margin: 0 0 16px; }
    #footer-widgets .inner-wrapper { grid-template-columns: 1fr; gap: 28px; }
    #footer-widgets .widget-column:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 479px) {
    #masthead .head-wrap { padding-block: 14px; }
    #masthead .site-branding { max-width: 60%; }
    #masthead .site-menu-toggle { padding-inline: 10px; font-size: 14px; }
    .main-slider .slider-caption .caption-wrap { width: 100%; }
    body.woocommerce ul.products, .latest-product-items,
    .ecommerce_gem_widget_featured_categories .latest-product-items { grid-template-columns: 1fr; }
    .latest-product-items > li.product .product-thumb-wrap > img { max-height: 320px; }
    .woocommerce-cart table.cart td.actions .coupon { float: none; width: 100%; }
    .woocommerce-cart table.cart td.actions .coupon .input-text,
    .woocommerce-cart table.cart td.actions .coupon .button { width: 100%; }
    .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; }
    .entry-content table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
