/* =============================================================================
   full-shop.css — Tink.You Shop (public catalogue / showcase page)
   Layered on top of Metronic 9.1.2 (styles.css is injected by html-head-tags).
   Follows the same contract as the other full-*.css files: hero/background
   pairs with an explicit `.dark` variant + the shared .badge-mono override.
   ============================================================================= */

.badge-mono {
   color: var(--tw-gray-700);
   border-color: transparent;
   background-color: var(--tw-gray-200);
}
.tooltip.badge-mono {
   border-color: var(--tw-gray-300);
}

.hero-bg {
   background-image: url('../metronic-assets/9.1.2/media/images/2600x1200/bg-1.png');
}
.dark .hero-bg {
   background-image: url('../metronic-assets/9.1.2/media/images/2600x1200/bg-1-dark.png');
}
.upgrade-bg {
   background-image: url('../metronic-assets/9.1.2/media/images/2600x1200/bg-5.png');
}
.dark .upgrade-bg {
   background-image: url('../metronic-assets/9.1.2/media/images/2600x1200/bg-5-dark.png');
}
.add-new-bg {
   background-image: url('../metronic-assets/9.1.2/media/images/2600x1200/bg-4.png');
}
.dark .add-new-bg {
   background-image: url('../metronic-assets/9.1.2/media/images/2600x1200/bg-4-dark.png');
}
.channel-stats-bg {
   background-image: url('../metronic-assets/9.1.2/media/images/2600x1600/bg-3.png');
}
.dark .channel-stats-bg {
   background-image: url('../metronic-assets/9.1.2/media/images/2600x1600/bg-3-dark.png');
}

/* =============================================================================
   PRODUCT GRID
   ============================================================================= */

/* Metronic 9.1.2 ships a pre-compiled Tailwind subset: the few helpers below
   are used by this page but are not part of it, so they are declared locally
   (scoped to .shop) instead of editing the vendored bundle. */
.shop .mt-auto {
   margin-top: auto;
}
.shop .howto-list {
   list-style: decimal inside;
}
.shop .howto-list > li + li {
   margin-top: 0.5rem;
}

