/* =================================================================
   NAKOMY — VISUAL DESIGN LAYER
   -----------------------------------------------------------------
   This stylesheet is a pure presentation layer on top of the
   native YouCan "Origins" theme. It intentionally:
     - never duplicates or re-implements Origins components
     - never touches Liquid logic, cart/checkout/variant behaviour
     - only restyles existing native selectors (colors, borders,
       spacing, radii, hover/focus states)

   It is loaded last (end of <body>) on purpose, so it can win the
   cascade against section-level stylesheets without needing
   `!important` anywhere except the two places Origins itself
   already uses `!important` (noted inline below).

   Brand tokens (--nakomy-*) are declared in snippets/head-config.liquid
   ================================================================= */


/* -----------------------------------------------------------------
   1. HEADER LAYOUT
   Desktop:  [ Search + Cart ]  ——  [ Logo ]  ——  [ Menu icon ]
   The inline text navigation is replaced by the native menu-drawer
   hamburger trigger at every breakpoint (Origins ships the trigger
   mobile-only by default; the drawer/component logic is untouched,
   only its visibility and the surrounding grid are restyled).

   Grid areas are direction-aware: browsers mirror named grid areas
   automatically when the document is RTL (Arabic locale), so this
   single template covers LTR and RTL storefronts without duplicate
   rules.
   ----------------------------------------------------------------- */
#youcan-section--header yc-header[data-desktop-logo-position]{
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "actions heading menu";
}
#youcan-section--header yc-header .logo{
  grid-area: heading;
  justify-self: center;
}
#youcan-section--header yc-header > .actions[data-block]{
  grid-area: actions;
  justify-content: flex-start;
}
#youcan-section--header yc-header > .links[data-block]{
  grid-area: menu;
  justify-content: flex-end;
}

/* Hide the inline text nav; only the compact hamburger icon button
   (native drawer trigger) remains — never a permanent nav panel. */
#youcan-section--header yc-header .links > ul{
  display: none;
}

/* Native menu-drawer trigger: Origins only shows this <= 1024px by
   default. Force it visible at every breakpoint. The drawer itself
   (open/close, overlay, native JS) is completely untouched. */
#youcan-section--header yc-drawer#menu{
  display: inline-flex;
}
#youcan-section--header .drawer-btn.icon{
  border-color: color-mix(in srgb, var(--nakomy-forest) 25%, transparent);
}
#youcan-section--header .drawer-btn.icon:hover{
  border-color: var(--nakomy-forest);
  color: var(--nakomy-forest);
}

/* Icon buttons in the header (search / cart) get a restrained
   forest accent on hover instead of the generic grey tint. */
#youcan-section--header .actions .search-btn:hover,
#youcan-section--header .actions .cart-btn:hover{
  color: var(--nakomy-forest);
}

/* Origins' own 1024px breakpoint forces a different grid with
   `!important`; matched here (same specificity family + higher via
   the section id) so the NAKOMY layout holds on tablet/mobile too. */
@media (max-width: 1024px){
  #youcan-section--header yc-header[data-desktop-logo-position]{
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "actions heading menu" !important;
  }
}


/* -----------------------------------------------------------------
   2. BUTTON SYSTEM
   Colors/radius themselves come from Theme Editor settings (now
   defaulted to the NAKOMY palette in config/settings_schema.json).
   These rules only refine hover/focus behaviour so the system reads
   as one coherent, intentional set rather than default fades.
   ----------------------------------------------------------------- */
button.primary:hover:not(:disabled),
.yc-btn.primary:hover:not(:disabled){
  opacity: 1;
  background-color: color-mix(in srgb, rgb(var(--color-button)) 86%, black);
  border-color: color-mix(in srgb, rgb(var(--color-button)) 86%, black);
}

/* Fixes a contrast issue in the native secondary-button hover state
   (text color was left unset to the outline color, becoming
   unreadable once the background fills solid on hover). */
button.secondary:hover:not(:disabled),
.yc-btn.secondary:hover:not(:disabled){
  color: var(--nakomy-surface);
}

button.destructive:hover:not(:disabled),
.yc-btn.destructive:hover:not(:disabled){
  opacity: 1;
  background-color: color-mix(in srgb, var(--color-error-500) 86%, black);
}

/* Restrained hover for icon-only buttons site-wide (quantity
   controls, drawer close buttons, cart/search triggers, etc.) */
button.icon:hover,
.yc-btn.icon:hover{
  border-color: color-mix(in srgb, var(--nakomy-forest) 30%, transparent);
  color: var(--nakomy-forest);
}

/* Focus + form field accents */
select:focus,
textarea:focus,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]):focus{
  border-color: var(--nakomy-forest);
}
.yc-checkbox:checked,
.yc-checkbox:indeterminate{
  border-color: var(--nakomy-forest);
  background-color: var(--nakomy-forest);
}


/* -----------------------------------------------------------------
   3. PRODUCT CARDS
   Image dimensions/aspect ratio are untouched — only the card frame
   (border) is restyled from a near-invisible 1px neutral line to an
   intentional Forest Green frame.
   ----------------------------------------------------------------- */
.product-card{
  --product-card-border-color: var(--nakomy-forest);
  --product-card-border: 2px solid var(--nakomy-forest);
  transition: transform var(--transition-duration-normal),
              box-shadow var(--transition-duration-normal),
              border-color var(--transition-duration-normal);
}
.product-card[data-style$=standard]:hover{
  border-color: var(--nakomy-forest-dark);
  box-shadow: 0 6px 18px rgba(var(--nakomy-forest-rgb), 0.10);
  transform: translateY(-2px);
}
.product-card .info .price .current{
  color: var(--nakomy-forest-dark);
}


