/* ==========================================================================
   Crafterina — additions on top of the original Elementor stylesheets.
   The mirrored pages ship the site's own CSS, so this file only has to:
     1. self-host Montserrat (the WordPress site loaded it cross-origin from a
        Bluehost staging hostname, where it was CORS-blocked and never applied)
     2. style the commerce components that replaced WooCommerce
     3. supply the entrance-animation keyframes Elementor's JS used to trigger
   ========================================================================== */

/* ---------- 1. self-hosted Montserrat ---------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/montserrat-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/montserrat-cyrillic-italic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/montserrat-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens, matching elementor-kit-12 ---------- */
:root {
  --cf-pink:       #FFAFCC;
  --cf-pink-light: #FFC8DD;
  --cf-pink-wash:  #FFF5F8;
  --cf-lavender:   #CDB4DB;
  --cf-dark:       #383838;
  --cf-text:       #7F7F7F;
  --cf-border:     #DADADA;
  --cf-off:        #F9F9F9;
  --cf-sale:       #F03D3F;
  --cf-radius:     10px;
  --cf-shadow:     0 8px 30px rgba(56, 56, 56, .09);
  --cf-ease:       cubic-bezier(.2, .7, .3, 1);
}

/* ---------- 3. entrance animations ---------- */
@keyframes cfFadeInUp {
  from { opacity: 0; transform: translate3d(0, 40px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes cfFadeInRight {
  from { opacity: 0; transform: translate3d(40px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
.animated { animation-duration: .9s; animation-fill-mode: both; }
.animated.fadeInUp { animation-name: cfFadeInUp; }
.animated.fadeInRight { animation-name: cfFadeInRight; }


/* ---------- keyboard focus ----------
   The mirrored theme CSS resets outlines to none, which leaves keyboard users
   with no indication of where they are. Restore a visible ring on everything
   focusable, without showing it for mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible,
.exad-accordion-title:focus-visible {
  outline: 3px solid var(--cf-dark) !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}
.crafterina-swatch:focus-visible,
.crafterina-btn:focus-visible {
  outline: 3px solid var(--cf-dark) !important;
  outline-offset: 3px !important;
}


/* ---------- "За нас" call to action ----------
   The template kit shipped this button absolutely positioned and rotated 90°,
   with `margin-left:-100px` and `top:200px` tuned for that placement. The build
   drops the rotation and the absolute positioning (see fixTemplateButtons), so
   those offsets have to go too — otherwise the button hangs off the left edge
   of the viewport. */
.crafterina-about-cta {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  margin: 8px auto 0 0 !important;   /* the column is a flex container, so the
                                        alignment has to come from the box, not
                                        from text-align */
  align-self: flex-start !important;
  text-align: left;
}
.crafterina-about-cta .elementor-button {
  display: inline-flex;
  align-items: center;
}


/* ==========================================================================
   Single product page
   The ShopEngine template put the stock badge above the title and the price
   *below* the add-to-cart form, so a customer chose options and pressed buy
   before ever seeing a price. This is a purpose-built layout instead.
   ========================================================================== */

.cf-product { padding: 34px 20px 10px; background: #fff; }
.cf-product__inner { max-width: 1340px; margin-inline: auto; }

.cf-crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13px; color: var(--cf-text); margin-bottom: 26px;
}
.cf-crumbs a { color: var(--cf-text); text-decoration: none; }
.cf-crumbs a:hover { color: var(--cf-dark); text-decoration: underline; }
.cf-crumbs span[aria-hidden] { opacity: .4; }
.cf-crumbs [aria-current] { color: var(--cf-dark); font-weight: 600; }

.cf-product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ---------- media ---------- */
/* This is a <button>, so the kit gave it 16px/35px of padding and a pink
   background — the product photo rendered inside a thick pink frame. */
button.cf-media__main {
  display: block; width: 100%; padding: 0; border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius); overflow: hidden; background: var(--cf-off);
  cursor: zoom-in; aspect-ratio: 1;
}
.cf-media__main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--cf-ease); }
.cf-media__main:hover img { transform: scale(1.03); }

.cf-media__thumbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px; margin-top: 12px;
}
.cf-media__thumbs button {
  padding: 0; border: 2px solid transparent; border-radius: 8px;
  overflow: hidden; background: var(--cf-off); cursor: pointer; aspect-ratio: 1;
}
.cf-media__thumbs button[aria-selected="true"] { border-color: var(--cf-pink); }
.cf-media__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- info column ---------- */
.cf-eyebrow { margin: 0 0 8px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.cf-eyebrow a { color: var(--cf-pink); text-decoration: none; font-weight: 600; }
.cf-eyebrow a:hover { color: var(--cf-dark); }

.cf-title {
  margin: 0 0 14px; font-size: clamp(26px, 3vw, 38px); font-weight: 600;
  line-height: 1.2; color: var(--cf-dark); letter-spacing: -.01em;
}

.cf-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  font-size: 28px; font-weight: 600; color: var(--cf-dark); margin-bottom: 12px;
}
.cf-price del { font-size: 19px; font-weight: 400; color: var(--cf-text); text-decoration: line-through; }
.cf-price ins { text-decoration: none; color: var(--cf-sale); }
.cf-save {
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  background: var(--cf-sale); color: #fff; padding: 4px 9px; border-radius: 999px;
}

.cf-stock {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 20px; font-size: 13px; font-weight: 600; color: #2F7D5E;
}
.cf-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cf-stock[data-in="false"] { color: var(--cf-sale); }

.cf-short {
  color: var(--cf-text); font-size: 15px; line-height: 1.65;
  margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--cf-border);
}
.cf-short p { margin: 0 0 10px; }
.cf-short p:last-child { margin: 0; }

/* ---------- assurances ---------- */
.cf-assurances {
  list-style: none; margin: 28px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--cf-border); display: grid; gap: 12px;
}
.cf-assurances li { display: grid; grid-template-columns: 130px 1fr; gap: 14px; font-size: 13.5px; }
.cf-assurances strong { color: var(--cf-dark); font-weight: 600; }
.cf-assurances span { color: var(--cf-text); }