.shop .product-card {
   transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.shop .product-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* =============================================================================
   PRODUCT CARD PALETTE — clean white surface + neutral gray typography.
   All three cards share the same base plate; only the CTA carries the brand
   colour, keeping the catalogue visually calm and easy to scan.
   ============================================================================= */

.shop .product-card-1,
.shop .product-card-2,
.shop .product-card-3 {
   background-color: #ffffff;
   border: 1px solid #e0e0e0;
}

/* Hover only lifts the card with a soft shadow — no colour jump. */
.shop .product-card-1:hover,
.shop .product-card-2:hover,
.shop .product-card-3:hover {
   background-color: #fafafa;
   border-color: rgba(0, 0, 0, 0.12);
}

/* Text hierarchy — Metronic default grays. */
.shop .product-card-1 .product-title,
.shop .product-card-2 .product-title,
.shop .product-card-3 .product-title {
   color: #181c32;
}
.shop .product-card-1 .product-description,
.shop .product-card-2 .product-description,
.shop .product-card-3 .product-description {
   color: #636674;
}
.shop .product-card-1 .product-details,
.shop .product-card-2 .product-details,
.shop .product-card-3 .product-details {
   color: #9a9cae;
}
.shop .product-card-1 .price-range,
.shop .product-card-2 .price-range,
.shop .product-card-3 .price-range {
   color: #181c32;
}

/* Product tag badges — light mint green (matches the FAQ mint on the homepage). */
.shop .product-tag {
   background-color: #e0fff0 !important;
   border-color: rgba(18, 73, 51, 0.15) !important;
   color: #124933 !important;
}

/* Divider above the price / CTA row. */
.shop .product-card-footer {
   border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* "Order Now" CTA — the tink.you brand action colour lives on .btn-dark,
   which is already customised project-wide. We only keep a neutral shadow
   on hover/focus so the button doesn't fight with the white card surface. */
.shop .product-card .btn-dark:hover,
.shop .product-card .btn-dark:focus,
.shop .product-card .btn-dark:active,
.shop .product-card .btn-dark.active {
   color: #fff;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* Placeholder tile — light neutral gray backdrop; hosts real product photos
   and acts as a subtle fallback while images load. */
.shop .product-image-placeholder {
   height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   overflow: hidden;
   background-color: #f5f5f5;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
}
.shop .product-image-placeholder .product-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   border-radius: 0.475rem;
   transition: transform 0.3s ease;
}
.shop .product-card:hover .product-image-placeholder .product-image {
   transform: scale(1.04);
}
/* All three cards share the same neutral placeholder — no per-card tint. */
.shop .product-card-1 .product-image-placeholder,
.shop .product-card-2 .product-image-placeholder,
.shop .product-card-3 .product-image-placeholder {
   background-color: #f5f5f5;
}
.shop .product-image-placeholder i {
   font-size: 3rem;
   color: #9a9cae;
   transition: transform 0.25s ease, color 0.25s ease;
}
.shop .product-card:hover .product-image-placeholder i {
   transform: scale(1.08);
   color: #636674;
}

/* Grayscale filter on stickers (card 1) and badges (card 3) images only —
   sticky notes (card 2) keep their full colour. This is a static filter, so it
   coexists with the scale-on-hover transform declared above without conflict. */
.shop .product-card-1 .product-image,
.shop .product-card-3 .product-image {
   filter: grayscale(1) brightness(1.2);
}

.shop .price-range {
   font-size: 1.1rem;
   font-weight: 600;
   color: #181c32;
}

/* Product spec line (formats, sizes, colours) — deliberately demoted one step
   below the description so the eye lands on name > pitch > price first, and
   the fine print stays legible but visibly secondary. */
.shop .product-details {
   font-size: 0.75rem; /* text-xs equivalent */
   opacity: 0.8;
}

/* =============================================================================
   FEATURED CARD — product-card-2 (Sticky Notes, centre of the grid).
   Treated like the "featured plan" of a pricing table: a subtle cool-silver
   surface, a slightly more present border and a stronger elevation shadow.
   From the xl breakpoint up — where the grid shows all three cards side by
   side and card 2 is genuinely in the middle — it is also scaled up ~5% and
   lifted above its neighbours (z-index) so it visually overlaps them. Below
   xl the grid collapses to 1–2 columns, so no scale is applied there: the
   silver tint + shadow alone carry the emphasis and avoid any overflow.
   ============================================================================= */

.shop .product-card-2 {
   position: relative;
   z-index: 2;
   background-color: #effff3;
   border: 1px solid #c4e5d5;
   box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
}
.shop .product-card-2:hover {
   background-color: #cceaf6;
   border-color: #9acbdd;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

.product-image-placeholder.central {
   border-color: #006626;
}
.product-image-placeholder.central img {
   filter: hue-rotate(-76deg) brightness(1.05);
}
.shop .product-card-2:hover .product-image-placeholder.central {
   border-color: #254551;
}
.shop .product-card-2:hover .product-image-placeholder.central img {
   filter: none;
}
.shop .product-card-2:hover .product-tag {
    background-color: #c8f1ff !important;
    border-color: rgb(146 168 195) !important;
    color: #000000 !important;
}
.shop .product-card-2:hover .product-details {
    color: #575a70;
}
.shop .product-card-2:hover .btn-dark {
    background: var(--tw-dark-active);
    box-shadow: var(--tw-dark-box-shadow);
    color: #7dffff;
}

/* Scale-up only when the three cards sit side by side (xl / >=1280px). */
@media (min-width: 1280px) {
   .shop .product-card-2 {
      transform: scale(1.05);
   }
   .shop .product-card-2:hover {
      transform: scale(1.07);
   }
}

/* -----------------------------------------------------------------------------
   DARK MODE — neutral dark surface cards, light gray text. No green tints.
   -------------------------------------------------------------------------- */
.dark .shop .product-card:hover {
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
}
.dark .shop .product-card-1,
.dark .shop .product-card-2,
.dark .shop .product-card-3 {
   background-color: #1e1e2d;
   border-color: rgba(255, 255, 255, 0.08);
}
.dark .shop .product-card-1:hover,
.dark .shop .product-card-2:hover,
.dark .shop .product-card-3:hover {
   background-color: #232334;
   border-color: rgba(255, 255, 255, 0.14);
}
.dark .shop .product-card-1 .product-title,
.dark .shop .product-card-2 .product-title,
.dark .shop .product-card-3 .product-title {
   color: #f0f0f5;
}
.dark .shop .product-card-1 .product-description,
.dark .shop .product-card-2 .product-description,
.dark .shop .product-card-3 .product-description {
   color: #c9c9d6;
}
.dark .shop .product-card-1 .product-details,
.dark .shop .product-card-2 .product-details,
.dark .shop .product-card-3 .product-details {
   color: #a0a0b0;
}
.dark .shop .price-range,
.dark .shop .product-card-1 .price-range,
.dark .shop .product-card-2 .price-range,
.dark .shop .product-card-3 .price-range {
   color: #f0f0f5;
}
.dark .shop .product-tag {
   background-color: rgba(18, 73, 51, 0.2) !important;
   border-color: rgba(74, 237, 196, 0.2) !important;
   color: #a6f8d2 !important;
}
.dark .shop .product-card-footer {
   border-top-color: rgba(255, 255, 255, 0.08);
}
.dark .shop .product-card .btn-dark:hover,
.dark .shop .product-card .btn-dark:focus,
.dark .shop .product-card .btn-dark:active,
.dark .shop .product-card .btn-dark.active {
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.dark .shop .product-image-placeholder {
   background-color: #171723;
   border-color: rgba(255, 255, 255, 0.08);
}
.dark .shop .product-card-1 .product-image-placeholder,
.dark .shop .product-card-2 .product-image-placeholder,
.dark .shop .product-card-3 .product-image-placeholder {
   background-color: #171723;
}
.dark .shop .product-image-placeholder i {
   color: #a0a0b0;
}
.dark .shop .product-card:hover .product-image-placeholder i {
   color: #e0e0e0;
}

/* Featured card in dark mode — a slightly lifted surface (#252536 vs #1e1e2d
   for cards 1 and 3) plus a matching elevation shadow, so the centre card
   stays distinguished without any colour tint. The position/z-index and the
   xl scale-up declared in light mode still apply here. */
.dark .shop .product-card-2 {
   background-color: #252536;
   border-color: rgba(255, 255, 255, 0.14);
   box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
}
.dark .shop .product-card-2:hover {
   background-color: #2c2c40;
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* "How it works" panel — keeps the numbered steps readable in both themes.
   position:relative + overflow:visible anchor the floating sample QR card
   (.shop-howto-qr) that slightly overlaps the panel's top-right corner. */
.shop .shop-howto {
   position: relative;
   overflow: visible;
   background-color: var(--tw-gray-100, #f9f9f9);
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   padding: 20px;
}
.dark .shop .shop-howto {
   border-color: rgba(255, 255, 255, 0.08);
}

/* Floating sample QR code card attached to the "How it works" panel. */
.shop .shop-howto-qr {
   position: absolute;
   top: 20px;
   right: 22px;
   z-index: 3;
   width: 166px;
   padding: 16px;
   background: #ffffff;
   border-radius: 12px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 1180px) {
   .shop .shop-howto-qr {
      position: relative;
      top: 0;
      right: 0;
      float: right;
      margin: 0 0 10px 20px;
      width: 126px;
      padding: 10px;
   }
}

.shop .shop-howto-qr:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.shop .shop-howto-qr a {
   display: block;
   line-height: 0;
}
.shop .shop-howto-qr img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 6px;
   opacity: .8;
}
.dark .shop .shop-howto-qr {
   background: #1e1e2d;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.dark .shop .shop-howto-qr:hover {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

@media print {
   .shop .product-card:hover {
      transform: none;
      box-shadow: none;
   }
   /* Neutralise the featured scale-up so the centre card prints flush. */
   .shop .product-card-2 {
      transform: none;
   }
}