/* -----------------------------------------------------------------
   4. COLLECTION CARDS
   Forest Green frame (never Warm Sand/gold), image untouched.
   ----------------------------------------------------------------- */
.collection-card{
  border: 2px solid var(--nakomy-forest);
  transition: border-color var(--transition-duration-normal),
              transform var(--transition-duration-normal);
}
.collection-card:hover{
  border-color: var(--nakomy-forest-dark);
}


/* -----------------------------------------------------------------
   5. VARIANTS — selection states only (logic untouched)
   ----------------------------------------------------------------- */
yc-variant .variant-item:hover{
  color: var(--nakomy-forest);
}
yc-variant[name=toggle] .toggle-item:has(input:checked){
  color: var(--nakomy-surface);
  border-color: var(--nakomy-forest);
  background-color: var(--nakomy-forest);
}
yc-variant[name=color] .color-item:has(input:checked){
  outline-color: var(--nakomy-forest);
}
yc-variant[name=color] .color-item:has(input:focus-visible)::after{
  border-color: var(--nakomy-forest);
}
yc-variant[name=radio] .radio-item input[type=radio]:checked{
  border-color: var(--nakomy-forest);
  background-color: var(--nakomy-forest);
}
yc-variant[name=radio] .radio-item input[type=radio]:checked::after{
  background-color: var(--nakomy-surface);
}
yc-variant[name=image] .image-item:has(input:checked){
  border-color: var(--nakomy-forest);
  outline: 2px solid var(--nakomy-forest);
  outline-offset: 2px;
}


/* -----------------------------------------------------------------
   6. EXPRESS CHECKOUT (product page)
   Native element: snippet `yc-express-checkout.liquid`, rendered as
   `.single-product yc-product-info .buy-button .buy-area
   .express-checkout` on both the single-product and featured-product
   sections. Functionality/markup/JS are untouched — only framing,
   so the fast-purchase action is immediately obvious.
   ----------------------------------------------------------------- */
.single-product yc-product-info .buy-button .buy-area .express-checkout{
  border: 2px solid var(--nakomy-forest);
  background-color: var(--nakomy-forest-light);
}
.single-product yc-product-info .buy-button .buy-area .express-checkout .header{
  color: var(--nakomy-forest-dark);
  font-weight: 600;
  border-block-end-color: color-mix(in srgb, var(--nakomy-forest) 15%, transparent);
}
.single-product yc-product-info .buy-button .buy-area .express-checkout .fields{
  background-color: var(--nakomy-surface);
  border-block-start-color: color-mix(in srgb, var(--nakomy-forest) 15%, transparent);
}
.single-product yc-product-info .buy-button .buy-area .express-checkout .fields::before{
  background-color: var(--nakomy-sand-light);
  color: var(--nakomy-forest-dark);
}
.single-product yc-product-info .buy-button .buy-area .place-order button.primary{
  font-weight: 600;
}
@media (max-width: 768px){
  /* Mobile keeps Origins' native edge-to-edge sticky pattern; only
     the header text gets the brand accent since the card border is
     intentionally removed by Origins in this compact mobile mode. */
  .single-product:not([data-prevent-sticky]) yc-product-info .buy-button .buy-area .express-checkout .header{
    color: var(--nakomy-forest-dark);
    font-weight: 600;
  }
}


/* -----------------------------------------------------------------
   7. PRODUCT PAGE — light touches only (no structural redesign)
   ----------------------------------------------------------------- */
.single-product yc-product-info .accordion{
  border-color: var(--nakomy-border);
}
.single-product yc-product-info .accordion summary:hover .title{
  color: var(--nakomy-forest);
}
.single-product yc-product-info .inventory[data-inventory=in-stock] .icon{
  color: var(--nakomy-success);
}


/* -----------------------------------------------------------------
   8. FOOTER — link/icon hover accents only (structure untouched)
   ----------------------------------------------------------------- */
footer .content .links-box .navigation .links a:hover{
  color: var(--nakomy-sand-light);
}
footer .social-links a.yc-btn:hover{
  border-color: var(--nakomy-sand);
  color: var(--nakomy-sand-light);
}


/* =================================================================
   NAKOMY — CONTROLLED FINAL POLISH
   -----------------------------------------------------------------
   This layer intentionally changes ONLY:
     1. base visual color application
     2. native button presentation
     3. header physical icon positions
     4. native product-page Express Checkout presentation

   Existing components, markup, Liquid, JavaScript, product/collection
   cards, slider, footer, cart, search behavior and Theme Editor schema
   are intentionally left untouched.
   ================================================================= */


/* -----------------------------------------------------------------
   A. NAKOMY BASE SURFACE / COLOR POLISH
   ----------------------------------------------------------------- */
html,
body{
  background-color: var(--nakomy-bg);
  color: var(--nakomy-text);
}

body{
  --color-secondary: var(--nakomy-bg);
}


/* -----------------------------------------------------------------
   B. NATIVE BUTTONS — visible premium default state
   ----------------------------------------------------------------- */