/* ---------- long description + specs ---------- */
.cf-details, .cf-specs { margin-top: 64px; max-width: 820px; }
.cf-details h2, .cf-specs h2 {
  font-size: 22px; font-weight: 600; color: var(--cf-dark);
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid var(--cf-pink);
  display: inline-block;
}
.cf-details__body { color: var(--cf-text); font-size: 15px; line-height: 1.7; }
.cf-details__body p { margin: 0 0 12px; }
.cf-details__body img { border-radius: var(--cf-radius); margin: 12px 0; }

.cf-specs dl { margin: 0; display: grid; gap: 0; }
.cf-specs dl > div {
  display: grid; grid-template-columns: 200px 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--cf-border); font-size: 14.5px;
}
.cf-specs dt { color: var(--cf-dark); font-weight: 600; margin: 0; }
.cf-specs dd { margin: 0; color: var(--cf-text); }

/* ---------- related ---------- */
.cf-related { padding: 70px 20px 90px; background: var(--cf-off); margin-top: 70px; }
.cf-related__inner { max-width: 1340px; margin-inline: auto; }
.cf-related h2 { font-size: 26px; font-weight: 600; color: var(--cf-dark); margin: 0 0 28px; }

/* the buy form sits inside this layout now */
.crafterina-product .crafterina-buy { margin-top: 4px; }
.crafterina-product .crafterina-swatches { gap: 8px; }
.crafterina-product .crafterina-swatch { padding: 10px 18px; font-size: 13.5px; }

@media (max-width: 1024px) {
  .cf-product__grid { grid-template-columns: 1fr; gap: 32px; }
  .cf-details, .cf-specs { margin-top: 44px; }
}
@media (max-width: 700px) {
  .cf-product { padding: 22px 16px 0; }
  .cf-related { padding: 44px 16px 60px; margin-top: 44px; }
  .cf-assurances li { grid-template-columns: 1fr; gap: 2px; }
  .cf-specs dl > div { grid-template-columns: 1fr; gap: 2px; }
  .cf-price { font-size: 24px; }
}


/* ---------- form controls on the product page ----------
   The mirrored theme styles inputs for a dark section (near-white border,
   transparent background), which makes them invisible against the white
   product page. Restate ours with enough specificity to win. */
