/* CosyOne 3 Storefront Update 1.1.7. Loaded after theme and module styles. */
.cosy-mobile-toggle,
.cosy-mobile-panel,
.cosy-mobile-cart-badge { display: none; }

@media (max-width: 1023px) {
  body.cosyone3-theme {
    --cosy-mobile-action: #276658;
    --cosy-mobile-action-hover: #1c4b40;
    --cosy-mobile-text: #292d2b;
  }
  /* The JS enhancement moves the existing controls; without JS the original
     top bar and Bootstrap navigation remain available. */
  body.cosy-mobile-ready .cosy-header,
  body.cosy-mobile-ready .cosy-header.is-stuck {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    padding-top: env(safe-area-inset-top, 0px);
    background: #fff;
    border-bottom: 1px solid var(--cosy-line);
    box-shadow: none;
  }
  body.cosy-mobile-ready.cosyone3-sticky .cosy-header,
  body.cosy-mobile-ready.cosyone3-sticky .cosy-header.is-stuck {
    position: sticky;
    top: 0;
    z-index: 1100;
  }
  body.cosy-mobile-ready .cosy-header-placeholder { display: none !important; }
  body.cosy-mobile-ready .cosy-header > .container {
    width: 100%;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  body.cosy-mobile-ready .cosy-header .cosy-header-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 48px;
    grid-template-rows: 48px 44px;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 8px 0;
  }
  body.cosy-mobile-ready .cosy-header-row::before,
  body.cosy-mobile-ready .cosy-header-row::after { display: none; content: none; }
  body.cosy-mobile-ready .cosy-mobile-toggle,
  body.cosy-mobile-ready .cosy-mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    color: var(--cosy-mobile-text);
    background: #fff;
    border: 1px solid var(--cosy-line);
    border-radius: 6px;
    font-size: 20px;
    box-shadow: none;
    touch-action: manipulation;
  }
  body.cosy-mobile-ready .cosy-mobile-toggle { grid-column: 1; grid-row: 1; }
  body.cosy-mobile-ready .cosy-header .cosy-logo-wrap,
  body.cosy-mobile-ready .cosy-header.is-stuck .cosy-logo-wrap {
    display: block;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
  }
  body.cosy-mobile-ready .cosy-logo-wrap #logo img { max-height: 44px; max-width: 100%; width: auto; }
  body.cosy-mobile-ready .cosy-logo-wrap h1 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
  body.cosy-mobile-ready .cosy-search-wrap { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  body.cosy-mobile-ready .cosy-cart-wrap { grid-column: 3; grid-row: 1; min-width: 0; }
  body.cosy-mobile-ready #search,
  body.cosy-mobile-ready #cart { margin: 0; }
  body.cosy-mobile-ready #search.cosy-search .form-control,
  body.cosy-mobile-ready #search.cosy-search .btn,
  body.cosy-mobile-ready #cart.cosy-cart > .btn {
    height: 44px;
    min-height: 44px;
  }
  body.cosy-mobile-ready #search.cosy-search .form-control { font-size: 16px; padding: 10px 12px; }
  body.cosy-mobile-ready #search.cosy-search .btn { min-width: 48px; padding: 8px 12px; }
  body.cosy-mobile-ready #search.cosy-search .btn,
  body.cosy-mobile-ready #cart.cosy-cart > .btn {
    background: var(--cosy-mobile-action);
    border-color: var(--cosy-mobile-action);
    color: #fff;
    text-shadow: none;
  }
  body.cosy-mobile-ready #search.cosy-search .btn:hover,
  body.cosy-mobile-ready #search.cosy-search .btn:focus,
  body.cosy-mobile-ready #cart.cosy-cart > .btn:hover,
  body.cosy-mobile-ready #cart.cosy-cart.open > .btn { background: var(--cosy-mobile-action-hover); }
  body.cosy-mobile-ready #cart.cosy-cart > .btn { position: relative; padding: 0; font-size: 0; }
  body.cosy-mobile-ready #cart.cosy-cart > .btn::before {
    content: '\f290';
    font: normal 20px/44px FontAwesome;
  }
  body.cosy-mobile-ready #cart.cosy-cart > .btn > i { display: none; }
  body.cosy-mobile-ready #cart-total {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  body.cosy-mobile-ready .cosy-mobile-cart-badge:not([hidden]) {
    display: flex;
    position: absolute;
    top: -4px;
    right: -4px;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    background: #fff;
    color: var(--cosy-mobile-action);
    border: 1px solid var(--cosy-mobile-action);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
  }
  body.cosy-mobile-ready #cart.cosy-cart .dropdown-menu {
    width: calc(100vw - 24px);
    max-width: 430px;
    max-height: calc(100vh - 80px - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px));
  }

  body.cosy-mobile-ready .cosy-mobile-panel:not([hidden]) {
    display: block;
    max-height: calc(100vh - var(--cosy-mobile-header-height, 116px) - env(safe-area-inset-top, 0px) - 12px);
    max-height: calc(100dvh - var(--cosy-mobile-header-height, 116px) - env(safe-area-inset-top, 0px) - 12px);
    padding: 0 12px max(12px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-top: 1px solid var(--cosy-line);
    -webkit-overflow-scrolling: touch;
  }
  body.cosy-mobile-ready .cosy-mobile-panel[hidden] { display: none !important; }
  .cosy-mobile-panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
  body.cosy-mobile-ready #cosy-mobile-panel #menu.cosy-menu { margin: 0; background: #fff; border: 0; min-height: 0; }
  body.cosy-mobile-ready #cosy-mobile-panel #menu > .container { width: 100%; padding: 0; }
  body.cosy-mobile-ready #cosy-mobile-panel #menu .navbar-header { display: none; }
  body.cosy-mobile-ready #cosy-mobile-panel #cosy-main-menu { display: block; height: auto !important; margin: 0; padding: 0; overflow: visible; border: 0; box-shadow: none; }
  body.cosy-mobile-ready #cosy-mobile-panel #menu .navbar-nav > li > a { color: var(--cosy-mobile-text); background: #fff; text-shadow: none; text-transform: none; }
  body.cosy-mobile-ready #cosy-mobile-panel #menu .navbar-nav > li.open > a { color: #fff; background: var(--cosy-mobile-action); }
  body.cosy-mobile-ready #cosy-mobile-panel #menu .dropdown-menu { margin: 0 !important; }
  body.cosy-mobile-ready #cosy-mobile-panel #menu .cosy-mega-menu .dropdown-inner li > a:hover,
  body.cosy-mobile-ready #cosy-mobile-panel #menu .cosy-mega-menu .dropdown-inner li > a:focus,
  body.cosy-mobile-ready #cosy-mobile-panel #menu .cosy-mega-menu .see-all:hover,
  body.cosy-mobile-ready #cosy-mobile-panel #menu .cosy-mega-menu .see-all:focus { color: #fff !important; background: var(--cosy-mobile-action) !important; }
  body.cosy-mobile-ready #cosy-mobile-panel #menu .cosy-mega-menu .see-all { color: var(--cosy-mobile-action); }

  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar { min-height: 0; margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--cosy-line); border-bottom: 0; background: #fff; z-index: auto; }
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .hidden-xs,
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .hidden-sm { display: inline !important; }
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .col-sm-5.hidden-xs { display: block !important; }
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .col-sm-5,
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .col-sm-7 { padding: 0; width: 100%; }
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar-actions { display: flex; flex-direction: column; align-items: stretch; white-space: normal; }
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar-actions > * { width: 100%; border-left: 0; }
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar-actions > .cosy-mobile-duplicate { display: none; }
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar a,
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .btn-group > .dropdown-toggle,
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .dropdown > .dropdown-toggle {
    justify-content: flex-start;
    gap: 8px;
    min-height: 48px;
    padding: 12px;
    color: var(--cosy-mobile-text);
    font-size: 15px;
    text-align: left;
  }
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    max-height: none;
    padding: 4px;
    margin: 0;
    border: 1px solid var(--cosy-line);
    box-shadow: none;
  }
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .dropdown-menu a,
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .dropdown-menu button { color: var(--cosy-mobile-text); }
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .dropdown-menu a:hover,
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .dropdown-menu a:focus,
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .dropdown-menu button:hover,
  body.cosy-mobile-ready #cosy-mobile-panel .cosy-topbar .dropdown-menu button:focus { color: #fff; background: var(--cosy-mobile-action); }

}