button.primary,
.yc-btn.primary{
  background-color: var(--nakomy-forest);
  border-color: var(--nakomy-forest);
  color: #FFFFFF;
  opacity: 1;
  box-shadow: 0 2px 0 rgba(22,48,43,.08);
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

button.primary:hover:not(:disabled),
.yc-btn.primary:hover:not(:disabled){
  background-color: var(--nakomy-forest-dark);
  border-color: var(--nakomy-forest-dark);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(22,48,43,.14);
  transform: translateY(-1px);
}

button.primary:active:not(:disabled),
.yc-btn.primary:active:not(:disabled){
  background-color: var(--nakomy-forest-dark);
  border-color: var(--nakomy-forest-dark);
  color: #FFFFFF;
  box-shadow: none;
  transform: translateY(0);
}

button.primary:disabled,
.yc-btn.primary:disabled{
  opacity: .55;
  box-shadow: none;
}

button.secondary,
.yc-btn.secondary{
  background-color: #FFFFFF;
  border-color: var(--nakomy-forest);
  color: var(--nakomy-forest);
  opacity: 1;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

button.secondary:hover:not(:disabled),
.yc-btn.secondary:hover:not(:disabled){
  background-color: var(--nakomy-forest);
  border-color: var(--nakomy-forest);
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(22,48,43,.10);
}


/* -----------------------------------------------------------------
   C. HEADER — PHYSICAL POSITIONS ONLY
   Physical target:
   RIGHT  = Menu
   CENTER = Logo
   LEFT   = Search + Cart

   Force the header grid itself into LTR physical coordinates so RTL
   document direction cannot mirror the requested physical positions.
   Inner controls retain their normal RTL text/icon direction.
   ----------------------------------------------------------------- */
#youcan-section--header yc-header[data-desktop-logo-position]{
  direction: ltr;
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-areas: "actions heading menu" !important;
}

#youcan-section--header yc-header[data-desktop-logo-position] .logo{
  direction: ltr;
  grid-area: heading !important;
  justify-self: center;
}

#youcan-section--header yc-header[data-desktop-logo-position] > .actions[data-block]{
  direction: rtl;
  grid-area: actions !important;
  justify-content: flex-start !important;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
}

#youcan-section--header yc-header[data-desktop-logo-position] > .links[data-block]{
  direction: rtl;
  grid-area: menu !important;
  justify-content: flex-end !important;
  justify-self: end;
  display: flex;
  align-items: center;
}

/* Keep the native hamburger as the only menu control. */
#youcan-section--header yc-header .links > ul{
  display: none !important;
}

#youcan-section--header yc-header .links yc-drawer#menu{
  display: inline-flex !important;
  flex: 0 0 auto;
}

#youcan-section--header yc-header .links .drawer-btn.icon{
  color: var(--nakomy-forest);
  border-color: rgba(31,58,52,.18);
  background: transparent;
}

#youcan-section--header yc-header .links .drawer-btn.icon:hover{
  color: var(--nakomy-forest-dark);
  border-color: rgba(31,58,52,.38);
  background-color: var(--nakomy-forest-light);
}

/* Search icon + cart are always available in the left control group,
   including mobile where Origins normally hides the search trigger. */
#youcan-section--header yc-header .actions .search-btn{
  display: inline-flex !important;
  color: var(--nakomy-forest);
}

#youcan-section--header yc-header .actions .cart-btn{
  display: inline-flex !important;
  color: var(--nakomy-forest);
}

#youcan-section--header yc-header .actions .search-btn:hover,
#youcan-section--header yc-header .actions .cart-btn:hover{
  color: var(--nakomy-forest-dark);
}

/* Do not alter the native search form behavior; only keep it compact
   until the native search action expands it. */
#youcan-section--header yc-header .actions .search-bar{
  direction: rtl;
}


/* -----------------------------------------------------------------
   D. PRODUCT-PAGE EXPRESS CHECKOUT — full visual treatment
   -----------------------------------------------------------------
   The native <yc-product-form checkout-type="express"> remains intact.
   No markup, submission logic, fields or checkout behavior is changed.
   ----------------------------------------------------------------- */
.single-product yc-product-info .buy-button .buy-area{
  border: 1px solid var(--nakomy-border);
  border-radius: calc(var(--button-border-radius) + 4px);
  background: #FFFFFF;
  box-shadow: 0 8px 28px rgba(32,32,32,.07);
  overflow: hidden;
}

.single-product yc-product-info .buy-button .buy-area .express-checkout{
  border: 0;
  border-radius: 0;
  background: #FFFFFF;
  overflow: hidden;
}

.single-product yc-product-info .buy-button .buy-area .express-checkout .header{
  background: var(--nakomy-forest);
  color: #FFFFFF;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
  padding: 18px 20px;
  border: 0;
  position: relative;
  text-align: start;
}

.single-product yc-product-info .buy-button .buy-area .express-checkout .header::after{
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-block-start: 9px;
  background: var(--nakomy-sand);
  border-radius: 999px;
}

.single-product yc-product-info .buy-button .buy-area .express-checkout .fields{
  background: #FFFFFF;
  border-block-start: 1px solid var(--nakomy-border);
  padding: 48px 20px 20px;
  gap: 16px;
}

.single-product yc-product-info .buy-button .buy-area .express-checkout .fields::before{
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  padding: 9px 14px;
  border-end-end-radius: 10px;
  border-end-start-radius: 0;
  background: var(--nakomy-sand-light);
  color: var(--nakomy-forest-dark);
  font-size: var(--text-sm);
  font-weight: 600;
}

