/* FiberPart Recovery4: shared shell rules moved to site-shell.css */
/* =========================================================
   FIBERPART SHOP PAGE ONLY
   Depends on the shared homepage stylesheet: styles.css
   ========================================================= */

.shop-page { background: #f5f6f6; }
.shop-main { min-height: 70vh; }
.shop-heading-section { padding: 18px 0 12px; }
.shop-breadcrumb { display: flex; align-items: center; gap: 7px; color: var(--muted, #6d7880); font-size: 12px; margin-bottom: 12px; }
.shop-breadcrumb i { font-size: 12px; }
.shop-breadcrumb a:hover { color: var(--orange, #d86a2f); }

.shop-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 23px;
  border: 1px solid var(--line, #dfe4e7);
  background: linear-gradient(135deg, #fff, #f7f8f8 64%, #f1f4f5);
  border-radius: 24px;
  box-shadow: var(--shadow-md, 0 8px 22px rgba(25,35,45,.08));
}
.shop-title-row h1 { margin: 8px 0 5px; font-size: clamp(24px, 2.4vw, 33px); color: var(--dark, #19232d); }
.shop-title-row p { margin: 0; color: var(--muted, #6d7880); font-size: 12px; }
.shop-trust-mini { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.shop-trust-mini span { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 11px; background: #fff; border: 1px solid var(--line, #dfe4e7); border-radius: 12px; font-size: 12px; color: #52616b; }
.shop-trust-mini i { color: var(--orange, #d86a2f); }

.shop-content-section { padding: 8px 0 30px; }
.shop-layout { display: grid; grid-template-columns: 255px minmax(0, 1fr); gap: 14px; align-items: start; }

.shop-sidebar {
  position: sticky;
  top: 144px;
  background: #fff;
  border: 1px solid var(--line, #dfe4e7);
  border-radius: 20px;
  box-shadow: 0 7px 20px rgba(25,35,45,.055);
  overflow: hidden;
  z-index: 12;
}
.shop-sidebar__head { min-height: 53px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e9edef; }
.shop-sidebar__head > div { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.shop-sidebar__head i { color: #486274; }
.shop-filter-close { display: none; width: 34px; height: 34px; border: 0; border-radius: 10px; background: #eef1f2; color: #4b5d68; }

.shop-filter-form { padding: 0 14px 14px; }
.shop-filter-block { padding: 14px 0; border-bottom: 1px solid #edf0f1; }
.shop-filter-block:last-of-type { border-bottom: 0; }
.shop-filter-search > label { display: block; font-weight: 800; font-size: 12px; margin-bottom: 9px; }
.shop-search-box { min-height: 42px; display: grid; grid-template-columns: 18px 1fr 27px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #dfe5e8; border-radius: 12px; background: #f9fafb; transition: .2s; }
.shop-search-box:focus-within { border-color: #9eaeb7; background: #fff; box-shadow: 0 0 0 3px rgba(64,91,112,.08); }
.shop-search-box > i { color: #84919a; font-size: 12px; }
.shop-search-box input { border: 0; outline: 0; background: transparent; min-width: 0; width: 100%; color: var(--text, #202a32); font-size: 12px; }
.shop-search-box button { width: 27px; height: 27px; border: 0; background: transparent; color: #9aa5ac; border-radius: 8px; }
.shop-search-box button:hover { background: #edf0f2; color: #526672; }

.shop-filter-title { width: 100%; min-height: 28px; display: flex; align-items: center; justify-content: space-between; border: 0; background: transparent; padding: 0; color: var(--text, #202a32); font-weight: 800; font-size: 12px; }
.shop-filter-title i { color: #8b989f; font-size: 12px; transition: transform .2s; }
.shop-filter-block.is-collapsed .shop-filter-title i { transform: rotate(180deg); }
.shop-filter-block.is-collapsed .shop-filter-body { display: none; }
.shop-filter-body { padding-top: 10px; }

.shop-check { min-height: 34px; display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 8px; font-size: 12px; color: #50606a; cursor: pointer; }
.shop-check input { width: 15px; height: 15px; accent-color: #405b70; }
.shop-check small { min-width: 25px; height: 22px; padding: 0 6px; display: grid; place-items: center; background: #eef1f2; border-radius: 8px; color: #839099; font-size: 12px; }

.shop-price-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.shop-price-inputs label { display: grid; gap: 5px; }
.shop-price-inputs span { font-size: 12px; color: #87939a; }
.shop-price-inputs input { width: 100%; min-width: 0; height: 38px; padding: 0 8px; border: 1px solid #dfe4e7; border-radius: 10px; outline: 0; background: #fafbfb; font-size: 12px; }
.shop-price-inputs input:focus { border-color: #9eabb4; background: #fff; }
.shop-price-hint { display: block; margin-top: 7px; color: #98a2a8; font-size: 12px; }

.shop-switches { display: grid; gap: 9px; }
.shop-switch { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: #55646e; }
.shop-switch input { position: absolute; opacity: 0; pointer-events: none; }
.shop-switch-ui { width: 34px; height: 19px; border-radius: 999px; background: #dfe4e7; position: relative; transition: .2s; }
.shop-switch-ui::after { content: ""; position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.12); transition: .2s; }
.shop-switch input:checked + .shop-switch-ui { background: #405b70; }
.shop-switch input:checked + .shop-switch-ui::after { transform: translateX(-15px); }

.shop-filter-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding-top: 12px; }
.shop-apply-filter, .shop-reset-filter { min-height: 40px; border-radius: 11px; font-weight: 800; font-size: 12px; }
.shop-apply-filter { border: 0; background: linear-gradient(135deg, #263d4d, #4d697d); color: #fff; }
.shop-reset-filter { border: 1px solid #dfe4e7; background: #fff; color: #6d7981; padding: 0 10px; }

.shop-results-area { min-width: 0; }
.shop-toolbar { min-height: 56px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--line, #dfe4e7); border-radius: 17px; box-shadow: 0 6px 18px rgba(25,35,45,.045); }
.shop-result-summary { display: flex; flex-direction: column; gap: 2px; }
.shop-result-summary strong { font-size: 12.5px; }
.shop-result-summary span { color: #859199; font-size: 12px; }
.shop-sort-wrap { display: flex; align-items: center; gap: 7px; }
.shop-sort-wrap > label { color: #7c8991; font-size: 12px; }
.shop-select-shell { min-width: 150px; height: 38px; display: grid; grid-template-columns: 1fr 16px; align-items: center; padding: 0 10px; border: 1px solid #dfe4e7; border-radius: 11px; background: #f9fafb; }
.shop-select-shell select { appearance: none; border: 0; outline: 0; background: transparent; width: 100%; font-family: inherit; font-size: 12px; color: #45545e; cursor: pointer; }
.shop-select-shell i { font-size: 12px; color: #87939a; }

.shop-active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 0; padding-top: 8px; }
.shop-active-filters:empty { display: none; }
.shop-filter-chip { min-height: 30px; padding: 0 9px; border: 1px solid #dce3e6; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; gap: 7px; color: #5b6972; font-size: 12px; }
.shop-filter-chip button { border: 0; background: transparent; color: #98a2a8; padding: 0; font-size: 12px; }
.shop-filter-chip.clear-all { background: #eef1f2; font-weight: 800; cursor: pointer; }

.shop-status { min-height: 8px; }
.shop-status-message { margin-top: 9px; padding: 8px 10px; border-radius: 10px; background: #fff7e9; color: #7d663f; border: 1px solid #efe0bf; font-size: 12px; }

.shop-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding-top: 10px; }
.shop-product-card { min-width: 0; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--line, #dfe4e7); box-shadow: 0 7px 20px rgba(25,35,45,.055); transition: transform .22s, box-shadow .22s, border-color .22s; }
.shop-product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(25,35,45,.09); border-color: #cfd8dd; }
.shop-product-media { height: 190px; position: relative; overflow: hidden; background: #eef1f2; cursor: pointer; touch-action: manipulation; }
.shop-product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .28s ease, transform .38s ease; user-select: none; -webkit-user-drag: none; }
.shop-product-media .product-image--secondary { opacity: 0; transform: scale(1.025); }
@media (hover: hover) and (pointer: fine) {
  .shop-product-card:hover .product-image--primary { opacity: 0; }
  .shop-product-card:hover .product-image--secondary { opacity: 1; transform: scale(1); }
}
.shop-product-media.is-alt-image .product-image--primary { opacity: 0; }
.shop-product-media.is-alt-image .product-image--secondary { opacity: 1; transform: scale(1); }
.shop-image-touch-hint { position: absolute; right: 9px; bottom: 9px; z-index: 3; min-height: 25px; padding: 0 8px; border-radius: 9px; display: none; align-items: center; gap: 5px; background: rgba(25,35,45,.72); backdrop-filter: blur(7px); color: #fff; font-size: 12px; }
.shop-product-badges { position: absolute; right: 9px; top: 9px; z-index: 4; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.shop-product-badge { min-height: 24px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; background: #263d4d; color: #fff; font-size: 12px; font-weight: 800; }
.shop-product-badge.sale { background: #a84f3b; }
.shop-product-badge.new { background: #507b6c; }
.shop-favorite-btn { position: absolute; left: 9px; top: 9px; z-index: 4; width: 33px; height: 33px; border-radius: 10px; border: 1px solid rgba(255,255,255,.58); background: rgba(255,255,255,.88); backdrop-filter: blur(7px); color: #51616b; }
.shop-favorite-btn.is-active { color: #a84f3b; }
.shop-product-body { padding: 11px 12px 12px; }
.shop-product-category { color: #849199; font-size: 12px; }
.shop-product-title { margin: 5px 0 7px; min-height: 42px; font-size: 12.5px; line-height: 1.7; }
.shop-product-title a:hover { color: #405b70; }
.shop-product-meta { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #859199; font-size: 12px; }
.shop-rating { display: inline-flex; align-items: center; gap: 4px; }
.shop-rating i { color: #c99222; }
.shop-stock.in { color: #507b6c; }
.shop-stock.out { color: #9a6a61; }
.shop-product-footer { min-height: 49px; margin-top: 7px; padding-top: 8px; border-top: 1px solid #edf0f1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shop-price { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.shop-price strong { font-size: 13px; color: #24333d; }
.shop-price span { font-size: 12px; color: #7d8991; }
.shop-price del { flex-basis: 100%; color: #a5adb2; font-size: 12px; }
.shop-add-cart { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; border: 0; display: grid; place-items: center; background: linear-gradient(135deg, #bd6234, #d47b4c); color: #fff; transition: .2s; }
.shop-add-cart:hover { transform: translateY(-1px); }
.shop-add-cart:disabled { background: #c8ced2; cursor: not-allowed; }

.shop-skeleton-card { height: 300px; border-radius: 18px; border: 1px solid #e5e9eb; background: linear-gradient(90deg, #edf0f1 25%, #f8f9f9 40%, #edf0f1 60%); background-size: 400% 100%; animation: shopSkeleton 1.25s ease infinite; }
@keyframes shopSkeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.shop-empty-state { padding: 45px 18px; margin-top: 10px; text-align: center; border: 1px dashed #cfd8dd; border-radius: 18px; background: #fff; }
.shop-empty-icon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 17px; display: grid; place-items: center; background: #eef1f2; color: #607785; font-size: 21px; }
.shop-empty-state h2 { margin: 0 0 6px; font-size: 18px; }
.shop-empty-state p { max-width: 460px; margin: 0 auto 13px; color: #7d8991; line-height: 1.8; font-size: 12px; }
.shop-empty-state button { min-height: 38px; border: 0; border-radius: 11px; padding: 0 13px; background: #263d4d; color: #fff; font-weight: 800; font-family: inherit; }

.shop-pagination-wrap { margin-top: 13px; min-height: 52px; padding: 8px 10px; border: 1px solid var(--line, #dfe4e7); border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shop-pagination-info { color: #849098; font-size: 12px; }
.shop-pagination { display: flex; align-items: center; gap: 5px; direction: ltr; }
.shop-page-btn { min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid #dfe4e7; border-radius: 10px; background: #fff; color: #576771; font-family: inherit; font-size: 12px; }
.shop-page-btn:hover:not(:disabled), .shop-page-btn.active { background: #263d4d; border-color: #263d4d; color: #fff; }
.shop-page-btn:disabled { opacity: .38; cursor: default; }
.shop-page-dots { width: 25px; text-align: center; color: #a0a9ae; }

.shop-mobile-actions { display: none; }
.shop-filter-overlay { display: none; }

@media (max-width: 1050px) {
  .shop-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .shop-heading-section { padding-top: 10px; }
  .shop-title-row { padding: 16px; border-radius: 18px; align-items: flex-start; }
  .shop-title-row h1 { font-size: 21px; }
  .shop-title-row p { font-size: 12px; line-height: 1.7; }
  .shop-trust-mini { display: none; }
  .shop-content-section { padding-top: 2px; }
  .shop-layout { display: block; }
  .shop-mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
  .shop-mobile-filter-btn, .shop-mobile-sort-btn { min-height: 42px; border: 1px solid #dfe4e7; border-radius: 12px; background: #fff; color: #4d606c; font-family: inherit; font-weight: 800; font-size: 12px; }
  .shop-mobile-filter-btn span { min-width: 18px; height: 18px; margin-right: 4px; padding: 0 4px; border-radius: 7px; background: #263d4d; color: #fff; display: inline-grid; place-items: center; font-size: 12px; }

  .shop-sidebar { position: fixed; top: 0; right: 0; width: min(88vw, 350px); height: 100dvh; border-radius: 20px 0 0 20px; transform: translateX(105%); transition: transform .25s ease; z-index: 140; overflow-y: auto; overscroll-behavior: contain; }
  .shop-sidebar.open { transform: translateX(0); }
  .shop-sidebar__head { position: sticky; top: 0; z-index: 2; background: #fff; }
  .shop-filter-close { display: grid; place-items: center; }
  .shop-filter-overlay { position: fixed; inset: 0; background: rgba(19,29,36,.42); backdrop-filter: blur(2px); z-index: 130; }
  .shop-filter-overlay.show { display: block; }

  .shop-toolbar { min-height: 50px; padding: 7px 9px; }
  .shop-sort-wrap { position: fixed; right: 8px; left: 8px; bottom: 72px; z-index: 150; padding: 11px; border: 1px solid #dfe4e7; border-radius: 15px; background: #fff; box-shadow: 0 16px 44px rgba(25,35,45,.18); display: none; }
  .shop-sort-wrap.open { display: flex; }
  .shop-select-shell { flex: 1; }
  .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 8px; }
  .shop-product-media { height: 142px; }
  .shop-image-touch-hint { display: inline-flex; }
  .shop-product-body { padding: 9px; }
  .shop-product-title { font-size: 12px; min-height: 38px; }
  .shop-product-meta { font-size: 12px; }
  .shop-price strong { font-size: 12px; }
  .shop-add-cart { width: 33px; height: 33px; border-radius: 10px; }
  .shop-pagination-wrap { flex-direction: column; align-items: stretch; text-align: center; }
  .shop-pagination { justify-content: center; }
}

@media (max-width: 430px) {
  .shop-breadcrumb { margin-bottom: 8px; }
  .shop-title-row { padding: 14px; }
  .shop-title-row h1 { font-size: 19px; }
  .shop-product-grid { gap: 7px; }
  .shop-product-media { height: 128px; }
  .shop-product-badges { right: 6px; top: 6px; }
  .shop-product-badge { min-height: 20px; padding: 0 6px; font-size: 12px; }
  .shop-favorite-btn { left: 6px; top: 6px; width: 29px; height: 29px; border-radius: 9px; }
  .shop-image-touch-hint { right: 6px; bottom: 6px; min-height: 21px; font-size: 12px; }
  .shop-product-category { font-size: 12px; }
  .shop-product-title { font-size: 12px; line-height: 1.65; }
  .shop-product-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
  .shop-product-footer { min-height: 45px; }
  .shop-price strong { font-size: 12px; }
  .shop-price span, .shop-price del { font-size: 12px; }
  .shop-page-btn { min-width: 31px; height: 31px; padding: 0 7px; }
}