/* =============================================================================
 * PrintShoppy V6 — Category Tree storefront pages CSS
 * T4.43.8 (2026-05-25) — extracted from 3 inline <style> blocks across
 *   category_tree_landing.twig + category_tree_series.twig (previously
 *   declared .ps-neomorphism twice identically) and consolidated here.
 *
 * Loaded by catalog/controller/product/category_tree.php via $this->document
 * ->addStyle() so it surfaces on all 3 levels of the category-tree feature:
 *   - Level 1 (landing)   — /custom-mobile-cases
 *   - Level 2 (series)    — /apple, /oppo, etc.
 *   - Level 3 (model)     — /iphone-11, etc.
 *
 * NOTE: The sprite-related rules (.ps-brand-sprite base + 23 .ps-brand-sprite-*
 * per-brand background-position offsets) STAY INLINE in category_tree.twig
 * because every value depends on a Twig variable (admin-configurable
 * `module_ps_category_tree_brand_icon_sprite_path` + `_sprite_size`). Moving
 * them here would require hardcoding sprite_size = 50 and the canonical sprite
 * URL, breaking the admin-configurable design.
 * ============================================================================= */
 
/* CSS Grid container (replaces Bootstrap row/col grid; matches V5 live custom-css.css L2187) */
.ps-mc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-column-gap: 12px;
  grid-row-gap: 12px;
}

.ps-mc-grid-child {
  min-width: 0;
  aspect-ratio: 1;
}

/* Neomorphism soft-shadow card (matches V5 live custom-css.css L2196).
 * Used on Level 1 (brand cards) + Level 2 (model cards + accordion panels). */