.single-product yc-product-info .buy-button .buy-area .express-checkout .fields .field{
  gap: 6px;
}

.single-product yc-product-info .buy-button .buy-area .express-checkout .fields .field label{
  color: var(--nakomy-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.single-product yc-product-info .buy-button .buy-area .express-checkout .fields .field input,
.single-product yc-product-info .buy-button .buy-area .express-checkout .fields .field textarea,
.single-product yc-product-info .buy-button .buy-area .express-checkout .fields .field yc-combobox-trigger{
  background: #FFFFFF;
  border: 1px solid var(--nakomy-border-strong);
  border-radius: 8px;
  color: var(--nakomy-text);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.single-product yc-product-info .buy-button .buy-area .express-checkout .fields .field input:focus,
.single-product yc-product-info .buy-button .buy-area .express-checkout .fields .field textarea:focus,
.single-product yc-product-info .buy-button .buy-area .express-checkout .fields .field yc-combobox-trigger:focus{
  border-color: var(--nakomy-forest);
  box-shadow: 0 0 0 3px rgba(31,58,52,.10);
  outline: none;
}

.single-product yc-product-info .buy-button .buy-area .place-order{
  padding: 16px 20px 20px;
  background: #FFFFFF;
  border-block-start: 1px solid var(--nakomy-border);
  gap: 10px;
}

.single-product yc-product-info .buy-button .buy-area .place-order button.primary{
  min-height: 50px;
  border-radius: 9px;
  font-size: var(--text-md);
  font-weight: 700;
  background: var(--nakomy-forest);
  border-color: var(--nakomy-forest);
  color: #FFFFFF;
  box-shadow: 0 5px 14px rgba(31,58,52,.16);
}

.single-product yc-product-info .buy-button .buy-area .place-order button.primary:hover:not(:disabled){
  background: var(--nakomy-forest-dark);
  border-color: var(--nakomy-forest-dark);
  box-shadow: 0 7px 18px rgba(22,48,43,.20);
}


/* Mobile: preserve YouCan's native sticky purchase behavior while
   turning the visible form into a clean, cohesive NAKOMY panel. */
@media (max-width: 768px){
  #youcan-section--header yc-header[data-desktop-logo-position]{
    direction: ltr;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-areas: "actions heading menu" !important;
  }

  #youcan-section--header yc-header[data-desktop-logo-position] > .actions[data-block]{
    justify-self: start;
  }

  #youcan-section--header yc-header[data-desktop-logo-position] > .links[data-block]{
    justify-self: end;
  }

  .single-product yc-product-info .buy-button .buy-area{
    border: 1px solid var(--nakomy-border);
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 10px 30px rgba(32,32,32,.10);
  }

  .single-product yc-product-info .buy-button .buy-area .express-checkout{
    border: 0 !important;
    border-radius: 0 !important;
    background: #FFFFFF;
  }

  .single-product yc-product-info .buy-button .buy-area .express-checkout .header{
    background: var(--nakomy-forest);
    color: #FFFFFF !important;
    text-align: start !important;
    padding: 16px 18px;
    font-size: var(--text-md);
  }

  .single-product yc-product-info .buy-button .buy-area .express-checkout .fields{
    padding: 46px 16px 18px !important;
    gap: 14px;
    background: #FFFFFF;
  }

  .single-product yc-product-info .buy-button .buy-area .express-checkout .fields::before{
    padding: 8px 12px;
    background: var(--nakomy-sand-light);
    color: var(--nakomy-forest-dark);
  }

  .single-product yc-product-info .buy-button .buy-area .place-order{
    padding: 12px 16px 16px !important;
    background: #FFFFFF;
    border-block-start: 1px solid var(--nakomy-border);
  }

  .single-product yc-product-info .buy-button .buy-area .place-order button.primary{
    min-height: 50px;
  }
}

/* =================================================================
   NAKOMY — HOMEPAGE PRODUCT CTA + COLLECTION LABEL POLISH
   -----------------------------------------------------------------
   Scope: product-card purchase buttons and collection-name labels only.
   No text, markup, images, sizing, product logic or collection logic
   is changed. The sand accent is decorative CSS only.
   ================================================================= */

