/* ==========================================================================
   Apdrukaspreces.lv: custom styles
   Small site-wide style tweaks in one place. Loaded by apdrukaspreces-custom.php.
   The large feature files (cart drawer, shop filters, product page, catalog mode,
   wishlist/compare, reviews...) keep their own styles in their own files.

   Contents (same order as these styles loaded before they were merged):
     1. Mobile / tablet / small-laptop header + phone footer
     2. Link and button colours (overrides the theme's pink default)
     3. Footer tagline wrapping (was in Customizer > Additional CSS)
     4. Header & footer look: sage colours, logo, menu, dark footer, headings
     5. Header icon tooltips (mouse only)
     6. Thank-you page after a request (order-received)
     7. Comparison page layout (page ID 7433, LV + /en/)
     8. Product page title size on phones and tablets
     9. Product page, single-column layout (up to 768px): centred controls
    10. Product page tabs as foldable sections below 1200px
    11. Product page "Related products": 2 columns below 1200px
    12. Kontakti page map: picture of the map until cookies are accepted
    13. Small labels: minimum readable text size (phones, tablets, desktop)
    14. Shop grid: wide product photos shown whole, not cut to a square
    15. Language flag (GPTranslate) in the header next to the icons
    16. "Page not found" (404) page
    17. Filtri panel: colour grid fills the width (no colliding names)
    18. Filtri panel: price slider, left ball no longer crossed by the line
    19. Page title space below the header (cart, checkout, wishlist, compare, account)
    20. Header icons: bigger tap area on touch screens
    21. Apdrukas veidi comparison table as cards on phones and tablets
   New tweaks: add a new numbered section at the end, with a comment on each rule.
   ========================================================================== */


/* ==========================================================================
   1. Mobile / tablet / small-laptop header + phone footer
   (was apdrukas-mobile-header.php)
   ========================================================================== */

/* Phones + tablets (up to 1024px): logo centred, menu button left, icons right */
@media (max-width:1024px){
  /* header row: one line, room for the centred logo */
  .site-header .header-inner{position:relative;flex-wrap:nowrap;justify-content:flex-start;gap:0 14px;padding:14px 20px;min-height:76px;}
  /* logo absolutely centred in the header */
  .site-header .site-branding{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;align-items:center;margin:0;}
  /* no tagline under the logo on small screens */
  .site-header .site-branding .site-description{display:none;}
  /* menu button first (left) */
  .site-header .site-navigation-toggle-holder{order:-1;margin:0;padding:0;}
  .site-header .site-navigation-toggle-holder + .site-navigation-dropdown{order:0;}
  /* search pushes the icons to the right */
  .site-header .header-inner > .apr-header-search,
  .site-header .site-navigation-toggle-holder ~ .apr-header-search{margin-left:auto !important;}
  /* icons above the centred logo so they stay clickable */
  .site-header .header-inner > *:not(.site-branding):not(.site-navigation-toggle-holder):not(.site-navigation-dropdown):not(.site-navigation){position:relative;z-index:3;}
  /* dropdown menu opens full-width under the header */
  .site-header .site-navigation-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;}
  /* icons always on the right (no script needed) */
  header.site-header .site-navigation-toggle-holder{margin-right:auto !important;}
  /* open search box stays in front of the wishlist/compare/cart icons */
  header.site-header .header-inner > .apr-header-search{z-index:20 !important;}
}
/* Phones (up to 600px): menu + search left, wishlist/compare/cart right */
@media (max-width:600px){
  .site-header .site-navigation-toggle-holder{order:-2;}
  .site-header .header-inner > .apr-header-search{order:-1;margin-left:14px !important;}
  header.site-header .site-navigation-toggle-holder{margin-right:0 !important;}
  header.site-header .header-inner > .apr-header-search{margin-right:auto !important;}
  /* spacing between the right-hand icons */
  .site-header .header-inner > .apr-wishlist-trigger,
  .site-header .header-inner > .apr-compare-trigger,
  .site-header .header-inner > .apr-cart-trigger{margin-left:16px;}
  .site-header .header-inner{padding:14px 16px;}
}
/* Very small phones (up to 380px): smaller logo, tighter spacing */
@media (max-width:380px){
  .site-header .custom-logo, .site-header img.custom-logo{width:42px;height:42px;}
  .site-header .header-inner > .apr-header-search{margin-left:12px !important;}
  .site-header .header-inner > .apr-wishlist-trigger,
  .site-header .header-inner > .apr-compare-trigger,
  .site-header .header-inner > .apr-cart-trigger{margin-left:12px;}
  .site-header .header-inner{padding:12px 12px;}
}
/* 993-1024px (e.g. iPad landscape): the theme switches to the menu button only at 992px, but this compact header applies up to 1024px, so the full menu overlapped the centred logo. Use the menu button up to 1024px too. */
@media (min-width:992px) and (max-width:1024px){
  header.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:flex !important;}
  header.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation{display:none !important;}
}
/* 1025-1199px (small laptops): the full menu wraps onto two lines (LV up to ~1080px, EN up to ~1170px). Use the same compact header with the menu button. */
/* (2026-10-14: up to 1249px instead of 1199px, because the language flag (section 15) takes ~48px and the English menu then wrapped at 1200-1249px) */
@media (min-width:1025px) and (max-width:1249.98px){
  header.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) .site-navigation-toggle-holder{display:flex !important;order:-1;margin:0 auto 0 0 !important;padding:0;}
  header.site-header.menu-dropdown-tablet:not(.menu-layout-dropdown) nav.site-navigation{display:none !important;}
  header.site-header .header-inner{position:relative;justify-content:flex-start !important;gap:0 14px;padding:14px 20px !important;min-height:76px;}
  header.site-header .site-branding{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;margin:0;}
  html header.site-header .site-logo img.custom-logo{width:60px !important;height:60px !important;}
  header.site-header .site-navigation-dropdown{position:absolute;top:100%;left:0;right:0;z-index:10;}
  header.site-header .header-inner > *:not(.site-branding):not(.site-navigation-toggle-holder):not(.site-navigation-dropdown):not(.site-navigation){position:relative;z-index:3;}
  header.site-header .header-inner > .apr-header-search{margin-left:auto !important;z-index:20 !important;}
}
/* Footer on phones and tablets (up to 1048px): everything centred, menu under the logo */
@media (max-width:1048.98px){
  .site-footer .footer-inner{flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:44px 20px 20px;gap:22px;}
  .site-footer .site-branding{align-items:center;text-align:center;}
  .site-footer .site-logo, .site-footer .custom-logo-link{display:flex !important;justify-content:center;width:100%;}
  .site-footer img.custom-logo{margin-left:auto !important;margin-right:auto !important;}
  .site-footer .site-description{text-align:center;}
  /* menu row centred under the logo (not stuck to the left edge) */
  .site-footer nav.site-navigation{width:100%;justify-content:center;}
  .site-footer nav.site-navigation ul.menu{justify-content:center;gap:14px 22px;}
  /* copyright line centred too */
  .site-footer .copyright{text-align:center;margin:8px 0 0;width:100%;}
  .site-footer .footer-inner .copyright{justify-content:center;}
}
/* Footer 1049-1199px: slightly tighter menu spacing so the menu always fits to the right of the logo (in both languages) instead of dropping onto its own row */
@media (min-width:1049px) and (max-width:1199.98px){
  .site-footer .footer-inner{column-gap:24px;}
  .site-footer nav.site-navigation ul.menu{gap:8px;}
}
/* 1025-1320px: full menu fits on one line (tighter link padding) */
@media (min-width:1025px) and (max-width:1320px){
  .site-header .header-inner{flex-wrap:nowrap;gap:0 20px;padding-left:24px;padding-right:24px;}
  .site-header .site-navigation .menu{gap:0;}
  .site-header .site-navigation .menu > li > a{padding-left:10px !important;padding-right:10px !important;}
}


/* ==========================================================================
   2. Link and button colours (was apdrukas-critical-css.php)
   The theme's reset.css makes links and buttons pink-red (#c36). These rules
   load in the page head, so the pink never flashes while the page opens.
   ========================================================================== */