.crafterina-product .crafterina-input,
.crafterina-simple .crafterina-input,
input.crafterina-input,
select.crafterina-input,
textarea.crafterina-input {
  border: 1px solid var(--cf-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--cf-dark) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 15px !important;
  width: 100%;
  box-shadow: none !important;
}
textarea.crafterina-input { min-height: 92px !important; resize: vertical; }
.crafterina-input:focus {
  border-color: var(--cf-pink) !important;
  outline: none;
}
.crafterina-input::placeholder { color: #A9A9A9 !important; }

/* ---------- related products grid ----------
   ShopEngine's own grid CSS is scoped to the archive widget's element id, so it
   does not reach the cards we render here. Give them the same 4-up layout. */
.cf-related ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cf-related li.archive-product-container { list-style: none; margin: 0; }
/* WooCommerce puts a clearfix ::before/::after on ul.products. In a grid
   container those become grid items and push the first card into column 2. */
.cf-related ul.products::before,
.cf-related ul.products::after { content: none !important; display: none !important; }
.cf-related .shopengine-archive-mode-grid { margin: 0; padding: 0; list-style: none; }
.cf-related .shopengine-archive-products__left-image { display: none; }
.cf-related .woocommerce-loop-product__title {
  font-size: 15px !important; line-height: 1.4; margin: 10px 0 6px;
  color: var(--cf-dark); font-weight: 600;
}
.cf-related .shopengine-cl-price, .cf-related .price { font-size: 15px; color: var(--cf-dark); font-weight: 600; }
.cf-related .shopengine-cl-excerpt { display: none; }
.cf-related .shopengine-product-thumb-wrap img { width: 100%; height: auto; display: block; border-radius: 8px; }

@media (max-width: 1024px) { .cf-related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cf-related ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

/* ---------- empty category ---------- */
.crafterina-empty-category {
  grid-column: 1 / -1;
  list-style: none;
  padding: 56px 24px;
  text-align: center;
  background: var(--cf-pink-wash);
  border-radius: var(--cf-radius);
  color: var(--cf-text);
}
.crafterina-empty-category strong { color: var(--cf-dark); }
.crafterina-empty-category p { margin: 0 0 14px; }
.crafterina-empty-category p:last-child { margin: 22px 0 0; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- lightbox ---------- */
.crafterina-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 5vh 5vw;
  background: rgba(24, 20, 22, .92);
}
.crafterina-lightbox__stage {
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;   /* for embedded video */
  max-height: 90vh;
}
/* A product photo is square or portrait; forcing it into a 16:9 box made the
   "zoom" view smaller than the thumbnail it opened from. */
.crafterina-lightbox__stage:has(> img) { aspect-ratio: auto; }
.crafterina-lightbox__stage > img {
  width: auto; height: auto;
  max-width: 100%; max-height: 90vh;
  object-fit: contain; margin-inline: auto;
}
.crafterina-lightbox__stage iframe,
.crafterina-lightbox__stage img {
  width: 100%; height: 100%; border: 0; border-radius: 8px;
  object-fit: contain; background: #000;
  display: block;
}
.crafterina-lightbox__close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .2s var(--cf-ease);
}
.crafterina-lightbox__close:hover { background: rgba(255, 255, 255, .28); }
@media (max-width: 700px) {
  .crafterina-lightbox { padding: 0; }
  .crafterina-lightbox__stage { border-radius: 0; }
}

/* ---------- nav / dropdown behaviour our JS drives ---------- */
.elementor-nav-menu .menu-item-has-children > .sub-menu {
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--cf-ease), transform .2s var(--cf-ease), visibility .2s;
}
.elementor-nav-menu .menu-item-has-children.is-open > .sub-menu {
  /* display too: Elementor's `.elementor-nav-menu ul { display: none }` otherwise
     kept the category list collapsed even while it was "open", which made every
     category unreachable from the burger menu. */
  display: block;
  opacity: 1; visibility: visible; transform: none;
}
/* Elementor's mobile dropdown also carries .sub-menu, so the desktop hover rule
   above (specificity 0,3,0) held it at opacity:0/visibility:hidden while this
   rule restored only `display` — the burger menu opened in the DOM and never
   became visible. Restore all four properties. */
.elementor-nav-menu--dropdown.is-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ---------- skip link ---------- */
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 9999;
  width: auto; height: auto; clip: auto;
  padding: 10px 16px; background: #fff; color: var(--cf-dark);
  border-radius: 6px; box-shadow: var(--cf-shadow);
}