/* Product purchase buttons — strong default state for desktop + mobile */
.product-card .info .yc-btn.secondary,
.product-card .info button.secondary{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: 100%;
  padding-block: 0.72em;
  padding-inline: 1.15em 3.65em;
  border: 1px solid var(--nakomy-forest);
  border-radius: 10px;
  background: var(--nakomy-forest);
  color: #FFFFFF;
  box-shadow: 0 5px 14px rgba(31,58,52,.14);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* Warm Sand end-cap + subtle chevron — decorative only */
.product-card .info .yc-btn.secondary::after,
.product-card .info button.secondary::after{
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 42px;
  background: var(--nakomy-sand);
  border-radius: 0 9px 9px 0;
  z-index: -1;
}

.product-card .info .yc-btn.secondary::before,
.product-card .info button.secondary::before{
  content: "";
  position: absolute;
  inset-inline-end: 16px;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid var(--nakomy-forest-dark);
  border-block-start: 2px solid var(--nakomy-forest-dark);
  transform: rotate(45deg);
  z-index: 1;
  pointer-events: none;
}

.product-card .info .yc-btn.secondary:hover:not(:disabled),
.product-card .info button.secondary:hover:not(:disabled){
  background: var(--nakomy-forest-dark);
  border-color: var(--nakomy-forest-dark);
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(22,48,43,.18);
  transform: translateY(-1px);
}

.product-card .info .yc-btn.secondary:active:not(:disabled),
.product-card .info button.secondary:active:not(:disabled){
  background: var(--nakomy-forest-dark);
  border-color: var(--nakomy-forest-dark);
  color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(22,48,43,.12);
  transform: translateY(0);
}

.product-card .info .yc-btn.secondary:disabled,
.product-card .info button.secondary:disabled{
  opacity: .55;
  box-shadow: none;
}

/* Collection name — Warm Sand label with charcoal text */
.collection-card .info .name{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .55em 1.1em;
  border-radius: 10px;
  background: var(--nakomy-sand);
  color: var(--nakomy-text);
  box-shadow: 0 3px 10px rgba(32,32,32,.07);
  font-weight: 600;
}

.collection-card .info{
  background: transparent;
}

.collection-card:hover .info .name{
  background: var(--nakomy-sand);
  color: var(--nakomy-text);
  box-shadow: 0 5px 14px rgba(32,32,32,.10);
}

@media (max-width: 768px){
  .product-card .info .yc-btn.secondary,
  .product-card .info button.secondary{
    min-height: 50px;
    padding-inline-end: 3.55em;
    border-radius: 10px;
  }

  .product-card .info .yc-btn.secondary::after,
  .product-card .info button.secondary::after{
    width: 40px;
    border-radius: 0 9px 9px 0;
  }
}


/* =================================================================
   NAKOMY — FINAL RESPONSIVE / FOOTER POLISH
   -----------------------------------------------------------------
   Only the pieces that cannot be achieved cleanly from the native
   Theme Editor are handled here. Header structure, slider content,
   native buttons and native controls remain untouched.
   ================================================================= */

/* ---------------------------------------------------------------
   MULTI-COLUMN SERVICES
   Desktop stays at the merchant-selected 4 columns.
   Mobile becomes 2 × 2 instead of Origins' default single column.
   --------------------------------------------------------------- */
@media (max-width: 768px){
  .columns{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 16px;
    align-items:start;
  }

  .column-card{
    gap: 10px;
  }

  .column-card .column-info{
    gap: 4px;
  }

  .column-card .column-info .column-title{
    font-size: var(--text-md);
    line-height: 1.45;
  }

  .column-card .column-info .column-subtitle{
    font-size: var(--text-sm);
    line-height: 1.5;
  }
}

/* ---------------------------------------------------------------
   PRODUCT GRID — MOBILE ONLY
   Keep the merchant's desktop column setting intact; on phones
   force the agreed 2-column layout. Product images are contained,
   never cropped.
   --------------------------------------------------------------- */
@media (max-width: 768px){
  .products .items-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  .products .product-card[data-style$=standard]{
    --product-img-height: 190px;
  }

  .products .product-card .img-link,
  .products .product-card .img-link img{
    height: var(--product-img-height);
  }

  .products .product-card .img-link img{
    object-fit: contain;
    background-color: #FFFFFF;
    padding: 8px;
  }

  .products .product-card .info{
    padding: 0.8em;
    gap: 5px;
  }

  .products .product-card .info .title{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    line-height:1.45;
  }

  .products .product-card .info .price{
    gap: 6px;
    flex-wrap:wrap;
  }

  .products .product-card .info .price .current{
    font-size: var(--text-md);
  }

  .products .product-card .info button.secondary,
  .products .product-card .info .yc-btn.secondary{
    min-height:42px;
    padding-inline:8px;
    white-space:nowrap;
    font-size:var(--text-sm);
  }
}

/* ---------------------------------------------------------------
   NAKOMY FOOTER
   The footer markup now has one centered brand block, three social
   destinations (Instagram/Facebook/WhatsApp when configured), the
   four essential policy/shipping links, and the copyright bar.
   --------------------------------------------------------------- */
.nakomy-footer{
  color: rgb(var(--footer-text-color));
  background-color: var(--footer-bg-color);
  border-block-start: 1px solid rgba(var(--footer-text-color), 10%);
}

.nakomy-footer .nakomy-footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:42px 24px 34px;
  gap:22px;
}

.nakomy-footer .nakomy-footer-brand{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.nakomy-footer .nakomy-footer-brand a{
  display:inline-flex;
  color:inherit;
}

.nakomy-footer .nakomy-footer-brand img{
  width:var(--footer-logo-width);
  height:auto;
  object-fit:contain;
}

.nakomy-footer .nakomy-social-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.nakomy-footer .nakomy-social{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#FFFFFF;
  border:0;
  box-shadow:0 2px 8px rgba(32,32,32,.12);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.nakomy-footer .nakomy-social:hover{
  color:#FFFFFF;
  transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(32,32,32,.16);
  filter:brightness(.96);
}

.nakomy-footer .nakomy-social svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.nakomy-footer .nakomy-social--instagram{
  background:linear-gradient(135deg,#f9ce34 0%,#ee2a7b 48%,#6228d7 100%);
}

.nakomy-footer .nakomy-social--facebook{
  background:#1877F2;
}

.nakomy-footer .nakomy-social--whatsapp{
  background:#25D366;
}

.nakomy-footer .nakomy-social--tiktok{
  background:#111111;
}

.nakomy-footer .nakomy-footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  width:100%;
  max-width:900px;
  margin:0;
  padding:4px 0;
}

.nakomy-footer .nakomy-footer-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 18px;
  color:rgb(var(--footer-text-color));
  font-size:var(--text-sm);
  text-decoration:none;
}

.nakomy-footer .nakomy-footer-links a + a::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:50%;
  width:1px;
  height:16px;
  transform:translateY(-50%);
  background-color:rgba(var(--footer-text-color),22%);
}