/* site ink colours */
:root{--apr-ink:#33312B;--apr-ink-soft:#5c594f;}
/* links: dark ink, softer on hover */
a{color:var(--apr-ink);}
a:hover,a:focus{color:var(--apr-ink-soft);}
/* plain buttons: ink outline, filled dark on hover */
[type=button],[type=submit],button{border-color:var(--apr-ink);color:var(--apr-ink);}
[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{background-color:var(--apr-ink);color:#fff;}


/* ==========================================================================
   3. Footer tagline wrapping (was Customizer > Additional CSS)
   ========================================================================== */

/* tagline breaks into two balanced lines (from 1049px; below that the footer is centred and the tagline stays on one line) */
.site-footer .site-description {
	text-wrap: balance;
}
@media (min-width: 1049px) {
	.site-footer .site-description {
		max-width: 16em;
	}
}


/* ==========================================================================
   4. Header & footer look (was apdrukas-header-sage.php)
   Sage tones: --apr-sage #66735A (main), --apr-sage-dark #4F5B45,
   --apr-sage-light #A7B697, --apr-sage-bg #EEF1E8.
   ========================================================================== */

/* sage colour variables */
:root{--apr-sage:#66735A;--apr-sage-dark:#4F5B45;--apr-sage-light:#A7B697;--apr-sage-bg:#EEF1E8;--apr-sage-line:#DCE2D2;}
/* white header with a thin bottom line */
header.site-header{background:#FFFFFF!important;border-bottom:1px solid #ECE8DF;padding:14px 0!important;}
/* bigger logo (76px) */
header.site-header .site-logo img.custom-logo{width:76px!important;height:76px!important;max-width:none!important;max-height:none!important;object-fit:contain;}
/* menu links: 14px, semi-bold, spaced capitals, dark sage */
header.site-header .site-navigation .menu > li > a{font-size:14px!important;font-weight:600!important;letter-spacing:.07em!important;color:var(--apr-sage-dark)!important;text-decoration:none!important;position:relative;padding-bottom:6px!important;border-bottom:0!important;transition:color .2s ease;}
/* menu underline that slides in on hover / current page */
header.site-header .site-navigation .menu > li > a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--apr-sage);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1);}
header.site-header .site-navigation .menu > li > a:hover{color:var(--apr-sage)!important;}
header.site-header .site-navigation .menu > li > a:hover::after,
header.site-header .site-navigation .menu > li.current-menu-item > a::after,
header.site-header .site-navigation .menu > li.current-menu-ancestor > a::after{transform:scaleX(1);}
header.site-header .site-navigation .menu > li.current-menu-item > a,
header.site-header .site-navigation .menu > li.current-menu-ancestor > a{color:var(--apr-sage-dark)!important;}
/* header icons turn sage on hover */
header.site-header .apr-header-search-toggle:hover,header.site-header .apr-wishlist-trigger:hover,header.site-header .apr-compare-trigger:hover,header.site-header .apr-cart-trigger:hover{color:var(--apr-sage)!important;}
/* sage count bubbles on wishlist / compare / cart */
header.site-header .apr-wishlist-count,header.site-header .apr-compare-count,header.site-header .apr-cart-count{background:var(--apr-sage)!important;color:#FFFFFF!important;}
/* header uses the full screen width */
header.site-header .header-inner{max-width:none!important;width:100%!important;padding:0 40px!important;box-sizing:border-box;}
/* desktop (1025px+): logo left, menu centred, icons right */
@media(min-width:1025px){header.site-header .header-inner{justify-content:flex-start!important;column-gap:0!important;}header.site-header nav.site-navigation{margin:0 32px!important;}header.site-header .apr-header-search,header.site-header .apr-wishlist-trigger,header.site-header .apr-compare-trigger{margin-left:0!important;margin-right:26px!important;}header.site-header .apr-cart-trigger{margin-left:0!important;}header.site-header nav.site-navigation{flex:1 1 auto!important;display:flex!important;justify-content:center!important;}}
/* phones: smaller side padding */
@media(max-width:600px){header.site-header .header-inner{padding:0 16px!important;}}
/* desktop: menu on one line with even gaps */
@media(min-width:1025px){header.site-header .header-inner{flex-wrap:nowrap!important;}header.site-header .site-navigation .menu{gap:22px!important;}header.site-header .site-navigation .menu > li > a{padding:8px 4px 6px!important;}header.site-header .site-navigation .menu > li > a::after{left:4px;right:4px;}}
/* 1025-1300px: slightly smaller menu text so it fits */
@media(min-width:1025px) and (max-width:1300px){header.site-header .site-navigation .menu{gap:12px!important;}header.site-header .site-navigation .menu > li > a{font-size:13px!important;letter-spacing:.04em!important;}}
/* tablets/phones: 60px logo */
@media(max-width:1024px){header.site-header .site-logo img.custom-logo{width:60px!important;height:60px!important;}}
/* no extra underline on menu labels */
header.site-header .site-navigation .apr-nav-label::after,header.site-header .site-navigation .apr-nav-label::before{display:none!important;}
/* dark green footer */
footer.site-footer{background:#252D25!important;border-top:1px solid rgba(241,238,227,.08)!important;color:#C5CBB6!important;}
footer.site-footer *{border-color:rgba(241,238,227,.12)!important;}
/* footer text: light sage-grey */
footer.site-footer,footer.site-footer p,footer.site-footer .site-description,footer.site-footer .copyright,footer.site-footer .copyright p{color:#C5CBB6!important;}
/* footer links: cream, light sage on hover */
footer.site-footer a,footer.site-footer .menu a,footer.site-footer .apr-nav-label{color:#F1EEE3!important;text-decoration:none!important;}
footer.site-footer a:hover,footer.site-footer a:hover .apr-nav-label{color:var(--apr-sage-light)!important;}
footer.site-footer .apr-nav-label::after{background:var(--apr-sage-light)!important;}
/* footer tagline: cream, 15px */
footer.site-footer .site-branding .site-description{color:#F1EEE3!important;font-size:15px!important;font-weight:500!important;line-height:1.5!important;letter-spacing:.01em;margin-top:10px!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* footer copyright: 13px */
footer.site-footer .copyright p{color:#D9DDCC!important;font-size:13px!important;}
/* "Par mums" team photos: round, centred */
.apr-team{margin:0 auto;text-align:center}.apr-team img{width:160px;height:160px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 16px;}.apr-team figcaption{font-family:'Public Sans',sans-serif;font-style:normal;font-size:18px;font-weight:600;color:#33312B;line-height:1.3}@media(max-width:767px){.apr-team img{width:132px;height:132px}}
/* all headings in Manrope */
h1,h2,h3,h4,.elementor-heading-title,.entry-title,.page-title,.product_title,.woocommerce-loop-product__title{font-family:'Manrope',sans-serif!important;}
/* h1/h2: extra bold, slightly tight */
h1,h2,.elementor-heading-title,.page-title,.product_title{font-weight:800!important;letter-spacing:-.02em;}
/* h3/h4: bold */
h3,h4{font-weight:700!important;letter-spacing:-.01em;}
.apr-ec-title,.apr-cs-label{font-family:'Manrope',sans-serif!important;font-weight:700!important;letter-spacing:-.01em;}


/* ==========================================================================
   5. Header icon tooltips (was apdrukas-header-tooltips.php)
   Names under the header icons on mouse hover (Meklēt / Vēlmju saraksts /
   Salīdzināt / Grozs). Mouse devices only, never on phones.
   The labels are added by apdrukaspreces-custom.js.
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .site-header [data-apr-tip]{position:relative;}
  /* the label box */
  .site-header [data-apr-tip]::after{
    content:attr(data-apr-tip);
    position:absolute;top:calc(100% + 10px);left:50%;
    transform:translate(-50%,-4px);
    background:#33312B;color:#fff;
    font:500 12px/1 "Public Sans",sans-serif;letter-spacing:.02em;text-transform:none;
    white-space:nowrap;padding:7px 10px;border-radius:0;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .15s ease,transform .15s ease,visibility .15s;
    z-index:10050;
  }
  /* the small arrow above the label */
  .site-header [data-apr-tip]::before{
    content:"";position:absolute;top:calc(100% + 5px);left:50%;
    transform:translate(-50%,-4px);
    border:5px solid transparent;border-top:0;border-bottom-color:#33312B;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .15s ease,transform .15s ease,visibility .15s;
    z-index:10050;
  }
  /* show on hover / keyboard focus */
  .site-header [data-apr-tip]:hover::after,.site-header [data-apr-tip]:hover::before,
  .site-header [data-apr-tip]:focus-visible::after,.site-header [data-apr-tip]:focus-visible::before{
    opacity:1;visibility:visible;transform:translate(-50%,0);
  }
  /* last icon (cart) at the right edge: label right-aligned so it stays on screen */
  .site-header #apr-cart-trigger[data-apr-tip]::after{left:auto;right:-4px;transform:translateY(-4px);}
  .site-header #apr-cart-trigger[data-apr-tip]:hover::after,
  .site-header #apr-cart-trigger[data-apr-tip]:focus-visible::after{transform:translateY(0);}
  /* no label while the search panel is open */
  .site-header #apr-header-search-toggle[aria-expanded="true"]::after,
  .site-header #apr-header-search-toggle[aria-expanded="true"]::before{display:none;}
}


/* ==========================================================================
   6. Thank-you page after a request (was apdrukas-thankyou.php)
   Only affects the order-received page (.woocommerce-order-received).
   ========================================================================== */

/* page spacing */
.woocommerce-order-received .site-main{padding-top:48px;padding-bottom:64px}
.woocommerce-order-received .page-header{margin:0 0 20px}
.woocommerce-order-received .page-header .entry-title{margin:0;line-height:1.1}
/* "thank you" sentence */
.woocommerce-order-received .woocommerce-thankyou-order-received{font-size:18px;line-height:1.6;max-width:760px;margin:0 0 40px}
/* request number / date / e-mail as a tidy grid between two lines */
.woocommerce-order-received ul.woocommerce-order-overview{list-style:none;margin:0 0 64px!important;padding:28px 0!important;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px 40px;border-top:1px solid rgba(51,49,43,.18);border-bottom:1px solid rgba(51,49,43,.18)}
.woocommerce-order-received ul.woocommerce-order-overview::before,.woocommerce-order-received ul.woocommerce-order-overview::after{display:none!important}
.woocommerce-order-received ul.woocommerce-order-overview li{float:none!important;margin:0!important;padding:0!important;border:0!important;font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;color:rgba(51,49,43,.65)}
.woocommerce-order-received ul.woocommerce-order-overview li strong{display:block;margin-top:8px;font-size:17px;letter-spacing:0;text-transform:none;color:#33312B;word-break:break-word}
/* details tables: more breathing room */
.woocommerce-order-received .woocommerce-order-details,.woocommerce-order-received .woocommerce-customer-details{margin-bottom:56px}
.woocommerce-order-received .woocommerce-order-details__title,.woocommerce-order-received .woocommerce-column__title{margin:0 0 20px}
.woocommerce-order-received table.order_details td,.woocommerce-order-received table.order_details th{padding:16px 18px}
.woocommerce-order-received table.order_details .wc-item-meta{margin:10px 0 0;padding-left:0}
.woocommerce-order-received table.order_details .wc-item-meta li{margin:0 0 4px}
/* phones: smaller spacing, two-column overview */
@media (max-width:767px){.woocommerce-order-received .site-main{padding-top:28px}.woocommerce-order-received .woocommerce-thankyou-order-received{font-size:16px;margin-bottom:28px}.woocommerce-order-received ul.woocommerce-order-overview{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:44px!important}}


/* ==========================================================================
   7. Comparison page layout (was apdrukas-compare-layout.php)
   Every rule is scoped to the comparison page (body.page-id-7433, LV + /en/).
   If that page is ever re-created with a new ID, update "page-id-7433" here.
   ========================================================================== */

/* wider page (1320px instead of the theme's 1140px) */
body.page-id-7433 .site-main{max-width:1320px!important;width:100%!important;padding-left:20px!important;padding-right:20px!important;box-sizing:border-box!important;}
body.page-id-7433 .apr-compare-wrap{max-width:none;padding:24px 0 40px;}
body.page-id-7433 .apr-compare-scroll{border:1px solid var(--apr-hairline,#DDD8CB)!important;max-width:100%;box-sizing:border-box;}
/* table: products share the full width, thin lines between cells */
body.page-id-7433 .apr-compare-table{width:100%;table-layout:fixed;border-collapse:separate!important;border-spacing:0!important;border:0!important;}
body.page-id-7433 .apr-compare-table th,body.page-id-7433 .apr-compare-table td{border:0!important;border-bottom:1px solid var(--apr-hairline,#DDD8CB)!important;}
body.page-id-7433 .apr-compare-table td{border-left:1px solid var(--apr-hairline,#DDD8CB)!important;width:auto!important;min-width:0!important;}
body.page-id-7433 .apr-compare-table tr.apr-compare-row-remove > *,body.page-id-7433 .apr-compare-table tr.apr-compare-row-actions > *{border-bottom:0!important;}
/* label column: 150px, solid background + shadow so scrolled products don't show through */
body.page-id-7433 .apr-compare-table th{width:150px!important;min-width:0!important;}
body.page-id-7433 .apr-compare-table tr > th{background:#fff!important;z-index:3;box-shadow:6px 0 8px -6px rgba(0,0,0,.15);}
body.page-id-7433 .apr-compare-table tr:nth-child(odd) > th{background:#f6f6f6!important;}
/* minimum table width per number of products (1-8), so columns never get too narrow */
body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(2)){min-width:330px;}
body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(3)){min-width:510px;}
body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(4)){min-width:690px;}
body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(5)){min-width:870px;}
body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(6)){min-width:1050px;}
body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(7)){min-width:1230px;}
body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(8)){min-width:1410px;}
body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(9)){min-width:1590px;}
/* only 1 product: centre the column's content */
body.page-id-7433 .apr-compare-table:not(:has(.apr-compare-row--title td:nth-child(3))) td:not(.x){text-align:center;}
body.page-id-7433 .apr-compare-table:not(:has(.apr-compare-row--title td:nth-child(3))) .apr-compare-row-remove td{text-align:right;}
body.page-id-7433 .apr-compare-table:not(:has(.apr-compare-row--title td:nth-child(3))) .apr-compare-row--image img{margin-left:auto;margin-right:auto;}
body.page-id-7433 .apr-compare-table:not(:has(.apr-compare-row--title td:nth-child(3))) .apr-compare-cta,body.page-id-7433 .apr-compare-table:not(:has(.apr-compare-row--title td:nth-child(3))) .apr-compare-wishlist-btn{max-width:320px;margin-left:auto;margin-right:auto;box-sizing:border-box;}
/* phones (up to 640px): narrower label column and cells */
@media (max-width:640px){
    body.page-id-7433 .apr-compare-table th{width:104px!important;font-size:12px;padding:12px 10px;}
    body.page-id-7433 .apr-compare-table td{padding:12px 10px;}
    body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(3)){min-width:424px;}
    body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(4)){min-width:584px;}
    body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(5)){min-width:744px;}
    body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(6)){min-width:904px;}
    body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(7)){min-width:1064px;}
    body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(8)){min-width:1224px;}
    body.page-id-7433 .apr-compare-table:has(.apr-compare-row--title td:nth-child(9)){min-width:1384px;}
}


/* ==========================================================================
   8. Product page title size on phones and tablets (added 2026-10-13)
   Desktop (1200px+) keeps the theme's 2.5rem (40px).
   ========================================================================== */

/* phones (up to 767px): 1.5rem / 24px */
@media (max-width:767.98px){
  .woocommerce div.product .product_title{font-size:1.5rem;line-height:1.25;}
}
/* tablets + small laptops (768-1199px, the product column is only 384-600px wide): 1.75rem / 28px */
@media (min-width:768px) and (max-width:1199.98px){
  .woocommerce div.product .product_title{font-size:1.75rem;line-height:1.25;}
}


/* ==========================================================================
   9. Product page, single-column layout (up to 768px, added 2026-10-13)
   Up to 768px the photo sits on top and the details below it. Here the
   price sits right under the title (both left), then the centred colour and
   printing pickers, quantity + Add to cart, minimum-order note, SKU, and the
   compare + wishlist buttons last. Description text stays left. The "With printing" options box stays left-aligned inside (it is a form).
   The Category line is hidden on all screen sizes (breadcrumbs show it already).
   ========================================================================== */

/* all sizes: hide "Category: ..." under the product, keep the SKU */
.woocommerce div.product .product_meta .posted_in{display:none;}

/* all sizes, products with variations: the cart block was pushed 16px right of the title by an empty WooCommerce clearfix element; remove it */
.woocommerce div.product form.variations_form::before{display:none;}

@media (max-width:768px){
  /* order of the details: title, price, (short description), colour / printing / quantity + Add to cart / minimum-order note, SKU, then compare + wishlist as secondary actions at the end */
  .woocommerce div.product div.summary{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;}
  .woocommerce div.product div.summary > *{order:3;flex:0 0 100%;}
  .woocommerce div.product div.summary > .product_title{order:1;}
  .woocommerce div.product div.summary > .product_meta{order:4;margin-bottom:20px;}
  /* compare + wishlist: centred pair below the SKU line (narrower than 322px EN / 466px LV they stack full width, see apdrukas-compare.php) */
  .woocommerce div.product div.summary > .apr-compare-btn-single,
  .woocommerce div.product div.summary > .apr-wishlist-heart-single{order:5;flex:0 0 auto;}
  /* price + "incl. VAT" directly under the title, left-aligned with it */
  .woocommerce div.product div.summary > p.price{order:2;text-align:left;}
  /* price amount semi-bold so it stands out under the title ("incl. VAT" stays normal) */
  .woocommerce div.product div.summary > p.price .woocommerce-Price-amount{font-weight:600;}
  /* chosen variation's price / stock centred (products with variations) */
  .woocommerce div.product .single_variation{text-align:center;}
  /* "Colour" label and swatches centred */
  .woocommerce div.product .apr-product-colors-label{text-align:center;}
  .woocommerce div.product .apr-color-grid{justify-content:center;}
  /* "Printing" label centred, the two options side by side on one line */
  .woocommerce div.product .apr-personalization-label{text-align:center;}
  .woocommerce div.product .apr-apdruka-toggle{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:28px;}
  /* quantity + Add to cart centred (simple products) */
  .woocommerce div.product form.cart{justify-content:center;margin-bottom:8px;}
  /* empty WooCommerce clearfix element sat next to Add to cart and pushed the row 8px off centre */
  .woocommerce div.product form.cart::after{display:none;}
  /* products with variations: same layout as simple products (their cart block is built differently) */
  .woocommerce div.product form.variations_form .single_variation_wrap{flex:1 1 100%;}
  .woocommerce div.product .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:16px;}
  .woocommerce div.product .woocommerce-variation-add-to-cart > :not(.quantity):not(.single_add_to_cart_button){flex:0 0 100%;}
  .woocommerce div.product .woocommerce-variation-add-to-cart .quantity,
  .woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button{float:none;}
  /* "Minimum order quantity" moved under Add to cart, centred, small gap to the SKU line */
  .woocommerce div.product .apr-min-qty-note{order:10;text-align:center;margin-bottom:0;}
  /* SKU line centred under it */
  .woocommerce div.product .product_meta{text-align:center;}
}


/* ==========================================================================
   10. Product page tabs as foldable sections below 1200px (added 2026-10-13)
   Below 1200px the five tab titles (Description, Technical information...)
   wrapped into ragged rows. Here each title becomes a full-width row with an
   arrow, and its content opens right under it. WooCommerce's own tab script
   still does the switching (one section open at a time). 1200px+ keeps the
   normal tabs (their look is in apdrukas-product-page.php).
   The scroll fix for iPhones is in apdrukaspreces-custom.js section 2.
   ========================================================================== */

/* all sizes: hide WooCommerce's leftover small corner marks next to the tab titles */
.woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li::after{display:none!important;}

@media (max-width:1199.98px){
  /* titles and contents in one column, thin line under the last row, room before "Related products" */
  .woocommerce div.product .woocommerce-tabs.wc-tabs-wrapper{display:flex;flex-direction:column;border-bottom:1px solid var(--apr-hairline,#DDD8CB);margin-bottom:56px;}
  /* the title list no longer forms its own row, so each title can sit above its own content */
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs{display:contents;}
  /* hide WooCommerce's line under the tab titles: in this layout it slid down to the bottom of the product and showed up under "Related products" */
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs::before{display:none;}
  /* no sliding underline in this layout */
  .woocommerce div.product .woocommerce-tabs .apr-tab-indicator{display:none;}
  /* each title: full-width row with a thin line above it */
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li{padding:0!important;margin:0!important;border-top:1px solid var(--apr-hairline,#DDD8CB)!important;}
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px 20px 0;transform:none!important;box-shadow:none!important;}
  /* arrow on the right: points down when closed, up when open */
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li a::after{content:"";flex:0 0 auto;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s ease;}
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs li.active a::after{transform:translateY(2px) rotate(-135deg);}
  /* open content: right under its title, full width */
  .woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel{padding:0 0 24px!important;max-width:none;}
  /* the small heading inside each section repeats the row title: hide it */
  .woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child{display:none;}
  .woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child + *{margin-top:0;}
  /* put each content block right after its own title (title 1, content 1, title 2, content 2...) */
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li:nth-child(1){order:1;}  .woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel:nth-child(2){order:2;}
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li:nth-child(2){order:3;}  .woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel:nth-child(3){order:4;}
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li:nth-child(3){order:5;}  .woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel:nth-child(4){order:6;}
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li:nth-child(4){order:7;}  .woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel:nth-child(5){order:8;}
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li:nth-child(5){order:9;}  .woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel:nth-child(6){order:10;}
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li:nth-child(6){order:11;}  .woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel:nth-child(7){order:12;}
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li:nth-child(7){order:13;}  .woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel:nth-child(8){order:14;}
  .woocommerce div.product .woocommerce-tabs ul.tabs.wc-tabs > li:nth-child(8){order:15;}  .woocommerce div.product .woocommerce-tabs > .woocommerce-Tabs-panel:nth-child(9){order:16;}
}


/* ==========================================================================
   11. Product page "Related products": 2 columns below 1200px (added 2026-10-13)
   The grid used to pick its own column count (each card at least 240px), which
   gave 1 column at 576-767px (the theme caps the page at 500px there) and 3
   columns at 992-1199px (4 products = 3 + 1 lonely card). There are always 4
   related products, so: 2 columns (2 + 2) everywhere below 1200px, 4 from 1200px.
   Phones get the same tighter spacing and title size as the shop pages
   (apdrukas-shop-filters.php). Also applies to "You may also like" (upsells).
   ========================================================================== */

@media (max-width:1199.98px){
  /* always 2 equal columns */
  .woocommerce.woocommerce .related ul.products.products,
  .woocommerce.woocommerce .upsells ul.products.products{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:767.98px){
  /* phones: tighter gaps so the two cards have room (same as the shop pages) */
  .woocommerce.woocommerce .related ul.products.products,
  .woocommerce.woocommerce .upsells ul.products.products{gap:28px 12px !important;}
  /* phones: slightly smaller product names on the cards (same as the shop pages) */
  .woocommerce.woocommerce .related ul.products li.product .woocommerce-loop-product__title,
  .woocommerce.woocommerce .upsells ul.products li.product .woocommerce-loop-product__title{font-size:14px !important;line-height:1.3 !important;}
}


/* ==========================================================================
   12. Kontakti page map: picture of the map until cookies are accepted (added 2026-10-14)
   The [apr_map] shortcode (apdrukas-pages.php) shows a picture of the map that
   opens Google Maps in a new tab. The real Google map loads only after the
   visitor clicks "Piekritu" on the cookie banner (apdrukaspreces-custom.js section 3).
   The address card and the "Map data" line are page text, so they are never cut off.
   ========================================================================== */

/* the picture area: same size as the real map, whole area is a link */
.apr-ct-map .apr-map-ph{position:relative;display:block;overflow:hidden;background:#e5efe0;line-height:normal;text-decoration:none !important;cursor:pointer;}
/* hidden while the real map is shown */
.apr-ct-map .apr-map-ph[hidden]{display:none !important;}
/* the map picture fills the area, Riga marker stays in the middle (like the real map) */
.apr-ct-map .apr-map-ph picture{display:block;width:100%;height:100%;}
.apr-ct-map .apr-map-ph img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;}
/* address card in the top-left corner (looks like Google's own card) */
.apr-ct-map .apr-map-ph__card{position:absolute;top:10px;left:10px;max-width:calc(100% - 20px);box-sizing:border-box;width:250px;padding:10px 12px 12px;background:#fff;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.3);font-family:Roboto,Arial,sans-serif;text-align:left;}
.apr-ct-map .apr-map-ph__title{display:block;font-size:14px;font-weight:500;line-height:1.3;color:#202124 !important;}
.apr-ct-map .apr-map-ph__addr{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:#5f6368 !important;}
/* blue "open in Google Maps" button inside the card */
.apr-ct-map .apr-map-ph__btn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 14px;border-radius:16px;background:#1a73e8;color:#fff !important;font-size:13px;font-weight:500;line-height:1.2;transition:background .2s ease;}
.apr-ct-map .apr-map-ph:hover .apr-map-ph__btn,.apr-ct-map .apr-map-ph:focus-visible .apr-map-ph__btn{background:#1765cc;}
.apr-ct-map .apr-map-ph:focus-visible{outline:2px solid #1a73e8;outline-offset:2px;}
/* Google's "Map data" line in the bottom-right corner (required by Google) */
.apr-ct-map .apr-map-ph__attr{position:absolute;right:0;bottom:0;padding:0 6px;background:rgba(245,245,245,.8);font:10px/16px Roboto,Arial,sans-serif;color:#444 !important;}

/* ===== Front page hero: scale proportionally between 821px and 1919px (2026-10-14) =====
   Below 1920px the whole hero (height, photo, texts, buttons) shrinks with the screen width,
   so it looks exactly like the full-width version, only smaller. Phones (<=820px) and 1920px+ are unchanged. */
@media (min-width:821px) and (max-width:1919px){
/* Hero height follows the width, so the photo keeps the same position and is never covered */
.apr-hero{height:38vw!important;min-height:0!important;}
/* Text block side padding scales */
.apr-hero__content{padding:0 2vw 0 5vw;max-width:none;}
/* Small heading "Apdrukas preces ar Jūsu zīmolu" and its line */
.apr-hero__eyebrow{font-size:max(10px,.625vw);margin-bottom:1.46vw;gap:.73vw;}
.apr-hero__eyebrow:before{width:1.9vw;}
/* Main heading */
.apr-hero .apr-hero__title{font-size:3.9vw!important;}
/* Description paragraph (never below 12px for readability) */
.apr-hero__text{font-size:max(12px,.885vw);max-width:23vw;margin-top:1.46vw;}
/* Button row, "Apdrukas preces" button with arrow, "Apskatīt e-katalogus" link */
.apr-hero__ctas{margin-top:2.08vw;gap:1.46vw;}
.apr-hero a.apr-hero__btn{font-size:max(11px,.73vw);padding:.94vw 1.56vw;gap:.73vw;}
.apr-hero__btn svg{width:.94vw;height:.94vw;min-width:12px;min-height:12px;}
.apr-hero a.apr-hero__link{font-size:max(11px,.73vw);}
/* "Ritiniet" scroll hint */
.apr-hero__scroll{bottom:1.67vw;left:5vw;font-size:max(9px,.57vw);gap:.63vw;}
.apr-hero__scroll span{height:2.3vw;}
}
/* Below 1100px hide the "Ritiniet" scroll hint so it doesn't run into the buttons */
@media (min-width:821px) and (max-width:1099px){.apr-hero__scroll{display:none;}}
/* ===== Front page category slider "Populārākās kategorijas" (2026-10-14) ===== */
/* Heading lines up with the tiles (same 40px side padding as the product rows below) */
.apr-sec-head:has(+ .apr-cs-section) .apr-sec-head__in{max-width:none;padding:0 40px;}
/* Room under the tiles for the arrows + progress line */
.apr-cs-wrap{padding:0 40px 76px;}
.apr-cs-section{padding-bottom:56px;}
/* Track is the size reference: tiles are always exactly 1/4 of it (1/2 below 768px) */
.apr-cs-track{container-type:inline-size;}
.apr-cs-tile{--t:calc((100cqw - 6px) / 4);flex:0 0 var(--t);height:calc(var(--t) * 4 / 3);padding:calc(var(--t) * .057);}
@media (max-width:767px){
.apr-cs-wrap{padding:0 16px 68px;}
.apr-sec-head:has(+ .apr-cs-section) .apr-sec-head__in{padding:0 16px;}
.apr-cs-tile{--t:calc((100cqw - 2px) / 2);}
}
/* Tile text scales with the tile (same proportions as the original 420px tile) */
.apr-cs-label{font-size:max(15px, calc(var(--t) * .0667));}
.apr-cs-cta{font-size:max(10px, calc(var(--t) * .0286));margin-top:calc(var(--t) * .024);}
/* Arrow buttons: round outline buttons under the slider, bottom-right, never covering the tiles */
.apr-cs-wrap .apr-cs-nav{display:flex;position:absolute;top:auto;bottom:0;transform:none;width:48px;height:48px;padding:0;margin:0;border:1px solid #33312B;border-radius:50%;background:transparent;color:#33312B;font-size:0;align-items:center;justify-content:center;cursor:pointer;transition:background .25s ease,color .25s ease,opacity .25s ease;}
.apr-cs-wrap .apr-cs-nav::before{font-family:'Public Sans',sans-serif;font-size:18px;line-height:1;}
.apr-cs-wrap .apr-cs-prev{left:auto;right:100px;}
.apr-cs-wrap .apr-cs-prev::before{content:'\2190';}
.apr-cs-wrap .apr-cs-next{right:40px;}
.apr-cs-wrap .apr-cs-next::before{content:'\2192';}
/* Keep the theme's global button hover/focus colours off these arrows */
.apr-cs-wrap .apr-cs-nav:focus,.apr-cs-wrap .apr-cs-nav:disabled{background:transparent;color:#33312B;}
.apr-cs-wrap .apr-cs-nav:hover:not(:disabled){background:#33312B;color:#FBF9F4;}
.apr-cs-wrap .apr-cs-nav:disabled{opacity:.3;cursor:default;}
@media (max-width:767px){
.apr-cs-wrap .apr-cs-nav{width:44px;height:44px;}
.apr-cs-wrap .apr-cs-prev{right:72px;}
.apr-cs-wrap .apr-cs-next{right:16px;}
}
/* Progress line left of the arrows: shows where in the list you are (position set by home.js) */
.apr-cs-wrap::before,.apr-cs-wrap::after{content:'';position:absolute;bottom:23px;height:1px;}
.apr-cs-wrap::before{left:40px;right:180px;background:#DDD8CB;}
.apr-cs-wrap::after{--bar:calc(100% - 220px);left:calc(40px + var(--bar) * var(--o, 0));width:calc(var(--bar) * var(--w, .5));height:2px;bottom:22.5px;background:#33312B;transition:left .3s ease;}
@media (max-width:767px){
.apr-cs-wrap::before{left:16px;right:140px;bottom:21px;}
.apr-cs-wrap::after{--bar:calc(100% - 156px);left:calc(16px + var(--bar) * var(--o, 0));bottom:20.5px;}
}
/* Category slider: no vertical scrolling inside the row. The hovered tile grows slightly (scale 1.025), which made the row a few px scrollable up/down and swallowed the mouse wheel instead of scrolling the page. The 10px padding (cancelled by the negative margin) gives the grown tile room so it isn't clipped. */
.apr-cs-track{overflow-y:hidden;padding-block:10px;margin-block:-10px;}

/* ===== Front page: centred content with breathing room (2026-10-14) =====
   From 768px up, the content of the category slider, new arrivals, product rows and reviews is capped at 1440px and centred;
   section backgrounds stay full width. Side margins scale with the screen (24px to 96px, same as the hero text). Phones unchanged. */
@media (min-width:768px){
body.home{--apr-g:clamp(24px,5vw,96px);--apr-max:1440px;}
.home .apr-cs-wrap,.home .apr-na,.home .apr-hp-wrap,.home .apr-rv-wrap,.home .apr-sec-head:has(+ .apr-cs-section) .apr-sec-head__in{max-width:calc(var(--apr-max) + 2 * var(--apr-g));margin-left:auto;margin-right:auto;padding-left:var(--apr-g);padding-right:var(--apr-g);box-sizing:border-box;}
/* Category slider arrows + progress line follow the new side margins */
.home .apr-cs-wrap .apr-cs-next{right:var(--apr-g);}
.home .apr-cs-wrap .apr-cs-prev{right:calc(var(--apr-g) + 60px);}
.home .apr-cs-wrap::before{left:var(--apr-g);right:calc(var(--apr-g) + 140px);}
.home .apr-cs-wrap::after{--bar:calc(100% - 2 * var(--apr-g) - 140px);left:calc(var(--apr-g) + var(--bar) * var(--o, 0));}
}
/* ===== Link underlines (2026-10-14) =====
   The Hello theme's theme.css underlines EVERY link inside page content (.page-content a). That put underlines on product names,
   buttons, "Skatīt visu →" etc. Cancel it, then keep the underline only for links inside ordinary text paragraphs and lists
   (terms, privacy, contacts, blog text). :where() keeps that rule weak, so components with their own link styling still win. */
.page-content a,.comments-area a{text-decoration:none;}
.page-content :where(p.wp-block-paragraph,p:not([class]),li.wp-block-list-item,li:not([class])) a:where(:not([class])){text-decoration:underline;}
/* Front page product cards: centre the text in the full-width "Skatīt preci →" button (2026-10-14) */
.apr-hp-btn{text-align:center;}

/* ===== Front page sliders, round 2 (2026-10-14) ===== */
/* Category slider arrows: square like the product-row arrows (only the shape changes) */
.apr-cs-wrap .apr-cs-nav{border-radius:0;}
/* Product rows: exactly 2 whole cards at 600px and below (was 2 and a sliver of a 3rd); 601px+ already shows 3/4/5/6 whole cards */
@media (max-width:600px){.apr-hp-wrap .apr-hp-grid{grid-auto-columns:calc((100% - 14px) / 2);}}
/* Reviews: one whole card on phones instead of 86% + a sliver of the next */
@media (max-width:767px){.apr-rv-wrap .apr-rv-track{grid-auto-columns:100%;}}
/* ===== Category slider arrows = product-row arrows (2026-10-14) =====
   Same 42px square (36px at 600px and below), same thin chevron icon (identical SVG path, 18px, stroke 1.6),
   same 8px gap, same hover (dark fill, white icon) and same faded disabled state as the .apr-hp-nav buttons. */
.apr-cs-wrap .apr-cs-nav{width:42px;height:42px;transition:background .2s,color .2s,opacity .2s;}
.apr-cs-wrap .apr-cs-nav::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:var(--apr-chev) center/18px 18px no-repeat;mask:var(--apr-chev) center/18px 18px no-repeat;}
.apr-cs-wrap .apr-cs-prev::before{content:'';--apr-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");}
.apr-cs-wrap .apr-cs-next::before{content:'';--apr-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");}
.apr-cs-wrap .apr-cs-nav:hover:not(:disabled){background:#33312B;color:#fff;}
.apr-cs-wrap .apr-cs-nav:disabled{opacity:.25;}
/* Positions for the smaller buttons (8px gap between them) + progress line centred on the buttons */
.apr-cs-wrap .apr-cs-prev{right:90px;}
@media (min-width:768px){.home .apr-cs-wrap .apr-cs-prev{right:calc(var(--apr-g) + 50px);}}
.apr-cs-wrap::before{bottom:21px;}
.apr-cs-wrap::after{bottom:20.5px;}
@media (max-width:767px){
.apr-cs-wrap .apr-cs-nav{width:42px;height:42px;}
.apr-cs-wrap .apr-cs-prev{right:66px;}
}
@media (max-width:600px){
.apr-cs-wrap .apr-cs-nav{width:36px;height:36px;}
.apr-cs-wrap .apr-cs-prev{right:60px;}
.apr-cs-wrap::before{bottom:18px;}
.apr-cs-wrap::after{bottom:17.5px;}
}
/* ===== Front page small fixes (2026-10-14) ===== */
/* 1. Christmas block (image + text): below 768px it stacks, so centre the heading, text and button instead of leaving them on the left */
@media (max-width:767px){
.apr-feat__content{padding:48px 24px;}
.apr-feat__inner{text-align:center;max-width:560px;margin:0 auto;}
.apr-feat .apr-feat__text{margin-left:auto !important;margin-right:auto !important;}
}
/* 2. "Jaunumi" photo: at 1024px and below the text block is taller and reached the bright part of the photo.
      Taller, slightly darker bottom shading + a very soft shadow behind the white text */
@media (max-width:1024px){
.apr-na-shade{background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.42) 40%,rgba(0,0,0,.12) 70%,rgba(0,0,0,0) 85%);}
.apr-na-copy{text-shadow:0 1px 14px rgba(0,0,0,.35);}
}
/* 3. Smaller vertical gaps between sections: spacing scales with the screen (36px on phones/tablets up to 64px on desktop).
      Product rows were a fixed 64px top+bottom everywhere; reviews up to ~100px; category slider heading 69px; slider bottom 56px */
.apr-hp-section{padding-top:clamp(36px,4.5vw,64px);padding-bottom:clamp(36px,4.5vw,64px);}
.apr-rv{padding-top:clamp(36px,4.5vw,64px);padding-bottom:clamp(36px,4.5vw,64px);}
.apr-sec-head:has(+ .apr-cs-section){padding-top:clamp(36px,4.5vw,69px);}
.apr-cs-section{padding-bottom:clamp(8px,2vw,32px);}
/* "Jaunumi" section gaps (2026-10-14): it sits between two sections with the same cream background, so both paddings added up
   (up to 93px above and 128px below). Smaller space above it, and no bottom padding when the next section is also cream,
   so only the next section's own top spacing remains (64px desktop, 36px phone). */
.apr-na-section{padding-top:clamp(20px,2vw,28px);}
.apr-hp-section:not(.is-alt):has(+ .apr-hp-section:not(.is-alt)){padding-bottom:0;}
/* ===== Cart + checkout pages: keep them on screen (2026-10-14) =====
   Both are "wide" blocks. The Hello theme pulls wide blocks 80px out on both sides at every screen size, and WooCommerce
   (updated 10 Oct) gives the block a fixed 100% width, so on phones/tablets they were pushed ~70px off the left edge
   (and on desktop shifted 80px left of the heading). Now: widen evenly only as far as the screen allows, min 16px gap to the edge. */
.page-content > .wp-block-woocommerce-cart.alignwide,.page-content > .wp-block-woocommerce-checkout.alignwide{width:auto;margin-inline:max(-80px, calc((100% - 100vw) / 2 + 16px));}

/* ===== Language switcher vs slide-out panels (2026-10-14) =====
   The floating LV/EN button (z-index 999999) sat on top of the cart panel's "Noformēt pieprasījumu" button and the
   filter panel's "Notīrīt filtrus". Hide it while the cart panel, the filter panel or the mobile menu is open. */
body:has(.apr-cart-drawer.is-open) #gpt_float_wrapper,body:has(.apr-filtri-drawer.is-open) #gpt_float_wrapper,body:has(.site-navigation-toggle[aria-expanded="true"]) #gpt_float_wrapper{opacity:0;visibility:hidden;pointer-events:none;}
/* ===== Compare page table: whole products per screen (2026-10-14) =====
   Product columns were a fixed 180px (160px on phones), so below ~900px the table scrolled with half-cut columns.
   Now the columns share the visible width: 4 products from 1024px, 3 from 768px, 2 below; with more products the table
   scrolls sideways and snaps to whole products. The sticky label column on the left stays as it was (150px / 104px). */
body.page-id-7433 .apr-compare-scroll{--apr-cmp-lab:150px;--apr-cmp-vis:4;container-type:inline-size;scroll-snap-type:x mandatory;scroll-padding-left:var(--apr-cmp-lab);}
@media (max-width:1023px){body.page-id-7433 .apr-compare-scroll{--apr-cmp-vis:3;}}
@media (max-width:767px){body.page-id-7433 .apr-compare-scroll{--apr-cmp-vis:2;}}
@media (max-width:640px){body.page-id-7433 .apr-compare-scroll{--apr-cmp-lab:104px;}}
body.page-id-7433 .apr-compare-scroll .apr-compare-table{--apr-cmp-n:1;min-width:calc(var(--apr-cmp-lab) + var(--apr-cmp-n) * (100cqw - var(--apr-cmp-lab)) / var(--apr-cmp-vis)) !important;}
/* number of products in the table */
body.page-id-7433 .apr-compare-scroll .apr-compare-table:has(.apr-compare-row--title td:nth-child(2)){--apr-cmp-n:1;}
body.page-id-7433 .apr-compare-scroll .apr-compare-table:has(.apr-compare-row--title td:nth-child(3)){--apr-cmp-n:2;}
body.page-id-7433 .apr-compare-scroll .apr-compare-table:has(.apr-compare-row--title td:nth-child(4)){--apr-cmp-n:3;}
body.page-id-7433 .apr-compare-scroll .apr-compare-table:has(.apr-compare-row--title td:nth-child(5)){--apr-cmp-n:4;}
body.page-id-7433 .apr-compare-scroll .apr-compare-table:has(.apr-compare-row--title td:nth-child(6)){--apr-cmp-n:5;}
body.page-id-7433 .apr-compare-scroll .apr-compare-table:has(.apr-compare-row--title td:nth-child(7)){--apr-cmp-n:6;}
body.page-id-7433 .apr-compare-scroll .apr-compare-table:has(.apr-compare-row--title td:nth-child(8)){--apr-cmp-n:7;}
body.page-id-7433 .apr-compare-scroll .apr-compare-table:has(.apr-compare-row--title td:nth-child(9)){--apr-cmp-n:8;}
body.page-id-7433 .apr-compare-scroll .apr-compare-table td{scroll-snap-align:start;}

/* Wishlist page: 2 products per row on phones (like the shop) instead of 1 full-width card */
@media (max-width:900px){.apr-wishlist-wrap.woocommerce.woocommerce ul.products{grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) !important;gap:28px 12px !important;}}

/* Header icons (search, wishlist, compare, cart) on phones/tablets: 44x44px tap area instead of 20x20.
   The icon graphic gets invisible 12px padding with a matching negative margin, so nothing moves visually;
   the heart's mask stays on the 20px content box. */
@media (max-width:1024px){
.site-header :is(#apr-header-search-toggle,.apr-wishlist-trigger,.apr-compare-trigger,.apr-cart-trigger) > svg{box-sizing:content-box;padding:12px;margin:-12px;overflow:visible;}
.site-header .apr-wishlist-trigger > .apr-heart-shape{box-sizing:content-box;padding:12px;margin:-12px;background-clip:content-box;-webkit-mask-origin:content-box;mask-origin:content-box;-webkit-mask-clip:content-box;mask-clip:content-box;pointer-events:auto;}
}
/* ===== Product page gallery thumbnails on phones/tablets (2026-10-14) =====
   Up to 768px the gallery sits above the product info. WooCommerce wrapped the thumbnails 4 per row, so a product with
   12 photos pushed the name, price and "Ielikt grozā" off the first screen. Now: one row, 5 whole thumbnails visible,
   swipe sideways for the rest (snaps to whole thumbnails). 769px+ (side-by-side layout) is unchanged. */
@media (max-width:768px){
.woocommerce div.product div.images .flex-control-thumbs{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:6px;}
.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar{display:none;}
.woocommerce div.product div.images .flex-control-thumbs li{float:none;flex:0 0 calc((100% - 24px) / 5);width:auto;scroll-snap-align:start;}
}
/* ===== Compare page: wishlist button (2026-10-14) =====
   It had no text wrapping and 16px text, so "Pievienot vēlmju sarakstam" / "Vēlmju sarakstā" ran out of the button at most widths.
   Now it matches "Izvēlēties šo preci" (13px, wraps) with the site's heart icon in front; outline = not in wishlist,
   filled dark = already in wishlist. On phones (narrow columns) only the heart is shown (text stays for screen readers). */
body.page-id-7433 .apr-compare-table .apr-compare-wishlist-btn{display:flex !important;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;margin-top:8px !important;padding:11px 12px !important;white-space:normal !important;text-align:center;font-family:"Public Sans",sans-serif !important;font-size:13px !important;font-weight:400 !important;line-height:1.5 !important;letter-spacing:0 !important;text-transform:none !important;background:transparent !important;color:#33312B !important;border:1px solid #33312B !important;border-radius:0 !important;}
body.page-id-7433 .apr-compare-table .apr-compare-wishlist-btn::before{content:'';flex:0 0 16px;width:16px;height:16px;background:currentColor;-webkit-mask:url("/wp-content/uploads/2026/09/apr-wishlist-heart-v2.png") center/contain no-repeat;mask:url("/wp-content/uploads/2026/09/apr-wishlist-heart-v2.png") center/contain no-repeat;}
body.page-id-7433 .apr-compare-table .apr-compare-wishlist-btn:hover,body.page-id-7433 .apr-compare-table .apr-compare-wishlist-btn.is-active{background:#33312B !important;color:#fff !important;}
@media (max-width:767px){
body.page-id-7433 .apr-compare-table .apr-compare-wishlist-btn{font-size:0 !important;line-height:0 !important;gap:0;padding:12px !important;}
body.page-id-7433 .apr-compare-table .apr-compare-wishlist-btn::before{flex-basis:18px;width:18px;height:18px;}
}
/* Compare page wishlist button states (2026-10-14, replaces the dark "filled" active look above):
   same as the hearts on product cards - in wishlist = RED heart on the normal light background,
   not in wishlist = dark heart. Clicking toggles (add / remove), see apdrukas-wl-cmp-cache.php. */
body.page-id-7433 .apr-compare-table .apr-compare-wishlist-btn.is-active{background:transparent !important;color:#33312B !important;cursor:pointer;}
/* In wishlist = solid red heart (same shape, filled: apr-wishlist-heart-v2-filled.png), white/light background, normal border */
body.page-id-7433 .apr-compare-table .apr-compare-wishlist-btn.is-active::before{background:#c0392b;-webkit-mask-image:url("/wp-content/uploads/2026/09/apr-wishlist-heart-v2-filled.png");mask-image:url("/wp-content/uploads/2026/09/apr-wishlist-heart-v2-filled.png");}
body.page-id-7433 .apr-compare-table .apr-compare-wishlist-btn.is-active:hover{background:#F3F0E8 !important;color:#33312B !important;}

/* ==========================================================================
   13. Small labels: minimum readable text size (added 2026-10-14)
   Some labels were 9.5-10.5px, too small to read on phones. Raised to 11px+.
   "body" in front so these win over the feature files' own styles.
   ========================================================================== */
/* Product card badges ("NO 30 GAB.", "EKO", "JAUNUMS") on home page product rows: was 10.5px, 9.5px on phones */
body .apr-hp-badge{font-size:11px;}
/* "ar PVN" after prices: was 0.8 of the price size (9.6px in the small product grid on the cart page); never below 11px */
body .woocommerce-price-suffix{font-size:max(.8em,11px);}
/* Colour names under the colour swatches (product page + shop filters): was 10.5px */
body .apr-color-name{font-size:11.5px;}
/* "Skatīt →" on the home page category slider cards: was 10px */
body .apr-cs-cta{font-size:11.5px;}
/* "GOOGLE ATSAUKSMES" label on review cards: was 10.5px */
body .apr-pepe-rv__src{font-size:11px;}
/* "Pašizņemšana — Ventspils iela 48, Rīga" under "Piegāde" in the cart / checkout totals: was 9.95px; 12px, just below the 13px "Piegāde" label */
body .wc-block-components-totals-shipping .wc-block-components-totals-shipping__via{font-size:12px;}


/* ==========================================================================
   14. Shop grid: wide product photos shown whole (added 2026-10-14)
   Cards marked "apr-wide-photo" by apdrukaspreces-custom.php section 13.
   ========================================================================== */
/* same square space as the other cards, but the whole photo fits inside it (no cut-off sides); white behind it, like the photo's own background */
body ul.products li.product.apr-wide-photo img{object-fit:contain!important;background:#fff!important;}

/* ===== Front page: 'Populārākās kategorijas' slider full width (2026-10-14) =====
   Only this section drops the 1440px box; side gutter (--apr-g) stays so tiles don't touch the screen edge. */
.home .apr-cs-wrap,
.home .apr-sec-head:has(+ .apr-cs-section) .apr-sec-head__in{max-width:none;}

/* ==========================================================================
   15. Language flag (GPTranslate) in the header (added 2026-10-14)
   The plugin's floating LV/EN button (bottom-left corner) covered content on
   phones and tablets (checkout checkboxes, prices). apdrukaspreces-custom.js
   section 7 moves it into the header; these rules make it look like the other
   header icons. Plugin settings are unchanged.
   ========================================================================== */
/* the flag sits in the header row, right after the search icon, vertically centred with the icons */
header.site-header .header-inner > #gpt-wrapper.apr-docked{position:relative;z-index:15 !important;display:flex !important;align-items:center;margin:0 0 0 14px !important;line-height:0;}
/* until the plugin has loaded, the container shows the current flag as a background (set in apdrukaspreces-custom.php section 16), same size and place as the real flag, so the header does not move */
header.site-header .header-inner > #gpt-wrapper.apr-docked{min-width:22px;min-height:16px;background:center / 22px 16px no-repeat;border-radius:2px;}
header.site-header .header-inner > #gpt-wrapper.apr-docked:empty{box-shadow:0 0 0 1px rgba(0,0,0,.15);}
/* once the plugin's flag is there, it covers the placeholder */
header.site-header .header-inner > #gpt-wrapper.apr-docked:not(:empty){background-image:none !important;}
/* z-index 15: the open search box (z-index 20) covers the flag like the other icons */
#gpt-wrapper.apr-docked #gpt_float_wrapper{position:static !important;inset:auto !important;margin:0 !important;z-index:auto !important;display:flex !important;align-items:center;line-height:0;}
/* no white box / shadow around it */
#gpt-wrapper.apr-docked .gpt_float_switcher{display:flex !important;align-items:center;background:transparent !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important;min-width:0 !important;line-height:0;}
#gpt-wrapper.apr-docked .gt-selected{display:flex !important;align-items:center;background:transparent !important;padding:0 !important;margin:0 !important;border:0 !important;line-height:0;}
/* invisible bigger tap area around the flag */
#gpt-wrapper.apr-docked .gpt-current-lang{display:flex !important;align-items:center;padding:12px 6px !important;margin:-12px -6px !important;cursor:pointer;border:0 !important;background:transparent !important;}
/* flag size close to the other icons (22x16) */
#gpt-wrapper.apr-docked .gt-selected .gptranslate-flag{display:block !important;width:22px !important;height:16px !important;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15);margin:0 !important;}
/* only the flag in the header: no "lv" text, no arrow */
#gpt-wrapper.apr-docked .gt-lang-code,#gpt-wrapper.apr-docked .gpt_float_switcher-arrow{display:none !important;}
/* language list opens below the flag (the plugin opens it upwards) */
#gpt-wrapper.apr-docked .gpt_options{position:absolute !important;top:calc(100% + 16px) !important;bottom:auto !important;left:50% !important;transform:translateX(-50%) !important;background:#fff !important;box-shadow:0 8px 24px rgba(0,0,0,.12) !important;border:1px solid #DDD8CB;padding:6px 0 !important;min-width:160px;z-index:30;line-height:normal;}
#gpt-wrapper.apr-docked .gpt_options.gt-open{opacity:1 !important;}
/* both languages listed, the current one highlighted */
#gpt-wrapper.apr-docked .gpt_options a{display:flex !important;align-items:center;gap:10px;padding:11px 16px !important;font-size:14px !important;color:#33312B !important;white-space:nowrap;text-decoration:none;}
#gpt-wrapper.apr-docked .gpt_options a.gpt-current{font-weight:700;background:#F6F4EE;}
#gpt-wrapper.apr-docked .gpt_options .gptranslate-flag{width:20px !important;height:14px !important;margin:0 !important;}
/* spacing to the next icon, matching the gaps between the other icons */
@media (min-width:768px) and (max-width:1024px){header.site-header .header-inner > #gpt-wrapper.apr-docked{margin:0 0 0 18px !important;}}
@media (min-width:1025px){header.site-header .header-inner > #gpt-wrapper.apr-docked{margin:0 26px 0 0 !important;}}
/* 601-767px: no room on the right of the centred logo, so the flag sits on the left, next to the menu button */
@media (min-width:601px) and (max-width:767.98px){
  header.site-header .header-inner > #gpt-wrapper.apr-docked{order:-1;margin-left:4px !important;margin-right:auto !important;}
  header.site-header .site-navigation-toggle-holder{margin-right:0 !important;}
}
/* phones (up to 600px): menu, search and flag on the left, wishlist/compare/cart on the right */
@media (max-width:600px){
  header.site-header .header-inner > #gpt-wrapper.apr-docked{order:-1;margin-left:4px !important;margin-right:auto !important;}
  header.site-header .header-inner > .apr-header-search{margin-left:4px !important;margin-right:0 !important;}
}


/* ==========================================================================
   16. "Page not found" (404) page (added 2026-10-14)
   Page content: apdrukaspreces-custom.php section 17.
   ========================================================================== */
/* the page fills at least the whole screen height, so the footer sits at the bottom (was a white gap under it on large screens); the admin bar height is taken off when logged in */
body.error404{display:flex;flex-direction:column;min-height:calc(100vh - var(--wp-admin--admin-bar--height, 0px));}
/* the content area takes the free height; width 100% keeps it the theme's normal width */
body.error404 > main#content{flex:1 0 auto;width:100%;display:flex;align-items:center;justify-content:center;}
/* centred block with side space, so text never touches the screen edge on phones */
.apr-404__inner{max-width:600px;margin:0 auto;padding:48px 20px 64px;text-align:center;}
/* big light "404" above the heading */
.apr-404__code{margin:0 0 8px;font-family:Manrope,sans-serif;font-size:clamp(64px,12vw,112px);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--apr-sage-line);}
/* heading in the site's heading font */
.apr-404__title{margin:0 0 14px;font-family:Manrope,sans-serif;font-size:clamp(28px,4.5vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--apr-ink);}
.apr-404__text{margin:0 auto 28px;max-width:480px;font-size:16px;line-height:1.6;color:var(--apr-ink-soft);}
/* search: field + button in one row, same look as the site's form fields and buttons (square corners) */
.apr-404__search{display:flex;max-width:480px;margin:0 auto 20px;}
.apr-404__search input[type=search]{flex:1 1 auto;min-width:0;height:50px;padding:12px 14px;border:1px solid #DDD8CB;border-right:0;border-radius:0;background:#F3F0E8;color:var(--apr-ink);font-size:15px;}
.apr-404__search input[type=search]:focus{outline:2px solid var(--apr-sage);outline-offset:-2px;}
.apr-404__search button{flex:0 0 auto;height:50px;padding:0 24px !important;border:1px solid var(--apr-ink);border-radius:0;background:var(--apr-ink);color:#fff;font-size:15px;font-weight:500;cursor:pointer;}
.apr-404__search button:hover,.apr-404__search button:focus{background:var(--apr-sage-dark);border-color:var(--apr-sage-dark);color:#fff;}
/* two link buttons: "home page" (filled) and "all products" (outline) */
.apr-404__links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.apr-404__btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border:1px solid var(--apr-ink);color:var(--apr-ink) !important;font-size:15px;font-weight:500;text-decoration:none !important;transition:background .2s,color .2s;}
.apr-404__btn:hover,.apr-404__btn:focus{background:var(--apr-ink);color:#fff !important;}
.apr-404__btn--main{background:var(--apr-ink);color:#fff !important;}
.apr-404__btn--main:hover,.apr-404__btn--main:focus{background:var(--apr-sage-dark);border-color:var(--apr-sage-dark);}
/* phones: buttons full width, one under the other */
@media (max-width:480px){.apr-404__inner{padding:48px 16px 64px;}.apr-404__links{flex-direction:column;}.apr-404__btn{width:100%;}}
/* header flag on the 404 page: a plain <details> list (GPTranslate does not run there); the open list reuses the look from section 15 */
#gpt-wrapper.apr-404-lang .apr-404-lang__box > summary{display:flex;align-items:center;padding:12px 6px;margin:-12px -6px;cursor:pointer;list-style:none;line-height:0;}
#gpt-wrapper.apr-404-lang .apr-404-lang__box > summary::-webkit-details-marker{display:none;}
#gpt-wrapper.apr-404-lang .apr-404-lang__box > summary:focus-visible{outline:2px solid var(--apr-sage);outline-offset:-4px;}
#gpt-wrapper.apr-404-lang summary .gptranslate-flag{display:block;width:22px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.15);margin:0;}

/* ==========================================================================
   17. Filtri panel: colour grid fills the whole width (added 2026-10-14)
   Each colour had a fixed 54px box, lined up from the left, so there was empty
   space on the right while long names ("Daudzkrāsaina" 79px, "Caurspīdīga")
   ran into each other, on phones and on computers. The panel styles are in
   apdrukas-shop-filters.php; these rules override only the colour grid inside
   the Filtri panel (not the colour picker on product pages).
   ========================================================================== */
/* equal columns of at least 80px that share the full width: 3 per row on normal phones, 4 when the panel is wider; all names fit on one line */
.apr-filtri-drawer .apr-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:16px 2px;}
/* the colour fills its column instead of the fixed 54px box */
.apr-filtri-drawer .apr-color-item{width:auto;min-width:0;}
/* tablets and computers: panel 400px instead of 380px, so 4 colours per row fit (on phones it stays 92% of the screen width) */
/* ("body" in front because the panel's own styles load later in the page and would win otherwise) */
@media (min-width:768px){body .apr-filtri-drawer{width:400px;}}


/* ==========================================================================
   18. Filtri panel: price slider, left ball no longer crossed by the line (added 2026-10-14)
   The slider is two range inputs on top of each other (apdrukas-shop-filters.php):
   min underneath, max on top. Each drew its own grey line, so the upper (max)
   input's line ran across the lower (min) input's black ball. Now only the lower
   input draws the line; the browser itself keeps line and balls lined up, so it
   looks the same in every browser and both balls sit on top of the line.
   ========================================================================== */
/* the upper (max) input's own line is invisible; the lower (min) input's line stays as the one visible line ("body" in front because the panel's own styles load later in the page) */
body .apr-price-sliders #apr-price-max::-webkit-slider-runnable-track{background:transparent;}
body .apr-price-sliders #apr-price-max::-moz-range-track{background:transparent;}


/* ==========================================================================
   19. Page title space below the header (added 2026-10-14)
   On pages that use the theme's plain page title (Grozs, Pasūtījuma pieprasījums,
   Vēlmju saraksts, Produktu salīdzināšana, My account) the title touched the
   header (0px gap). The shop has ~37px, the content pages more. Blog has its own
   spacing (not a "page", so not affected); the home page is excluded.
   ========================================================================== */
/* 48px between the header and the title on computers and tablets */
body.page:not(.home) main#content > .page-header{padding-top:48px;}
/* 32px on phones */
@media (max-width:767.98px){body.page:not(.home) main#content > .page-header{padding-top:32px;}}


/* ==========================================================================
   20. Header icons: bigger tap area on touch screens (added 2026-10-14)
   Search, wishlist, compare and cart reacted to only 20x20px; ~44px is the
   recommended size for a finger. The icons keep their size and place: an
   invisible 44x44px square is centred on each icon (the flag already has its own,
   section 15). Only on touch screens; there ::before is unused (the hover labels
   of section 5 use it only with a mouse). Checked: at all widths the squares do
   not overlap each other, the flag, the menu button or the logo.
   ========================================================================== */
@media (hover:none),(pointer:coarse){
  .site-header #apr-header-search-toggle,.site-header #apr-wishlist-trigger,.site-header #apr-compare-trigger,.site-header #apr-cart-trigger{position:relative;}
  .site-header #apr-header-search-toggle::before,.site-header #apr-wishlist-trigger::before,.site-header #apr-compare-trigger::before,.site-header #apr-cart-trigger::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);background:transparent;}
}


/* ==========================================================================
   21. Apdrukas veidi comparison table as cards on phones and tablets (added 2026-10-14)
   "Kuru apdrukas veidu izvēlēties?" (.pt-cmp, LV + /en/). The table is 980px wide
   and below 1024px it only fitted by dragging it sideways. Now, below 1024px,
   each method is one card: photo + name on top, then Materiāli / Tipiskās preces /
   Krāsas / Priekšrocības, each with a small label. 1 card per row on phones, 2 on
   tablets. 1024px and wider: the table is unchanged. Labels come from
   apdrukaspreces-custom.js section 8; the table's own styles are in
   apdrukas-pages.php ("body" / !important here so these win).
   ========================================================================== */
/* the "drag the table sideways" hint is never needed now (the table fits from 1024px, cards below); it still showed at exactly 1024px */
body .pt-cmp p.pt-cmp-hint{display:none !important;}
@media (max-width:1023.98px){
  /* no scroll box, no 980px minimum width */
  body .pt-cmp figure.pt-cmp-table{overflow:visible;border:0;}
  body .pt-cmp table{display:block;min-width:0;background:transparent;}
  /* column headings hidden but still read by screen readers */
  body .pt-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  /* cards: at least 300px wide, so 1 per row on phones, 2 on tablets */
  body .pt-cmp tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
  body .pt-cmp tbody tr{display:block;background:#fff;border:1px solid rgba(51,49,43,.15);}
  /* no zebra stripes / hover colour inside the cards */
  body .pt-cmp tbody tr > *{background:transparent !important;}
  /* card top: photo on the left, name (and "also 360°..." note) next to it, vertically centred */
  body .pt-cmp tbody th{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left !important;width:auto;min-height:96px;position:relative;padding:16px 18px 16px 96px !important;border-bottom:1px solid rgba(51,49,43,.12) !important;}
  body .pt-cmp tbody th img{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:64px !important;height:64px !important;margin:0 !important;}
  body .pt-cmp tbody th em{margin-top:2px;}
  /* each value under its own small label */
  body .pt-cmp tbody td{display:block;padding:10px 18px !important;border-bottom:0 !important;white-space:normal !important;}
  body .pt-cmp tbody td:last-child{padding-bottom:18px !important;}
  body .pt-cmp tbody td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5c594f;margin-bottom:3px;}
  /* "Citi pieejamie veidi" heading row: full width, between the two groups, no card frame */
  body .pt-cmp tbody tr:has(td[colspan]){grid-column:1 / -1;background:transparent;border:0;}
  body .pt-cmp tbody td[colspan]{padding:14px 0 0 !important;background:transparent !important;}
}