/* ==========================================================================
   2. Commerce components
   ========================================================================== */

.crafterina-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--cf-pink); color: var(--cf-dark);
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background .22s var(--cf-ease), color .22s var(--cf-ease),
              transform .22s var(--cf-ease), box-shadow .22s var(--cf-ease);
}
.crafterina-btn:hover { background: var(--cf-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--cf-shadow); }

/* The mirrored theme colours every <a> pink, which turned the primary button
   into pink-on-pink — invisible. State the button's own colours for anchors. */
/* Same story for <button class="crafterina-btn"> (the coupon "Приложи" and the
   checkout submit): the kit painted them white-on-pink at 1.7:1. */
button.crafterina-btn {
  color: var(--cf-dark); padding: 14px 30px;
  letter-spacing: .4px; text-transform: uppercase; white-space: normal;
  border-radius: 999px;
}
button.crafterina-btn:hover, button.crafterina-btn:focus { color: #fff; }
button.crafterina-btn--lg { padding: 17px 38px; font-size: 16px; }
button.crafterina-btn--outline { background: transparent; border-color: var(--cf-dark); color: var(--cf-dark); }
/* The consent line links to the terms the customer is legally required to
   accept; the theme's pink on white measures 1.7:1, far under AA. */
.crafterina-terms a, .crafterina-terms a:link, .crafterina-terms a:visited {
  color: var(--cf-dark) !important; text-decoration: underline;
}
a.crafterina-btn, a.crafterina-btn:link, a.crafterina-btn:visited { color: var(--cf-dark) !important; }
a.crafterina-btn:hover, a.crafterina-btn:focus { color: #fff !important; }
a.crafterina-btn--outline, a.crafterina-btn--outline:link, a.crafterina-btn--outline:visited { color: var(--cf-dark) !important; }
a.crafterina-btn--outline:hover, a.crafterina-btn--outline:focus { color: #fff !important; }
.crafterina-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.crafterina-btn--outline { background: transparent; border-color: var(--cf-dark); color: var(--cf-dark); }
.crafterina-btn--outline:hover { background: var(--cf-dark); color: #fff; }
.crafterina-btn--block { width: 100%; }
.crafterina-btn--lg { padding: 17px 38px; font-size: 16px; }

.crafterina-h1 { font-size: clamp(28px, 4vw, 45px); font-weight: 600; color: var(--cf-dark); margin: 0 0 26px; }

.crafterina-simple { padding: 60px 20px 90px; background: #fff; }
.crafterina-simple__inner { max-width: 1340px; margin-inline: auto; }
.crafterina-narrow { max-width: 760px; }

.crafterina-panel {
  padding: 28px; background: #fff;
  border: 1px solid var(--cf-border); border-radius: var(--cf-radius);
}
.crafterina-panel + .crafterina-panel { margin-top: 20px; }
.crafterina-panel h2 { font-size: 20px; font-weight: 600; color: var(--cf-dark); margin: 0 0 18px; }

.crafterina-cols { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: start; }
.crafterina-summary { position: sticky; top: 24px; }
.crafterina-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.crafterina-field { margin-bottom: 18px; }
.crafterina-field > label,
.crafterina-label {
  display: block; margin-bottom: 7px;
  font-size: 14px; font-weight: 600; color: var(--cf-dark);
}
.crafterina-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--cf-text); }
.crafterina-req { color: var(--cf-sale); font-weight: 400; font-size: 12px; }

.crafterina-input {
  width: 100%; padding: 12px 15px;
  border: 1px solid var(--cf-border); border-radius: 8px;
  background: #fff; font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--cf-dark);
  transition: border-color .2s var(--cf-ease);
}
.crafterina-input:focus { outline: none; border-color: var(--cf-pink); }
.crafterina-input[aria-invalid="true"] { border-color: var(--cf-sale); }
textarea.crafterina-input { min-height: 92px; resize: vertical; }

.crafterina-fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.crafterina-fieldset legend { padding: 0; }

.crafterina-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
/* `.elementor-kit-12 button` (0,1,1) outranked the lone class here, so every
   swatch rendered pink-on-white-text at 1.7:1 AND the selected one was painted
   the same pink as the rest — there was no way to see which option was chosen.
   The element type on the selector puts our own values back in charge. */
button.crafterina-swatch {
  padding: 9px 17px; border: 1px solid var(--cf-border); border-radius: 999px;
  background: #fff; font-family: 'Montserrat', sans-serif; font-size: 14px;
  color: var(--cf-dark); font-weight: 400;
  text-transform: none; letter-spacing: normal;
  white-space: normal;              /* long Bulgarian labels must be able to wrap */
  min-height: 44px;
  cursor: pointer; transition: border-color .2s var(--cf-ease), background .2s var(--cf-ease);
}
button.crafterina-swatch:hover { border-color: var(--cf-pink); }
button.crafterina-swatch[aria-pressed="true"] {
  background: var(--cf-pink); border-color: var(--cf-dark); color: var(--cf-dark); font-weight: 600;
}
button.crafterina-swatch:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }

.crafterina-qty { display: inline-flex; align-items: center; border: 1px solid var(--cf-border); border-radius: 999px; overflow: hidden; }
.crafterina-qty button {
  width: 40px; height: 46px; border: 0; background: #fff;
  font-size: 18px; color: var(--cf-dark); cursor: pointer;
  /* the mirrored kit pads every bare <button> 16px/35px and uppercases it;
     ours opt out, or the control is 25px wider than it looks */
  padding: 0; border-radius: 0; text-transform: none; letter-spacing: normal;
}
.crafterina-qty button:hover { background: var(--cf-pink-wash); }
.crafterina-qty input {
  width: 50px; height: 46px; border: 0; text-align: center;
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600;
  -moz-appearance: textfield;
}
.crafterina-qty input::-webkit-outer-spin-button,
.crafterina-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.crafterina-buy { margin-top: 8px; }
.crafterina-buy-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 22px; }
.crafterina-specs { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 5px; font-size: 14px; color: var(--cf-text); }
.crafterina-specs strong { color: var(--cf-dark); }

.crafterina-upload {
  display: block; padding: 20px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--cf-border); border-radius: 8px;
  transition: border-color .2s var(--cf-ease), background .2s var(--cf-ease);
}
.crafterina-upload:hover, .crafterina-upload[data-drag="true"] { border-color: var(--cf-pink); background: var(--cf-pink-wash); }
.crafterina-upload input { display: none; }
.crafterina-upload-name { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--cf-dark); overflow-wrap: anywhere; }