.nakomy-footer .nakomy-footer-links a:hover{
  color:rgb(var(--footer-text-color));
  opacity:.72;
}

.nakomy-footer .copyright{
  border-block-start:1px solid rgba(var(--footer-text-color),10%);
  padding:18px 24px;
  color:rgb(var(--footer-text-color));
  font-size:var(--text-sm);
  text-align:center;
}

@media (max-width: 600px){
  .nakomy-footer .nakomy-footer-inner{
    padding:34px 18px 28px;
    gap:18px;
  }

  .nakomy-footer .nakomy-footer-links{
    flex-direction:column;
    gap:2px;
  }

  .nakomy-footer .nakomy-footer-links a{
    padding:6px 8px;
  }

  .nakomy-footer .nakomy-footer-links a + a::before{
    display:none;
  }
}


/* =================================================================
   NAKOMY — FINAL PRODUCT / COLLECTION / FOOTER VISUAL PASS
   -----------------------------------------------------------------
   This is the final visual layer requested from the approved mockup.
   Native product, cart, checkout and collection logic is untouched.
   ================================================================= */

/* PRODUCT CARDS — clean, borderless, square photography */
.product-card[data-style$="standard"]{
  --product-img-height: auto;
  border: 0;
  border-radius: 16px;
  background: var(--nakomy-surface);
  box-shadow: 0 3px 14px rgba(32,32,32,.06);
  overflow: hidden;
}

.product-card[data-style$="standard"] .img-link{
  display:block;
  height:auto;
  aspect-ratio:1 / 1;
  border:0;
  overflow:hidden;
  background:var(--nakomy-surface);
}

.product-card[data-style$="standard"] .img-link img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  padding:0;
  border-radius:14px;
  background:var(--nakomy-surface);
}

.product-card[data-style$="standard"] .info{
  position:static;
  border:0;
  border-radius:0;
  background:var(--nakomy-surface);
  color:var(--nakomy-text);
  padding:14px 12px 12px;
  display:grid;
  /* Reserve the rating row even when a product has no published ratings,
     keeping every product-card purchase button aligned. */
  grid-template-rows:auto auto 20px auto;
  gap:7px;
}

.product-card[data-style$="standard"] .nakomy-rating-slot{
  min-height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-card[data-style$="standard"] .nakomy-rating-slot:empty::before{
  content:"";
  display:block;
  width:1px;
  height:1px;
}

.product-card[data-style$="standard"] .nakomy-rating-slot .rating{
  margin:0;
}

.product-card[data-style$="standard"] .info .title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:calc(2 * 1.45em);
  max-height:calc(2 * 1.45em);
  color:var(--nakomy-text);
  font-size:1.5rem;
  font-weight:500;
  line-height:1.45;
  text-align:center;
}

.product-card[data-style$="standard"] .info .price{
  justify-self:center;
  align-items:baseline;
  justify-content:center;
  flex-wrap:nowrap;
  gap:8px;
  min-height:32px;
  line-height:1.2;
  white-space:nowrap;
}

.product-card[data-style$="standard"] .info .price .current{
  color:var(--nakomy-forest);
  font-size:2.2rem;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-.01em;
}

.product-card[data-style$="standard"] .info .price .compare-at{
  color:var(--nakomy-muted);
  font-size:1.35rem;
  line-height:1.2;
  font-weight:400;
}

.product-card[data-style$="standard"] .info .rating{
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:var(--nakomy-muted);
  font-size:1.2rem;
  line-height:1;
}

.product-card[data-style$="standard"] .info .rating .stars{
  display:inline-flex;
  gap:2px;
  color:#D8A62E;
}

.product-card[data-style$="standard"] .info .rating .stars svg{
  width:14px;
  height:14px;
}

.product-card[data-style$="standard"] .info .rating .average{
  color:var(--nakomy-muted);
}

.product-card[data-style$="standard"] .info .yc-btn.secondary,
.product-card[data-style$="standard"] .info button.secondary{
  min-height:46px;
  margin-top:3px;
  padding:0 14px;
  border:0;
  border-radius:10px;
  background:var(--nakomy-forest);
  color:#fff;
  box-shadow:none;
  font-size:1.45rem;
  font-weight:600;
  gap:8px;
}

.product-card[data-style$="standard"] .info .yc-btn.secondary svg,
.product-card[data-style$="standard"] .info button.secondary svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
  stroke:currentColor;
}

/* The CTA is intentionally simple: no large sand end-cap. */
.product-card[data-style$="standard"] .info .yc-btn.secondary::before,
.product-card[data-style$="standard"] .info button.secondary::before,
.product-card[data-style$="standard"] .info .yc-btn.secondary::after,
.product-card[data-style$="standard"] .info button.secondary::after{
  display:none;
}

.product-card[data-style$="standard"] .info .yc-btn.secondary:hover:not(:disabled),
.product-card[data-style$="standard"] .info button.secondary:hover:not(:disabled){
  background:var(--nakomy-forest-dark);
  border-color:var(--nakomy-forest-dark);
  box-shadow:0 4px 12px rgba(31,58,52,.12);
  transform:none;
}