@media (max-width: 767px) {
  /* The original theme uses 12px container padding with Bootstrap's -15px
     outer rows. Match those rows to remove the 3px page overflow. */
  body.cosyone3-theme > .container > .row,
  body.cosyone3-theme .cosy-footer > .container > .row { margin-left: -12px; margin-right: -12px; }

  /* Scope carousel changes to CosyOne and the existing Recommended / Latest
     modules. Prices, visibility conditions and purchase handlers stay server-owned. */
  body.cosyone3-theme section.wellness-recommended,
  body.cosyone3-theme section.wellness-latest-v14 { margin: 18px 0 24px; }
  body.cosyone3-theme .wellness-recommended__header,
  body.cosyone3-theme .wellness-latest-v14__header { gap: 8px; margin-bottom: 12px; padding-bottom: 8px; }
  body.cosyone3-theme .wellness-recommended__title,
  body.cosyone3-theme .wellness-latest-v14__title { font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: normal; overflow-wrap: anywhere; }
  body.cosyone3-theme .wellness-recommended__controls,
  body.cosyone3-theme .wellness-latest-v14__controls { gap: 4px; margin-left: 4px; }
  body.cosyone3-theme .wellness-recommended__arrow,
  body.cosyone3-theme .wellness-latest-v14__arrow { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; color: #444 !important; }
  body.cosyone3-theme .wellness-recommended-card__image,
  body.cosyone3-theme .wellness-latest-v14-card__image { width: 100%; height: clamp(180px, 50vw, 220px); min-height: 0; aspect-ratio: auto; flex: 0 0 auto; padding: 10px; }
  body.cosyone3-theme .wellness-recommended-card__image img,
  body.cosyone3-theme .wellness-latest-v14-card__image img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
  body.cosyone3-theme .wellness-recommended-card .caption h4,
  body.cosyone3-theme .wellness-latest-v14-card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; min-height: 59px; margin: 0 0 8px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
  body.cosyone3-theme .wellness-recommended-card .price,
  body.cosyone3-theme .wellness-latest-v14-card__price { color: #333; font-size: 16px; line-height: 1.4; }
  body.cosyone3-theme .cosy-product-row > .product-layout:not(.product-list) .product-thumb .image a { height: 220px; aspect-ratio: auto; }
  body.cosyone3-theme .product-thumb .button-group,
  body.cosyone3-theme section.wellness-recommended[data-wellness-recommended] .wellness-recommended-card__actions,
  body.cosyone3-theme .wellness-latest-v14-card__actions {
    grid-template-columns: minmax(0, 1fr) 44px 44px !important;
  }
  body.cosyone3-theme .product-thumb .button-group button:first-child,
  body.cosyone3-theme section.wellness-recommended[data-wellness-recommended] .wellness-recommended-card__actions .wellness-recommended-card__cart,
  body.cosyone3-theme .wellness-latest-v14-card__actions .wellness-latest-v14-card__cart { background: var(--cosy-mobile-action) !important; color: #fff !important; text-shadow: none; }
  body.cosyone3-theme .product-thumb .button-group button:first-child:hover,
  body.cosyone3-theme .product-thumb .button-group button:first-child:focus,
  body.cosyone3-theme .wellness-latest-v14-card__actions .wellness-latest-v14-card__cart:hover,
  body.cosyone3-theme .wellness-latest-v14-card__actions .wellness-latest-v14-card__cart:focus { background: var(--cosy-mobile-action-hover) !important; }
  body.cosyone3-theme .product-thumb .button-group button:first-child span,
  body.cosyone3-theme .wellness-latest-v14-card__cart span { white-space: normal; text-overflow: clip; line-height: 1.25; font-size: 12px; }
  body.cosyone3-theme .product-thumb .button-group button:first-child i,
  body.cosyone3-theme .wellness-latest-v14-card__cart i { display: none; }
  body.cosyone3-theme section.wellness-recommended[data-wellness-recommended] .wellness-recommended-card__actions > button:not(.wellness-recommended-card__cart):hover,
  body.cosyone3-theme section.wellness-recommended[data-wellness-recommended] .wellness-recommended-card__actions > button:not(.wellness-recommended-card__cart):focus,
  body.cosyone3-theme .wellness-latest-v14-card__icon:hover,
  body.cosyone3-theme .wellness-latest-v14-card__icon:focus { color: var(--cosy-mobile-action) !important; }
  body.cosyone3-theme .product-thumb .button-group > button:focus-visible,
  body.cosyone3-theme section.wellness-recommended[data-wellness-recommended] .wellness-recommended-card__actions > button:focus-visible,
  body.cosyone3-theme .wellness-latest-v14-card__actions > button:focus-visible { outline: 2px solid #111 !important; outline-offset: -3px; }
  body.cosyone3-theme .wellness-recommended__arrow:focus-visible,
  body.cosyone3-theme .wellness-latest-v14__arrow:focus-visible,
  body.cosy-mobile-ready .cosy-mobile-toggle:focus-visible,
  body.cosy-mobile-ready .cosy-mobile-close:focus-visible { outline: 2px solid var(--cosy-mobile-action) !important; outline-offset: 2px; }
}

@media (max-width: 479px) {
  body.cosyone3-theme section.wellness-recommended { --wr-visible: 1.15; }
  body.cosyone3-theme section.wellness-latest-v14 { --wlc-visible: 1.15; }
}