.crafterina-msg { padding: 12px 15px; border-radius: 8px; font-size: 14px; margin: 14px 0 0; }
.crafterina-msg[data-kind="error"] { background: #FDEAE9; color: #A3312C; }
.crafterina-msg[data-kind="ok"] { background: #E7F5EE; color: #2C6B4F; }

/* product gallery */
.crafterina-gallery__main { border-radius: var(--cf-radius); overflow: hidden; background: var(--cf-off); }
.crafterina-gallery__main img { width: 100%; height: auto; display: block; }
.crafterina-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 10px; margin-top: 12px; }
.crafterina-gallery__thumbs button {
  padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: none; cursor: pointer; aspect-ratio: 1;
}
.crafterina-gallery__thumbs button[aria-selected="true"] { border-color: var(--cf-pink); }
.crafterina-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* shop tools */
.crafterina-shop-tools { margin: 0 0 26px; }
.crafterina-shop-tools__inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.crafterina-search {
  flex: 1 1 240px; min-width: 200px; padding: 12px 18px;
  border: 1px solid var(--cf-border); border-radius: 999px;
  font-family: 'Montserrat', sans-serif; font-size: 14px;
}
.crafterina-search:focus { outline: none; border-color: var(--cf-pink); }
.crafterina-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.crafterina-cats a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--cf-off); color: var(--cf-dark);
  font-size: 13px; text-decoration: none;
  transition: background .2s var(--cf-ease);
}
.crafterina-cats a:hover { background: var(--cf-pink-wash); }
.crafterina-cats a[aria-current="page"] { background: var(--cf-pink); font-weight: 600; }
.crafterina-cats span { opacity: .55; font-size: 11px; }
.crafterina-count { width: 100%; margin: 0; font-size: 13px; color: var(--cf-text); }
.crafterina-empty { text-align: center; padding: 50px 20px; color: var(--cf-text); }