.product-card[data-style$="standard"]:hover{
  border:0;
  box-shadow:0 6px 18px rgba(32,32,32,.08);
  transform:translateY(-1px);
}

/* COLLECTION CARDS — full-width sand label + arrow */
.collection-card{
  border:0;
  border-radius:16px;
  overflow:hidden;
  background:transparent;
  box-shadow:none;
}

.collection-card .cover,
.collection-card .cover img,
.collection-card .cover .card-placeholder{
  border-radius:14px;
}

.collection-card .info{
  inset-block-end:10px;
  inset-inline:10px;
  width:auto;
  margin:0;
  display:block;
  position:absolute;
}

.collection-card .info .name{
  width:100%;
  min-height:52px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 12px 8px 16px;
  border-radius:10px;
  background:var(--nakomy-sand);
  color:var(--nakomy-text);
  box-shadow:0 4px 12px rgba(32,32,32,.08);
  font-size:1.75rem;
  line-height:1.2;
  font-weight:700;
  text-align:start;
}

/* In RTL, the pseudo element naturally sits at the visual left. */
.collection-card .info .name::after{
  content:'←';
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--nakomy-sand-dark);
  color:var(--nakomy-forest-dark);
  font-size:1.9rem;
  font-weight:500;
  line-height:1;
}

.collection-card:hover{
  border:0;
  transform:translateY(-1px);
}

.collection-card:hover .info .name{
  background:var(--nakomy-sand);
  color:var(--nakomy-text);
}

/* FOOTER — dark forest, gold logo, calm hierarchy */
.nakomy-footer{
  --footer-bg-color:var(--nakomy-forest) !important;
  --footer-text-color:247,247,244 !important;
  color:#F7F7F4;
  background:var(--nakomy-forest) !important;
  border:0;
}

.nakomy-footer .nakomy-footer-inner{
  position:relative;
  padding:48px 24px 32px;
  gap:20px;
}

.nakomy-footer .nakomy-footer-brand img{
  width:min(170px,var(--footer-logo-width));
  height:auto;
  filter:brightness(0) saturate(100%) invert(77%) sepia(15%) saturate(610%) hue-rotate(357deg) brightness(95%) contrast(91%);
}

.nakomy-footer .nakomy-footer-tagline{
  margin:10px 0 0;
  color:rgba(247,247,244,.88);
  font-size:1.45rem;
  line-height:1.6;
  font-weight:400;
}

.nakomy-footer .nakomy-social-links{
  margin-top:2px;
  gap:14px;
}

.nakomy-footer .nakomy-social{
  width:42px;
  height:42px;
  box-shadow:none;
}

.nakomy-footer .nakomy-footer-links{
  width:min(720px,100%);
  margin-top:6px;
  padding:18px 0;
  border-block:1px solid rgba(247,247,244,.22);
  display:flex;
  flex-direction:column;
  gap:0;
}

.nakomy-footer .nakomy-footer-links a{
  width:100%;
  box-sizing:border-box;
  justify-content:space-between;
  padding:12px 4px;
  color:#F7F7F4;
  font-size:1.5rem;
  text-decoration:none;
}

.nakomy-footer .nakomy-footer-links a::after{
  content:'←';
  color:var(--nakomy-sand);
  font-size:1.7rem;
}

.nakomy-footer .nakomy-footer-links a + a::before{
  display:none;
}

.nakomy-footer .copyright{
  border:0;
  padding:4px 24px 26px;
  color:rgba(247,247,244,.88);
  font-size:1.3rem;
  line-height:1.7;
}

@media (max-width:768px){
  .product-card[data-style$="standard"] .info{
    padding:12px 9px 10px;
    gap:6px;
    grid-template-rows:auto auto 20px auto;
  }
  .product-card[data-style$="standard"] .nakomy-rating-slot{ min-height:20px; }
  .product-card[data-style$="standard"] .info .title{
    font-size:1.4rem;
    line-height:1.45;
    min-height:calc(2 * 1.45em);
    max-height:calc(2 * 1.45em);
  }
  .product-card[data-style$="standard"] .info .price .current{
    font-size:2rem;
  }
  .product-card[data-style$="standard"] .info .price .compare-at{
    font-size:1.25rem;
  }
  .product-card[data-style$="standard"] .info .yc-btn.secondary,
  .product-card[data-style$="standard"] .info button.secondary{
    min-height:44px;
    font-size:1.35rem;
    border-radius:9px;
  }
  .collection-card .info{
    inset-block-end:8px;
    inset-inline:8px;
  }
  .collection-card .info .name{
    min-height:48px;
    font-size:1.6rem;
    padding-inline:12px 10px;
  }
  .collection-card .info .name::after{
    flex-basis:34px;
    width:34px;
    height:34px;
    font-size:1.7rem;
  }
  .nakomy-footer .nakomy-footer-inner{
    padding:38px 18px 28px;
  }
  .nakomy-footer .nakomy-footer-brand img{
    width:min(165px,var(--footer-logo-width));
  }
}


/* =================================================================
   NAKOMY — FINAL MOBILE PRODUCT IMAGE
   Keep product-card styling unchanged; only the single-product
   main image becomes a clean 1:1 square on phones.
   ================================================================= */
@media (max-width: 768px){
  .single-product yc-product-media .main-image{
    height:auto;
    aspect-ratio:1 / 1;
  }

  .single-product yc-product-media .main-image img,
  .single-product yc-product-media .main-image .placeholder{
    width:100%;
    height:100%;
  }

  .single-product yc-product-media .main-image img{
    object-fit:cover;
  }
}