.ps-neomorphism {
  background: linear-gradient(133.21deg, #F7F7F7 -2.44%, #F9F9F9 135.62%);
  box-shadow: -6px -6px 8px rgba(255, 255, 255, 0.8),
              -2px -1px 8px #FFFFFF,
              2px 2px 10px rgba(255, 255, 255, 0.25),
              -4px -4px 20px rgba(255, 255, 255, 0.8),
              1px 1px 5px rgba(185, 185, 185, 0.6),
              4px 4px 15px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}

/* Accordion overrides — keep Bootstrap accordion children transparent inside
 * a neomorphism wrapper (otherwise the BS5 white background bleeds through). */
.ps-neomorphism .accordion,
.ps-neomorphism .accordion-item,
.ps-neomorphism .accordion-button,
.ps-neomorphism .accordion-flush {
  background-color: transparent;
}

/* T4.43.11.1 (2026-05-26) — V5-parity accordion open/close toggle.
 * V5's mc_dynamic_models_view.php swaps the "View Models ⌄" link with a red ✕
 * close icon when an accordion is expanded. V6 mirrors that convention here by
 * keying off Bootstrap's auto-managed .collapsed class on the toggle button.
 *
 * Color palette matches V5's altcolor1 / altcolor2 tokens (sampled live):
 *   - #0489F5 (blue)  — V5 .text-altcolor1, "View Models" + chevron link
 *   - #E71D36 (red)   — V5 .text-altcolor2, accordion close ✕
 * These tokens are intentionally hardcoded here rather than inherited from BS5
 * .text-primary / .text-danger because the V6 theme has re-tinted those CSS
 * variables to teal/coral, which don't match the live PrintShoppy V5 palette. */
.ps-cat-tree-accordion-btn {
  cursor: pointer;
}
.ps-cat-tree-accordion-btn.collapsed .ps-cat-tree-accordion-toggle-expanded,
.ps-cat-tree-accordion-btn:not(.collapsed) .ps-cat-tree-accordion-toggle-collapsed {
  display: none;
}
.ps-cat-tree-accordion-btn .ps-cat-tree-accordion-toggle-collapsed,
.ps-cat-tree-accordion-btn .ps-cat-tree-accordion-toggle-expanded{
  color: #0489F5;
}

/* =============================================================================
 * === L3 case-type cards (T4.43.15.3, 2026-05-29) — V5 EXACT styling parity
 * Rewrites the T4.43.15 implementation to match V5 (test.printshoppy.com) verbatim.
 * Uses V5's class names where possible (bg-white card, col-5 image, etc.) so we
 * inherit Bootstrap layout — minimal custom CSS, mostly utility classes mimicking
 * V5's compiled Bootstrap theme tokens (altcolor1/altcolor3).
 *
 * Layout strategy (matches V5):
 *   - Section: container-fluid with light grey bg (rgba(238,238,238,.93)) + py-5
 *   - Card: bg-white d-flex align-items-center rounded-3 (flat, no shadow/gradient)
 *   - Image LEFT: Bootstrap col-5 (41.67%) with per-case-type bg tint
 *   - Content RIGHT: <a> wraps title + price + CTA (whole right side clickable)
 *   - Pill: position-absolute top-0 end-0 translate-middle-y (straddles top edge)
 *   - Custom video player: dual-wrapper click-to-play (JS at category_tree_video.js)
 * ============================================================================= */

/* V5 theme tokens — minimal subset of V5's compiled Bootstrap (--bs-altcolor1/2/3
 * are baked into V5's bootstrap.min.css; V6 doesn't have them sitewide so we scope
 * here). Promote to sitewide later if more pages need them. */
.text-altcolor1   { color:        #0489F5 !important; }
.bg-altcolor1     { background-color: #0489F5 !important; }
.border-altcolor1 { border-color: #0489F5 !important; }
.bg-altcolor3     { background-color: #F7613C !important; }
.text-altcolor3   { color:        #F7613C !important; }

/* V5 mobile-case-badge — light blue pill background (#E3EFFF) */
.mobile-case-badge { background-color: #E3EFFF; }

/* V5 custom font-size utilities — V5 uses `em` (scales with parent font-size), NOT `rem`.
 * Important: V6 originally used rem here but V5's compiled bootstrap.min.css uses em. Switched
 * to em so font sizing composes correctly inside the nested card structure (parent .fs-7 inside
 * a CTA wrapper makes child .fs-8 chevron icon scale proportionally — same as V5). */
.fs-7 { font-size: 0.875em !important; }
.fs-8 { font-size: 0.75em  !important; }
@media (min-width: 480px) {
  /* V5 custom 'xsm' breakpoint (between Bootstrap 5's mobile and sm at 576px) */
  .fs-xsm-7 { font-size: 0.875em !important; }
}
@media (min-width: 1200px) {
  /* V5 .fs-xl-6 — CTA grows slightly at xl breakpoint */
  .fs-xl-6 { font-size: 1rem !important; }
}

/* V5 custom spacing utilities — Bootstrap 5 ships .mt-0 through .mt-5 (0 to 3rem) and similar
 * for .py-* / .gy-* / .mt-n*. V5's compiled bootstrap.min.css extends these with .mt-8, .py-6,
 * .gy-9, .mt-n1. Defining here so V6 twig uses the same values. */
.mt-8  { margin-top: 2rem !important; }
.py-6  { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.gy-9  { --bs-gutter-y: 3rem; }   /* sets vertical gutter on .row; Bootstrap 5 reads this CSS var */
.mt-n1 { margin-top: -0.25rem !important; }

/* V5's compiled bootstrap.min.css overrides .rounded-3 to 0.625rem (vs Bootstrap 5 default 1rem).
 * V6 cards look "too rounded" without this override. Scope to .case-mc only so V6's other pages
 * keep Bootstrap's 1rem default. */
.case-mc.rounded-3,
.case-mc .rounded-3 {
  border-top-left-radius:     0.625rem !important;
  border-top-right-radius:    0.625rem !important;
  border-bottom-left-radius:  0.625rem !important;
  border-bottom-right-radius: 0.625rem !important;
}
.case-mc .rounded-top-start-3    { border-top-left-radius:     0.625rem !important; }
.case-mc .rounded-top-end-3      { border-top-right-radius:    0.625rem !important; }
.case-mc .rounded-bottom-start-3 { border-bottom-left-radius:  0.625rem !important; }
.case-mc .rounded-bottom-end-3   { border-bottom-right-radius: 0.625rem !important; }

/* V5 theme tokens that diverge from V6 Bootstrap defaults:
 *   V5: --bs-primary: #1DAAA3 (teal); --bs-secondary: #FF9F1C (orange)
 *   V6: --bs-primary: #0d6efd (blue); --bs-secondary: #6c757d (grey)
 *
 * Image container bg + price text use these tokens — V6 currently renders blue/grey instead of
 * V5's teal/orange. Scope to .case-mc only so V6's other pages keep their Bootstrap defaults.
 * After this override:
 *   Soft case image bg  → light teal (V5 parity, was light blue)
 *   Glass case image bg → light orange (V5 parity, was light grey)
 *   Metal case image bg → light teal (already correct via .case-mc-metal having altcolor1 setting;
 *                                       this rule covers it too if admin changes color)
 *   Price text          → V5 teal (was Bootstrap blue) */
.case-mc .bg-primary   { background-color: #1DAAA3 !important; }
.case-mc .bg-secondary { background-color: #FF9F1C !important; }
.case-mc .text-primary { color:            #1DAAA3 !important; }

/* --- L3 sample video player (custom dual-wrapper click-to-play) --- */

/* Hide browser-default video controls (custom UI used instead) */
.ps-case-video-wrapper video::-webkit-media-controls,
.ps-case-video-wrapper video::-webkit-media-controls-panel,
.ps-case-video-wrapper video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
}
.ps-case-video-wrapper video {
  outline: none;
}

/* Portrait phone aspect ratio for both thumbnail picture <img> + video element */
.ps-case-video-thumbnail img,
.ps-case-video-wrapper video {
  aspect-ratio: 480 / 848;
}

/* Make whole thumbnail wrapper clickable */
.ps-case-video-thumbnail { cursor: pointer !important; }

/* Custom play button — V5 dimensions */
.ps-case-video-play-btn {
  width: 33px;
  height: 20px;
  cursor: pointer;
  min-width: 19px;
}

/* Custom timeline range input — V5 design (2px track, red circle thumb) */
.ps-case-video-timeline {
  -webkit-appearance: none;
  appearance: none;
  background: #ffffff7a;
  height: 2px;
  cursor: pointer;
  margin: 0 7px 0 -2px;
}
.ps-case-video-timeline::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: red !important;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.ps-case-video-timeline::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: red !important;
  border-radius: 50%;
  cursor: pointer;
}

/* Per-case-type card hook classes (V5 has these as empty hooks; V6 keeps them for
 * future per-type rules if needed. Currently no rules — keep for parity.) */
.case-mc-glass,
.case-mc-soft_matte,
.case-mc-metal { /* hooks; no rules currently */ }

/* =============================================================================
 * === L1 Search dropdown (T4.43.16 / T4.43.16.2, 2026-05-29)
 * V5-exact styling. CSS rules quoted verbatim from V5's live_search_tree.tpl
 * inline <style> block. Class names match V5 (.mobile-cases-search-bar, .live-search).
 * ============================================================================= */

/* V5 blue search bar — bright blue wrapper around white input.
 * Source: V5 _scratch_v5_l1.html line 452-454. */
.mobile-cases-search-bar {
  background-color: #04a9f9 !important;
}

/* V5 dropdown wrapper — 500px max-height desktop (175px mobile), 10px radius,
 * grey border (no top border because it visually connects to the input above).
 * Source: V5 lines 422-428. */
.live-search {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 500px;
  border-radius: 10px;
  border: 1px solid #d1d1d1;
  border-top: 0;
  z-index: 1000;
}
@media (max-width: 767px) {
  .live-search { max-height: 175px; }
}

/* V5 list items — generous padding, large font (matches V5 line 434-440). */
.live-search ul {
  padding: 0px 30px;
  list-style-type: none;
}
.live-search ul li {
  cursor: pointer;
  padding: 18px;
  min-height: 50px;
  clear: both;
  font-size: large;
}
.live-search ul li:hover {
  background-color: #F0F7FA;
}
.live-search ul li a {
  text-decoration: none;
  display: block;
  color: inherit;
}

/* Search input focus reset (no blue glow over the bright blue wrapper bg) */
#search:focus {
  outline: none;
  box-shadow: none;
}

/* Make #search-box parent position-relative so .live-search absolute-positions correctly */
#search-box { position: relative; }


@media (min-width: 768px) {
    .mobile-case-banner-img {aspect-ratio: 1250 / 450 !important;}
}
#body{background: #F8F8F8;}
#ps-mobile-cases-info-show-less p,
#ps-mobile-cases-info-show-more p {
    cursor: pointer;
}
.ps-model-neomorphism{
  background: #F7F7F7;
  box-shadow: inset -1px -1px 8px rgba(255, 255, 255, 0.25), inset 1px 2px 8px rgba(97, 97, 97, 0.25), inset -4px -4px 30px #FFFFFF, inset 4px 8px 20px rgba(162, 162, 162, 0.25);
  border-radius: 30px;
}
.master-content{
    min-height:500px;
}