.crafterina-related { padding: 40px 20px 80px; }
.crafterina-related__inner { max-width: 1340px; margin-inline: auto; }
.crafterina-related h2 { font-size: 28px; font-weight: 600; color: var(--cf-dark); margin: 0 0 24px; }

/* cart lines */
.crafterina-line {
  display: grid; grid-template-columns: 74px 1fr auto; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--cf-border);
}
.crafterina-line:last-child { border-bottom: 0; }
.crafterina-line img { width: 74px; height: 74px; border-radius: 8px; object-fit: cover; background: var(--cf-off); }
.crafterina-line > * { min-width: 0; }
.crafterina-line h3 { font-size: 14px; font-weight: 600; color: var(--cf-dark); margin: 0 0 4px; overflow-wrap: anywhere; }
.crafterina-line .variant { font-size: 12px; color: var(--cf-text); }
.crafterina-line .custom { font-size: 12px; color: var(--cf-text); margin-top: 5px; display: grid; gap: 2px; }
.crafterina-line .custom b { color: var(--cf-dark); }
.crafterina-line .custom span { overflow-wrap: anywhere; }
/* compact stepper inside a cart line (replaces a transform:scale hack that
   shrank it visually but not in layout) */
.crafterina-line .crafterina-qty { margin-top: 8px; }
.crafterina-line .crafterina-qty button { width: 32px; height: 34px; font-size: 16px; }
.crafterina-line .crafterina-qty input { width: 40px; height: 34px; }
.crafterina-line-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.crafterina-line-end strong { color: var(--cf-dark); white-space: nowrap; }
/* .elementor-kit-12 button (0,1,1) outranks a lone class, so these carry the
   element type too — otherwise the kit turns this into a 160px pink block. */
button.crafterina-rm {
  border: 0; background: none; color: var(--cf-text); cursor: pointer;
  font-size: 12px; line-height: 1.4; text-decoration: underline;
  padding: 0; border-radius: 0; text-transform: none; letter-spacing: normal;
}
button.crafterina-rm:hover { color: var(--cf-sale); }

.crafterina-totals { margin: 0; display: grid; gap: 8px; font-size: 14px; }
.crafterina-totals div { display: flex; justify-content: space-between; gap: 16px; }
.crafterina-totals dt, .crafterina-totals dd { margin: 0; }
.crafterina-grand { padding-top: 10px; border-top: 1px solid var(--cf-border); font-size: 17px; font-weight: 600; color: var(--cf-dark); }

.crafterina-coupon { display: flex; gap: 9px; }
.crafterina-coupon .crafterina-input { flex: 1; }

.crafterina-pay {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px;
  border: 1px solid var(--cf-border); border-radius: 8px; cursor: pointer;
}
.crafterina-pay[data-selected="true"] { border-color: var(--cf-pink); background: var(--cf-pink-wash); }
.crafterina-pay strong { display: block; font-size: 14px; color: var(--cf-dark); }
.crafterina-pay span span { font-size: 12px; color: var(--cf-text); }

.crafterina-terms { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; font-size: 13px; }
.crafterina-empty-cart { text-align: center; padding: 50px 20px; }
.crafterina-empty-cart p { margin-bottom: 18px; color: var(--cf-text); }

/* ---------- cart drawer ----------
   Our own panel. Elementor's side cart needs its frontend bundle to reveal it
   and cannot be overridden from CSS, so it stays hidden and we render this. */
.cf-drawer { position: fixed; inset: 0; z-index: 9999; }
.cf-drawer[hidden] { display: none; }

.cf-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(56, 56, 56, .45);
  opacity: 0; transition: opacity .28s var(--cf-ease);
}
.cf-drawer.is-open .cf-drawer__backdrop { opacity: 1; }

.cf-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 100%);
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: -14px 0 44px rgba(56, 56, 56, .18);
  transform: translateX(100%);
  transition: transform .3s var(--cf-ease);
}
.cf-drawer.is-open .cf-drawer__panel { transform: translateX(0); }

.cf-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--cf-border); flex: none;
}
.cf-drawer__head { min-width: 0; }
.cf-drawer__head h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--cf-dark); overflow-wrap: anywhere; }
button.cf-drawer__close {
  width: 38px; height: 38px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--cf-off); color: var(--cf-dark);
  font-size: 15px; line-height: 1; cursor: pointer;
  padding: 0; text-transform: none; letter-spacing: normal;
  transition: background .2s var(--cf-ease);
}
button.cf-drawer__close:hover { background: var(--cf-pink-wash); }