/* =================================================================
   NAKOMY — PRODUCT PAGE SMART STICKY ORDER CTA
   ================================================================= */
.nakomy-sticky-order[hidden]{ display:none !important; }
.nakomy-sticky-order{
  position:fixed;
  right:24px;
  left:auto;
  bottom:24px;
  z-index:9990;
  min-width:170px;
  min-height:50px;
  padding:0 24px;
  border:1px solid var(--nakomy-forest);
  border-radius:10px;
  background:var(--nakomy-forest);
  color:#fff;
  font:inherit;
  font-size:16px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(31,58,52,.18);
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.nakomy-sticky-order:hover{ background:var(--nakomy-forest-dark); border-color:var(--nakomy-forest-dark); transform:translateY(-2px); box-shadow:0 10px 26px rgba(22,48,43,.22); }
.nakomy-sticky-order:active{ transform:translateY(0); }
.single-product .buy-button .buy-area{ scroll-margin-top:90px; }
@media (max-width:768px){
  .nakomy-sticky-order{
    left:50%; right:auto; transform:translateX(-50%);
    width:85%; max-width:340px; min-width:0; min-height:48px;
    bottom:14px; padding:0 16px; border-radius:10px;
    font-size:15px; box-shadow:0 8px 24px rgba(31,58,52,.22);
  }
  .nakomy-sticky-order:hover{ transform:translateX(-50%); }
  .nakomy-sticky-order:active{ transform:translateX(-50%); }
  .single-product .buy-button .buy-area{ scroll-margin-top:76px; }
}
@media (prefers-reduced-motion: reduce){ .nakomy-sticky-order{ transition:none; } }

/* =================================================================
   NAKOMY — WHATSAPP + SHARE ACTIONS
   ================================================================= */
.nakomy-whatsapp-float{
  position:fixed; right:24px; left:auto; bottom:24px; z-index:9988;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 15px; border-radius:999px;
  background:#25D366; color:#fff; text-decoration:none; font:inherit;
  font-size:14px; font-weight:700; line-height:1; white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  transition:transform .18s ease, box-shadow .18s ease;
}
.nakomy-whatsapp-float svg{ width:22px; height:22px; flex:0 0 22px; fill:currentColor; }
.nakomy-whatsapp-float:hover{ color:#fff; text-decoration:none; transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.2); }
.template-product .nakomy-whatsapp-float{ bottom:82px; }
.nakomy-share-button{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:0 18px; border:1px solid var(--nakomy-forest);
  border-radius:10px; background:var(--nakomy-forest); color:#fff;
  font:inherit; font-size:14px; font-weight:700; line-height:1; cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.nakomy-share-button svg{ width:18px; height:18px; flex:0 0 18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nakomy-share-button:hover{ background:var(--nakomy-forest-dark); border-color:var(--nakomy-forest-dark); transform:translateY(-1px); box-shadow:0 7px 18px rgba(31,58,52,.16); }
.nakomy-share-button:focus-visible, .nakomy-whatsapp-float:focus-visible{ outline:2px solid var(--nakomy-sand); outline-offset:3px; }
/* Store sharing is a floating action on the homepage only, above WhatsApp. */
.nakomy-share-button--store{ position:fixed; right:24px; left:auto; bottom:82px; z-index:9989; min-height:42px; padding:0 14px; border-radius:999px; box-shadow:0 8px 22px rgba(0,0,0,.13); }
/* Product sharing is moved by JS immediately after the native Express Checkout. */
.nakomy-share-button--product{ display:flex; width:max-content; max-width:100%; margin:14px 0 18px; }
.nakomy-share-status{
  position:fixed; left:50%; right:auto; bottom:24px; z-index:10000;
  transform:translateX(-50%); padding:10px 15px; border-radius:9px;
  background:var(--nakomy-forest); color:#fff; font-size:13px; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.16); white-space:nowrap;
}
/* Product page stars: larger, clearer, and no numeric score beside them. */
.single-product .rating{ margin-block:8px 12px; }
.single-product .rating .stars{ gap:4px; color:#D8A62E; }
.single-product .rating .stars svg{ width:19px; height:19px; }
.rating .average{ display:none !important; }
@media (max-width:768px){
  .nakomy-whatsapp-float{ right:16px; left:auto; bottom:14px; width:50px; min-width:50px; height:50px; min-height:50px; padding:0; border-radius:50%; }
  .nakomy-whatsapp-float span{ display:none; }
  .template-product .nakomy-whatsapp-float{ bottom:78px; }
  .nakomy-share-button--store{
    right:16px; left:auto; bottom:76px;
    width:50px; min-width:50px; height:50px; min-height:50px;
    padding:0; border-radius:50%; gap:0; font-size:0;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .nakomy-share-button--store svg{ width:20px; height:20px; flex:0 0 20px; }
  .nakomy-share-button--store span{ display:none; }
  .nakomy-share-button--product{ width:max-content; max-width:100%; margin:14px 0 18px; }
  .single-product .rating .stars{ gap:4px; }
  .single-product .rating .stars svg{ width:20px; height:20px; }
  .nakomy-share-status{ bottom:74px; }
}
@media (prefers-reduced-motion: reduce){ .nakomy-whatsapp-float, .nakomy-share-button{ transition:none; } }