/* vertical only — nothing in a cart line may push the panel sideways */
.cf-drawer__body { flex: 1; min-width: 0; overflow: hidden auto; padding: 18px 22px 24px; }

@media (prefers-reduced-motion: reduce) {
  .cf-drawer__panel, .cf-drawer__backdrop { transition: none; }
}

/* admin */
.crafterina-admin-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.crafterina-admin-bar > div { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.crafterina-admin-bar .crafterina-input { width: auto; }
.crafterina-table-wrap { padding: 0; overflow-x: auto; }
.crafterina-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.crafterina-table th {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--cf-border);
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--cf-text);
}
.crafterina-table td { padding: 14px; border-bottom: 1px solid var(--cf-border); vertical-align: top; }
.crafterina-table tr:hover td { background: var(--cf-pink-wash); }
.crafterina-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.crafterina-tag--new { background: #FFF0D6; color: #8A5D0A; }
.crafterina-tag--processing { background: #E2EEFB; color: #2B5C8F; }
.crafterina-tag--completed { background: #E7F5EE; color: #2C6B4F; }
.crafterina-tag--cancelled { background: #F3F3F3; color: #6B6B6B; }

@media (max-width: 1024px) {
  .crafterina-cols { grid-template-columns: 1fr; gap: 26px; }
  .crafterina-summary { position: static; }
}
@media (max-width: 700px) {
  .crafterina-grid2 { grid-template-columns: 1fr; }
  .crafterina-simple { padding: 40px 16px 64px; }
  .crafterina-panel { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .animated { animation: none !important; }
  * { transition-duration: .001ms !important; }
}


/* ---------- phone fixes ----------
   Measured at 390x844. Everything here is a deviation from the original
   WordPress rendering; see CHANGES.md A17. */
@media (max-width: 767px) {
  /* iOS Safari zooms the page in whenever a focused field is under 16px, and it
     never zooms back out — the customer has to pinch out again after every
     field of the checkout. Every control they type into is 16px on a phone.
     !important because the base rule needs it too, to beat the mirrored theme's
     own input styling. */
  input.crafterina-input,
  select.crafterina-input,
  textarea.crafterina-input,
  .crafterina-product .crafterina-input,
  .crafterina-simple .crafterina-input,
  .crafterina-qty input,
  .elementor-field-textual { font-size: 16px !important; }

  /* ShopEngine's loop button keeps its desktop 17px type and 17px padding, so in
     the related-products grid it was 102px wide inside an 82px column and pushed
     the whole page 4px sideways. */
  ul.products a.button {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    padding: 10px 14px;
  }

  /* Where the same button renders icon-only on the shop grid it was an 18x18
     tap target — the primary action on the page. */
  ul.products .loop-product--btns a.button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The original Elementor header set this button to 8px on mobile, which is
     unreadable. (Inherited from the WordPress site, not introduced here.) The
     kit's rule is per-page-prefixed — `.elementor-39 .elementor-element…` — so
     there is no stable specificity to out-rank; !important is the honest fix. */
  .elementor-element-72884a6 .elementor-button,
  .elementor-element-72884a6 .elementor-button-text { font-size: 13px !important; }

  /* The burger panel is positioned at left:0 of a 90px-wide widget sitting near
     the right edge, so its 138px hung 33px off the screen and the last third of
     every menu label was cut off. Anchor it to the widget's right edge instead
     and never let it exceed the viewport. */
  nav.elementor-nav-menu--dropdown {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 20px);
  }
  nav.elementor-nav-menu--dropdown .elementor-nav-menu { width: 100%; }

  /* The cart line's controls were 32x34 and a 56x17 text link. */
  .crafterina-line .crafterina-qty button { width: 44px; height: 44px; }
  .crafterina-line .crafterina-qty input { width: 46px; height: 44px; }
  button.crafterina-rm { padding: 10px 0; }

  /* 13px squares are too small to hit; the label stays the real target. */
  .crafterina-terms input[type="checkbox"],
  .crafterina-pay input[type="radio"] { width: 20px; height: 20px; flex: none; }
  .crafterina-terms { align-items: center; gap: 12px; padding: 6px 0; }
}